/* Shared Workbench site shell. Reusable controls live in workbench-components.css. */
* { box-sizing: border-box; }
:root { --shell-header-height: 4rem; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-line); }
a { text-decoration: none; }
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Orientation artboards: portrait 320×640, landscape 640×320 (CSS px). */
.lu4-viewport {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: var(--lu4-viewport-portrait-min-width, 320px);
  min-height: max(100svh, var(--lu4-viewport-portrait-min-height, 640px));
  min-height: max(100dvh, var(--lu4-viewport-portrait-min-height, 640px));
}
@media (orientation: landscape) {
  .lu4-viewport {
    min-width: var(--lu4-viewport-landscape-min-width, 640px);
    min-height: max(100svh, var(--lu4-viewport-landscape-min-height, 320px));
    min-height: max(100dvh, var(--lu4-viewport-landscape-min-height, 320px));
  }
}
/* Canvas pages fill the shell so map layout stays intact when the window is shorter than the artboard. */
.lu4-viewport:has(.map-app) {
  height: max(100svh, var(--lu4-viewport-portrait-min-height, 640px));
  height: max(100dvh, var(--lu4-viewport-portrait-min-height, 640px));
  overflow: hidden;
}
@media (orientation: landscape) {
  .lu4-viewport:has(.map-app) {
    height: max(100svh, var(--lu4-viewport-landscape-min-height, 320px));
    height: max(100dvh, var(--lu4-viewport-landscape-min-height, 320px));
  }
}
.lu4-viewport:has(.map-app) .map-app {
  height: 100%;
  min-height: 0;
}

.shell-header { position: fixed; z-index: 10; top: 0; right: 0; left: 0; border-bottom: 1px solid var(--border); background: var(--elevated); box-shadow: none; }
.shell-header--canvas { border-bottom-color: var(--glass-border); background: var(--glass-background); box-shadow: var(--floating-shadow), inset 0 1px 0 var(--inset-highlight); -webkit-backdrop-filter: var(--glass-canvas-backdrop, var(--glass-backdrop)); backdrop-filter: var(--glass-canvas-backdrop, var(--glass-backdrop)); }
.shell-header__inner { display: grid; grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr); align-items: center; width: min(100% - var(--space-8), 86rem); min-height: 4rem; margin: 0 auto; }
.brand-identity { display: inline-flex; min-width: 0; }
.brand-lockup { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .35rem; margin-inline-start: -.5rem; padding: 0 .5rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--lu4-accent); }
.brand-lockup:hover { background: var(--control-hover-bg); color: var(--lu4-accent-hover); }
.brand-lockup__mark, .brand-lockup__wordmark { display: block; flex: 0 0 auto; background: currentColor; }
.brand-lockup__mark { width: 1.4rem; height: 1.4rem; -webkit-mask: url("lu4-guide-mark.svg?v=theme-lockup-1") center / contain no-repeat; mask: url("lu4-guide-mark.svg?v=theme-lockup-1") center / contain no-repeat; }
.brand-lockup__wordmark { width: 6.72rem; height: 1.4rem; -webkit-mask: url("lu4-guide-wordmark.svg?v=theme-lockup-1") center / contain no-repeat; mask: url("lu4-guide-wordmark.svg?v=theme-lockup-1") center / contain no-repeat; }
.shell-nav { display: flex; align-self: stretch; align-items: stretch; gap: var(--space-1); }
.shell-nav > a, .shell-nav__button { position: relative; display: inline-flex; align-items: center; gap: .2rem; min-height: 100%; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 600; text-decoration: none; }
.shell-nav > a:hover, .shell-nav__button:hover { color: var(--text); }
.shell-nav > a:focus-visible,
.shell-nav__button:focus-visible {
  outline: none;
  color: var(--text);
}
.shell-nav > a:focus-visible::after,
.shell-nav__button:focus-visible::after {
  position: absolute;
  right: var(--space-3);
  bottom: 0;
  left: var(--space-3);
  height: 2px;
  border-radius: var(--lu4-radius-full);
  background: var(--focus);
  content: "";
}
.shell-nav > a[aria-current="page"], .shell-nav__button[data-current="true"] { color: var(--text); }
.shell-nav > a[aria-current="page"]::after, .shell-nav__button[data-current="true"]::after {
  position: absolute;
  right: var(--space-3);
  bottom: 0;
  left: var(--space-3);
  height: 2px;
  border-radius: var(--lu4-radius-full);
  background: var(--lu4-accent);
  content: "";
}
.shell-nav__button[aria-expanded="true"] { color: var(--text); }
.shell-nav__group { position:relative; display: flex; align-items: stretch; }
.shell-nav__button svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s ease; }
.shell-nav__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.shell-tools { display: flex; justify-self: end; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--type-dense-size); line-height: var(--type-dense-line); font-weight: 600; }
.shell-tools__icon, .shell-tools__language { display: grid; min-width: 2.5rem; height: 2.5rem; place-items: center; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; }
.shell-tools__palette { display: grid; min-width: 2.5rem; height: 2.5rem; place-items: center; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; }
.shell-tools__palette svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-tools__palette .shell-theme-moon { display: none; }
html[data-lu4-palette="paper"] .shell-tools__palette .shell-theme-sun { display: none; }
html[data-lu4-palette="paper"] .shell-tools__palette .shell-theme-moon { display: block; }
.shell-tools__icon:hover, .shell-tools__language:hover, .shell-tools__palette:hover { background: var(--control-hover-bg); color: var(--lu4-accent-hover); }
.shell-tools__icon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shell-tools__menu { display: none; }

