/* ==========================================================================
   Design system: fonts, base, layout, components, utilities (in this order).
   Ported from the prototype stylesheet with its class names. Colours come only
   from tokens.css through var(--token); no colour literal belongs in this file.
   Divergences from the prototype: docs/frontend/design-system/divergences.md.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; DIV-04, DIV-15) ---------- */
@font-face{
  font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-ext-opsz-normal.084b211fc382.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-opsz-normal.4b73e2ff3024.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:italic; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-ext-opsz-italic.af57dae033bf.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:italic; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-opsz-italic.59036e902b79.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:100 800;
  src:url("../fonts/jetbrains-mono-latin-ext-wght-normal.e36841ed93d5.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:100 800;
  src:url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Base ---------- */
:root{color-scheme:light;}                    /* DIV-09 */
[data-theme="dark"]{color-scheme:dark;}       /* DIV-09 */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation-duration:.001ms !important; transition-duration:.001ms !important;} }   /* pseudo-elements: DIV-20 */

.mono{font-family:var(--mono);}
.icon{width:18px; height:18px; flex:none;}

/* ---------- App shell ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--nav-w); flex:none; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
}
.sidebar__brand{display:flex; align-items:center; gap:10px; padding:20px 20px 16px;}
.sidebar__mark{width:28px;height:28px;border-radius:7px;background:var(--brand);position:relative;flex:none;}
.sidebar__mark::after{content:"";position:absolute;inset:7px;border:2px solid var(--surface);border-radius:3px;}
.sidebar__word{font-weight:700; font-size:16.5px; letter-spacing:-.01em;}
.sidebar nav{padding:8px 12px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.navlink{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-s);
  color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500;
}
.navlink svg{width:18px;height:18px; flex:none;}
.navlink:hover{background:var(--surface-2); color:var(--ink);}
.navlink.active{background:var(--brand-tint); color:var(--brand-ink); font-weight:600; box-shadow:inset 3px 0 0 var(--brand);} /* accent: DIV-13 */
.sidebar__section{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); padding:16px 12px 4px;}
.sidebar__foot{padding:14px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint);}
.scrim{position:fixed; inset:0; background:var(--scrim); z-index:100;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:var(--topbar-h); border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:30;
  gap:16px;
}
.topbar__title{
  font-size:17px; font-weight:600;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;   /* one line, truncated (task DEF-004) */
}
.topbar > :first-child{min-width:0;}   /* lets the title truncate instead of pushing the targets */
.topbar__right{display:flex; align-items:center; gap:10px;}
.iconbtn{
  width:38px;height:38px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink);}
