/* Straightline: Utopia's original layout. A menu of pages down the side, one page at a time, one column.
   Calm and readable for a new player, with a little of the medieval: a framed page with ornamented corners,
   ruled headings in a book face, diamond marks. Themes (html[data-line-theme], set by looklab.js) are sets of
   the --l-* colours below; fonts are --l-head-font, --l-body-font and --l-size. Every rule is nested under
   :root[data-view="line"]; the pages are War Room panels in .room-scope, given this look through room.css's
   variables (as the Map does). */

:root[data-view="line"] {
  /* Vellum: the default by day. */
  --l-bg: #ede6d6; --l-page: #fffdf8; --l-ink: #26241f; --l-muted: #6c675d; --l-line: #ddd5c4; --l-rule: #ebe5d8;
  --l-nav: #23324a; --l-nav-ink: #e9e4d8; --l-nav-muted: #9fadc2; --l-gold: #b8892e; --l-blue: #2f5d8a; --l-blue-ink: #ffffff;
  --l-good: #2f6b3a; --l-bad: #a33a25; --l-self: #f6ecd3; --l-frame: #b9a57c; --l-lime: #437e0b;
  --l-head-font: Rosarivo, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --l-body-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --l-size: 15px;
  /* Shell tokens (sign-in, message line). */
  --bg: var(--l-bg); --panel: var(--l-page); --field: #ffffff; --ink: var(--l-ink); --muted: var(--l-muted); --line: var(--l-line);
  --accent: var(--l-blue); --on-accent: var(--l-blue-ink); --bad: var(--l-bad); --good: var(--l-good); --focus: var(--l-gold); --radius: 6px;
  --font: var(--l-size)/1.5 var(--l-body-font);
  color-scheme: light;
}
/* Night Vigil: the default in dark mode ("Follow system"), and a theme of its own. */
@media (prefers-color-scheme: dark) {
  :root[data-view="line"]:not([data-line-theme]) {
    --l-bg: #101318; --l-page: #1b1f26; --l-ink: #e6e2d8; --l-muted: #a39d90; --l-line: #343a45; --l-rule: #2a2f38;
    --l-nav: #0c1118; --l-nav-ink: #e6e2d8; --l-nav-muted: #8592a6; --l-gold: #d9ad55; --l-blue: #6f9fd0; --l-blue-ink: #0f141a;
    --l-good: #8fc59a; --l-bad: #ec8a70; --l-self: #33301f; --l-frame: #6c5a35; --l-lime: #a4d65a; --field: #12161c; color-scheme: dark;
  }
}
:root[data-view="line"][data-line-theme="vigil"] {
  --l-bg: #101318; --l-page: #1b1f26; --l-ink: #e6e2d8; --l-muted: #a39d90; --l-line: #343a45; --l-rule: #2a2f38;
  --l-nav: #0c1118; --l-nav-ink: #e6e2d8; --l-nav-muted: #8592a6; --l-gold: #d9ad55; --l-blue: #6f9fd0; --l-blue-ink: #0f141a;
  --l-good: #8fc59a; --l-bad: #ec8a70; --l-self: #33301f; --l-frame: #6c5a35; --l-lime: #a4d65a; --field: #12161c; color-scheme: dark;
}
/* Four more dark themes. Ember Hall: warm charcoal and embers. */
:root[data-view="line"][data-line-theme="ember"] {
  --l-bg: #15110e; --l-page: #201a15; --l-ink: #ebe0d2; --l-muted: #a8998a; --l-line: #3d3229; --l-rule: #2c241e;
  --l-nav: #0f0b08; --l-nav-ink: #ebe0d2; --l-nav-muted: #9a8a7a; --l-gold: #e09a4a; --l-blue: #d07a45; --l-blue-ink: #170f0a;
  --l-good: #9cc98a; --l-bad: #ef8a72; --l-self: #3a2a1c; --l-frame: #6e5236; --l-lime: #b4d45a; --field: #120e0b; color-scheme: dark;
}
/* Deepwood: dark forest green, old brass. */
:root[data-view="line"][data-line-theme="forest"] {
  --l-bg: #0f1512; --l-page: #18211c; --l-ink: #e2e8de; --l-muted: #9aa898; --l-line: #2f3d34; --l-rule: #243029;
  --l-nav: #0b100d; --l-nav-ink: #e2e8de; --l-nav-muted: #8ea392; --l-gold: #c9b26a; --l-blue: #7fb894; --l-blue-ink: #0d1410;
  --l-good: #9fd3a8; --l-bad: #e8907a; --l-self: #2a3322; --l-frame: #55613f; --l-lime: #b6df6a; --field: #0e1410; color-scheme: dark;
}
/* Amethyst Court: deep plum, gold leaf. */
:root[data-view="line"][data-line-theme="amethyst"] {
  --l-bg: #141019; --l-page: #1e1825; --l-ink: #e8e2ee; --l-muted: #a69cb2; --l-line: #3a3047; --l-rule: #2b2335;
  --l-nav: #0e0a13; --l-nav-ink: #e8e2ee; --l-nav-muted: #978aa8; --l-gold: #d8b45a; --l-blue: #a98bd8; --l-blue-ink: #120d18;
  --l-good: #95cfa0; --l-bad: #ee8f86; --l-self: #352a3e; --l-frame: #6a5a3a; --l-lime: #a9db66; --field: #110d16; color-scheme: dark;
}
/* Midnight Ink: near-black, high contrast, a red seal for actions. */
:root[data-view="line"][data-line-theme="midnight"] {
  --l-bg: #0b0b0c; --l-page: #151516; --l-ink: #f1ede4; --l-muted: #b0aa9e; --l-line: #38363a; --l-rule: #242325;
  --l-nav: #000000; --l-nav-ink: #f1ede4; --l-nav-muted: #a29d93; --l-gold: #c9a24a; --l-blue: #d06454; --l-blue-ink: #0b0b0c;
  --l-good: #8fca95; --l-bad: #f08a78; --l-self: #2c2620; --l-frame: #5a4a2e; --l-lime: #a4d65a; --field: #0f0f10; color-scheme: dark;
}
:root[data-view="line"][data-line-theme="oak"] {
  --l-bg: #e8dcc4; --l-page: #fbf6ea; --l-ink: #2b2118; --l-muted: #6e5f4e; --l-line: #d6c6a6; --l-rule: #e6dac2;
  --l-nav: #3b2c1e; --l-nav-ink: #efe4cf; --l-nav-muted: #b9a283; --l-gold: #8a6a3a; --l-blue: #4f5b63; --l-blue-ink: #ffffff;
  --l-good: #3d6a2a; --l-bad: #9a3420; --l-self: #f1e2c2; --l-frame: #8a6a3a; --l-lime: #467a0c;
}
:root[data-view="line"][data-line-theme="crimson"] {
  --l-bg: #eadfd3; --l-page: #fdf9f3; --l-ink: #2a1a1a; --l-muted: #725f5c; --l-line: #e0cfc2; --l-rule: #eee2d8;
  --l-nav: #5a1620; --l-nav-ink: #f6e9d6; --l-nav-muted: #d1a9a1; --l-gold: #b48a2c; --l-blue: #7c1f2b; --l-blue-ink: #ffffff;
  --l-good: #3d6a2a; --l-bad: #9a2a1a; --l-self: #f6e7cc; --l-frame: #b48a2c; --l-lime: #427c0b;
}
:root[data-view="line"][data-line-theme="abbey"] {
  --l-bg: #e3e3d4; --l-page: #fafaf2; --l-ink: #1f2620; --l-muted: #5f6a5f; --l-line: #d3d6c3; --l-rule: #e6e8da;
  --l-nav: #1f3a2c; --l-nav-ink: #e8ecdc; --l-nav-muted: #9db5a3; --l-gold: #9a7d2e; --l-blue: #2c5a3f; --l-blue-ink: #ffffff;
  --l-good: #2c5a3f; --l-bad: #9a3420; --l-self: #ecebd0; --l-frame: #9a7d2e; --l-lime: #3e7a12;
}
:root[data-view="line"][data-line-theme="ink"] {
  --l-bg: #f1ead5; --l-page: #fbf6e6; --l-ink: #000000; --l-muted: #3d3a33; --l-line: #8a826e; --l-rule: #c9bfa5;
  --l-nav: #111111; --l-nav-ink: #fbf6e6; --l-nav-muted: #c9bfa5; --l-gold: #7a1f12; --l-blue: #7a1f12; --l-blue-ink: #ffffff;
  --l-good: #1f5a1f; --l-bad: #8a1a0a; --l-self: #efe2b8; --l-frame: #000000; --l-lime: #3c740a;
}

