/* Package page styles copied from the approved mockup v21 (docs/handover/mockups/app-layout-v21.html),
   scoped under .v21 so the older pages keep their own styles. Kanat (24 Oct 2026): match the mockup exactly. */
.v21{--shell:#e1e6ea;--surface:#f4f6f8;--raised:#e9ecef;--ink:#202426;--secondary:#5e666b;
  --edge:#d2d8dd;--grid-line:#bcc5cc;--edge-strong:#9ea7ae;--control-edge:#7f8991;--hover:#dfe4e8;--selected:#202426;--selected-ink:#fff;
  --accent:#1d5fbf;--accent-ink:#fff;--accent-soft:#dce6f4;--warn:#8a4a05;--warn-bg:#fff7e8;--warn-edge:#d9a441;
  --calc:#226c4a;--calc-bg:#eef6f1;--f1:#1d5fbf;--f2:#7a4cc2;--f1-soft:rgba(29,95,191,.10);--f2-soft:rgba(122,76,194,.10);
  --guide:#b93a0a;--guide-ink:#fff;--scrim:rgba(20,24,28,.35);
  --font:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:6px;}
:root[data-theme="dark"] .v21{--shell:#111214;--surface:#191b1e;--raised:#222529;--ink:#f4f5f6;--secondary:#b6bdc3;
  --edge:#363b41;--grid-line:#454c53;--edge-strong:#5f6870;--control-edge:#737d86;--hover:#2b3035;--selected:#eef1f3;--selected-ink:#181b1e;
  --accent:#9abfff;--accent-ink:#0f1a2c;--accent-soft:#1f2b3d;--warn:#f3c37a;--warn-bg:#33291a;--warn-edge:#a57a35;
  --calc:#8bd0a8;--calc-bg:#1c2a23;--f1:#9abfff;--f2:#c6a8f5;--f1-soft:rgba(154,191,255,.12);--f2-soft:rgba(198,168,245,.12);
  --guide:#fdba74;--guide-ink:#2a1606;--scrim:rgba(0,0,0,.55);color-scheme:dark}
.v21,.v21 *{box-sizing:border-box}
.v21{background:var(--shell);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.4}
.v21 .mono{font-family:var(--font);font-variant-numeric:tabular-nums}
.v21 .num{font-variant-numeric:tabular-nums}
.v21 .gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.v21 .app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.v21 .pkg{background:var(--surface);display:flex;align-items:center;gap:10px;padding-block:8px;min-height:52px;flex-wrap:wrap}
.v21 .logo{width:28px;height:28px;border-radius:6px;padding:0;background:var(--selected);color:var(--selected-ink);display:flex;align-items:center;justify-content:center;flex:none;border:0;cursor:pointer}
.v21 .pkg-name{display:grid;line-height:1.25;min-width:0}
.v21 .pkg-name button{border:0;background:none;padding:0;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;gap:4px;align-items:center;text-align:left}
.v21 .pkg-name button:hover{text-decoration:underline}
.v21 .pkg-sub{font-size:12px;color:var(--secondary);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.v21 .pkg-sub a{color:var(--secondary)}
.v21 .pkg-sub a:hover{color:var(--ink)}
.v21 .dot{width:7px;height:7px;border-radius:50%;background:var(--calc);flex:none}
.v21 .spacer{flex:1 1 8px}
.v21 .faces{display:flex}
.v21 .face{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;border:2px solid var(--surface);margin-left:-6px}
.v21 .face.so{background:#b35c12}
.v21 .face.kr{background:#1d5fbf}
.v21 .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--hover);white-space:nowrap}
.v21 .chip.review{background:var(--accent-soft);color:var(--accent)}
.v21 .chip.issued{background:var(--calc-bg);color:var(--calc)}
.v21 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--control-edge);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
.v21 .btn:hover{background:var(--hover)}
.v21 .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.v21 .btn.primary:hover{filter:brightness(1.08)}
.v21 .btn.icon{width:34px;padding:0}
.v21 .btn svg{flex:none}
.v21 .avatar{width:34px;height:34px;border-radius:50%;background:#1d5fbf;color:#fff;border:0;font-weight:700;font-size:12px;cursor:pointer;flex:none}
.v21 .lbar{background:var(--surface);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);display:flex;align-items:stretch;gap:12px;min-height:40px}
.v21 .ltabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;align-items:stretch;min-width:0}
.v21 .ltabs::-webkit-scrollbar{display:none}
.v21 .ltab{border:0;background:none;padding:0 12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;color:var(--secondary);border-bottom:2px solid transparent;font-size:13px;flex:none}
.v21 .ltab b{color:var(--ink);font-weight:600}
.v21 .ltab:hover{background:var(--hover)}
.v21 .ltab[aria-current]{border-bottom-color:var(--ink);color:var(--ink)}
.v21 .ltab .face{width:20px;height:20px;font-size:9px;margin:0;border-width:0}
.v21 .ltab.add{font-size:18px;color:var(--secondary);padding:0 10px}
.v21 .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-edge);font-size:11px;font-weight:700}
.v21 .vsep{width:1px;background:var(--edge);margin-block:8px;flex:none}
.v21 .views{display:flex;gap:2px;align-items:center}
.v21 .views button{border:0;background:none;height:28px;padding:0 10px;border-radius:var(--r);cursor:pointer;color:var(--secondary);font-size:13px;font-weight:500}
.v21 .views button:hover{background:var(--hover)}
.v21 .views button[aria-current]{background:var(--selected);color:var(--selected-ink);font-weight:600}
.v21 .facts{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:12px;color:var(--secondary);white-space:nowrap}
.v21 .facts b{color:var(--ink);font-weight:600}
.v21 .meter{display:inline-flex;align-items:center;gap:6px}
.v21 .meter i{display:block;width:64px;height:6px;border-radius:3px;background:var(--hover);overflow:hidden;position:relative}
.v21 .meter i>span{position:absolute;inset:0 auto 0 0;background:var(--calc);border-radius:3px}
.v21 .meter.over i>span{background:var(--warn-edge)}
.v21 .meter.over b{color:var(--warn)}
.v21 .ov{background:var(--raised);border-bottom:1px solid var(--edge-strong);display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding-block:8px;align-items:stretch}
.v21 .fcards{display:flex;gap:8px}
.v21 .fcard{border:1px solid var(--edge-strong);background:var(--surface);border-radius:8px;padding:6px 10px;display:grid;gap:2px;text-align:left;cursor:pointer;min-width:0;position:relative;font-size:12px;line-height:1.35}
.v21 .fcard:hover{border-color:var(--ink)}
.v21 .fcard[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--fc);border-color:var(--fc)}
.v21 .fcard .ft{display:flex;gap:6px;align-items:center;font-size:13px;white-space:nowrap}
.v21 .fcard .ft b{font-weight:700}
.v21 .fn{width:18px;height:18px;border-radius:4px;background:var(--fc);color:var(--surface);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.v21 .kv{display:flex;gap:10px;color:var(--secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.v21 .kv span b{color:var(--ink);font-weight:600}
.v21 .kv .miss{color:var(--warn);font-weight:600}
.v21 .fcard .badge{position:absolute;top:6px;right:8px}
.v21 .prof{position:relative;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--surface);border:1px solid var(--edge-strong);border-radius:8px;padding:4px 8px 2px;cursor:pointer}
.v21 .prof svg{width:100%;height:56px;display:block}
.v21 .pwrap{position:relative}
.v21 .ms{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--surface);border:1.5px solid var(--mc);padding:0;cursor:pointer}
.v21 .ms:hover{transform:scale(1.4)}
.v21 .ms.on{background:var(--accent);border-color:var(--accent);width:10px;height:10px;margin:-5px 0 0 -5px}
.v21 .mlabel{position:absolute;transform:translate(-50%,calc(-100% - 8px));background:var(--selected);color:var(--selected-ink);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:2}
.v21 .mlabel.l{transform:translate(0,calc(-100% - 8px))}
.v21 .mlabel.r{transform:translate(-100%,calc(-100% - 8px))}
.v21 .mlabel.b{transform:translate(-50%,8px)}
.v21 .mlabel.b.l{transform:translate(0,8px)}
.v21 .mlabel.b.r{transform:translate(-100%,8px)}
.v21 .ticks{position:relative;height:14px;font-size:10px;color:var(--secondary);font-variant-numeric:tabular-nums}
.v21 .ticks span{position:absolute;transform:translateX(-50%)}
.v21 .ticks span:first-child{transform:none}
.v21 .ticks span:last-child{transform:translateX(-100%)}
.v21 .prof-cap{position:absolute;top:4px;left:10px;font-size:11px;color:var(--secondary);pointer-events:none}
.v21 .prof-cap b{color:var(--ink)}
.v21 .banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-block:7px;font-size:13px;border-bottom:1px solid var(--edge)}
.v21 .banner.lock{background:var(--calc-bg);color:var(--calc)}
.v21 .banner.rev{background:var(--accent-soft);color:var(--accent)}
.v21 .banner.hist{background:var(--warn-bg);color:var(--warn)}
.v21 .banner.chg{background:var(--warn-bg);color:var(--warn);justify-content:space-between}
.v21 .banner.chg>span{flex:1 1 300px;min-width:0}
.v21 .banner.chg .chg-note{display:block;margin-top:2px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.v21 .banner .btn{height:28px}
.v21 .body{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0}
.v21 .body.wide{grid-template-columns:minmax(0,1fr)}
.v21 .body.dcolb-on{grid-template-columns:minmax(0,1fr) 44px}
.v21 .drail{align-items:center;gap:10px;padding:8px 0;cursor:default}
.v21 .drail .vtext{writing-mode:vertical-rl;font-size:13px;font-weight:600;color:var(--secondary);overflow:hidden;max-height:60%}
@media (max-width:860px){.v21 .dcolb{display:none}}
.v21 .pane{overflow:auto;min-height:0}
.v21 .sheet{background:var(--surface)}
/* Kanat (25 Oct 2026): darker grey lines, not black, so the sheet stands out from the page and its cells read clearly. */
.v21 .pane.sheet{border-top:1px solid var(--edge-strong);border-right:1px solid var(--edge-strong)}
.v21 table.grid{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.v21 .grid th{position:sticky;top:0;z-index:2;background:var(--raised);font-size:11px;font-weight:600;color:var(--secondary);text-align:left;padding:6px 8px;border-bottom:1px solid var(--edge-strong);border-right:1px solid var(--grid-line);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.v21 .grid td{padding:5px 8px;border-bottom:1px solid var(--grid-line);border-right:1px solid var(--grid-line);vertical-align:top;white-space:nowrap}
.v21 .sheet .grid td.t{white-space:normal}
.v21 .sheet .grid td.ev{white-space:normal;color:var(--secondary)}
.v21 .grid td.r,.v21 .grid th.r{text-align:right}
.v21 .grid td.idx{color:var(--secondary);width:36px;text-align:right}
.v21 .grid tbody tr.ex{cursor:pointer}
.v21 .grid tbody tr.ex:hover td{background:var(--hover)}
.v21 .grid tbody tr.sel td{background:var(--accent-soft)}
.v21 .grid tbody tr.sel td.idx{box-shadow:inset 3px 0 0 var(--accent);color:var(--accent);font-weight:700}
.v21 .grid td.chg{background:var(--warn-bg)!important;box-shadow:inset 0 0 0 2px var(--warn-edge)}
.v21 .grid tr.ex{scroll-margin:64px 0 44px}
.v21 .grid tr.fgrp td{background:linear-gradient(var(--fcs),var(--fcs)),var(--surface);font-size:13px;font-weight:700;padding:7px 10px;box-shadow:inset 4px 0 0 var(--fcc);border-right:0;position:sticky;top:27px;z-index:1}
.v21 .grid tr.fgrp .fn{margin-right:6px;vertical-align:-3px}
.v21 .fgk{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-right:10px}
.v21 .fgt{float:right;font-size:12px}
.v21 .grid tr.fgrp span.s{color:var(--secondary);font-weight:400}
.v21 .msn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:11px;font-weight:700}
.v21 .grid tbody tr.sel td.idx .msn{background:var(--accent);color:var(--accent-ink)}
.v21 .mb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;background:#c62828;color:#fff;font-size:11px;font-weight:700}
.v21 .grid td.m,.v21 .grid th.m{text-align:center;width:34px;padding-inline:4px}
.v21 .fclt{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:#3d4a57;border-radius:3px;padding:0 5px;margin:1px 3px 1px 0;font-family:var(--font)}
.v21 .rpp{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--fc);border:1px dashed var(--fc);border-radius:999px;padding:0 7px;vertical-align:1px;white-space:nowrap}
.v21 .grid tr.wxr td{background:#2b333b;color:#fff;font-size:12px;padding:3px 10px;border-right:0}
.v21 .grid tr.wxr em{font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.06em;opacity:.75;margin:0 6px}
.v21 .grid tr.wxr svg{vertical-align:-1px}
:root[data-theme="dark"] .v21 .grid tr.wxr td{background:#3a434c}
.v21 .mflag{font-size:10px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:0 3px;margin-left:6px;vertical-align:1px}
.v21 .sheet-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:8px 10px;font-size:12px;color:var(--secondary);border-top:1px solid var(--edge);background:var(--raised);position:sticky;bottom:0}
.v21 .detail{background:var(--surface);border-left:1px solid var(--edge);display:flex;flex-direction:column;min-height:0}
.v21 .dhead{padding:10px 16px;border-bottom:1px solid var(--edge);display:grid;gap:4px;position:sticky;top:0;background:var(--surface);z-index:1}
.v21 .crumb{font-size:12px;color:var(--secondary);display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.v21 .crumb b{color:var(--ink);font-weight:600}
.v21 .dtitle{display:flex;align-items:center;gap:8px}
.v21 .dtitle h2{margin:0;font-size:16px;flex:1;min-width:0;text-wrap:balance}
.v21 .dbody{padding:12px 16px 24px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.v21 .f{display:flex;flex-direction:column;gap:4px;min-width:0}
.v21 .f>label,.v21 .f>.lab{font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .f .hint{font-weight:400}
.v21 .row{display:flex;gap:12px;flex-wrap:wrap}
.v21 .in{height:34px;padding:0 10px;border:1px solid var(--control-edge);border-radius:var(--r);background:var(--surface);font-variant-numeric:tabular-nums;width:100%}
.v21 .in:hover{border-color:var(--ink)}
.v21 .in:disabled{background:var(--raised);color:var(--secondary);border-color:var(--edge)}
.v21 .in.code{font-family:var(--mono);text-transform:uppercase}
.v21 .in.n{text-align:right}
.v21 textarea.in{height:auto;padding:8px 10px;resize:vertical;line-height:1.45}
.v21 .in.missing{border-color:var(--warn-edge);background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-edge)}
.v21 .adorn{position:relative;display:block}
.v21 .adorn .u{position:absolute;top:0;bottom:0;right:10px;display:flex;align-items:center;color:var(--secondary);font-size:12px;pointer-events:none}
.v21 .adorn .in{padding-right:44px}
.v21 .adorn.pre .u{left:10px;right:auto;font-family:var(--mono)}
.v21 .adorn.pre .in{padding-right:10px;padding-left:34px}
.v21 .w-s{width:100px}
.v21 .w-m{width:130px}
.v21 .chips{display:flex;gap:6px;flex-wrap:wrap}
.v21 .chips span{font-size:12px;font-weight:700;padding:1px 6px;border-radius:3px;background:#3d4a57;color:#fff}
.v21 .calc{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:var(--r);background:var(--calc-bg);color:var(--calc);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.v21 .calc small{font-weight:400}
.v21 .ctx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.v21 .ctx div{background:var(--raised);padding:5px 8px;font-size:12px;color:var(--secondary);display:grid}
.v21 .ctx b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.v21 .scol{display:flex;flex-direction:column;min-height:0;min-width:0}
.v21 .scol>.pane{flex:1}
.v21 .xprof{background:var(--surface);border-bottom:2px solid var(--edge);flex:none;max-height:58%;overflow:auto}
.v21 .xbar{display:flex;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.v21 .xbar b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-right:auto}
.v21 .xbar .btn{height:28px}
.v21 .xscroll{overflow-x:auto}
.v21 .xscroll svg{display:block}
.v21 .xscroll .lbl,.v21 .xscroll .mk{cursor:pointer}
.v21 .fs{position:fixed;inset:0;z-index:35;background:var(--surface);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.v21 .fs .xscroll{flex:1;overflow:auto;min-width:0}
.v21 .fsmain{flex:1;display:flex;min-height:0}
.v21 .fspanel{width:350px;flex:none;border-left:1px solid var(--edge);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.v21 .fsph{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.v21 .fsph b{flex:1}
.v21 .fsrail{width:44px;align-items:center;gap:10px;padding:8px 0}
.v21 .fsrail .vtext{writing-mode:vertical-rl;font-size:13px;font-weight:600;color:var(--secondary);overflow:hidden;max-height:70%}
.v21 .fspb{padding:12px 14px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1}
.v21 .stepr{display:inline-flex;gap:4px;align-items:center}
.v21 .fshint{border-top:1px solid var(--edge);padding:10px 14px;font-size:12px;color:var(--secondary);display:grid;gap:3px;background:var(--raised)}
.v21 .fshint b{color:var(--ink)}
.v21 .fsctx .over{color:var(--warn);font-weight:600}
.v21 #fs-chart .mk{cursor:grab}
.v21 #fs-chart .lbl{cursor:move}
.v21 .fs.dragging,.v21 .fs.dragging *{cursor:grabbing!important;user-select:none}
@media (max-width:900px){.v21 .fsmain{flex-direction:column}
.v21 .fspanel{width:auto;border-left:0;border-top:1px solid var(--edge);max-height:45%}
.v21 .fshint{display:none}}
.v21 .fsctx{margin-right:auto;font-size:13px;color:var(--secondary);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.v21 .fsctx b{color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0;margin:0}
.v21 .fsedit{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding-block:10px;border-top:1px solid var(--edge);background:var(--raised)}
.v21 .fsedit>.fn{align-self:center}
.v21 .fst{display:grid;line-height:1.3;min-width:160px;align-self:center}
.v21 .fst small{color:var(--secondary)}
.v21 .xexp{position:absolute;right:6px;top:4px;height:24px;font-size:12px;padding:0 8px;z-index:3}
.v21 .setup{padding:14px 0 40px;display:flex;flex-direction:column;gap:12px;max-width:1120px}
.v21 .setup .card{background:var(--surface);border:1px solid var(--edge);border-radius:8px}
.v21 .card>header{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.v21 .card>header h2{margin:0;font-size:15px}
.v21 .card>header .sub{margin-left:auto;font-size:12px;color:var(--secondary)}
.v21 .cbody{padding:12px 16px 16px;display:flex;flex-direction:column;gap:14px}
.v21 .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px 14px}
.v21 .fgrid .wide{grid-column:span 2}
.v21 .gt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--secondary);margin:0;padding-top:4px;border-top:1px solid var(--edge)}
.v21 .gt:first-child{border-top:0;padding-top:0}
.v21 .missbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 12px;border:1px solid var(--warn-edge);background:var(--warn-bg);color:var(--warn);border-radius:var(--r);font-size:13px}
.v21 .missbar.ok{border-color:var(--edge);background:var(--calc-bg);color:var(--calc)}
.v21 .missbar button{border:0;background:none;color:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}
.v21 .seg{display:inline-flex;border:1px solid var(--control-edge);border-radius:var(--r);overflow:hidden;height:34px}
.v21 .seg button{border:0;background:var(--surface);padding:0 12px;cursor:pointer;white-space:nowrap}
.v21 .seg button+button{border-left:1px solid var(--edge)}
.v21 .seg button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);font-weight:600}
.v21 details.card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 16px}
.v21 details.card>summary::-webkit-details-marker{display:none}
.v21 details.card>summary h2{margin:0;font-size:15px}
.v21 details.card>summary .sub{margin-left:auto;font-size:12px;color:var(--secondary)}
.v21 .home{padding:16px 0 40px;display:flex;flex-direction:column;gap:12px}
.v21 .home-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.v21 .home-head h1{margin:0;font-size:20px;margin-right:auto}
.v21 .pk-wrap{background:var(--surface);border:1px solid var(--edge);border-radius:8px;overflow-x:auto}
.v21 .pk-wrap .grid td{vertical-align:middle;padding:8px 10px}
.v21 .pk-wrap tr.ex td.t b{font-weight:600}
.v21 .drawer{background:var(--surface);border-left:1px solid var(--edge);display:flex;flex-direction:column;min-height:0}
.v21 .drawer h2{margin:0;font-size:16px;flex:1}
.v21 .vlist{overflow:auto;flex:1}
.v21 .vgrp{margin:0;padding:10px 16px 4px;font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .ver{border:0;background:none;width:100%;text-align:left;padding:8px 16px;display:grid;gap:2px;cursor:pointer}
.v21 .ver:hover{background:var(--hover)}
.v21 .ver[aria-pressed=true]{background:var(--accent-soft)}
.v21 .ver small{color:var(--secondary);font-size:12px}
.v21 .who{display:flex;gap:6px;align-items:center;font-size:12px}
.v21 .who i{width:9px;height:9px;border-radius:50%;display:block}
.v21 .vchg{background:var(--raised);padding:8px 16px 10px;display:grid;gap:6px;font-size:12px}
.v21 .vchg span{color:var(--secondary)}
.v21 .tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--calc-bg);color:var(--calc)}
.v21 .pop{position:fixed;z-index:30;background:var(--surface);border:1px solid var(--edge);border-radius:8px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);min-width:240px;padding:6px;display:flex;flex-direction:column}
.v21 .pop .mi{border:0;background:none;text-align:left;padding:8px 10px;border-radius:var(--r);cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:space-between}
.v21 .pop .mi:hover{background:var(--hover)}
.v21 .pop .mi small{color:var(--secondary)}
.v21 .pop .who-card{padding:8px 10px 10px;border-bottom:1px solid var(--edge);margin-bottom:4px;display:grid;gap:2px}
.v21 .pop .who-card small{color:var(--secondary)}
.v21 .pop hr{border:0;border-top:1px solid var(--edge);margin:4px 0}
.v21 .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--selected);color:var(--selected-ink);padding:8px 14px;border-radius:var(--r);font-size:13px;z-index:40;box-shadow:0 6px 20px -6px rgba(0,0,0,.4)}
@media (max-width:1100px){.v21 .body{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:860px){.v21 .app{height:auto;display:block}
.v21 .hdr{display:contents}
.v21 .pkg{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid var(--edge)}
.v21::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--surface)}
.v21 .ov{grid-template-columns:minmax(0,1fr)}
.v21 .fcards{overflow-x:auto;scrollbar-width:none}
.v21 .fcard{flex:none}
.v21 .body{display:block}
.v21 .xprof{max-height:none}
.v21 .pane{overflow:visible}
.v21 .detail{position:fixed;inset:auto 0 0 0;max-height:78%;border-left:0;border-top:1px solid var(--edge);border-radius:12px 12px 0 0;box-shadow:0 -10px 30px -10px rgba(0,0,0,.4);z-index:28;padding-bottom:env(safe-area-inset-bottom,0px)}
.v21 .detail[data-closed]{display:none}
.v21 .drawer{position:fixed;inset:0 0 0 auto;width:min(380px,100%);z-index:29;box-shadow:-10px 0 30px -10px rgba(0,0,0,.4)}
.v21 .facts .f-crew{display:none}
.v21 .sheet-foot{position:static}}
@media (max-width:600px),(orientation:portrait) and (max-width:1100px){.v21 .pkg .hide-s{display:none}
.v21 .facts{display:none}
.v21 .pkg-name button{font-size:15px}
.v21 .kv .k-wx{display:none}}
@media (min-width:861px){.v21 .dclose{display:none}}

