/* 7IT design language: the 7Maps world, a nautical chart (docs/redesign-plan.md). Loaded after ds.css.
   Chart paper, sea blue, magenta signal. Shared pieces of every /7maps/ page (static pages and the server pages
   of api/maps.ts): hero with a sea plate, facts, bar ledgers, tags, copy rows. Page-only styles stay in the page. */

.w-maps{
  /* AA on chart paper: the shared live green is darkened here (4.9:1 on #efe7cb). */
  --live:#086c47;
  --sea:#cfe5ee; --sea-2:#b7d6e3; --sea-line:#86b9cf;
  /* status colors for charts and tags (all at least 4.5:1 on chart paper) */
  --st-ok:#16202a; --st-auth:#7a5508; --st-pay:#2a6584; --st-down:#b8236e;
  /* the names older 7Maps scripts and pages use (cockpit tokens), mapped onto the chart */
  --cp-bg:var(--paper); --cp-bg2:var(--paper-2); --cp-panel:var(--paper); --cp-panel2:var(--paper-2);
  --cp-ink:var(--ink); --cp-mute:var(--mute); --cp-dim:var(--mute); --cp-line:var(--rule); --cp-line2:var(--ink);
  --cp-acc:var(--sig); --cp-acc2:var(--sig); --cp-glow:transparent;
  --cp-ok:var(--st-ok); --cp-warn:var(--st-auth); --cp-bad:var(--st-down); --cp-pay:var(--st-pay); --cp-off:var(--paper-2);
  --cp-mono:'JetBrains Mono',ui-monospace,monospace; --cp-sans:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --bg:var(--paper); --card:var(--paper); --line:var(--rule); --acc:var(--sig);
  --g:var(--st-ok); --y:var(--st-auth); --r:var(--st-down); --o:var(--st-ok); --a:var(--st-auth); --p:var(--st-pay); --d:var(--st-down);
  --ok:var(--st-ok); --no:var(--st-down); --warn:var(--st-auth); --off:var(--paper-2); --empty:var(--paper-2);
  --cat:var(--ink); --good:var(--st-ok); --bad:var(--st-down); --chip:transparent; --soft:var(--paper-2);
}
html:has(body.w-maps){background:var(--paper,#efe7cb)}
body.ds.w-maps{margin:0!important;padding:0!important;font-size:16px;line-height:1.55;overflow-x:hidden}
body.ds.w-maps::before{display:none!important}
.w-maps #ds-main{display:block!important;max-width:none!important;margin:0!important;padding:0!important;gap:0!important}
.w-maps #ds-main[hidden]{display:none!important}
:where(.w-maps #ds-main) p{margin:0}
.w-maps #ds-main *{box-sizing:border-box}

/* text and links */
.w-maps .mute{color:var(--mute)}
.w-maps #ds-main a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:1.5px;text-underline-offset:3px}
.w-maps #ds-main a:hover{text-decoration-thickness:2.5px}
.w-maps #ds-main a.ds-btn{color:var(--paper)!important;text-decoration:none}
.w-maps code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.9em;background:var(--paper-2);color:var(--ink);padding:1px 5px;border-radius:0;overflow-wrap:anywhere}
.w-maps pre{background:var(--code-bg)!important;color:var(--code-ink)!important;border:0!important;border-radius:0!important;padding:18px 20px;margin:0;overflow-x:auto;font:13.5px/1.65 'JetBrains Mono',ui-monospace,monospace}
.w-maps pre code{background:none;color:inherit;padding:0}
.w-maps h1,.w-maps h2,.w-maps h3{font-stretch:var(--wd);color:var(--ink)}
.w-maps #ds-main h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.w-maps .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* controls */
.w-maps #ds-main button{font:700 14px 'Archivo',sans-serif;background:var(--ink);color:var(--paper);border:0;border-radius:0;padding:11px 18px;cursor:pointer;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.w-maps #ds-main button:hover{transform:translateY(-1px)}
.w-maps #ds-main button:disabled{opacity:.55;cursor:default;transform:none}
.w-maps #ds-main .mp-ghost,.w-maps #ds-main button.mp-ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink);text-decoration:none}
.w-maps #ds-main input:not([type=range]):not([type=checkbox]):not([type=radio]),.w-maps #ds-main select,.w-maps #ds-main textarea{font:15px 'JetBrains Mono',monospace;border:1.5px solid var(--ink)!important;border-radius:0!important;padding:12px 14px;background:transparent!important;color:var(--ink)!important;min-width:0}
.w-maps #ds-main input:focus-visible,.w-maps #ds-main select:focus-visible,.w-maps #ds-main textarea:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.w-maps .ds-field input{border:0!important}
.w-maps .ds-field button{padding:0 22px}
.w-maps .mp-acts{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:24px}

/* hero: text on chart paper, a sea plate on the right */
.mp-hero{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);min-height:600px}
.mp-hero>.t{padding:72px 56px 56px 32px;display:flex;flex-direction:column;min-width:0}
.mp-hero h1,.mp-head h1{font-size:clamp(40px,4.6vw,66px);line-height:.98;font-weight:760;letter-spacing:-.03em;margin:0;text-wrap:balance}
.mp-hero .ds-lede,.mp-head .ds-lede{margin-top:24px;font-size:clamp(17px,1.4vw,19px)}
.mp-sea{position:relative;background-color:var(--sea);border-left:1.5px solid var(--ink);min-width:0;overflow:hidden;
  background-image:linear-gradient(color-mix(in srgb,var(--sea-line) 45%,transparent) .6px,transparent .6px),linear-gradient(90deg,color-mix(in srgb,var(--sea-line) 45%,transparent) .6px,transparent .6px);background-size:110px 107px}
.mp-sea svg{display:block;width:100%;height:100%}
.mp-sea .lbl{font:500 11px 'JetBrains Mono',monospace;fill:var(--ink)}
@media (max-width:900px){.mp-hero{grid-template-columns:1fr;min-height:0}.mp-hero>.t{padding:48px 16px 36px}.mp-sea{border-left:0;border-top:1.5px solid var(--ink);min-height:300px}}

/* page head without a plate (inner pages) */
.mp-head{max-width:1440px;margin:0 auto;padding:72px 32px 56px}
.mp-head h1{max-width:18ch}
@media (max-width:900px){.mp-head{padding:48px 16px 36px}}

/* facts: real numbers under a headline */
.mp-facts{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:18px 34px;font:500 12.5px 'JetBrains Mono',monospace;color:var(--mute)}
.mp-facts>div{min-width:0;max-width:200px}
@media (max-width:600px){.mp-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.mp-facts b{font-size:26px}}
.mp-facts b{display:block;font:760 30px/1.1 'Archivo',sans-serif;font-stretch:var(--wd);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mp-facts b.mp-live{color:var(--live)}
.mp-line{margin-top:18px;font:500 12.5px/1.6 'JetBrains Mono',monospace;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 18px}
.mp-live{color:var(--live)!important}

/* chapters: the right column */
.w-maps .ds-ch>div:last-child{min-width:0}
.w-maps .ds-ch>div:first-child p{max-width:34ch}
.mp-body{display:grid;gap:18px;min-width:0;font-size:16px;line-height:1.6}
.mp-body>p{max-width:72ch}
.mp-sub{font:600 12px 'JetBrains Mono',monospace;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 -6px!important}

/* ledgers: numbers, bars, steps */
.w-maps .ds-ledger td{font-size:15.5px;line-height:1.5}
.w-maps .ds-ledger td.n{font:760 24px/1.15 'Archivo',sans-serif;font-stretch:var(--wd);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;padding-right:28px}
.w-maps .ds-ledger td.n.mp-live{color:var(--live)}
.w-maps .ds-ledger td small,.w-maps .ds-ledger .m{display:block;font:500 12.5px/1.5 'JetBrains Mono',monospace;color:var(--mute);margin-top:2px}
.w-maps .ds-ledger td.m{display:table-cell}
.w-maps .ds-ledger th{font-weight:600}
.w-maps .ds-ledger td:first-child b{font-weight:700}
.w-maps .ds-ledger.mp-k td:first-child{width:28%;font-weight:700}
.w-maps .ds-ledger code{font-size:13.5px}
.mp-bars td{vertical-align:middle!important}
.mp-bars td:first-child{width:28%}
.mp-bars td:last-child{width:84px;text-align:right;font:500 13.5px 'JetBrains Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums;padding-right:0}
.mp-bar{display:block;height:20px;background:var(--sea);border:1px solid var(--ink);position:relative;overflow:hidden}
.mp-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transform-origin:left;transition:width .28s cubic-bezier(.23,1,.32,1)}
.mp-bar i.down{background:var(--st-down)}.mp-bar i.auth{background:var(--st-auth)}.mp-bar i.pay{background:var(--st-pay)}
.mp-stack{display:flex;height:22px;border:1px solid var(--ink);background:var(--sea);overflow:hidden}
.mp-stack i{display:block;height:100%;transition:flex-grow .28s cubic-bezier(.23,1,.32,1)}
.mp-keys{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--mute)}
.mp-keys span{display:inline-flex;align-items:center;gap:7px}
.mp-keys i{width:10px;height:10px;display:inline-block;border:1px solid var(--ink)}
.mp-keys b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:600px){.w-maps .ds-ledger td{font-size:15px;padding:12px 10px 12px 0}.w-maps .ds-ledger td.n{font-size:21px;padding-right:16px}.mp-bars td:first-child{width:34%}.mp-bars td:last-child{width:60px}.w-maps .ds-ledger.mp-k td:first-child{width:38%}}