:root[data-view="line"] {
  & body { background: var(--l-bg); color: var(--l-ink); font: var(--font); }
  & body:has(.line) > #status { display: none; }   /* in Straightline, messages come as cards bottom right (line.js), so the page never moves; sign-in keeps the line */
  & .line { height: 100dvh; display: flex; flex-direction: column; }   /* the window's height: the menu and the page scroll on their own */

  /* Header and the resource line, as in Utopia: always there, always in the same place. */
  & .line-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 18px; background: var(--l-nav); color: var(--l-nav-ink); border-bottom: 2px solid var(--l-gold); }
  & .line-top .brand { font-family: var(--l-head-font); font-weight: 700; letter-spacing: .06em; color: var(--l-gold); font-size: 1.08em; }
  & .line-top .brand .banner { color: var(--l-nav-muted); font-weight: 600; }
  & .line-top .dim { color: var(--l-nav-muted); }
  & .line-top .tick { font-variant-numeric: tabular-nums; }
  & .line-top .end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  & .line-top .btn { background: transparent; color: var(--l-nav-ink); border: 1px solid color-mix(in srgb, var(--l-nav-ink) 40%, transparent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; min-height: 1.9rem; }
  & .line-top .btn[aria-expanded="true"] { background: var(--l-gold); border-color: var(--l-gold); color: var(--l-nav); }
  & .line-top .ico-pal { display: inline-block; width: 1.1em; height: .85em; vertical-align: -.08em; border: 1px solid currentColor; background: linear-gradient(90deg, var(--l-gold) 0 33%, var(--l-page) 33% 66%, var(--l-blue) 66%); }
  & .vswitch { color: var(--l-nav-muted); }
  & .vswitch select { background: var(--l-nav); color: var(--l-nav-ink); border-color: color-mix(in srgb, var(--l-nav-ink) 40%, transparent); }
  & .vswitch kbd { color: var(--l-nav-muted); border-color: color-mix(in srgb, var(--l-nav-ink) 30%, transparent); }
  & .line-res { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 8px 18px; background: var(--l-page); border-bottom: 1px solid var(--l-line); }
  /* No age bar in Straightline: the header shows the tick and the age's length. */
  & #agebar { display: none !important; }
  & .line-res div { display: flex; gap: 6px; align-items: baseline; }
  & .line-res dt { color: var(--l-muted); font-size: .85em; font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 1em; }
  & .line-res dd { margin: 0; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

  /* The menu. */
  & .line-body { flex: 1; display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 0; }
  /* The side: the menu scrolls; the sword (its handle) and the current page's shield sit outside it, as in the wiki. */
  & .line-side { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--l-nav); border-right: 2px solid var(--l-gold); z-index: 5; }
  & .side-brand { flex: none; padding: 14px 18px 0 22px; font: 700 1.2rem/1.2 var(--l-head-font); letter-spacing: .2rem; color: var(--l-gold); }
  & .side-brand .banner { display: block; font-size: .78em; font-weight: 600; letter-spacing: .04em; color: color-mix(in srgb, var(--l-nav-muted) 75%, var(--l-nav)); }
  /* The brand is as wide as REALMSTATE (its widest line), so the rule under "Hegemoney:" spans the word (less the
     letter-spacing after its last letter). */
  & .side-brand { width: fit-content; }
  & .side-brand .banner::after { content: ""; display: block; width: calc(100% - .2rem); height: 1px; margin: 4px 0 3px; background: color-mix(in srgb, var(--l-gold) 60%, transparent); }
  & .side-brand + .line-menu { padding-top: 0; }
  & .side-brand + .line-menu > h2:first-child { margin-top: 10px; }
  /* Desktop: the menu runs the window's full height, the name of the game at its top; the header, the resource
     line and the page sit to its right. */
  @media (min-width: 761px) {
    & .line { display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
      grid-template-areas: "side top" "side res" "side main"; }
    & .line-body { display: contents; }
    & .line-top { grid-area: top; }
    & .line-res { grid-area: res; }
    & .line-side { grid-area: side; }
    & .line-main { grid-area: main; }
    & .line-top .brand { display: none; }
  }
  & .line-menu { flex: 1; min-height: 0; color: var(--l-nav-ink); padding: 10px 0 24px 10px; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; }
  & .line-menu::-webkit-scrollbar { display: none; }
  & .l-sword { position: absolute; left: 3px; top: 0; width: 15px; height: 42px; cursor: grab; touch-action: none; opacity: .75; transition: opacity .12s;
    background-color: var(--l-gold); -webkit-mask: url("assets/sword.png") center / contain no-repeat; mask: url("assets/sword.png") center / contain no-repeat; }
  & .l-sword:hover, & .l-sword:active { opacity: 1; } & .l-sword:active { cursor: grabbing; }
  & .l-sword[hidden], & .l-shield[hidden] { display: none; }
  & .l-shield { position: absolute; right: -15px; top: 0; width: 28px; height: 28px; transform: translateY(-50%); pointer-events: none;
    background-color: var(--l-gold); -webkit-mask: url("assets/broken-shield.png") center / contain no-repeat; mask: url("assets/broken-shield.png") center / contain no-repeat; }
  /* A group's heading: its name, and a gold rule running right. The group holding the current page slides its name
     to the right (the rule moves to its left), over 140ms. */
  & .line-menu h2 { margin: 16px 18px 4px 12px; font: 600 .92rem/1.2 var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--l-gold); display: flex; align-items: center; }
  & .line-menu h2::before, & .line-menu h2::after { content: ""; height: 1px; flex: 0 1 0; min-width: 0; background: color-mix(in srgb, var(--l-gold) 45%, transparent);
    transition: flex-grow 140ms ease-out, margin 140ms ease-out; }
  & .line-menu h2::after { flex-grow: 1; margin-left: 8px; }
  & .line-menu h2:has(+ ul a[aria-current])::before { flex-grow: 1; margin-right: 8px; }
  & .line-menu h2:has(+ ul a[aria-current])::after { flex-grow: 0; margin-left: 0; }
  @media (prefers-reduced-motion: reduce) { & .line-menu h2::before, & .line-menu h2::after { transition: none; } }
  & .line-menu ul { list-style: none; margin: 0; padding: 0; }
  & .line-menu a { display: flex; align-items: center; gap: 9px; padding: 6px 22px 6px 12px; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
  & .line-menu a::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: color-mix(in srgb, var(--l-nav-ink) 35%, transparent); flex: none; }
  & .line-menu a:hover { background: color-mix(in srgb, var(--l-nav-ink) 8%, transparent); }
  & .line-menu a[aria-current] { border-left-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 18%, transparent); font-weight: 600; }
  & .line-menu a[aria-current]::before { background: var(--l-gold); }

  /* The page: a framed leaf, no wider than a page should be. Tables size to their content. */
  & .line-main { overflow-y: auto; padding: 12px 26px 44px; }
  & .line-main > .room {
    display: block;   /* room.css makes .room display: contents (the War Room needs no box); the page does */
    position: relative; max-width: 960px; width: fit-content; min-width: min(100%, 620px); margin-inline: auto;   /* the leaf fits its content */ background: var(--l-page); border: 1px solid var(--l-frame);
    outline: 1px solid color-mix(in srgb, var(--l-frame) 55%, transparent); outline-offset: -7px;
    padding: 12px 34px 34px; box-shadow: 0 2px 10px rgba(40, 30, 10, .08);
  }
  & .line-main > .room::before {
    content: ""; position: absolute; inset: 3px; pointer-events: none; background: var(--l-frame);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform=''%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") top left / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 0%29 scale%28-1 1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") top right / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%280 40%29 scale%281 -1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") bottom left / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 40%29 scale%28-1 -1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") bottom right / 34px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform=''%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") top left / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 0%29 scale%28-1 1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") top right / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%280 40%29 scale%281 -1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") bottom left / 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 40%29 scale%28-1 -1%29'%3E%3Cpath d='M2 38V12Q2 2 12 2H38' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 38V15Q7 7 15 7H38' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M15 9.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") bottom right / 34px no-repeat;
  }
  /* The page's heading: its name and, under it, what the page is for. It stays at the top as you scroll. */
  & .line-page-h { position: sticky; top: -12px; z-index: 4; margin: -6px -34px 16px; padding: 10px 34px 8px; background: var(--l-page);
    border-bottom: 3px double var(--l-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  & .line-page-h h1 { margin: 0; font: 600 1.4rem/1.2 var(--l-head-font); letter-spacing: .02em; }
  & .line-page-h .line-what { margin: 0; color: var(--l-muted); }
  & .line-main:is([data-page="throne"], [data-page="resources"], [data-page="land"], [data-page="build"], [data-page="state"], [data-page="military"], [data-page="attack"], [data-page="world"], [data-page="wars"], [data-page="intrigue"], [data-page="rites"], [data-page="science"], [data-page="academics"], [data-page="generals"], [data-page="heirs"], [data-page="colloquium"], [data-page="truths"], [data-page="work"], [data-page="wonders"], [data-page="news"], [data-page="ranks"], [data-page="hall"], [data-page="market"], [data-page="leadership"], [data-page="war"]) .line-page-h { justify-content: center; }
  & .line-main:is([data-page="throne"], [data-page="resources"], [data-page="land"], [data-page="build"], [data-page="state"], [data-page="military"], [data-page="attack"], [data-page="world"], [data-page="wars"], [data-page="intrigue"], [data-page="rites"], [data-page="science"], [data-page="academics"], [data-page="generals"], [data-page="heirs"], [data-page="colloquium"], [data-page="truths"], [data-page="work"], [data-page="wonders"], [data-page="news"], [data-page="ranks"], [data-page="hall"], [data-page="market"], [data-page="leadership"], [data-page="war"]) .line-what { display: none; }
  & .line-main:is([data-page="throne"], [data-page="state"]) .line-page-h h1 { display: flex; flex-direction: column; align-items: center; text-align: center; }
  /* State: the state's name, grand, with its address and realm small beneath. */
  & .line-page-h h1 .h-state { font-size: 1.3rem; letter-spacing: .04em; line-height: 1.1; padding: 6px 0 2px; }
  & .line-page-h h1:has(.h-state) .h-of { font-size: .95rem; margin-bottom: 4px; }
  & .line-page-h h1 .h-of a { color: inherit; text-decoration-color: color-mix(in srgb, var(--l-gold) 50%, transparent); text-underline-offset: 3px; }
  & .line-page-h h1 .h-house { font-size: .78em; }
  & .line-page-h h1 .h-of { color: color-mix(in srgb, var(--l-muted) 92%, var(--l-page)); }   /* a shade past muted, still 4.5:1 on every theme */
  & .line-page-h h1 a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--l-gold) 60%, transparent); text-underline-offset: 3px; }
  & .line-page-h h1 a:hover { color: var(--l-gold); }
  /* World: a realm at a time. */
  & .line-res .prot { margin-left: auto; padding: 0 8px; border: 1px solid var(--l-gold); border-radius: 3px; background: var(--l-self); }
  & .line-res .prot dd { font-weight: 600; }
  & .line-page-h .orn-rule { position: relative; height: 10px; margin: 8px auto 0; width: 230px;
    background: linear-gradient(var(--l-gold) 0 0) no-repeat 0 50% / 104px 1px, linear-gradient(var(--l-gold) 0 0) no-repeat 126px 50% / 104px 1px; }
  & .line-page-h .orn-rule::before { content: ""; position: absolute; left: 110px; top: 1px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--l-gold); }
  & .line-page:focus { outline: none; }
  & .line-page > .acttabs { display: none; }   /* the side menu picks a pane's section */
  & .line-pre { margin-bottom: 26px; }
  /* Throne: two columns of key/value tables, as in Utopia. */
  /* Throne: the page's full width; its tables flow into as many columns as fit at 430px or more each, up to three
     (two on a laptop, three on a wide screen), each kept whole. A green line at the foot while protection lasts. */
  & .line-main > .room:has(.throne) { max-width: none; width: auto; min-width: 0; }
  /* A faint throne behind the page, as the War Room's panes have their glyphs: a mask over the ink colour, so it
     suits every theme. About 18% in from the right and 11% up from the bottom. Configuration turns it off. */
  & .line-main > .room:has(:is(.throne, .lland, .lbuild).glyph) { isolation: isolate; }
  & .line-main > .room:has(:is(.throne, .lland, .lbuild).glyph)::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: 18%; bottom: 11%; width: clamp(160px, 24%, 340px); aspect-ratio: 1; background: var(--l-ink); opacity: .045;
    -webkit-mask: url("assets/throne.png") no-repeat center / contain; mask: url("assets/throne.png") no-repeat center / contain; }
  /* Resources: the War Room's wheat in the same place (same setting). */
  & .line-main > .room:has(.throne.res2.glyph)::after { width: clamp(120px, 17%, 240px); -webkit-mask-image: url("assets/wheat.svg"); mask-image: url("assets/wheat.svg"); }
  /* Land & Exploration: a compass rose (same setting). */
  /* State: the War Room's hill fort (same setting); the page runs the full width, like Throne. */
  & .line-main > .room:has(.lstate) { max-width: none; width: auto; min-width: 0; }
  & .line-main > .room:has(.lstate.glyph) { isolation: isolate; }
  & .line-main > .room:has(.lstate.glyph)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: 18%; bottom: 11%;
    width: clamp(120px, 17%, 240px); aspect-ratio: 1; background: var(--l-ink); opacity: .045;
    -webkit-mask: url("assets/fort.svg") no-repeat center / contain; mask: url("assets/fort.svg") no-repeat center / contain; }
  & .lpart.lstate { max-width: 1500px; width: 100%; margin-inline: auto; }
  /* Moving between states: ‹ realm · state › and back to yours, centred above the banner. */
  & .lstate .st-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 18px; }
  & .lstate .st-nav select { max-width: 280px; }
  & .lstate .st-nav #ls-home { margin-left: 8px; }
  & .lstate .st-goto { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
  & .lstate .st-goto input { width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
  & .lstate .st-goto .short:empty { display: none; }
  & .lstate .st-nav #ls-home:disabled { visibility: hidden; }
  /* The banner placeholder: a dashed swallow-tail pennant, centred above the figures. */
  /* The banner and the state's picture (a wide frame, as Utopia's kingdom picture), side by side; stacked when narrow. */
  & .lstate .st-arms { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 28px; margin: 0 0 22px; }
  & .lstate .st-picture { margin: 0; flex: 0 1 600px; }
  & .lstate .st-picture .frame { aspect-ratio: 3 / 1; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--l-gold) 70%, transparent);
    border-radius: 3px; background: color-mix(in srgb, var(--l-gold) 6%, transparent); }
  & .lstate .st-picture span { font: 600 .78rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted); }
  & .lstate .st-banner { margin: 0; width: 92px; flex: none; text-align: center; }
  & .lstate .st-banner svg { display: block; width: 92px; height: auto; }
  & .lstate .st-banner path { fill: color-mix(in srgb, var(--l-gold) 6%, transparent); stroke: color-mix(in srgb, var(--l-gold) 70%, transparent); stroke-width: 2; stroke-dasharray: 6 4; }
  & .lstate .st-banner figcaption { margin-top: 4px; font: 600 .78rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted); }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 640px; gap: 0; margin: 4px auto 26px;
    border-block: 3px double var(--l-line); }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance > div { padding: 12px 10px; text-align: center; }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance > div + div { border-left: 1px solid var(--l-rule); }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dt { font: 600 .82rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted); }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dd { margin: 2px 0 0; font: 1.35rem var(--l-head-font); font-variant-numeric: lining-nums tabular-nums; }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dd.rank { margin-top: 1px; font: 600 .95rem var(--l-body-font); color: var(--l-gold); font-variant-numeric: tabular-nums; }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dd.rank span { font-weight: 400; color: var(--l-muted); font-size: .9em; }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dd.note a { color: inherit; }
  & .lstate section { margin-bottom: 26px; }
  & .lstate table.st-tbl { width: 100%; }
  & .lstate .st-tbl tbody :is(td, th) { vertical-align: middle; height: 34px; padding-block: 0; }   /* every row one height, buttons or not */
  & .lstate .st-tbl .btn.mini { margin: 0; }
  & .lstate .st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  & .lstate .st-head h3.sub { flex: 1; }
  & .lstate .st-btns { display: flex; gap: 8px; margin-bottom: 6px; }
  /* Straightline's windows (<dialog>): the page's own paper and frame, a quiet header, Esc or × to close. */
  & dialog.ldlg { padding: 0; border: 1px solid var(--l-frame); border-radius: 6px; background: var(--l-page); color: var(--l-ink);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28); width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); font: inherit; }
  & dialog.ldlg[open] { display: flex; flex-direction: column; }
  & dialog.ldlg::backdrop { background: rgba(20, 16, 10, .45); }
  & dialog.ldlg > header { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; border-bottom: 3px double var(--l-line); }
  & dialog.ldlg > header h2 { margin: 0; flex: 1; font: 1.3rem var(--l-head-font); }
  & dialog.ldlg > header h2 span { color: var(--l-muted); font-size: .8em; }
  & dialog.ldlg > header .x { border: 0; background: none; color: var(--l-muted); font-size: 1.6rem; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 4px; }
  & dialog.ldlg > header .x:hover { color: var(--l-ink); }
  & dialog.ldlg > header .x:focus-visible { outline: 2px solid var(--l-gold); }
  & dialog.ldlg > .body { padding: 6px 20px 20px; overflow: auto; }
  & dialog.ldlg section + section { margin-top: 22px; }
  & dialog.ldlg .note { color: var(--l-muted); font-size: .88em; margin: 8px 0 0; }
  & dialog.st-aid { width: min(520px, calc(100vw - 32px)); }
  & dialog.st-aid .lform { margin-top: 14px; display: grid; grid-template-columns: 72px 1fr; gap: 10px 12px; align-items: center; max-width: none; }
  & dialog.st-aid .lform label { margin: 0; }
  & dialog.st-aid .lform :is(select, .field) { width: 100%; margin: 0; }
  & dialog.st-aid .lform .field { display: flex; gap: 8px; }
  & dialog.st-aid .lform .field input { flex: 1; min-width: 0; }
  & dialog.st-aid .doing { max-width: none; }
  & dialog.st-aid .lform .go { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  /* Statistics: the spread table, two small histograms side by side, and the races as a ring. */
  & .lstate table.st-spread { width: 100%; }
  & .lstate .st-spread tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .lstate .st-hists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
  & .lstate .st-hist { margin: 0; padding: 10px 12px 6px; background: color-mix(in srgb, var(--l-gold) 4%, var(--l-page)); border: 1px solid var(--l-rule); border-radius: 6px; }
  & .lstate .st-hist figcaption { font-size: .9em; color: var(--l-muted); margin-bottom: 6px; }
  & .lstate .st-hist svg { display: block; width: 100%; height: auto; overflow: visible; }
  & .lstate .st-hist rect { fill: color-mix(in srgb, var(--l-gold) 70%, var(--l-page)); }
  & .lstate .st-hist g:hover rect { fill: var(--l-gold); }
  & .lstate .st-hist .grid { stroke: var(--l-rule); stroke-width: .6; }
  & .lstate .st-hist text { fill: var(--l-muted); font: 8px var(--l-body-font); }
  & .lstate .st-hist text.ax { text-anchor: middle; }
  & .lstate .st-hist text.ax.tilt { text-anchor: end; transform-box: fill-box; transform-origin: right top; transform: rotate(-35deg); }
  & .lstate .st-hist text.ay { text-anchor: end; }
  & .lstate .st-races { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 8px; }
  & .lstate .st-races .pie { width: 150px; height: 150px; flex: none; }
  & .lstate .st-races .pie :is(path, circle) { stroke: var(--l-page); stroke-width: 1; }
  & .lstate .st-races .pie circle.hole { fill: var(--l-page); stroke: none; }
  & .lstate .st-races .pie text { text-anchor: middle; fill: var(--l-ink); }
  & .lstate .st-races .pie text.n { font: 15px var(--l-head-font); }
  & .lstate .st-races .pie text.u { font: 7px var(--l-body-font); fill: var(--l-muted); }
  & .lstate .st-races table { flex: 1 1 260px; }
  & .lstate .st-races tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .lstate .st-races .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
  & .lstate .st-tbl tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .lstate .st-tbl tr.self > * { background: color-mix(in srgb, var(--l-gold) 10%, var(--l-page)); }
  & .lstate .st-tbl tbody tr:hover > * { background: color-mix(in srgb, var(--l-gold) 14%, var(--l-page)); }
  & .lstate .st-tbl td.marks { white-space: nowrap; }
  & .lstate .st-tbl tr.open > * { color: var(--l-muted); }
  & .lstate .st-tbl tr.open th[scope=row] { color: var(--l-muted); font-style: italic; }
  & .lstate .st-tbl tr.open:hover > * { background: none; }
  & :is(.lstate, .lmil, .lworld, .lwars, .lint, .lsci, .lacad, .lgen, .lheirs, .lcol, .ltru, .lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance dd .of { font-size: .62em; color: var(--l-muted); }
  & .lstate .st-tbl .mark { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid var(--l-line); border-radius: 3px; font-size: .78em; color: var(--l-muted); }
  & .lstate .st-tbl .mark.lead { color: var(--l-gold); border-color: color-mix(in srgb, var(--l-gold) 60%, transparent); }
  & .lstate .st-tbl td.acts { white-space: nowrap; text-align: right; }
  & .lstate .st-tbl td.acts .btn + .btn { margin-left: 6px; }
  /* Build & Raze: wood planks (same setting). */
  & .line-main > .room:has(.lbuild.glyph)::after { width: clamp(120px, 17%, 240px); -webkit-mask-image: url("assets/planks.png"); mask-image: url("assets/planks.png"); }
  & .line-main > .room:has(.lbuild.glyph[data-tab="raze"])::after { -webkit-mask-image: url("assets/sledgehammer.png"); mask-image: url("assets/sledgehammer.png"); }   /* a sledgehammer while razing */
  /* Military: the War Room's templar shield (same setting). */
  & .line-main > .room:has(.lmil.glyph)::after { -webkit-mask-image: url("assets/shield.svg"); mask-image: url("assets/shield.svg"); }
  & .line-main > .room:has(.lland.glyph)::after { width: clamp(120px, 17%, 240px); -webkit-mask-image: url("assets/compass.png"); mask-image: url("assets/compass.png"); }
  & .throne { container-type: inline-size; }
  & .throne .tgrid { columns: 430px 3; column-gap: 34px; max-width: 1500px; margin-inline: auto; }   /* as many 430px+ columns as fit, up to 3: the People table needs that much */
  & .throne .tcard { break-inside: avoid; margin-bottom: 22px; }
  & .throne .tcard > table.tbl { width: 100%; min-width: 0; }   /* fill the column, so the heading rule above ends where the rows do */
  & .throne table.kv th { text-align: left; font-weight: 400; color: var(--l-muted); font-variant-caps: normal; letter-spacing: 0; font-size: inherit; padding: 4px 4px; border-bottom: 1px solid var(--l-rule); }
  & .throne table.kv td { white-space: normal; }
  & .throne tr.total > * { color: var(--l-ink); }
  & .throne tr.total > td { font-weight: 400; }
  /* Row labels a touch muted; full ink on the row you point at (Throne, Resources and Land's own table). */
  & :is(.throne, .lland) table.kv tr > th[scope=row] { color: color-mix(in srgb, var(--l-ink) 68%, var(--l-page)); transition: color 120ms; }
  & :is(.throne, .lland) table.kv tr:not(.colhead):hover > th[scope=row] { color: var(--l-ink); }
  & :is(.throne, .lland) table.kv tr:nth-child(even) > * { background: color-mix(in srgb, var(--l-ink) 1.25%, transparent); }   /* the faintest of stripes */
  & :is(.throne, .lland) table.kv tr:not(.colhead):hover > * { background: color-mix(in srgb, var(--l-gold) 12%, transparent); }
  & .throne tr.unit > th { padding-left: 1.4em; }
  & .throne tr.unit > td { color: var(--l-muted); }
  & .throne table.kv tr.sum > :is(th, td) { color: var(--l-ink); border-top: 1px solid var(--l-line); font-weight: 400; }
  & .throne .tcard > p { margin: 4px 0 0; }
  /* Values in columns that line up row to row, split by a bar: "607 acres | #104 of 150", "6,308 | 6,308 | 6,308". */
  & .throne .cols { display: inline-grid; justify-items: end; column-gap: 8px; }
  /* Fixed widths (rem, not ch), so the smaller column headings line up with the figures under them. */
  & .throne .cols.c2 { grid-template-columns: 6rem auto 6.5rem; }
  & .throne .cols.c3 { grid-template-columns: 5rem auto 5rem auto 5rem; }
  & .throne .cols .pipe { width: .5rem; text-align: center; }
  & .throne .cols .pipe { color: var(--l-line); }
  /* Narrow page: the unit columns show one figure at a time; ‹ › in the header choose which. */
  & .throne .mswitch { display: none; align-items: center; justify-content: flex-end; }
  & .throne .mswitch > span { min-width: 4.2em; text-align: center; }
  & .throne .mswitch button { background: none; border: 0; padding: 8px 10px; margin: -6px -2px; font: inherit; color: var(--l-gold); cursor: pointer; line-height: 1; }   /* small to see, easy to tap */
  & .throne .mswitch button:hover { color: var(--l-ink); }
  @container (max-width: 520px) {
    & .throne .mswitch { display: flex; }
    & .throne tr.colhead .cols { display: none; }
    & .throne .cols.c3 { grid-template-columns: 5rem; }
    & .throne .cols.c3 > .pipe { display: none; }
    & .throne .tgrid[data-metric="0"] .cols.c3 > span:not(.pipe):not(:nth-child(1)),
    & .throne .tgrid[data-metric="1"] .cols.c3 > span:not(.pipe):not(:nth-child(3)),
    & .throne .tgrid[data-metric="2"] .cols.c3 > span:not(.pipe):not(:nth-child(5)) { display: none; }
  }
  & .throne .cols .ast { display: inline-block; width: .6em; text-align: left; color: var(--l-gold); cursor: help; }
  & .throne tr.colhead > * { padding-top: 2px; padding-bottom: 2px; font-size: .78em; color: var(--l-muted); font-variant-caps: all-small-caps; letter-spacing: .06em; border-bottom: 0; }
  & .throne tr.colhead abbr { text-decoration: none; }
  & .throne td abbr { text-decoration: none; cursor: help; }
  & .throne td a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--l-gold) 60%, transparent); text-underline-offset: 3px; }
  & .throne td a:hover { color: var(--l-gold); }
  & .throne td a .ext { margin-left: 2px; font-size: .8em; color: var(--l-muted); }
  /* Protection: a band at the foot of the page, its text midway between the rule above and the page's bottom edge
     (it takes the page's own bottom padding, so the space below matches the space above). */
  & .throne .tprot { margin: 6px -34px -34px; padding: 14px 34px; line-height: 1.3; text-align: center; font-weight: 600;
    background: color-mix(in srgb, var(--l-lime) 16%, var(--l-page)); border-top: 1px solid color-mix(in srgb, var(--l-lime) 45%, var(--l-page));
    color: color-mix(in srgb, var(--l-lime) 75%, var(--l-ink)); }   /* lime, tuned to each theme (--l-lime); text deepened to read on the tint */
  & .throne .tprot[hidden] { display: none; }
  /* News: a toolbar strip over a steady-width feed; times in a narrow column, battle reports as framed cards. */
  & .line-page .dtools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 14px; padding: 8px 12px;
    background: var(--l-self); border: 1px solid var(--l-line); border-radius: 4px; }
  & .line-page .dtools select { min-height: 30px; }
  & .line-page .dtools .check { display: inline-flex; gap: 6px; align-items: center; }
  & .line-page .dtools #d-ncount { margin-left: auto; }
  & .line-page .tape.roomy { min-width: min(100%, 720px); }
  & .line-page .tape.roomy li { grid-template-columns: 9.5ch minmax(0, 1fr); gap: 14px; padding: 7px 2px; border-bottom: 1px solid var(--l-rule); line-height: 1.45; }
  & .line-page .tape.roomy time { font-style: italic; font-size: .88em; padding-top: 1px; }
  & .line-page .tape li.battle { padding: 10px 2px; }
  & .line-page .bcard { border: 1px solid var(--l-line); border-left: 3px solid var(--l-bad); border-radius: 3px; padding: 6px 10px; background: color-mix(in srgb, var(--l-self) 40%, var(--l-page)); }
  /* Science: the sciences under a heading per category; the CAT column goes, the heading says it. */
  & .line-page .sci-list tr.sci-cat { display: table-row; }
  & .line-page .sci-list tr.sci-cat th { font: 600 1rem/1.3 var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-ink);
    text-align: left; padding: 18px 4px 4px; border-bottom: 3px double var(--l-line); }
  & .line-page .sci-list tr.sci-cat th .dim { font: italic .85em var(--l-body-font); letter-spacing: 0; font-variant-caps: normal; margin-left: 8px; }
  & .line-page .sci-list tr > :nth-child(2):not([colspan]) { display: none; }
  & .line-page .sci-list tr:first-child th { font-size: .82em; }

  /* Resources: Throne's two columns, with a change column per row. */
  & .res2 table.kv.res { table-layout: fixed; }   /* every block's columns line up */
  & .res2 table.kv.res th:first-child, & .res2 table.kv.res tr > :first-child { width: 46%; }
  & .res2 table.kv.res tr:first-child th { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: .9em; }
  & .res2 table.kv.res th.num { text-align: right; }
  & .line-page h3 .wiki { margin-left: 4px; font-size: .68em; color: var(--l-muted); opacity: .5; text-decoration: none; font-family: var(--l-body-font); font-variant-caps: normal; }
  & .line-page h3 .wiki:is(:hover, :focus-visible) { opacity: 1; }
  & .line-page h3 .wiki:hover { color: var(--l-gold); }   /* a heading's faint ↗ to its wiki page, on any page */
  /* The graph window (the War Room's): wider here, and without the War Room's keyboard-key badge ("G"). */
  & dialog.dlg.gdlg { width: min(1040px, calc(100vw - 48px)); }   /* dialog: outranks room.css, which loads later */
  & .gdlg .dlg-h h2 .key { display: none; }
  & .res2 .note { max-width: 1500px; margin: 18px auto -22px; text-align: center; color: color-mix(in srgb, var(--l-muted) 92%, var(--l-page)); }   /* a muted footnote at the page's foot */
  & .res2 tr[data-graph] { cursor: pointer; }
  & .res2 th .chart { width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; opacity: .5; }   /* the graph mark, half its label's strength */
  & .res2 tr[data-graph]:hover th, & .res2 tr[data-graph]:focus-visible th { color: var(--l-ink); }

  /* News as it arrives: small cards bottom right, each with a link to the News page. */
  & .toasts { position: fixed; left: 232px; bottom: 16px; z-index: 40; display: flex; flex-direction: column-reverse; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
  & .toast { pointer-events: auto; position: relative; background: var(--l-page); color: var(--l-ink); border: 1px solid var(--l-frame); border-left: 4px solid var(--l-gold);
    border-radius: 4px; box-shadow: 0 6px 20px rgba(30, 20, 5, .22); padding: 9px 30px 9px 12px; animation: l-toast-in .25s ease-out; transition: opacity .3s, transform .3s; }
  & .toast.bad { border-left-color: var(--l-bad); } & .toast.good { border-left-color: var(--l-good); }
  & .toast.msg p { margin: 0; }
  & .toast p { margin: 0 0 4px; font-size: .92em; line-height: 1.4; }
  & .toast a { color: var(--l-blue); font-weight: 600; font-size: .88em; }
  & .toast .x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--l-muted); font-size: 1.1em; cursor: pointer; }
  & .toast.out { opacity: 0; transform: translateY(8px); }
  @media (prefers-reduced-motion: reduce) { & .toast { animation: none; transition: none; } }

  /* Train: one row per unit, one button. */
  & .traingrid .tbl { width: 100%; }
  & .traingrid input[type=number] { width: 8ch; text-align: right; }
  & .traingrid .tg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
  & .traingrid .tg-tot { margin-left: auto; font-variant-numeric: lining-nums tabular-nums; }
  & .traingrid .tg-from { display: flex; gap: 14px; }
  & .traingrid .tg-from label { display: flex; gap: 6px; align-items: center; }
  & .traingrid .tg-note { margin: 8px 0 0; }

  /* Straightline's own pages (Land, Build): what a form does in plain words (.what), and, as you fill it in,
     exactly what the order will do (.doing); a short form of label, field, button. */
  & .lpart { max-width: 880px; }
  & .lpart.lbuild { max-width: none; }
  & .lpart section { margin-bottom: 26px; }
  & .lpart .lead { margin: 0 0 14px; font-size: 1.05em; }
  & .lpart .what { margin: 10px 0 14px; color: var(--l-muted); max-width: 70ch; }
  & .lpart .doing { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--l-gold); background: var(--l-self); max-width: 70ch; }
  & .lpart .doing.short { border-left-color: var(--l-bad); }
  & .lpart .done { margin: 8px 0 0; padding: 6px 12px; border-left: 3px solid var(--l-good); max-width: 70ch; }
  & .lpart .done[hidden] { display: none; }
  & .lpart .lform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  & .lpart .lform .field { display: inline-flex; gap: 4px; }
  & .lpart .lform input[type=number] { width: 9ch; text-align: right; }
  /* Active: one gold edge (the box's own border, with a faint glow), not a focus ring around the border. */
  & .lpart :is(.lform, .lb-tbl) :is(input, select):focus { outline: none; border-color: var(--l-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--l-gold) 35%, transparent); }
  /* A form's secondary buttons (Max) beside its blue one: a firmer edge and the same small shadow, so they read as the same size. */
  & .lpart .lform .btn:not(.primary) { border-color: color-mix(in srgb, var(--l-muted) 55%, var(--l-page)); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
  & .lpart .lfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
  & .lpart table.kv { width: 100%; min-width: 0; max-width: 520px; }
  & .lpart table.kv th { text-align: left; font-weight: 400; font-variant-caps: normal; letter-spacing: 0; font-size: inherit; color: var(--l-muted); }
  & .lpart table.kv tr.sum > * { font-weight: 600; color: var(--l-ink); border-top: 1px solid var(--l-line); }
  /* An advisor's band at the top of a page (advisor.js): the court's voice, a little gold-tinted, full width. */
  & .adv-band { grid-column: 1 / -1; margin: -4px 0 18px; padding: 9px 16px; text-align: center; font: italic .92rem/1.4 var(--l-head-font);
    color: color-mix(in srgb, var(--l-ink) 67%, var(--l-page)); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page));   /* one shade for the whole line: the faintest that still reads 4.5:1 on every theme */
    border-top: 1px solid color-mix(in srgb, var(--l-gold) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--l-gold) 40%, transparent); }
  & .adv-band .who { font-style: normal; white-space: nowrap; }   /* same size and shade as the line it signs */
  & .adv-band a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--l-gold) 60%, transparent); text-underline-offset: 3px; }
  & .adv-band a:hover { color: var(--l-gold); }
  /* Land: your land and Explore side by side, land on its way across the page under them. */
  & .lpart.lland { max-width: none; width: min(100%, 900px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; align-items: start; }
  & .lland .ll-wide { grid-column: 1 / -1; }
  & .lland .what, & .lland .doing { max-width: none; }
  & .lland #ll-info .i-grp { display: block; } & .lland #ll-info .i-grp + .i-grp { margin-top: .45em; }   /* cost, what you have, the maximum: a little air between */
  & .lland table.kv tr.go { cursor: pointer; }
  & .lland table.kv tr.go > th[scope=row]::after { content: " ↗"; font-size: .8em; color: var(--l-muted); opacity: .6; }   /* this row opens another page */
  & .lland table.kv tr.go:focus-visible { outline: 2px solid var(--l-gold); outline-offset: -2px; }
  & .lland table.kv tr.gap > * { border-top: 1px solid var(--l-line); padding-top: 10px; }
  @media (max-width: 900px) { & .lpart.lland { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px) { & :is(.lland, .lbuild) table.ticks { min-width: 720px; } }
  /* The 24 ticks: narrow columns, a tinted cell where land arrives. */
  & :is(.lland, .lbuild) table.ticks { width: 100%; min-width: 0; table-layout: fixed; font-size: .86em; }
  & :is(.lland, .lbuild) table.ticks th:first-child { width: 8.5em; text-align: left; font-variant-caps: normal; letter-spacing: 0; white-space: nowrap; }
  & :is(.lland, .lbuild) table.ticks thead th { color: var(--l-muted); font-size: .9em; }
  & :is(.lland, .lbuild) table.ticks td, & :is(.lland, .lbuild) table.ticks thead th:not(:first-child) { text-align: center; padding: 4px 0; border-left: 1px solid var(--l-rule); }
  & :is(.lland, .lbuild) table.ticks td.on { background: color-mix(in srgb, var(--l-gold) 22%, var(--l-page)); font-weight: 600; }
  & :is(.lland, .lbuild) table.ticks tr.sum > * { border-top: 1px solid var(--l-line); font-weight: 600; }
  /* Land as ten houses: each a house-shaped mask over a fill, built (--b) then being built (--c) from the left. */
  & .lpart .landbar { display: flex; justify-content: center; gap: 6px; max-width: 520px; margin: 6px 0 12px; opacity: .78; }   /* centred over its table (which is at most 520px) */
  & .lpart .landbar i { width: 30px; aspect-ratio: 1; display: block;
    background: linear-gradient(90deg, var(--l-blue) 0 var(--b), color-mix(in srgb, var(--l-blue) 40%, var(--l-page)) var(--b) var(--c), var(--l-line) var(--c) 100%);
    -webkit-mask: var(--house) center / contain no-repeat; mask: var(--house) center / contain no-repeat; }   /* --house: the icon Configuration picked (land.js) */
  & .lconfig .cf-icons { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
  & .lconfig .cf-icon { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--l-line); border-radius: 4px; cursor: pointer; }
  & .lconfig .cf-icon:has(input:checked) { border-color: var(--l-gold); background: var(--l-self); }
  & .lconfig .cf-icon i { width: 24px; aspect-ratio: 1; background: var(--l-blue); -webkit-mask: var(--house) center / contain no-repeat; mask: var(--house) center / contain no-repeat; }
  /* Sub-tabs (Build, Raze): a row of tabs over the page, the chosen one joined to it. */
  & .ltabs { display: flex; gap: 4px; border-bottom: 1px solid var(--l-frame); margin: 0 0 4px; }
  & .ltabs [role=tab] { font: 600 1rem/1.3 var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted);
    background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; padding: 6px 18px; margin-bottom: -1px; cursor: pointer; }
  & .ltabs [role=tab]:hover { color: var(--l-ink); }
  & .ltabs [role=tab][aria-selected=true] { color: var(--l-ink); background: var(--l-page); border-color: var(--l-frame); }
  & .lbuild [role=tabpanel][hidden] { display: none; }
  & .lb-tbl { width: 100%; }
  & .lbuild .lb-tbl th[scope=row] { font-size: inherit; font-variant-caps: normal; letter-spacing: 0; font-weight: 400; color: var(--l-ink); white-space: nowrap; }
  & .lb-tbl td, & .lb-tbl th { vertical-align: top; }
  & .lbuild .lb-tbl td:is([data-each], .cost) { white-space: normal; min-width: 10ch; }
  & .lb-tbl input[type=number], & .lb-tbl .btn { margin-top: -3px; }
  & .lb-tbl .does { max-width: 26ch; white-space: normal; }
  & .lb-tbl .does .more { display: block; color: var(--l-muted); }
  & .lb-tbl input[type=number] { width: 8ch; text-align: right; }
  /* Throne's faint stripes and hover; a row with a count keeps its own highlight. */
  & .lbuild .lb-tbl tbody tr.alt > * { background: color-mix(in srgb, var(--l-ink) 1.25%, transparent); }
  & .lbuild .lb-tbl tbody tr:not(.grp):hover > * { background: color-mix(in srgb, var(--l-gold) 12%, transparent); }
  /* A group's heading row: its name in the page's small capitals over a double rule, as section headings are. */
  /* The groups: a small table each, as many columns as fit at 490px or more (two at most), as Throne's tables flow. */
  & .line-main > .room:has(.lbuild) { max-width: none; width: auto; min-width: 0; }
  & .lbuild .lb-groups { columns: 490px 2; column-gap: 30px; max-width: 1500px; }
  & .lbuild .lb-grp { break-inside: avoid; margin-bottom: 20px; padding-top: 10px; }   /* padding, not the heading's margin: a column break drops margins */
  & .lbuild .lb-grp > h3.sub { margin-top: 0; }
  & .lbuild .lb-grp > table.lb-tbl { margin-top: 0; width: 100%; min-width: 0; table-layout: fixed; }   /* full width, or the fixed column widths are ignored */
  /* The same column widths in every group, so they fit a column and line up group to group. */
  & .lbuild .lb-grp .lb-tbl col.c-name { width: 21%; } & .lbuild .lb-grp .lb-tbl col.c-own { width: 58px; } & .lbuild .lb-grp .lb-tbl col.c-n { width: 76px; }
  & .lbuild .lb-grp .lb-tbl col.c-max { width: 76px; } & .lbuild .lb-grp .lb-tbl col.c-cost { width: 84px; }
  & .lbuild .lb-grp .lb-tbl col.c-pct { width: 54px; }
  & .lbuild .lb-tbl td.pct { color: var(--l-muted); }
  & .lbuild .lb-grp .lb-tbl th[scope=row] { white-space: normal; }
  & .lbuild .lb-grp .lb-tbl .does { max-width: none; }
  & .lbuild .lb-grp .lb-tbl input[type=number] { width: 100%; }
  & .lbuild .lb-tbl thead th { font-size: .78em; }
  & .lb-tbl .does .needs { display: block; color: var(--l-gold); }
  & .lb-tbl .does .nil { color: var(--l-muted); }
  & .lb-tbl .does { cursor: help; }
  /* The order bar: under the tabs, the sentence left and Clear / Build right; sticky below the page heading
     while the list scrolls, released at the end of the Build panel. */
  /* The Build | Raze tabs stay in view below the page heading, and the order bar below them. */
  & .lbuild > .ltabs { position: sticky; top: 36px; z-index: 4; background: var(--l-page); padding-top: 6px; margin-top: -6px; }
  & .lbuild .lb-bar { position: sticky; top: 77px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px;
    margin: 0 0 6px; padding: 8px 0; background: var(--l-page); border-bottom: 1px solid var(--l-rule); }
  & .lbuild .lb-bar .doing, & .lbuild .lb-bar .done { flex: 1 1 360px; margin: 0; max-width: none; padding: 4px 10px; }
  & .lbuild .lb-bar { min-height: 47px; }   /* the sentence (one line) fits without the bar growing */
  & .lbuild .lb-bar .doing[hidden], & .lbuild .lb-bar .done[hidden] { display: none; }
  & .lbuild .lb-btns { display: flex; gap: 8px; margin-left: auto; }
  & .lbuild #lb-build > h3.sub { margin-top: 30px; }
  & .lbuild #lb-raze .what { max-width: none; }   /* one line where the page is wide enough */
  /* Razing: the whole page washed faintly red, so it's plain you're tearing down, not building. */
  & .line-main > .room:has(.lbuild[data-tab="raze"]) { background: color-mix(in srgb, var(--l-bad) 6%, var(--l-page)); }
  & .lbuild[data-tab="raze"] > .ltabs, & .lbuild[data-tab="raze"] .lb-bar { background: color-mix(in srgb, var(--l-bad) 6%, var(--l-page)); }
  & .line-main:has(.lbuild[data-tab="raze"]) .line-page-h { background: color-mix(in srgb, var(--l-bad) 6%, var(--l-page)); }
  & .lbuild[data-tab="raze"] .ltabs [role=tab][aria-selected=true] { background: color-mix(in srgb, var(--l-bad) 6%, var(--l-page)); color: var(--l-bad); border-color: color-mix(in srgb, var(--l-bad) 50%, var(--l-frame)); }
  & .lbuild[data-tab="raze"] .lb-tbl tbody tr.on > * { background: color-mix(in srgb, var(--l-bad) 12%, var(--l-page)); }
  & .lbuild .rz-tbl tr.none > * { color: var(--l-muted); }
  /* A building's name links to the wiki: plain until you point at it, then underlined with a faint ↗. */
  & .lbuild .lb-tbl a.bwiki { color: inherit; text-decoration: none; }
  & .lbuild .lb-tbl a.bwiki .ext { margin-left: 3px; font-size: .75em; color: var(--l-muted); opacity: 0; }
  & .lbuild .lb-tbl a.bwiki:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--l-gold) 60%, transparent); text-underline-offset: 3px; }
  & .lbuild .lb-tbl a.bwiki:is(:hover, :focus-visible) .ext { opacity: .7; }
  /* A row's own Clear (×), beside Max: only on a row with a count; its space kept, so nothing shifts. */
  & .lbuild .lb-tbl td.acts { white-space: nowrap; }
  & .lbuild .lb-tbl td.acts > button { vertical-align: middle; height: 24px; margin-top: 0; }
  & .lbuild .lb-grp .lb-tbl tbody :is(td, th) { vertical-align: middle; }   /* one centre line per row: name, figures and controls */
  & .lbuild .lb-tbl input[type=number] { margin-top: 0; vertical-align: middle; }   /* level with Max and × */
  /* Raze's cost note: one muted line, centred, at the page's foot. */
  & .lbuild #lb-rz-info { margin: 14px 0 -22px; text-align: center; color: color-mix(in srgb, var(--l-muted) 92%, var(--l-page)); }
  & .lbuild .lb-tbl .x { margin-left: 4px; padding: 0 6px; border: 0; background: none; color: var(--l-muted); font: inherit; font-size: 1.1em; line-height: 24px; cursor: pointer; border-radius: 3px; }
  & .lbuild .lb-tbl .x:hover { color: var(--l-bad); }
  & .lbuild .lb-tbl .x:focus-visible { outline: 2px solid var(--l-gold); }
  & .lbuild .lb-tbl tr:not(.on) .x { visibility: hidden; }
  & .lbuild .rz-tbl col.c-name { width: auto; }
  & .lbuild .lb-bar .confirm { flex: 1 1 360px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--l-bad); border-radius: 4px; }
  & .lbuild .lb-bar .confirm[hidden] { display: none; }
  & .lbuild .lb-bar .confirm span { font-weight: 600; flex: 1 1 auto; }   /* Being built: set apart from the buildings above */
  & .lb-tbl .bld { color: var(--l-blue); font-size: .88em; }
  & .lbuild .lb-tbl tbody tr.on > * { background: var(--l-self); }
  & .lbuild .confirm { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--l-bad); border-radius: 4px; max-width: 70ch; }
  & .lbuild .confirm[hidden] { display: none; }
  & .lbuild .confirm p { margin: 0 0 8px; font-weight: 600; }

  /* Profile and Configuration: pinned under the menu, always in view. */
  & .line-foot { flex: none; border-top: 1px solid color-mix(in srgb, var(--l-gold) 45%, transparent); padding: 6px 0 10px 10px; color: var(--l-nav-ink); }
  & .line-foot ul { list-style: none; margin: 0; padding: 0; }
  & .line-foot a { display: flex; align-items: center; gap: 9px; padding: 5px 22px 5px 12px; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
  & .line-foot a::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: color-mix(in srgb, var(--l-nav-ink) 35%, transparent); flex: none; }
  & .line-foot a:hover { background: color-mix(in srgb, var(--l-nav-ink) 8%, transparent); }
  & .line-foot a[aria-current] { border-left-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 18%, transparent); font-weight: 600; }
  & .line-foot a[aria-current]::before { background: var(--l-gold); }

  /* Configuration and Profile pages. */
  & .lconfig .cf-themes { border: 0; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
  & .lconfig .cf-theme { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--l-line); border-radius: 4px; cursor: pointer; }
  & .lconfig .cf-theme:has(input:checked) { border-color: var(--l-gold); background: var(--l-self); }
  & .lconfig .chips { margin-left: auto; display: inline-flex; }
  & .lconfig .chips i { width: 14px; height: 14px; border: 1px solid var(--l-line); margin-left: -3px; border-radius: 50%; }
  & .lconfig .cf-check, & .lconfig .cf-clock label { display: flex; align-items: center; gap: 8px; }
  & .lconfig .cf-clock { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
  & .lconfig .cf-grid { display: grid; grid-template-columns: max-content minmax(0, 280px); gap: 8px 14px; align-items: center; }
  & .lconfig .cf-specimen { margin: 14px 0 10px; padding: 10px 12px; border: 1px solid var(--l-line); border-radius: 4px; }
  & .lconfig .cf-specimen .h { font: 600 1.25rem/1.3 var(--l-head-font); }
  & .lprofile table.kv { max-width: 520px; margin-bottom: 12px; }

  /* The chat box: a Chat button bottom right over the page; the box floats, moved by its bar, sized by its corner.
     (News cards sit bottom left, out of its way.) */
  & .lchat-btn { position: fixed; right: 20px; bottom: 16px; z-index: 35; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; padding: 7px 14px;
    background: var(--l-nav); color: var(--l-nav-ink); border: 1px solid var(--l-gold); border-radius: 15px; cursor: pointer; font: inherit; box-shadow: 0 4px 14px rgba(20, 15, 5, .25); }
  & .lchat-btn[aria-expanded="true"] { background: var(--l-gold); color: var(--l-nav); }
  & .lchat-btn .n:empty { display: none; }   /* no empty badge nudging the label off centre */
  & .lchat-btn .n:not(:empty) { min-width: 1.4em; padding: 0 5px; border-radius: 9px; background: var(--l-bad); color: #fff; font-size: .78em; line-height: 1.5; text-align: center; }
  /* New messages while the box is closed: the button flashes. Unread channels: a count in brackets, and a flash. */
  & .lchat-btn.flash { animation: l-flash 1.1s ease-in-out infinite; }
  & .lchat .has-unread { color: var(--l-ink); font-weight: 600; animation: l-tab-flash 1.6s ease-in-out infinite; }
  & .lchat .n { font-weight: 700; color: var(--l-bad); }
  @media (prefers-reduced-motion: reduce) { & .lchat-btn.flash, & .lchat .has-unread { animation: none; } & .lchat-btn.flash { background: var(--l-bad); border-color: var(--l-bad); color: #fff; } }
  & .lchat { position: fixed; right: 20px; bottom: 60px; z-index: 36; width: 380px; height: 440px; min-width: 300px; min-height: 260px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px);
    display: flex; flex-direction: column; resize: both; overflow: hidden; background: var(--l-page); color: var(--l-ink);
    border: 1px solid var(--l-frame); border-radius: 6px; box-shadow: 0 10px 30px rgba(20, 15, 5, .3); }
  & .lchat[hidden] { display: none; }
  & .lc-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; background: var(--l-nav); color: var(--l-nav-ink); cursor: move; user-select: none; touch-action: none; }
  & .lc-grip { background: none; border: 0; color: var(--l-nav-muted); cursor: move; font-size: 1.05em; padding: 2px 4px; }
  & .lc-title { font-family: var(--l-head-font); letter-spacing: .04em; color: var(--l-gold); }
  & .lc-tools { margin-left: auto; display: flex; gap: 4px; }
  & .lc-tool { background: transparent; color: var(--l-nav-ink); border: 1px solid color-mix(in srgb, var(--l-nav-ink) 35%, transparent); border-radius: 4px; padding: 1px 8px; cursor: pointer; font: inherit; font-size: .85em; }
  & .lc-tool[aria-pressed="true"] { background: var(--l-gold); border-color: var(--l-gold); color: var(--l-nav); }
  & .lc-tabs, & .lc-picks { flex: none; display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--l-line); margin: 0; }
  & .lc-tabs[hidden], & .lc-picks[hidden] { display: none; }
  & .lc-tabs [role=tab] { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0;
    padding: 4px 12px; margin-bottom: -1px; cursor: pointer; font: inherit; color: var(--l-muted); }
  & .lc-tabs [role=tab][aria-selected="true"] { color: var(--l-ink); background: var(--l-page); border-color: var(--l-line); font-weight: 600; }
  /* Mix: the channels as tickable tabs, in the tabs' own look; ticked ones are raised like the chosen tab. */
  & .lc-picks label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-bottom: -1px; cursor: pointer;
    color: var(--l-muted); border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; }
  & .lc-picks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  & .lc-picks .dot { width: 12px; height: 12px; border: 1px solid var(--l-line); border-radius: 2px; background: var(--field, var(--l-page)); display: inline-grid; place-items: center; }
  & .lc-picks label:has(input:checked) { color: var(--l-ink); background: var(--l-page); border-color: var(--l-line); font-weight: 600; }
  & .lc-picks label:has(input:checked) .dot { border-color: var(--l-gold); background: var(--l-gold); }
  & .lc-picks label:has(input:checked) .dot::after { content: ""; width: 3px; height: 7px; border: solid var(--l-page); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
  & .lc-picks label:has(input:focus-visible) { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lc-picks .ch-world:has(input:checked) { border-top: 2px solid var(--l-blue); }
  & .lc-picks .ch-realm:has(input:checked) { border-top: 2px solid var(--l-gold); }
  & .lc-picks .ch-state:has(input:checked) { border-top: 2px solid var(--l-good); }
  & .lc-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 6px 10px; font-size: .94em; line-height: 1.4; }
  & .lc-list li { padding: 2px 0; overflow-wrap: anywhere; }
  & .lc-list li.me { background: var(--l-self); }
  & .lc-list li.empty { color: var(--l-muted); font-style: italic; }
  & .lc-list time { color: var(--l-muted); font-size: .86em; font-variant-numeric: tabular-nums; }
  & .lc-list .who { font-weight: 600; }
  & .lc-list .from { font-weight: 400; color: var(--l-muted); font-size: .9em; }
  & .lc-list .tag { display: inline-block; width: 1.4em; margin-right: 4px; text-align: center; border-radius: 3px; font-size: .75em; font-weight: 700; color: var(--l-page); }
  & .lchat .ch-world .tag, & .lc-list .tag.ch-world { background: var(--l-blue); }
  & .lc-list .tag.ch-realm { background: var(--l-gold); }
  & .lc-list .tag.ch-state { background: var(--l-good); }
  & .lc-form { flex: none; display: flex; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid var(--l-line); }
  & .lc-form select[hidden] { display: none; }
  & .lc-form input { flex: 1; min-width: 0; }
  @media (max-width: 760px) {
    & .lchat-btn { right: 8px; bottom: 8px; }
    & .lchat { left: 8px !important; right: 8px; top: auto !important; bottom: 56px; width: auto !important; height: 60dvh !important; resize: none; }
  }

  /* Ornaments off: plain frame, plain rules. */
  &[data-line-orn="off"] {
    & .line-main > .room::before, & .line-page-h .orn-rule { display: none; }
    & .line-main > .room { outline: 0; }
  }

  /* The look panels (theme, fonts), under the header. */
  & .look-panel { position: fixed; top: 52px; right: 14px; z-index: 30; width: min(330px, calc(100vw - 28px)); display: grid; gap: 10px;
    background: var(--l-page); color: var(--l-ink); border: 1px solid var(--l-frame); outline: 1px solid color-mix(in srgb, var(--l-frame) 50%, transparent); outline-offset: -5px;
    box-shadow: 0 8px 24px rgba(30, 20, 5, .2); padding: 0 14px 14px; }
  & .look-panel[hidden] { display: none; }
  & .look-panel header { display: flex; align-items: center; gap: 10px; margin: 0 -14px; padding: 8px 14px; background: var(--l-nav); color: var(--l-nav-ink); }
  & .look-panel header b { font-family: var(--l-head-font); color: var(--l-gold); letter-spacing: .06em; }
  & .look-panel header .dim { color: var(--l-nav-muted); font-size: .85em; }
  & .look-panel .x { margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.2em; cursor: pointer; }
  & .look-panel label { display: grid; gap: 3px; font-size: .9em; color: var(--l-muted); }
  & .look-panel select { font: inherit; color: var(--l-ink); background: var(--field); border: 1px solid var(--l-line); border-radius: 4px; padding: 3px 6px; }
  & .look-panel .row { display: flex; gap: 8px; align-items: center; } & .look-panel .row input { flex: 1; }
  & .look-panel .themes { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
  & .look-panel .theme { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; color: var(--l-ink); cursor: pointer; }
  & .look-panel .theme:has(:checked) { background: var(--l-self); outline: 1px solid var(--l-frame); }
  & .look-panel .theme span:first-of-type { flex: 1; }
  & .look-panel .chips { display: flex; } & .look-panel .chips i { width: 14px; height: 14px; border: 1px solid var(--l-ink); margin-left: -1px; }
  & .look-panel .check { display: flex; flex-direction: row; gap: 8px; align-items: center; color: var(--l-ink); }
  & .look-panel .specimen { margin: 0; padding: 8px 10px; background: var(--l-self); border: 1px solid var(--l-line); font-variant-numeric: lining-nums tabular-nums; }
  & .look-panel .specimen .h { font: 600 1.2em var(--l-head-font); }
  & .look-panel .link { justify-self: start; background: none; border: 0; padding: 0; color: var(--l-blue); text-decoration: underline; cursor: pointer; font: inherit; }
  & .look-panel .small { font-size: .82em; margin: 0; }
  & .look-panel .dim { color: var(--l-muted); }
  & .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Phones: the page scrolls as a whole (the header and resources scroll away), the menu strip sticks to the top,
     the header is one line, the resources one sideways-scrolling row, and the leaf loses most of its margins. */
  @media (max-width: 760px) {
    & .line { height: auto; min-height: 100dvh; }
    & .line-body { display: block; }
    & .line-top { gap: 4px 10px; padding: 6px 10px; }
    & .line-top .brand .banner, & #l-ident, & .line-top .tick, & .vswitch-l, & .vswitch kbd { display: none; }
    & .line-top .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .line-top .end { margin-left: 0; gap: 6px; }
    & .line-top .btn { padding: 2px 8px; min-height: 2rem; }
    & .line-top #l-out { display: none; }   /* on phones, Sign out is the last item in the menu drawer */
    & .line-side .line-menu .out { display: block; }
    & .line-res { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 6px 10px; scrollbar-width: none; }
    & .line-res::-webkit-scrollbar { display: none; }
    & .line-res div { flex: none; }
    /* The menu: a drawer from the left behind the ☰ button, with the desktop menu's groups, sword and shield. */
    & .line-top .burger { display: inline-grid; place-items: center; width: 2.2rem; height: 2.1rem; padding: 0; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
    & .burger span, & .burger span::before, & .burger span::after { display: block; width: 18px; height: 2px; background: var(--l-nav-ink); border-radius: 1px; position: relative; content: ""; }
    & .burger span::before { position: absolute; top: -6px; } & .burger span::after { position: absolute; top: 6px; }
    & .burger[aria-expanded="true"] { background: var(--l-gold); border-color: var(--l-gold); }
    & .burger[aria-expanded="true"] span, & .burger[aria-expanded="true"] span::before, & .burger[aria-expanded="true"] span::after { background: var(--l-nav); }
    & .line-top { position: sticky; top: 0; z-index: 25; }
    & .line-side { position: fixed; top: 0; left: 0; bottom: 0; width: min(290px, 84vw); z-index: 60; transform: translateX(-102%); transition: transform .22s ease-out;
      border-right: 2px solid var(--l-gold); }   /* no shadow: closed, it reached into the screen's left edge */
    & .line-side.open { transform: none; }
    & .line-side:not(.open) .l-shield { display: none; }   /* it sits outside the drawer's edge */
    & .line-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(10, 8, 4, .45); }
    & .line-scrim[hidden] { display: none; }
    &.line-drawer body { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) { & .line-side { transition: none; } }
    & .line-main { overflow: visible; padding: 8px 0 30px; }
    & .line-main > .room { padding: 18px 12px 22px; min-width: 0; width: auto; border-left: 0; border-right: 0; box-shadow: none; outline-offset: -5px; }
    & .line-main > .room::before { inset: 2px; }
    & .line-page-h { margin: -6px -12px 12px; padding: 8px 12px 6px; }
    & .throne .tprot { margin: 6px -12px -22px; padding: 14px 12px; }
    & .line-main > .room:has(.throne.glyph)::after { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70%, 300px); }   /* centred on a phone */
    & .line-page-h h1 { font-size: 1.25rem; }
    & .look-panel { top: 46px; }
    & .toasts { right: 8px; left: 8px; bottom: 56px; width: auto; }
    /* Tables too wide for the screen become cards (cards.js marks them and labels their cells). */
    & .line-page .scrollx:has(> table.cards) { overflow: visible; }
    & .line-page table.cards, & .line-page table.cards tbody { display: block; width: 100%; min-width: 0; }
    & .line-page table.cards tr.card-head { display: none; }
    & .line-page table.cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 10px 6px; border-bottom: 1px solid var(--l-line); }
    & .line-page table.cards tr.card-group { display: block; padding: 14px 6px 4px; border-bottom: 3px double var(--l-line); }
    & .line-page table.cards tr.card-group > * { display: block; text-align: left; padding: 0; border: 0; }
    & .line-page table.cards td, & .line-page table.cards th { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; max-width: none; width: auto; overflow: visible; }
    & .line-page table.cards tr:not(.card-group) > :first-child { grid-column: 1 / -1; font-weight: 600; font-size: 1.05em; }
    & .line-page table.cards [data-label]::before { content: attr(data-label); display: block; font-size: .72em; letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--l-muted); font-weight: 400; }
    & .line-page table.cards td:empty, & .line-page table.cards td:not([data-label]):not(:first-child):has(> .btn:only-child) { grid-column: 1 / -1; }
    & .line-page table.cards td.wrap, & .line-page table.cards td.does { grid-column: 1 / -1; }
    & .line-page table.cards tr.lead-num > :first-child { font-size: .8em; font-weight: 400; color: var(--l-muted); }
    & .line-page table.cards tr.lead-num > :first-child::before { display: inline; margin-right: .4em; }
    & .line-page table.cards tr.lead-num > :nth-child(2) { grid-column: 1 / -1; font-weight: 600; font-size: 1.05em; }
    & .line-page table.cards tr.lead-num > :nth-child(2)::before { display: none; }
    & .line-page table.cards tr:is(.self, .tgt) { background: var(--self); } & .line-page table.cards tr:is(.self, .tgt) > * { background: transparent; }
    /* Lines that wouldn't wrap. */
    & .line-page .quote, & .line-page .ch-where, & .line-page .span { white-space: normal; overflow-wrap: break-word; }
    & .line-page .dform > .quote { grid-column: 1 / -1; }   /* a form's cost line spans the form, not one column */
    /* The train grid: name, gold, home, count; off/def and training go (Military's tables have them). */
    & .traingrid th:nth-child(2), & .traingrid td:nth-child(2), & .traingrid th:nth-child(5), & .traingrid td:nth-child(5) { display: none; }
    & .traingrid input[type=number] { width: 6.5ch; }
    & .traingrid .tg-tot { margin-left: 0; flex-basis: 100%; }
  }
  @media (max-width: 420px) { & .line-top .brand { display: none; } }   /* the house's name needs the room */
  & .line-menu .out { display: none; }
  & .burger { display: none; }

}

