/* Marsa desks · the Sedna pass.

   Two jobs. First, calm the shell: the rail, top bar, rows, cards, tabs and chips get thinner
   dividers, quieter selection, one accent and tabular numerals, in light and dark, without
   changing the palette, the type or the radii the desk already ships with. Second, style the
   new parts: the search, the notification centre, the slide-in panel, the identity block and
   context card, Assist, the certificate rows and the Papers screen.

   Every colour is a token. The few new tokens live in :root and the dark block below. */

:root{
  --rail-ink:#B4C5D6; --rail-ink-hi:var(--hi); --rail-ink-low:#6C8098; --rail-on:rgba(255,255,255,.075);
  --rail-hover:rgba(255,255,255,.045); --rail-note-bg:rgba(199,154,68,.07); --rail-note-line:rgba(199,154,68,.2); --rail-note-ink:#B99C66;
  --sx-water:var(--info-bg); --sx-water-line:var(--info-line); --sx-grid:var(--line); --sx-land:var(--surface-3);
  --sx-panel:392px; --sx-ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{
  --rail-ink:#9FB2C4; --rail-on:rgba(255,255,255,.06); --rail-hover:rgba(255,255,255,.035);
  --sx-water:var(--info-bg); --sx-land:var(--surface-2);
}
.num,.mono{font-variant-numeric:tabular-nums lining-nums}

/* ============ calm: the rail ============ */
.rail{border-right-color:var(--navy-line)}
.nav-i,.nav-door{color:var(--rail-ink);height:38px;font-weight:450;border-radius:7px}
.nav-i:hover,.nav-door:hover{background:var(--rail-hover)}
.nav-i.on{background:var(--rail-on);box-shadow:inset 2px 0 0 var(--teal-br)}
.nav-i .ct{background:transparent;border:1px solid var(--navy-line);color:var(--rail-ink)}
.nav-gap{background:var(--navy-line);margin:8px 10px}
.rail-demo{background:var(--rail-note-bg);border-color:var(--rail-note-line);color:var(--rail-note-ink);font-size:var(--fs-1)}
.rail-top,.rail-bot{border-color:var(--navy-line)}
.rail-user .ur{color:var(--rail-ink-low)}

/* ============ calm: top bar, search pill, bell ============ */
.top{border-bottom-color:var(--line);gap:10px}
.top .crumb h1{font-weight:600;letter-spacing:-.015em}
.srch{display:flex;min-width:240px;border-color:var(--line);background:var(--surface-2);border-radius:8px}
.srch:hover{background:var(--surface)}
.srch kbd{border-color:var(--line);background:var(--surface)}
.sx-bell{position:relative}
.sx-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--teal);color:#fff;font:600 10.5px/16px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .sx-badge{color:var(--navy)}
.ico-b{border-radius:8px}

/* ============ calm: cards, rows, chips, tabs ============ */
.card{border-radius:10px;box-shadow:none}
.card-hd{padding:12px 16px}
.card-hd h3{font-size:var(--fs-2);font-weight:600;color:var(--ink)}
.flr,.hx,.row{border-bottom-color:var(--line)}
.flr:hover,.hx:hover,.row.clk:hover{background:var(--surface-2)}
.flm b,.flid .fli,.hx .hi,.ans .aim{font-variant-numeric:tabular-nums lining-nums}
.chip{height:21px;font-weight:500;border-radius:5px;padding:0 8px}
.chip .dot{width:5px;height:5px}
.pill{border-radius:5px;height:23px}
.tabs{border-radius:8px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:0;border-radius:0;gap:4px}
.tab{height:34px;border-radius:0;padding:0 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{background:none;box-shadow:none;border-bottom-color:var(--teal);color:var(--ink)}
.page-hd h2{letter-spacing:-.025em}
.btn{border-radius:7px}
.note{border-radius:8px}

/* the folded rows on a result: this chevron had no size when it sat outside the answer text */
summary svg.acv{width:16px;height:16px;flex:none;color:var(--ink-3);transition:transform 180ms var(--ease)}
details[open]>summary svg.acv{transform:rotate(90deg)}

/* the folded "public identity" row sits outside the answer text, so it needs its own row style */
.aqf>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:34px;cursor:pointer;font-size:var(--fs-2);font-weight:600;color:var(--ink-2)}
.aqf>summary::-webkit-details-marker{display:none}
.aqf>summary::marker{content:''}