/* Full-width band with one centered, ungrouped set of destinations. */
.shell-secondary { position:relative; width:100%; max-height:calc(100dvh - var(--shell-header-height) - var(--space-3)); overflow:auto; overscroll-behavior:contain; visibility:hidden; opacity:0; transition:opacity .16s ease,visibility 0s linear .24s; pointer-events:none; }
.shell-secondary.is-open { visibility:visible; opacity:1; transition-delay:0s; pointer-events:auto; }
.shell-secondary[hidden] { display:none; }
.shell-secondary__panel { --shell-menu-columns:5; display:grid; grid-template-columns:repeat(var(--shell-menu-columns),minmax(0,1fr)); align-items:stretch; gap:var(--space-1) var(--space-3); width:calc(var(--shell-menu-columns) * 13.5rem + (var(--shell-menu-columns) - 1) * var(--space-3)); max-width:calc(100% - var(--space-8)); margin:0 auto; padding:var(--space-4) 0; border-top:1px solid var(--border); }
.shell-secondary__panel[data-subnav-panel="starters"] { --shell-menu-columns:3; }
.shell-secondary__panel a { display:flex; align-items:center; gap:var(--space-2); min-width:0; min-height:var(--lu4-touch-target); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:var(--type-ui-size); line-height:var(--type-ui-line); font-weight:500; }
.shell-secondary__panel a > span { min-width:0; }
.shell-secondary__panel img { flex:none; width:1.5rem; height:1.5rem; object-fit:contain; }
.shell-secondary__panel a:hover { background:var(--control-hover-bg); color:var(--text); }
.shell-secondary__panel a[aria-current="page"] { background:var(--selection-bg); color:var(--text); font-weight:600; }
.shell-secondary__panel[hidden] { display:none; }
/* Geometry belongs to the shell; material, headings and controls are shared. */
.shell-dialog, .support-dialog { width: min(calc(100% - var(--space-6)), 32rem); max-width: none; max-height: calc(100dvh - var(--space-6)); margin: auto; padding: var(--space-5); overflow: auto; overscroll-behavior: contain; color: var(--text); }
.shell-dialog { width: min(calc(100% - var(--space-6)), 30rem); padding: calc(var(--space-4) + var(--space-1)); }
.shell-dialog::backdrop, .support-dialog::backdrop { background: var(--lu4-modal-backdrop); -webkit-backdrop-filter: var(--lu4-modal-backdrop-filter); backdrop-filter: var(--lu4-modal-backdrop-filter); }
.shell-dialog__scopes { display: flex; align-self: stretch; gap: var(--space-4); }
.shell-dialog__scopes button { position: relative; min-width: var(--lu4-touch-target); min-height: var(--lu4-touch-target); padding: 0 var(--space-1); border: 0; background: transparent; color: var(--text-muted); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: var(--lu4-weight-regular); cursor: pointer; }
.shell-dialog__scopes button:hover { color: var(--text); }
.shell-dialog__scopes button[aria-selected="true"] { color: var(--text); }
.shell-dialog__scopes button[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: var(--space-5); height: 2px; transform: translateX(-50%); background: var(--lu4-accent); }
.shell-dialog__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--space-2); margin-top: var(--space-3); }
.shell-dialog__form .wb-button--icon svg { width: 1rem; height: 1rem; }
.support-dialog__intro { margin: var(--space-2) 0 var(--space-5); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-body-line); }
.support-dialog__local, .support-dialog__international { margin-top: var(--space-3); }
.support-dialog [hidden] { display: none !important; }
.support-dialog__methods { display: none; }
.support-dialog__codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.support-dialog__codes figure { min-width: 0; margin: 0; text-align: center; }
.support-dialog__codes figcaption { margin-bottom: var(--space-3); font-size: var(--type-ui-size); line-height: var(--type-ui-line); color: var(--text-secondary); }
.support-dialog__codes img { display: block; width: min(100%, 12.25rem); height: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.support-dialog__payment-link[aria-disabled="true"] { border-color: var(--control-border); background: var(--control-bg); color: var(--text-muted); cursor: default; }
.support-dialog__contact { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--control-border); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.support-dialog__contact > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.support-dialog__contact dt { color: var(--text-muted); }
.support-dialog__contact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.support-dialog__contact a { color: var(--link); }
.support-dialog__contact a:hover { color: var(--link-hover); }

.mobile-drawer[hidden] { display: none; }
.mobile-drawer { position: fixed; z-index: 30; inset: 0; }
.mobile-drawer__backdrop { position: absolute; inset: 0; border: 0; background: var(--lu4-modal-backdrop); -webkit-backdrop-filter: var(--lu4-modal-backdrop-filter); backdrop-filter: var(--lu4-modal-backdrop-filter); }
.mobile-drawer__panel { position: relative; display: flex; flex-direction: column; gap: var(--space-1); width: min(88vw, 21rem); height: 100%; margin-left: auto; padding: 0 var(--space-4) var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; border-width: 0 0 0 1px; border-radius: 0; }
.mobile-drawer__panel > * { flex-shrink: 0; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--shell-header-height) + 1px); margin-bottom: var(--space-4); border-bottom: 1px solid var(--control-border); }
.mobile-drawer__brand { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--lu4-touch-target); color: var(--lu4-accent); }
.mobile-drawer__languages { display: none; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: var(--space-2); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); }
.mobile-drawer__languages button { min-height: 2.75rem; border: 0; background: var(--control-bg); color: var(--control-text); font-size: var(--type-dense-size); line-height: var(--type-dense-line); font-weight: 600; }
.mobile-drawer__languages button[aria-pressed="true"] { background: var(--selection-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--selection-border); }
.mobile-drawer__panel > a { position: relative; display: flex; align-items: center; min-height: var(--lu4-touch-target); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 600; text-decoration: none; }
.mobile-drawer__panel > a:hover { background: var(--surface); color: var(--text); }
.mobile-drawer__panel > a[aria-current="page"] { background: transparent; color: var(--text); }
.mobile-drawer__panel a[aria-current="page"]::before { content: ""; position: absolute; top: var(--space-3); bottom: var(--space-3); left: 0; width: 2px; background: var(--lu4-accent); }
.mobile-drawer__section { min-width:0; }
.mobile-drawer__section > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:var(--lu4-touch-target); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:var(--type-ui-size); line-height:var(--type-ui-line); font-weight:600; list-style:none; cursor:pointer; }
.mobile-drawer__section > summary::-webkit-details-marker { display:none; }
.mobile-drawer__section > summary:hover { background:var(--surface); color:var(--text); }
.mobile-drawer__section > summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.mobile-drawer__section[data-current="true"] > summary { color:var(--text); }
.mobile-drawer__collections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-1); padding:var(--space-2); }
.mobile-drawer__guides,.mobile-drawer__starters { display:grid; gap:0; padding:var(--space-2); }
.mobile-drawer__guides .shell-guide-group__title { padding:var(--space-2); padding-inline-start:calc(var(--space-2) + 1.5rem + var(--space-2)); }
.mobile-drawer__section a { position: relative; display: flex; align-items: center; gap: var(--space-2); min-width:0; min-height: var(--lu4-touch-target); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 500; text-decoration: none; }
.mobile-drawer__section img { flex:none; width: 1.5rem; height: 1.5rem; object-fit:contain; }
.mobile-drawer__section a:hover { background: var(--surface); color: var(--text); }
.mobile-drawer__section a[aria-current="page"] { background:var(--selection-bg); color:var(--text); font-weight:600; }
.mobile-drawer__section a[aria-current="page"]::before { content:none; }
.mobile-drawer__languages { flex-shrink: 0; margin-top: auto; margin-bottom: 0; gap: var(--space-2); padding-top: var(--space-4); border: 0; border-radius: 0; background: transparent; }
.mobile-drawer__languages button { border: 1px solid var(--control-border); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); }
.mobile-drawer__languages button[aria-pressed="true"] { border-color: var(--selection-border); box-shadow: none; }