/* The War Room's panels in Straightline's look: room.css's variables take Straightline's values. */
:root[data-view="line"] .room-scope {
  --bone-bg: var(--l-bg); --pane: var(--l-page); --pane-2: color-mix(in srgb, var(--l-line) 30%, var(--l-page));
  --room-ink: var(--l-ink); --room-muted: var(--l-muted); --room-line: var(--l-line); --rule: var(--l-rule);
  --head: var(--l-page); --head-ink: var(--l-blue); --key: var(--l-gold);
  --moss: var(--l-blue); --moss-ink: var(--l-blue-ink); --rust: var(--l-bad); --up: var(--l-good); --down: var(--l-bad);
  --self: var(--l-self); --tgt: color-mix(in srgb, var(--l-bad) 14%, var(--l-page)); --focus: var(--l-gold);
  --ch-world: var(--l-blue); --ch-realm: var(--l-gold); --ch-state: var(--l-good);
  --room-mono: var(--l-body-font);
  --room-label: var(--l-body-font);
  --room-scale: calc(var(--l-size) / 13.5px);
  color-scheme: inherit;
}
:root[data-view="line"] .room-scope {
  font-variant-numeric: lining-nums tabular-nums;
  & .btn, & input, & select, & .room input, & .room select, & .seg button { border-radius: 4px; }
  & .btn { border-color: var(--l-line); }
  & .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18); }
  & .sub, & .dgrid .sub { font: 600 1rem/1.3 var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-ink);
    border-bottom: 3px double var(--l-line); padding-bottom: 3px; text-transform: none; }
  & .sub .dim { font-family: var(--l-body-font); font-variant-caps: normal; letter-spacing: 0; font-size: .8em; }
  & .tbl { width: auto; min-width: min(100%, 520px); }
  & .tbl th { font-variant-caps: all-small-caps; letter-spacing: .06em; }
  & .tbl td { border-bottom-style: solid; }
  & .dgrid { gap: 24px 30px; }
}