/* ============ shared small parts ============ */
.sx-eyebrow{font:600 var(--fs-1)/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sx-dim{color:var(--ink-3)}
.sx-gap{margin:18px 0 8px}
.sx-empty{color:var(--ink-3);font-size:var(--fs-2);line-height:1.55;padding:18px 4px}
.sx-narrow{display:none}
.sx-local{font-size:var(--fs-1);color:var(--ink-3);margin-top:8px;line-height:1.45}
.sx-fresh{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font-size:var(--fs-1);font-weight:500;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-fresh svg{width:13px;height:13px}
.sx-fresh.ok{color:var(--teal-2);border-color:var(--teal-line);background:var(--teal-bg)}
.sx-fresh.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.sx-fresh.hold{color:var(--ink-2)}
:root[data-theme="dark"] .sx-fresh.ok{color:var(--teal-br)}

/* ============ identity block ============ */
.sx-id{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:2px 2px 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.sx-id-name{font-size:var(--fs-6);font-weight:650;letter-spacing:-.03em;line-height:1.15}
.sx-id-line{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:baseline;margin-top:6px;font-size:var(--fs-2);color:var(--ink-2)}
.sx-imo{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}
.sx-flag{padding:1px 8px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface-2);font-size:var(--fs-1);color:var(--ink-2)}
.sx-also{font-size:var(--fs-1);color:var(--ink-3)}
.sx-id-status{margin-top:10px}
.sx-tools{display:flex;gap:6px;flex-wrap:wrap}
.sx-tools .btn[aria-pressed="true"]{border-color:var(--teal);color:var(--teal-2);background:var(--teal-bg)}
:root[data-theme="dark"] .sx-tools .btn[aria-pressed="true"]{color:var(--teal-br)}

/* ============ the result page: answer beside its context ============ */
.sx-file{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sx-side{position:sticky;top:calc(var(--top) + 16px);display:flex;flex-direction:column;gap:12px}
.sx-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.sx-card .sx-id{padding:0 0 12px;margin-bottom:12px}
.sx-card .sx-id-name{font-size:var(--fs-4)}
.sx-kv{margin:0}
.sx-kvr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-2)}
.sx-kvr:last-child{border-bottom:0}
.sx-kvr dt{color:var(--ink-3);font-size:var(--fs-1)}
.sx-kvr dd{margin:0;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sx-sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sx-sub-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sx-prov{font-size:var(--fs-1);color:var(--ink-3);line-height:1.5;margin-top:6px}
.sx-warnline{margin-top:8px;font-size:var(--fs-1);color:var(--warn);line-height:1.45}
.sx-nomap{display:flex;gap:10px;font-size:var(--fs-2);line-height:1.5;color:var(--ink-2);padding:10px;border:1px dashed var(--line-2);border-radius:8px;background:var(--surface-2)}
.sx-nomap svg{width:18px;height:18px;flex:none;color:var(--ink-3);margin-top:2px}
.sx-nomap a{color:var(--teal-2);text-decoration:underline;text-underline-offset:2px}
:root[data-theme="dark"] .sx-nomap a{color:var(--teal-br)}
.sx-map{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sx-land);aspect-ratio:360/190}
.sx-map svg{width:100%;height:100%;display:block}
.sx-map .bg{fill:var(--sx-land)} .sx-map .gr line{stroke:var(--sx-grid);stroke-width:.6}
.sx-map .w{fill:var(--sx-water);stroke:var(--sx-water-line);stroke-width:.8;fill-rule:evenodd}
.sx-map .pt{fill:var(--ink-3)} .sx-map .lb{font:500 8.5px var(--sans);fill:var(--ink-2)}
.sx-map .me .halo{fill:var(--teal);opacity:.18} .sx-map .me .dot{fill:var(--teal);stroke:var(--surface);stroke-width:1.6}
.sx-map .sc line{stroke:var(--ink-2);stroke-width:1.2} .sx-map .sc text{font:500 8px var(--mono);fill:var(--ink-2)}
.sx-map-wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:var(--fs-1)}
.sx-map-key{position:absolute;left:8px;top:7px;display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-2);background:color-mix(in srgb,var(--surface) 86%,transparent);padding:2px 7px;border-radius:5px}
.sx-map-key i{width:10px;height:10px;border-radius:2px;background:var(--sx-water);border:1px solid var(--sx-water-line)}
.sx-quick .sx-chips{margin-top:10px}