.topbar .iconbtn{flex-shrink:0;}   /* a long title never squeezes a 44 px target (DEF-004) */
.theme-toggle__sun{display:none;}
.theme-toggle__moon, .theme-toggle__sun{align-items:center; justify-content:center;}
.theme-toggle__moon{display:flex;}
[data-theme="dark"] .theme-toggle__moon{display:none;}
[data-theme="dark"] .theme-toggle__sun{display:flex;}
.content{padding:26px 28px 44px; max-width:1240px; width:100%; margin:0 auto;}
.content.has-sticky-footer{padding-bottom:28px;}
.menu-btn{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px;
  border-radius:var(--radius-s); font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer;
  min-width:44px; white-space:nowrap; transition:background .12s, border-color .12s, opacity .12s;
  text-decoration:none; --btn-fg:var(--ink);
}
.btn-go{background:var(--go); color:var(--on-go); --btn-fg:var(--on-go);}
.btn-go:hover{background:var(--go-ink);}
.btn-go:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed;}
.btn-primary{background:var(--brand); color:var(--on-brand); --btn-fg:var(--on-brand);}
.btn-primary:hover{background:var(--brand-ink);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink); --btn-fg:var(--ink);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger); --btn-fg:var(--danger);}
.btn-danger:hover{background:var(--danger-tint);}
.btn-link{height:auto; padding:0; background:none; color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; --btn-fg:var(--brand);}
.btn-sm{height:34px; padding:0 12px; font-size:13px;}
a.btn{line-height:normal;}   /* a link styled as a button computes like a <button> (task DEF-007) */
.btn-block{width:100%;}
.btn:disabled{cursor:not-allowed;}
.btn-primary:disabled, .btn-danger:disabled, .btn-ghost:disabled{opacity:.55;}
.btn-primary:disabled:hover{background:var(--brand);}
.btn-ghost:disabled:hover, .btn-danger:disabled:hover{background:transparent;}
.btn-link:disabled{opacity:.55; cursor:not-allowed;}
.btn-loading{position:relative; color:transparent !important;}
.btn-loading:disabled{opacity:1; cursor:progress;}
.btn-go.btn-loading:disabled{background:var(--go);}
.btn-primary.btn-loading:disabled{background:var(--brand);}
.btn-loading::before, .btn-loading::after{
  content:""; position:absolute; width:16px;height:16px; border-radius:50%; border:2px solid var(--btn-fg);
}
.btn-loading::before{opacity:.5;}
.btn-loading::after{border-color:transparent; border-top-color:var(--btn-fg); animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Cards / sections ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:20px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);}
.panel__head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line-soft);}
.panel__head h3{font-size:15px;}
.panel__body{padding:18px;}
.hr{height:1px; background:var(--line-soft); border:0; margin:18px 0;}
.stack{display:flex; flex-direction:column; gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-2 > *, .grid-3 > *{min-width:0;}   /* wide content scrolls inside its wrapper: DIV-19 */
.eyebrow{font-size:12.5px; font-weight:600; color:var(--ink-faint);}

/* ---------- Forms: floating labels, 5 states ---------- */
.field{position:relative; margin-bottom:16px;}
.field input, .field select, .field textarea{
  width:100%; height:52px; padding:20px 14px 6px; border-radius:var(--radius-s); border:1.5px solid var(--line);
  background:var(--surface); font-family:inherit; font-size:14.5px; color:var(--ink); appearance:none;
}
.field textarea{height:auto; padding-top:22px; min-height:84px;}
.field label{
  position:absolute; left:14px; top:16px; font-size:14.5px; color:var(--ink-faint); pointer-events:none;
  transition:transform .12s ease, font-size .12s ease, color .12s ease; transform-origin:left top;
}
.field input::placeholder, .field textarea::placeholder{color:transparent;}
.field input:focus::placeholder, .field textarea:focus::placeholder{color:var(--ink-faint);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint);}
.field input:focus + label, .field select:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label, .field.filled label{
  transform:translateY(-9px) scale(.78); color:var(--ink-soft);
}
.field.select label{transform:translateY(-9px) scale(.78); color:var(--ink-soft);}
.field .hint{font-size:12.5px; color:var(--ink-faint); margin-top:5px; display:block;}
.field.success input, .field.success select, .field.success textarea{border-color:var(--go);}   /* select/textarea: DIV-17 */
.field.success::after{
  content:""; position:absolute; right:14px; top:17px; width:18px; height:18px; background-color:var(--go);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events:none;
}
.field.select.success::after{right:36px;}
.field.error input, .field.error select, .field.error textarea{border-color:var(--danger); background:var(--danger-tint);}
.field.error .hint{color:var(--danger);}
.field input:disabled, .field select:disabled, .field textarea:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed;}   /* textarea: DIV-17 */
.field select{cursor:pointer;}
.field.select::before{
  content:""; position:absolute; right:8px; top:14px; width:24px; height:24px; background-color:var(--ink-faint); z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events:none;
}

.checkline{display:flex; align-items:flex-start; gap:10px; padding:4px 0; cursor:pointer; font-size:14px;}
.checkline input{width:18px;height:18px; margin-top:1px; accent-color:var(--brand); flex:none;}