@keyframes l-flash { 0%, 100% { background: var(--l-nav); color: var(--l-nav-ink); } 50% { background: var(--l-bad); border-color: var(--l-bad); color: #fff; } }
@keyframes l-tab-flash { 0%, 100% { color: var(--l-ink); } 50% { color: var(--l-bad); } }
@keyframes l-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

:root[data-view="line"] {
  /* Military: Build's layout (it carries .lbuild), with its own summary, unit table, draft meter and workshop. */
  & .lmil .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 820px; margin-bottom: 6px; }
  & .lmil .mil-more { text-align: center; color: var(--l-muted); font-size: .9em; margin: 0 0 22px; }
  & .lmil .mil-from { display: flex; gap: 14px; font-size: .92em; }
  & .lmil .mil-from label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
  & .lpart.lmil table.mil-tbl { width: 100%; max-width: 1100px; table-layout: fixed; margin-top: 10px; }
  & .lmil .mil-tbl col.c-name { width: auto; } & .lmil .mil-tbl col.c-pt { width: 52px; } & .lmil .mil-tbl col.c-n3 { width: 78px; }
  & .lmil .mil-tbl col.c-n { width: 84px; } & .lmil .mil-tbl col.c-max { width: 76px; } & .lmil .mil-tbl col.c-each { width: 80px; } & .lmil .mil-tbl col.c-cost { width: 110px; }
  /* One size for every row and cell (upgraded rows included): only colour sets them apart. */
  & .lmil .mil-tbl tbody :is(td, th) { font-size: 1em; font-weight: 400; }
  /* Off and Def stay quiet until you point at the row, or it has a count. */
  & .lmil .mil-tbl td.pt { color: color-mix(in srgb, var(--l-muted) 70%, var(--l-page)); transition: color .12s; }
  & .lmil .mil-tbl tr:is(:hover, :focus-within, .on) td.pt { color: var(--l-ink); }
  & .lmil .mil-tbl th.pt { color: color-mix(in srgb, var(--l-muted) 70%, var(--l-page)); }
  & .lmil .mil-tbl td.each { color: var(--l-muted); }
  & .lmil .mil-tbl tbody :is(td, th) { vertical-align: middle; height: 36px; padding-block: 0; }
  & .lmil .mil-tbl input[type=number] { width: 100%; }
  & .lmil .mil-tbl tr.plus th[scope=row] { padding-left: 14px; }   /* "plus", not "upg": room.css shrinks tr.upg */
  & .lmil .mil-tbl .sub-mark { color: var(--l-muted); }
  & .lmil .note { color: var(--l-muted); font-size: .88em; margin: 8px 0 26px; }
  & .lmil [role=tabpanel] > .what:first-child { margin-top: 16px; }
  & .lmil .mil-card { max-width: 720px; margin: 18px 0 28px; }
  & .lmil .mil-card .lform { margin-top: 10px; }
  & .lmil .mil-now { margin: 10px 0 0; font-size: .92em; }
  & .lmil .mil-now.short { color: var(--l-bad); }
  /* The draft meter: how much is under arms, with a gold tick at the rate. */
  & .lmil .mil-meter { position: relative; height: 8px; margin: 14px 0 0; border-radius: 4px; background: color-mix(in srgb, var(--l-ink) 8%, var(--l-page)); }
  & .lmil .mil-meter .arm { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: color-mix(in srgb, var(--l-good) 65%, var(--l-page)); }
  & .lmil .mil-meter .aim { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--l-gold); }
  /* Workshop. */
  & .lpart.lmil table.mil-shop { width: 100%; max-width: 1000px; }
  & .lmil .mil-shop tbody :is(td, th) { vertical-align: middle; }
  & .lmil .mil-shop input[type=number] { width: 84px; }
  & .lmil .mil-shop tr.grp th { padding-top: 14px; font: 600 .82rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted); background: none; }
  & .lmil .mil-shop td.cost.short { color: var(--l-bad); }
  @media (max-width: 760px) { & .lmil .st-glance { grid-template-columns: repeat(2, 1fr); } & .lmil table.mil-tbl { min-width: 760px; } }
}