/* App additions: the page fills the window, older global element styles are reset inside the mockup layout. */
html:has(.v21),body:has(.v21),#app:has(>.v21){height:100%;margin:0}
.v21{height:100%}
.v21 button{min-height:0;min-width:0;box-shadow:none;margin:0;text-transform:none;letter-spacing:normal;line-height:normal}
.v21 h2{letter-spacing:normal;text-transform:none}
.v21 .sheet table.grid{margin:0;table-layout:fixed}
.v21 .grid th,.v21 .grid td{height:auto}
.v21 .dot.err{background:#c62828}
.v21 .grid td.c-allowed,.v21 .grid th.c-allowed{text-align:center;color:var(--secondary);font-size:12px}
.v21 .msn.sub{background:var(--secondary)}
.v21 .cond-in{text-align:left;cursor:pointer;display:block;line-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v21 .cond-in .ph{color:var(--secondary)}
.v21 .hint{color:var(--secondary)}
/* Kanat (31 Oct 2026): + Sub-exercise and Duplicate came back with All fields…, one row, one height. */
.v21 .dmore{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.v21 #banner:empty{display:none}
.v21 #banner .app-updates:not(:has([data-update-action=reload])){display:none}
.v21 #banner .save-recovery[hidden]{display:none}
.v21 .seg button[data-v21-mode]{min-width:44px}
.v21 .prof svg rect[data-v21-select]{cursor:pointer}
/* Setup page details the mockup leaves to the Setup page mockup (route, ATIS, runway by third). */
.v21 .fcard.fadd{align-content:center;justify-items:center;color:var(--accent);font-weight:600;font-size:13px;min-width:64px}
.v21 .setup .card>header .fn{background:var(--fc)}
.v21 .setup .card>header .flt-remove{height:28px;margin-left:auto}
.v21 .setup .card>header .flt-remove+.sub{margin-left:0}
.v21 .fgrid .full{grid-column:1/-1}
.v21 .switches{display:flex;gap:16px;align-items:center;min-height:34px;flex-wrap:wrap}
.v21 .sw{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.v21 .atis-row{display:flex;gap:8px;align-items:flex-start}
.v21 .atis-row textarea{flex:1}
.v21 .parsed{font-size:12px;color:var(--calc)}
.v21 .gt .mono{margin-left:6px;color:var(--ink)}
.v21 .rwy3{display:grid;grid-template-columns:120px repeat(3,minmax(0,170px)) auto;gap:6px 10px;align-items:center;font-size:13px}
.v21 .rwy3 .wxg-head{font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .rwy3 .wxg-row{font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .rwy3 .wxg-hint{font-size:12px;color:var(--secondary)}
.v21 .missbar button{margin-left:auto}
.v21 .setup .in.missing,.v21 .setup .f.has-missing .in{border-color:var(--warn-edge);background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-edge)}
.v21 .setup textarea.in{min-height:60px}
.v21 .setup .tbl-wrap{overflow-x:auto}
.v21 .setup table.t{border-collapse:collapse;width:100%;font-size:13px}
.v21 .setup table.t th{text-align:left;font-size:11px;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;border-bottom:1px solid var(--edge)}
.v21 .setup table.t td{padding:4px 6px;vertical-align:top}
.v21 .setup #su-issue{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;grid-column:1/-1}
.v21 .setup #su-issue .lab{width:100%}
@media (max-width:860px){.v21 .rwy3{grid-template-columns:90px repeat(3,minmax(0,1fr))}.v21 .rwy3 .end{display:none}}
/* Version history opens in the detail column, as the mockup's drawer. */
body.history-open #app:has(>.v21){padding-right:0}
.v21 .body>.history-panel{position:static;width:auto;z-index:auto;box-shadow:none;min-height:0;overflow:auto;border-left:1px solid var(--edge)}
@media (max-width:860px){.v21 .body>.history-panel{position:fixed;inset:0 0 0 auto;width:min(380px,100%);z-index:29;box-shadow:-10px 0 30px -10px rgba(0,0,0,.4)}}
.v21 .pop .mfoot{padding:4px 10px 6px;color:var(--secondary);font-size:12px}
.v21 .pop .mi{font-size:14px;width:100%}

/* Package list and sign-in (mockup home) */
.v21 .journey{display:flex;flex-direction:column;min-height:100%;outline:0}
.v21 .home .home-year{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--secondary)}
.v21 .home .home-year .in{width:84px}
.v21 .fleet-pick{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--secondary)}
.v21 .fleet-pick .in{width:auto}
.v21 .pk-wrap tr.ex{cursor:pointer}
.v21 .pk-wrap tr.ex:hover td{background:var(--hover)}
.v21 .pk-wrap .pk-open{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.v21 .pk-wrap .pk-last,.v21 .pk-wrap .pk-none{color:var(--secondary)}
.v21 .pk-wrap .pk-new{color:var(--warn);font-weight:600}
.v21 .pk-wrap .pk-empty{padding:16px 10px;color:var(--secondary)}
.v21 .chip.approved{background:var(--calc-bg);color:var(--calc)}
.v21 .chip.changes{background:var(--warn-bg);color:var(--warn)}
.v21 .home-note{margin:0;font-size:12px;color:var(--secondary)}
.v21 .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.v21 .home-changes{border:1px solid var(--edge);border-radius:8px;background:var(--accent-soft);color:var(--accent)}
.v21 .fleet-notice{margin:0;font-size:13px}
.v21 .home-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding-block:12px;border-top:1px solid var(--edge);font-size:12px;color:var(--secondary)}
.v21 .home-foot>span:nth-child(3){margin-left:auto}
.v21 .signin-step{font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .signin-icon{width:32px;height:32px}
/* Sign-in (Kanat, 25 Oct 2026): one centred card with the app logo; the page header is hidden until signed in. */
.v21 .app:has(.fleet-signin) .hdr{display:none}
.v21 .journey:has(.fleet-signin){display:flex;min-height:100dvh;box-sizing:border-box;padding:24px 16px}
.v21 .fleet-signin{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(440px,100%);margin:auto}
.v21 .signin-main{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;padding:36px 36px 28px;background:var(--surface);border:1px solid var(--edge-strong);border-radius:12px;box-shadow:0 8px 28px rgba(20,24,28,.08)}
.v21 .signin-brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.v21 .signin-logo{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:12px;background:#1f2328;color:#fff}
.v21 .signin-brand strong{font-size:18px}.v21 .signin-brand>span:last-child{font-size:13px;color:var(--secondary)}
.v21 .signin-main h1{margin:6px 0 0;font-size:26px;letter-spacing:-.01em}
.v21 .signin-main p{margin:0;color:var(--secondary);line-height:1.5}
.v21 .signin-main>button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:8px;font-size:15px;font-weight:600}
.v21 .signin-main>button.quiet{min-height:40px;font-weight:500}
.v21 .signin-glyph{flex:none}.v21 .signin-main>button{display:flex!important;align-items:center;justify-content:center;gap:10px}
.v21 .signin-or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--secondary)}
.v21 .signin-or::before,.v21 .signin-or::after{content:'';flex:1;height:1px;background:var(--edge)}
.v21 .signin-choices{display:grid;gap:10px}
.v21 .signin-choice{width:100%;box-sizing:border-box;display:grid!important;grid-template-columns:24px minmax(0,1fr);gap:3px 12px;align-items:start;justify-content:stretch!important;padding:14px 16px;border:1px solid var(--edge-strong,#9ea7ae);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:0}
.v21 .signin-choice .t{font-size:15px;font-weight:600}
.v21 .signin-choice .d{grid-column:2;font-size:13px;font-weight:400;line-height:1.45;color:var(--secondary)}
.v21 .signin-choice.primary{border-color:transparent;background:var(--ink);color:var(--surface)}
.v21 .signin-choice.primary .d{color:color-mix(in srgb,var(--surface) 78%,transparent)}
.v21 .signin-choice:hover{border-color:var(--accent)}
.v21 .signin-ok{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--calc-bg,#e9f5ee);color:var(--calc,#1d5b36)!important;font-size:13px}
.v21 .signin-badge{align-self:flex-start;padding:4px 10px;border-radius:14px;background:var(--warn-bg,#fdf3e2);color:var(--warn,#8a4a05);font-size:13px;font-weight:600}
.v21 .signin-foot{padding-top:14px;border-top:1px solid var(--edge);font-size:13px}
.v21 .signin-version{margin:0;font-size:12px;color:var(--secondary)}
.v21 .signin-main form,.v21 .signin-main label{width:100%}
@media (max-width:480px){.v21 .signin-main{padding:28px 20px 24px}}
.v21 .home.gut{padding:16px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.v21 #revision-history{background:var(--surface);color:var(--ink);font-size:14px;display:flex;flex-direction:column;padding:0}
.v21 #revision-history .history-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--edge);margin:0}
.v21 #revision-history .history-head h2{margin:0;font-size:16px;flex:1}
.v21 #revision-history .history-close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--control-edge);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer}
.v21 #revision-history .history-body{padding:0;overflow:auto;flex:1}
.v21 #revision-history .history-body>label:first-child,.v21 #revision-history .history-filter{display:flex;gap:8px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--edge);font-size:13px;margin:0}
.v21 #revision-history .history-day{margin:0;padding:10px 16px 4px;font-size:12px;font-weight:600;color:var(--secondary)}
.v21 #revision-history .history-version,.v21 #revision-history .history-revision{border:0;border-radius:0;background:none;width:100%;text-align:left;padding:8px 16px;display:grid;gap:2px;cursor:pointer;color:inherit;font:inherit}
.v21 #revision-history .history-version:hover,.v21 #revision-history .history-revision:hover{background:var(--hover)}
.v21 #revision-history .history-version.is-selected{background:var(--accent-soft)}
.v21 #revision-history .history-version small,.v21 #revision-history .history-revision small{color:var(--secondary);font-size:12px}
.v21 #revision-history .history-version-detail{background:var(--raised);padding:8px 16px 10px;font-size:12px}
.v21 #revision-history .history-section{padding:8px 16px;border-top:1px solid var(--edge)}
.v21 #revision-history .history-section>summary{font-weight:600;cursor:pointer}
/* Kanat (31 Oct 2026): a change in the list grows with its text (long exercise names wrap), so it is not a 30 px button. */
.v21 #revision-history button:not(.history-version):not(.history-revision):not(.history-close):not(.history-change):not(.history-link):not(.history-ex-name):not([data-history-issued]){height:30px;padding:0 10px;border:1px solid var(--control-edge);border-radius:var(--r);background:var(--surface);color:inherit;cursor:pointer;font:inherit;font-size:13px}

/* Expand profile: full-screen editor as in the mockup (bar, chart, side panel). */
#profile-fullscreen-dialog.v21-fs{padding:0}
#profile-fullscreen-dialog.v21-fs>.v21{height:100%}
.v21 .fs{position:fixed;inset:0;z-index:35;background:var(--surface);display:flex;flex-direction:column}
.v21 .fs .xbar{display:flex;gap:10px;align-items:center;padding-block:6px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.v21 .fs .xbar .btn{height:28px}
.v21 .fsctx{margin-right:auto;font-size:13px;color:var(--secondary);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.v21 .fsctx b{color:var(--ink)}.v21 .fsctx .over{color:var(--warn);font-weight:600}
.v21 .fsmain{flex:1;display:flex;min-height:0}
.v21 .fs .xscroll{flex:1;overflow:auto;min-width:0;display:flex}
.v21 .fs .xscroll>#profile-panel{flex:1;height:auto;min-height:0;border:0;border-radius:0;padding:4px 8px}
#profile-fullscreen-dialog.v21-fs #profile-panel>summary{min-height:0;margin:0}
#profile-fullscreen-dialog.v21-fs #profile-panel>summary :is(.profile-section-title,.profile-header-selection,.profile-toggle-label,.profile-fullscreen-button){display:none}
.v21 .fspanel{width:350px;flex:none;border-left:1px solid var(--edge);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.v21 .fsph{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.v21 .fsph b{flex:1}
.v21 .fsph .fn{min-width:22px;height:22px;padding:0 5px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.v21 .fsrail{width:44px;align-items:center;gap:10px;padding:8px 0}
.v21 .fsrail .vtext{writing-mode:vertical-rl;font-size:13px;font-weight:600;color:var(--secondary);overflow:hidden;max-height:70%}
.v21 .fspb{padding:12px 14px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1}
.v21 .stepr{display:inline-flex;gap:4px;align-items:center}
.v21 .fshint{border-top:1px solid var(--edge);padding:10px 14px;font-size:12px;color:var(--secondary);display:grid;gap:3px;background:var(--raised)}
.v21 .fshint b{color:var(--ink)}
.v21 kbd{font:inherit;font-size:11px;border:1px solid var(--control-edge);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface)}
@media (max-width:900px){.v21 .fsmain{flex-direction:column}.v21 .fspanel{width:auto;border-left:0;border-top:1px solid var(--edge);max-height:45%}.v21 .fshint{display:none}}

/* Preview PDFs: the mockup's preview frame (header, Close, Instructor | Trainee). */
#modal:has(.pv-head){width:min(1100px,calc(100vw - 32px));max-width:none;padding:0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:calc(100dvh - 32px);max-height:none}
#modal:has(.pv-head)[open]{display:flex}
/* The preview's layout must not show a closed dialog (Kanat, 26 Oct 2026: it stayed under the exercise list after Close). */
#modal:not([open]){display:none!important}
#modal .pv-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--edge,#d8dde1)}
#modal .pv-head h2{margin:0;font-size:15px}
#modal .pv-close{height:34px;padding:0 12px;border:1px solid var(--control-edge,#9aa3a9);border-radius:6px;background:var(--surface,#fff);color:inherit;font:inherit;cursor:pointer}
#modal:has(.pv-head) .pdfbar{margin:0;padding:10px 14px;border-bottom:1px solid var(--edge,#d8dde1)}
#modal:has(.pv-head) .pdfbar>span{margin-left:0}
#modal .pv-seg{display:inline-flex;border:1px solid var(--control-edge,#9aa3a9);border-radius:6px;overflow:hidden;height:34px}
#modal .pv-seg button{border:0;border-radius:0;background:var(--surface,#fff);color:inherit;padding:0 12px;min-height:0;height:100%;font:inherit;cursor:pointer}
#modal .pv-seg button+button{border-left:1px solid var(--edge,#d8dde1)}
#modal .pv-seg button[aria-pressed=true]{background:var(--selected,#1d5fbf);color:var(--selected-ink,#fff);font-weight:600}
#modal:has(.pv-head)>:not(.pv-head):not(.pdfbar):not(.tut-ring):not(.tut-card){margin-left:14px;margin-right:14px}
#modal:has(.pv-head) .pdf-pages{flex:1;min-height:0}
#modal:has(.pv-head) .actions{padding-bottom:12px}
/* Phones: the sheet scrolls in its own box below the sticky package bar, so its header stays pinned. */
@media (max-width:860px){.v21 .scol>.pane.sheet{overflow:auto;max-height:calc(100dvh - var(--pkg-h,0px) - var(--foot-h,0px))}}
/* Phones: the package name stays beside the logo and its long sub line wraps there, as in the mockup. */
@media (max-width:600px),(orientation:portrait) and (max-width:1100px){.v21 .pkg>.pkg-name{flex:1 1 calc(100% - 48px)}.v21 .pkg>.pkg-name+.spacer{display:none}}
/* Touch screens and phones keep 44 px controls on Setup (accessibility minimum); the mockup 32–34 px stays for a mouse. */
@media (any-pointer:coarse),(max-width:600px){.v21 .su-v21 :is(button,input:not([type=checkbox]),select,.in){min-height:44px;min-width:44px}.v21 .su-v21 label:has(>input[type=checkbox]){min-height:44px;display:inline-flex;align-items:center}}
.v21 main.body:focus{outline:none}
/* Phones: the bar hides Version history and Preview PDFs, so the package menu offers them. */
.v21 .pop .mi.show-s{display:none}
@media (max-width:600px),(orientation:portrait) and (max-width:1100px){.v21 .pop .mi.show-s{display:flex}}
.v21 .pop .mi[aria-current]{font-weight:600;cursor:default}
/* A colleague's live selection or just-saved change, in their colour, on the sheet cell and the open detail field. */
.v21 tr.ex td{position:relative}
.v21 tr.ex td.remote-selection{outline:2px solid var(--collaborator);outline-offset:-2px}
.v21 .f.remote-selection{outline:2px solid var(--collaborator);outline-offset:3px;border-radius:6px}
.v21 tr.ex td.remote-edit,.v21 .f.remote-edit{box-shadow:inset 3px 0 var(--collaborator);background:var(--surface-raised,var(--hover))}
.v21 tr.ex td .draft-remote-label{position:absolute;right:2px;top:-8px;bottom:auto;z-index:4;max-width:none;background:var(--collaborator);color:#fff;border:0;font-size:10px;line-height:1.4;padding:0 5px;border-radius:3px;white-space:nowrap;pointer-events:none}

/* Sheet columns (Kanat, 24 Oct 2026): every column is resizable and the sheet scrolls sideways instead of hiding
   columns on smaller screens. The header stays pinned; # and Exercise stay frozen at the left. */
.v21 .sheet{container-type:inline-size}
.v21 .sheet .grid td{overflow:hidden;text-overflow:ellipsis}
.v21 .sheet .grid td:is(.remote-selection,.remote-edit){overflow:visible}
.v21 .sheet .grid td.c-fcl{white-space:normal}
.v21 .sheet .grid th{overflow:hidden;text-overflow:ellipsis;z-index:5}
.v21 .sheet .grid .fz{position:sticky;left:0;z-index:1;background-color:var(--surface)}
.v21 .sheet .grid th.fz{z-index:6;background-color:var(--raised)}
.v21 .sheet .grid .t.fz{left:var(--frozen-left)}
.v21 .sheet .grid tr.fgrp td{z-index:2}
.v21 .sheet .grid tr:is(.fgrp,.wxr) td{overflow:visible}
.v21 .sheet.scrolled-x .grid .t.fz:not(.chg,.remote-edit){box-shadow:6px 0 6px -6px rgba(0,0,0,.3)}
.v21 .sheet .grid .gstick{position:sticky;left:10px;display:block;max-width:calc(100cqw - 20px)}
.v21 .sheet .grid tr.wxr .gstick{display:inline-block}
.v21 .col-rs{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:col-resize;touch-action:none;z-index:1}
.v21 .col-rs::after{content:"";position:absolute;top:3px;bottom:3px;right:0;width:3px;border-radius:2px;background:transparent}
.v21 .col-rs:hover::after,.v21 .col-rs.on::after,.v21 .col-rs:focus-visible::after{background:var(--accent)}
.v21 .col-rs:focus-visible{outline:none}
@media (any-pointer:coarse){.v21 .col-rs{width:18px}.v21 .col-rs::after{background:var(--edge)}}
/* Columns added from the detail pane wrap long text to three lines; the full text is in the cell's tooltip. */
.v21 .sheet .grid td.wrap{white-space:normal}
.v21 .sheet .grid .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.v21 .colpick .tick{color:var(--accent);font-weight:700;min-width:1em;text-align:right}
/* Automation allowed: three switches (AP, FD, A/T) sharing the row. */
.v21 .tsws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v21 .tsw{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--control-edge);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:600;font-size:13px;color:inherit}
.v21 .tsw .track{position:relative;flex:none;width:30px;height:18px;border-radius:9px;background:var(--control-edge);transition:background .15s}
.v21 .tsw .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.v21 .tsw[aria-checked=true] .track{background:var(--accent)}
.v21 .tsw[aria-checked=true] .knob{left:14px}
.v21 .tsw:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.v21 .tsw .track,.v21 .tsw .knob{transition:none}}
/* Conditions from here: three rows (label · what changes · ›); an open row shows its fields on a two-column grid
   whose labels stay on one line, so every box lines up. */
.v21 .crows{border:1px solid var(--control-edge);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.v21 .crow-wrap+.crow-wrap{border-top:1px solid var(--edge)}
.v21 .crow{display:grid;grid-template-columns:150px minmax(0,1fr) 14px;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 10px;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.v21 .crow:hover{background:var(--hover)}
.v21 .crow .clab{font-weight:600;font-size:13px}
.v21 .crow .cval{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v21 .crow .cval.ph{color:var(--secondary)}
.v21 .crow .cchev{color:var(--secondary);transition:transform .15s}
.v21 .crow-wrap.open .cchev{transform:rotate(90deg)}
.v21 .crow-wrap.open .crow{background:var(--raised)}
.v21 .cedit{padding:10px;border-top:1px solid var(--edge)}
.v21 .cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:end}
.v21 .cgrid label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--secondary)}
.v21 .cgrid label>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .cgrid .in{height:34px;width:100%;box-sizing:border-box;color:var(--ink);font-size:14px}
.v21 .cerr{margin:8px 0 0;font-size:12px;color:var(--ink);border-left:3px solid var(--warn-edge);padding-left:8px}
@media (prefers-reduced-motion:reduce){.v21 .crow .cchev{transition:none}}
/* FCL items: removable chips, then a searchable catalogue whose rows read tick · code · activity with source details. */
.v21 .fchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.v21 .fchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 4px 0 8px;border:1px solid var(--edge);border-radius:var(--r);background:var(--raised);font-size:12.5px}
.v21 .fchip b{font-variant-numeric:tabular-nums}
.v21 .fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;color:var(--secondary)}
.v21 .fchip button{border:0;background:none;width:22px;height:22px;border-radius:4px;cursor:pointer;color:var(--secondary)}
.v21 .fchip button:hover{background:var(--hover);color:var(--ink)}
.v21 .fadd{height:28px}
.v21 .fpanel{margin-top:8px;border:1px solid var(--control-edge);border-radius:var(--r);padding:8px;background:var(--surface);display:grid;gap:6px}
.v21 .fmeta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--secondary)}
.v21 .flist{max-height:360px;overflow:auto;display:block;border-top:1px solid var(--edge)}
.v21 .fopt{display:grid;grid-template-columns:20px 56px minmax(0,1fr);gap:10px;align-items:start;width:100%;height:auto;min-height:44px;padding:9px 8px;border:0;border-bottom:1px solid var(--edge);background:none;text-align:left;cursor:pointer;color:inherit;font-size:14px;line-height:1.35;white-space:normal}
.v21 .fopt[hidden]{display:none}
.v21 .fopt:hover{background:var(--hover)}
.v21 .fopt[aria-pressed=true]{background:var(--accent-soft)}
.v21 .fopt .fbox{width:18px;height:18px;border:1px solid var(--control-edge);border-radius:4px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface)}
.v21 .fopt[aria-pressed=true] .fbox{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.v21 .fopt b{font-variant-numeric:tabular-nums}
.v21 .fopt .ftext{min-width:0;overflow-wrap:anywhere}
.v21 .fopt .ftext small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--secondary)}
.v21 .fopt b{padding-top:1px}
/* Exercise title list: grey phase headings, one standard exercise per row, opening under the title box. */
.v21 .tcombo{position:relative}
.v21 .tcombo .in{padding-right:36px}
.v21 .tbtn{position:absolute;right:1px;top:1px;width:34px;height:32px;border:0;background:none;cursor:pointer;color:var(--secondary);font-size:13px}
.v21 .tbtn:hover{color:var(--ink)}
.v21 .tlist{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--edge);border-radius:8px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);padding:4px}
.v21 .tgroup{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.v21 .topt{padding:8px 10px;border-radius:var(--r);cursor:pointer;font-size:14px;line-height:1.3}
.v21 .topt:hover,.v21 .topt.active{background:var(--hover)}
.v21 .topt[aria-selected=true]{font-weight:600;background:var(--accent-soft)}
.v21 .tnone{margin:0;padding:10px;font-size:13px;color:var(--secondary)}
/* New training package dialog: visible choices, one source list, title shown with an optional rename. */
/* Fleet team access (local keys): the form and the list of members with a key. */
[data-theme] #cloud-dialog .access-form .field{display:grid;gap:4px;margin:0 0 12px}
[data-theme] #cloud-dialog .access-form input[name=name],[data-theme] #cloud-dialog .access-form select{height:34px;padding:0 10px;border:1px solid var(--control-edge,#7f8991);border-radius:6px;font:inherit;background:var(--surface);color:inherit}
[data-theme] #cloud-dialog .access-form fieldset{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--edge);border-radius:6px}
[data-theme] #cloud-dialog .access-form legend{padding:0 4px;font-size:13px;color:var(--secondary)}
[data-theme] #cloud-dialog .cloud-access-fleet{display:inline-flex;align-items:center;gap:6px;min-height:32px}
[data-theme] #cloud-dialog .cloud-access-fleet input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
[data-theme] #cloud-dialog .access-members{margin-top:18px;padding-top:14px;border-top:1px solid var(--edge)}
[data-theme] #cloud-dialog .access-members h3{margin:0 0 8px;font-size:14px}
[data-theme] #cloud-dialog .access-members ul{list-style:none;margin:0;padding:0;max-height:40vh;overflow:auto;border:1px solid var(--edge);border-radius:6px}
[data-theme] #cloud-dialog .access-member{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid var(--edge)}
[data-theme] #cloud-dialog .access-member:first-child{border-top:0}
[data-theme] #cloud-dialog .access-member span{display:grid;min-width:0}
[data-theme] #cloud-dialog .access-member small{color:var(--secondary);font-size:12px;overflow-wrap:anywhere}
[data-theme] #cloud-dialog .access-member.revoked{opacity:.7}
[data-theme] #cloud-dialog .access-member em{font-style:normal;font-size:12px;color:var(--secondary)}
[data-theme] #cloud-dialog .access-members summary{margin-top:10px;cursor:pointer;font-size:13px;color:var(--secondary)}
[data-theme] #cloud-dialog .create-source{display:grid;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
[data-theme] #cloud-dialog .create-option{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border-top:1px solid var(--edge);cursor:pointer;overflow-wrap:anywhere}
[data-theme] #cloud-dialog .create-option:first-child{border-top:0}
[data-theme] #cloud-dialog .create-option input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}
[data-theme] #cloud-dialog .create-option strong{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;font-weight:600}
[data-theme] #cloud-dialog .create-option small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--secondary)}
[data-theme] #cloud-dialog .create-option:has(input:disabled){background:var(--surface-raised);cursor:default}
[data-theme] #cloud-dialog .create-option:has(input:disabled) strong{color:var(--secondary)}
[data-theme] #cloud-dialog .create-option:has(input:disabled) .create-badge{display:none}
[data-theme] #cloud-dialog .create-edition{display:grid;gap:6px;margin-top:8px}
[data-theme] #cloud-dialog .create-edition label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;min-height:28px}
[data-theme] #cloud-dialog .create-edition input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
[data-theme] .create-badge{font-size:12px;font-weight:500;background:var(--hover);padding:2px 6px;border-radius:4px}
[data-theme] #cloud-dialog .create-existing{margin:12px 0;padding:12px 14px;border:1px solid var(--edge);border-radius:6px;background:var(--surface-raised);line-height:1.5}
[data-theme] #cloud-dialog .create-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}
[data-theme] #cloud-dialog .create-title{display:flex;align-items:center;gap:8px;flex:1 1 240px;min-width:0;font-size:14px}
[data-theme] #cloud-dialog :is(.create-title,.create-existing,[data-create-source])[hidden]{display:none}
[data-theme] #cloud-dialog .create-title>span{color:var(--secondary)}
[data-theme] #cloud-dialog .create-title strong{font-weight:600;overflow-wrap:anywhere}
[data-theme] #cloud-dialog .create-title input{flex:1;min-width:0}
[data-theme] #cloud-dialog .create-rename{border:0;background:none;padding:0;min-height:0;color:var(--accent);font-weight:500}
[data-theme] #cloud-dialog .create-footer .actions{margin:0 0 0 auto}
[data-theme] .fleet-next{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
[data-theme] #cloud-dialog .create-package>.grid2+.field{margin-top:12px}
[data-theme] .pk-next{margin-left:6px;min-height:28px;padding:2px 10px;font-size:12px}
/* Version label at the top right (Kanat, 25 Oct 2026): always visible, opens version details and Update. */
.v21 .ver-chip{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--edge);border-radius:17px;background:var(--surface);color:var(--secondary);font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer}
.v21 .ver-chip:hover,.v21 .ver-chip[aria-expanded=true]{background:var(--hover);color:var(--ink)}
.v21 .ver-chip.has-update{color:var(--ink);border-color:var(--accent)}
.v21 .ver-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
[data-theme] .ver-pop{position:fixed;z-index:60;width:min(300px,calc(100vw - 16px));box-sizing:border-box;padding:14px 16px;border:1px solid var(--edge);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:13px;line-height:1.45}
[data-theme] .ver-pop .ver-title{margin:0 0 8px;font-weight:600;font-size:14px}
[data-theme] .ver-pop dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0 0 10px}
[data-theme] .ver-pop dt{color:var(--secondary)}
[data-theme] .ver-pop dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
[data-theme] .ver-pop .ver-status{margin:0 0 12px;color:var(--secondary)}
[data-theme] .ver-pop .ver-status strong{color:var(--ink)}
[data-theme] .ver-pop .ver-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (any-pointer:coarse){[data-theme] .ver-pop .ver-actions button{min-height:44px}}
/* Medium widths: Preview PDFs keeps its icon and accessible name, so the version label fits on the header row. */
@media (max-width:1180px){.v21 .pkg .pdf-preview{font-size:0;gap:0;width:34px;padding:0}}
/* Phones: the package name gives way so the version label stays on the first row, at the right. */
@media (max-width:600px),(orientation:portrait) and (max-width:1100px){.v21 .pkg>*{order:2}.v21 .pkg>:is(.logo,.pkg-name,.ver-chip){order:1}.v21 .pkg>.pkg-name{flex-basis:calc(100% - 48px - 82px)}.v21 .ver-chip{padding:0 8px}}
/* Column order (Kanat, 25 Oct 2026): press and hold a heading, then drag and drop it; # stays first. */
.v21 .sheet .grid thead th[data-c]:not([data-c=idx]){user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.v21 .sheet .grid thead th[data-c]:not([data-c=idx]){cursor:grab}
.v21 .sheet .grid tbody tr.ex td.idx{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* The picked-up column or row stays faded in place while its ghost follows the pointer. */
.v21 .sheet .grid .col-moving,.v21 .sheet .grid tr.row-moving td{opacity:.35}
.v21-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;background:var(--raised);border:1px solid var(--accent);border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.24);overflow:hidden;opacity:.96;cursor:grabbing}
.v21-ghost.col .gh{padding:7px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);background:var(--hover);border-bottom:1px solid var(--grid-line)}
.v21-ghost.col .gc{display:flex;align-items:center;height:30px;padding:0 10px;font-size:12px;white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--grid-line)}
.v21-ghost.row table{margin:0;width:100%}
.v21-ghost.row td{background:var(--raised)!important;opacity:1}
.v21-ghost.row .gcount{padding:4px 10px;font-size:11px;font-weight:600;color:var(--accent);border-top:1px solid var(--grid-line)}
.v21-drop{position:fixed;z-index:999;pointer-events:none;background:var(--accent);border-radius:2px}
.v21 .sheet-foot .rowmove{display:inline-flex;gap:6px;margin-left:auto}
.v21 .sheet-foot .rowmove .btn{display:inline-flex;align-items:center;gap:4px}
.v21 .sheet-foot .rowmove .btn svg{width:14px;height:14px}
.v21 .sheet .grid thead th.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.v21 .sheet .grid thead th.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
/* Selected exercise (Kanat, 25 Oct 2026): a slow breathing highlight on its sheet row and profile marker. */
@keyframes v21-sel-breathe{0%,100%{background-color:var(--accent-soft)}50%{background-color:color-mix(in srgb,var(--accent) 24%,var(--accent-soft))}}
@keyframes v21-ms-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent)}}
.v21 .grid tbody tr.sel td{animation:v21-sel-breathe 2.4s ease-in-out infinite}
.v21 .ms.on{animation:v21-ms-breathe 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.v21 .grid tbody tr.sel td,.v21 .ms.on{animation:none}}