/* ============ chips and Assist ============ */
.sx-chips{display:flex;flex-wrap:wrap;gap:6px}
.sx-chip{padding:6px 11px;border-radius:15px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:var(--fs-2);line-height:1.3;text-align:left;transition:border-color 140ms,background 140ms,transform 120ms var(--sx-ease)}
.sx-chip:hover{border-color:var(--teal-br);background:var(--teal-bg)}
.sx-chip:active{transform:scale(.97)}
.sx-assist{display:flex;flex-direction:column;gap:12px}
.sx-assist-lede{display:flex;gap:9px;font-size:var(--fs-1);color:var(--ink-3);line-height:1.5}
.sx-assist-lede svg{width:15px;height:15px;flex:none;color:var(--teal);margin-top:1px}
.sx-q{align-self:flex-end;max-width:88%;padding:8px 12px;border-radius:12px 12px 3px 12px;background:var(--teal);color:#fff;font-size:var(--fs-2)}
:root[data-theme="dark"] .sx-q{color:var(--navy)}
.sx-a{border:1px solid var(--line);border-radius:3px 12px 12px 12px;background:var(--surface);padding:12px 14px;font-size:var(--fs-2);line-height:1.55;color:var(--ink)}
.sx-a p+p,.sx-a p+ul,.sx-a ul+p{margin-top:8px}
.sx-a ul{padding-left:18px} .sx-a li{margin-top:4px}
.sx-cites{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.sx-cite{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;padding:3px 8px;border-radius:5px;background:var(--surface-3);border:1px solid var(--line-2);font-size:var(--fs-1);color:var(--ink-2);line-height:1.4}
.sx-cite svg{width:12px;height:12px;flex:none;margin-top:2px;opacity:.7}
.sx-draft{margin-top:10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);padding:10px}
.sx-draft-to{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:var(--fs-1);color:var(--ink-3)}
.sx-to{flex:1;height:30px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);padding:0 8px;font-size:var(--fs-2)}
.sx-draft-ta{width:100%;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);padding:10px;font:var(--fs-1)/1.55 var(--mono);resize:vertical;min-height:200px}
.sx-draft-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sx-askf,.sx-comp-row{display:flex;gap:6px;align-items:flex-end}
.sx-askin,.sx-ta{flex:1;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:8px 10px;font-size:var(--fs-2);resize:none;min-height:38px}
.sx-askin:focus,.sx-ta:focus,.sx-to:focus{outline:none;border-color:var(--teal-br);box-shadow:0 0 0 3px var(--teal-bg)}
.sx-send{width:38px;height:38px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--teal);color:#fff}
:root[data-theme="dark"] .sx-send{color:var(--navy)}
.sx-send svg{width:16px;height:16px}