:root[data-view="line"] {
  /* Resources: refining, below the tables. */
  & .res2 .res-refine { max-width: 1000px; margin: 28px auto 0; }
  & .res2 .res-refine table.tbl { width: 100%; }
  & .res2 .res-refine tbody :is(td, th) { vertical-align: middle; }
  & .res2 .res-refine tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .res2 .res-refine input[type=number] { width: 84px; }
  & .res2 .res-refine td.cost.short { color: var(--l-bad); }
}

:root[data-view="line"] {
  /* Headings' numbers stand on the line, in faces that can (IM Fell can't: its numbers are old-style only). */
  & :is(h1, h2, h3, .st-glance dd) { font-variant-numeric: lining-nums; }
}

:root[data-view="line"] {
  /* Attack: target and how side by side, the order bar, the army table, armies coming home. Build's layout (.lbuild). */
  & .line-main > .room:has(.latk.glyph)::after { -webkit-mask-image: url("assets/sword.png"); mask-image: url("assets/sword.png"); }
  & .latk .atk-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px 40px; max-width: 1100px; margin-bottom: 18px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-find input { width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-card { min-height: 92px; padding: 12px 14px; border: 1px solid var(--l-rule); border-radius: 6px; background: color-mix(in srgb, var(--l-gold) 4%, var(--l-page)); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-card p { margin: 0; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-name { font: 1.15rem var(--l-head-font); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-name .addr { margin-left: 8px; font: .85rem var(--l-body-font); color: var(--l-muted); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 8px 0 0; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-facts dt { font-size: .78em; color: var(--l-muted); font-variant-caps: all-small-caps; letter-spacing: .08em; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-facts dd { margin: 0; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-card .short { margin-top: 8px; color: var(--l-bad); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-grid { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; align-items: center; margin-top: 8px; max-width: none; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-grid label { margin: 0; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-grid select { width: 100%; margin: 0; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-grid [hidden] { display: none; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-note { grid-column: 2; margin: -2px 0 4px; color: var(--l-muted); font-size: .88em; }
  & .latk .atk-bar { top: 36px; }
  & .lpart.latk table.atk-tbl { width: 100%; max-width: 820px; table-layout: fixed; margin-top: 8px; }
  & .latk .atk-tbl col.c-name { width: auto; } & .latk .atk-tbl col.c-pt { width: 56px; } & .latk .atk-tbl col.c-home { width: 92px; }
  & .latk .atk-tbl col.c-n { width: 92px; } & .latk .atk-tbl col.c-max { width: 76px; } & .latk .atk-tbl col.c-sum { width: 110px; }
  & .latk .atk-tbl tbody :is(td, th) { vertical-align: middle; height: 36px; padding-block: 0; font-size: 1em; font-weight: 400; }
  & .latk .atk-tbl tbody th[scope=row] { font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .latk .atk-tbl input[type=number] { width: 100%; }
  & .latk .atk-tbl input.over { border-color: var(--l-bad); }
  & .latk .atk-tbl td.pt { color: color-mix(in srgb, var(--l-muted) 70%, var(--l-page)); }
  & .latk .atk-tbl tr:is(:hover, :focus-within, .on) td.pt { color: var(--l-ink); }
  & .latk .atk-tbl td.sum { color: var(--l-muted); }
  & .latk .atk-tbl tr.grp th { padding-top: 14px; font: 600 .82rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-muted); background: none; height: auto; }
  & .latk .atk-check { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
  & .latk .note { color: var(--l-muted); font-size: .88em; margin: 8px 0 26px; }
  & dialog.atk-pickdlg { width: min(860px, calc(100vw - 32px)); }
  & dialog.atk-pickdlg #la-filter { width: 100%; margin: 10px 0; }
  & dialog.atk-pickdlg table.atk-picks { width: 100%; }
  & dialog.atk-pickdlg .atk-picks tbody tr { cursor: pointer; }
  & dialog.atk-pickdlg .atk-picks tbody tr:is(:hover, :focus) > * { background: color-mix(in srgb, var(--l-gold) 14%, var(--l-page)); outline: none; }
  & dialog.atk-pickdlg .atk-picks tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & dialog.atk-pickdlg .atk-picks tr.prot > * { color: var(--l-muted); }
  & dialog.atk-pickdlg .note { color: var(--l-muted); font-size: .88em; }
}

:root[data-view="line"] {
  & .latk .atk-intel { margin-top: 10px; }
  & .latk .atk-intel-h { margin: 0 0 4px; font-weight: 600; }
  & .latk .atk-intel table.tbl { width: 100%; max-width: 420px; }
  & .latk .atk-intel tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .latk .atk-intel .note { margin: 6px 0 0; }
  & dialog.atk-confirm { width: min(520px, calc(100vw - 32px)); }
  & dialog.atk-confirm #la-ask { font: 1.15rem var(--l-head-font); margin: 12px 0 10px; }
  & dialog.atk-confirm .atk-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
  & dialog.atk-confirm .atk-facts > div { display: contents; }
  & dialog.atk-confirm .atk-facts dt { color: var(--l-muted); }
  & dialog.atk-confirm .atk-facts dd { margin: 0; }
  & dialog.atk-confirm .atk-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  & dialog.atk-confirm { border-color: color-mix(in srgb, var(--l-bad) 60%, var(--l-frame)); }
}

:root[data-view="line"] {
  /* Attack score: the offense, line by line, like a ledger. */
  & .lpart.latk table.atk-score { width: 100%; max-width: 820px; margin: 8px 0 26px; }
  & .latk .atk-score th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; width: 34%; }
  & .latk .atk-score td.num { width: 110px; font-variant-numeric: tabular-nums; }
  & .latk .atk-score td.dim { font-size: .88em; }
  & .latk .atk-score tr.calc th { padding-left: 16px; color: var(--l-muted); }
  & .latk .atk-score tr.sum > * { border-top: 1px solid var(--l-line); }
  & .latk .atk-score tr.total > * { border-top: 3px double var(--l-line); font-weight: 600; }
  & .latk .atk-score tr.total td.num { color: var(--l-gold); font-size: 1.1em; }
}

:root[data-view="line"] {
  /* Attack, laid out: your choices on the left (how, the army), the battle sheet on the right (who, the score, the
     order), which stays in view as you scroll. One column on a narrow screen. */
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 0 44px; align-items: start; max-width: 1300px; margin: 0 auto 10px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-main > section { margin-bottom: 18px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-grid { max-width: 640px; }
  & .lpart.latk table.atk-tbl { max-width: none; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet { position: sticky; top: 46px; padding: 6px 18px 18px; border: 1px solid var(--l-rule); border-radius: 8px;
    background: color-mix(in srgb, var(--l-gold) 4%, var(--l-page)); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet h3.sub { margin-top: 12px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .atk-find { margin: 8px 0 10px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .atk-find input { width: 96px; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .atk-card { min-height: 0; background: var(--l-page); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .atk-intel table.tbl { max-width: none; }
  & .lpart.latk .atk-sheet table.atk-score { max-width: none; margin: 6px 0 12px; }
  & .latk .atk-score th[scope=row] { width: auto; }
  & .latk .atk-score th[scope=row] small { display: block; font-size: .8em; color: var(--l-muted); }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .doing { max-width: none; margin: 0 0 12px; font-size: .92em; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-go { display: flex; gap: 8px; justify-content: flex-end; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-go #la-go { margin-left: auto; }
  @media (max-width: 1100px) { & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-layout { grid-template-columns: 1fr; } & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet { position: static; margin-top: 10px; } }
}

:root[data-view="line"] {
  /* World: the page's full width; totals, then realm cards and the chosen realm, or every state ranked. */
  & .line-main > .room:has(.lworld) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lworld { max-width: 1400px; width: 100%; margin-inline: auto; }
  & .lworld .wd-glance { grid-template-columns: repeat(4, 1fr); max-width: 860px; margin-bottom: 22px; }
  & .lworld [role=tabpanel][hidden] { display: none; }
  & .lworld [role=tabpanel] { padding-top: 16px; }
  & .lworld .wd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  & .lworld .wd-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--l-rule); border-radius: 6px;
    background: var(--l-page); color: var(--l-ink); font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
  & .lworld .wd-card:hover { border-color: color-mix(in srgb, var(--l-gold) 60%, var(--l-rule)); }
  & .lworld .wd-card:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lworld .wd-card.on { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page)); box-shadow: inset 0 0 0 1px var(--l-gold); }
  & .lworld .wd-card.yours .wd-n { color: var(--l-gold); }
  & .lworld .wd-card.empty { opacity: .72; }
  & .lworld .wd-n { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--l-muted) 75%, var(--l-page)); }
  & .lworld .wd-name { font: 1.05rem/1.25 var(--l-head-font); }
  /* The realm's material: a tag at the card's bottom right, outline and fill faintly in the material's colour. */
  & .lworld .wd-mat { position: absolute; bottom: 9px; right: 10px; padding: 1px 8px; border-radius: 6px; font-size: .74em; line-height: 1.5; color: var(--l-ink);
    --mat: var(--l-muted); border: 1px solid color-mix(in srgb, var(--mat) 45%, transparent); background: color-mix(in srgb, var(--mat) 16%, var(--l-page)); }
  & .lworld .wd-mat[data-mat="bauxite"] { --mat: #b4643a; }
  & .lworld .wd-mat[data-mat="limestone"] { --mat: #9c9686; }
  & .lworld .wd-mat[data-mat="amber"] { --mat: #d99a2b; }
  & .lworld .wd-mat[data-mat="pine"] { --mat: #4f7f4a; }
  & .lworld .wd-mat[data-mat="sulfur"] { --mat: #c9b52a; }
  & .lworld .wd-mat[data-mat="paper"] { --mat: #c8b48a; }
  /* A realm card's material, as a faint watermark: three-quarters across, near the foot (as Throne's throne). */
  & .lworld .wd-card { position: relative; overflow: hidden; isolation: isolate; }
  & .lworld .wd-card.marked::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 74%; bottom: 6%; width: 48px; aspect-ratio: 1;
    transform: translateX(-50%); background: var(--l-ink); opacity: .07; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  & .lworld .wd-card.marked:hover::after { opacity: .11; }
  & .lworld .wd-figs { font-size: .88em; margin-top: 4px; font-variant-numeric: tabular-nums; }
  & .lworld .wd-lead { font-size: .82em; color: var(--l-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .lworld .wd-realm { margin-top: 28px; }
  & .lworld .wd-rhead { display: flex; align-items: center; gap: 10px; border-bottom: 3px double var(--l-line); padding-bottom: 6px; }
  & .lworld .wd-rhead h3 { flex: 1; margin: 0; font: 1.3rem var(--l-head-font); }
  & .lworld .wd-rhead h3 .dim { font: .9rem var(--l-body-font); margin-left: 8px; }
  & .lpart.lworld table.wd-tbl, & .lpart.lworld table.wd-rank { width: 100%; margin-top: 8px; }
  & .lworld :is(.wd-tbl, .wd-rank) tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .lworld :is(.wd-tbl, .wd-rank) tbody tr:hover > * { background: color-mix(in srgb, var(--l-gold) 12%, var(--l-page)); }
  & .lworld :is(.wd-tbl, .wd-rank) tbody tr.alt > * { background: color-mix(in srgb, var(--l-ink) 1.25%, transparent); }
  & .lworld :is(.wd-tbl, .wd-rank) tr.self > * { background: color-mix(in srgb, var(--l-gold) 10%, var(--l-page)); }
  & .lworld .wd-tbl tr.empty > * { color: var(--l-muted); }
  & .lworld .wd-tbl tr.empty a { color: inherit; }
  & .lworld .wd-rk { display: inline-block; min-width: 2.4em; margin-left: 4px; font-size: .82em; color: var(--l-gold); text-align: right; }
  & .lworld .wd-war { color: var(--l-bad); }
  & .lworld .wd-rank td.on { font-weight: 600; }
  & .lworld .wd-sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; }
  & .lworld [aria-sort=descending] .wd-sort { color: var(--l-ink); text-decoration: underline; text-decoration-color: var(--l-gold); text-underline-offset: 3px; }
  & .lworld .note { color: var(--l-muted); font-size: .88em; margin: 8px 0 0; }
  @media (max-width: 760px) { & .lworld .wd-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Build's Benefits: what a building gives now; resting on (or tabbing to) its name for 1.5 s fades in the next 1%.
     The two share one grid cell, so the row keeps the height of the longer and never jumps. Leaving swaps back at once. */
  & .lbuild .lb-tbl .bn { display: grid; }
  & .lbuild .lb-tbl .bn > * { grid-area: 1 / 1; align-self: center; transition: opacity .2s, visibility 0s; }
  & .lbuild .lb-tbl .bn-next { opacity: 0; visibility: hidden; color: color-mix(in srgb, var(--l-gold) 75%, var(--l-ink)); }
  & .lbuild .lb-tbl .bn-next b { font-weight: 600; }
  & .lbuild .lb-tbl tr:has(th[scope=row]:is(:hover, :focus-within)) .bn-now { opacity: 0; visibility: hidden; transition: opacity .25s 1.5s, visibility 0s 1.75s; }
  & .lbuild .lb-tbl tr:has(th[scope=row]:is(:hover, :focus-within)) .bn-next { opacity: 1; visibility: visible; transition: opacity .25s 1.5s, visibility 0s 1.5s; }
  @media (prefers-reduced-motion: reduce) { & .lbuild .lb-tbl .bn > * { transition-duration: 0s !important; } }
}

:root[data-view="line"] {
  /* Build & Raze: building names semibold (Military and Attack share .lbuild, so this names the two lists). */
  & :is(#lb-rows, #lb-rz-rows) .lb-tbl tbody th[scope=row] { font-weight: 600; }
}

:root[data-view="line"] {
  /* Attack's sheet now holds How too: a narrower label column, and it scrolls itself if it outgrows the window. */
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet .atk-grid { grid-template-columns: 64px 1fr; gap: 6px 10px; max-width: none; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-sheet { max-height: calc(100dvh - 60px); overflow-y: auto; }
  & :is(.latk, .lint, .lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .lmkt, .llead, .lwar) .atk-main > h3.sub:first-child { margin-top: 0; }
}

:root[data-view="line"] {
  /* World: a realm's states as cards too; each one opens that state's page. */
  & .lworld .wd-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
  & .lworld .wd-scard { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--l-rule); border-radius: 6px;
    background: var(--l-page); color: var(--l-ink); text-decoration: none; transition: border-color .12s, background .12s, transform .12s; }
  & .lworld .wd-scard:hover { border-color: color-mix(in srgb, var(--l-gold) 60%, var(--l-rule)); background: color-mix(in srgb, var(--l-gold) 5%, var(--l-page)); }
  & .lworld .wd-scard:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lworld .wd-scard.yours { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page)); }
  & .lworld .wd-scard.yours .wd-n { color: var(--l-gold); }
  & .lworld .wd-scard.empty { opacity: .72; }
  /* At war: the whole card washed red (border and ground), not a side bar. */
  & .lworld .wd-scard.war { border-color: color-mix(in srgb, var(--l-bad) 45%, var(--l-rule)); background: color-mix(in srgb, var(--l-bad) 8%, var(--l-page)); }
  & .lworld .wd-scard.war:hover { border-color: color-mix(in srgb, var(--l-bad) 70%, var(--l-rule)); background: color-mix(in srgb, var(--l-bad) 12%, var(--l-page)); }
  & .lworld .wd-hs { font-size: .85em; color: var(--l-muted); }
  & .lworld .wd-figs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 2px; padding-top: 6px; border-top: 1px solid var(--l-rule); font-variant-numeric: tabular-nums; }
  & .lworld .wd-f { display: flex; flex-direction: column; font-size: .9em; }
  & .lworld .wd-fl { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--l-muted); }
  & .lworld .wd-f .wd-rk { min-width: 0; margin-left: 5px; text-align: left; }
  & .lworld .wd-foot { font-size: .8em; color: var(--l-muted); }
}

:root[data-view="line"] {
  /* Realm cards: a set height whatever they hold, and air between the realm's number and its name. */
  & .lworld .wd-card { min-height: 144px; }
  & .lworld .wd-card .wd-name { margin-top: 6px; }
}

:root[data-view="line"] {
  /* World › States: List or Cards. Cards: one row a realm, seven states across; pointing at a state at war lights its foe. */
  & .lworld .wd-shead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  & .lworld .wd-shead .what { margin: 0; }
  & .lworld .wd-views { display: flex; gap: 0; }
  & .lworld .wd-views .btn { border-radius: 0; margin-left: -1px; }
  & .lworld .wd-views .btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
  & .lworld .wd-views .btn:last-child { border-radius: 0 4px 4px 0; }
  & .lworld .wd-views .btn[aria-pressed=true] { background: color-mix(in srgb, var(--l-gold) 16%, var(--l-page)); border-color: var(--l-gold); }
  & .lworld .wd-grid[hidden], & .lworld #wd-list[hidden] { display: none; }
  & .lworld .wd-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  & .lworld .wd-grow { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 6px; }
  & .lworld .wd-rlabel { display: flex; flex-direction: column; align-items: center; justify-content: center; font: 1.1rem var(--l-head-font); color: var(--l-muted); }
  & .lworld .wd-rlabel span { display: none; }
  & .lworld .wd-gcard { display: flex; flex-direction: column; gap: 1px; min-height: 108px; padding: 7px 8px; border: 1px solid var(--l-rule); border-radius: 6px;
    background: var(--l-page); color: var(--l-ink); text-decoration: none; font-size: .86em; transition: border-color .12s, background .12s, box-shadow .12s; }
  & .lworld .wd-gcard:hover { border-color: color-mix(in srgb, var(--l-gold) 60%, var(--l-rule)); }
  & .lworld .wd-gcard:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lworld .wd-gcard .wd-n { font-size: .72em; }
  & .lworld .wd-gname { font: .98rem/1.4 var(--l-head-font); max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  & .lworld .wd-gcard .wd-hs { font-size: .8em; }
  & .lworld .wd-gfigs { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; font-variant-numeric: tabular-nums; }
  & .lworld .wd-gf { display: flex; flex-direction: column; font-size: .82em; color: var(--l-gold); }
  & .lworld .wd-gf span { font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
  & .lworld .wd-gwar { font-size: .74em; color: var(--l-bad); margin-top: 2px; }
  & .lworld .wd-gcard.yours { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page)); }
  & .lworld .wd-gcard.yours .wd-n { color: var(--l-gold); }
  & .lworld .wd-gcard.empty { opacity: .6; }
  & .lworld .wd-gcard.war { border-color: color-mix(in srgb, var(--l-bad) 45%, var(--l-rule)); background: color-mix(in srgb, var(--l-bad) 7%, var(--l-page)); }
  & .lworld .wd-gcard.lit { border-color: var(--l-bad); background: color-mix(in srgb, var(--l-bad) 16%, var(--l-page)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--l-bad) 45%, transparent); }
  @media (max-width: 1100px) { & .lworld .wd-grid { overflow-x: auto; } & .lworld .wd-grow { min-width: 980px; } }
}

:root[data-view="line"] {
  /* Wars: totals, then the wars being fought, ceasefires and wars ended; your state's rows tinted gold. */
  & .line-main > .room:has(.lwars) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lwars { max-width: 1400px; width: 100%; margin-inline: auto; }
  & .lwars .wr-glance { grid-template-columns: repeat(4, 1fr); max-width: 860px; margin-bottom: 22px; }
  & .lwars section { margin-bottom: 28px; }
  & .lpart.lwars table.wr-tbl { width: 100%; }
  & .lwars .wr-tbl tbody :is(td, th) { vertical-align: middle; }
  & .lwars .wr-tbl td.vs, & .lwars .wr-tbl th.vs { text-align: center; color: var(--l-bad); font-variant-caps: all-small-caps; letter-spacing: .06em; width: 3em; }
  & .lwars .wr-tbl td.lead { color: var(--l-good); font-weight: 600; }
  & .lwars .wr-tbl td:not(:has(a)) { white-space: nowrap; }   /* ticks, kinds and points on one line; only names wrap */
  & .lwars .wr-tbl tbody tr.alt > * { background: color-mix(in srgb, var(--l-ink) 1.25%, transparent); }
  & .lwars .wr-tbl tbody tr:hover > * { background: color-mix(in srgb, var(--l-gold) 12%, var(--l-page)); }
  & .lwars .wr-tbl tr.self > * { background: color-mix(in srgb, var(--l-gold) 10%, var(--l-page)); }
  & .lwars .wr-you { font-size: .75em; padding: 0 5px; border: 1px solid var(--l-gold); border-radius: 4px; color: var(--l-gold); }
  @media (max-width: 760px) { & .lwars .wr-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Wars: the balance of land, side A's share of the two now (filled) and when the war began (the gold mark). */
  & .lwars .wr-bal { min-width: 130px; }
  & .lwars .wr-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--l-bad) 30%, var(--l-page)); overflow: visible; }
  & .lwars .wr-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px 0 0 4px; background: color-mix(in srgb, var(--l-ink) 45%, var(--l-page)); }
  & .lwars .wr-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--l-gold); }
  & .lwars .wr-delta { display: block; margin-top: 3px; font-size: .82em; font-variant-numeric: tabular-nums; }
  & .lwars .wr-delta .up { color: var(--l-good); } & .lwars .wr-delta .down { color: var(--l-bad); }
}

:root[data-view="line"] {
  /* Wars: tracking one war, four small charts (houses, land, might, renown), side A ink, side B red. */
  & .lwars tr.wr-trackrow > td { background: color-mix(in srgb, var(--l-gold) 4%, var(--l-page)) !important; padding: 12px 14px; }
  & .lwars .wr-legend { margin: 0 0 8px; font-size: .9em; color: var(--l-muted); }
  & .lwars :is(.wr-legend, .wr-chart) b.a { color: var(--l-ink); } & .lwars :is(.wr-legend, .wr-chart) b.b { color: var(--l-bad); }
  & .lwars .wr-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  & .lwars .wr-chart { margin: 0; padding: 8px 10px 6px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); }
  & .lwars .wr-chart figcaption { display: flex; justify-content: space-between; font-weight: 600; font-size: .88em; margin-bottom: 4px; }
  & .lwars .wr-chart figcaption span { font-weight: 400; font-variant-numeric: tabular-nums; }
  & .lwars .wr-chart svg { display: block; width: 100%; height: 84px; }
  & .lwars .wr-chart polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  & .lwars .wr-chart polyline.a { stroke: color-mix(in srgb, var(--l-ink) 75%, var(--l-page)); }
  & .lwars .wr-chart polyline.b { stroke: var(--l-bad); }
  & .lwars .wr-chart line.start { stroke: var(--l-gold); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  & .lwars .wr-axis { display: flex; justify-content: space-between; font-size: .72em; color: var(--l-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
}

:root[data-view="line"] {
  & dialog.wr-dlg { width: min(1000px, calc(100vw - 32px)); }
  & dialog.wr-dlg h2 .vs { color: var(--l-bad); font-size: .75em; font-variant-caps: all-small-caps; margin: 0 4px; }
  & dialog.wr-dlg .wr-legend { margin: 12px 0 10px; font-size: .9em; color: var(--l-muted); }
  & dialog.wr-dlg .wr-legend b.a { color: var(--l-ink); } & dialog.wr-dlg .wr-legend b.b { color: var(--l-bad); }
}

:root[data-view="line"] {
  /* Intrigue: Attack's layout (cards of operations on the left, the sheet on the right), then the reports. */
  & .line-main > .room:has(.lint) { max-width: none; width: auto; min-width: 0; }
  & .line-main > .room:has(.lint.glyph)::after { -webkit-mask-image: url("assets/broken-shield.png"); mask-image: url("assets/broken-shield.png"); }
  & .lint .in-glance { grid-template-columns: repeat(4, 1fr); max-width: 860px; margin-bottom: 20px; }
  & .lint .what { max-width: none; margin-top: 0; }
  & .lint .in-grp { margin-bottom: 14px; }
  & .lint .in-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 6px; }
  & .lint .in-op { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 11px; border: 1px solid var(--l-rule); border-radius: 6px;
    background: var(--l-page); color: var(--l-ink); font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
  & .lint .in-op:hover { border-color: color-mix(in srgb, var(--l-gold) 60%, var(--l-rule)); }
  & .lint .in-op:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lint .in-op.on { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 10%, var(--l-page)); box-shadow: inset 0 0 0 1px var(--l-gold); }
  & .lint .in-name { font: 1rem/1.25 var(--l-head-font); }
  & .lint .in-does { font-size: .84em; color: var(--l-muted); }
  & .lint .in-figs { display: flex; gap: 10px; margin-top: auto; padding-top: 4px; font-size: .78em; color: var(--l-muted); }
  & .lint .in-figs b { color: var(--l-ink); font-weight: 600; }
  & .lint .in-chosen p { margin: 0; }
  & .lint .in-cname { font: 1.1rem var(--l-head-font); margin-top: 10px !important; }   /* air under the heading's rule */
  & .lint .in-cdoes { margin: 2px 0 4px !important; }
  & .lint .atk-sheet .lform { margin-top: 10px; }
  & .lint .atk-sheet .lform .field { display: flex; gap: 6px; }
  & .lint .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & .lint .atk-sheet .doing { max-width: none; margin: 10px 0; font-size: .92em; }
  & .lint .in-reps { max-width: 1300px; margin: 26px auto 0; }
  & .lint .in-replist { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; margin-top: 10px; }
  /* Spy reports: a faint parchment tint with a fine grain over it, like a page from the field (an SVG noise, no image file). */
  & .lint .in-rep { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--l-gold) 30%, var(--l-rule)); border-radius: 6px;
    background-color: color-mix(in srgb, var(--l-gold) 6%, var(--l-page));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  & .lint .in-rep table.tbl, & .lint .in-rep .tbl :is(td, th) { background: transparent; }
  & .lint .in-rep header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; font-size: .9em; }
  & .lint .in-rk { font: 600 .78rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-bad); }
  & .lpart.lint .in-rep table.tbl { width: 100%; }
  & .lint .in-rep tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-muted); text-align: left; width: 32%; vertical-align: top; }
  & .lint .in-rep td:not(.num) { text-align: right; }
}

:root[data-view="line"] {
  /* Rites: Intrigue's layout (.lint) under three tabs; what's on you as cards; the adept forms. */
  & .lrite > .ltabs { margin-bottom: 14px; }
  & .lrite [role=tabpanel][hidden] { display: none; }
  & .lrite .in-op.cant .in-figs b { color: var(--l-bad); }
  & .lrite .in-figs .need { color: var(--l-bad); }
  & .lrite #lr-tw[hidden] { display: none; }
  & .lrite .rt-force { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  & .lrite .rt-fcard, & .lrite .rt-dcard { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); }
  & .lrite .rt-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
  & .lrite .rt-dcard p { margin: 0; }
  & .lrite .rt-dcard .in-name b { margin-left: 6px; color: var(--l-gold); }
  & .lrite .rt-veng { margin: 4px 0; padding-left: 18px; }
  & .lrite .mil-card { max-width: 720px; margin: 8px 0 28px; }
  & .lrite .mil-card .lform { margin-top: 10px; }
  & .lrite .mil-now { margin: 10px 0 0; font-size: .92em; }
}

:root[data-view="line"] {
  /* Science: totals; the three categories as cards (rank, the way to the next); paper and moving scientists; then each
     category's sciences, every row with its own Invest. */
  & .line-main > .room:has(.lsci) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lsci { max-width: 1300px; width: 100%; margin-inline: auto; }
  & .lsci .sc-glance { grid-template-columns: repeat(4, 1fr); max-width: 860px; margin-bottom: 20px; }
  & .lsci .sc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  & .lsci .sc-cat { padding: 12px 14px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); }
  & .lsci .sc-cat.focus { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 7%, var(--l-page)); }
  & .lsci .sc-cat header { display: flex; align-items: center; justify-content: space-between; }
  & .lsci .sc-cat h3 { margin: 0; font: 1.2rem var(--l-head-font); }
  & .lsci .sc-focus { font-size: .74em; padding: 1px 8px; border: 1px solid var(--l-gold); border-radius: 6px; color: var(--l-gold); }
  & .lsci .sc-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 8px; }
  & .lsci .sc-figs dt { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
  & .lsci .sc-figs dd { margin: 0; font-variant-numeric: tabular-nums; }
  & .lsci .sc-rank, & .lsci .sc-next { margin: 0; font-size: .88em; }
  & .lsci .sc-next { color: var(--l-muted); font-size: .8em; margin-top: 3px; }
  & :is(.lsci, .lcol, .lwork, .lwon, .llead) .sc-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--l-ink) 8%, var(--l-page)); overflow: hidden; }
  & :is(.lsci, .lcol, .lwork, .lwon, .llead) .sc-bar i { display: block; height: 100%; background: var(--l-gold); }
  & .lsci .sc-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; margin-top: 14px; }
  & .lsci .sc-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 12px; border: 1px solid var(--l-rule); border-radius: 6px; }
  & .lsci .sc-tool h3.sub { flex-basis: 100%; margin: 0; }
  & .lsci .sc-tool .what { flex-basis: 100%; margin: 0 0 4px; max-width: none; font-size: .88em; }
  & .lsci .sc-tool .field { display: flex; align-items: center; gap: 6px; }
  & .lsci .sc-tool input[type=number] { width: 90px; }
  & .lsci .note { color: var(--l-muted); font-size: .85em; margin: 12px 0 18px; }
  & .lsci .sc-grp { margin-bottom: 20px; }
  & .lpart.lsci table.sc-tbl { width: 100%; table-layout: fixed; margin-top: 6px; }
  & .lsci .sc-tbl col.c-name { width: 15%; } & .lsci .sc-tbl col.c-does { width: auto; } & .lsci .sc-tbl col.c-inv { width: 86px; } & .lsci .sc-tbl col.c-now { width: 16%; }
  & .lsci .sc-tbl col.c-n { width: 96px; } & .lsci .sc-tbl col.c-max { width: 62px; } & .lsci .sc-tbl col.c-after { width: 17%; } & .lsci .sc-tbl col.c-go { width: 80px; }
  & .lsci .sc-tbl tbody :is(td, th) { vertical-align: middle; font-size: 1em; }
  & .lsci .sc-tbl tbody th[scope=row] { font: 600 1em var(--l-body-font); font-variant-caps: normal; letter-spacing: 0; color: var(--l-ink); text-align: left; }
  & .lsci .sc-tbl td.does { color: var(--l-muted); font-size: .88em; }
  & .lsci .sc-tbl input[type=number] { width: 100%; }
  & .lsci .sc-tbl td.after { color: var(--l-good); font-size: .9em; }
  & .lsci .sc-tbl td.after.short { color: var(--l-bad); }
  & .lsci .sc-tbl tbody tr.alt > * { background: color-mix(in srgb, var(--l-ink) 1.25%, transparent); }
  & .lsci .sc-tbl tbody tr:hover > * { background: color-mix(in srgb, var(--l-gold) 10%, transparent); }
  & .lsci .sc-tbl tbody tr.on > * { background: var(--l-self); }
  @media (max-width: 900px) { & .lsci .sc-glance { grid-template-columns: repeat(2, 1fr); } & .lsci .sc-grp { overflow-x: auto; } & .lpart.lsci table.sc-tbl { min-width: 860px; } }
}

:root[data-view="line"] {
  /* Academics: Attack's layout; academics as cards on the left, the Recruit sheet (attributes as chips) on the right. */
  & .line-main > .room:has(.lacad) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lacad { max-width: 1300px; width: 100%; margin-inline: auto; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 20px; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-glance dd .of { font-size: .62em; color: var(--l-muted); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 8px; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-card { padding: 11px 13px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-card.waver { border-color: var(--l-bad); background: color-mix(in srgb, var(--l-bad) 6%, var(--l-page)); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-card h4 { margin: 0 0 6px; font: 1.1rem var(--l-head-font); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-attrs { margin: 0 0 8px; padding: 0; list-style: none; font-size: .9em; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-attrs li { margin: 2px 0; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-rec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding-top: 6px; border-top: 1px solid var(--l-rule); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-rec dt { font-size: .68em; letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-rec dd { margin: 0; font-size: .88em; font-variant-numeric: tabular-nums; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-waver { margin: 8px 0 0; font-size: .86em; color: var(--l-bad); }
  & .lacad .note { color: var(--l-muted); font-size: .86em; margin: 12px 0 0; }
  & .lacad .atk-sheet .lform .field { display: flex; gap: 6px; }
  & .lacad .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chips { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chips legend { font-size: .86em; color: var(--l-muted); margin-bottom: 4px; padding: 0; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border: 1px solid var(--l-rule); border-radius: 6px; cursor: pointer; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip:has(input:disabled:not(:checked)) { opacity: .55; cursor: default; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip.on { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 10%, var(--l-page)); }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip input { margin-top: 3px; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip > span { display: flex; flex-direction: column; font-size: .9em; }
  & :is(.lacad, .lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-chip .dim { font-size: .88em; }
  & .lacad .atk-sheet .doing { max-width: none; margin: 12px 0; font-size: .9em; }
}

:root[data-view="line"] {
  /* Generals: Academics' cards and chips; a main-general badge, the actions row, the heirs list. */
  & .line-main > .room:has(.lgen) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lgen { max-width: 1300px; width: 100%; margin-inline: auto; }
  & .lgen .gn-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 20px; }
  & .lgen .gn-glance dd .of { font-size: .62em; color: var(--l-muted); }
  & :is(.lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  & :is(.lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .ac-card header h4 { margin: 0; }
  & .lgen .gn-card.def { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 6%, var(--l-page)); }
  & :is(.lgen, .lcol, .ltru, .lwork, .lwon, .lhall, .llead, .lwar) .gn-badge { font-size: .72em; padding: 1px 8px; border: 1px solid var(--l-gold); border-radius: 6px; color: var(--l-gold); }
  & .lgen .gn-where { margin: 4px 0 6px; font-size: .86em; color: var(--l-muted); }
  & .lgen .gn-rec { grid-template-columns: repeat(3, 1fr); }
  & :is(.lgen, .lcol, .ltru, .lwork, .lwon, .lacad, .lhall, .llead, .lwar) .gn-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  & .lgen .note { color: var(--l-muted); font-size: .86em; margin: 12px 0 0; }
  & .lgen .gn-heirs { margin-top: 24px; }
  & .lgen .gn-hlist { margin: 8px 0 0; padding-left: 22px; }
  & .lgen .gn-hlist li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--l-rule); }
  & .lgen .gn-hlist li.over { opacity: .65; }
  & .lgen .gn-hn { font-weight: 600; }
  & .lgen .gn-hb { margin-left: auto; display: flex; gap: 4px; }
  & .lgen .atk-sheet .lform .field { display: flex; gap: 6px; }
  & .lgen .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & .lgen .atk-sheet .doing { max-width: none; margin: 12px 0; font-size: .9em; }
}

:root[data-view="line"] {
  /* Heirs: one ordered list, rows you drag (a gold line shows where it lands), a rule where your slots end. */
  & .line-main > .room:has(.lheirs) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lheirs { max-width: 900px; width: 100%; margin-inline: auto; }
  & .lheirs .hr-glance { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
  & .lheirs .what { max-width: none; text-align: center; }
  & .lheirs .hr-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  & .lheirs .hr-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); cursor: grab; position: relative; }
  & .lheirs .hr-row:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 1px; }
  & .lheirs .hr-row:hover { border-color: color-mix(in srgb, var(--l-gold) 55%, var(--l-rule)); }
  & .lheirs .hr-row.dragging { opacity: .45; }
  & .lheirs .hr-row.drop-above::before, & .lheirs .hr-row.drop-below::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--l-gold); }
  & .lheirs .hr-row.drop-above::before { top: -5px; } & .lheirs .hr-row.drop-below::after { bottom: -5px; }
  & .lheirs .hr-row.over { opacity: .62; }
  & .lheirs .hr-grip { color: var(--l-muted); letter-spacing: -2px; cursor: grab; }
  & .lheirs .hr-n { min-width: 1.6em; font: 1.2rem var(--l-head-font); color: var(--l-gold); text-align: center; }
  & .lheirs .hr-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1; min-width: 0; }
  & .lheirs .hr-who .dim { flex-basis: 100%; font-size: .85em; }
  & .lheirs .hr-kind { font-size: .7em; padding: 0 6px; border: 1px solid var(--l-rule); border-radius: 6px; color: var(--l-muted); text-transform: uppercase; letter-spacing: .06em; }
  & .lheirs .hr-b { display: flex; gap: 4px; }
  & .lheirs .hr-cut { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: .82em; color: var(--l-bad); }
  & .lheirs .hr-cut::before, & .lheirs .hr-cut::after { content: ""; flex: 1; border-top: 1px dashed var(--l-bad); }
  & .lheirs .hr-empty { padding: 12px; text-align: center; }
  & .lheirs .hr-rest { margin-top: 28px; }
  & .lheirs .hr-others { list-style: none; margin: 8px 0 0; padding: 0; }
  & .lheirs .hr-others li { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--l-rule); }
  @media (max-width: 760px) { & .lheirs .hr-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] { & .lheirs .hr-full { margin: 6px 0 0; font-size: .88em; color: var(--l-muted); } }

:root[data-view="line"] {
  /* Colloquium, Truths & Quests, Realm Work, World Wonders: the card-and-sheet pages. */
  & .line-main > .room:has(:is(.lcol, .ltru, .lwork, .lwon)) { max-width: none; width: auto; min-width: 0; }
  & .lpart:is(.lcol, .ltru, .lwork, .lwon) { max-width: 1300px; width: 100%; margin-inline: auto; }
  & :is(.lcol, .ltru) .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 20px; }
  & :is(.lcol, .ltru, .lwork, .lwon) .atk-main > h3.sub:not(:first-child) { margin-top: 24px; }
  & :is(.lcol, .lwork, .lwon, .llead) .co-does { margin: 4px 0 8px; font-size: .9em; }
  & .lcol .co-card.on { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 7%, var(--l-page)); }
  & .lcol .co-card.locked { opacity: .6; }
  & .lcol .co-tier, & .lcol .co-meta { margin: 4px 0; font-size: .86em; }
  & .lcol .co-meta { color: var(--l-muted); font-size: .8em; }
  & .lcol .co-meta .down { color: var(--l-bad); }
  & .lcol .co-lock { color: var(--l-bad); font-size: .86em; margin: 0; }
  & .ltru .tq-card .tq-ask { margin: 8px 0 4px; }
  & .ltru .tq-ok { color: var(--l-good); margin: 0 0 4px; }
  & .ltru .tq-truth.known { border-color: color-mix(in srgb, var(--l-good) 50%, var(--l-rule)); }
  & .ltru .tq-truth p { margin: 6px 0 0; }
  & .ltru .tq-none { padding: 10px 0; }
  & :is(.ltru, .lwon, .lwar) dialog.tq-dlg { width: min(480px, calc(100vw - 32px)); }
  & :is(.ltru, .lwon, .lwar) dialog.tq-dlg .atk-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
  & .lwork .wk-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 4px auto 22px; max-width: 760px; }
  & .lwork .wk-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--l-rule); border-radius: 6px; color: var(--l-muted); }
  & .lwork .wk-steps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: .8em; }
  & .lwork .wk-steps li.done { color: var(--l-good); border-color: color-mix(in srgb, var(--l-good) 45%, var(--l-rule)); }
  & .lwork .wk-steps li.now { color: var(--l-ink); border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page)); }
  & :is(.lwork, .lwon, .llead) .wk-fund, & .lwork .wk-votes { margin: 8px 0 2px; font-size: .9em; }
  & .lwon .wo-cost { margin: 0 0 6px; font-size: .84em; color: var(--l-muted); }
  & .lwon .wo-card.standing { border-color: color-mix(in srgb, var(--l-good) 50%, var(--l-rule)); }
  & .lwon .wo-card.known { border-color: var(--l-gold); }
  & .lwon .wo-halls { margin-top: 24px; }
  & :is(.lcol, .ltru, .lwork, .lwon) .atk-sheet .lform .field { display: flex; gap: 6px; }
  & :is(.lcol, .ltru, .lwork, .lwon) .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & :is(.lcol, .ltru, .lwork, .lwon) .atk-sheet .doing { max-width: none; margin: 12px 0; font-size: .9em; }
  & :is(.lcol, .ltru, .lwork, .lwon) .atk-sheet .what { max-width: none; font-size: .88em; }
  @media (max-width: 760px) { & :is(.lcol, .ltru) .st-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Intrigue's operations: one group at a time, ‹ NAME › above its cards, a dot for each group below. */
  & .lint .in-car { margin-top: 6px; }
  & .lint .in-carh { display: flex; align-items: center; justify-content: center; gap: 14px; padding-bottom: 6px; border-bottom: 3px double var(--l-line); }
  & .lint .in-gname { margin: 0; min-width: 9em; text-align: center; font: 600 1.05rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .14em; }
  & .lint .in-arrow { min-width: 34px; font-size: 1.1rem; line-height: 1; padding: 4px 8px; }
  & .lint .in-car .in-cards { margin-top: 10px; }
  & .lint .in-gwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  & .lint .in-dots { display: flex; justify-content: center; gap: 9px; margin: 0; }
  & .lint .in-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--l-gold) 70%, var(--l-rule)); background: transparent; cursor: pointer; }
  & .lint .in-dot.on { background: var(--l-gold); border-color: var(--l-gold); }
  & .lint .in-dot:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 2px; }
}

