@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/literata-600-latin.woff2") format("woff2");
  }
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/public-sans-400-700-latin.woff2") format("woff2");
  }
  :root {
    
    color-scheme: light;
    
    --bg: #f7f6f3;          
    --surface: #ffffff;     
    --sunk: #f2f0ec;        
    --ink: #1c1b19;         
    --ink-2: #5d5b55;       
    --line: #e4e1da;        
    
    --line-2: #c4bfb6;
    
    --control-line: #85807a;
    --field: #ffffff;       
    
    --brand: #0d4a2b;
    --brand-ink: #f4f2ec;
    --brand-ink-2: #c8d2c6;
    
    --brand-line: rgba(244, 242, 236, .46);
    --brand-fill: rgba(244, 242, 236, .09);
    
    --brand-fill-2: rgba(244, 242, 236, .18);
    
    --r: 6px;
    --rc: 6px;
    
    --go: #0f7a41;   --go-ink: #ffffff;   --go-soft: #e7f4ec;   --go-line: #a7d3ba;
    --stop: #c0342b; --stop-ink: #ffffff; --stop-soft: #fbeceb; --stop-line: #eeb4af;
    --warn: #b45309; --warn-ink: #ffffff; --warn-soft: #fbf0e4; --warn-line: #ecc79a;
    
    --go-deep: #0b4c29; --warn-deep: #7a3908;
    --info: #1d5fd0; --info-ink: #ffffff; --info-soft: #e9f0fc; --info-line: #aec7f0;
    
    --plan: #6a34c9; --plan-ink: #ffffff;
    --neutral: #556170; --neutral-ink: #ffffff;
    
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M8 17 15 24 26.5 9.5' fill='none' stroke='%23f4f2ec' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6 10.5 1.5' fill='none' stroke='%231c1b19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --serif: "Literata", Georgia, "Times New Roman", serif;
    --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;
    
    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;
    --t-xs: .9rem; --t-sm: .97rem; --t-md: 1.0625rem; --t-lg: 1.15rem;
    --tap: 44px; --tap-cta: 48px;
  }
  * { box-sizing: border-box; }
  
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
  
  
  body { font-family: var(--sans);
         margin: 0; background: var(--bg); color: var(--ink);
         padding-left: env(safe-area-inset-left, 0px);
         padding-right: env(safe-area-inset-right, 0px);
         font-size: var(--t-md); line-height: 1.6;
         -webkit-font-smoothing: antialiased; }

  
  
  
  header { background: var(--brand); color: var(--brand-ink);
           padding: calc(0.55rem + env(safe-area-inset-top, 0px))
                    env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
           margin: 0 calc(-1 * env(safe-area-inset-right, 0px))
                   0 calc(-1 * env(safe-area-inset-left, 0px));
           position: sticky; top: 0; z-index: 10; }
  
  body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 11;
                 height: env(safe-area-inset-top, 0px); background: var(--brand); }
  
  header:not(:has(nav)) { padding-bottom: 0.55rem; }
  
  
  .fascia-top, header nav { width: calc(100% - 2rem); max-width: 748px;
                            margin-left: auto; margin-right: auto; }
  .fascia-top { display: flex; align-items: center; justify-content: space-between;
                gap: 1rem; }
  
  header a.nameplate { color: var(--brand-ink); text-decoration: none;
               font-family: var(--serif); font-weight: 600;
               font-size: 1.31rem; letter-spacing: -0.005em;
               display: inline-flex; align-items: center; gap: 0.52em; }
  header a.nameplate:hover { color: var(--brand-ink); }
  
  header .logo { width: 1.333em; height: 1.333em; display: block; }
  
  header .demo-mark { margin: 0 auto 0 0.6rem; padding: 0.12rem 0.5rem;
                      border-radius: 999px; background: var(--warn);
                      color: var(--warn-ink); font-size: 0.75rem;
                      font-weight: 700; line-height: 1.3; }
  
  header .demo-mark ~ .fascia-tools { flex-shrink: 0; }
  @media (max-width: 359px) {
    header .demo-mark { margin-left: 0.35rem; padding: 0.08rem 0.35rem; font-size: 0.68rem; }
  }
  
  
  header nav { display: flex; margin-top: 0.25rem;
               border-top: 1px solid var(--brand-fill-2); }
  
  
  header nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  header nav a:focus-visible { outline-offset: -3px; }
  header nav a { flex: 1 1 0; min-width: min-content; text-align: center;
                 color: var(--brand-ink-2); text-decoration: none; font-weight: 600;
                 font-size: var(--t-xs); padding: 0.62rem 0.3rem;
                 transition: background .12s ease, color .12s ease; }
  header nav a:hover { color: var(--brand-ink); background: var(--brand-fill); }
  
  header nav a + a { box-shadow: inset 1px 0 0 var(--brand-line); }
  
  header nav a.active { color: var(--brand-ink); background: var(--brand-fill-2);
                        box-shadow: inset 0 -3px 0 var(--brand-ink); }
  header nav a + a.active { box-shadow: inset 1px 0 0 var(--brand-line),
                        inset 0 -3px 0 var(--brand-ink); }

  
  .skip { position: absolute; left: -9999px; top: 0; z-index: 20;
          background: var(--surface); color: var(--ink); font-weight: 600;
          border: 1px solid var(--control-line);
          padding: 0.6rem 0.9rem; border-radius: var(--rc); }
  .skip:focus { left: 0.5rem; top: 0.5rem; }
  
  .default-submit { position: absolute; left: -9999px; }

  main { max-width: 780px; margin: 1.4rem auto 3.5rem; padding: 0 1rem; }
  
  main.wide { max-width: none; padding: 0 2.5rem; }
  
  header.wide .fascia-top, header.wide nav { width: calc(100% - 5rem); max-width: none; }
  main.wide .drift-bar { display: flex; flex-wrap: wrap; align-items: center;
                         gap: 0.5rem 1rem; padding: 0.2rem 0 0.8rem;
                         border-bottom: 1px solid var(--line); }
  main.wide .drift-bar .drift-actions { margin-left: auto; display: flex;
                         align-items: center; gap: 0.6rem; }
  main.wide .drift-bar form { margin: 0; }
  main.wide tr.attention > td:first-child { box-shadow: inset 4px 0 0 var(--stop); }
  main.wide .drift-cols { display: grid; align-items: start; gap: 0 2.5rem;
                          grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  @media (max-width: 64rem) {
    main.wide .drift-cols { grid-template-columns: minmax(0, 1fr); }
  }
  
  h1 { font-family: var(--serif); font-weight: 600;
       font-size: clamp(1.35rem, 3.2vw, 1.7rem); letter-spacing: -0.01em;
       line-height: 1.2; margin: 1.6rem 0 0.7rem; text-wrap: balance; }
  h2 { font-family: var(--serif); font-weight: 600;
       font-size: var(--t-lg); letter-spacing: -0.005em;
       line-height: 1.25; margin: 1.5rem 0 0.6rem; text-wrap: balance; }
  
  h3 { font-family: var(--serif); font-weight: 600;
       font-size: 1rem; letter-spacing: -0.005em;
       line-height: 1.3; margin: 1.4rem 0 0.5rem; }
  
  em, i { font-family: var(--serif); font-style: normal; font-weight: 600; }
  main > h1:first-child, .flash + h1, .paused-banner + h1,
  .support-banner + h1 { margin-top: 0.4rem; }
  
  .card > h2:first-child { margin-top: 0.2rem; }
  .card > p:first-child { margin-top: 0; }

  
  main a { color: inherit; font-weight: 600;
           
           text-decoration-color: currentColor;
           text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
           text-decoration-thickness: 1px; text-underline-offset: 3px; }
  main a:hover { color: var(--go); text-decoration-color: currentColor; }

  
  .flash { background: var(--go-soft); border: 1px solid var(--go-line);
           box-shadow: inset 4px 0 0 var(--go);
           color: #0a5b30; padding: 0.7rem 0.95rem 0.7rem 1.1rem;
           border-radius: var(--rc); line-height: 1.5;
           margin-bottom: 1rem; font-size: 0.92rem; }
  .flash.warn { background: var(--warn-soft); border-color: var(--warn-line);
                box-shadow: inset 4px 0 0 var(--warn); color: #7a3908; }
  
  .flash.error { background: var(--stop-soft); border-color: var(--stop-line);
                 box-shadow: inset 4px 0 0 var(--stop); color: var(--ink); }
  .flash.error .err-when { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .flash.error .err-when { display: block; margin-top: 0.2rem;
                             font-size: 0.8rem; color: var(--ink-2); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .flash.error { animation: error-shake 0.3s ease-in-out 1; }
    @keyframes error-shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-6px); }
      40%, 80% { transform: translateX(6px); }
    }
  }
  
  button[data-busy-on] { cursor: progress; }
  button[data-busy-on]::before { content: ""; display: inline-block;
    width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.1em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; }
  @media (prefers-reduced-motion: no-preference) {
    button[data-busy-on]::before { animation: busy-spin 0.8s linear infinite; }
    @keyframes busy-spin { to { transform: rotate(360deg); } }
  }
  
  .flash .lead { display: block; font-weight: 700; margin-bottom: 0.2rem; }
  
  .flash .link { display: flex; width: fit-content; margin-top: 0.4rem; }
  
  .flash-undo { margin: 0.5rem 0 0; }

  
  .flash-bench { margin: 0.5rem 0 0; }

  
  .paused-banner { background: var(--stop-soft); border: 1px solid var(--stop-line);
                   box-shadow: inset 4px 0 0 var(--stop);
                   border-radius: var(--rc); padding: 0.85rem 1rem;
                   margin-bottom: 1rem; font-size: 0.92rem; line-height: 1.5;
                   display: flex; gap: 0.9rem; align-items: center;
                   flex-wrap: wrap; justify-content: space-between; }
  .paused-banner form { margin: 0; flex-shrink: 0; }

  
  .support-banner { background: var(--info-soft); border: 1px solid var(--info-line);
                    box-shadow: inset 4px 0 0 var(--info);
                    border-radius: var(--rc); padding: 0.85rem 1rem;
                    margin-bottom: 1rem; font-size: 0.92rem; line-height: 1.5; }
  .support-banner strong { font-weight: 700; }

  
  .card { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
  .meta { color: var(--ink-2); font-size: 0.85rem; margin-bottom: 0.5rem; }
  
  p.meta { max-width: 68ch; }
  
  .badge { display: inline-block; font-size: 0.72rem;
           font-weight: 700; border-radius: 999px; padding: 0.15rem 0.62rem;
           margin-right: 0.4rem; vertical-align: middle; letter-spacing: 0.01em; }
  .badge.action-reply { background: var(--info); color: var(--info-ink); }
  .badge.action-propose-times { background: var(--plan); color: var(--plan-ink); }
  .badge.action-book { background: var(--go); color: var(--go-ink); }
  .badge.action-escalate { background: var(--warn); color: var(--warn-ink); }
  .badge.action-decline { background: var(--neutral); color: var(--neutral-ink); }
  
  .badge.escalation-conflict { background: var(--neutral); color: var(--neutral-ink); }
  .badge.escalation-acute { background: var(--stop); color: var(--stop-ink); }
  
  .status { display: inline-block; font-size: 0.85rem; font-weight: 700;
            border-radius: 999px; padding: 0.15rem 0.62rem; background: var(--sunk);
            color: var(--ink-2); border: 1px solid var(--line);
            vertical-align: middle; }

  
  .progress { display: flex; align-items: baseline; gap: 0.55rem;
              padding-bottom: 0.75rem; margin-bottom: 0.2rem;
              border-bottom: 1px solid var(--line); }
  .progress-v { font-variant-numeric: tabular-nums;
                font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
                line-height: 1; color: var(--ink); }
  .progress-of { color: var(--ink-2); font-size: 1.05rem; }
  .progress-k { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
  .progress.done .progress-v, .progress.done .progress-k { color: var(--go); }
  
  .form-gap { margin-top: 0.55rem; }

  
  .checklist { list-style: none; margin: 0.4rem 0 0; padding: 0; }
  .check { display: flex; align-items: flex-start; gap: 0.7rem;
           padding: 0.7rem 0; border-top: 1px solid var(--line); }
  .check:first-child { border-top: none; padding-top: 0.2rem; }
  .check .mark { flex: none; width: 1.3rem; text-align: center; font-weight: 700;
                 font-size: 1.05rem; line-height: 1.45; }
  .check.done .mark { color: var(--go); }
  .check.todo .mark { color: var(--ink-2); }
  .check-body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
  .check-body .meta { margin: 0; }
  .check .status { flex: none; align-self: center; }

  
  
  .check.conn .status { align-self: flex-start; margin-top: 0.15rem; }
  .check.conn-working .mark { color: var(--go); }
  .check.conn-failing .mark { color: var(--stop); }
  .check.conn-stale .mark { color: var(--warn); }
  .check.conn-waiting .mark, .check.conn-not_configured .mark { color: var(--ink-2); }
  .status.pill-stop { background: var(--stop); color: var(--stop-ink);
                      border-color: var(--stop); }
  .status.pill-warn { background: var(--warn); color: var(--warn-ink);
                      border-color: var(--warn); }
  
  .status.pill-go { background: var(--go-soft); color: var(--go);
                    border-color: var(--go-line); }
  
  .conn-detail { margin-top: 0.3rem; font-size: 0.82rem; color: var(--ink-2); }
  .conn-detail summary { cursor: pointer; }
  .conn-detail p.meta { margin: 0.35rem 0 0; }
  
  .preset-row { align-items: center; }
  
  .preset-fact { margin-top: 0.22rem; color: var(--ink);
                 font-size: 0.85rem; font-variant-numeric: tabular-nums; }
  
  .sum-row { display: flex; gap: 0.7rem; }
  .sum-row .sum-body { flex: 1; min-width: 0; }
  .sum-row h2 { margin: 0; }
  .sum-row .preset-fact { display: block; }
  
  .sum-row > .status { flex: none; align-self: center; }
  
  .card.door { padding: 0; }
  .door-link, .door-row { display: flex; align-items: center; gap: 0.8rem;
               padding: 0.8rem 0.9rem 0.8rem 1rem; min-height: 3.5rem;
               border-radius: var(--r); }
  .door-link { color: inherit; font-weight: 400; text-decoration: none; }
  .door-link:hover { color: inherit; background: var(--sunk); }
  .door-link:active { background: var(--sunk); }
  .door-link:focus-visible { outline-offset: -3px; }
  
  button.door-link { width: 100%; text-align: left; background: none; border: 0;
               box-shadow: none; appearance: none; font-size: inherit;
               line-height: inherit; }
  button.door-link:active { transform: none; }
  
  .door-list > :not(:first-child) { border-top: 1px solid var(--line); }
  .door-list > .door-link, .door-list > .door-row { border-radius: 0; }
  .door-list > :first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .door-list > :last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
  
  .card.door h2, .fold-body .card.door h2 { margin: 0; }
  .door-body { flex: 1; min-width: 0; }
  
  
  ol.checklist { margin-top: 0; }
  .checklist .card.door { margin: 0 0 0.9rem; }
  .door-link .mark, .door-row .mark { flex: none; width: 1.3rem; text-align: center;
               font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
  .door.done .mark { color: var(--go); }
  .door.todo .mark { color: var(--ink-2); }
  .door-head .status { flex: none; }
  
  .door-meta { margin-top: 0.2rem; }
  .door-meta .door-status { display: inline-flex; margin-right: 0.5rem; }
  .door-meta .door-line { display: inline; }
  .door-line { display: block; margin-top: 0.15rem; color: var(--ink-2);
               font-size: 0.9rem; font-variant-numeric: tabular-nums;
               overflow-wrap: break-word; }
  .door-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
  .door-ic, .door-chev { flex: none; background: currentColor; color: var(--ink-2);
               -webkit-mask: var(--door-icon) center / contain no-repeat;
               mask: var(--door-icon) center / contain no-repeat; }
  .door-ic { width: 24px; height: 24px; }
  .door-chev { width: 20px; height: 20px; --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
  .door-ic-list { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
  .door-ic-wrench { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
  .door-ic-cal { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
  .door-ic-link { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
  .door-ic-play { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E"); }
  .door-ic-user { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
  
  .door-ic-mail { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
  .door-ic-file { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }
  .door-ic-phone { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='23' y1='1' x2='17' y2='7'/%3E%3Cline x1='17' y1='1' x2='23' y2='7'/%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
  .door-ic-mega { --door-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
  .preset-details { margin-top: 0.75rem; padding-top: 0.7rem;
                    border-top: 1px solid var(--line); }
  .preset-details summary { width: fit-content; cursor: pointer; font-weight: 700; }
  .preset-details .meta { margin: 0.45rem 0 0; }

  
  .card:has(> .help) { position: relative; }
  .help { display: block; margin: 0; }
  .help > summary { position: absolute; top: 0.8rem; right: 0.9rem;
                    display: inline-flex; align-items: center; justify-content: center;
                    width: 1.75rem; height: 1.75rem; border-radius: 50%;
                    border: 1px solid var(--control-line); background: var(--surface);
                    color: var(--ink-2); font-size: var(--t-xs); font-weight: 700;
                    line-height: 1; cursor: pointer; list-style: none; }
  .help > summary::-webkit-details-marker { display: none; }
  .help > summary::marker { content: ""; }
  
  .help > summary::after { content: ""; position: absolute; inset: -9px; }
  .help > summary:hover { color: var(--ink); border-color: var(--ink-2); }
  .help[open] > summary { background: var(--sunk); color: var(--ink);
                    border-color: var(--ink-2); }
  
  .card:has(> .help) > h2:first-child,
  .card:has(> .help) > h3:first-child,
  .card:has(> .help) > p:first-child { padding-right: 2.3rem; }
  
  
  .head-help { position: relative; margin: 1.5rem 0 0.6rem; min-height: 1.75rem; }
  .head-help > h2, .head-help > h3, .head-help > p { margin: 0; padding-right: 2.3rem; }
  .head-help > .help > summary { top: -0.05rem; right: 0; }
  .card > .head-help:first-child { margin-top: 0.2rem; }
  
  .help-body { margin: 0.55rem 0 0.6rem; padding: 0.7rem 0.85rem;
               background: var(--sunk); border-radius: var(--rc);
               border: 1px solid var(--line); }
  .help-body > :first-child { margin-top: 0; }
  .help-body > :last-child { margin-bottom: 0; }
  .help-body .meta { font-size: 0.88rem; margin-bottom: 0.45rem; }
  .help-body .meta:last-child { margin-bottom: 0; }

  
  .inbound, .draft { white-space: pre-wrap; border-radius: var(--rc);
            padding: 0.75rem 0.9rem; margin: 0.5rem 0; font-size: 0.95rem; }
  .inbound { background: var(--sunk); border: 1px solid var(--line); }
  .draft { background: var(--info-soft); border: 1px solid var(--info-line); }
  
  .reasoning { color: var(--ink); font-size: 0.86rem; line-height: 1.45;
               margin: 0.7rem 0 0; padding-top: 0.6rem;
               border-top: 1px solid var(--line); }

  
  .booking { background: var(--go-soft); border: 1px solid var(--go-line);
             border-radius: var(--rc);
             padding: 0.6rem 0.9rem; margin: 0.5rem 0; }
  .booking-k { display: block; font-size: 0.82rem; font-weight: 700;
               color: var(--ink-2); }
  .booking-v { display: block;
               font-variant-numeric: tabular-nums; font-size: 1rem;
               font-weight: 600; letter-spacing: -0.01em; margin-top: 0.15rem;
               color: var(--ink); }
  
  .booking.stale { background: var(--stop-soft); border-color: var(--stop-line); }
  
  .booking.past { background: var(--sunk); border-color: var(--line); }
  .booking.past .booking-v { color: var(--ink-2); }
  
  .booking.stale .booking-v { color: var(--stop); }
  .booking-note { color: var(--ink); font-size: 0.85rem; line-height: 1.5;
             margin: 0.5rem 0 0; }

  
  .held-back { background: var(--warn-soft); border: 1px solid var(--warn-line);
               border-radius: var(--rc);
               padding: 0.75rem 0.9rem; margin: 0.5rem 0; font-size: 0.88rem;
               line-height: 1.5; }
  
  .held-back:has(> .help) { position: relative; }
  .held-back:has(> .help) > p:first-child { margin: 0; padding-right: 2.3rem; }
  .held-back > .help > summary { top: 0.6rem; right: 0.6rem; }
  .held-back > .help:last-child > .help-body { margin-bottom: 0; }
  
  .held-back a, .flash a, .paused-banner a { color: inherit; font-weight: 700;
             text-decoration: underline; text-decoration-color: currentColor;
             text-underline-offset: 2px; }

  
  .errtext { font-family: var(--mono); font-size: 0.86rem; line-height: 1.5;
             color: var(--ink); overflow-wrap: anywhere; }

  .actions { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap;
             align-items: center; }
  
  .bench-types { display: flex; flex-wrap: wrap; gap: 0.5rem;
                 margin-top: 0.85rem; }
  .actions form { display: inline; margin: 0; }
  button, .btn { font: inherit; font-size: var(--t-xs); font-weight: 700;
           border-radius: var(--rc); padding: 0.5rem 0.95rem; cursor: pointer;
           border: 1px solid transparent; text-decoration: none;
           display: inline-block; line-height: 1.2;
           transition: transform .04s ease,
                       background .12s ease, border-color .12s ease; }
  button:active, .btn:active { transform: translateY(1px); }
  
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px;
                   border-radius: 3px; }
  
  header :focus-visible { outline-color: var(--brand-ink); }
  
  .btn { background: var(--surface); color: var(--ink);
         border-color: var(--control-line); text-decoration: none; font-weight: 700; }
  .btn:hover { border-color: var(--ink-2); }
  
  .approve { background: var(--go); color: var(--go-ink); }
  .approve:hover { background: #0c6a38; }
  
  .btn.approve, .btn.approve:hover { border-color: transparent; }
  .reject { background: var(--surface); color: var(--stop);
            border-color: var(--stop); }
  .reject:hover { background: var(--stop-soft); border-color: var(--stop); }
  .edit { background: var(--surface); color: var(--info);
          border-color: var(--info); }
  .edit:hover { background: var(--info-soft); border-color: var(--info); }
  
  .approve.takeover { background: var(--warn); color: var(--warn-ink); }
  .approve.takeover:hover { background: #9a4708; }
  
  .overtag { background: var(--surface); color: var(--warn);
             border-color: var(--warn); width: 100%; min-height: var(--tap-cta);
             text-align: center; box-sizing: border-box; }
  .overtag:hover { background: var(--warn-soft); border-color: var(--warn); }

  
  .confirm { display: inline-block; }
  .confirm > summary { list-style: none; display: inline-block;
           font-size: var(--t-xs); font-weight: 700; border-radius: var(--rc);
           padding: 0.5rem 0.95rem; cursor: pointer; line-height: 1.2;
           background: var(--go); color: var(--go-ink); }
  .confirm > summary::-webkit-details-marker { display: none; }
  .confirm > summary::marker { content: ""; }
  
  .confirm > summary::after { content: "▾"; margin-left: 0.45rem;
           font-size: 0.8em; opacity: 0.9; }
  .confirm[open] > summary::after { content: "▴"; }
  .confirm > summary:hover { background: #0c6a38; }
  .confirm[open] > summary { background: var(--go);
           border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .confirm-body { margin-top: -1px; padding: 0.7rem 0.8rem;
           background: var(--go-soft); border: 1px solid var(--go-line);
           border-radius: 0 var(--rc) var(--rc) var(--rc);
           display: flex; flex-direction: column; gap: 0.55rem; }
  .confirm-body .to { font-size: 0.82rem; color: var(--ink-2); }
  .confirm-body .to strong { font-weight: 700; color: var(--ink); }

  
  .card-head { display: flex; align-items: center; gap: 0.4rem; }
  .card-head strong { color: var(--ink); flex: 1 1 auto; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-head time { flex: none; }
  .card-head .channel-icon { width: 18px; height: 18px; flex: none; }
  
  .call-number { font-size: 1.3rem; letter-spacing: 0.01em;
                 font-variant-numeric: tabular-nums; }

  
  .actions .approve-row, .actions .action-pair, .actions .quiet-link-row { flex: 1 1 100%; }
  .approve-row .confirm, .approve-row .confirm > summary { width: 100%;
           box-sizing: border-box; text-align: center; }
  .action-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .action-pair .btn, .action-pair button { width: 100%; min-height: var(--tap);
           text-align: center; box-sizing: border-box; }
  
  .thread-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
  .thread-actions textarea { margin-bottom: 0.6rem; }
  
  .quiet-link { display: flex; align-items: center; justify-content: center;
           width: 100%; min-height: var(--tap); background: transparent;
           border-color: transparent; color: var(--ink-2); font-weight: 600; }
  .quiet-link:hover { color: var(--ink); text-decoration: underline; }
  
  .esc-title { font-weight: 700; color: var(--ink); font-size: 1.05rem;
               line-height: 1.3; margin: 0.6rem 0 0.15rem; }
  .esc-line { margin: 0 0 0.2rem; }
  .esc-body { white-space: pre-wrap; color: var(--ink); font-size: 0.95rem;
              margin: 0.3rem 0 0.5rem; }
  
  .card-head > span { flex: none; }
  .btn.call { display: flex; align-items: center; justify-content: center;
              gap: 0.5rem; width: 100%; min-height: var(--tap-cta);
              box-sizing: border-box; font-size: 1rem; }
  .btn.call .channel-icon { width: 20px; height: 20px; flex: none; }
  
  .action-pair.even .btn { display: flex; align-items: center;
           justify-content: center; padding-inline: 0.5rem;
           font-size: calc(var(--t-xs) * 0.92); }
  .actions .quiet-pair { flex: 1 1 100%; display: grid; gap: 0.5rem;
                         grid-template-columns: repeat(2, minmax(0, 1fr)); }

  
  textarea, select, input[type="text"], input[type="url"], input[type="time"],
  input[type="number"], input[type="password"], input[type="email"] {
             width: 100%; font: inherit;
             font-size: 0.95rem;
             color: var(--ink); background: var(--field);
             border: 1px solid var(--control-line); border-radius: var(--rc);
             padding: 0.6rem 0.75rem; }
  
  select { -webkit-appearance: none; appearance: none;
             min-height: var(--tap); cursor: pointer;
             padding-right: 2.1rem;
             background-image: var(--caret);
             background-repeat: no-repeat;
             background-position: right 0.7rem center;
             background-size: 0.7rem; }
  
  textarea { min-height: 12rem; resize: vertical; line-height: 1.5; }
  .ta-sm { min-height: 3.5rem; }
  .ta-md { min-height: 5rem; }
  .ta-lg { min-height: 7rem; }
  
  textarea:not(.copy-val) { field-sizing: content; max-height: 22rem; }
  
  textarea.ta-list { max-height: 64rem; }
  textarea:focus, input:focus { border-color: var(--ink-2); }
  
  textarea[aria-invalid="true"], input[aria-invalid="true"] {
    border-color: var(--stop); box-shadow: 0 0 0 1px var(--stop); }

  
  .price-row { display: grid; grid-template-columns: 1.3fr 0.9fr 1.6fr;
    gap: 0.5rem; margin-bottom: 0.5rem; }
  .price-row input { width: 100%; }
  @media (max-width: 34rem) { .price-row { grid-template-columns: 1fr; } }
  
  
  .price-group { border: 0; margin: 0; padding: 0; min-width: 0; }
  
  .form-part > h2:first-child { margin-top: 0.2rem; }
  .form-part + .form-part { margin-top: 1.6rem; padding-top: 0.4rem;
    border-top: 1px solid var(--line); }
  .form-part + .form-part > h2:first-child { margin-top: 0.9rem; }
  
  .form-part .preset-details { margin-top: 0.4rem; padding-top: 0; border-top: 0; }
  .form-part .preset-details summary { font-weight: 600; font-size: 0.9rem;
    color: var(--ink-2); }
  .price-add, .price-sum { display: none; }
  
  .price-list.js { margin-top: 0.5rem; }
  .price-list.js .price-add { display: block; margin-top: 0.6rem; }
  .price-list.js .price-row { display: block; margin: 0; padding: 0; border: 0; }
  .price-list.js .price-row > input, .price-list.js .price-row.price-blank { display: none; }
  .price-list.js .price-sum { display: flex; align-items: center; gap: 0.6rem;
    width: 100%; min-height: var(--tap); padding: 0.6rem 0.1rem; box-sizing: border-box;
    background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    box-shadow: none; appearance: none; color: var(--ink); text-align: left;
    font-size: inherit; font-weight: 400; line-height: 1.35; }
  .price-list.js .price-row:first-child .price-sum { border-top: 1px solid var(--line); }
  .price-list.js .price-sum:hover, .price-list.js .price-sum:active { background: var(--sunk); }
  .price-list.js .price-sum:active { transform: none; }
  .price-sum-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .price-sum-price { color: var(--ink-2); }
  .price-sum-note { font-size: var(--t-xs); color: var(--ink-2); }
  
  .price-list.js.prices-off .price-sum-price,
  .price-list.js.prices-off .price-sum-note { display: none; }
  
  .price-pop input[type="text"] { width: 100%; box-sizing: border-box; }
  .price-pop .price-pop-remove { display: block; width: 100%; margin-top: 0.5rem;
    color: var(--stop); }

  
  .area-group { margin: 0; min-width: 0; }
  
  .area-choice + .area-choice { margin-top: 0.7rem; }
  .area-pick { display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; font-weight: 600; }
  
  .area-pick input { width: auto; margin: 0; }
  
  .area-pick.off { color: var(--ink-2); cursor: not-allowed; }
  .area-pick.off input { opacity: 0.45; cursor: not-allowed; }
  .area-note { margin: 0.3rem 0 0; }
  
  .area-saved { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
  .area-saved summary { font-weight: 400; font-size: 0.9rem; color: var(--ink-2); }
  .area-saved .meta { max-height: 9rem; overflow-y: auto; overflow-wrap: anywhere; }
  .area-body { margin: 0.45rem 0 0 1.5rem; }
  .area-body[hidden] { display: none; }
  
  .area-radius { display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.4rem; }
  .area-radius input[type="number"] { width: 4.75rem; min-height: var(--tap);
    padding-inline: 0.4rem;
    font-size: 1.3rem; font-weight: 600; text-align: center; }
  .form-part .area-towns summary { font-weight: 400; }
  .area-towns .area-list { margin-top: 0.45rem; }
  
  
  .area-list { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 14rem));
    justify-content: start;
    gap: 0.4rem; max-height: 18rem; overflow-y: auto; padding-right: 0.2rem; }
  
  .area-row { display: flex; align-items: center; gap: 0.15rem; min-width: 0;
    border: 1px solid var(--control-line); border-radius: var(--rc);
    background: var(--field); padding-right: 0.15rem; min-height: var(--tap); }
  
  .area-row:focus-within { outline: 2px solid var(--ink); outline-offset: -2px; }
  
  .area-row:has(input[aria-invalid="true"]) { border-color: var(--stop);
    box-shadow: 0 0 0 1px var(--stop); }
  .area-row input { flex: none; width: 4.6rem; border: 0; background: transparent;
    padding: 0.5rem 0.35rem 0.5rem 0.6rem; }
  
  .area-row input:focus:not([aria-invalid="true"]),
  .area-row input:focus-visible:not([aria-invalid="true"]) { outline: 0; box-shadow: none; }
  .area-town { flex: 1 1 auto; min-width: 0;
    color: var(--ink-2); font-size: 0.86rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .area-remove, .area-add { display: none; }
  .area-list.js .area-remove { display: inline-flex; align-items: center;
    justify-content: center; }
  .area-add { margin-top: 0.5rem; }
  .area-list.js + .area-add { display: block; }
  
  .area-remove { flex: none; background: transparent; color: var(--ink-2);
    border: 0; border-radius: var(--rc); padding: 0;
    min-width: 2.1rem; min-height: 2.1rem; font-size: 1rem; line-height: 1; }
  .area-remove:hover { color: var(--stop); background: var(--stop-soft); }

  @media (max-width: 34rem) {
    
    .price-row { margin-bottom: 0.8rem; }
    .price-row + .price-row { border-top: 1px solid var(--line-2);
      padding-top: 0.8rem; }

    
    .save-dock { position: sticky; bottom: var(--bottom-nav, 0px); z-index: 5;
      margin: 0.85rem -1.1rem -1rem; padding: 0.7rem 1.1rem 1rem;
      background: var(--surface); border-top: 1px solid var(--line); }
    
    html:has(.save-dock) { scroll-padding-bottom: calc(6rem + var(--bottom-nav, 0px)); }
  }

  
  input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 1.15rem; height: 1.15rem; flex: none;
    border: 1px solid var(--control-line);
    
    border-radius: 3px;
    background: var(--field) no-repeat center / 100% 100%;
    cursor: pointer;
  }
  input[type="checkbox"]:checked {
    background-color: var(--go); border-color: var(--go);
    background-image: var(--tick);
  }
  
  
  input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    width: 1.15rem; height: 1.15rem; flex: none;
    border: 1px solid var(--control-line);
    border-radius: 50%;
    background: var(--field);
    cursor: pointer;
  }
  input[type="radio"]:checked {
    background-color: var(--go); border-color: var(--go);
    
    box-shadow: inset 0 0 0 0.3rem var(--field);
  }
  
  form label { display: block; font-size: 0.82rem; font-weight: 700;
             color: var(--ink-2); margin: 0.9rem 0 0.3rem; }
  
  .opt { display: flex; align-items: flex-start; gap: 0.5rem;
         margin: 0.9rem 0 0; font-size: var(--t-xs); font-weight: 600;
         color: var(--ink); cursor: pointer; }
  
  .opt input { margin: 0.15rem 0 0; }
  
  .field-narrow { max-width: 12rem; }
  .field-narrow + .field-narrow, .opt + .field-narrow { margin-top: 0.9rem; }

  
  .meeting-modules { display: grid; gap: 0.7rem; margin: 0.7rem 0 0.9rem; }
  .meeting-module, .meeting-primary { min-width: 0; margin: 0; padding: 0.75rem 0.9rem 0.9rem;
                                      border: 1px solid var(--line);
                                      border-radius: var(--r); background: var(--surface); }
  .meeting-module:has(.module-toggle input:checked) { border-color: var(--control-line);
                                                      background: var(--sunk); }
  .meeting-module legend, .meeting-primary legend { padding: 0 0.35rem;
                                                     font-weight: 700; color: var(--ink); }
  .meeting-module .meta, .meeting-primary .meta { margin: 0 0 0.55rem; }
  .meeting-module .module-note { margin: 0.65rem 0 0; }
  .meeting-primary { margin-bottom: 1.3rem; }

  .empty { color: var(--ink-2); background: var(--surface);
           border: 1px dashed var(--line-2); border-radius: var(--r);
           padding: 1.75rem 1.5rem; text-align: center; }
  .empty code { font-family: var(--mono); font-size: 0.88em; background: var(--sunk);
                border: 1px solid var(--line); border-radius: 5px;
                padding: 0.05rem 0.35rem; }

  
  table { width: 100%; border-collapse: collapse; background: var(--surface);
          border: 1px solid var(--line); border-radius: var(--r);
          overflow: hidden; }
  th, td { text-align: left; padding: 0.6rem 0.85rem; font-size: 0.92rem;
           border-top: 1px solid var(--line); }
  
  th { background: var(--sunk); border-top: none; color: var(--ink-2);
       font-size: 0.88rem; font-weight: 600; }
  td strong { font-variant-numeric: tabular-nums;
              font-weight: 600; letter-spacing: -0.01em; }
  
  .num { text-align: right; }
  tbody tr:hover td, table tr:hover td { background: var(--sunk); }
  
  td a { color: inherit; font-weight: 600;
         text-decoration-color: currentColor;
         text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
         text-decoration-thickness: 1px; text-underline-offset: 3px; }
  td a:hover { color: var(--go); text-decoration-color: currentColor; }

  
  .readouts { display: grid; grid-template-columns: repeat(4, 1fr);
              gap: 0.7rem; margin: 0.4rem 0 0.6rem; }
  @media (max-width: 56rem) {
    .readouts { grid-template-columns: repeat(2, 1fr); }
  }
  .tile { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r); padding: 0.85rem 0.9rem; }
  .tile .k { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
  .tile .v { font-variant-numeric: tabular-nums;
             font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
             line-height: 1.1; margin-top: 0.25rem;
             
             min-height: 1.76rem; display: flex; align-items: flex-end; }
  
  .tile .v.long { font-size: 1.1rem; letter-spacing: 0; }
  
  .tile .s { font-size: 0.82rem; line-height: 1.35; color: var(--ink-2);
             margin-top: 0.3rem; }
  
  .tile.alert { background: var(--stop-soft); border-color: var(--stop-line); }
  .tile.alert .v { color: var(--stop); }
  .tile.ok .v { color: var(--go); }

  
  .range { display: inline-flex; flex-wrap: wrap; gap: 0.35rem;
           margin: 0.2rem 0 0.7rem; }
  .range a { font-size: 0.85rem; font-weight: 600; text-decoration: none;
             color: var(--ink-2); background: var(--surface);
             border: 1px solid var(--control-line); border-radius: var(--rc);
             padding: 0.38rem 0.7rem;
             transition: border-color .12s ease, color .12s ease,
                         background .12s ease; }
  .range a:hover { border-color: var(--ink-2); color: var(--ink); }
  .range a.active { color: var(--ink); background: var(--sunk);
                    border-color: var(--control-line);
                    box-shadow: inset 0 -2px 0 var(--ink); }

  
  .fold { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r); margin: 1.2rem 0; }
  .fold > summary { list-style: none; cursor: pointer;
          padding: 0.75rem 1rem; font-weight: 700; font-size: 0.95rem;
          display: flex; align-items: center; gap: 0.5rem;
          
          min-height: var(--tap); border-radius: var(--r); }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold > summary::marker { content: ""; }
  
  .fold > summary::after { content: "▾"; margin-left: auto; font-size: 0.8em;
          color: var(--ink-2); }
  .fold[open] > summary::after { content: "▴"; }
  .fold[open] > summary { border-bottom: 1px solid var(--line);
          border-radius: var(--r) var(--r) 0 0; }
  .fold > summary:hover { background: var(--sunk); }
  .fold > summary:active { transform: translateY(1px); }
  .fold-body { padding: 0.2rem 1rem 1rem; }
  .fold-body > :last-child { margin-bottom: 0; }
  .fold-body h2:first-child { margin-top: 0.6rem; }

  
  .search { display: flex; gap: 0.5rem; align-items: center;
            margin: 0.2rem 0 1rem; flex-wrap: wrap; }
  .search input[type="text"] { flex: 1 1 12rem; width: auto; }
  .search .btn, .search button { white-space: nowrap; }

  
  .pager { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem;
           flex-wrap: wrap; }
  .pager .meta { margin: 0; }
  .btn.disabled { opacity: 0.5; pointer-events: none; }
  
  
  .conn-strip { display: flex; align-items: center; gap: 0.5rem;
                padding: 0.55rem 0.75rem; border-radius: var(--r);
                font-size: 0.92rem; margin-bottom: 0.75rem; }
  .conn-strip .dot { width: 0.5rem; height: 0.5rem; border-radius: 999px;
                     flex: none; }
  .conn-strip.ok { background: var(--go-soft); border: 1px solid var(--go-line);
                   color: var(--go-deep); }
  .conn-strip.ok .dot { background: var(--go); }
  .conn-strip.wait { background: var(--warn-soft);
                     border: 1px solid var(--warn-line); color: var(--warn-deep); }
  .conn-strip.wait .dot { background: var(--warn); }
  
  .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .steps > li { counter-increment: step; display: grid;
                grid-template-columns: 1.6rem 1fr; gap: 0.6rem;
                padding: 0.8rem 0; border-top: 1px solid var(--line); }
  .steps > li:first-child { border-top: 0; padding-top: 0.15rem; }
  .steps > li::before { content: counter(step); font-size: 0.8rem;
                        font-weight: 700; color: var(--ink-2);
                        background: var(--sunk); border: 1px solid var(--line);
                        border-radius: 999px; width: 1.6rem; height: 1.6rem;
                        display: grid; place-items: center; margin-top: 0.05rem; }
  .step-title { font-weight: 700; margin-bottom: 0.4rem; }
  
  .copy-row { display: flex; gap: 0.5rem; align-items: stretch; }
  .copy-val { flex: 1; min-width: 0; font-size: 0.85rem; min-height: var(--tap);
              background: var(--sunk); border: 1px solid var(--line);
              border-radius: var(--r); padding: 0.5rem 0.6rem; color: var(--ink); }
  .copy-val.dots { letter-spacing: 0.14em; color: var(--ink-2);
                   display: flex; align-items: center; }
  .copy-row .btn { min-height: var(--tap); display: flex; align-items: center; }
  
  .btn.danger { color: var(--stop); border-color: var(--stop); margin-top: 0.5rem; }

  
  .conv-list { list-style: none; margin: 0.6rem 0; padding: 0 0.75rem;
               background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r); }
  .conv-list > li + li { border-top: 1px solid var(--line); }
  .conv-row { display: flex; align-items: center; gap: 0.75rem; min-height: 68px;
              padding: 0.7rem 0; box-sizing: border-box; color: var(--ink);
              font-weight: 400; text-decoration: none; }
  .conv-row:hover { background: var(--sunk); }
  .conv-avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px;
                 border-radius: 999px; background: var(--ink-2); color: var(--surface);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 0.875rem; font-weight: 600; }
  
  .conv-avatar-call { background: var(--warn-soft); border: 1px solid var(--warn-line); }
  .conv-badge { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px;
                box-sizing: border-box; border-radius: 999px; background: var(--surface);
                border: 1px solid var(--line-2); color: var(--ink-2);
                display: flex; align-items: center; justify-content: center; }
  .conv-badge:empty { display: none; }
  .conv-badge svg { width: 11px; height: 11px; }
  .conv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .conv-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .conv-name strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; }
  
  .holder-mark { margin-right: 0; flex-shrink: 0; }
  .holder-mark svg { display: block; }
  .holder-agent { display: inline-flex; color: var(--ink-2); }
  .holder-firm { padding: 0.2rem 0.45rem; }
  .holder-firm svg { width: 12px; height: 12px; }
  .conv-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 999px;
              background: var(--warn); }
  
  .channel-icon.attn { color: var(--warn); }
  .conv-last { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
  .conv-side { flex-shrink: 0; display: flex; flex-direction: column;
               align-items: flex-end; gap: 4px; }
  .conv-side time { font-size: 0.75rem; color: var(--ink-2);
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
  
  .conv-needs { font-size: 0.75rem; font-weight: 700; color: var(--warn);
                white-space: nowrap; }

  
  .conv-tabs { display: flex; gap: 0.5rem; margin: 0.6rem 0 0.35rem; flex-wrap: wrap; }
  .conv-tab::after { content: ""; position: absolute; inset: -4px 0; }
  .conv-tab { position: relative; display: inline-flex; align-items: center; min-height: 36px;
              padding: 0 0.75rem; border-radius: 6px; border: 1px solid var(--line-2);
              background: var(--surface); color: var(--ink); font-weight: 600;
              font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
  .conv-tab:hover { background: var(--sunk); }
  .conv-tab.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

  
  .msg-list { display: flex; flex-direction: column; margin: 0.6rem 0;
              border-top: 1px solid var(--line); }
  .msg { padding: 0.75rem 0.1rem 0.8rem; border-bottom: 1px solid var(--line);
         font-size: 0.95rem; }
  .msg.outbound-msg { background: var(--info-soft); border: 1px solid var(--info-line);
                      border-radius: var(--rc); padding: 0.7rem 0.8rem 0.75rem;
                      margin: 0.5rem 0; }
  .msg.outbound-msg.by-owner { background: var(--go-soft); border-color: var(--go-line); }
  .msg.outbound-msg.by-system { background: var(--sunk); border-color: var(--line); }
  .msg .who { display: flex; justify-content: space-between; align-items: center;
              gap: 0.8rem; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
  .msg .who > span { display: flex; align-items: center; min-width: 0;
                     overflow-wrap: anywhere; }
  .msg .link-host { font-size: 0.8rem; color: var(--ink-2); }
  .msg .who time { font-weight: 400; color: var(--ink-2); white-space: nowrap;
                   font-variant-numeric: tabular-nums; }
  .msg .avatar { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0;
                 border-radius: 999px; background: var(--brand); color: var(--brand-ink);
                 font-size: 0.7rem; margin-right: 0.4rem; vertical-align: middle; }
  .msg.by-agent .avatar { background: var(--info); color: var(--info-ink); }
  .msg.by-owner .avatar { background: var(--go); color: var(--go-ink); }
  .msg.by-system .avatar, .msg.by-unknown .avatar { background: var(--ink-2); color: var(--surface); }
  .msg .body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
  
  .msg-draft { display: flex; flex-direction: column; text-decoration: none; color: inherit;
               background: var(--surface); border: 1px dashed var(--info-line);
               border-radius: var(--rc); padding: 0.7rem 0.8rem 0.75rem; margin: 0.5rem 0; }
  .msg-draft:hover { border-color: var(--info); }
  .msg-draft .draft-preview { color: var(--ink-2); }
  .msg-draft .draft-cta { display: flex; align-items: center; justify-content: space-between;
               gap: 0.5rem; min-height: var(--tap); margin-top: 0.3rem;
               font-size: 0.9rem; font-weight: 600; color: var(--info); }
  
  .msg-fold summary, .mail-fold summary { cursor: pointer; color: var(--info); font-weight: 600;
                       font-size: 0.88rem; margin: 0.3rem 0; list-style: none;
                       text-decoration: underline; text-underline-offset: 3px; }
  .msg-fold summary::-webkit-details-marker,
  .mail-fold summary::-webkit-details-marker { display: none; }
  .msg-fold[open] summary { display: none; }
  
  .mail-fold, .mail-fold summary { display: inline; }
  .mail-fold summary { white-space: nowrap; }
  .mail-fold[open] summary { display: none; }
  
  .inbound:has(> .mail-fold[open]) > .mail-open { display: none; }
  .msg .clip { font-size: 0.82rem; color: var(--ink-2); font-style: italic; margin: 0.4rem 0 0; }
  
  .msg-note { font-size: 0.85rem; color: var(--ink-2); margin: 0.6rem 0.1rem; }
  a.back { color: var(--ink-2); text-decoration: none; font-size: var(--t-xs);
           font-weight: 600; display: inline-block; margin-bottom: 0.3rem; }
  a.back:hover { color: var(--ink); text-decoration: underline;
           text-decoration-color: currentColor; text-underline-offset: 3px; }
  
  .contact-link { display: inline-flex; align-items: center; gap: 0.4rem;
           min-height: var(--tap); color: var(--info); font-weight: 600;
           text-decoration: none; }
  .contact-link:hover { text-decoration: underline; }

  
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                  border-radius: var(--r); }
  
  @media (min-width: 60rem) {
    main > .table-scroll:has(.stack) { width: min(1120px, calc(100vw - 3rem));
                         margin-left: 50%; transform: translateX(-50%); }
  }

  
  .day-hours { display: grid; grid-template-columns: max-content minmax(0, 18rem);
               column-gap: 0.5rem; row-gap: 0.45rem; margin: 0.4rem 0 0.9rem;
               align-items: center; }
  
  .day-row { display: contents; }
  .day-times { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
  
  [hidden] { display: none !important; }
  
  .call-hours { max-width: 18rem; margin-top: 0.5rem; }
  .day-times input[type="time"] { flex: 1 1 0; min-width: 0; margin: 0; }
  
  @media (max-width: 30rem) {
    .day-hours { grid-template-columns: 1fr; row-gap: 0.3rem; }
    .day-row + .day-row .day-choice { margin-top: 0.5rem; }
    .day-choice { justify-content: flex-start; }
  }
  .day-choice { display: inline-flex; align-items: center; gap: 0.5rem;
                margin: 0; white-space: nowrap; font-weight: 600; font-size: var(--t-xs);
                border: 1px solid var(--control-line); border-radius: var(--rc);
                padding: 0.5rem 0.75rem; cursor: pointer; background: var(--surface);
                transition: border-color .12s ease, background .12s ease; }
  .day-choice:hover { border-color: var(--ink-2); }
  .day-choice:has(input:checked) { border-color: var(--go);
                background: var(--go-soft); color: #0a5b30; }
  .day-choice input { margin: 0; }

  
  .logout-form { display: inline; margin: 0; align-self: center; }
  .logout-btn { background: none; border: none; color: var(--brand-ink-2);
                font: inherit;
                font-size: 0.85rem; font-weight: 600; cursor: pointer;
                padding: 0.2rem 0.3rem; border-radius: var(--rc); }
  .logout-btn:hover { color: var(--brand-ink); background: var(--brand-fill); }

  
  .fascia-tools { display: inline-flex; align-items: center; gap: 0.5rem; }

  
  .auto-toggle { display: block; margin: 0.2rem 0 0.1rem; }
  .auto-toggle .seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  
  .sq { -webkit-appearance: none; appearance: none; position: relative;
        font: inherit; cursor: pointer; color: var(--ink);
        border: 2px solid var(--control-line); border-radius: 8px;
        background: var(--surface); padding: 10px 6px; min-height: 92px;
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 6px; text-align: center; line-height: 1.1;
        transition: border-color .12s ease, background .12s ease; }
  .sq .t { font-size: 0.95rem; font-weight: 700; }
  .sq:hover { background: var(--sunk); }
  .sq[aria-pressed="true"], .sq[aria-pressed="true"]:hover {
        cursor: default; border-color: var(--go); background: var(--go-soft); }
  .sq.stop[aria-pressed="true"], .sq.stop[aria-pressed="true"]:hover {
        border-color: var(--stop); background: var(--stop-soft); }
  .sq-ic { width: 32px; height: 32px; background: currentColor;
           -webkit-mask: var(--sq-icon) center / contain no-repeat;
           mask: var(--sq-icon) center / contain no-repeat; }
  .sq-bd { display: none; position: absolute; top: 6px; right: 6px;
           width: 22px; height: 22px; border-radius: 50%;
           background: var(--go); color: var(--go-ink);
           --sq-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
  .sq-bd::after { content: ""; position: absolute; inset: 0; background: currentColor;
           -webkit-mask: var(--sq-tick) center / 14px no-repeat;
           mask: var(--sq-tick) center / 14px no-repeat; }
  .sq[aria-pressed="true"] .sq-bd { display: block; }
  .sq.stop[aria-pressed="true"] .sq-bd { background: var(--stop); color: var(--stop-ink); }
  .sq-ic-pen { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E"); }
  .sq-ic-zap { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
  .sq-ic-stop { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E"); }
  
  .sq-grid { display: grid; gap: 12px; }
  .sq-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  
  .sq.lg { min-height: 116px; padding: 14px 8px 12px; gap: 8px; margin: 0; }
  .sq.lg .t { font-size: 1.05rem; }
  .sq.lg .sq-ic { width: 48px; height: 48px; }
  .sq input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .sq:has(> input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .sq:has(> input:checked), .sq:has(> input:checked):hover {
        border-color: var(--go); background: var(--go-soft); }
  .sq:has(> input:checked) .sq-bd { display: block; }
  .sq-ic-gulv { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M12 3v18M3 12h18M3 6.5h9M3 9.5h9M15.5 3v9M18.5 3v9M6.5 12v9M9.5 12v9M12 15.5h9M12 18.5h9'/%3E%3C/svg%3E"); }
  .sq-ic-fliser { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l5 5-5 5-5-5zM6 8l5 5-5 5-5-5zM18 8l5 5-5 5-5-5zM12 14l5 5-5 5-5-5z'/%3E%3C/svg%3E"); }
  .sq-ic-bil { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16v-2.6a1 1 0 0 1 .6-.9L8 11l3.4-3.4A2 2 0 0 1 12.8 7h3.1a2 2 0 0 1 1.6.8L20 11l1.4.5a1 1 0 0 1 .6.9V16'/%3E%3Cpath d='M2 16h3M9 16h6M19 16h3M8 11h8'/%3E%3Ccircle cx='7' cy='16.5' r='2'/%3E%3Ccircle cx='17' cy='16.5' r='2'/%3E%3C/svg%3E"); }
  .sq-ic-andet { --sq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='12' rx='2'/%3E%3Cpath d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M2 13h20M10 13v2M14 13v2'/%3E%3C/svg%3E"); }
  
  .sq-hints > * { display: none; }
  .sq-hints .hint { min-height: 2.8em; color: var(--ink-2); font-size: 0.95rem;
                    line-height: 1.4; margin: 10px 0 4px; }
  .sq-hints .hint p { margin: 0 0 0.3rem; }
  .trade-choice:not(:has(input[name="trade"]:checked)) [data-hint="none"],
  .trade-choice:has(#fag-gulv:checked) [data-hint="gulv"],
  .trade-choice:has(#fag-fliser:checked) [data-hint="fliser"],
  .trade-choice:has(#fag-bilpleje:checked) [data-hint="bilpleje"],
  .trade-choice:has(#fag-andet:checked) [data-hint="andet"] { display: block; }
  
  .trade-choice:not(:has(input[name="trade"]:checked)) .pop-go { opacity: 0.45; }
  .pop-go { display: block; width: 100%; margin-top: 0.6rem; }
  .pop-kicker { margin: 0; }

  
  dialog.pop { border: 1px solid var(--line); border-radius: 12px;
               padding: 18px 16px 16px; width: calc(100% - 32px); max-width: 440px;
               max-height: calc(100% - 32px); box-sizing: border-box; overflow: auto;
               background: var(--surface); color: var(--ink);
               box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
  dialog.pop::backdrop { background: rgba(28, 27, 25, 0.38); }
  
  dialog.pop:not([open]) { display: none; }
  
  dialog.pop h2 { margin: 0 0 0.5rem; font-size: 1.45rem; line-height: 1.25; }
  dialog.pop h2[tabindex="-1"]:focus { outline: none; }
  dialog.pop p { margin: 0 0 0.6rem; }
  
  .pop-dim { position: fixed; inset: 0; background: rgba(28, 27, 25, 0.38); z-index: 19; }
  dialog.pop[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 20; }
  @media (prefers-reduced-motion: no-preference) {
    dialog.pop[open] { animation: pop-in 0.2s ease-out both; }
    @keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
  }
  
  .pop-step { text-align: center; }
  .step-marks { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; }
  .step-marks i { display: block; position: relative; width: 26px; height: 26px;
                  border: 2px solid var(--control-line); border-radius: 50%; }
  .step-marks i.done { border-color: var(--go); }
  .step-marks i.done::after { content: ""; position: absolute; inset: 0; background: var(--go);
                  --step-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
                  -webkit-mask: var(--step-tick) center / 14px no-repeat;
                  mask: var(--step-tick) center / 14px no-repeat; }
  .pop-gfx { display: block; width: 48px; height: 48px; margin: 0 auto 10px; color: var(--ink); }
  .pop-step .pop-kicker { margin: 0 0 0.2rem; }
  .pop-step .pop-go { margin-top: 0.4rem; }
  .pop-later { margin: 0.4rem 0 0; text-align: center; }
  .pop-later .link { display: inline-block; min-height: 44px; padding: 10px 16px; box-sizing: border-box; }
  
  .pop-later button.link { background: none; color: inherit; font-size: inherit; font-weight: 600;
        text-decoration: underline; text-decoration-color: currentColor;
        text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
        text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .pop-later button.link:hover { color: var(--go); text-decoration-color: currentColor; }
  
  .big-tick { display: none; position: fixed; inset: 0; z-index: 21; pointer-events: none;
              flex-direction: column; align-items: center; justify-content: center; gap: 14px;
              color: var(--go); font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
  .big-tick svg { width: 120px; height: 120px; fill: none; stroke: currentColor;
                  stroke-linecap: round; stroke-linejoin: round; }
  .big-tick circle { stroke-width: 5; stroke-dasharray: 283; stroke-dashoffset: 283; }
  .big-tick path { stroke-width: 6; stroke-dasharray: 60; stroke-dashoffset: 60; }
  @media (prefers-reduced-motion: no-preference) {
    .big-tick { display: flex; animation: big-tick-out 0.1s ease-in 1.9s forwards; }
    .big-tick svg { animation: big-tick-grow 0.2s ease-out both; }
    .big-tick circle { animation: big-tick-draw 0.2s ease-out forwards; }
    .big-tick path { animation: big-tick-draw 0.2s ease-out 0.18s forwards; }
    @keyframes big-tick-draw { to { stroke-dashoffset: 0; } }
    @keyframes big-tick-grow { from { transform: scale(0.85); } to { transform: none; } }
    @keyframes big-tick-out { to { opacity: 0; visibility: hidden; } }
    
    dialog.pop.after-tick[open] { animation-name: pop-in-held; animation-delay: 1.92s; }
    @keyframes pop-in-held { from { opacity: 0; transform: scale(0.96); visibility: hidden; }
                             to { opacity: 1; transform: none; } }
  }

  

  
  @media (max-width: 640px) {
    main { margin-top: 1rem; }
    button, .btn { padding: 0.78rem 1rem; font-size: 0.98rem; }
    .preset-row { align-items: stretch; flex-wrap: wrap; }
    
    .bench-types button { flex: 1 1 8.5rem; min-height: var(--tap); }
    
    .actions { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .actions form { display: flex; }
    .actions form button { width: 100%; }
    .actions > button, .actions > .btn { width: 100%; text-align: center; }
    
    textarea, select, input[type="text"], input[type="url"], input[type="time"],
    input[type="number"], input[type="password"], input[type="email"] {
      font-size: 16px;
    }
    
    a.back { padding: 0.55rem 0.3rem; min-height: var(--tap); display: inline-flex;
             align-items: center; }
    
    .logout-btn { padding: 0.45rem 0.6rem; font-size: var(--t-xs); }
    
    .logout-btn { min-height: 40px; display: inline-flex;
      align-items: center; justify-content: center; }
    
    header a.nameplate { min-height: 40px; position: relative; }
    
    header a.nameplate::after { content: ""; position: absolute; inset: -2px 0; }
    
    header a.nameplate { font-size: 1.22rem; }
    
    .area-remove { min-height: var(--tap); min-width: var(--tap); }
    
    .range a { min-height: var(--tap); display: inline-flex; align-items: center;
               padding: 0.5rem 0.85rem; }
    
    
    header { position: static; padding: calc(0.625rem + env(safe-area-inset-top, 0px)) 0 0; }
    
    html:has(header nav) { --nav-field: max(56px, calc(25px + 1.5rem));
      --bottom-nav: calc(var(--nav-field) + 1px + env(safe-area-inset-bottom, 0px));
      scroll-padding-bottom: calc(var(--bottom-nav) + 1rem); }
    html:has(header nav) body { padding-bottom: var(--bottom-nav); }
    header:has(nav) { padding-bottom: 0.625rem; }
    
    header nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
      width: 100%; max-width: none; margin: 0;
      background: var(--surface); border-top: 1px solid var(--line);
      border-bottom: env(safe-area-inset-bottom, 0px) solid var(--bg); }
    
    header nav a { min-height: var(--nav-field); display: flex; flex-direction: column;
                   align-items: center; justify-content: center; gap: 3px;
                   padding: 0.3rem 0.1rem; white-space: nowrap;
                   color: var(--ink-2); font-size: 0.75rem; line-height: 1.2; }
    
    header nav a:hover { color: var(--ink); background: none; }
    header nav a.active, header nav a + a.active { color: var(--ink);
      font-weight: 700; background: none; box-shadow: none; }
    header nav a + a { box-shadow: none; }
    
    header nav a:focus-visible { outline-color: var(--ink); }
    
    header nav a::before { content: ""; flex: none; width: 22px; height: 22px;
      background: currentColor;
      -webkit-mask: var(--nav-icon) center / contain no-repeat;
      mask: var(--nav-icon) center / contain no-repeat; }
    header nav a[href="/drafts"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
    header nav a[href="/conversations"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
    header nav a[href="/stats"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
    header nav a[href="/settings"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
    
    .actions .confirm, .confirm > summary, .confirm-body button { width: 100%; }
    .confirm > summary { text-align: center; padding: 0.78rem 1rem;
             font-size: 0.98rem; min-height: var(--tap); }
    
    .opt { min-height: var(--tap); padding: 0.65rem 0; margin-top: 0; }
    
    .area-pick { min-height: var(--tap); padding: 0.65rem 0; }
    
    .day-choice { min-height: var(--tap); }
    
    .preset-details summary { min-height: var(--tap); padding: 0.6rem 0; }
    .msg-fold summary { min-height: var(--tap); display: flex; align-items: center; margin: 0; }
    
    .mail-fold summary { padding: 0.8rem 0; margin: 0; }
    
    p.meta a.link { position: relative; white-space: nowrap; }
    p.meta a.link::after { content: ""; position: absolute; left: -4px; right: -4px;
                    top: calc(50% - var(--tap) / 2); height: var(--tap); }
    
    .stack td a { display: flex; align-items: center;
                  min-height: var(--tap); padding: 0.35rem 0; }
    
    .flash .link { min-height: var(--tap); display: flex; width: fit-content;
                   align-items: center; }
    
    
    .stack, .stack tbody, .stack tr, .stack td { display: block; width: 100%; }
    .stack { border: none; background: none;
             border-radius: 0; overflow: visible; }
    .stack tr:has(th) { display: none; }
    .stack tr { background: var(--surface); border: 1px solid var(--line);
                border-radius: var(--r);
                padding: 0.5rem 0.2rem; margin-bottom: 0.7rem; }
    .stack tr:hover td { background: transparent; }
    .stack td { border-top: none; padding: 0.3rem 0.85rem;
                display: flex; justify-content: space-between; gap: 1rem;
                align-items: baseline; font-size: 0.92rem;
                
                min-width: 0; overflow-wrap: anywhere; }
    .stack td:empty { display: none; }
    
    .stack td::before { content: attr(data-label); flex: none;
                font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
    
    .stack td[data-label="Emne"]::before,
    .stack td[data-label="Kunde"]::before,
    .stack td[data-label="Senest"]::before { display: none; }
    
    .stack tr { display: flex; flex-wrap: wrap; align-items: baseline;
                column-gap: 0.85rem; row-gap: 0.15rem; }
    .stack td { width: auto; flex: 0 1 auto; padding: 0.15rem 0.85rem;
                justify-content: flex-start; gap: 0.45rem; }
    
    .stack td[data-label="Emne"] { flex: 1 0 100%; display: block;
                font-weight: 700; font-size: 0.97rem; line-height: 1.3;
                padding-bottom: 0; }
  }

  
  @media (any-pointer: coarse) {
    .actions { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .actions form { display: flex; }
    .actions form button { width: 100%; }
    .actions > button, .actions > .btn { width: 100%; text-align: center; }
    
    .actions > button, .actions > .btn, .actions form button { min-height: var(--tap); }
    .actions .confirm, .confirm > summary, .confirm-body button { width: 100%; }
    .confirm > summary { text-align: center; padding: 0.78rem 1rem;
             font-size: 0.98rem; min-height: var(--tap); }
    a.back { padding: 0.55rem 0.3rem; min-height: var(--tap); display: inline-flex;
             align-items: center; }
    .opt { min-height: var(--tap); padding: 0.65rem 0; margin-top: 0; }
    .area-pick { min-height: var(--tap); padding: 0.65rem 0; }
    .day-choice { min-height: var(--tap); }
    .range a { min-height: var(--tap); display: inline-flex; align-items: center;
               padding: 0.5rem 0.85rem; }
    
    .stack td a { display: flex; align-items: center;
                  min-height: var(--tap); padding: 0.35rem 0; }
  }