/* ============ activity ============ */
.sx-feed{list-style:none;display:flex;flex-direction:column;gap:12px}
.sx-day{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:var(--fs-1)}
.sx-day::before,.sx-day::after{content:'';flex:1;height:1px;background:var(--line)}
.sx-ev{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:var(--fs-2);line-height:1.5;color:var(--ink-2)}
.sx-ev b{color:var(--ink);font-weight:600}
.sx-ev-ic{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--ink-2)}
.sx-ev-ic svg{width:12px;height:12px}
.sx-ev-ic.ok{background:var(--teal-bg);color:var(--teal-2)} .sx-ev-ic.warn{background:var(--warn-bg);color:var(--warn)} .sx-ev-ic.bad{background:var(--bad-bg);color:var(--bad)}
.sx-ev-sub{display:block;font-size:var(--fs-1);color:var(--ink-3);margin-top:2px}
.sx-t{font-size:var(--fs-1);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.sx-lists{list-style:none;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.sx-lists li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 9px;border-bottom:1px solid var(--line);font-size:var(--fs-1)}
.sx-lists li:last-child{border-bottom:0} .sx-lists li>span:first-child{flex:1;color:var(--ink)}
.sx-ev-c{display:block}
.sx-bub{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.sx-bub-who{font-weight:600;color:var(--ink);font-size:var(--fs-2)}
.sx-bub-tx{margin-top:2px;color:var(--ink);overflow-wrap:anywhere}
.sx-bub .sx-t{display:block;text-align:right;margin-top:4px}
.sx-at{color:var(--teal-2);font-weight:600;background:var(--teal-bg);border-radius:4px;padding:0 3px}
:root[data-theme="dark"] .sx-at{color:var(--teal-br)}
.sx-comp{position:relative;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.sx-sugg{position:absolute;left:0;right:46px;bottom:calc(100% - 4px);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--sh2);overflow:hidden;z-index:3}
.sx-sugg button{display:flex;gap:8px;justify-content:space-between;width:100%;padding:8px 11px;font-size:var(--fs-2);text-align:left}
.sx-sugg button:hover{background:var(--teal-bg)} .sx-sugg span{color:var(--ink-3);font-size:var(--fs-1)}

/* ============ the slide-in panel ============ */
.sxp{position:fixed;top:var(--top);right:0;bottom:0;width:var(--sx-panel);max-width:100%;background:var(--surface-2);border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 200ms var(--sx-ease)}
.sxp.on{transform:none}
.sxp-hd{display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 14px;border-bottom:1px solid var(--line);height:46px;flex:none}
.sxp-tabs,.sx-utabs{display:flex;gap:2px}
.sxp-tabs button,.sx-utabs button{height:46px;padding:0 10px;font-size:var(--fs-2);font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.sxp-tabs button:hover,.sx-utabs button:hover{color:var(--ink)}
.sxp-tabs button.on,.sx-utabs button.on{color:var(--ink);border-bottom-color:var(--teal)}
.sxp-tabs .n,.sx-utabs .n{font-variant-numeric:tabular-nums;font-size:var(--fs-1);color:var(--ink-3);margin-left:3px}
.sxp-bd{flex:1;overflow-y:auto;padding:14px}
.sxp-ft{flex:none;padding:0 14px 14px}
.sxp-ft .sx-comp{margin-top:0}
@media (min-width:1280px){ html.sx-pane .page{padding-right:calc(var(--sx-panel) + 22px)} }
@media (max-width:1279px){ .sxp{box-shadow:var(--sh3)} }

/* ============ fleet vessel: tabs and two columns ============ */
.sx-ship .sx-id{border-bottom:0;margin-bottom:0;padding-bottom:6px}
.sx-utabs{border-bottom:1px solid var(--line);margin:0 0 16px}
.sx-utabs button{height:40px}
.sx-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.sx-two-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sx-two-side{position:sticky;top:0}

/* ============ certificate rows ============ */
.sx-certs{list-style:none}
.sx-cert{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 4px;border-bottom:1px solid var(--line)}
.sx-cert:last-child{border-bottom:0}
.sx-cert-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line-2)}
.sx-cert-ic svg{width:16px;height:16px}
.sx-cert-ic.ok{background:var(--teal-bg);color:var(--teal-2);border-color:var(--teal-line)} .sx-cert-ic.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.sx-cert-ic.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)} .sx-cert-ic.hold{background:var(--brass-bg);color:var(--brass);border-color:var(--brass-line)}
.sx-cert-bd{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-cert-n{font-size:var(--fs-3);font-weight:550;letter-spacing:-.01em;color:var(--ink)}
.sx-cert-by{font-size:var(--fs-1);color:var(--ink-3)}
.sx-cert-w{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2);font-weight:550}
.sx-cert-w svg{width:14px;height:14px;flex:none}
.sx-cert-w.ok{color:var(--teal-2)} .sx-cert-w.warn{color:var(--warn)} .sx-cert-w.bad{color:var(--bad)} .sx-cert-w.hold{color:var(--brass)}
:root[data-theme="dark"] .sx-cert-w.ok{color:var(--teal-br)}
.sx-cert-note{font-size:var(--fs-1);color:var(--ink-3);line-height:1.5;max-width:70ch}
.sx-cert-d{font-size:var(--fs-2);color:var(--ink-2);white-space:nowrap;padding-top:2px}
.sx-open{cursor:pointer;transition:background 120ms} .sx-open:hover{background:var(--surface-2)}
.sx-open.sx-cert{padding:12px 16px}
.sx-plain{list-style:none;font-size:var(--fs-2)} .sx-plain li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.sx-papers-lede{font-size:var(--fs-2);color:var(--ink-2);line-height:1.55;margin-bottom:8px}
.sx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:16px}
.sx-stats>div{padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px} .sx-stats>div:last-child{border-right:0}
.sx-stats b{font-size:var(--fs-7);font-weight:500;letter-spacing:-.03em;font-family:var(--mono)} .sx-stats span{font-size:var(--fs-1);color:var(--ink-3)}
.sx-pgroup{margin-bottom:14px}