:root[data-view="line"] {
  /* Intrigue's reports open: a pointer on the card; the window with the full report, changes and earlier ones. */
  /* No border highlight when hovered or focused: a soft lift instead (keyboard focus still shows). */
  & .lint .in-rep { cursor: pointer; transition: box-shadow .12s; }
  & .lint .in-rep:is(:hover, :focus-visible) { outline: none; box-shadow: 0 2px 10px color-mix(in srgb, var(--l-ink) 12%, transparent); }
  & dialog.in-rdlg h2 .in-rk { font: 600 .8em var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--l-bad); margin-right: 6px; }
  & dialog.in-rdlg .in-rmeta { margin: 10px 0 6px; color: var(--l-muted); font-size: .9em; }
  & dialog.in-rdlg { width: min(1040px, calc(100vw - 32px)); }
  & dialog.in-rdlg .in-rtop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
  & dialog.in-rdlg .in-rcmpl { font-size: .88em; color: var(--l-muted); display: flex; align-items: baseline; gap: 8px; }
  & dialog.in-rdlg .in-rglance { grid-template-columns: repeat(4, 1fr); max-width: none; margin: 6px 0 4px; }
  & dialog.in-rdlg .in-rgroups { columns: 400px 2; column-gap: 26px; }
  & dialog.in-rdlg .lb-grp { break-inside: avoid; padding-top: 10px; margin-bottom: 8px; }
  & dialog.in-rdlg .lb-grp > h3.sub { margin-top: 0; }
  & dialog.in-rdlg table.in-rb { table-layout: fixed; margin-top: 0; }
  & .lint .in-rsum td.num.dim { color: var(--l-muted); font-size: .88em; }
  & dialog.in-rdlg .in-rb col.c-n, & dialog.in-rdlg .in-rb col.c-b, & dialog.in-rdlg .in-rb col.c-d { width: 70px; } & dialog.in-rdlg .in-rb col.c-pct { width: 64px; }
  & dialog.in-rdlg .in-rb tbody th[scope=row] { font-weight: 600; color: var(--l-ink); }
  & dialog.in-rdlg .in-rb tr.none :is(th, td) { color: var(--l-muted); font-weight: 400; opacity: .7; }
  & dialog.in-rdlg :is(.up) { color: var(--l-good); } & dialog.in-rdlg :is(.down) { color: var(--l-bad); }
  @media (max-width: 760px) { & dialog.in-rdlg .in-rglance { grid-template-columns: repeat(2, 1fr); } }
  & dialog.in-rdlg table.tbl { width: 100%; }
  & dialog.in-rdlg tbody th[scope=row] { font: inherit; font-variant-caps: normal; letter-spacing: 0; color: var(--l-muted); text-align: left; vertical-align: top; }
  & dialog.in-rdlg .in-rfull td:not(.num) { text-align: right; }
  & dialog.in-rdlg td.up { color: var(--l-good); } & dialog.in-rdlg td.down { color: var(--l-bad); }
  & dialog.in-rdlg .atk-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
}