.switch{position:relative; display:inline-block; width:42px; height:24px; flex:none;}
.switch input{position:absolute; opacity:0; width:0; height:0; margin:0;}
.switch .track{position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.15s; cursor:pointer;}
.switch .track::before{content:""; position:absolute; width:18px;height:18px; left:3px; top:3px; background:var(--knob); border-radius:50%; transition:.15s; box-shadow:var(--shadow-1);}
.switch input:checked + .track{background:var(--go);}
.switch input:checked + .track::before{transform:translateX(18px);}
.switch input:focus-visible + .track{outline:2px solid var(--brand); outline-offset:2px;}   /* DIV-08 */
.switch input:disabled + .track{opacity:.55; cursor:not-allowed;}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); cursor:pointer;}
.switch-row:last-child{border-bottom:0;}
.switch-row__label{display:block; font-size:14px; font-weight:500;}
.switch-row__sub{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px;}

/* ---------- Chips / badges / status ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;}
.chip-go{background:var(--go-tint); color:var(--go-ink);}
.chip-warn{background:var(--warn-tint); color:var(--warn-ink);}   /* DIV-01 */
.chip-danger{background:var(--danger-tint); color:var(--danger);}
.chip-info{background:var(--info-tint); color:var(--info);}
.chip-neutral{background:var(--surface-2); color:var(--ink-soft);}
.dot-status{display:inline-block; width:8px;height:8px;border-radius:50%; flex:none;}
.dot-go{background:var(--go);} .dot-warn{background:var(--warn);} .dot-danger{background:var(--danger);} .dot-neutral{background:var(--ink-faint);}

/* ---------- Tables (scoped to the wrapper: DIV-14) ---------- */
.table-wrap{position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m);}
.table-wrap table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;}
.table-wrap thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
  padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table-wrap tbody td{padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.table-wrap tbody tr:last-child td{border-bottom:0;}
.table-wrap tbody tr:hover{background:var(--surface-2);}
.cell-mono{font-family:var(--mono); font-size:12.5px;}
/* TD-064 (task 0022): Orders number, date and cost cells stay on one line at 1280 px. */
.table-wrap .cell-mono, .table-wrap .cell-num, .table-wrap .cell-date{white-space:nowrap;}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px;}
.tab{padding:10px 4px; margin-right:18px; font-size:14px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:0;border-left:0;border-right:0;}
.tab.active{color:var(--ink); border-color:var(--brand);}

/* ---------- Accordion (<details>/<summary>: DIV-11) ---------- */
.accordion{border:1px solid var(--line); border-radius:var(--radius-m);}   /* no overflow clip, so the header focus ring stays whole: DIV-11 */
.accordion__item + .accordion__item{border-top:1px solid var(--line);}
.accordion__head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; font-weight:600; font-size:14px; background:var(--surface); list-style:none;}
.accordion__head::-webkit-details-marker{display:none;}
.accordion__item:first-child > .accordion__head{border-radius:calc(var(--radius-m) - 1px) calc(var(--radius-m) - 1px) 0 0;}   /* DIV-11 */
.accordion__item:last-child:not([open]) > .accordion__head{border-bottom-left-radius:calc(var(--radius-m) - 1px); border-bottom-right-radius:calc(var(--radius-m) - 1px);}   /* DIV-11 */
.accordion__head .icon{transition:transform .15s; color:var(--ink-faint);}
.accordion__item[open] > .accordion__head .icon{transform:rotate(45deg);}
.accordion__body-inner{padding:0 16px 16px;}

/* ---------- Modal / bottom sheet (<dialog>: DIV-12) ---------- */
dialog.modal, dialog.sheet{padding:0; border:0; color:inherit; background:var(--surface);}
dialog.modal::backdrop, dialog.sheet::backdrop{background:var(--scrim);}
dialog.modal{border-radius:var(--radius-l); max-width:480px; width:calc(100% - 32px); box-shadow:var(--shadow-2); max-height:88vh; overflow-y:auto;}
.modal__head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.modal__body{padding:20px;}
.modal__foot{padding:16px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.modal__head h2, dialog.sheet h2{font-size:1.17em;}   /* dialog titles at the prototype's h3 size */

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--radius-s);}
@keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:-100% 0;}}