/* Expanded profile, design option B (Kanat, 25 Oct 2026): 16 px page margin, 12 px between cards,
   16 px inside every card, 44 px card headings, 34 px controls, the editor on a 12-column grid. */
.v21 .fs.fsb{background:var(--shell)}
.v21 .fsb .xbar{background:var(--surface)}
.v21 .fsgrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);gap:12px;padding:12px 16px 16px}
.v21 .fscard{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--edge-strong);border-radius:8px}
.v21 .fschart{grid-column:1/-1}
.v21 .fshead{display:flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 16px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.v21 .fshead>b{font-size:14px}
.v21 .fshead .sub{color:var(--secondary);font-size:12px}
.v21 .fshead .grow{flex:1}
.v21 .fshead .btn{height:32px}
.v21 .fshead .vsep{width:1px;height:24px;background:var(--edge)}
.v21 .fshead .fn{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700}
.v21 .fshead .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.v21 .fschart .xscroll{flex:1;min-height:0;display:flex;overflow:hidden}
#profile-fullscreen-dialog.v21-fs .fsb #profile-panel>summary,#profile-fullscreen-dialog.v21-fs .fsb #profile-panel :is(.profile-scale-tools,.profile-label-toolbar){display:none!important}
#profile-fullscreen-dialog.v21-fs .fsb #profile-panel{padding:0 8px}
.v21 .fsbody{flex:1;min-height:0;overflow:auto}
/* Exercise list */
.v21 .fstable{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.v21 .fstable th{position:sticky;top:0;z-index:1;height:32px;padding:0 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary);background:var(--raised);border-bottom:1px solid var(--edge-strong)}
.v21 .fstable td{height:34px;padding:0 12px;border-bottom:1px solid var(--grid-line,var(--edge));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .fstable .n{width:56px;text-align:right;padding-left:16px;font-weight:700}
.v21 .fstable th:nth-child(2){width:64px}
.v21 .fstable td.ev{color:var(--secondary)}
.v21 .fstable th:nth-child(4){width:36%}
.v21 .fstable tr[data-v21-select]{cursor:pointer}
.v21 .fstable tr[data-v21-select]:hover td{background:var(--hover)}
.v21 .fstable tr.sub td.t{padding-left:24px}
.v21 .fstable tr.sel td{background:var(--accent-soft,#e8f0fb)}
.v21 .fstable tr.sel td.n{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.v21 .fstable tr.sel td.t{font-weight:600}
.v21 .fstable tr.fsfg td{height:28px;font-size:12px;color:var(--secondary);background:var(--raised)}
.v21 .fstable tr.fsfg b{color:var(--fcc)}
/* Exercise editor: 12 columns */
.v21 .fsgridf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 16px;padding:16px;align-content:start}
.v21 .fsgridf>.s2{grid-column:span 2}.v21 .fsgridf>.s3{grid-column:span 3}.v21 .fsgridf>.s5{grid-column:span 5}.v21 .fsgridf>.s6{grid-column:span 6}.v21 .fsgridf>.s7{grid-column:span 7}.v21 .fsgridf>.s12{grid-column:1/-1}
.v21 .fsgridf .f{margin:0;min-width:0}
.v21 .fsgridf .in{height:34px}
.v21 .fsgridf textarea.in{height:auto;min-height:56px;resize:vertical}
/* Kanat (28 Oct 2026): Description and Instructor note in the profile window show a few lines and grow while typing. */
.v21 .fsgridf #fs-desc,.v21 .fsgridf #fs-note{min-height:96px;field-sizing:content;max-height:40vh}
.v21 .fsgridf .fsnote{background:var(--note-soft,#fff7e8)}
.v21 /* Kanat (25 Oct 2026): the Mandatory switch stands on its own, without a box around it. */
.fsm{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.v21 .fsm .track{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:var(--edge-strong,#9ea7ae);transition:background .15s}
.v21 .fsm .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.v21 .fsm[aria-checked=true]{color:var(--m-ink,#8c1d18);font-weight:600}
.v21 .fsm[aria-checked=true] .track{background:var(--m,#b3261e)}
.v21 .fsm[aria-checked=true] .knob{left:16px}
.v21 .fscbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v21 .fscb{display:flex;align-items:center;gap:6px;min-width:0;height:34px;padding:0 10px;border:1px solid var(--edge);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.v21 .fscb span{color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .fscb.chg{border-color:var(--warn-edge,#d9a441);background:var(--warn-soft,#fff7e8)}
.v21 .fscb.chg span{color:var(--warn-ink,#8a4a05)}
.v21 .fscb:hover{border-color:var(--accent)}
/* Weight / weather: Item | Before | From here */
.v21 .fscth,.v21 .fsct{display:grid;grid-template-columns:150px 120px minmax(0,300px) 32px;gap:12px;align-items:center;padding:0 16px}
/* Phones: the three columns share the width, so the From fields stay usable. */
@media (max-width:600px),(orientation:portrait) and (max-width:1100px){.v21 .fscth,.v21 .fsct{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:8px;padding:0 10px}}
.v21 .fscth{flex:none;height:32px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary);background:var(--raised);border-bottom:1px solid var(--edge-strong)}
.v21 .fsct{min-height:44px;border-bottom:1px solid var(--grid-line,var(--edge))}
.v21 .fsct .nm{font-weight:600}.v21 .fsct .bf{color:var(--secondary)}
.v21 .fsct .ctl label{display:block}.v21 .fsct .ctl label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v21 .fsct .ctl .in{width:100%;height:34px}
.v21 .fsct.chg{background:var(--warn-soft,#fffbf2);box-shadow:inset 3px 0 0 var(--warn-edge,#d9a441)}
.v21 .fsct.chg .in{border-color:var(--warn-edge,#d9a441);font-weight:600}
.v21 .fsclr{color:var(--warn-ink,#8a4a05)}
/* Reposition */
.v21 .fsrep{display:grid;gap:14px;padding:14px 16px 16px;align-content:start}
.v21 .fschips{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v21 .fschips .cap{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary)}
.v21 .fschips .row5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.v21 .fschip{height:34px;padding:0 6px;border:1px solid var(--edge);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .fschip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600}
.v21 .fsrd{padding:12px;border:1px solid var(--edge);border-radius:8px;background:var(--raised)}
.v21 .fsrd>b{display:block;margin-bottom:8px;font-size:12px}
.v21 .fsrd .cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
.v21 .fsrd .cgrid label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--secondary)}
.v21 .fsrd .cgrid .in{height:34px}
.v21 .fsba{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:8px;font-size:12px}
.v21 .fsba>div{padding:8px 10px;border:1px solid var(--edge);border-radius:6px;color:var(--secondary)}
.v21 .fsba>div b{color:var(--ink)}
.v21 .fsba>span{text-align:center;color:var(--accent);font-weight:700}
.v21 .fsba>.to{border-color:var(--accent);background:var(--accent-soft,#e8f0fb);color:var(--accent)}
/* Narrow screens stack chart, list and editor and the whole grid scrolls. The list and editor rows take their full
   height (max-content): with auto rows they shrank to fit the screen, leaving the editor about 60 px tall on an
   upright iPhone (Kanat, 25 Oct 2026). The chart row is at least 440 px so the plot shows below its tools. */
@media (max-width:900px){.v21 .fsgrid{grid-template-columns:1fr;grid-template-rows:minmax(440px,72%) max-content max-content;overflow:auto;padding:8px}.v21 .fsgrid>.fsed{overflow:visible}.v21 .fsgrid>.fsed>.fsbody{overflow:visible}.v21 .fslist{max-height:260px}.v21 .fsgridf{grid-template-columns:repeat(6,minmax(0,1fr))}.v21 .fsgridf>.s2{grid-column:span 2}.v21 .fsgridf>:is(.s3,.s5,.s6,.s7){grid-column:1/-1}}

/* Upright phones (Kanat, 25 Oct 2026; approved design https://claude.ai/artifact/Gatqm6MC45EypzrCjT8trY): one screen at a
   time, tabs at the bottom, exercises as cards, an exercise and a condition each as a full page. */
.v21.phone .lbar .views,.v21.phone .lbar .vsep{display:none}
.v21.phone .lbar{flex-wrap:wrap;gap:6px 12px;padding-block:6px}
.v21.phone .lbar .facts{display:flex;margin-left:0;flex-basis:100%}
.v21.phone .lbar .meter{flex:1}.v21.phone .lbar .meter i{flex:1;width:auto}
.v21.phone .app{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.v21.phone.ppage .app{padding-bottom:0}
.v21.phone .scol{padding:8px 12px 16px}
.v21 .plist{display:flex;flex-direction:column;gap:6px}
.v21 .pgrp{margin:8px 2px 2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.v21 .pgrp:first-child{margin-top:0}
.v21 .pwx{display:flex;align-items:center;gap:6px;background:var(--wx-bar,#2b333b);color:var(--wx-ink,#fff);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600}
.v21 .pwx em{font-style:normal;font-weight:700}
.v21 .pcard{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:2px 10px;align-items:center;min-height:52px;padding:8px 10px;border:1px solid var(--grid-line,#c4cbd1);border-radius:10px;background:var(--surface);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.v21 .pcard.sub{margin-left:18px}
.v21 .pcard.sel{border:2px solid var(--accent);background:var(--accent-soft);padding:7px 9px}
.v21 .pcard .pn,.v21 .psel .pn{grid-row:1/3;width:26px;height:26px;border-radius:50%;background:var(--fc,var(--ink));color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.v21 .pcard .pn.sub{font-size:10.5px;opacity:.8}
.v21 .pcard .pt{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;min-width:0}
.v21 .pcard .pt .mb{flex:none;width:16px;height:16px;font-size:10px}
.v21 .pcard .pm{font-size:12px;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
.v21 .pcard .ptm{grid-row:1/3;grid-column:3;text-align:right;font-size:12px;color:var(--secondary);display:flex;flex-direction:column}
.v21 .pcard .ptm b{font-size:14px;color:var(--ink);font-weight:600}
.v21 .ptabs{position:fixed;inset:auto 0 0 0;z-index:25;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border-top:1px solid var(--edge-strong);padding-bottom:env(safe-area-inset-bottom,0px)}
.v21 .ptab{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--secondary);font:600 11px 'Public Sans',system-ui,sans-serif;cursor:pointer}
.v21 .ptab[aria-current=page]{color:var(--accent)}
/* Profile tab: the lesson chart, tall, with the selected exercise under it. */
.v21.pprofile .hdr .ov .prof{display:none}
.v21 .pprof .prof{padding:6px 8px 4px}
.v21 .pprof .prof svg{height:340px}
.v21 .pprof .xexp{position:static;justify-self:start;margin-bottom:4px}
.v21 .phint{margin:8px 2px 0;font-size:12px;color:var(--secondary)}
.v21 .psel{margin-top:10px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid var(--accent);border-radius:10px;background:var(--surface)}
.v21 .psel .pn{background:var(--accent);flex:none}
.v21 .psel .pst{display:flex;flex-direction:column;min-width:0;flex:1;font-size:12px;color:var(--secondary)}
.v21 .psel .pst b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .psel .btn,.v21 .pnav .btn{height:44px;padding:0 16px}
.v21 .pnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
/* One exercise as a full page: Back at the top, Previous / Next at the bottom, fields one under another. */
.v21.ppage .hdr,.v21.ppage #banner:empty{display:none}
.v21.phone .detail.pdetail{position:static;max-height:none;min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none;padding-bottom:0}
.v21 .phead{position:sticky;top:env(safe-area-inset-top,0px);z-index:3;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px 0 4px;background:var(--surface);border-bottom:1px solid var(--edge)}
.v21 .pback{display:flex;align-items:center;gap:2px;height:44px;padding:0 8px;border:0;background:none;color:var(--accent);font:600 15px 'Public Sans',system-ui,sans-serif;cursor:pointer}
.v21 .ppos{margin-left:auto;font-size:13px;color:var(--secondary)}
.v21 .ppos b,.v21 b.ppos{color:var(--ink)}
.v21 b.ppos{margin-left:8px;margin-right:auto;font-size:17px}
.v21 .pdetail .dhead{position:static;padding:0;border:0}
.v21 .pdetail .crumb,.v21 .pdetail .dtitle{display:none}
.v21 .pdetail .ctx{border-radius:0;border-inline:0}
.v21 .pdetail .ctx div{padding:8px 12px}
.v21 .pdetail .dbody{overflow:visible;padding:14px 16px 20px;gap:14px}
.v21 .pdetail .dbody .in{min-height:46px;font-size:16px}
.v21 .pdetail .dbody .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v21 .pdetail .dbody .row .f{width:auto}
.v21 .pmand{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 15px 'Public Sans',system-ui,sans-serif;cursor:pointer;align-self:flex-start}
.v21 .pmand .track{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--edge-strong,#9ea7ae);transition:background .15s}
.v21 .pmand .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.v21 .pmand[aria-checked=true] .track{background:var(--m,#b3261e)}
.v21 .pmand[aria-checked=true] .knob{left:21px}
.v21 .pmand .mb{width:18px;height:18px}
.v21 .pfoot{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--edge-strong)}
.v21 .pfoot .btn{height:46px;min-width:0;font-size:14px;font-weight:600;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding:0 10px}
.v21 .pfoot .btn:only-child{grid-column:1/-1}
/* A condition (Weight, Weather, Reposition) as its own page; each field takes the full width. */
.v21.phone .crow-wrap.open .cedit{position:fixed;inset:0;z-index:40;background:var(--surface);overflow:auto;padding:0;border:0;display:flex;flex-direction:column}
.v21.phone .cedit .pcnote{margin:0;padding:10px 16px;font-size:13px;color:var(--secondary);background:var(--raised);border-bottom:1px solid var(--edge)}
.v21.phone .cedit .cgrid{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 16px 16px;flex:1;align-content:start}
.v21.phone .cedit .cgrid label{padding:10px 0;border-bottom:1px solid var(--edge);font-size:15px;font-weight:600;color:var(--ink);gap:6px}
.v21.phone .cedit .cgrid .in{height:46px;font-size:16px;font-weight:400}
.v21.phone .cedit .cerr{margin:0 16px}
.v21 .ptab:hover{background:none}
/* Setup on a phone (design boards 5–5c): the lesson card, flights with their status and the rarely changed
   sections as rows; a flight, its departure weather and each rarely changed section open as a page. */
.v21.psetup .hdr .ov{display:none}
.v21 .su-phone{padding:8px 12px 16px;gap:8px;max-width:none}
.v21 .su-phone .pcap{margin:6px 4px 0;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary)}
.v21 .su-phone .card{border-radius:10px;overflow:hidden}
.v21 .su-phone .pcardin{padding:12px;display:flex;flex-direction:column;gap:10px}
.v21 .su-phone .pcardin>.hint{margin:0;font-size:12px}
.v21 .su-phone .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.v21 .su-phone .fgrid>.f{min-width:0}
.v21 .su-phone .fgrid .wide,.v21 .su-phone .fgrid .full{grid-column:1/-1}
.v21 .su-phone .in{width:100%;font-size:16px}
.v21 .su-phone .seg{display:flex;height:44px}.v21 .su-phone .seg button{flex:1;padding:0 8px}
.v21 .su-phone .prow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px;border:0;border-top:1px solid var(--edge);background:var(--surface);color:var(--ink);font:600 15px 'Public Sans',system-ui,sans-serif;text-align:left;cursor:pointer}
.v21 .su-phone .prow:first-child{border-top:0}
.v21 .su-phone .prow .ps{margin-left:auto;min-width:0;font-size:13px;font-weight:400;color:var(--secondary);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .su-phone .prow .chev{flex:none;width:14px;height:14px;color:var(--secondary);transition:transform .15s}
.v21 .su-phone .prow[aria-expanded=true] .chev{transform:rotate(90deg)}
.v21 .su-phone .prow.padd{color:var(--accent)}
.v21 .su-phone .fno{flex:none;width:24px;height:24px;border-radius:6px;background:var(--fc);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.v21 .su-phone .pft{display:flex;flex-direction:column;min-width:0}
.v21 .su-phone .pft small{font-size:12px;font-weight:400;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v21 .su-phone .pok{font-size:12px;font-weight:700;color:var(--calc);background:var(--calc-bg);border-radius:9px;padding:1px 7px}
.v21 .su-phone .pwarn{font-size:12px;font-weight:700;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-edge);border-radius:9px;padding:0 7px}
.v21 .su-phone .psbody{padding:6px 12px 14px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.v21 .su-phone .atis-row{flex-direction:column;align-items:stretch}
.v21 .su-phone .atis-row .btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;justify-content:center}
.v21 .su-phone .pdanger{height:46px;justify-content:center;color:#c62828;border-color:#c62828;background:var(--surface)}
.v21 .su-phone.ppg{padding:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:0;background:var(--shell)}
.v21 .su-phone.ppg .pbody{flex:1;padding:10px 12px 16px;display:flex;flex-direction:column;gap:8px}
.v21 .su-phone.ppg .missbar{margin:0;border-radius:0;border-inline:0;border-top:0;padding:10px 14px;font-size:14px}
.v21 .su-phone.ppg .missbar[hidden]{display:none}
.v21 .su-phone .phead .ppos{margin-left:auto;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v21.psetup.ppage .pane{padding:0}
.v21 .su-phone table.tol thead{display:none}
.v21 .su-phone table.tol,.v21 .su-phone table.tol :is(tbody,tr,td){display:block;width:100%}
.v21 .su-phone table.tol tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;padding:10px 0;border-top:1px solid var(--edge)}
.v21 .su-phone table.tol tr:first-child{border-top:0;padding-top:0}
.v21 .su-phone table.tol td{padding:0}
.v21 .su-phone table.tol td:last-child{grid-column:1/-1}
/* The lesson's tabs at the bottom on every screen, Setup first (Kanat, 25 Oct 2026; design boards 9–11 on
   https://claude.ai/artifact/Gatqm6MC45EypzrCjT8trY): a short frosted capsule that floats above the page, the open
   tab a blue pill. It replaces the Exercises / Setup switch, slides away while reading further down and comes back
   when scrolling back up. */
.v21 .lbar .views,.v21 .lbar .vsep{display:none}
.v21 .ptabs{position:fixed;left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;width:min(400px,calc(100vw - 24px));height:44px;box-sizing:border-box;padding:3px;border:0;border-radius:22px;background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 10px 30px rgba(16,24,40,.22),0 0 0 1px rgba(16,24,40,.09);transition:transform .25s ease,opacity .25s ease}
.v21 .ptab{height:auto;width:auto;flex-direction:row;gap:6px;border-radius:19px;font-size:13px;white-space:nowrap}
.v21 .ptab svg{width:17px;height:17px;flex:none}
.v21 .ptab:hover{color:var(--ink)}
.v21 .ptab[aria-current=page],.v21 .ptab[aria-current=page]:hover{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(29,95,191,.35)}
.v21.phone .ptabs{width:min(330px,calc(100vw - 16px));height:40px;border-radius:20px}
.v21.phone .ptab{font-size:11px;gap:4px;border-radius:17px}
.v21.phone .ptab svg{width:15px;height:15px}
html.tabs-hidden .v21 .ptabs{transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.v21 .ptabs,.v21 .rowtools .tray{transition:none}}
.v21.phone .app{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
@media (min-width:601px){.v21 .app{box-sizing:border-box;padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}}
@media (min-width:601px) and (max-width:860px){.v21 .detail{bottom:calc(66px + env(safe-area-inset-bottom,0px))}}

/* Kanat (25 Oct 2026): Move up, Move down and Columns fold into one small tools icon that slides them out;
   + Add exercise sits right below the last exercise (a row in the sheet, a card-sized button on phones). */
.v21 .sheet-foot .rowtools{display:inline-flex;align-items:center;gap:6px}
.v21 .sheet-foot .rowmove{margin-left:0}
.v21 .rowtools .tray{display:inline-flex;align-items:center;gap:6px;max-width:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(-12px);transition:max-width .28s ease,opacity .2s ease,transform .28s ease,visibility 0s linear .28s}
.v21 .rowtools .tray .btn{border-color:transparent;background:transparent}
.v21 .rowtools .tray .btn:not([disabled]):hover{background:var(--raised);border-color:var(--edge)}
.v21 .rowtools.open .tray{max-width:120px;opacity:1;visibility:visible;transform:none;transition:max-width .28s ease,opacity .2s ease .05s,transform .28s ease,visibility 0s}
.v21 .rowtools .ticon,.v21 .rowtools .tray .btn{width:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;flex:none}
.v21 .rowtools .ticon svg{transition:transform .28s ease}
.v21 .rowtools.open .ticon{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.v21 .rowtools.open .ticon svg{transform:rotate(90deg)}
.v21 tr.addrow td{padding:6px 8px;border-right:0;background:var(--surface)}
.v21 .addex{position:sticky;left:8px;height:30px;padding:0 14px;border:1px dashed var(--accent);border-radius:8px;background:transparent;color:var(--accent);font:600 13px 'Public Sans',system-ui,sans-serif;cursor:pointer}
.v21 .addex:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.v21 .padd{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin:4px 0 0;border:1.5px dashed var(--accent);border-radius:10px;background:transparent;color:var(--accent);font:700 15px 'Public Sans',system-ui,sans-serif;cursor:pointer}
/* Kanat (25 Oct 2026): no count or time text and no footer line; the tools float on their own at the bottom right,
   below the exercise editor, and slide out to the left. */
.v21 .sheet-foot{position:fixed;left:auto;right:16px;flex-direction:row-reverse;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:25;display:flex;flex-wrap:nowrap;gap:6px;height:44px;box-sizing:border-box;padding:0 9px;border:0;border-radius:22px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 10px 30px rgba(16,24,40,.22),0 0 0 1px rgba(16,24,40,.09);transition:transform .25s ease,opacity .25s ease}
.v21 .sheet-foot>span:not(.rowtools){display:none}
html.tabs-hidden .v21 .sheet-foot{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
.v21 .sheet-foot .rowtools{flex-direction:row-reverse}
.v21 .sheet-foot .rowtools .tray{transform:translateX(12px)}
.v21 .sheet-foot .rowtools.open .tray{transform:none}
/* Kanat (25 Oct 2026) kept seeing Retry shared save with no reason: the server's message now shows beside it. */
.cloud-retry-why{display:inline-block;max-width:280px;margin-right:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:12px;color:var(--danger,#b42318)}

/* Chart tools (Kanat, 25 Oct 2026): Select and a selected label's controls in one bar over the chart. Fixed at the
   top as a strip by default; dragged by the grip it floats anywhere on the chart; ‹ collapses it to a small pill. */
.v21 .fschart{position:relative}
.v21 .fstools{display:flex;align-items:center;gap:8px;flex:none;z-index:6;min-height:46px;box-sizing:border-box;padding:6px 8px 6px 4px;background:var(--surface);color:var(--ink)}
.v21 .fstools[data-dock=top]{border-bottom:1px solid var(--edge);box-shadow:0 2px 6px rgba(20,24,28,.06)}
.v21 .fstools[data-dock=float]{position:absolute;max-width:calc(100% - 16px);border:1px solid var(--edge-strong,#9ea7ae);border-radius:10px;box-shadow:0 10px 28px rgba(20,24,28,.18)}
.v21 .fstools.collapsed{position:absolute;left:8px;top:8px;min-height:0;padding:4px 6px 4px 4px;border:1px solid var(--edge-strong,#9ea7ae);border-radius:22px;box-shadow:0 6px 18px rgba(20,24,28,.16)}
.v21 .fstools.collapsed[data-dock=float]{left:auto;top:auto}
.v21 .fstools.dragging{cursor:grabbing;opacity:.96;outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.v21 .fsgrip{display:inline-grid;place-items:center;width:22px;height:32px;flex:none;border-radius:6px;color:var(--secondary);cursor:grab;touch-action:none}
.v21 .fsgrip:hover{background:var(--hover);color:var(--ink)}
.v21 .fsnum{display:none;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700}
.v21 .fstools.collapsed .fsnum{display:inline-grid}
/* The middle of the bar folds away: its column animates from its width to nothing. */
.v21 .fsx{flex:1;min-width:0;display:grid;grid-template-columns:1fr;transition:grid-template-columns .26s ease,opacity .2s ease}
.v21 .fstools.collapsed .fsx{flex:0 1 auto;grid-template-columns:0fr;opacity:0}
.v21 .fsxi{min-width:0;overflow:hidden;display:flex;align-items:center;gap:10px;white-space:nowrap}
.v21 .fshint{font-size:13px;color:var(--secondary);overflow:hidden;text-overflow:ellipsis}
.v21 .fsxi:has(.fsdock:not(:empty)) .fshint{display:none}
.v21 .fsdock:empty{display:none}
.v21 .fsdock{min-width:0;flex:1;overflow-x:auto}
.v21 .fspin{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:0 8px;height:24px;border-radius:12px;background:var(--raised);color:var(--secondary);font-size:12px;flex:none}
.v21 .fstools[data-dock=float] .fspin{display:none}
.v21 .fscol{flex:none;width:32px;height:32px;font-size:16px;font-weight:700}
/* The label editor's own row of controls, without its separate frame. */
.v21 .fstools #profile-format-toolbar{position:static;margin:0;padding:0;border:0;box-shadow:none;background:none;max-width:none;width:auto}
.v21 .fstools #profile-label-properties{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap;margin:0;padding:0;min-width:0}
.v21 .fstools .label-format-heading{display:flex!important;align-items:center;gap:6px;flex:none;margin:0!important;padding:0 10px 0 0!important;border:0!important;border-right:1px solid var(--edge)!important}
.v21 .fstools .label-format-heading strong{font-size:13px;white-space:nowrap}
.v21 .fstools .label-live-status,.v21 .fstools .event-property-hint{display:none!important}
.v21 .fstools .profile-property-rail{display:flex!important;align-items:center;gap:10px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;margin:0!important;padding:0!important;border:0!important;max-height:none!important}
.v21 .fstools .profile-property-rail>fieldset:not([hidden]){display:flex!important;align-items:center;gap:10px;margin:0!important;padding:0!important;border:0!important;min-width:0}
.v21 .fstools :is(.event-property-row,.event-property-grid,.label-wording,.label-property-grid){display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap!important;margin:0!important;grid-template-columns:none!important}
.v21 .fstools label.field{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px;margin:0!important;white-space:nowrap;font-size:12px;min-width:0}
.v21 .fstools label.field>span:first-child{color:var(--secondary);font-size:12px;font-weight:500}
.v21 .fstools label.field :is(input,select){height:32px;min-height:32px;box-sizing:border-box;font-size:13px}
.v21 .fstools label.field input[type=text]{width:170px}
.v21 .fstools label.field input[type=number]{width:70px}
.v21 .fstools label.field input[type=range]{width:80px}
.v21 .fstools #profile-label-properties>button{flex:none}
.v21 .fstools :is(.event-property-row,.event-property-grid,.label-wording,.label-property-grid)>:not(input):not([hidden]){display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:6px;width:auto!important;margin:0!important;white-space:nowrap}
.v21 .fstools .event-property-grid{display:contents!important}
.v21 .fstools input[type=number]{width:72px!important;min-width:72px}
.v21 .fstools input[type=color]{width:40px!important;min-width:40px;height:32px;padding:2px}
.v21 .fstools .switch-field>*{align-self:center}
.v21 .fstools .event-time-field input[type=text]{width:66px!important;min-width:66px}
.v21 .fstools .sc-combo-input,.v21 .fstools .event-property-grid input[type=text]:not(.event-time-field input){width:170px!important}
.v21 .fszone{position:absolute;left:8px;right:8px;height:46px;display:grid;place-items:center;border:2px dashed var(--edge-strong,#9ea7ae);border-radius:10px;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--secondary);font-size:12px;z-index:5;pointer-events:none;transition:border-color .15s,background .15s}
.v21 .fszone.on{border-color:var(--accent);background:var(--accent-soft,#e8f0fb);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.v21 .fsx,.v21 .fszone{transition:none}}
/* Label tools always on the bar (Kanat, 26 Oct 2026); the label editor's own tabs are not repeated. On narrow screens
   the tools take the first row and the chosen tool's fields a second row that scrolls sideways. */
.v21 .fstl{display:flex;align-items:center;gap:2px;flex:none;padding-left:6px;border-left:1px solid var(--edge)}
.v21 .fstool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:0;background:none;color:var(--ink);font-size:13px;white-space:nowrap}
.v21 .fstool[data-fs-tool=undo]{margin-left:6px}
.v21 .fstool:is([data-fs-tool=undo],[data-fs-tool=all],[data-fs-tool=reset]){width:32px;padding:0;justify-content:center}
.v21 .fstool:is([data-fs-tool=undo],[data-fs-tool=all],[data-fs-tool=reset]) .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v21 .fstool[aria-pressed=true]{background:var(--accent-soft,#e8f0fb);color:var(--accent);font-weight:600}
.v21 .fstool[aria-disabled=true]{color:var(--secondary);opacity:.55;cursor:not-allowed}
.v21 .fstools .label-format-heading{display:none!important}
.v21 .fstools.collapsed .fstl{display:none}
@media (max-width:1100px){.v21 .fstool:not([data-fs-tool=undo]):not([data-fs-tool=all]):not([data-fs-tool=reset]) .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.v21 .fstool{width:34px;padding:0;justify-content:center}}
@media (max-width:760px){.v21 .fstools:not(.collapsed){flex-wrap:wrap;row-gap:6px}.v21 .fstools:not(.collapsed) .fsx{flex:1 1 100%;order:10}.v21 .fstools .fspin{display:none}.v21 .fstl{border-left:0;padding-left:0;gap:0}.v21 .fstools .fscol{margin-left:auto}.v21 .fstools{gap:4px;padding-left:2px;padding-right:6px}.v21 .fstools .fstool{width:30px}.v21 .fstool[data-fs-tool=undo]{margin-left:2px}}
/* PDF preview inside the iPhone's safe area, so Close is never under the status bar or notch (Kanat, 26 Oct 2026). */
#modal:has(.pv-head){height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
@media (max-width:760px){#modal:has(.pv-head){width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}#modal .pv-head{position:sticky;top:0;z-index:2;background:var(--surface,#fff)}#modal .pv-close{min-height:44px;min-width:64px}}
/* Shorter windows give the chart more of the height (the list and editor scroll), so labels have room (26 Oct 2026). */
@media (min-width:901px) and (max-height:860px){.v21 .fsgrid{grid-template-rows:minmax(0,1.6fr) minmax(0,1fr)}}
/* The tools bar is the chart card's top row (no separate heading); Fit sits at its right end. */
.v21 .fstools .fsfit{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px}
.v21 .fstools.collapsed .fsfit{display:none}
/* Chart tools bar, every control (Kanat, 26 Oct 2026: "misalignment, overlapping text, no margin, inappropriate padding").
   One 32 px height; labels in one style 6 px before their field; 16 px between fields; steppers joined flush to their
   box; fields never shrink into each other (the row scrolls instead). */
.v21 .fstools{gap:6px}
.v21 .fstools .fsdock{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px 0}
.v21 .fstools .fsxi:has(.fsdock:not(:empty)) .fspin{display:none}
.v21 .fstools #profile-label-properties{gap:16px!important}
.v21 .fstools .profile-property-rail,.v21 .fstools .profile-property-rail>fieldset:not([hidden]),.v21 .fstools :is(.event-property-row,.label-wording,.label-property-grid){gap:16px!important}
.v21 .fstools :is(label.field,div.field){flex:none!important;gap:6px!important;height:32px;padding:0!important;margin:0!important;min-width:0}
.v21 .fstools .field>span:first-child{font-size:12px!important;font-weight:500!important;color:var(--secondary)!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;margin:0!important}
.v21 .fstools .field :is(input[type=text],input[type=number],input:not([type])){box-sizing:border-box;height:32px!important;min-height:32px!important;margin:0!important;padding:0 8px!important;border:1px solid var(--control-edge,#7f8991)!important;border-radius:6px!important;font-size:13px!important;line-height:30px!important;background:var(--surface)!important;color:var(--ink)!important;box-shadow:none!important}
.v21 .fstools .field input[type=number]{width:64px!important;min-width:64px!important;-moz-appearance:textfield;text-align:right}
.v21 .fstools .field input[type=number]::-webkit-inner-spin-button,.v21 .fstools .field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.v21 .fstools .field input[type=text]{width:150px!important}
.v21 .fstools .event-title-field input[type=text]{width:200px!important}
.v21 .fstools .event-title-field .sc-surface{display:flex!important;align-items:center;height:32px;margin:0!important;padding:0!important;border:0!important;background:none!important}
.v21 .fstools .event-title-field .sc-text-tools{display:none!important}
/* Minute steppers: the box with ▴/▾ stacked inside its height, joined on the right. */
.v21 .fstools .event-minute-spinner{display:inline-flex!important;align-items:stretch!important;height:32px;gap:0!important}
.v21 .fstools .event-minute-spinner input{width:64px!important;min-width:64px!important;border-radius:6px 0 0 6px!important;text-align:center}
.v21 .fstools .event-minute-spinner>span{display:flex!important;flex-direction:column!important;width:22px;height:32px;box-sizing:border-box;border:1px solid var(--control-edge,#7f8991);border-left:0;border-radius:0 6px 6px 0;overflow:hidden}
.v21 .fstools .event-minute-spinner>span button{flex:1 1 0;display:grid!important;place-items:center;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:var(--surface)!important;color:var(--ink)!important;font-size:9px!important;line-height:1!important}
.v21 .fstools .event-minute-spinner>span button+button{border-top:1px solid var(--edge)!important}
.v21 .fstools .event-minute-spinner>span button:hover{background:var(--hover)!important}
/* Number steppers: the box with − and + attached on the right. */
.v21 .fstools .label-stepper{display:inline-flex!important;align-items:stretch!important;height:32px;gap:0!important}
.v21 .fstools .label-stepper input{border-radius:6px 0 0 6px!important}
.v21 .fstools .label-stepper button{display:grid!important;place-items:center;width:28px!important;min-width:28px!important;height:32px!important;min-height:0!important;margin:0!important;padding:0!important;border:1px solid var(--control-edge,#7f8991)!important;border-left:0!important;border-radius:0!important;background:var(--surface)!important;color:var(--ink)!important;font-size:14px!important;line-height:1!important}
.v21 .fstools .label-stepper button:last-child{border-radius:0 6px 6px 0!important}
.v21 .fstools .label-stepper button:hover{background:var(--hover)!important}
/* Sliders, colours, choices, switches and the close button line up on the same 32 px. */
.v21 .fstools .range-row{display:inline-flex!important;align-items:center!important;gap:8px!important;height:32px}
.v21 .fstools input[type=range]{width:90px!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.v21 .fstools input[type=color]{box-sizing:border-box;width:32px!important;min-width:32px!important;height:32px!important;padding:3px!important;margin:0!important;border:1px solid var(--control-edge,#7f8991)!important;border-radius:6px!important;background:var(--surface)!important}
.v21 .fstools .profile-choice-trigger{box-sizing:border-box;height:32px!important;min-height:0!important;margin:0!important;padding:0 10px!important;border:1px solid var(--control-edge,#7f8991)!important;border-radius:6px!important;background:var(--surface)!important;color:var(--ink)!important;font-size:13px!important;white-space:nowrap}
.v21 .fstools :is(.event-toggle-control,.label-bold-value){display:inline-flex!important;align-items:center!important;gap:6px;height:32px;margin:0!important}
.v21 .fstools .label-bold-state{font-size:12px;color:var(--secondary)}
.v21 .fstools #profile-label-properties>button{box-sizing:border-box;flex:none;width:32px!important;height:32px!important;min-height:0!important;margin:0!important;padding:0!important;display:grid!important;place-items:center;border:1px solid var(--edge)!important;border-radius:6px!important;background:var(--surface)!important;font-size:14px!important}
.v21 .fstools .profile-property-rail>fieldset:not([hidden]),.v21 .fstools :is(.event-property-row,.label-wording,.label-property-grid){flex:none!important;width:auto!important;min-width:max-content!important}
.v21 .fstools :is(label.field,div.field){align-items:center!important}
.v21 .fstools .field>span:first-child{display:inline-flex!important;align-items:center!important;height:32px}
.v21 .fstools .field input[type=text]:not(.sc-combo-input),.v21 .fstools .event-property-grid .field input[type=text]:not(.event-time-field input){width:160px!important}
.v21 .fstools .event-property-grid .event-title-field input[type=text]{width:200px!important}
.v21 .fstools .field .event-minute-spinner input[type=text]{width:64px!important;min-width:64px!important}
.v21 .fstools input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.v21 .fstools input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.v21 .fstools input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
/* The fields row scrolls sideways; a fade shows there is more, and 2 px of room keeps borders from being clipped. */
.v21 .fstools .profile-property-rail{padding:2px!important;scrollbar-width:none}
.v21 .fstools .profile-property-rail::-webkit-scrollbar{display:none}
.v21 .fstools .profile-property-rail.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.v21 .fstools .profile-property-rail.more-left{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.v21 .fstools .profile-property-rail.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.v21 .fstools #profile-label-properties input[type=color]{box-sizing:border-box!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:3px!important;margin:0!important}
.v21 .fstools #profile-label-properties :is(input[type=text],input[type=number],.profile-choice-trigger){height:32px!important;min-height:32px!important;box-sizing:border-box!important}
/* Folded away means gone: not just transparent but hidden from clicks and screen readers once the fold ends. */
.v21 .fstools .fsx{visibility:visible;transition:grid-template-columns .26s ease,opacity .2s ease,visibility 0s linear 0s}
.v21 .fstools.collapsed .fsx{visibility:hidden;transition:grid-template-columns .26s ease,opacity .2s ease,visibility 0s linear .26s}
@media (prefers-reduced-motion:reduce){.v21 .fstools .fsx,.v21 .fstools.collapsed .fsx{transition:none}}
/* Phones: Fit shows only its icon so the tools, Fit and ‹ share one row above the fields row. */
@media (max-width:760px){.v21 .fstools .fsfit{width:30px;padding:0;justify-content:center}.v21 .fstools .fsfit .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.v21 .fstools .fsfit{margin-left:auto}.v21 .fstools .fscol{margin-left:0}}
.v21 .fstools .profile-property-rail,.v21 .fstools .profile-property-rail>fieldset:not([hidden]),.v21 .fstools :is(.event-property-row,.label-wording,.label-property-grid){align-items:center!important}
/* Reposition switched on: start altitude, airport and runway join the same 32 px row (26 Oct 2026 audit). */
.v21 .fstools .event-reposition-options:not([hidden]){display:flex!important;align-items:center!important;gap:16px!important;flex:none!important;margin:0!important;padding:0!important;grid-template-columns:none!important}
.v21 .fstools .sc-editable-choice,.v21 .fstools .sc-surface:not(.sc-direct-text){display:inline-flex!important;align-items:stretch!important;height:32px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-width:0}
.v21 .fstools .field .sc-combo-input{width:96px!important;min-width:96px!important;border-radius:6px 0 0 6px!important}
.v21 .fstools .sc-combo-open{box-sizing:border-box;display:grid!important;place-items:center;width:28px!important;min-width:28px!important;height:32px!important;min-height:0!important;margin:0!important;padding:0!important;border:1px solid var(--control-edge,#7f8991)!important;border-left:0!important;border-radius:0 6px 6px 0!important;background:var(--surface)!important;color:var(--ink)!important;font-size:12px!important}
.v21 .fstools .event-reposition-options .event-minute-spinner input[type=number]{width:72px!important;min-width:72px!important;border-radius:6px 0 0 6px!important}
.v21 .fstools :is(label.field,div.field){flex-direction:row!important;width:auto!important;max-width:none!important}
.v21 .fstools .sc-combo-open{position:static!important;inset:auto!important;transform:none!important}
/* Phones: a floating bar keeps the full width so its tools stay on one row; it still moves up and down the chart. */
@media (max-width:760px){.v21 .fstools[data-dock=float]:not(.collapsed){width:calc(100% - 16px)}}
@media (max-width:760px){.v21 .fstools[data-dock=float]:not(.collapsed){gap:2px;padding:4px}.v21 .fstools[data-dock=float]:not(.collapsed) :is(.fstool,.fsfit){width:29px}}
/* Weather and Reposition views: position buttons fit their names; dropdowns look like the other 34 px fields. */
.v21 .fschips .row5{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.v21 :is(.fsct,.fsrd) select.in{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:34px;padding:0 30px 0 10px;border:1px solid var(--control-edge,#7f8991);border-radius:6px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235e666b' stroke-width='1.6'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);font:inherit;font-size:13px}
/* Tints used by the expanded editor, with dark values (Kanat, 26 Oct 2026: light boxes showed in dark mode). */
.v21{--note-soft:var(--warn-bg);--warn-soft:var(--warn-bg);--warn-ink:var(--warn);--m:#b3261e;--m-soft:#fdecea;--m-ink:#8c1d18}
:root[data-theme="dark"] .v21{--m:#e5736b;--m-soft:#3a201e;--m-ink:#f4bcb7}
/* The full-screen chart's scrolling area fills its card; the phone layout's 332 px cap cut the chart's bottom off. */
#profile-fullscreen-dialog.v21-fs .fsb #fs-chart .profile-chart-scroll{max-height:none!important;height:100%!important;flex:1}
#profile-fullscreen-dialog.v21-fs .fsb #fs-chart #profile-panel,#profile-fullscreen-dialog.v21-fs .fsb #fs-chart .profile-body{display:flex!important;flex-direction:column;flex:1;min-height:0;height:100%}
/* Exercise drag handle ⋮⋮ (26 Oct 2026): sheet # cell, expanded list # cell, phone cards. Faint until hovered. */
.v21 .rgrip{display:inline-grid;place-items:center;width:14px;height:22px;margin-right:4px;vertical-align:middle;color:var(--secondary);opacity:.45;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:4px;flex:none}
.v21 :is(tr.ex,tr[data-v21-select],.pcard):hover .rgrip,.v21 .rgrip:hover{opacity:1}
.v21 .rgrip:hover{background:var(--hover)}
.v21 .grid td.idx{white-space:nowrap;padding-inline:4px 6px}
.v21 .fstable td.n{white-space:nowrap}
.v21 .pcard{grid-template-columns:18px 30px minmax(0,1fr) auto}
.v21 .pcard .rgrip{grid-row:1/3;width:18px;height:32px;margin:0;opacity:.6}
.v21 .pcard.sub{grid-template-columns:18px 30px minmax(0,1fr) auto}
.v21 .pcard.row-moving,.v21 .fstable tr.row-moving td{opacity:.35}
.v21-ghost.card{border:0;background:none;box-shadow:none}
.v21-ghost.card .pcard{box-shadow:0 10px 28px rgba(0,0,0,.24);border-color:var(--accent)}
.v21 .pcard .rgrip{grid-column:1}.v21 .pcard .pn{grid-column:2}.v21 .pcard :is(.pt,.pm){grid-column:3}.v21 .pcard .ptm{grid-column:4}
.v21 .fstable .n{width:72px}

/* Compact chart: the caption and Expand profile sit in their own row above the plot, so the line never runs
   through them (Kanat, 26 Oct 2026). */
.v21 .prof{grid-template-rows:auto minmax(0,1fr) auto}
.v21 .pcaprow{display:flex;align-items:center;gap:8px;min-width:0;min-height:22px;margin-bottom:2px}
.v21 .pcaprow .prof-cap{position:static;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}
.v21 .pcaprow .xexp{position:static;flex:none;height:22px;margin:0}
.v21 .prof svg{height:48px}

/* Light theme, option A "soft grey" (Kanat, 26 Oct 2026: "light mode is too bright"). Panels sit on soft grey
   instead of white, the detail panel a shade darker; fields and buttons stay near-white so they still read as
   controls. Controls get their own --surface, so every rule that paints them with var(--surface) turns near-white
   whatever its specificity, while hover, primary, selected and transparent states keep their own colours. */
:where(:root:not([data-theme="dark"])) .v21 .detail{--surface:#eef1f4}
:where(:root:not([data-theme="dark"])) .v21 :is(input,select,textarea,.btn,.sc-editable-choice){--surface:#fdfdfe}
/* The on-screen chart follows the soft card instead of a white patch; the plot area stays a shade lighter so the
   grid reads. Only the interactive chart (.profile-chart-scroll); PDFs keep white. */
:where(:root:not([data-theme="dark"])) .v21 .profile-chart-scroll svg.source-profile>rect:not(.profile-focus-band){fill:var(--surface)}
:where(:root:not([data-theme="dark"])) .v21 .profile-chart-scroll svg.source-profile>rect[stroke]:not(.profile-focus-band){fill:#fafbfc}
/* Kanat (27 Oct 2026): a cell being edited in place, like a spreadsheet cell. */
.v21 .grid td.editing{padding:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ui-focus);position:relative}
.v21 .grid td.editing .cell-in{display:block;width:100%;min-width:0;height:auto;min-height:28px;margin:0;padding:5px 8px;border:0;border-radius:0;box-shadow:none;outline:0;background:transparent;color:var(--ink);font:inherit;line-height:1.35;box-sizing:border-box;resize:none;overflow:hidden}
.v21 .grid td.editing .cell-in.n{text-align:right;appearance:textfield;-moz-appearance:textfield}
.v21 .in[aria-invalid=true]{border-color:#c62828;box-shadow:0 0 0 1px #c62828}
:root[data-theme="dark"] .v21 .in[aria-invalid=true]{border-color:#f28b82;box-shadow:0 0 0 1px #f28b82}
.v21 .grid td.editing .cell-in[aria-invalid=true]{box-shadow:inset 0 0 0 2px #c62828;background:#fdecea}
:root[data-theme="dark"] .v21 .grid td.editing .cell-in[aria-invalid=true]{box-shadow:inset 0 0 0 2px #f28b82;background:#3a1f1f}
.v21 .grid td.editing .cell-in::-webkit-outer-spin-button,.v21 .grid td.editing .cell-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.v21 .sheet tbody tr.ex td[data-c=min],.v21 .sheet tbody tr.ex td[data-c=title],.v21 .sheet tbody tr.ex td[data-c=ev],.v21 .sheet tbody tr.ex td[data-c=alt],.v21 .sheet tbody tr.ex td[data-c=shared],.v21 .sheet tbody tr.ex td[data-c=note]{cursor:cell}

/* Exercise needing attention (27 Oct 2026): ! after the title in the sheet, a note under the detail header. */
.v21 .rwarn{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border-radius:50%;background:var(--warn-bg);box-shadow:inset 0 0 0 1.5px var(--warn-edge);color:var(--ink);font-size:11px;font-weight:700;line-height:1;vertical-align:middle;cursor:help}
.v21 .dissue{display:grid;gap:2px;margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-edge);font-size:12.5px;line-height:1.35;color:var(--ink)}
.v21 .dissue b{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary)}
/* The missing-values badge sits in the card's top-right corner: keep the header text clear of it (27 Oct 2026). */
.v21 .fcard.has-miss{padding-right:36px}

/* Navigation bar: every tab on one line. Five tabs (with Template) get a wider pill; labels never wrap. */
.v21 .ptabs[data-tabs="5"]{width:min(520px,calc(100vw - 24px))}
.v21.phone .ptabs[data-tabs="5"]{width:min(390px,calc(100vw - 12px))}
.v21 .ptab{min-width:0;overflow:hidden;padding:0 4px;white-space:nowrap}
.v21 .ptab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v21.phone .ptabs[data-tabs="5"] .ptab{gap:3px;padding:0 2px;font-size:10.5px}
.v21.phone .ptabs[data-tabs="5"] .ptab svg{width:14px;height:14px}
@media (max-width:359px){.v21 .ptabs[data-tabs="5"] .ptab svg{display:none}}

/* Loading bar for actions that take longer than a normal click (package-v21.js). */
#busy-bar{position:fixed;inset:0 0 auto 0;height:3px;z-index:10000;overflow:hidden;background:color-mix(in srgb,#1d5fbf 20%,transparent);pointer-events:none}
#busy-bar::before{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:#1d5fbf;animation:busy-slide 1.1s ease-in-out infinite}
:root[data-theme="dark"] #busy-bar::before{background:#9abfff}
html.busy,html.busy *{cursor:progress}
@keyframes busy-slide{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){#busy-bar::before{animation:none;width:100%;opacity:.6}}

/* Package list grouped by year (Kanat, 28 Oct 2026): status filter, a header per year, folded issued years. */
.v21 .pk-filter{display:flex;width:fit-content;max-width:100%;box-sizing:border-box;flex-wrap:wrap;margin:10px 0 12px;border:1px solid var(--control-edge);border-radius:6px;overflow:hidden;background:var(--surface)}
.v21 .pk-filter button{height:32px;padding:0 12px;border:0;border-right:1px solid var(--edge);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.v21 .pk-filter button:last-child{border-right:0}
.v21 .pk-filter button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);font-weight:600}
.v21 .pk-years .pk-yhead th{padding:0;background:var(--raised);border-top:1px solid var(--edge);text-align:left;font-weight:400;letter-spacing:0;text-transform:none}
.v21 .pk-ytoggle{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:8px 12px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;box-sizing:border-box}
button.pk-ytoggle{cursor:pointer}
.v21 div.pk-ytoggle{padding-left:38px}
.v21 .pk-ytoggle b{font-size:16px}
.v21 .pk-ytoggle>span{color:var(--secondary)}
.v21 .pk-ytoggle .pk-need{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-edge)}
.v21 .pk-ytoggle .pk-show{margin-left:auto;color:var(--accent);font-weight:600}
@media (max-width:600px){
 .v21 .pk-filter{width:100%;overflow-x:auto;flex-wrap:nowrap}
 .v21 .pk-filter button{flex:none;height:40px}
 .v21 .pk-years thead{display:none}
 .v21 .pk-years,.v21 .pk-years tbody,.v21 .pk-years tr,.v21 .pk-years th{display:block;width:100%}
 .v21 .pk-years tr.ex{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px;border-top:1px solid var(--edge)}
 .v21 .pk-years tr.ex td{display:block;padding:0;border:0}
 .v21 .pk-years tr.ex td:nth-child(2),.v21 .pk-years tr.ex td:nth-child(4){display:none}
 .v21 .pk-years tr.ex td:nth-child(3){grid-column:1/-1}
 .v21 .pk-years tr.ex td.pk-last{grid-row:1;grid-column:2;font-size:12px;text-align:right}
 .v21 .pk-ytoggle{flex-wrap:wrap;gap:4px 10px}
}

/* Flight parameters popover from a Sheet flight card. */
.v21 .pop.finfo{width:min(560px,calc(100vw - 24px));max-height:min(70vh,640px);padding:0;display:flex;flex-direction:column;overflow:hidden}
.v21 .finfo .fi-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.v21 .finfo .fi-count{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-edge)}
.v21 .finfo .fi-body{overflow:auto;padding:4px 14px 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 20px}
.v21 .finfo h4{margin:10px 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.v21 .finfo dl{margin:0}
.v21 .finfo .fi-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px solid var(--edge);font-size:13px}
.v21 .finfo dt{color:var(--secondary)}
.v21 .finfo dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
.v21 .finfo .fi-miss dd{color:var(--warn)}
.v21 .finfo .fi-foot{display:flex;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--edge)}

/* Read-only (viewer, approved or issued): fields keep their text but no longer look editable. */
.v21 [inert] .in,.v21 [inert] textarea.in{background:transparent;border-color:var(--edge);box-shadow:none;color:var(--ink)}
.v21 [inert] .btn,.v21 [inert] .tsw,.v21 [inert] [data-v21-fcl-remove],.v21 [inert] .fadd{opacity:.55}
.v21 [inert] .tbtn{display:none}

/* Overlapping edits: the banner button and the resolve dialog (walkthrough, 28 Oct 2026). */
[data-theme] #banner .cloud-conflict-action{display:inline-flex;align-items:center;height:30px;margin:6px 16px;padding:0 12px;border:1px solid var(--warn-edge,#d9a441);border-radius:6px;background:var(--warn-bg,#fff7e8);color:var(--warn,#8a4a05);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
[data-theme] #cloud-dialog form[data-cloud-form=conflicts] fieldset{margin:0 0 12px;padding:10px 12px;border:1px solid var(--edge);border-radius:6px}
[data-theme] #cloud-dialog form[data-cloud-form=conflicts] legend{padding:0 4px;font-weight:600;font-size:14px}
[data-theme] #cloud-dialog form[data-cloud-form=conflicts] p{margin:4px 0 8px;color:var(--secondary);font-size:13px}
[data-theme] #cloud-dialog form[data-cloud-form=conflicts] label{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:14px}
[data-theme] #cloud-dialog form[data-cloud-form=conflicts] input{margin-top:3px;accent-color:var(--accent)}

/* Deleted packages: cards on a phone like the other rows; the package list never shows the in-package "Edit as next revision" banner button. */
@media (max-width:600px){
 .v21 .pk-years tr.pk-deleted{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px;border-top:1px solid var(--edge)}
 .v21 .pk-years tr.pk-deleted td{display:block;padding:0;border:0}
 .v21 .pk-years tr.pk-deleted td:nth-child(2){display:none}
 .v21 .pk-years tr.pk-deleted td:nth-child(3),.v21 .pk-years tr.pk-deleted td:nth-child(4){grid-column:1/-1;font-size:12px}
 .v21 .pk-years tr.pk-deleted td:nth-child(5){grid-row:1;grid-column:2}
}
.v21 .app:has(.journey) #cloud-workflow-alert [data-cloud-action=next-linked]{display:none}

/* Delete on a package row (Kanat, 28 Oct 2026): never-issued packages the person can edit. */
.v21 .pk-wrap .pk-lastrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v21 .pk-wrap .pk-del{flex:none;min-height:28px;padding:2px 10px;font-size:12px;color:#b42318;border-color:#e3b7b2;background:transparent}
.v21 .pk-wrap .pk-del:hover{background:#fdecea}
:root[data-theme="dark"] .v21 .pk-wrap .pk-del{color:#f28b82;border-color:#6b3430}
:root[data-theme="dark"] .v21 .pk-wrap .pk-del:hover{background:#3a1f1f}
@media (max-width:600px){.v21 .pk-wrap .pk-lastrow{flex-direction:column;align-items:flex-end;gap:6px}}

/* ATC instruction (Kanat, 30 Oct 2026): optional, a couple of lines, grows while typing. */

/* ATC lines (Kanat, 30 Oct 2026): unit · frequency · instruction per line, + ATC adds a line. Narrow panel: unit and
   frequency on one line, the instruction below; the Profile window: all three on one line. */
.v21 .atc-list{display:grid;gap:8px}
.v21 .atc-head{font-size:13px;font-weight:600}
.v21 .atc-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:start}
.v21 .atc-line .atc-freq{min-width:0}
.v21 .atc-line .atc-text{grid-column:1/-1;min-height:34px;height:auto;field-sizing:content;max-height:30vh;resize:vertical}
.v21 .atc-line+.atc-line{padding-top:8px;border-top:1px solid var(--edge)}
.v21 .atc-line .atc-unit{text-transform:uppercase}
.v21 .atc-line input:invalid{border-color:#c62828;box-shadow:0 0 0 1px #c62828}
:root[data-theme="dark"] .v21 .atc-line input:invalid{border-color:#f28b82;box-shadow:0 0 0 1px #f28b82}
.v21 .atc-line .atc-del{grid-column:3;grid-row:1}
.v21 .fsgridf .atc-line{grid-template-columns:96px 140px minmax(0,1fr) 34px}
.v21 .fsgridf .atc-line .atc-text{grid-column:3}
.v21 .fsgridf .atc-line+.atc-line{padding-top:0;border-top:0}
.v21 .fsgridf .atc-line .atc-del{grid-column:4}
.v21 .atc-add{justify-self:start;height:30px;padding:0 12px}
@media (max-width:600px){.v21 .fsgridf .atc-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.v21 .fsgridf .atc-line .atc-text{grid-column:1/-1}.v21 .fsgridf .atc-line .atc-del{grid-column:3}}
/* Kanat (31 Oct 2026): swipe-to-delete on touch screens. The row slides left; Delete sits in the space it leaves. */
.v21 .sheet tr.ex,.v21 .pcard{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.v21 .sheet tr.ex.swiping,.v21 .pcard.swiping{transition:none}
.v21-swipe-del{position:fixed;z-index:60;width:96px;min-height:0;min-width:0;padding:0;box-sizing:border-box;margin:0;border:0;border-radius:0;background:#b51f36;color:#fff;font:inherit;font-weight:600;cursor:pointer}
:root .v21-swipe-del,:root[data-theme] .v21-swipe-del{background:#b51f36;color:#fff;border:0}
.v21-swipe-del:focus-visible{outline:2px solid #fff;outline-offset:-4px}
/* Kanat (31 Oct 2026): messages sit above the bottom Setup/Sheet/Profile/PDF bar, not under it. */
body:has(.v21) #toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:40}
/* Kanat (31 Oct 2026): Version history, design A — a simple timeline. Title with the revision and its state; a two-way
   switch; one slim "new since you looked" line; one line per save; a save's changes grouped by exercise as plain text. */
.v21 #revision-history .history-title{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.v21 #revision-history .history-title h2{flex:none}
.v21 #revision-history .history-sub{font-size:12px;color:var(--secondary)}
.v21 #revision-history .history-switch{flex:none;display:flex;margin:12px 16px 0;border:1px solid var(--control-edge);border-radius:var(--r);overflow:hidden}
.v21 #revision-history .history-switch button{flex:1;min-height:34px;border:0;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.v21 #revision-history .history-switch button+button{border-left:1px solid var(--control-edge)}
.v21 #revision-history .history-switch button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);font-weight:600}
.v21 #revision-history .history-catchup{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 16px 0;padding:8px 10px;border:1px solid var(--warn-edge);border-radius:var(--r);background:var(--warn-bg);color:var(--warn);font-size:13px}
.v21 #revision-history .history-catchup p{margin:0}
.v21 #revision-history .history-link{display:block;text-align:left;border:0;background:none;padding:4px 0;min-height:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.v21 #revision-history .history-catchup .history-link{display:inline;color:inherit;font-weight:600}
.v21 #revision-history .history-when{display:flex;align-items:center;gap:8px}
.v21 #revision-history .history-when .history-dot{flex:none}
.v21 #revision-history .history-version>.history-muted{padding-left:18px}
.v21 #revision-history .history-version-detail{padding:4px 16px 12px 34px;font-size:13px}
.v21 #revision-history .history-exercises{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.v21 #revision-history .history-ex{display:flex;flex-direction:column;gap:2px;min-width:0}
.v21 #revision-history .history-ex-name{border:0;background:none;padding:0;min-height:0;text-align:left;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;overflow-wrap:anywhere}
.v21 #revision-history span.history-ex-name{color:var(--ink);cursor:default}
.v21 #revision-history .history-ex-lines{display:flex;flex-direction:column;gap:1px;color:var(--ink);overflow-wrap:anywhere;line-height:1.35}
.v21 #revision-history .history-ex-line b{font-weight:600;color:var(--secondary)}
/* Kanat (31 Oct 2026): CBTA competencies — chips in the sheet, nine toggles in the panel and in the sheet picker. */
.v21 .sheet td.c-cbta{cursor:pointer}
.v21 .sheet td.c-cbta .cbt{display:inline-block;margin:1px 3px 1px 0;padding:1px 5px;border-radius:4px;background:var(--selected);color:var(--selected-ink);font-size:11.5px;font-weight:700;line-height:18px}
.v21 .sheet tr.ex:hover td.c-cbta:empty::after,.v21 .sheet td.c-cbta.picking:empty::after{content:'+ Add';color:var(--secondary);font-size:12px}
.v21 .sheet td.c-cbta.picking{outline:2px solid var(--accent);outline-offset:-2px}
.v21 .cbtas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.v21 .cbto{display:flex;align-items:center;height:100%;gap:8px;min-height:36px;padding:6px 10px;border:1px solid var(--edge);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.v21 .cbto b{flex:none;min-width:34px;font-weight:700}
.v21 .cbto span{min-width:0;color:var(--secondary);line-height:1.25}
.v21 .cbto[aria-pressed=true]{background:var(--selected);border-color:var(--selected);color:var(--selected-ink)}
.v21 .cbto[aria-pressed=true] span{color:inherit;opacity:.85}
.v21 .cbtapop{position:fixed;z-index:45;width:min(340px,calc(100vw - 16px));padding:8px;border:1px solid var(--edge-strong);border-radius:10px;background:var(--surface);box-shadow:0 10px 30px -8px rgba(0,0,0,.35)}
.v21 .cbtapop .cbtas{grid-template-columns:1fr 1fr}
/* Kanat (31 Oct 2026): in the # column a sub-exercise's number starts 12 px to the right of its main exercise's number
   (numbers are left-aligned after the drag handle); nothing else in the row moves. */
.v21 .sheet .grid tbody tr.ex td.idx{text-align:left}
.v21 .sheet .grid tbody tr.ex.sub td.idx .msn{margin-left:12px}
/* Kanat (31 Oct 2026): Airbus automation (mockup A) — one row per mode, three buttons: Use, Not use, Optional. */
.v21 .amodes{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 10px;align-items:center}
.v21 .amode-k{font-weight:700}
.v21 .amode{display:flex;border:1px solid var(--control-edge);border-radius:var(--r);overflow:hidden}
.v21 .amode button{flex:1;min-height:36px;padding:0 6px;border:0;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.v21 .amode button+button{border-left:1px solid var(--control-edge)}
.v21 .amode button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);font-weight:600}