:root[data-view="line"] {
  /* Intrigue's report pages; Configuration's tabs and the Intrigue checklist. */
  & .lint .in-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 4px; }
  & .lint .in-pager .btn.mini { min-width: 32px; }
  & .lint .in-pager .btn.mini.on { background: var(--l-gold); border-color: var(--l-gold); color: var(--l-page); }
  & .lint .in-pager .gap { color: var(--l-muted); padding: 0 2px; }
  & .lint .in-pager .small { margin-left: 8px; }
  & .lconfig > .ltabs { margin-bottom: 14px; }
  & .lconfig .cf-pins { border: 0; padding: 0; margin: 0; columns: 220px 3; column-gap: 24px; }
  & .lconfig .cf-pins .cf-pgrp { break-inside: avoid; margin-bottom: 12px; }
  & .lconfig .cf-pins h4 { margin: 0 0 4px; font: 600 .95rem var(--l-head-font); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--l-muted); }
  & .lconfig .cf-pins label { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
  & .lconfig table.cf-news { width: min(620px, 100%); }
  & .lconfig .cf-news :is(th, td) { vertical-align: middle; }
  & .lconfig .cf-news th[scope=row] { text-align: left; font: inherit; font-variant-caps: normal; letter-spacing: 0; padding: 6px 12px 6px 4px; }
  & .lconfig .cf-news .cf-nk { display: grid; gap: 1px; }
  & .lconfig .cf-news th[scope=row] b { font-weight: 600; color: var(--l-ink); }
  & .lconfig .cf-news thead th:not(:first-child), & .lconfig .cf-news td { text-align: center; width: 76px; }
  & .lconfig .cf-news input { width: 16px; height: 16px; cursor: pointer; }
  & .lconfig .cf-news input:disabled { cursor: not-allowed; }
  & .lconfig .cf-news tr.off th[scope=row] { opacity: .55; }
  & .lconfig .cf-pinbtns { display: flex; gap: 8px; margin-top: 6px; }
}