/* ---------- Empty state ---------- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 24px; gap:14px; color:var(--ink-soft);}
.empty svg{width:56px;height:56px; color:var(--ink-faint);}
.empty h3{font-size:16px; color:var(--ink);}
.empty p{font-size:13.5px; max-width:320px;}

/* ---------- Auth shell ---------- */
.auth-wrap{min-height:100vh; display:flex;}
.auth-side{flex:1; background:var(--brand); color:var(--on-brand); display:flex; flex-direction:column; justify-content:space-between; padding:44px; position:relative; overflow:hidden;}
.auth-side::before{content:""; position:absolute; right:-120px; bottom:-140px; width:420px; height:420px; border:1px solid var(--on-brand-line); border-radius:50%;}
.auth-side::after{content:""; position:absolute; right:-40px; bottom:-60px; width:260px; height:260px; border:1px solid var(--on-brand-line); border-radius:50%;}
.auth-mark{width:30px; height:30px; border-radius:8px; background:var(--on-brand); position:relative; flex:none;}
.auth-mark::after{content:""; position:absolute; inset:7px; border:2px solid var(--brand); border-radius:3px;}
.auth-word{font-weight:700; font-size:18px;}
.auth-form-side{flex:1; display:flex; align-items:center; justify-content:center; padding:32px; background:var(--paper);}
.auth-box{width:100%; max-width:380px;}

/* ---------- Auth pages (values from login.html inline styles; DIV-25..DIV-34) ---------- */
.auth-tabs{margin-bottom:24px;}
a.tab{text-decoration:none; display:inline-block; line-height:normal;}   /* navigation tabs variant: DIV-25 */
.auth-title{font-size:21px; margin-bottom:6px;}      /* h1 at the prototype h2 size: DIV-32 */
.auth-sub{margin-bottom:22px;}
.auth-email{color:var(--ink);}
.auth-back{margin-bottom:16px;}
.btn-link.auth-resend{display:block; margin:16px auto 0; text-align:center;}
.auth-note{text-align:center; margin-top:26px;}
.grid-2.auth-name-row{gap:12px;}
.auth-message{font-size:13px; margin-bottom:16px;}   /* text carries the meaning, no icon: DIV-31 */
.auth-message--error{color:var(--danger);}
.auth-message--status{color:var(--ink-soft);}
.landing-email{color:var(--ink);}
.dev-mailbox__message{margin-bottom:16px;}
.dev-mailbox__message pre{white-space:pre-wrap; font-family:var(--mono); font-size:13px; margin:12px 0 0;}

/* ---------- Account Settings and the email-change journey (task §11.3) ---------- */
.content.content--narrow{max-width:720px;}   /* the prototype's centred settings column */
.settings-panel .panel__head h2{font-size:15px;}   /* h2 for the one-h1 rule, styled as the prototype's h3 */
.settings-panel + .settings-panel{margin-top:16px;}
.settings-email{display:flex; align-items:center; justify-content:space-between; gap:16px;}   /* button stays on the address row, as the prototype (DIV-49) */
.settings-email > div{min-width:0;}
.settings-email > .btn{flex-shrink:0;}
.settings-email__address{overflow-wrap:anywhere;}
.settings-email__address{font-weight:600;}
.settings-hint{margin-top:2px;}
.settings-save{margin-top:4px;}
.journey-lead{margin-bottom:16px;}
.journey-email{color:var(--ink);}
.btn-link.journey-resend, .btn-link.journey-back{display:block; margin:14px auto 0; text-align:center;}
.journey-done{text-align:center; padding:8px 20px;}   /* the done state is the modal body itself, as #ce-step-done */
.journey-done__mark{
  width:48px; height:48px; border-radius:50%; background:var(--go-tint); color:var(--go);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.journey-done__title{font-weight:600;}
.journey-done__sub{margin-top:6px;}
.journey-done__title:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
.tz-search{
  width:100%; height:44px; padding:0 14px; margin-bottom:10px; font:inherit;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-s);
}
.tz-search:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); outline:none;}
/* Available to assistive technology only (the search label and its match count). */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Without JavaScript the dialog stays in the flow as a panel above the profile (DIV-43);
   its close control would be inert there, so it is not shown. */
dialog.modal[open]:not(:modal){
  position:static; display:block; margin:0 0 16px; max-width:720px; width:100%;
  border:1px solid var(--line); box-shadow:none;
}
dialog.modal[open]:not(:modal) .journey-close{display:none;}