/* ============ search ============ */
.sxs{position:fixed;inset:0;z-index:130;display:flex;justify-content:center;align-items:flex-start;padding:10vh 20px 20px;opacity:0;transition:opacity 140ms linear}
.sxs.on{opacity:1}
.sxs-scrim{position:absolute;inset:0;background:rgba(11,21,32,.38)}
.sxs-box{position:relative;width:min(720px,100%);max-height:78vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh3);overflow:hidden}
.sxs-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.sxs-in>svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.sxs-in input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--fs-4);letter-spacing:-.01em}
.sxs-star,.sxs-advb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:7px;color:var(--ink-3);font-size:var(--fs-1);font-weight:500}
.sxs-star svg,.sxs-advb svg{width:15px;height:15px}
.sxs-star:hover,.sxs-advb:hover,.sxs-advb[aria-expanded="true"]{background:var(--surface-3);color:var(--ink)}
.sxs-star.on{color:var(--brass-br)} .sxs-star.on svg{fill:currentColor}
.sxs-tokens{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px}
.sxs-tokens:not(:empty){padding:8px 14px;border-bottom:1px solid var(--line)}
.sxs-tok{display:inline-flex;align-items:center;gap:0;border-radius:6px;overflow:hidden;font-size:var(--fs-1);border:1px solid var(--line-2)}
.sxs-tok b{padding:3px 7px;background:var(--surface-3);color:var(--ink-2);font-weight:600}
.sxs-tok>span{padding:3px 8px;background:var(--teal);color:#fff;font-weight:500}
:root[data-theme="dark"] .sxs-tok>span{color:var(--navy)}
.sxs-tok.term>span{background:var(--surface-3);color:var(--ink)}
.sxs-tok button{padding:0 6px;height:100%;background:var(--teal);color:#fff;display:grid;place-items:center;align-self:stretch}
:root[data-theme="dark"] .sxs-tok button{color:var(--navy)}
.sxs-tok button svg{width:11px;height:11px}
.sxs-adv{padding:14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.sxs-adv-hd{font-size:var(--fs-2);font-weight:600;margin-bottom:10px}
.sxs-adv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sxs-f{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--ink-3)}
.sxs-f input,.sxs-f select{height:32px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);padding:0 8px;font-size:var(--fs-2);color:var(--ink);min-width:0}
.sxs-adv-hint{margin-top:10px;font-size:var(--fs-1);color:var(--ink-3);line-height:1.5}
.sxs-adv-acts{display:flex;gap:6px;margin-top:10px}
.sxs-list{overflow-y:auto;padding:6px;flex:1;min-height:120px}
.sxs-g{padding:10px 10px 5px;font:600 var(--fs-1)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sxs-g .num{font-weight:500;margin-left:4px}
.sxs-i{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:8px;text-align:left}
.sxs-i:hover,.sxs-i.sel{background:var(--teal-bg)}
.sxs-i .ic{width:26px;height:26px;flex:none;border-radius:7px;background:var(--surface-3);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2)}
.sxs-i .ic svg{width:13px;height:13px}
.sxs-i.sel .ic{background:var(--teal);border-color:var(--teal);color:#fff}
.sxs-i .bd{min-width:0;flex:1;display:flex;flex-direction:column}
.sxs-i .t{font-size:var(--fs-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxs-i .s{font-size:var(--fs-1);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxs-empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:var(--fs-2)}
.sxs-empty svg{width:24px;height:24px;margin:0 auto 8px;opacity:.4}
.sxs-ft{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);background:var(--surface-2);font-size:var(--fs-1);color:var(--ink-3)}
.sxs-ft kbd{font-family:var(--mono);font-size:var(--fs-1);padding:1px 5px;border-radius:4px;background:var(--surface-3);border:1px solid var(--line-2)}
.sxs-ft-r{margin-left:auto}

/* ============ notification centre ============ */
.sxn{position:fixed;top:calc(var(--top) - 6px);right:62px;width:min(380px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;z-index:70;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--sh3);opacity:0;transform:translateY(-4px);transition:opacity 140ms linear,transform 140ms var(--sx-ease)}
.sxn.on{opacity:1;transform:none}
.sxn-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-2)}
.sxn-hd button{font-size:var(--fs-1);color:var(--teal-2);font-weight:500} :root[data-theme="dark"] .sxn-hd button{color:var(--teal-br)}
.sxn-empty{padding:22px 16px;color:var(--ink-3);font-size:var(--fs-2);line-height:1.55}
.sxn-list{list-style:none}
.sxn-i{display:flex;gap:10px;align-items:flex-start;width:100%;padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.sxn-i:hover{background:var(--surface-2)} .sxn-i.read{opacity:.6}
.sxn-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--ink-4)}
.sxn-dot.bad{background:var(--bad)} .sxn-dot.warn{background:var(--warn)} .sxn-dot.hold{background:var(--brass)} .sxn-dot.ok{background:var(--teal)}
.sxn-bd{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sxn-t{font-size:var(--fs-2);font-weight:550;color:var(--ink)} .sxn-x{font-size:var(--fs-1);color:var(--ink-3);line-height:1.45}
.sxn-new{font-size:var(--fs-1);color:var(--teal-2);font-weight:600} :root[data-theme="dark"] .sxn-new{color:var(--teal-br)}

/* ============ phone: one list, one item, one sheet from the bottom ============ */
@media (max-width:1100px){
  .sx-file{grid-template-columns:minmax(0,1fr)}
  .sx-side{display:none}
  .sx-narrow{display:inline-flex}
  .sx-two{grid-template-columns:minmax(0,1fr)} .sx-two-side{position:static}
}
@media (max-width:900px){
  .srch{display:none}
  .sxn{right:8px}
  .sxp{top:auto;height:82vh;width:100%;border-left:0;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;transform:translateY(100%)}
  .sxp.on{transform:none}
  .sxs{padding:0}
  .sxs-box{width:100%;max-height:100vh;height:100vh;border-radius:0}
  .sxs-adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxs-advb span{display:none}
  .sx-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .sx-stats>div:nth-child(2){border-right:0} .sx-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sx-cert,li.sx-open{grid-template-columns:34px minmax(0,1fr)} .sx-cert-d{grid-column:2}
  .sx-plain li{grid-template-columns:minmax(0,1fr) auto} .sx-plain li .sx-dim:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){ .sxp,.sxs,.sxn{transition:none} }
@media print{ .sxp,.sxs,.sxn,.sx-bell,.sx-side{display:none !important} }
.sx-ship .sx-id-name{display:none}

/* with the panel open the answer keeps the room, and the vessel context moves into the panel's own tab */
html.sx-pane .sx-file{grid-template-columns:minmax(0,1fr)}
html.sx-pane .sx-side{display:none}
html.sx-pane .sxp .sxp-tabs .sx-narrow{display:inline-flex}
.sxp-tabs button,.sx-utabs button{display:inline-flex;align-items:center;white-space:nowrap}
.sxp-tabs .sx-narrow{display:none}
@media (max-width:1100px){ .sxp-tabs .sx-narrow{display:inline-flex} }
html.sx-pane .sxp .sxp-tabs .sx-narrow{display:inline-flex}