:root[data-view="line"] {
  /* News and Rankings: their own pages. */
  & .line-main > .room:has(:is(.lnews, .lranks)) { max-width: none; width: auto; min-width: 0; }
  & .lpart:is(.lnews, .lranks) { max-width: 1100px; width: 100%; margin-inline: auto; }
  & :is(.lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 18px; }
  & .lnews .nw-tools, & .lranks .rk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; }
  & .lnews .nw-tools label:not(.cf-check), & .lranks .rk-tools label { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--l-muted); }
  & .lnews .nw-tools .cf-check { display: flex; align-items: center; gap: 6px; }
  & .lnews .nw-tools #ln-count { margin-left: auto; }
  & .lnews .nw-day { margin: 18px 0 2px; }
  & .lnews .nw-list { list-style: none; margin: 0; padding: 0; }
  & .lnews .nw-list > li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 7px 8px; border-bottom: 1px solid var(--l-rule); border-left: 3px solid transparent; }
  & .lnews .nw-list > li time { color: var(--l-muted); font-size: .86em; font-variant-numeric: tabular-nums; }
  & .lnews .nw-list > li.nw-bad { border-left-color: var(--l-bad); }
  & .lnews .nw-list > li.nw-bad span { color: var(--l-bad); }
  & .lnews .nw-list > li.nw-good { border-left-color: color-mix(in srgb, var(--l-good) 55%, transparent); }
  & .lnews .nw-list > li.nw-tick { color: var(--l-muted); font-size: .9em; }
  & .lnews .nw-list > li.nw-battle { align-items: start; }
  & .lnews .nw-more { display: flex; justify-content: center; margin: 16px 0; }
  & .lnews .nw-empty { padding: 20px 0; }
  & .lranks .ltabs { margin-bottom: 12px; }
  & .lranks .rk-tools input { width: min(280px, 100%); }
  & .lranks .rk-tools .small { margin-left: auto; }
  & .lranks table.rk-tbl { width: 100%; }
  & .lranks .rk-tbl th[scope=row] { text-align: left; font: inherit; font-variant-caps: normal; letter-spacing: 0; font-weight: 600; }
  & .lranks .rk-tbl tr.self { background: color-mix(in srgb, var(--l-gold) 14%, var(--l-page)); }
  & .lranks .rk-tbl tr.ours { background: color-mix(in srgb, var(--l-gold) 6%, var(--l-page)); }
  & .lranks .rk-tbl tr.tgt th[scope=row]::after { content: ' · your target'; color: var(--l-bad); font-weight: 400; font-size: .85em; }
  & .lranks .rk-tbl td.acts { white-space: nowrap; text-align: right; }
  & .lranks .rk-tbl td.acts .btn + .btn { margin-left: 4px; }
  & .lranks .rk-flag { font-size: .75em; font-weight: 400; color: var(--l-muted); border: 1px solid var(--l-rule); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
  @media (max-width: 760px) { & :is(.lnews, .lranks, .lhall, .lmkt, .llead, .lwar) .st-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Hall of Deeds: its own page. */
  & .line-main > .room:has(.lhall) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lhall { max-width: 1300px; width: 100%; margin-inline: auto; }
  & .lhall .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 18px; }
  & .lhall .ltabs { margin-bottom: 12px; }
  & .lhall .hl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
  & .lhall .hl-tools .btn[aria-pressed=true] { background: var(--l-gold); border-color: var(--l-gold); color: var(--l-page); }
  & .lhall .hl-tools .small { margin-left: auto; }
  & .lhall .hl-card.own { border-color: var(--l-gold); }
  & .lhall .hl-card p { margin: 4px 0; }
  & .lhall .hl-price { font-size: .95em; }
  & .lhall .hl-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--l-rule); }
  & .lhall .hl-move input { width: 110px; }
  & .lhall .hl-move [data-held] { flex-basis: 100%; }
  & .lhall .hl-how { display: grid; gap: 4px; }
  & .lhall .hl-how label { display: flex; align-items: center; gap: 6px; }
  & .lhall .atk-sheet .lform .field { display: flex; align-items: center; gap: 6px; }
  & .lhall .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & .lhall .atk-sheet .doing { max-width: none; margin: 12px 0; font-size: .9em; }
  & .lhall .hl-rules { margin-top: 16px; }
  & .lhall table.hl-tbl { width: 100%; }
  & .lhall .hl-tbl th[scope=row] { text-align: left; font: inherit; font-variant-caps: normal; letter-spacing: 0; font-weight: 600; }
  & .lhall .hl-tbl td.acts { white-space: nowrap; text-align: right; }
  & .lhall .hl-tbl td.acts .btn + .btn { margin-left: 4px; }
  @media (max-width: 760px) { & .lhall .st-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Market: its own page. */
  & .line-main > .room:has(.lmkt) { max-width: none; width: auto; min-width: 0; }
  & .lpart.lmkt { max-width: 1300px; width: 100%; margin-inline: auto; }
  & .lmkt .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 18px; }
  & .lmkt .atk-main > h3.sub:not(:first-child) { margin-top: 22px; }
  & .lmkt .mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  & .lmkt .mk-card { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--l-rule); border-radius: 6px; background: var(--l-page); color: var(--l-ink); font: inherit; cursor: pointer; }
  & .lmkt .mk-card:hover { border-color: color-mix(in srgb, var(--l-gold) 60%, var(--l-rule)); }
  & .lmkt .mk-card.on { border-color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 9%, var(--l-page)); }
  & .lmkt .mk-card:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 2px; }
  & .lmkt .mk-name { font: 1.1rem var(--l-head-font); }
  & .lmkt .mk-held { font-size: .88em; }
  & .lmkt .mk-px { display: flex; gap: 10px; font-size: .84em; color: var(--l-muted); }
  & .lmkt .mk-px b { color: var(--l-ink); font-weight: 600; }
  & .lmkt .mk-where { font-size: .8em; }
  & .lmkt .mk-book { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  & .lmkt .mk-book table { width: 100%; }
  & .lmkt .mk-book caption { text-align: left; font-size: .85em; color: var(--l-muted); padding-bottom: 4px; }
  & .lmkt .mk-book td.acts, & .lmkt .mk-orders td.acts { text-align: right; white-space: nowrap; }
  & .lmkt table.mk-orders { width: 100%; }
  & .lmkt .mk-orders td.up { color: var(--l-good); } & .lmkt .mk-orders td.down { color: var(--l-bad); }
  & .lmkt .mk-side { display: flex; gap: 14px; }
  & .lmkt .mk-side label, & .lmkt .mk-tr { display: flex; align-items: center; gap: 6px; }
  & .lmkt .atk-sheet .lform .field { display: flex; align-items: center; gap: 6px; }
  & .lmkt .atk-sheet .lform .field input { flex: 1; min-width: 0; }
  & .lmkt .atk-sheet .doing { max-width: none; margin: 12px 0 6px; font-size: .9em; }
  & .lmkt .mk-rules { margin-top: 14px; }
  @media (max-width: 760px) { & .lmkt .st-glance { grid-template-columns: repeat(2, 1fr); } & .lmkt .mk-book { grid-template-columns: 1fr; } }
}

:root[data-view="line"] {
  /* Leadership and War: their own pages. */
  & .line-main > .room:has(:is(.llead, .lwar)) { max-width: none; width: auto; min-width: 0; }
  & .lpart:is(.llead, .lwar) { max-width: 1300px; width: 100%; margin-inline: auto; }
  & :is(.llead, .lwar) .st-glance { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin-bottom: 18px; }
  & .llead .ltabs { margin-bottom: 14px; }
  & .llead .ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
  & .llead .ld-grid .lform { margin: 8px 0; }
  & .llead .ld-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: .92em; }
  & .llead .ld-big { margin: 4px 0; font-size: 1.1rem; }
  & .llead .ld-grid .doing { max-width: none; margin: 8px 0; font-size: .88em; }
  & :is(.llead, .lwar) .lform .field { display: flex; align-items: center; gap: 6px; }
  & :is(.llead, .lwar) .lform .field input { flex: 1; min-width: 0; }
  & :is(.llead, .lwar) .atk-sheet .doing { max-width: none; margin: 12px 0; font-size: .9em; }
  & :is(.llead, .lwar) .atk-main > h3.sub:not(:first-child) { margin-top: 22px; }
  & .lwar .wr-card p { margin: 6px 0; }
  & .lwar table.wr-tbl { width: 100%; }
  & .lwar .wr-tbl th[scope=row] { text-align: left; font: inherit; font-variant-caps: normal; letter-spacing: 0; font-weight: 600; }
  & .lwar .wr-tbl td.acts { text-align: right; }
  & .lwar .wr-tbl :is(th, td) { vertical-align: middle; }
  & .lwar .wr-relh { margin-top: 26px; }
  & .lwar .wr-tbl td.up { color: var(--l-good); }
  & .lwar .wr-meter { position: relative; display: block; width: 120px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--l-rule) 70%, transparent); overflow: hidden; margin-bottom: 3px; }
  & .lwar .wr-meter i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--l-gold) 70%, transparent); }
  & .lwar .wr-meter.rel-hostile i, & .lwar .wr-meter.rel-war i { background: var(--l-bad); }
  & .lwar .wr-meter b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--l-muted); }
  & .lwar .wr-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  @media (max-width: 760px) { & :is(.llead, .lwar) .st-glance { grid-template-columns: repeat(2, 1fr); } }
}

:root[data-view="line"] {
  /* Rites' groups ride Intrigue's carousel; a quiet line under the header says what the group is. */
  & .lrite .in-gnote { margin: 6px 0 0; text-align: center; }
}