/* ---------- Ship From address book (address design §12.3; DIV-50..DIV-68) ---------- */
.address-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.address-entry{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px;
}
.address-entry__lines{min-width:0; font-size:13.5px; color:var(--ink-soft); overflow-wrap:anywhere;}
.address-entry__name{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; font-size:14px; font-weight:600; color:var(--ink);}
.address-entry__actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.address-entry__actions form{margin:0;}
.address-form .form-actions, .address-delete .form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}
.address-default-note{margin-top:4px;}
.address-summary, .ship-from-summary{overflow-wrap:anywhere;}
.ship-from-summary{font-weight:600;}
/* The advisory ZIP/city/state check (DIV-141): neutral status text, existing tokens only */
.zip-check{margin:4px 0 16px;}
.zip-check__result{margin:10px 0 0; overflow-wrap:anywhere;}
.zip-check__result p{margin:0 0 6px;}
.zip-check__suggestions{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}

/* ---------- Draft wizard and Orders (draft wizard design §11; DIV-69..DIV-80) ---------- */
[hidden]{display:none !important;}   /* a revealed or family-hidden block never shows through a display rule */
.content.content--wizard{max-width:960px;}   /* prototype: main.content max-width 960 */
.wizard-column{max-width:680px; margin:0 auto;}   /* prototype: the centred 680 px step column */
.wizard-panel .panel__head h2{font-size:15px;}   /* h2 for the one-h1 rule, styled as the prototype's h3 */
.stepper-mobile{margin-bottom:20px;}
.stepper-mobile__text{font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:8px;}
.stepper-mobile__bar{height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.stepper-mobile__fill{height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .2s ease;}
/* Progress = (step - 1) / 5, as mountStepper; modifier classes instead of an inline style (CSP). */
.stepper-mobile__fill--1{width:0;}
.stepper-mobile__fill--2{width:20%;}
.stepper-mobile__fill--3{width:40%;}
.stepper-mobile__fill--4{width:60%;}
.stepper-mobile__fill--5{width:80%;}
.stepper-mobile__fill--6{width:100%;}
.stepper-full{display:none; list-style:none; margin:0 0 26px; padding:0; align-items:center; justify-content:center; overflow-x:auto;}
.stepper-full__item{display:flex; align-items:center; gap:8px; flex:none;}
.stepper-full__circle{width:26px;height:26px;border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--ink-faint); background:var(--surface); flex:none;}
.stepper-full__circle .icon{width:14px; height:14px;}
.stepper-full__circle.done{background:var(--go); border-color:var(--go); color:var(--on-go);}
.stepper-full__circle.active{border-color:var(--brand); color:var(--brand); background:var(--brand-tint);}
.stepper-full__circle.unavailable{border-style:dashed;}   /* not available in this slice (DIV-69) */
.stepper-full__label{font-size:12.5px; font-weight:600; color:var(--ink-faint); white-space:nowrap;}
.stepper-full__label.active{color:var(--ink);}
.stepper-full__label.done{color:var(--ink-soft);}
.stepper-full__line{width:28px;height:2px;background:var(--line); flex:none; margin:0 6px;}
.stepper-full__line.done{background:var(--go);}
@media (min-width:1220px){
  .stepper-mobile{display:none;}
  .stepper-full{display:flex;}
}
.wizard-summary{font-size:13px; color:var(--ink-soft); background:var(--surface-2); border-radius:var(--radius-s); padding:10px 14px; margin-bottom:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.wizard-summary strong{color:var(--ink); font-weight:600;}
.sender-new .checkline + .checkline{margin-top:2px;}
.checkline--error input{outline:2px solid var(--danger); outline-offset:1px;}
.hint.checkline-hint{font-size:12.5px; color:var(--danger); margin:2px 0 0 28px;}
.size-caption{margin:-8px 0 16px;}
.orders-tabs h2.tab{cursor:default; margin-bottom:0;}
.table-wrap .cell-num{text-align:right;}
.cell-actions{white-space:nowrap; text-align:right;}
.cell-actions a + a{margin-left:14px;}
.draft-discard .form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}
/* Carrier step (design §10.5; DIV-90..): selected card = green border, no JS. */
.rate-fieldset{border:0; margin:0; padding:0; min-width:0;}
.sort-tabs .tab{min-height:44px; min-width:44px;}   /* 44x44 tap targets at every width */
.rate-list{display:flex; flex-direction:column; gap:12px;}
.rate-card{display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:16px 18px; cursor:pointer; min-height:44px;}
.rate-card:has(.rate-card__radio:checked){border-color:var(--go); box-shadow:0 0 0 1px var(--go);}
.rate-card:has(.rate-card__radio:focus-visible){outline:2px solid var(--brand); outline-offset:2px;}
.rate-card__radio{width:18px; height:18px; accent-color:var(--go); flex:none; margin:0;}
.rate-card__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.rate-card__names{font-size:14.5px;}
.rate-card__carrier{color:var(--ink-soft); font-size:13px; margin-left:6px;}
.rate-card__chips{display:flex; flex-wrap:wrap; gap:6px;}
.rate-card__delivery{font-size:13px; color:var(--ink-soft);}
.rate-card__price{font-weight:700; font-size:16px; text-align:right; white-space:nowrap;}
.rate-error{color:var(--danger); font-size:12.5px; margin:8px 0 0;}
.rate-refresh{margin:12px 0 20px;}
.rate-state{margin-bottom:20px;}
.rate-state .panel__body p{margin-bottom:12px;}
.rate-ship-date__form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;}
.rate-ship-date__form .field{flex:1; min-width:200px; margin-bottom:0;}
/* Payment and Finish steps (task 0020 design §14.3; DIV-103..DIV-117); tokens only. */
.summary-list{display:flex; flex-direction:column; gap:10px; margin:0;}
.summary-row{display:flex; justify-content:space-between; gap:16px; font-size:13px;}
.summary-row dt{flex:none;}
.summary-row dd{margin:0; text-align:right; overflow-wrap:anywhere;}
.summary-row--total{font-weight:700; font-size:14.5px;}
.summary-list__rule{margin:4px 0;}
.pay-panel{margin-top:16px;}
.pay-panel--insufficient{border-color:var(--danger);}
.pay-panel__row{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.pay-panel__source{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px;}
.pay-panel__amounts{display:flex; flex-direction:column; gap:6px; margin:0; text-align:right;}
.pay-panel__amounts dd{margin:0; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;}
.pay-panel__warning{display:flex; gap:12px;}
.pay-panel__icon{color:var(--danger); flex:none; display:inline-flex;}
.pay-panel__icon .icon{width:22px; height:22px;}
.pay-panel__warning-title{font-weight:600; font-size:14.5px; color:var(--danger);}
.pay-panel__warning .text-sm{margin-top:4px;}
.pay-panel__available strong{font-variant-numeric:tabular-nums;}
.pay-panel__funds{margin-top:14px;}
.pay-panel__add-funds{margin-top:10px;}   /* task 0043 (DIV-106) */
.pay-panel__funds .hint{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}
.finish-card{text-align:center; padding:40px 32px; max-width:560px; margin:0 auto;}
.finish-card__mark{
  width:56px; height:56px; border-radius:50%; background:var(--go-tint); color:var(--go);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.finish-card__mark .icon{width:28px; height:28px;}
.finish-card__title{font-size:22px;}
/* ---------- Top-up pages (task 0043 design §7; SD-10; DIV-140) ---------- */
/* The simulation notice: prominent, inside the instructions section (text carries it). */
.auth-message--warn{color:var(--warn-ink); background:var(--warn-tint); padding:10px 12px; border-radius:var(--radius-s); font-weight:600;}
.topup-panel{margin-top:16px;}
.topup-label{font-weight:500; margin:0;}
.topup-balance{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; margin:4px 0 0;}
.topup-quick{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px;}
.topup-quick form{margin:0;}
.topup-amount{font-family:var(--mono); font-size:20px; font-weight:700; overflow-wrap:anywhere; margin:4px 0 2px;}
.topup-copy{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:8px 0 14px;}
/* The whole address, never truncated: it wraps at 360 px. */
.topup-copy__value{
  flex:1 1 240px; min-width:0; font-family:var(--mono); font-size:14px; line-height:1.5;
  padding:8px 10px; color:var(--ink); background:var(--surface-2);
  border:1.5px solid var(--line); border-radius:var(--radius-s); user-select:all;
}
.topup-copy__value:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); outline:none;}
.topup-address{resize:none; overflow-wrap:anywhere; word-break:break-all; field-sizing:content; min-height:0;}
.topup-network{margin:0 0 12px;}
.topup-qr{margin:0 0 14px;}
.topup-qr img{display:block; width:176px; height:176px;}   /* the SVG carries its own light quiet zone */
.topup-warnings{margin:0 0 14px; padding-left:18px; font-size:13px; color:var(--ink-soft);}
.topup-warnings li + li{margin-top:4px;}
.topup-state{margin:0 0 8px; font-size:15px;}
.topup-claim-text{margin-top:8px;}
.topup-back{margin:0 0 8px;}
.topup-cancel{margin-top:16px;}
.topup-history{list-style:none; margin:0; padding:0;}
.topup-history__row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px 18px; border-top:1px solid var(--line-soft);}
.topup-history__row:first-child{border-top:0;}
.topup-history__date{flex:0 0 auto;}
.topup-history__amount{flex:1 1 160px; overflow-wrap:anywhere;}
.topup-history__link{margin-left:auto;}
.finish-card__text{margin-top:8px; overflow-wrap:anywhere;}
.finish-card__primary{margin-top:22px;}
.finish-card__form{margin-top:22px;}
.finish-card__link{display:inline-block; margin-top:14px;}
.file-card{margin-top:26px; text-align:left;}
.file-card__body{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.file-card__file{display:flex; align-items:center; gap:12px; min-width:0;}
.file-card__icon{
  width:44px; height:44px; border-radius:8px; background:var(--surface-2); flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.file-card__name{font-weight:600; font-size:14px; overflow-wrap:anywhere;}
/* Task 0021 (design §10.4): the order detail; the Finish card's second link. */
.finish-card__link + .finish-card__link{margin-left:16px;}
.order-back{display:inline-flex; margin-bottom:12px;}
.order-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.order-title .section-title{margin:0;}
.order-status{margin-bottom:20px; text-align:left;}
.order-status .finish-card__text{margin-top:8px;}
.detail-grid{align-items:start;}
.detail-grid .panel__head h2{font-size:15px;}   /* h2 for the one-h1 rule, styled as the prototype's h3 */
.address-lines{margin-top:4px; overflow-wrap:anywhere;}
.address-lines + .hr{margin:14px 0;}
.topbar__balance{display:flex; align-items:baseline; gap:6px; font-size:13px; white-space:nowrap; margin:0;
  color:var(--ink); text-decoration:none; border-radius:var(--radius-s);}   /* task 0043: a link to top-up */
.topbar__balance:hover strong{text-decoration:underline;}
.topbar__balance:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
.topbar__balance-label{color:var(--ink-soft);}
.topbar__balance strong{font-variant-numeric:tabular-nums;}
@media (max-width: 360px){
  .topbar__balance-label{display:none;}   /* the amount stays visible */
}

/* ---------- Demo designation (task 0022, design §5.5 / §6.4) ---------- */
/* The banner: in normal flow at the top of every page (not sticky: the top bar and the sidebar
   already stick to top:0); no close control; wraps at narrow widths without page scroll. */
.demo-banner{background:var(--warn-tint); color:var(--ink); border-bottom:1px solid var(--line); padding:6px 16px; text-align:center;}
.demo-banner__text{margin:0; font-size:13px; line-height:1.4; overflow-wrap:anywhere;}
/* The DR-035 on-screen code box on the code steps (never pre-filled into the input). */
.code-reveal{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 16px; padding:10px 14px; border:1px dashed var(--warn); border-radius:var(--radius-s); background:var(--warn-tint); color:var(--ink); font-size:13.5px;}
.code-reveal__value{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:18px; letter-spacing:.12em;}
/* TD-005 (Q-07): the "Licences" link to the shipped Lucide notice (auth pages). */
.auth-licences{margin-top:6px;}

/* ---------- Sticky bottom bar ---------- */
.sticky-bottom{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:14px 16px; display:flex; gap:10px; z-index:20;}

/* ---------- Bottom sheet ---------- */
dialog.sheet{position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:none; border-radius:18px 18px 0 0; padding:8px 18px 22px; max-height:70vh; overflow-y:auto;}
dialog.sheet[open]{animation:sheet-in .2s ease;}
@keyframes sheet-in{from{transform:translateY(100%);} to{transform:translateY(0);}}
.sheet__handle{width:36px; height:4px; background:var(--line); border-radius:99px; margin:8px auto 14px;}

/* ---------- Utility ---------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.text-sm{font-size:13px;} .text-xs{font-size:12px;} .text-soft{color:var(--ink-soft);} .text-faint{color:var(--ink-faint);}
.text-go{color:var(--go);} .text-danger{color:var(--danger);} .text-warn{color:var(--warn-ink);}   /* DIV-01 */
.w-full{width:100%;} .mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .flex-1{flex:1;}
.section-title{font-size:19px; font-weight:700; margin-bottom:4px;}
.section-sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}
.pagelead{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.pagelead__actions{display:flex; flex-wrap:wrap; gap:10px;}   /* DIV-23 */

/* ---------- Responsive ---------- */
@media (min-width: 981px){
  .scrim{display:none;}
}
@media (max-width: 980px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%); visibility:hidden;
    transition:transform .18s ease, visibility 0s linear .18s; box-shadow:var(--shadow-2); z-index:110;
  }
  .sidebar.is-open{transform:none; visibility:visible; transition:transform .18s ease, visibility 0s linear 0s;}   /* DIV-08 */
  .menu-btn{display:flex;}
  .grid-2, .grid-3{grid-template-columns:1fr;}
  .content{padding:18px 16px 130px;}
  .auth-side{display:none;}
  .table-wrap table{min-width:560px;}
}
@media (max-width: 640px){
  .topbar{padding:0 14px;}
}
/* TD-062 (task 0022, design §14; DEF-0022-02): at 360 px the whole top-bar title stays
   visible beside a 1000.00 USDT balance, Sign out and the theme button: tighter gaps, the
   balance amount without its label, and the design's fallback of a title on at most two
   lines (measured by e2e/test_create_label.py). The 44 px targets come from the rule below. */