/* tags: a status or a mark, square and quiet */
.mp-tag{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);border:1px solid currentColor;padding:4px 6px;white-space:nowrap;vertical-align:1px}
.mp-tag.ok{color:var(--ink)}.mp-tag.warn{color:var(--st-auth)}.mp-tag.bad{color:var(--st-down)}.mp-tag.pay{color:var(--st-pay)}.mp-tag.live{color:var(--live)}
.mp-tag .ds-dot{margin-right:0;width:7px;height:7px}

/* plates: figures with a caption */
.w-maps .ds-plate{min-width:0}
.w-maps .ds-plate>pre{border:0!important}
.w-maps .ds-cap{flex-wrap:wrap}

/* copy rows: a value and a button */
.mp-copy{display:flex;border:1.5px solid var(--ink);min-width:0;max-width:820px}
.mp-copy code{flex:1;background:transparent;padding:13px 14px;font-size:13.5px;min-width:0;overflow-wrap:anywhere;word-break:break-all}
.w-maps #ds-main .mp-copy button{flex:none;padding:0 18px}

/* the small print under a chapter */
.mp-note{font-size:14px;color:var(--mute);line-height:1.55}
.mp-note a{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.mp-bar i,.mp-stack i{transition:none}}

/* A count nobody can have reached yet shows the date it opens (Lior 2026-10-25: no bare zeros). */
.w-maps .is-date{font-size:.62em;color:var(--mute);letter-spacing:0}