@media (max-width: 1279px) {
  :root { --shell-header-height: 3.5rem; }
  .shell-header__inner { grid-template-columns: 1fr auto; width: min(100% - var(--space-5), 80rem); min-height: 3.5rem; }
  .shell-secondary__panel { --shell-menu-columns:4; max-width:calc(100% - var(--space-5)); }
  .shell-nav { display: none; }
  .shell-tools__menu { display: grid; }
  .shell-tools__icon, .shell-tools__language, .shell-tools__palette { min-width: 2.75rem; height: 2.75rem; }
  .shell-tools__language { padding: 0 var(--space-1); }
}

@media (max-width: 639px) {
  .shell-tools { gap: var(--space-1); }
  .shell-tools__palette { min-width: 2.75rem; padding: 0 var(--space-1); }
  .mobile-drawer__languages { display: grid; }
  .shell-dialog, .support-dialog { position: fixed; top: calc(var(--shell-visual-top, 0px) + max(var(--space-4), env(safe-area-inset-top))); bottom: calc(var(--shell-visual-bottom, 0px) + max(var(--space-4), env(safe-area-inset-bottom))); left: max(var(--space-4), env(safe-area-inset-left)); right: max(var(--space-4), env(safe-area-inset-right)); width: auto; max-width: 32rem; max-height: calc(var(--shell-visual-height, 100dvh) - max(var(--space-4), env(safe-area-inset-top)) - max(var(--space-4), env(safe-area-inset-bottom))); margin: auto; padding: var(--space-4); }
  .shell-dialog { max-width: 30rem; padding: calc(var(--space-4) + var(--space-1)); }
  .shell-dialog .search-field input { font-size: 1rem; }
  .support-dialog__methods { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--control-border); }
  .support-dialog__methods button { position: relative; min-height: var(--lu4-touch-target); padding: 0 var(--space-2); border: 0; background: transparent; color: var(--text-muted); font-size: var(--type-ui-size); }
  .support-dialog__methods button[aria-selected="true"] { color: var(--text); }
  .support-dialog__methods button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 2px; background: var(--lu4-accent); }
  .support-dialog__codes { grid-template-columns: minmax(0, 1fr); }
  .support-dialog__codes figcaption { display: none; }
}

@media (min-width: 960px) and (max-width: 1279px) {
  .shell-header__inner { grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr); }
  .shell-nav { display: flex; }
  .shell-tools__menu { display: none; }
}
@media (max-width:959px) { .shell-secondary { display:none; } }

@media (max-width: 420px) {
  .brand-lockup { min-height: 2.75rem; gap: .3rem; }
  .brand-lockup__mark { width: 1.3rem; height: 1.3rem; }
  .brand-lockup__wordmark { width: 6.24rem; height: 1.3rem; }
  .shell-tools { gap: 0; }
}

@media (max-width: 359px) {
  .shell-header__inner { width: calc(100% - var(--space-4)); }
  .brand-lockup { margin-inline-start: -.35rem; padding-inline: .35rem; }
  .brand-lockup__mark { width: 1.2rem; height: 1.2rem; }
  .brand-lockup__wordmark { width: 5.52rem; height: 1.15rem; }
  .shell-tools__icon, .shell-tools__language { padding-inline: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}