@media (max-width: 480px){
  .topbar{padding:0 12px; gap:4px;}
  .topbar > :first-child{gap:4px;}
  .topbar__title{font-size:14px; line-height:1.15; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
  .topbar__right{gap:4px;}
  .topbar__balance{font-size:12.5px;}
  .topbar__balance-label{display:none;}   /* the amount stays visible */
  .topbar .btn-sm{padding:0 6px;}
}
/* Touch targets of at least 44x44 CSS px on small or coarse-pointer screens (DIV-02). */
@media (max-width: 480px), (pointer: coarse){
  .iconbtn{width:44px; height:44px;}
  .btn-sm{height:44px;}
  .topbar__balance{min-height:44px; align-items:center;}   /* task 0043: the link's target */
  .topup-copy__value{min-height:44px;}   /* task 0043 DEF-0043-01: the selectable copy field */
  .btn-link{min-height:44px; min-width:44px; display:inline-flex; align-items:center;}
  .btn-link.auth-resend{display:flex; justify-content:center;}
  .navlink{min-height:44px;}
  .tab{min-height:44px;}
  .rate-card__price{flex-basis:100%; text-align:left; padding-left:34px;}   /* wraps under the body (Carrier step) */
  .finish-card{padding:28px 18px;}
  .finish-card__link{display:inline-flex;}
  .checkline{min-height:44px; align-items:center;}
  .checkline input{margin-top:0;}
  .switch{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
  .switch .track{inset:auto; top:10px; left:1px; width:42px; height:24px;}
  .accordion__head{min-height:44px;}
}