/* ======================================================================
     DecoSign design system tokens (Light = Paper, Dark = Night), IBM Plex Sans Arabic only.
     Source of truth: the DecoSign design system artifact (tokens.json). Magenta is spent sparingly:
     the primary button, the page-head rule, the active link, key numbers. Magenta TEXT is --accent-text.
     success / danger are states only. Square-cut by default, 4px for inputs and chips.
     ====================================================================== */
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

  :root {
    --magenta: #ce0f69; --magenta-deep: #a40755; --pink-glow: #ff5ca4; --deep: #11161c;
    --bg: #f7f5f6; --surface: #fff; --sunken: #e9e6e8; --panel: #1d242c;
    --ink: #1d242c; --muted: #565b60; --subtle: #70757a;
    --line: #dedcdf; --line-strong: #9ca0a3; --rule: #1d242c;
    --accent: var(--magenta); --accent-text: #ce0f69; --on-accent: #fff; --on-panel: #fff; --focus: #1d242c;
    --success: #1f6b4a; --danger: #b42318; --on-state: #fff;
    --scrim: rgba(17, 22, 28, .55);
    --sans: "IBM Plex Sans Arabic", "Avenir Next", "Century Gothic", Arial, sans-serif;
    --r-sm: 4px;
    --ease: cubic-bezier(.215, .61, .355, 1);
    --ease-in: cubic-bezier(.55, .055, .675, .19);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #11161c; --surface: #1d242c; --sunken: #252d35; --panel: #252d35;
      --ink: #fff; --muted: #aeb3b7; --subtle: #9e98a4;
      --line: #414a52; --line-strong: #70757a; --rule: #70757a;
      --accent-text: #ff5ca4; --focus: #ff5ca4;
      --success: #6fd3a5; --danger: #ff8a7a; --on-state: #11161c;
      --scrim: rgba(0, 0, 0, .62);
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  }
  button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  [dir="rtl"], [dir="auto"] { line-height: 1.8; }
  h1 { font: 700 36px/1.05 var(--sans); letter-spacing: -.8px; margin: 0; text-wrap: balance; }
  h1 em { font-style: normal; color: var(--accent-text); }

  /* ---------------- top bar ---------------- */
  .bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
  .bar-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; min-height: 64px; }
  .mark { display: flex; align-items: center; flex: none; cursor: pointer; transition: opacity .15s; }
  .mark:hover { opacity: .8; }
  .mark img { height: 28px; width: auto; display: block; }
  .bar-r { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }

  /* ---------------- page head: eyebrow, title with one accent word, the 2px accent rule ---------------- */
  .ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--accent); animation: rise .4s var(--ease) both; }
  .eyebrow { margin: 0 0 8px; color: var(--accent-text); font: 700 12px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; }
  .ph p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
  .ph-acts { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---------------- status chips: the word is always there; colour is only a state ---------------- */
  .pill {
    display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid transparent; border-radius: var(--r-sm);
    font: 600 12px/1.5 var(--sans); white-space: nowrap;
  }
  .pill.p-open { color: var(--ink); border-color: var(--line-strong); }
  .pill.p-part { color: var(--ink); background: var(--sunken); }
  .pill.p-void { color: var(--muted); background: var(--sunken); }
  .pill.p-ok { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
  .pill.p-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }

  /* ---------------- toast ---------------- */
  #toast-host { position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9600; }
  .toast {
    max-width: min(460px, calc(100vw - 48px)); padding: 12px 18px;
    background: var(--panel); color: var(--on-panel); border-inline-start: 4px solid var(--accent);
    font-size: 14px; animation: rise .25s var(--ease) both;
  }
  .toast + .toast { margin-top: 8px; }
  @media (max-width: 560px) { #toast-host { left: 16px; right: 16px; } .toast { max-width: none; } }

  /* ======================================================================
     Interface kit: page-change loader, sign-in, fields, buttons, overlays, menus, chips, tabs, history.
     Tokens come from base.css (the DecoSign design system).
     ====================================================================== */

  /* ---------------- page change: the DecoSign loader, always the WHITE wordmark on the dark ground ---------------- */
  .swap {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: var(--deep);
    opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease);
  }
  .swap.on, html.swapping .swap { opacity: 1; pointer-events: auto; }
  html.swapping .swap { transition: none; animation: swap-giveup 0s 7s forwards; }   /* never stuck */
  .swap.sweep { opacity: 1; pointer-events: auto; clip-path: inset(0 58% 0 0); animation: sweep .44s var(--ease) forwards; }
  @keyframes sweep { to { clip-path: inset(0 0 0 0); } }
  @keyframes swap-giveup { to { opacity: 0; pointer-events: none; } }

  /* ---------------- sign-in: the dark brand panel (with the arc) on the left, the form on the right ---------------- */
  .auth { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-columns: minmax(340px, 42%) 1fr; background: var(--bg); overflow-y: auto; }
  .auth-brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    padding: 56px clamp(28px, 5vw, 64px); background: var(--deep); color: #fff;
  }
  .auth-brand::before {             /* the arc: a thin neon circle segment on deep */
    content: ""; position: absolute; width: 440px; height: 440px; right: -190px; top: -130px;
    border: 2px solid var(--pink-glow); border-radius: 50%; opacity: .8;
    box-shadow: 0 0 40px rgba(206, 15, 105, .55), inset 0 0 40px rgba(206, 15, 105, .55);
  }
  .auth-brand > * { position: relative; z-index: 1; }
  .auth-logo { width: 150px; height: auto; }
  .auth-brand .eyebrow { margin: 44px 0 16px; color: var(--pink-glow); }
  .auth-brand h1 { max-width: 12ch; font-size: clamp(36px, 3.6vw, 48px); line-height: 1; letter-spacing: -1px; }
  .auth-brand h1 em { color: var(--pink-glow); }
  .auth-brand p { margin: 20px 0 0; max-width: 36ch; color: #aeb3b7; }

  .auth-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
  .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--rule); padding: 32px 32px 20px; }
  .auth-icon { width: 40px; height: 40px; background: var(--sunken); color: var(--ink); display: grid; place-items: center; }
  .auth-kicker { margin: 18px 0 4px; color: var(--accent-text); font: 700 12px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; }
  .auth-card h2 { margin: 0; font: 700 24px/1.15 var(--sans); letter-spacing: -.3px; }
  .auth-help { margin: 8px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .auth-foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .auth-foot svg { flex: none; margin-top: 3px; }
  .auth-foot a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
  .auth-foot a:hover { text-decoration: underline; }
  .auth-for { margin: -10px 0 18px; padding: 10px 12px; background: var(--sunken); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .auth-for b { color: var(--ink); font-weight: 600; }
  .auth .form-msg { margin-top: 10px; }

  .auth-brand > * { animation: rise .42s var(--ease) both; }
  .auth-brand > :nth-child(2) { animation-delay: .06s; }
  .auth-brand > :nth-child(3) { animation-delay: .12s; }
  .auth-brand > :nth-child(4) { animation-delay: .18s; }
  .auth-card { animation: card-in .42s .1s var(--ease) both; }
  .auth.done .auth-card { animation: card-leave .32s var(--ease-in) forwards; }   /* signed in: the form steps back while the brand sweeps across */

  @media (max-width: 820px) {
    /* stacked: each part as tall as its content (a plain auto row would squeeze the brand panel) */
    .auth { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; }
    .auth-brand { padding: 32px 24px 28px; }
    .auth-brand h1 { font-size: 32px; }
    .auth-brand p { display: none; }
    .auth-brand .eyebrow { margin: 24px 0 12px; }
    .auth-logo { width: 120px; }
    .auth-side { padding: 24px 16px 40px; }
    .auth-card { padding: 24px 20px 16px; }
  }
  /* phones: iOS zooms into any field under 16px; 16px everywhere on touch keeps the page still */
  @media (hover: none) and (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }

  /* ---------------- fields: label above, always visible ---------------- */
  .fld { display: block; }
  .fld[hidden] { display: none; }
  .fld + .fld { margin-top: 16px; }
  .fld label { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--sans); }
  .fld input, .fld select, .fld textarea {
    width: 100%; min-height: 46px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font: 400 16px/1.4 var(--sans); transition: border-color .15s;
  }
  .fld textarea { min-height: 84px; resize: vertical; }
  .fld input::placeholder, .fld textarea::placeholder { color: var(--subtle); }
  .fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
  input[type="file"] { font-size: 14px; max-width: 100%; }
  input[type="file"]::file-selector-button {
    font: 600 13px/1 var(--sans); padding: 9px 14px; margin-inline-end: 12px; cursor: pointer;
    background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; transition: background .15s, color .15s;
  }
  input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--bg); }
  .fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .fld-row.three { grid-template-columns: repeat(3, 1fr); }
  .fld-row .fld + .fld { margin-top: 0; }
  .fld-row + .fld, .fld + .fld-row, .fld-row + .fld-row { margin-top: 16px; }
  .fld-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
  .form-msg { min-height: 18px; margin: 12px 0 0; font: 600 13px/1.45 var(--sans); color: var(--danger); }
  .form-msg.ok { color: var(--success); }

  /* ---------------- buttons: square-cut, 44px tall, press / work / finish ---------------- */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 24px; border-radius: 0; border: 2px solid transparent;
    font: 600 15px/1 var(--sans); text-decoration: none;
    transition: transform .12s var(--ease), background-color .15s, color .15s, border-color .15s, opacity .15s;
  }
  .btn:active:not(:disabled) { transform: scale(.97); }
  .btn.primary { background: var(--accent); color: var(--on-accent); }
  .btn.primary:hover:not(:disabled) { background: var(--magenta-deep); }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn.ghost:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
  .btn.go { background: var(--success); color: var(--on-state); }
  .btn.go:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 82%, var(--ink)); }
  .btn.stop { background: var(--danger); color: var(--on-state); }
  .btn.stop:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 82%, var(--ink)); }
  .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
  .btn.danger:hover:not(:disabled) { background: var(--danger); color: var(--on-state); }
  .btn.wide { width: 100%; }
  .btn:disabled { cursor: default; opacity: .45; }
  .btn.busy, .btn.done { opacity: 1; }
  .btn.busy .btn-l, .btn.done .btn-l { opacity: 0; }
  .btn.busy::after, .btn.done::after { content: ""; position: absolute; inset: 0; margin: auto; }
  .btn.busy::after { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
  .btn.done::after { width: 18px; height: 9px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); animation: tick .3s var(--ease) both; }
  .btn.done.primary { background: var(--success); color: var(--on-state); }
  .btn-l svg { vertical-align: -2px; margin-right: 7px; }
  .btn-row { display: flex; gap: 12px; margin-top: 20px; }
  .btn-row > .btn { flex: 1; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes tick { from { opacity: 0; transform: translateY(-2px) rotate(-45deg) scale(.4); } }
  .icb {
    width: 32px; height: 32px; display: grid; place-items: center; flex: none; padding: 0;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; color: var(--muted);
    transition: color .15s, border-color .15s, transform .12s var(--ease);
  }
  .icb:hover { color: var(--ink); border-color: var(--ink); }
  .icb:active { transform: scale(.94); }
  .icb:disabled { opacity: .3; cursor: default; }

  /* ---------------- overlays: the page dimmed behind a square-cut sheet ---------------- */
  .ovl {
    position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(7vh, 24px) 16px 24px; overflow-y: auto; background: var(--scrim); animation: fade-in .2s var(--ease) both;
  }
  .ovl.out { animation: fade-out .16s var(--ease-in) both; pointer-events: none; }   /* a closing overlay never eats the next click */
  .ovl-card {
    position: relative; width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--rule);
    padding: 24px 24px 20px; animation: card-in .3s var(--ease) both;
  }
  .ovl-card.wide { max-width: 800px; }
  .ovl.out .ovl-card { animation: card-leave .16s var(--ease-in) both; }
  .ovl-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); transition: background .15s, color .15s; }
  .ovl-x:hover { background: var(--sunken); color: var(--ink); }
  .ovl-title { margin: 0 40px 4px 0; font: 700 24px/1.2 var(--sans); letter-spacing: -.3px; }
  .ovl-title + .ovl-body { margin-top: 18px; }
  .ovl-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .ovl-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
  body.ovl-open { overflow: hidden; }
  .linkbox { margin: 4px 0; padding: 12px 14px; background: var(--sunken); font-size: 13px; line-height: 1.5; word-break: break-all; user-select: all; }

  /* ---------------- anchored menus ---------------- */
  .pop {
    position: fixed; z-index: 9400; width: 280px; max-width: calc(100vw - 24px); padding: 6px;
    background: var(--surface); border: 1px solid var(--line-strong);
    transform-origin: top right; animation: pop-in .18s var(--ease) both;
  }
  .pop.out { animation: pop-out .12s var(--ease-in) both; pointer-events: none; }
  .pop-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .pop-head b { display: block; font: 600 14px/1.3 var(--sans); }
  .pop-head small { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); word-break: break-all; }
  .pop-head .role { margin-top: 3px; color: var(--accent-text); font-weight: 600; }
  .pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: none; font: 600 14px/1.2 var(--sans); text-align: left; transition: background .12s; }
  .pop-item:hover, .pop-item:focus-visible { background: var(--sunken); outline: none; }
  .pop-item.danger, .pop-item.danger svg { color: var(--danger); }
  .pop-item svg { color: var(--muted); flex: none; }
  .pop-item.nochk { padding-left: 35px; }
  .pop-label { padding: 10px 10px 4px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .pop-label:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
  .pop-form { padding: 8px 10px 10px; animation: rise .22s var(--ease) both; }
  .pop-form .fld input { min-height: 42px; font-size: 14px; }

  .avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--panel); color: var(--on-panel); font: 700 12px/1 var(--sans); }
  .avatar.lg { width: 40px; height: 40px; font-size: 14px; }
  #acctbtn { width: 34px; height: 34px; padding: 0; border: 0; transition: transform .12s var(--ease), box-shadow .15s; }
  #acctbtn:hover, #acctbtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
  #acctbtn:active { transform: scale(.94); }

  /* ---------------- filter chips and tabs ---------------- */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip {
    padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
    font: 600 13px/1 var(--sans); color: var(--ink); transition: background-color .15s, color .15s, border-color .15s, transform .12s var(--ease);
  }
  .chip:hover { border-color: var(--ink); }
  .chip:active { transform: scale(.96); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .tabs2 { display: flex; gap: 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  .tabs2 button { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: 600 15px/1.2 var(--sans); color: var(--muted); white-space: nowrap; transition: color .15s, border-color .15s; }
  .tabs2 button:hover { color: var(--ink); }
  .tabs2 button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

  /* ---------------- history: day-grouped timeline, diamond dots ---------------- */
  .tl-tools { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
  .tl-tools .fld { flex: 1; min-width: 200px; }
  .tl-scroll { max-height: min(58vh, 560px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
  .tl-scroll.small { max-height: 240px; }
  .tl-day { margin: 18px 0 6px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
  .tl-row { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 8px 0 8px 16px; animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
  .tl-row::before { content: ""; position: absolute; left: -5px; top: 15px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--surface); border: 2px solid var(--line-strong); }
  .tl-row.bad::before { border-color: var(--danger); }
  .tl-row.good::before { border-color: var(--success); }
  .tl-time { font: 600 12px/1.6 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
  .tl-line { font-size: 14px; line-height: 1.5; color: var(--muted); }
  .tl-line b { color: var(--ink); font-weight: 600; }
  .tl-sub { font-size: 13px; line-height: 1.45; color: var(--muted); word-break: break-word; }
  .tl-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

  /* ---------------- shared motion ---------------- */
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
  @keyframes card-leave { to { opacity: 0; transform: translateY(6px) scale(.97); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
  @keyframes pop-out { to { opacity: 0; transform: translateY(-4px) scale(.97); } }

  @media (prefers-reduced-motion: reduce) {
    .swap, .auth-brand > *, .auth-card, .ovl, .ovl-card, .pop, .pop-form, .btn, .tl-row, .ph, .toast {
      animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important;
    }
  }

/* The DecoSign loader (markup: src/loader.js). Timeline (0.9 s): "Deco" rises into place (0 - .3s), "Sign" is written in one
   stroke (.3s - .8s, ease-out), the whole of "Sign" settles in (.78s - .88s), then the finished wordmark holds. Magenta wordmark on light, white on dark.
   The animations run whenever the loader is shown (.on) or the page is still changing (.swapping), or always when the
   loader sits on its own (.dsl-solo). With prefers-reduced-motion it is simply the finished wordmark. */
.dsl { width: min(60vw, 300px); height: auto; display: block; overflow: visible; }
.dsl .on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dsl .on-light { display: none; } :root:not([data-theme="light"]) .dsl .on-dark { display: inline; } }
:root[data-theme="dark"] .dsl .on-light, html.swap-dark .dsl .on-light, .dsl-dark .dsl .on-light { display: none; }
:root[data-theme="dark"] .dsl .on-dark, html.swap-dark .dsl .on-dark, .dsl-dark .dsl .on-dark { display: inline; }

.dsl-pen { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.dsl-full { opacity: 0; }
.dsl-deco { opacity: 0; }
.swap.on .dsl-deco, html.swapping .dsl-deco, .dsl-solo .dsl-deco { animation: dsl-rise .3s cubic-bezier(.2, .7, .2, 1) both; }
.swap.on .dsl-pen, html.swapping .dsl-pen, .dsl-solo .dsl-pen { animation: dsl-write .5s .3s cubic-bezier(.25, .6, .3, 1) both; }
.swap.on .dsl-full, html.swapping .dsl-full, .dsl-solo .dsl-full { animation: dsl-settle .1s .78s ease-out both; }
@keyframes dsl-rise { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }
@keyframes dsl-write { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes dsl-settle { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dsl-deco, .dsl-full { opacity: 1 !important; animation: none !important; }
  .dsl-pen { animation: none !important; }
}

/* ======================================================================
   DecoSign Tasks: the screens. Built on the design system's tokens (base.css) and the interface kit (ui.css).
   Square-cut; hairlines instead of boxes; magenta for the one primary action; status is a word first, colour second.
   ====================================================================== */
:root { --grid: rgba(29, 36, 44, .04); --hover: rgba(29, 36, 44, .045); }
@media (prefers-color-scheme: dark) { :root { --grid: rgba(255, 255, 255, .035); --hover: rgba(255, 255, 255, .05); } }

/* the drawing sheet: a faint grid behind everything */
body { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; background-attachment: fixed; }
h2 { margin: 0; }
button, select, input, textarea { border-radius: 0; }

/* ---------------- header and navigation ---------------- */
.mark { gap: 12px; text-decoration: none; }
.mark-t { padding-left: 12px; border-left: 1px solid var(--line-strong); font: 700 12px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.navlink { padding: 21px 14px 19px; border-bottom: 2px solid transparent; font: 600 14px/1 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.navlink:hover { color: var(--ink); }
.navlink[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.newbtn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.newbtn .btn-l { display: inline-flex; align-items: center; gap: 7px; }
.bellbtn { position: relative; width: 38px; height: 38px; }
.bell-n { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: none; place-items: center; background: var(--ink); color: var(--bg); font: 700 11px/1 var(--sans); }
.bellbtn.has .bell-n { display: grid; animation: pop-in .3s var(--ease) both; }
#acctbtn { width: 38px; height: 38px; background: var(--panel); color: var(--on-panel); font: 700 13px/1 var(--sans); }
.pop.wide { width: 380px; max-height: min(70vh, 560px); overflow-y: auto; }
.pop-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pop-title b { font: 700 15px var(--sans); }
.pop-empty { margin: 0; padding: 16px 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.linkbtn { border: 0; background: none; padding: 2px 4px; color: var(--accent-text); font: 600 13px/1.4 var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--danger); }
.toast { display: flex; gap: 16px; align-items: center; }
.toast-a { border: 0; background: none; color: var(--pink-glow); font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; padding: 0; }

.tabbar, .fab { display: none; }

/* ---------------- people chips, tags ---------------- */
.ava { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; background: var(--panel); color: var(--on-panel); font: 700 11px/1 var(--sans); user-select: none; }
.ava.sm { width: 24px; height: 24px; font-size: 10px; } .ava.xs { width: 20px; height: 20px; font-size: 9px; } .ava.lg { width: 40px; height: 40px; font-size: 14px; }
.ava.none { background: transparent; border: 1px dashed var(--line-strong); color: var(--subtle); }
.tag { display: inline-flex; align-items: center; padding: 1px 8px; background: var(--sunken); font: 600 12px/1.6 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.off { color: var(--danger); } .tag.warn { color: var(--muted); border: 1px solid var(--line-strong); background: none; } .tag.live { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
.mini { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1.6 var(--sans); color: var(--muted); }
.mini.hi { color: var(--ink); }
.due { font: 600 12px/1.6 var(--sans); color: var(--muted); }
.due.late { color: var(--danger); } .due.now { color: var(--ink); }
.via { margin-inline-start: 8px; font: 600 12px var(--sans); color: var(--accent-text); }
.live { font: 600 12px var(--sans); color: var(--success); }
.chk, .tick { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0; background: var(--surface); border: 2px solid var(--line-strong); color: transparent; transition: background-color .15s, border-color .15s, color .15s, transform .12s var(--ease); }
.chk:hover, .tick:hover { border-color: var(--ink); }
.chk:active, .tick:active { transform: scale(.9); }
.chk[aria-pressed="true"], .tick[aria-pressed="true"] { background: var(--success); border-color: var(--success); color: var(--on-state); }
.tick { width: 20px; height: 20px; }
.icb.sm { width: 26px; height: 26px; }
.btn.sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn.dark { background: var(--ink); color: var(--bg); } .btn.dark:hover:not(:disabled) { background: var(--muted); }

/* ---------------- the page ---------------- */
.app { max-width: 1200px; margin: 0 auto; padding: 32px 24px 96px; min-height: 60vh; }
.app.r-board { max-width: none; padding-inline: 24px; }
.ph h1 { font-size: 36px; }
.empty { padding: 48px 20px; text-align: center; border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--surface) 60%, transparent); animation: rise .4s var(--ease) both; }
.empty h2 { font: 700 24px/1.2 var(--sans); letter-spacing: -.3px; margin-bottom: 6px; } .empty p { margin: 0 auto 18px; max-width: 46ch; color: var(--muted); }
.reg { display: block; width: 40px; height: 40px; margin: 0 auto 14px; border: 2px solid var(--line-strong); border-radius: 50%; position: relative; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--line-strong); }
.reg::before { left: 50%; top: -9px; bottom: -9px; width: 2px; transform: translateX(-50%); } .reg::after { top: 50%; left: -9px; right: -9px; height: 2px; transform: translateY(-50%); }
.reg.big { width: 56px; height: 56px; }
.side-empty { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------------- my day ---------------- */
.day { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.quick { display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); transition: border-color .15s; }
.quick:focus-within { border-color: var(--ink); color: var(--ink); }
.quick input { flex: 1; min-width: 0; min-height: 50px; border: 0; background: none; font: 400 16px var(--sans); color: var(--ink); outline: none; }
.day-lists { margin-top: 24px; }
.grp { margin-bottom: 28px; animation: rise .4s calc(var(--i, 0) * 60ms) var(--ease) both; }
.grp h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 12px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.grp.late h2 { color: var(--danger); } .grp.now h2 { color: var(--ink); }
.grp-n { min-width: 20px; padding: 2px 6px; background: var(--sunken); color: var(--ink); font: 700 11px/1.3 var(--sans); text-align: center; letter-spacing: 0; }
.rows { display: block; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); margin-top: -1px; cursor: pointer; transition: background-color .12s, opacity .16s, transform .16s var(--ease); }
.row:hover { background: color-mix(in srgb, var(--surface) 90%, var(--ink)); }
.row.leaving, .card.leaving { opacity: 0; transform: translateX(14px); }
.row-m { flex: 1; min-width: 0; }
.row-t { display: block; font: 600 15px/1.4 var(--sans); overflow-wrap: anywhere; }
.row.done .row-t, .card.done .card-title { text-decoration: line-through; color: var(--muted); }
.row-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 3px; }
.row-due { font: 600 13px var(--sans); color: var(--muted); white-space: nowrap; } .row-due.late { color: var(--danger); } .row-due.now { color: var(--ink); }
.day-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 16px; }
.panel h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 12px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.note { display: flex; gap: 10px; width: 100%; padding: 9px 8px; border: 0; background: none; text-align: left; cursor: pointer; transition: background-color .12s; align-items: flex-start; }
.note:hover { background: var(--sunken); }
.note.unread { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.note-l { font: 600 14px/1.35 var(--sans); } .note-x { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .note-t { margin-top: 3px; font-size: 12px; color: var(--subtle); }
.who { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .who-n { flex: 1; min-width: 0; line-height: 1.3; } .who-n b { font: 600 14px var(--sans); } .who-n small { display: block; font-size: 12px; color: var(--muted); }

/* ---------------- the board ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 22px; }
.flt { display: flex; flex-direction: column; gap: 5px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.flt select, .flt input, .plan-opts select { min-height: 40px; min-width: 150px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 400 15px var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.flt.search { position: relative; flex: 1 1 200px; max-width: 320px; } .flt.search svg { position: absolute; left: 12px; bottom: 13px; color: var(--muted); } .flt.search input { width: 100%; padding-left: 34px; }
.flt select:focus-visible, .flt input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cols { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding: 0 0 20px; scroll-snap-type: x proximity; }
.col { flex: 0 0 300px; scroll-snap-align: start; border-top: 2px solid var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); animation: rise .4s calc(var(--i, 0) * 45ms) var(--ease) both; transition: background-color .15s; }
.col.over { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.col-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.col-h h2 { flex: 1; min-width: 0; font: 700 15px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-n { font: 700 12px var(--sans); color: var(--muted); }
.col-b { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 8px; min-height: 40px; }
.col-empty { padding: 22px 8px 14px; text-align: center; color: var(--subtle); font-size: 13px; } .col-empty .reg { width: 28px; height: 28px; margin-bottom: 10px; opacity: .7; } .col-empty p { margin: 0; }
.col-add { padding: 0 10px 10px; } .col-b .col-add { padding: 4px 0 2px; }
.col-addb, .col-addsec { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 6px; border: 0; background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; transition: color .15s, background-color .15s; }
.col-addb:hover, .col-addsec:hover { color: var(--ink); background: var(--hover); }
.col-add input { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); font: 400 15px var(--sans); outline: none; }
.col-new { border-top: 2px dashed var(--line-strong); background: none; flex-basis: 220px; }
.card { background: var(--surface); border: 1px solid var(--line); padding: 12px; cursor: pointer; transition: border-color .15s, transform .15s var(--ease), opacity .16s; }
.card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card.high { box-shadow: inset 3px 0 0 var(--ink); }
.card.done { opacity: .62; } .card.drag { opacity: .35; }
.card-top { display: flex; gap: 10px; align-items: flex-start; }
.card-title { flex: 1; min-width: 0; font: 600 15px/1.4 var(--sans); overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; padding-left: 32px; }
.card-meta .grow { flex: 1; }
.drop-line { height: 3px; background: var(--accent); margin: 2px 0; }

/* ---------------- the planner ---------------- */
.plan-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 18px; }
.plan-nav, .plan-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .plan-label { font: 700 22px/1.2 var(--sans); letter-spacing: -.3px; min-width: 190px; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); background: var(--surface); }
.gh { padding: 8px 10px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font: 700 11px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); background: var(--sunken); }
.gc { min-height: 118px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; transition: background-color .12s; }
.grid.week .gc { min-height: 320px; }
.gc.wk, .gh.wk { background-color: color-mix(in srgb, var(--sunken) 55%, var(--surface)); } .gc.out { opacity: .5; }
.gc.over { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.gc-h { display: flex; justify-content: space-between; align-items: center; }
.gc-n { min-width: 22px; height: 22px; display: inline-grid; place-items: center; font: 600 12px var(--sans); color: var(--muted); }
.gc.today .gc-n { background: var(--accent); color: var(--on-accent); }
.gc-add { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); opacity: 0; cursor: pointer; transition: opacity .12s, background-color .12s; }
.gc:hover .gc-add, .gc-add:focus-visible { opacity: 1; } .gc-add:hover { background: var(--sunken); color: var(--ink); }
.gc-more { border: 0; background: none; padding: 2px 4px; text-align: left; font: 600 11px var(--sans); color: var(--muted); cursor: pointer; } .gc-more:hover { color: var(--ink); text-decoration: underline; }
.pchip { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 1px solid var(--line); background: var(--bg); text-align: left; font: 600 12px/1.3 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .12s, transform .12s var(--ease); }
.pchip:hover { border-color: var(--ink); } .pchip.drag { opacity: .4; }
.pchip-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip.done { opacity: .55; } .pchip.done .pchip-t { text-decoration: line-through; } .pchip.high { box-shadow: inset 2px 0 0 var(--ink); } .pchip.late { color: var(--danger); }
.agenda { display: none; }
.tray { margin-top: 28px; } .tray h2 { display: flex; gap: 10px; align-items: center; font: 700 12px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.tray-l { display: flex; flex-wrap: wrap; gap: 6px; } .tray-l .pchip { width: auto; max-width: 280px; }

/* ---------------- clients and templates ---------------- */
.clist { background: var(--surface); border: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: minmax(160px, 2.4fr) 70px 70px 70px minmax(100px, 1fr) 110px 34px; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; animation: rise .35s calc(var(--i, 0) * 35ms) var(--ease) both; transition: background-color .12s; }
.crow:not(.chead):hover { background: var(--hover); } .crow:last-child { border-bottom: 0; }
.chead { cursor: default; background: var(--sunken); font: 700 11px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding-block: 10px; animation: none; }
.cname { font: 600 16px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; } .cn { font: 700 18px var(--sans); font-variant-numeric: tabular-nums; } .cn.zero { color: var(--subtle); font-weight: 400; } .cn.late { color: var(--danger); } .cd { font: 400 14px var(--sans); color: var(--muted); } .cp { display: flex; gap: 4px; }
.clist > .side-empty { padding: 12px 16px; margin: 0; }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tpl { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: 18px; animation: rise .4s calc(var(--i, 0) * 50ms) var(--ease) both; }
.tpl h2 { font: 700 18px/1.25 var(--sans); } .tpl-meta { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.tpl-steps { margin: 0 0 14px; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.55; } .tpl-steps .more { list-style: none; margin-left: -22px; color: var(--subtle); }
.tpl .btn-row { margin-top: 0; }
.tpl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .tpl-l { font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* ---------------- activity ---------------- */
.feed .tl-link { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--muted); font: 400 13px/1.45 var(--sans); text-align: left; cursor: pointer; } .feed .tl-link:hover { color: var(--accent-text); text-decoration: underline; }

/* ---------------- the task sheet ---------------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 9200; background: var(--scrim); animation: fade-in .2s var(--ease) both; }
.sheet { position: fixed; z-index: 9300; top: 0; right: 0; bottom: 0; width: min(580px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-strong); border-top: 4px solid var(--rule); animation: slide-in .28s var(--ease) both; }
.sheet-scrim.out { animation: fade-out .18s var(--ease-in) both; pointer-events: none; } .sheet.out { animation: slide-out .18s var(--ease-in) both; pointer-events: none; }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } } @keyframes slide-out { to { transform: translateX(40px); opacity: 0; } }
body.sheet-open { overflow: hidden; }
.sheet-h { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.sheet-kind { font: 700 12px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-text); } .sheet-state { flex: 1; font-size: 12px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-b { flex: 1; overflow-y: auto; padding: 18px 24px 28px; overscroll-behavior: contain; }
.sheet-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.sh-meta { font-size: 12px; color: var(--muted); }
.sh-trash { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); font: 600 14px var(--sans); } .sh-trash[hidden] { display: none; }
.sh-title { display: block; width: 100%; padding: 4px 0 6px; margin-bottom: 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: 700 24px/1.25 var(--sans); letter-spacing: -.3px; resize: none; overflow: hidden; outline: none; transition: border-color .15s; }
.sh-title:focus { border-bottom-color: var(--ink); }
.sheet.is-done .sh-title { text-decoration: line-through; color: var(--muted); }
.sh-f { margin-bottom: 18px; } .sh-f > label, .sh-steps-h label, .sh-thread > label, .sh-hist-t { display: block; margin: 0 0 7px; font: 700 11px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sh-grid .sh-f { margin-bottom: 16px; min-width: 0; }
.sheet select, .sheet input[type="date"], .sheet textarea.sh-note, .cmt-write textarea { width: 100%; min-height: 42px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 400 15px/1.45 var(--sans); color: var(--ink); }
.sheet textarea.sh-note, .cmt-write textarea { resize: vertical; min-height: 80px; }
.sheet select:focus-visible, .sheet input:focus-visible, .sheet textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sh-client input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); font: 400 15px var(--sans); }
.sh-due { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sh-due input { flex: 1 1 130px; min-width: 0; }
.seg { display: flex; border: 1px solid var(--line-strong); background: var(--surface); }
.seg button { flex: 1; min-height: 40px; padding: 0 8px; border: 0; border-right: 1px solid var(--line); background: none; font: 600 13px var(--sans); color: var(--ink); cursor: pointer; transition: background-color .15s, color .15s; white-space: nowrap; }
.seg button:last-child { border-right: 0; } .seg button:hover { background: var(--sunken); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button.st-block[aria-pressed="true"] { background: var(--danger); color: var(--on-state); } .seg button.st-done[aria-pressed="true"] { background: var(--success); color: var(--on-state); }
.sh-steps { margin-bottom: 22px; } .sh-steps-h { display: flex; justify-content: space-between; align-items: baseline; } .sh-prog { font: 600 12px var(--sans); color: var(--muted); }
.sh-bar { height: 3px; background: var(--sunken); margin-bottom: 8px; } .sh-bar i { display: block; height: 100%; background: var(--success); transition: width .3s var(--ease); }
.step { display: grid; grid-template-columns: 22px minmax(0, 1fr) 26px 26px; gap: 8px; align-items: center; padding: 3px 0; }
.step input { min-width: 0; min-height: 34px; padding: 4px 6px; border: 0; border-bottom: 1px solid transparent; background: none; font: 400 15px var(--sans); color: var(--ink); } .step input:focus { outline: none; border-bottom-color: var(--ink); }
.step.on input { text-decoration: line-through; color: var(--muted); }
.step .icb { border-color: transparent; background: none; opacity: 0; transition: opacity .12s; } .step:hover .icb, .step .icb:focus-visible { opacity: 1; }
input.step-add { width: 100%; min-height: 40px; margin-top: 6px; padding: 8px 12px; border: 1px dashed var(--line-strong); background: none; font: 400 15px var(--sans); color: var(--ink); } input.step-add:focus { border-style: solid; border-color: var(--ink); outline: none; }
.sh-thread { margin-bottom: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sh-empty { margin: 4px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cmt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 0; } .cmt + .cmt { border-top: 1px solid var(--line); }
.cmt-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; } .cmt-top b { font: 600 14px var(--sans); } .cmt-top time { font-size: 12px; color: var(--muted); }
.cmt-t { margin-top: 2px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-write { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; } .cmt-write textarea { flex: 1; min-height: 60px; }
.sh-hist { border-top: 1px solid var(--line); padding-top: 12px; }
.sh-hist-t { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; border: 0; background: none; cursor: pointer; } .sh-hist-t svg { transition: transform .2s var(--ease); } .sh-hist-t[aria-expanded="true"] svg { transform: rotate(180deg); }
.sh-hist-b { margin-top: 8px; }

/* ---------------- agents and people ---------------- */
.ag { margin-bottom: 26px; } .ag h3 { margin: 0 0 6px; font: 700 17px/1.3 var(--sans); } .ag-p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ag-warn { margin: 14px 0 8px; font: 600 14px var(--sans); color: var(--danger); } .ag-steps { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); } .ag-steps li { margin-bottom: 6px; } .ag-steps b { color: var(--ink); }
.ag-make { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .ag-make .fld { flex: 1 1 240px; } .ag-make .btn { min-height: 46px; }
.ag-out { margin-top: 6px; } .ag-who { margin: 20px 0 8px; font: 700 15px var(--sans); }
.copybox { display: flex; gap: 10px; align-items: stretch; margin: 6px 0; background: var(--sunken); } .copybox pre { flex: 1; min-width: 0; margin: 0; padding: 12px 14px; overflow-x: auto; font: 400 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-all; } .copybox .chip { margin: 8px 8px 8px 0; align-self: flex-start; white-space: nowrap; }
.tabs2.small { margin-bottom: 8px; gap: 18px; } .tabs2.small button { font-size: 14px; padding: 8px 0; }
.conn { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .conn-i { width: 34px; height: 34px; display: grid; place-items: center; background: var(--sunken); color: var(--ink); } .conn-m { flex: 1; min-width: 0; } .conn-m b { display: block; font: 600 15px var(--sans); } .conn-m small { color: var(--muted); font-size: 13px; }
.pcard { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); margin-top: -1px; animation: rise .35s calc(var(--i, 0) * 40ms) var(--ease) both; } .pcard.off { opacity: .6; }
.pc-w b { display: block; font: 600 15px var(--sans); } .pc-w small { color: var(--muted); font-size: 13px; word-break: break-all; } .pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.link-for { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 12px; background: var(--sunken); } .link-for small { display: block; color: var(--muted); font-size: 13px; }
.link-check { margin: 0 0 12px; font: 600 13px/1.5 var(--sans); color: var(--muted); } .link-check.good { color: var(--success); } .link-check.bad { color: var(--danger); }
.mg-body, .mg { margin-top: 4px; }

/* ---------------- sign-in: the floor plan that draws itself ---------------- */
.plan { position: absolute; right: 7%; bottom: 7%; width: min(62%, 440px); pointer-events: none; opacity: .75; }
.plan path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 12s calc(var(--i) * .4s) infinite; }
.plan .dim { stroke: var(--pink-glow); stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 1; } 35% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.authorize .ask-list { margin: 4px 0 18px; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--muted); } .authorize .ask-list li { display: flex; gap: 10px; padding: 5px 0; } .authorize .ask-list svg { flex: none; margin-top: 3px; color: var(--success); } .authorize .ask-list .no svg { color: var(--danger); }

/* ---------------- tablets and phones ---------------- */
@media (max-width: 1000px) {
  .day { grid-template-columns: 1fr; } .day-side { position: static; grid-template-columns: 1fr 1fr; }
  .crow { grid-template-columns: minmax(120px, 2fr) 56px 56px 56px minmax(90px, 1fr) 34px; } .crow .cp { display: none; } .chead span:nth-child(6) { display: none; }
}
@media (max-width: 860px) {
  .nav { display: none; } .mark { margin-right: auto; } .mark-t { display: none; }
  .bar-in { min-height: 58px; padding: 0 16px; gap: 10px; } .bar-r { margin-left: 0; }
  .newbtn { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; border: 0; background: none; color: var(--muted); font: 600 11px/1.2 var(--sans); text-decoration: none; cursor: pointer; border-top: 2px solid transparent; margin-top: -1px; }
  .tabbar .tab[aria-current="page"] { color: var(--ink); border-top-color: var(--accent); }
  .fab { display: grid; place-items: center; position: fixed; z-index: 41; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .12s var(--ease), background-color .15s; }
  .fab:active { transform: scale(.94); } .fab:hover { background: var(--magenta-deep); }
  body.sheet-open .fab { display: none; }
  .app, .app.r-board { padding: 22px 16px calc(150px + env(safe-area-inset-bottom, 0px)); }
  .ph h1 { font-size: 30px; }
  #toast-host { bottom: calc(138px + env(safe-area-inset-bottom, 0px)); }
  .col { flex-basis: min(84vw, 320px); } .cols { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .filters { gap: 10px; } .flt { flex: 1 1 calc(50% - 5px); order: 1; } .flt select, .flt input { min-width: 0; width: 100%; } .flt.search { max-width: none; flex-basis: 100%; order: 3; } .filters .chip { order: 2; flex: 1 1 calc(50% - 5px); min-height: 40px; align-self: flex-end; }
  .plan-label { min-width: 0; font-size: 19px; text-align: left; } .plan-nav { flex: 1; }
  .grid { display: none; } .agenda { display: block; }
  .sheet { width: 100vw; border-left: 0; } .sheet-b { padding: 16px 16px 24px; } .sheet-h { padding: 10px 16px; } .sheet-f { padding-inline: 16px; }
  .sh-grid { grid-template-columns: 1fr; }
  .crow { grid-template-columns: minmax(0, 1fr) 46px 46px 34px; padding: 12px; gap: 8px; } .crow .cd, .chead span:nth-child(4), .chead span:nth-child(5), .crow > :nth-child(4) { display: none; } .crow .cn { font-size: 16px; }
  .pcard { grid-template-columns: 40px minmax(0, 1fr) auto; } .pc-tags { grid-column: 2 / 4; }
  .day-side { grid-template-columns: 1fr; } .pop.wide { width: min(380px, calc(100vw - 24px)); }
  .authorize .auth-card { padding: 24px 20px 16px; }
}
@media (max-width: 560px) {
  .seg button { font-size: 12px; padding: 0 4px; }
  .cmt-write { flex-direction: column; align-items: stretch; }
  .ag-make .btn { width: 100%; } .copybox { flex-direction: column; } .copybox .chip { margin: 0 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-scrim, .col, .grp, .tpl, .crow, .pcard, .empty, .plan path, .bell-n { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .plan path { stroke-dashoffset: 0; }
}
.auth-card h2 em { font-style: normal; color: var(--accent-text); }