/* The running app's own style (from the approved mock, mock/running.template.html): served as /_forge/app.css — the
 * page's policy runs no style it did not ship. Fonts: IBM Plex Sans Arabic and IBM Plex Mono, served with it. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#090F15}
html[data-theme=light],html[data-theme=light] body{background:#F6F7F9}
body{font-family:'IBM Plex Sans Arabic', system-ui, sans-serif; font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
.num{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
  /* ── the app: its own tokens, dark and light ── */
  .app{
    container-type:inline-size; container-name:app;
    --ink:#090F15; --panel:#0F1720; --panel-2:#142030; --raise:#182637; --line:#1E2C38; --line-2:#2A3C4C;
    --text:#E7EEF5; --muted:#9AAFC2; --dim:#7D92A5;
    --accent:#FDBA74; --forge:#EA580C; --on-forge:#1A0901; --forge-soft:rgba(234,88,12,.14);
    --ok:#4ADE80; --ok-soft:rgba(74,222,128,.12); --bad:#F87171; --bad-soft:rgba(248,113,113,.12);
    --wait:#FBBF24; --wait-soft:rgba(251,191,36,.12); --info:#7DB5EA; --none-soft:rgba(154,175,194,.12);
    --focus:#FDBA74; --shadow:0 18px 50px -24px rgba(0,0,0,.75);
    --grid:rgba(255,255,255,.022);
    background:var(--ink); color:var(--text); min-height:100vh; min-height:100dvh; position:relative;
    font-size:14.5px; line-height:1.7;
  }
  .app[data-theme=light]{
    --ink:#F3F1ED; --panel:#FFFFFF; --panel-2:#F7F5F1; --raise:#FFFFFF; --line:#E3DED5; --line-2:#CFC8BC;
    --text:#14202B; --muted:#4A5B6B; --dim:#5E6E7D;
    --accent:#9A3412; --forge:#C2410C; --on-forge:#FFFFFF; --forge-soft:rgba(194,65,12,.09);
    --ok:#166534; --ok-soft:rgba(22,101,52,.09); --bad:#B91C1C; --bad-soft:rgba(185,28,28,.08);
    --wait:#92400E; --wait-soft:rgba(180,83,9,.10); --info:#1D4ED8; --none-soft:rgba(74,91,107,.08);
    --focus:#C2410C; --shadow:0 18px 50px -28px rgba(20,32,43,.35);
    --grid:rgba(20,32,43,.035);
  }
  .app *:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px}
  .app a{color:inherit}
  .app .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

  /* buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:13.5px; font-weight:600; line-height:1.4; border-radius:9px; padding:8px 14px; cursor:pointer;
    border:1px solid var(--line-2); background:var(--panel-2); color:var(--text); text-decoration:none; white-space:nowrap}
  .btn:hover{border-color:var(--dim)}
  .btn.primary{background:var(--forge); border-color:var(--forge); color:var(--on-forge)}
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.quiet{background:transparent; border-color:transparent; color:var(--muted); font-weight:500}
  .btn.quiet:hover{color:var(--text); background:var(--panel-2)}
  .btn.danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--line-2))}
  .btn[disabled]{opacity:.5; cursor:not-allowed; filter:none}
  .btn.sm{font-size:12.5px; padding:5px 10px; border-radius:8px}
  .btn svg{width:15px; height:15px; flex:none}

  /* pills */
  .pill{display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-size:12px; font-weight:500; border-radius:999px; padding:2px 10px; white-space:nowrap; border:1px solid transparent; line-height:1.6}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
  .pill.t-new{color:var(--muted); background:var(--none-soft)}
  .pill.t-wait{color:var(--wait); background:var(--wait-soft)}
  .pill.t-ok{color:var(--ok); background:var(--ok-soft)}
  .pill.t-bad{color:var(--bad); background:var(--bad-soft)}
  .pill.t-end{color:var(--dim); background:transparent; border-color:var(--line-2)}
  .pill.flag{color:var(--bad); background:var(--bad-soft)}
  .pill.flag::before{display:none}
  .pill.plain::before{display:none}

  /* sign-in: the system screens (terminal) */
  .gate{min-height:640px; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:center; padding:36px 16px;
    background:
      linear-gradient(transparent 27px, var(--grid) 28px) 0 0/100% 28px,
      linear-gradient(90deg, transparent 27px, var(--grid) 28px) 0 0/28px 100%, var(--ink)}
  .term{width:100%; max-width:440px; background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
  .term-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel-2)}
  .term-top .host{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--dim); direction:ltr; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .term-top .lamp{display:flex; gap:5px; flex:none}
  .term-top .lamp i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block}
  .term-top .lamp i:first-child{background:var(--forge)}
  .term-body{padding:22px 24px 24px}
  .prompt{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--dim); margin:0 0 4px; direction:ltr; text-align:right}
  .prompt b{color:var(--accent); font-weight:500}
  .term h2{margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:-.2px}
  .term .lead{margin:0 0 18px; color:var(--muted); font-size:13.5px}
  .step-tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent); background:var(--forge-soft); border-radius:6px; padding:1px 7px; margin-inline-end:6px}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
  .field > label, .field > .lbl{font-size:13px; font-weight:600; color:var(--text)}
  .field .req{color:var(--forge); margin-inline-start:3px}
  .field .help{font-size:12px; color:var(--dim)}
  .field .err{font-size:12.5px; color:var(--bad)}
  .inp{width:100%; font-size:14.5px; color:var(--text); background:var(--ink); border:1px solid var(--line-2); border-radius:9px; padding:9px 12px; line-height:1.5}
  .inp:hover{border-color:var(--dim)}
  .inp:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:transparent}
  .inp.bad{border-color:var(--bad)}
  .inp[dir=ltr]{text-align:left}
  textarea.inp{min-height:92px; resize:vertical}
  .money{position:relative}
  .money .inp{padding-left:46px; text-align:right}
  .money .cur{position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:12.5px; color:var(--dim)}
  .code{display:flex; gap:7px; direction:ltr; justify-content:center; margin:6px 0 4px}
  .code input{flex:1 1 0; min-width:0; max-width:40px; height:48px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; color:var(--text);
    background:var(--ink); border:1px solid var(--line-2); border-radius:9px}
  .code input:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:transparent}
  .code .gap{width:6px; flex:none}
  .code.bad input{border-color:var(--bad)}
  .term .row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--dim)}
  .linkish{background:none; border:0; padding:0; color:var(--accent); font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
  .linkish[disabled]{color:var(--dim); text-decoration:none; cursor:default}
  .notice{display:flex; gap:9px; align-items:flex-start; font-size:13px; border-radius:10px; padding:10px 12px; margin-bottom:14px; border:1px solid}
  .notice svg{width:16px; height:16px; flex:none; margin-top:3px}
  .notice.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent); background:var(--bad-soft)}
  .notice.wait{color:var(--wait); border-color:color-mix(in srgb, var(--wait) 35%, transparent); background:var(--wait-soft)}
  .notice.info{color:var(--muted); border-color:var(--line-2); background:var(--panel-2)}
  .notice.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent); background:var(--ok-soft)}
  .notice b{color:var(--text); font-weight:600}
  .gate-foot{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; font-size:11.5px; color:var(--dim)}
  .gate-foot svg{width:14px; height:14px}
  .cursor{display:inline-block; width:7px; height:13px; background:var(--accent); vertical-align:-2px; margin-inline-start:3px; animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.cursor{animation:none}}

  /* the shell */
  .shell{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:640px}
  .side{background:var(--panel); border-inline-end:1px solid var(--line); display:flex; flex-direction:column; min-width:0}
  .side-head{display:flex; align-items:center; gap:10px; padding:16px 16px 14px; border-bottom:1px solid var(--line)}
  .app-badge{width:34px; height:34px; border-radius:9px; background:var(--forge-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:15px; flex:none; border:1px solid color-mix(in srgb, var(--forge) 30%, transparent)}
  .side-head b{display:block; font-size:14.5px; line-height:1.35}
  .side-head small{display:block; font-size:11.5px; color:var(--dim)}
  .nav{display:flex; flex-direction:column; gap:2px; padding:12px 10px; flex:1}
  .nav .grp{font-size:11px; color:var(--dim); padding:10px 8px 4px; letter-spacing:.2px}
  .nav a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500; cursor:pointer}
  .nav a svg{width:16px; height:16px; flex:none; opacity:.85}
  .nav a:hover{background:var(--panel-2); color:var(--text)}
  .nav a[aria-current=page]{background:var(--panel-2); color:var(--text); box-shadow:inset -2px 0 0 var(--forge)}
  .nav a .count{margin-inline-start:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; background:var(--forge); color:var(--on-forge); border-radius:999px; min-width:20px; padding:0 6px; text-align:center}
  .nav a.new{color:var(--accent)}
  .me{border-top:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:8px}
  .me-row{display:flex; align-items:center; gap:10px; min-width:0}
  .avatar{width:32px; height:32px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line-2); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none; color:var(--text)}
  .me-row b{display:block; font-size:13.5px; line-height:1.3}
  .me-row small{display:block; font-size:11.5px; color:var(--dim); line-height:1.4}
  .me-tools{display:flex; gap:6px; flex-wrap:wrap}
  .made{font-size:10.5px; color:var(--dim); display:flex; align-items:center; gap:6px; padding:0 14px 12px}
  .made svg{width:12px; height:12px}

  .main{min-width:0; display:flex; flex-direction:column}
  .strip{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:7px 18px; border-bottom:1px solid var(--line)}
  .strip svg{width:15px; height:15px; flex:none}
  .strip.preview{color:var(--wait); background:repeating-linear-gradient(-45deg, var(--wait-soft) 0 10px, transparent 10px 20px)}
  .strip.updating{color:var(--info); background:color-mix(in srgb, var(--info) 9%, transparent)}
  .strip.frozen{color:var(--bad); background:var(--bad-soft)}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px; border-bottom:1px solid var(--line); min-height:58px}
  .crumbs{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--dim); min-width:0}
  .crumbs a{color:var(--muted); text-decoration:none; cursor:pointer}
  .crumbs a:hover{color:var(--text)}
  .crumbs b{color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .top-tools{display:flex; align-items:center; gap:6px; flex:none}
  .bell{position:relative; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer}
  .bell svg{width:17px; height:17px}
  .bell .dot{position:absolute; top:5px; inset-inline-start:5px; min-width:16px; height:16px; border-radius:999px; background:var(--forge); color:var(--on-forge); font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; font-family:'IBM Plex Mono',monospace}
  .menu-btn{display:none}
  .content{padding:20px 22px 40px; min-width:0}
  .h-row{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px}
  .h-row h2{margin:0; font-size:21px; font-weight:700; letter-spacing:-.2px; display:flex; align-items:baseline; gap:10px}
  .h-row h2 .num{font-size:13px; color:var(--dim); font-weight:500}
  .h-row p{margin:2px 0 0; color:var(--dim); font-size:12.5px}
  .h-tools{display:flex; gap:8px; flex-wrap:wrap}

  /* list */
  .filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
  .search{position:relative; flex:1 1 260px; max-width:380px}
  .search svg{position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--dim)}
  .search .inp{padding-inline-start:34px; font-size:13.5px; padding-block:7px}
  .search kbd{position:absolute; inset-inline-end:9px; top:50%; transform:translateY(-50%); font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--dim); border:1px solid var(--line-2); border-radius:5px; padding:0 5px}
  .chips{display:flex; gap:6px; flex-wrap:wrap}
  .chip{font-size:12.5px; border:1px solid var(--line-2); background:transparent; color:var(--muted); border-radius:999px; padding:3px 11px; cursor:pointer}
  .chip:hover{color:var(--text)}
  .chip[aria-pressed=true]{background:var(--text); color:var(--ink); border-color:var(--text)}
  .table-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
  table.grid{width:100%; border-collapse:collapse; font-size:13.5px}
  table.grid th{font-size:12px; font-weight:600; color:var(--dim); text-align:start; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel-2); white-space:nowrap}
  table.grid th button{all:unset; cursor:pointer; display:inline-flex; gap:4px; align-items:center}
  table.grid th button:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
  table.grid th .arrow{font-size:10px; color:var(--accent)}
  table.grid td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
  table.grid tr:last-child td{border-bottom:0}
  table.grid tbody tr{cursor:pointer}
  table.grid tbody tr:hover td{background:var(--panel-2)}
  table.grid td.idc a{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; text-decoration:none; color:var(--text)}
  table.grid td.idc small{display:block; color:var(--dim); font-size:12px; font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:400; max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  td .stack{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
  .cards{display:none}
  .pager{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:12.5px; color:var(--dim); flex-wrap:wrap}
  .pager .btns{display:flex; gap:6px}
  .empty{border:1px dashed var(--line-2); border-radius:12px; padding:34px 20px; text-align:center; color:var(--muted)}
  .empty .prompt{text-align:center; direction:ltr; margin-bottom:8px}
  .empty b{display:block; color:var(--text); font-size:15px; margin-bottom:4px}

  /* board */
  .board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(196px,1fr); gap:10px; overflow-x:auto; padding-bottom:8px}
  .col{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:220px}
  .col h3{margin:0 0 10px; font-size:12.5px; font-weight:600; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:6px}
  .col h3 .num{font-size:11.5px; color:var(--dim)}
  .card-it{display:block; width:100%; text-align:start; background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; margin-bottom:7px; cursor:pointer; color:var(--text); font-size:13px}
  .card-it:hover{border-color:var(--dim)}
  .card-it .t{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; display:flex; justify-content:space-between; gap:6px; align-items:center}
  .card-it .s{color:var(--muted); font-size:12.5px; margin-top:3px}

  /* record */
  .rec{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start}
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:0}
  .panel > header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
  .panel > header h3{margin:0; font-size:13.5px; font-weight:600}
  .panel > header small{color:var(--dim); font-size:12px}
  .panel .pad{padding:14px 16px}
  .rec-title{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px}
  .rec-title h2{margin:0; font-size:22px; font-weight:700}
  .rec-title h2.code{font-family:'IBM Plex Mono',monospace; letter-spacing:-.3px}
  .rec-sub{color:var(--muted); font-size:14px; margin:0 0 16px; max-width:70ch}
  dl.kv{display:grid; grid-template-columns:150px minmax(0,1fr); margin:0; font-size:13.5px}
  dl.kv dt{color:var(--dim); padding:9px 0; border-bottom:1px solid var(--line)}
  dl.kv dd{margin:0; padding:9px 0; border-bottom:1px solid var(--line); min-width:0; overflow-wrap:anywhere}
  dl.kv > :nth-last-child(-n+2){border-bottom:0}
  .more{margin-top:4px}
  .more summary{cursor:pointer; font-size:12.5px; color:var(--muted); padding:10px 16px; list-style:none; display:flex; align-items:center; gap:6px; border-top:1px solid var(--line)}
  .more summary::-webkit-details-marker{display:none}
  .more summary::before{content:'+'; font-family:'IBM Plex Mono',monospace; color:var(--accent); width:12px}
  .more[open] summary::before{content:'−'}
  .file{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-2); background:var(--panel-2); border-radius:10px; padding:7px 10px 7px 8px; max-width:100%}
  .file .ic{width:30px; height:34px; border-radius:6px; background:var(--forge-soft); color:var(--accent); display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; flex:none}
  .file .nm{min-width:0}
  .file .nm b{display:block; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .file .nm small{display:block; font-size:11.5px; color:var(--dim)}
  .muted{color:var(--dim)}
  .actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .why{font-size:12px; color:var(--dim); margin-top:10px; display:flex; flex-direction:column; gap:3px}
  .why span::before{content:'— '; color:var(--line-2)}
  .appr{display:flex; flex-direction:column; gap:10px}
  .appr-step{display:flex; gap:10px; align-items:flex-start}
  .appr-step .ring{width:26px; height:26px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:11px; flex:none; color:var(--muted)}
  .appr-step.now .ring{border-color:var(--wait); color:var(--wait)}
  .appr-step.done .ring{border-color:var(--ok); color:var(--ok)}
  .appr-step b{display:block; font-size:13px}
  .appr-step small{display:block; font-size:12px; color:var(--dim)}
  .sla{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); background:var(--panel-2); border-radius:9px; padding:9px 11px}
  .sla.late{color:var(--bad); background:var(--bad-soft)}
  .sla svg{width:16px; height:16px; flex:none}
  .meter{height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:6px}
  .meter i{display:block; height:100%; background:var(--wait); border-radius:99px}
  .sla.late .meter i{background:var(--bad)}
  .tl{list-style:none; margin:0; padding:0; position:relative}
  .tl::before{content:''; position:absolute; inset-block:6px; inset-inline-start:5px; width:1px; background:var(--line-2)}
  .tl li{position:relative; padding-inline-start:22px; padding-bottom:13px; font-size:13px}
  .tl li::before{content:''; position:absolute; inset-inline-start:1px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--panel); border:2px solid var(--dim)}
  .tl li.sys::before{border-color:var(--bad)}
  .tl li.ok::before{border-color:var(--ok)}
  .tl li small{display:block; color:var(--dim); font-size:11.5px}
  .tl li .who{color:var(--muted)}
  .side-col{display:flex; flex-direction:column; gap:16px; min-width:0}
  .rec-main{display:flex; flex-direction:column; gap:16px; min-width:0}
  .rec-head{grid-column:1/-1; margin-bottom:0}

  /* form */
  .form{max-width:720px}
  .form .panel .pad{padding:18px 20px}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
  .drop{border:1.5px dashed var(--line-2); border-radius:10px; padding:16px; text-align:center; color:var(--muted); font-size:13px; background:var(--panel-2)}
  .drop b{color:var(--accent); font-weight:600}
  .drop small{display:block; color:var(--dim); font-size:12px; margin-top:2px}
  .drop.over{border-color:var(--accent); background:var(--forge-soft)}
  .file.sending small{color:var(--accent)}
  .file.sending .ic svg{width:15px; height:15px; animation:blink 1.1s infinite}
  .file .btn{margin-inline-start:4px}
  .form-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line)}
  .form-foot small{color:var(--dim); font-size:12px}
  .gen{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); border:1px dashed var(--line-2); border-radius:9px; padding:8px 12px}

  /* inbox */
  .inbox{list-style:none; margin:0; padding:0}
  .inbox li{display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer}
  .inbox li:last-child{border-bottom:0}
  .inbox li:hover{background:var(--panel-2)}
  .inbox .u{width:8px; height:8px; border-radius:50%; background:var(--forge); margin-top:8px; flex:none}
  .inbox .r{width:8px; height:8px; flex:none}
  .inbox b{display:block; font-size:13.5px}
  .inbox p{margin:1px 0 0; font-size:13px; color:var(--muted)}
  .inbox small{color:var(--dim); font-size:11.5px}

  /* sheet + toast */
  .veil{position:absolute; inset:0; background:rgba(4,8,12,.62); display:grid; place-items:center; padding:16px; z-index:20}
  .app[data-theme=light] .veil{background:rgba(20,32,43,.38)}
  /* a board's sheet asks over the builder's drawer (fixed, z 31): fixed above it, wherever the page is scrolled */
  .veil.d-over{position:fixed; z-index:40}
  .sheet{width:100%; max-width:460px; background:var(--raise); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow)}
  .sheet header{padding:16px 18px 6px}
  .sheet header h3{margin:0; font-size:16px}
  .sheet header p{margin:3px 0 0; color:var(--muted); font-size:13px}
  .sheet .pad{padding:10px 18px 4px}
  .sheet footer{display:flex; gap:8px; justify-content:flex-start; padding:12px 18px 16px}
  .toast{position:absolute; inset-inline-start:50%; transform:translateX(50%); bottom:18px; z-index:30; display:flex; align-items:center; gap:9px; background:var(--raise); border:1px solid var(--line-2); border-radius:11px; box-shadow:var(--shadow); padding:10px 14px; font-size:13px; max-width:min(560px, calc(100% - 28px))}
  .toast svg{width:16px; height:16px; flex:none}
  .toast.bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--line-2))}
  .toast.bad svg{color:var(--bad)}
  .toast.ok svg{color:var(--ok)}
  .toast.wait svg{color:var(--wait)}

  /* not found */
  .lost{max-width:520px}
  .lost .code-big{font-family:'IBM Plex Mono',monospace; font-size:44px; font-weight:600; color:var(--accent); letter-spacing:-1px; line-height:1}


  /* home: what waits on the member */
  .home{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px}
  .sec{background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:0}
  .sec > header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
  .sec > header h3{margin:0; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px}
  .sec > header h3 .num{font-size:11.5px; color:var(--on-forge); background:var(--forge); border-radius:999px; padding:0 7px}
  .sec > header small{font-size:12px; color:var(--dim)}
  .sec ul{list-style:none; margin:0; padding:0}
  .sec li{border-bottom:1px solid var(--line)}
  .sec li:last-child{border-bottom:0}
  .sec li button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; cursor:pointer}
  .sec li button:hover{background:var(--panel-2)}
  .sec li button:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  .sec li b{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600}
  .sec li .sub{display:block; color:var(--dim); font-size:12px; font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:400}
  .sec .more-link{display:block; padding:9px 16px; font-size:12.5px; color:var(--accent); border-top:1px solid var(--line); text-decoration:none; cursor:pointer}
  .greet{margin:0 0 4px; font-size:22px; font-weight:700}
  /* the path a record takes */
  .path{display:flex; align-items:center; gap:0; overflow-x:auto; padding:2px 0 4px; margin:0 0 16px}
  .path .st{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--dim); white-space:nowrap; flex:none}
  .path .st i{width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; font-style:normal; font-size:11px; flex:none}
  .path .st.done{color:var(--muted)} .path .st.done i{border-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
  .path .st.now{color:var(--text); font-weight:600} .path .st.now i{border-color:var(--forge); background:var(--forge-soft)}
  .path .st.off{color:var(--bad); font-weight:600} .path .st.off i{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
  .path .st.skip{color:var(--dim)} .path .st.skip i{border-style:dashed}
  .path .ln{width:28px; height:2px; background:var(--line-2); margin:0 6px; flex:none}
  .path .ln.done{background:var(--ok)}
  .rec-path{grid-column:1/-1; min-width:0}
  /* tabs between detail screens */
  .tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); padding:0 12px}
  .tabs button{all:unset; cursor:pointer; padding:11px 8px 9px; font-size:13px; font-weight:600; color:var(--dim); border-bottom:2px solid transparent; margin-bottom:-1px}
  .tabs button[aria-selected=true]{color:var(--text); border-bottom-color:var(--forge)}
  .tabs button:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  /* media */
  .thumb{width:92px; height:68px; border-radius:8px; object-fit:cover; border:1px solid var(--line-2); display:block; background:var(--panel-2)}
  .sig{width:180px; height:64px; border-radius:8px; border:1px solid var(--line-2); background:#fff; display:block; object-fit:contain}
  [data-range-image]{display:grid; place-items:center; text-align:center; color:var(--dim); font-size:10px; padding:4px}
  .media{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .geo-val{display:inline-flex; align-items:center; gap:8px}
  .sigpad{display:flex; flex-direction:column; gap:6px}
  .sigpad canvas{width:100%; max-width:420px; height:140px; background:#fff; border:1px solid var(--line-2); border-radius:10px; touch-action:none; cursor:crosshair}
  .geo-in{display:grid; grid-template-columns:1fr 1fr auto; gap:8px}
  .chk{display:flex; gap:8px; flex-wrap:wrap}
  .chk label{display:inline-flex; gap:6px; align-items:center; font-size:13px; border:1px solid var(--line-2); border-radius:999px; padding:4px 11px; cursor:pointer}
  .chk input{accent-color:var(--forge)}
  /* records under a record */
  .related .row-it{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px}
  .related .row-it:last-child{border-bottom:0}
  /* ── a linked record's row opens it (PLAN 4.3, from the approved mock work/forge-4.3-linked/mock.html): every rule `.l-…` ── */
  /* A <button>: the user agent's own colour (buttontext — dark on the dark theme), box and font are the row's instead. */
  .related .row-it.l-go{width:100%; box-sizing:border-box; margin:0; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; color:inherit; font:inherit; font-size:13px; text-align:start; cursor:pointer; transition:background-color .15s ease}
  .related .row-it.l-go:last-child{border-bottom:0}
  .related .row-it.l-go:hover{background:var(--panel-2)}
  .related .row-it.l-go:focus-visible{outline:2px solid var(--focus); outline-offset:-2px; border-radius:0}
  .related .row-it.l-go:hover .l-chev{color:var(--accent)}
  .related:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
  .l-main{min-width:0}
  .l-main b{font-weight:600}
  .l-end{display:inline-flex; align-items:center; gap:8px; min-width:0; justify-content:flex-end}
  .related .row-it .stack{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap}
  .l-chev{display:inline-flex; align-items:center; color:var(--dim); flex:none}
  .l-chev svg{width:15px; height:15px; transform:scaleX(-1)}
  /* The row just saved, marked for a moment on the parent it returned to; a still mark where motion is reduced. */
  .related .row-it.l-flash{animation:l-flash 2.6s ease-out 1 both}
  @keyframes l-flash{0%,35%{background:var(--forge-soft); box-shadow:inset -3px 0 0 var(--forge)} 100%{background:transparent; box-shadow:inset 0 0 0 transparent}}
  @media (prefers-reduced-motion: reduce){ .related .row-it.l-flash{animation:none; background:var(--forge-soft); box-shadow:inset -3px 0 0 var(--forge)} }
  /* The panel says what it shows: the first 100 of N, only the member's own, a list refused. */
  .l-more{padding:8px 16px; font-size:12px; color:var(--dim); text-align:center; letter-spacing:2px}
  .l-foot{display:flex; align-items:center; gap:7px; padding:9px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--dim)}
  .l-foot svg{width:13px; height:13px; flex:none}
  .l-honest{display:flex; align-items:flex-start; gap:9px; margin:0; padding:14px 16px; font-size:13px; color:var(--muted)}
  .l-honest svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--dim)}
  .l-honest b{display:block; color:var(--text); font-weight:600}
  /* On the child: why there is no «عدّل» while its parent freezes it; in its form, where it returns. */
  .l-why{display:flex; align-items:center; gap:7px; margin:8px 0 0; font-size:12.5px; color:var(--muted)}
  .l-why svg{width:14px; height:14px; flex:none; color:var(--dim)}
  .l-why a{color:var(--accent); text-decoration:none}
  .l-back{display:inline-flex; align-items:center; gap:6px}
  .l-back svg{width:13px; height:13px}
  /* dashboard */
  .dash{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px}
  .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px}
  .kpi{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
  .kpi small{display:block; color:var(--dim); font-size:12px}
  .kpi b{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600}
  .bars{display:flex; flex-direction:column; gap:10px}
  .bar{display:grid; grid-template-columns:minmax(64px,112px) minmax(0,1fr) 28px; gap:10px; align-items:center; font-size:13px}
  .bar .track{height:10px; border-radius:99px; background:var(--panel-2); overflow:hidden}
  .bar .track i{display:block; height:100%; border-radius:99px; background:var(--forge)}
  .bar .num{text-align:left; color:var(--muted)}
  /* card actions on a board */
  .card-acts{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px}
  .card-acts .btn{font-size:11.5px; padding:3px 8px; border-radius:7px}
  /* the welcome */
  .wiz{min-height:640px; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:start; padding:40px 16px;
    background:linear-gradient(transparent 27px, var(--grid) 28px) 0 0/100% 28px, linear-gradient(90deg, transparent 27px, var(--grid) 28px) 0 0/28px 100%, var(--ink)}
  .wiz-card{width:100%; max-width:620px; background:var(--panel); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
  .wiz-top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--panel-2)}
  .dots{display:flex; gap:6px} .dots i{width:22px; height:4px; border-radius:99px; background:var(--line-2); display:block} .dots i.on{background:var(--forge)}
  .wiz-body{padding:24px 26px 8px}
  .wiz-body h2{margin:0 0 6px; font-size:22px; font-weight:700}
  .wiz-body .lead{color:var(--muted); margin:0 0 18px; font-size:14px}
  .facts{display:flex; flex-direction:column; gap:12px; margin-bottom:10px}
  .fact{display:flex; gap:12px; align-items:flex-start}
  .fact .ic{width:34px; height:34px; border-radius:9px; background:var(--forge-soft); color:var(--accent); display:grid; place-items:center; flex:none}
  .fact .ic svg{width:17px; height:17px}
  .fact b{display:block; font-size:13.5px}
  .fact p{margin:2px 0 0; color:var(--muted); font-size:13px}
  .chips-ro{display:flex; gap:6px; flex-wrap:wrap; margin-top:5px}
  .chips-ro span{font-size:12px; border:1px solid var(--line-2); border-radius:999px; padding:1px 9px; color:var(--text)}
  .wiz-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 26px 20px; flex-wrap:wrap}
  .seg{display:inline-flex; border:1px solid var(--line-2); border-radius:10px; overflow:hidden}
  .seg button{all:unset; cursor:pointer; padding:7px 14px; font-size:13px; color:var(--muted)}
  .seg button[aria-pressed=true]{background:var(--text); color:var(--ink); font-weight:600}
  .seg button:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  /* ── narrow: the app in its own width ── */
  @container app (max-width: 1020px){
    .rec{grid-template-columns:minmax(0,1fr)}
    .side-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  }
  @container app (max-width: 860px){
    .shell{grid-template-columns:minmax(0,1fr)}
    .side{position:absolute; inset-block:0; inset-inline-start:0; width:min(280px, 86%); z-index:15; transform:translateX(105%); visibility:hidden; transition:transform .2s ease, visibility 0s .2s; box-shadow:var(--shadow)}
    .side.open{transform:none; visibility:visible; transition:transform .2s ease}
    .menu-btn{display:grid}
    .side-col{grid-template-columns:minmax(0,1fr)}
  }
  @container app (max-width: 640px){
    .topbar{padding:10px 14px}
    .content{padding:16px 14px 0}
    .h-row h2{font-size:19px}
    .table-wrap{display:none}
    .cards{display:flex; flex-direction:column; gap:8px}
    .rcard{display:block; width:100%; text-align:start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); cursor:pointer}
    .rcard .top{display:flex; justify-content:space-between; align-items:center; gap:8px}
    .rcard .top b{font-family:'IBM Plex Mono',monospace; font-size:13.5px}
    .rcard p{margin:5px 0 8px; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .rcard .meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--dim)}
    .rcard .meta .num{color:var(--text)}
    .search{max-width:none; flex-basis:100%}
    .search kbd{display:none}
    .chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; margin-inline:-14px; padding-inline:14px}
    .chip{flex:none}
    dl.kv{grid-template-columns:minmax(0,1fr)}
    dl.kv dt{padding:9px 0 0; border-bottom:0; font-size:12px}
    dl.kv dd{padding:1px 0 9px}
    /* A flex column now: stretched, or it keeps the grid's align-items:start and every panel shrinks to its content. */
    .rec{display:flex; flex-direction:column; gap:16px; align-items:stretch}
    .l-end{max-width:62%}
    .l-end .stack{justify-content:flex-end; row-gap:4px}
    .rec-main{display:contents}
    .rec-main > .panel{order:1}
    .rec > .side-col{order:2}
    .rec-main > .bar-actions{order:3}
    .grid2{grid-template-columns:minmax(0,1fr)}
    .bar-actions{position:sticky; bottom:0; z-index:5; margin:0 -14px; border-radius:0; border-inline:0; border-bottom:0; box-shadow:0 -14px 30px -18px rgba(0,0,0,.55)}
    .bar-actions > header{padding:10px 14px 8px; border-bottom:0}
    .bar-actions .pad{padding:0 14px 14px}
    .bar-actions .actions .btn{flex:1 1 auto}
    .crumbs .hide-n{display:none}
    .strip{padding:7px 14px; font-size:12px}
    .term-body{padding:20px 18px 22px}
    .code{gap:5px}
    .code input{height:44px; font-size:18px}
    .code .gap{width:3px}
    .h-tools .btn .lbl{display:none}
    .wiz{padding:18px 10px}
    .path{flex-wrap:wrap; row-gap:8px}
    .path .ln{width:12px; margin:0 4px}
    .wiz-body{padding:20px 18px 6px}
    .wiz-foot{padding:14px 18px 18px}
    .geo-in{grid-template-columns:1fr 1fr}
    .geo-in .btn{grid-column:1/-1}
    .bar{grid-template-columns:minmax(70px,100px) minmax(0,1fr) 30px}
  }
  @container app (min-width: 641px){ .bar-actions .why{max-width:60ch} }
  /* ── boards (PLAN 4.2, from the approved mock work/forge-4.2-reports/mock.html): every rule `.d-…`, on the app's own tokens ── */
  .c1{--c:var(--forge)} .c2{--c:var(--info)} .c3{--c:var(--ok)} .c4{--c:var(--wait)} .c5{--c:var(--accent)} .c6{--c:var(--dim)}
  .tone-ok{--c:var(--ok)} .tone-warn{--c:var(--wait)} .tone-bad{--c:var(--bad)}
  .d-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
  .d-head h2{margin:0; font-size:21px; font-weight:700; display:flex; align-items:center; gap:10px}
  .d-head h3{margin:0; font-size:16px; font-weight:700}
  .d-head p{margin:2px 0 0; color:var(--dim); font-size:12.5px}
  .d-sub{margin-top:18px}
  .d-tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .d-wait{margin-bottom:4px}
  .d-calm{margin-bottom:0}
  .d-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto}
  .d-tab{all:unset; cursor:pointer; padding:9px 14px; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; display:inline-flex; gap:7px; align-items:center}
  .d-tab:hover{color:var(--text)}
  .d-tab:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  .d-tab[aria-selected=true]{color:var(--text); border-color:var(--forge); font-weight:600}
  .d-tab .who{font-size:11px; color:var(--dim); border:1px solid var(--line-2); border-radius:999px; padding:0 7px}
  .d-tab.add{color:var(--accent)}
  .d-tab svg{width:15px; height:15px}
  .d-filters{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:14px}
  .d-filters .lbl{font-size:12px; color:var(--dim)}
  .d-filters select.inp{width:auto; padding:5px 10px; font-size:13px}
  .d-filters .sep{width:1px; height:22px; background:var(--line)}
  .d-filters .scope{margin-inline-start:auto; font-size:12px; color:var(--dim); display:inline-flex; gap:6px; align-items:center}
  .d-filters .scope svg{width:14px; height:14px}
  .d-insight{display:flex; gap:10px; align-items:flex-start; background:linear-gradient(90deg, var(--forge-soft), transparent 70%); border:1px solid color-mix(in srgb, var(--forge) 28%, var(--line)); border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:13.5px}
  .d-insight svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px}
  .d-insight b{color:var(--text)}
  .d-insight .num{font-weight:600}
  .d-small{font-size:12px; color:var(--dim)}
  .d-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:14px}
  .d-w{grid-column:span 4; background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:0; display:flex; flex-direction:column; position:relative}
  .d-w.s3{grid-column:span 3} .d-w.s4{grid-column:span 4} .d-w.s6{grid-column:span 6} .d-w.s8{grid-column:span 8} .d-w.s12{grid-column:span 12}
  .d-w > header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px 0}
  .d-w > header h3{margin:0; font-size:13px; font-weight:600; color:var(--muted)}
  .d-w > header .more{all:unset; cursor:pointer; color:var(--dim); width:26px; height:26px; display:grid; place-items:center; border-radius:7px}
  .d-w > header .more:hover{background:var(--panel-2); color:var(--text)}
  .d-w > header .more:focus-visible{outline:2px solid var(--focus)}
  .d-w > header .more svg{width:16px; height:16px}
  .d-w > header .d-th + .more{margin-inline-start:2px}
  .d-menu{position:absolute; top:38px; inset-inline-end:10px; z-index:6; background:var(--raise); border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; padding:4px; min-width:150px}
  .d-menu button{all:unset; cursor:pointer; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--text)}
  .d-menu button:hover, .d-menu button:focus-visible{background:var(--panel-2)}
  .d-w .body{padding:8px 14px 14px; flex:1; min-height:0; min-width:0}
  .d-w .foot{padding:0 14px 12px; font-size:11.5px; color:var(--dim)}
  .d-none{margin:6px 0; font-size:12.5px}
  .d-kpi b{display:block; font-size:27px; font-weight:600; line-height:1.25}
  .d-kpi b .num{font-family:'IBM Plex Mono',monospace}
  .d-kpi b small{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-size:13px; color:var(--dim); font-weight:500; margin-inline-start:4px}
  .d-delta{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; border-radius:999px; padding:1px 8px; margin-top:4px}
  .d-delta.up{color:var(--ok); background:var(--ok-soft)}
  .d-delta.down{color:var(--bad); background:var(--bad-soft)}
  .d-delta.none{color:var(--dim); padding-inline:0; font-weight:500}
  .d-delta .rest{font-weight:500; opacity:.85}
  .d-delta svg{width:12px; height:12px}
  .d-spark{display:block; width:100%; height:34px; margin-top:6px}
  .d-spark .ln{stroke:var(--forge)} .d-spark .pt{fill:var(--forge)}
  .d-chart{display:block; width:100%; height:auto; overflow:visible}
  .d-chart .ax{stroke:var(--line); stroke-width:1}
  .d-chart text{fill:var(--dim); font-size:11px; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
  .d-chart text.v{fill:var(--text); font-family:'IBM Plex Mono',monospace; font-size:10.5px}
  .d-chart rect.bar{fill:var(--c, var(--forge))}
  .d-chart .band{fill:var(--forge-soft)}
  .d-chart .ln{stroke:var(--forge)}
  .d-chart .dot{fill:var(--panel); stroke:var(--forge)}
  .d-chart .hit[data-drill]{cursor:pointer}
  .d-chart .hit:hover rect, .d-chart .hit:focus rect{filter:brightness(1.15)}
  .d-chart .hit:focus{outline:none}
  .d-chart .hit:focus rect.bar, .d-chart .hit:focus .dot{stroke:var(--focus); stroke-width:2}
  .d-legend{display:flex; flex-direction:column; gap:7px; font-size:12.5px; min-width:0}
  .d-legend span{display:flex; align-items:center; gap:8px; border-radius:6px; padding:1px 4px; margin:-1px -4px}
  .d-legend span[data-drill]{cursor:pointer}
  .d-legend span[data-drill]:hover{background:var(--panel-2)}
  .d-legend i{width:10px; height:10px; border-radius:3px; flex:none; background:var(--c)}
  .d-legend .num{margin-inline-start:auto; color:var(--muted)}
  .d-donut{display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:center}
  .d-donut .seg, .d-ring .seg{stroke:var(--c)}
  .d-donut .seg.base, .d-ring .seg.base{stroke:var(--panel-2)}
  .d-donut .seg[data-drill]{cursor:pointer}
  .d-donut .tot, .d-ring .tot{fill:var(--text); font:600 20px 'IBM Plex Mono',monospace}
  .d-donut .sub{fill:var(--dim); font-size:10px}
  .d-ring{display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center; --c:var(--ok)}
  .d-ring.tone-warn{--c:var(--wait)} .d-ring.tone-bad{--c:var(--bad)}
  .d-ring[data-drill]{cursor:pointer}
  .d-ring p{margin:0; font-size:12.5px; color:var(--muted)}
  .d-ring p b{font-family:'IBM Plex Mono',monospace; color:var(--text); font-weight:600}
  .d-kpi[data-drill]{cursor:pointer}
  .d-kpi[data-drill]:hover b .num{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-2)}
  .d-tbl{width:100%; border-collapse:collapse; font-size:13px}
  .d-tbl th{font-size:11.5px; color:var(--dim); font-weight:600; text-align:start; padding:6px 4px; border-bottom:1px solid var(--line)}
  .d-tbl td{padding:7px 4px; border-bottom:1px solid var(--line)}
  .d-tbl tr:last-child td{border-bottom:0}
  .d-tbl tbody tr{cursor:pointer}
  .d-tbl tbody tr:hover td{background:var(--panel-2)}
  .d-tbl .rank{font-family:'IBM Plex Mono',monospace; color:var(--dim); width:20px}
  .d-lock{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; color:var(--dim); font-size:12.5px; padding:20px 10px; border:1px dashed var(--line-2); border-radius:10px; flex:1; min-height:110px}
  .d-lock svg{width:20px; height:20px}
  .d-lock b{color:var(--muted)}
  .d-lock.ghost{border-style:dashed; min-height:120px}
  .d-w.th-ok{box-shadow:inset 0 3px 0 var(--ok)} .d-w.th-warn{box-shadow:inset 0 3px 0 var(--wait)} .d-w.th-bad{box-shadow:inset 0 3px 0 var(--bad)}
  .d-th{font-size:11px; font-weight:600; border-radius:999px; padding:0 8px; margin-inline-start:auto; white-space:nowrap}
  .d-th.ok{color:var(--ok); background:var(--ok-soft)} .d-th.warn{color:var(--wait); background:var(--wait-soft)} .d-th.bad{color:var(--bad); background:var(--bad-soft)}
  .d-rule{color:var(--dim)}
  .d-flow{display:flex; align-items:stretch; gap:8px}
  .d-flow .arr{align-self:center; color:var(--dim); font-size:16px}
  .d-flow .st{flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px 8px; background:var(--panel-2); cursor:pointer; position:relative; display:flex; flex-direction:column; gap:3px}
  .d-flow .st:hover{border-color:var(--line-2)}
  .d-flow .st small{font-size:12px; color:var(--muted)}
  .d-flow .st b{font-size:20px; font-weight:600}
  .d-flow .st b .num{font-size:22px}
  .d-flow .st i{display:block; height:6px; border-radius:99px; background:var(--forge); opacity:.55}
  .d-flow .st em{font-style:normal; font-size:11px; color:var(--ok)}
  .d-flow .st .n{font-size:11px; color:var(--dim)}
  .d-flow .st.slow{border-color:color-mix(in srgb, var(--bad) 55%, var(--line)); background:var(--bad-soft)}
  .d-flow .st.slow i{background:var(--bad); opacity:1}
  .d-flow .st.slow em{color:var(--bad); font-weight:700}
  .d-flow-say{margin:10px 0 0; font-size:13px; color:var(--muted)}
  .d-flow-say b{color:var(--text)}
  .d-zoombar{margin-bottom:10px}
  /* a number's records */
  .d-drill{border:1px solid color-mix(in srgb, var(--forge) 35%, var(--line)); border-radius:12px; background:var(--panel); margin-bottom:14px; overflow:hidden}
  .d-drill > header{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
  .d-drill > header h3{margin:0; font-size:14px}
  .d-drill > header p{margin:0; font-size:12px; color:var(--dim)}
  .d-drill .d-flat{border:0; border-radius:0}
  .d-drill .pager, .d-drill .d-none, .d-drill .cards{padding:0 16px 12px}
  /* edit mode */
  .d-editbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--wait-soft); border:1px solid color-mix(in srgb, var(--wait) 35%, transparent); color:var(--text); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:13px}
  .d-editbar > svg{width:17px; height:17px; flex:none}
  .d-editbar .grow{flex:1; min-width:180px}
  .d-editbar .inp{width:auto; padding:5px 10px; font-size:13px}
  .d-etitle{display:inline-flex}
  .d-grid.editing .d-w{outline:1.5px dashed color-mix(in srgb, var(--forge) 55%, var(--line-2)); outline-offset:-1px}
  .d-wtools{display:flex; gap:4px; padding:0 14px 12px; flex-wrap:wrap}
  .d-wtools button{all:unset; cursor:pointer; font-size:11.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:7px; padding:2px 8px}
  .d-wtools button:focus-visible{outline:2px solid var(--focus)}
  .d-wtools button[aria-pressed=true]{background:var(--text); color:var(--ink); border-color:var(--text)}
  .d-wtools button.x{color:var(--bad); margin-inline-start:auto}
  .d-add{grid-column:span 4; border:1.5px dashed color-mix(in srgb, var(--forge) 45%, var(--line-2)); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--accent); min-height:150px; cursor:pointer; background:transparent; font:inherit; font-size:13.5px; font-weight:600}
  .d-add svg{width:22px; height:22px}
  .d-add small{font-weight:500; color:var(--dim)}
  .d-add:hover{background:var(--forge-soft)}
  /* the builder */
  .d-veil{position:fixed; inset:0; background:rgba(4,8,12,.5); z-index:30}
  .d-drawer{position:fixed; inset-block:0; inset-inline-end:0; width:min(760px, 100%); background:var(--panel); border-inline-start:1px solid var(--line); z-index:31; display:flex; flex-direction:column; box-shadow:var(--shadow)}
  .d-drawer > header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line)}
  .d-drawer > header h3{margin:0; font-size:15px}
  .d-drawer .cols{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); flex:1; min-height:0}
  .d-drawer .cfg{padding:16px 18px; overflow:auto; border-inline-end:1px solid var(--line)}
  .d-drawer .prev{padding:16px 18px; background:var(--ink); overflow:auto}
  .d-drawer .prev .lbl{font-size:12px; color:var(--dim); margin-bottom:8px; display:block}
  .d-drawer .prev .notice{margin-top:12px}
  .d-drawer footer{display:flex; gap:8px; justify-content:flex-start; padding:12px 18px; border-top:1px solid var(--line)}
  .d-step{font-size:12px; font-weight:700; color:var(--accent); margin:16px 0 8px; display:flex; gap:8px; align-items:center}
  .d-step:first-child{margin-top:0}
  .d-step i{font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--forge-soft); display:grid; place-items:center; font-size:11px}
  .d-types{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
  .d-type{all:unset; cursor:pointer; border:1px solid var(--line-2); border-radius:10px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-align:center}
  .d-type svg{width:24px; height:24px}
  .d-type:hover{border-color:var(--dim); color:var(--text)}
  .d-type:focus-visible{outline:2px solid var(--focus)}
  .d-type[aria-pressed=true]{border-color:var(--forge); background:var(--forge-soft); color:var(--text)}
  .d-sugg{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
  .d-sugg button{all:unset; cursor:pointer; font-size:12px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px}
  .d-sugg button:hover{color:var(--text); border-color:var(--line-2)}
  .d-sugg button:focus-visible{outline:2px solid var(--focus)}
  .d-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .d-note{font-size:12px; color:var(--dim); margin-top:6px; font-weight:500}
  .d-ths{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
  .d-ths label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); flex:1; min-width:110px}
  .d-ths .err{font-size:12px; color:var(--bad)}
  .d-ths .d-unit{font-size:11px; color:var(--dim)}
  .d-ths label i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:4px; vertical-align:-1px}
  .d-ths .g{background:var(--ok)} .d-ths .y{background:var(--wait)} .d-ths .r{background:var(--bad)}
  .d-ths .inp{padding:6px 10px; font-size:13px}
  /* the print page: light paper, always */
  .d-print{background:#4B5563; padding:22px 14px 50px; min-height:100vh}
  .d-printbar{max-width:900px; margin:0 auto 12px; display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; color:#fff; font-size:13px; align-items:center}
  .d-paper{background:#fff; color:#14202B; border-radius:6px; box-shadow:var(--shadow); padding:28px 30px; max-width:900px; margin:0 auto; min-height:0}
  .d-paper h1{margin:0; font-size:20px}
  .d-paper .meta{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:#5E6E7D; border-bottom:2px solid #14202B; padding-bottom:10px; margin-bottom:16px}
  .d-paper .meta .by{text-align:left}
  .d-paper .d-grid{gap:10px}
  .d-paper .d-w{background:#fff; border-color:#E3DED5; break-inside:avoid}
  .d-made{font-size:11px; color:#5E6E7D; margin:14px 0 0; text-align:center}
  @media print{
    @page{size:A4 landscape; margin:12mm}
    html, body, .app{background:#fff}
    .side, .topbar, .strip, .d-printbar, .toast, .menu-btn{display:none}
    .d-print{background:#fff; padding:0; min-height:0}
    .d-paper{box-shadow:none; max-width:none; padding:0}
    .d-w, .d-drill{break-inside:avoid}
  }
  @container app (max-width: 1020px){
    .d-w, .d-w.s3, .d-w.s4{grid-column:span 6}
    .d-w.s8, .d-w.s12{grid-column:span 12}
    .d-add{grid-column:span 6}
  }
  @container app (max-width: 640px){
    .d-grid{grid-template-columns:minmax(0,1fr)}
    .d-w, .d-w.s3, .d-w.s4, .d-w.s6, .d-w.s8, .d-w.s12, .d-add{grid-column:auto}
    .d-filters .scope{margin-inline-start:0; flex-basis:100%}
    .d-filters .chips{margin-inline:0; padding-inline:0}
    .d-drawer{position:fixed; overflow:auto}
    .d-drawer .cols{grid-template-columns:minmax(0,1fr); flex:none}
    .d-drawer .cfg{border-inline-end:0; border-bottom:1px solid var(--line); overflow:visible}
    .d-drawer > header, .d-drawer footer{position:sticky; background:var(--panel); z-index:2}
    .d-drawer > header{top:0} .d-drawer footer{bottom:0}
    .d-types{grid-template-columns:repeat(3, minmax(0,1fr))}
    .d-paper{padding:18px 16px}
    .d-row2{grid-template-columns:minmax(0,1fr)}
    .d-flow{flex-direction:column}
    .d-flow .arr{transform:rotate(-90deg)}
    .d-donut{grid-template-columns:96px minmax(0,1fr)}
    .d-donut svg{width:96px; height:96px}
  }
  /* ── a record's document (PLAN 4.4): 4.2's backdrop, bar and light sheet, and the record on A4 — every new rule .p-… ──
   * No page rule in this file, and the board's print rules above untouched: A4 portrait comes from a rule the document puts at
   * the end of this sheet while it is open, and takes out on leaving (65-document.js `docPage`). */
  .p-paper{width:210mm; max-width:100%; padding:13mm 12mm 9mm; font-size:12.5px; line-height:1.65; overflow-wrap:anywhere}
  .p-bar-note{display:flex; align-items:center; gap:7px}
  .p-bar-note svg{width:15px; height:15px}
  .p-doc .d-printbar .btn svg{width:15px; height:15px}
  .p-hint{display:none; max-width:900px; margin:-4px auto 12px; color:#E5E7EB; font-size:12px; gap:6px; align-items:center}
  .p-hint svg, .p-line-ui svg, .p-preview-note svg{width:14px; height:14px; flex:none}
  .p-line-ui{max-width:900px; margin:-4px auto 12px; color:#FDE68A; font-size:12px; display:flex; gap:6px; align-items:center}
  .p-line-ui[hidden]{display:none}
  .p-preview-note{font-size:12px; color:#E5E7EB; display:inline-flex; gap:6px; align-items:center}
  .p-brand{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:2px solid #14202B; margin-bottom:12px}
  .p-brand .who{display:flex; align-items:center; gap:9px; min-width:0}
  .p-brand .who b{font-size:14px; line-height:1.3}
  .p-badge{width:30px; height:30px; border-radius:8px; background:#C2410C; color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; flex:none}
  .p-kind{font-size:11px; color:#5E6E7D; text-align:left}
  .p-kind b{color:#14202B; font-size:12px}
  .p-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:6px}
  .p-head h1{margin:0; font-size:21px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; line-height:1.35}
  .p-head .sub{margin:2px 0 0; color:#4A5B6B; font-size:12px}
  .p-state{font-size:12px; font-weight:600; border:1px solid currentColor; color:#4A5B6B; border-radius:999px; padding:0 10px}
  .p-state.t-ok{color:#166534} .p-state.t-bad{color:#B91C1C} .p-state.t-wait{color:#92400E}
  .p-tiles{display:flex; gap:8px; flex-wrap:wrap; break-inside:avoid}
  .p-tile{border:1px solid #E3DED5; border-top:3px solid #C2410C; border-radius:8px; padding:5px 12px 4px; min-width:112px}
  .p-tile small{display:block; color:#5E6E7D; font-size:11px}
  .p-tile b{font-size:22px; font-weight:600; line-height:1.3}
  .p-sec{margin-top:12px}
  .p-sec > h2{font-size:12.5px; margin:0 0 6px; color:#14202B; border-bottom:1px solid #CFC8BC; padding-bottom:3px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; break-after:avoid}
  .p-sec > h2 small{font-size:11px; color:#5E6E7D; font-weight:500}
  .p-kv{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 18px; margin:0}
  .p-kv > div{display:grid; grid-template-columns:104px minmax(0,1fr); gap:8px; padding:3px 0; border-bottom:1px dotted #E3DED5}
  .p-kv > div:not(.wide){break-inside:avoid}
  .p-kv > .wide{grid-column:1/-1}
  .p-kv dt{color:#5E6E7D}
  .p-kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
  .p-pre{white-space:pre-line}
  .p-table{width:100%; border-collapse:collapse; font-size:12px}
  .p-table thead{display:table-header-group}
  .p-table th{background:#F3F1ED; text-align:start; font-weight:600; padding:4px 8px; border-bottom:1px solid #CFC8BC}
  .p-table td{padding:4px 8px; border-bottom:1px solid #E3DED5; vertical-align:top; overflow-wrap:anywhere}
  .p-table tbody tr{break-inside:avoid}
  .p-table td.n{width:1%; white-space:nowrap; color:#5E6E7D}
  .p-table td.ph{width:62px; color:#5E6E7D}
  .p-row-fields{margin:0}
  .p-row-fields > div{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:6px}
  .p-row-fields dt{color:#5E6E7D}
  .p-row-fields dd{margin:0}
  .p-note{display:block; color:#4A5B6B; font-size:11.5px; font-weight:400; margin-top:1px; white-space:pre-line}
  .p-res{font-weight:600}
  .p-sum{display:flex; gap:6px 14px; flex-wrap:wrap; font-size:11.5px; color:#4A5B6B; margin-top:6px}
  .p-sum b{color:#14202B; font-weight:600}
  .p-line{font-size:11.5px; color:#5E6E7D; margin:5px 0 0; display:flex; gap:6px; align-items:center}
  .p-line svg{width:13px; height:13px; flex:none}
  .p-none{margin:0; color:#5E6E7D; font-size:12px}
  .p-photos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
  .p-photo{margin:0; break-inside:avoid; max-width:58mm}
  .p-photo .p-img, .p-photo .p-pic, .p-photo .p-gone{width:100%; aspect-ratio:4/3; border-radius:6px; border:1px solid #E3DED5; display:block; background:#F3F1ED}
  .p-photo .p-img{object-fit:contain}
  .p-photo .p-pic, .p-photo .p-gone{display:grid; place-items:center; border-style:dashed; color:#5E6E7D; font-size:11px}
  .p-photo figcaption{font-size:11px; color:#4A5B6B; margin-top:3px}
  .p-signs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
  .p-sign{border:1px solid #E3DED5; border-radius:8px; padding:7px 12px 6px; break-inside:avoid}
  .p-sign > small{display:block; color:#5E6E7D; font-size:11px}
  .p-sign .p-img{height:54px; max-width:100%; object-fit:contain; display:block; margin:2px 0}
  .p-sign .p-pic, .p-sign .p-gone{display:flex; align-items:center; height:54px; margin:2px 0; color:#5E6E7D; font-size:11px}
  .p-sign .rule{border-top:1px solid #14202B; padding-top:3px; font-size:11px; color:#4A5B6B}
  .p-sign .ok{display:flex; align-items:center; gap:6px; font-weight:600; color:#166534; margin:8px 0 6px; font-size:12.5px}
  .p-sign .ok svg{width:16px; height:16px; flex:none}
  .p-unsigned{margin:8px 0 6px; color:#5E6E7D; font-size:12.5px}
  .p-moves{list-style:none; margin:0; padding:0; font-size:11.5px}
  .p-moves li{padding:3px 0; border-bottom:1px dotted #E3DED5; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; break-inside:avoid}
  .p-moves li span:last-child{color:#5E6E7D}
  .p-foot{margin-top:14px; padding-top:6px; border-top:1px solid #CFC8BC; font-size:10.5px; color:#5E6E7D; display:flex; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; break-inside:avoid}
  .p-foot b{color:#14202B; font-weight:600}
  .p-notice{margin:4px 0 0; font-size:10.5px; color:#5E6E7D}
  @container app (max-width: 640px){
    .p-hint{display:flex}
    .p-paper{padding:16px 14px 12px}
    .p-kv{grid-template-columns:minmax(0,1fr)}
    .p-kv > div{grid-template-columns:96px minmax(0,1fr)}
    .p-photos{grid-template-columns:repeat(2, minmax(0,1fr))}
    .p-signs{grid-template-columns:minmax(0,1fr)}
    .p-table th, .p-table td{padding:4px 5px}
    .p-head h1{font-size:18px}
  }
  /* Printed: the bar, the hints and the lines never; the app's containers dropped for the document, so its pages break
   * and its table heads repeat as on a plain page — and no phone rule reaches the A4 page. */
  @media print{
    .p-doc .d-printbar, .p-hint, .p-line-ui{display:none}
    html:has(.p-doc), html:has(.p-doc) body{background:#fff}
    .app:has(> .p-doc), .p-paper{container-type:normal}
    .p-paper{width:auto; padding:0; box-shadow:none}
    .p-table thead{display:table-header-group}
    .p-table tbody tr, .p-photo, .p-sign, .p-tiles, .p-kv > div:not(.wide){break-inside:avoid}
  }