/* The new look, step 3 (docs/NEW-LOOK.md): the desk and an opened file. Boards "Main", "Desk-phone", "File", "File-phone"
   (docs/new-look/mockups/gen.cjs, sections "1 · THE DESK" and "2 · A FILE"). Markup is desk-view.js; every class here is
   prefixed nld-. Flat color, 1.5px ink rules, square corners, no shadows. Linked after new-look.css and waterfront.css. */

/* ── the page ── */
.hos-places .nld-desk {
  --nld-ink: var(--nl-ink, #0f2027); --nld-snow: var(--nl-snow, #eef2f1); --nld-card: var(--nl-card, #fbfcfb); --nld-fjord: var(--nl-fjord, #0e4f58);
  --nld-red: var(--nl-red, #c2371d); --nld-mint: var(--nl-mint, #bfe3df); --nld-sun: var(--nl-sun, #f2c230); --nld-rule: var(--nl-rule, #b3bfbe); --nld-dim: var(--nl-dim, #44575c);
  box-sizing: border-box; background: var(--nld-snow); color: var(--nld-ink); font-family: var(--nl-sans, "Familjen Grotesk", sans-serif); font-size: 15px; line-height: 1.4;
  padding: 26px 32px 40px; min-height: 100%;
}
.hos-places .nld-desk *, .hos-places .nld-layer * { box-sizing: border-box; }
.hos-places .nld-desk h1, .hos-places .nld-desk h2, .hos-places .nld-desk p, .hos-places .nld-layer h1, .hos-places .nld-layer p { margin: 0; }
.hos-places .nld-desk p, .hos-places .nld-layer p { color: inherit; }
.hos-places .nld-desk small, .hos-places .nld-layer small { color: inherit; font-size: inherit; }
.hos-places .nld-desk h1, .hos-places .nld-layer h1 { font-family: var(--nl-serif, Newsreader, Georgia, serif); font-weight: 500; letter-spacing: -.01em; color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-cap { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-mono { font-family: var(--nl-mono, "Martian Mono", monospace); font-size: 12px; letter-spacing: .01em; }
.hos-places :is(.nld-desk, .nld-layer) .nld-dim { color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-good { color: #1c6b45; font-weight: 700; }
.hos-places :is(.nld-desk, .nld-layer) .nld-warn { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hos-places .nld-desk :focus-visible, .hos-places .nld-layer :focus-visible { outline: 3px solid var(--nld-fjord); outline-offset: 2px; }
.hos-places .nld-desk h1:focus, .hos-places .nld-layer h1:focus { outline: none; }

/* every button inside the desk starts from nothing; each class below says what it is */
.hos-places .nld-desk button, .hos-places .nld-layer button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0; }
.hos-places .nld-desk button:hover:not(:disabled), .hos-places .nld-layer button:hover:not(:disabled) { background: none; border-color: currentColor; }
.hos-places .nld-desk button:disabled, .hos-places .nld-layer button:disabled { cursor: default; opacity: .5; }

/* heading */
.hos-places :is(.nld-desk, .nld-layer) .nld-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-head h1 { font-size: 42px; line-height: 1.05; }
.hos-places :is(.nld-desk, .nld-layer) .nld-head-sub { color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-search { margin-left: auto; align-self: center; display: block; }
.hos-places :is(.nld-desk, .nld-layer) .nld-search input { width: 220px; min-height: 36px; padding: 0 10px; border: 1px solid var(--nld-rule); border-radius: 0; background: var(--nld-card); color: var(--nld-ink); font: inherit; font-size: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-meta { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-bottom: 12px; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding: 8px 0; margin-bottom: 18px; border-top: 1px solid var(--nld-rule); border-bottom: 1px solid var(--nld-rule); font-family: var(--nl-mono, monospace); }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger .nld-cap { font-family: var(--nl-sans, sans-serif); }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger-cell { display: inline-flex; flex-direction: column; gap: 1px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger-cell small { font-family: var(--nl-sans, sans-serif); font-size: 12px; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger-cell b { font-size: 12px; font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-ledger-cell.warn b { color: var(--nld-red); }

/* layout */
.hos-places :is(.nld-desk, .nld-layer) .nld-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.hos-places :is(.nld-desk, .nld-layer) .nld-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* the numbered sheets */
.hos-places :is(.nld-desk, .nld-layer) .nld-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; column-gap: 12px; row-gap: 6px; align-content: start; align-items: baseline; min-height: 150px; padding: 14px 16px;
  background: var(--nld-card); border: 1px solid var(--nld-rule); color: var(--nld-ink); width: 100%; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet > * { display: block; grid-column: 1 / -1; min-width: 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet:hover:not(:disabled) { background: var(--nld-card); border-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-num { grid-column: 1; font-size: 34px; font-weight: 300; line-height: 1; color: var(--nld-fjord); font-variant-numeric: tabular-nums; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-cap { grid-column: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-kind { font-family: var(--nl-mono, monospace); font-size: 12px; color: var(--nld-dim); text-transform: uppercase; letter-spacing: .02em; text-align: right; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-title { font-family: var(--nl-serif, Georgia, serif); font-size: 20px; line-height: 1.2; font-weight: 500; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-line { color: var(--nld-dim); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-left { font-size: 13px; color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-cost { font-size: 13px; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet-cost.bad { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chip { display: inline-block; font-family: var(--nl-mono, monospace); font-size: 12px; border: 1px solid var(--nld-ink); padding: 3px 8px; white-space: nowrap; }
/* the first sheet: large, with a red rule */
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet.nld-first { border-top: 4px solid var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet.nld-first .nld-num { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet.nld-big { grid-column: 1 / -1; grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: 22px; row-gap: 6px; padding: 20px 24px; min-height: 0; align-items: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-num { grid-column: 1; grid-row: 1 / span 8; align-self: center; font-size: 110px; line-height: .8; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big > * { grid-column: 2; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-sheet-cap { justify-content: flex-start; gap: 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-cap { font-family: var(--nl-mono, monospace); font-size: 12px; letter-spacing: .01em; font-weight: 400; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-kind::before { content: "\00b7\00a0\00a0"; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-kind { margin-left: 8px; text-align: left; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-sheet-title { font-size: 32px; line-height: 1.1; margin: 2px 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-sheet-line { font-size: 15px; color: var(--nld-ink); max-width: 560px; -webkit-line-clamp: 4; }
.hos-places :is(.nld-desk, .nld-layer) .nld-big .nld-chips { margin-top: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-open { grid-column: 3 !important; grid-row: 1 / span 8; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; background: var(--nld-ink); color: var(--nld-snow); border: 1.5px solid var(--nld-ink); font-weight: 600; font-size: 15px; white-space: nowrap; }
.hos-places :is(.nld-desk, .nld-layer) .nld-sheet:focus-visible { outline-offset: 3px; }

/* optional items, alerts, notes: compact lists */
.hos-places :is(.nld-desk, .nld-layer) .nld-group { margin-top: 18px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-group-head .nld-dim { font-size: 13px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-rows { display: flex; flex-direction: column; }
.hos-places :is(.nld-desk, .nld-layer) .nld-rows.nld-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-content: start; }
.hos-places :is(.nld-desk, .nld-layer) .nld-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 6px 0; border-top: 1px solid var(--nld-rule); color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-row:hover:not(:disabled) { background: none; border-color: var(--nld-rule); border-top-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-row-dept { width: 104px; flex: none; }
.hos-places :is(.nld-desk, .nld-layer) .nld-row-title { flex: 1; min-width: 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-row-go { margin-left: auto; flex: none; }
.hos-places :is(.nld-desk, .nld-layer) .nld-tag { flex: none; font-family: var(--nl-mono, monospace); font-size: 12px; color: var(--nld-dim); border: 1px solid var(--nld-rule); padding: 1px 6px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-tag-warn { color: var(--nld-red); border-color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 38px; padding: 6px 0; border-top: 1px solid var(--nld-rule); }
.hos-places :is(.nld-desk, .nld-layer) .nld-note-text { flex: 1; min-width: 220px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-read { opacity: .55; }
.hos-places :is(.nld-desk, .nld-layer) .nld-note-acts { display: flex; gap: 8px; margin-left: auto; }
.hos-places :is(.nld-desk, .nld-layer) .nld-note-acts button { min-height: 32px; padding: 0 10px; border: 1px solid var(--nld-ink); font-size: 13px; font-weight: 600; text-align: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-note-acts button:hover:not(:disabled) { background: var(--nld-ink); color: var(--nld-snow); border-color: var(--nld-ink); }

/* the foot: sign off */
.hos-places :is(.nld-desk, .nld-layer) .nld-foot { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 14px; border-top: 1.5px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--nld-ink); font-weight: 600; font-size: 15px; text-align: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn.nld-ink { background: var(--nld-ink); color: var(--nld-snow); }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn.nld-ink:hover:not(:disabled) { background: var(--nld-fjord); color: var(--nld-snow); border-color: var(--nld-fjord); }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn.nld-outline { background: transparent; color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn.nld-outline:hover:not(:disabled) { background: var(--nld-ink); color: var(--nld-snow); border-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-btn.nld-wide { width: 100%; margin-top: 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-left-count { font-weight: 400; font-family: var(--nl-mono, monospace); font-size: 12px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-clear { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; margin-bottom: 14px; background: var(--nld-card); border: 1px solid var(--nld-rule); border-left: 4px solid var(--nld-fjord); }
.hos-places :is(.nld-desk, .nld-layer) .nld-clear b { font-family: var(--nl-serif, Georgia, serif); font-size: 22px; font-weight: 500; }

/* the side cards */
.hos-places :is(.nld-desk, .nld-layer) .nld-card { padding: 16px 18px; background: var(--nld-card); border: 1px solid var(--nld-rule); color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-card > .nld-cap { display: block; margin-bottom: 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-squares { display: flex; gap: 4px; margin: 10px 0 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-squares span { flex: 1; height: 18px; border: 1.5px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-squares span.on { background: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-squares span.now { background: var(--nld-sun); }
.hos-places :is(.nld-desk, .nld-layer) .nld-unopened { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 0; border-top: 1px solid var(--nld-rule); }
.hos-places :is(.nld-desk, .nld-layer) .nld-unopened:hover:not(:disabled) { border-top-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-unopened svg { flex: none; }
.hos-places :is(.nld-desk, .nld-layer) .nld-unopened b { display: block; font-size: 16px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-unopened small { display: block; color: var(--nld-dim); font-size: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-office { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 34px; padding: 6px 0; border-top: 1px solid var(--nld-rule); }
.hos-places :is(.nld-desk, .nld-layer) .nld-office:hover:not(:disabled) { border-top-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-office b { font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-office small { margin-left: auto; font-family: var(--nl-mono, monospace); font-size: 12px; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .hos-places :is(.nld-desk, .nld-layer) .nld-office.wait small { color: var(--nld-ink); font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-office.slip small { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-office.hand small { color: var(--nld-fjord); }
.hos-places :is(.nld-desk, .nld-layer) .nld-office em { font-style: normal; font-family: var(--nl-mono, monospace); font-size: 12px; background: var(--nld-sun); color: var(--nld-ink); padding: 0 6px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-office.nld-world { flex-direction: column; gap: 2px; align-items: flex-start; border-top: 0; padding-top: 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-office.nld-world small { margin-left: 0; font-family: var(--nl-sans, sans-serif); color: var(--nld-red); font-size: 13px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; background: var(--nld-sun); border: 1px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-tray-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--nld-rule); }
.hos-places :is(.nld-desk, .nld-layer) .nld-tray-item small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-record-boxes { display: flex; gap: 4px; margin: 4px 0 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-record-boxes i { width: 22px; height: 14px; border: 1.5px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-record-boxes i.on { background: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-market { padding: 12px 18px; background: var(--nld-card); border: 1px solid var(--nld-rule); }

/* the chief of staff: the one mint card on the desk */
.hos-places :is(.nld-desk, .nld-layer) .nld-chief { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--nld-mint); border: 1.5px solid var(--nld-ink); color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief .nld-cap { color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-read { font-family: var(--nl-serif, Georgia, serif); font-size: 18px; line-height: 1.3; color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-brief summary { cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: underline; min-height: 44px; display: flex; align-items: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-group { margin-top: 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-read { font-size: 14px; margin: 2px 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-metrics { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-metric { font-size: 12px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-metric.warn b { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-brief-metric.good b { color: #1c6b45; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-rows { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(15, 32, 39, .25); font-size: 13px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-rows dt { font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-rows dd { margin: 0; text-align: right; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-rows dd.warn { color: var(--nld-red); font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-heat { display: block; height: 8px; border: 1.5px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-heat i { display: block; height: 100%; background: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-acts { display: flex; gap: 8px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-acts button { flex: 1; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--nld-ink); font-weight: 600; text-align: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-chief-acts button:hover:not(:disabled) { background: var(--nld-ink); color: var(--nld-snow); border-color: var(--nld-ink); }

/* things that other files draw (the aide, the promise calendar, the world feed, world prices, the election notice), set in the desk's own type */
.hos-places :is(.nld-desk, .nld-layer) .nld-side .gd-note, .hos-places :is(.nld-desk, .nld-layer) .nld-side .cal, .hos-places :is(.nld-desk, .nld-layer) .nld-side .hm-election, .hos-places .nld-desk .hm-election, .hos-places :is(.nld-desk, .nld-layer) .nld-side .dk-market { box-sizing: border-box; background: var(--nld-card) !important; color: var(--nld-ink) !important; border: 1px solid var(--nld-rule) !important; border-radius: 0 !important; box-shadow: none !important; }
.hos-places :is(.nld-desk, .nld-layer) .nld-side .hm-election, .hos-places .nld-desk .hm-election { padding: 14px 18px; margin: 0; }
.hos-places .nld-desk .hm-election p, .hos-places .nld-desk .hm-election li, .hos-places .nld-desk .gd-note span, .hos-places .nld-desk .gd-rem { color: var(--nld-ink) !important; }
.hos-places .nld-desk .hm-election.hm-win { border-left: 4px solid #1c6b45 !important; }
.hos-places .nld-desk .hm-election.hm-lose { border-left: 4px solid var(--nld-red) !important; }
.hos-places .nld-desk .hm-election .hx-label, .hos-places .nld-desk .gd-note-head { color: var(--nld-dim) !important; font-size: 12px; letter-spacing: .13em; font-weight: 600; }
.hos-places .nld-desk .gd-note button, .hos-places .nld-desk .cal button { border: 1px solid var(--nld-ink) !important; background: transparent !important; color: var(--nld-ink) !important; border-radius: 0 !important; min-height: 32px; }
.hos-places .nld-desk .gd-note button:hover:not(:disabled), .hos-places .nld-desk .cal button:hover:not(:disabled) { background: var(--nld-ink) !important; color: var(--nld-snow) !important; }
.hos-places .nld-desk .gd-note label, .hos-places .nld-desk .gd-toggle { color: var(--nld-dim) !important; }

/* ── an opened file (desktop): docket | the file | your answer ── */
.hos-places .nld-desk-file { padding-top: 26px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-file { display: grid; grid-template-columns: 210px minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.hos-places :is(.nld-desk, .nld-layer) .nld-docket { border-right: 1px solid var(--nld-rule); padding-right: 18px; align-self: stretch; min-height: 560px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-backbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: 18px; border: 1.5px solid var(--nld-ink); font-weight: 600; font-size: 15px; background: transparent; }
.hos-places :is(.nld-desk, .nld-layer) .nld-backbtn:hover:not(:disabled) { background: var(--nld-ink); color: var(--nld-snow); border-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-docket-row { border-top: 1px solid var(--nld-rule); padding: 8px 0; }
.hos-places :is(.nld-desk, .nld-layer) .nld-docket-row .nld-mono { margin-top: 2px; word-break: break-word; }
.hos-places :is(.nld-desk, .nld-layer) .nld-kind-red { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-file-title { font-size: 42px; line-height: 1.05; margin: 6px 0 14px !important; }
.hos-places :is(.nld-desk, .nld-layer) .nld-lead { font-family: var(--nl-serif, Georgia, serif); font-size: 20px; line-height: 1.45; max-width: 640px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-cols.nld-one { grid-template-columns: minmax(0, 640px); }
.hos-places :is(.nld-desk, .nld-layer) .nld-know { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-asks { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-ask { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-ask i { font-style: normal; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-rel.good { color: #1c6b45; }
.hos-places :is(.nld-desk, .nld-layer) .nld-rel.bad { color: var(--nld-red); }
.hos-places :is(.nld-desk, .nld-layer) .nld-conseq { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--nld-rule); max-width: 640px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* your answer: the one mint panel */
.hos-places :is(.nld-desk, .nld-layer) .nld-answer { display: flex; flex-direction: column; gap: 8px; align-self: start; padding: 18px; background: var(--nld-mint); border: 1.5px solid var(--nld-ink); color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-answer .nld-cap { color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-answer-line { font-family: var(--nl-serif, Georgia, serif); font-size: 22px; line-height: 1.15; margin-bottom: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-answer-sub { margin-top: 6px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt { display: flex; flex-direction: column; gap: 1px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1.5px solid var(--nld-ink); background: transparent; color: var(--nld-ink); line-height: 1.25; }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt-t { display: block; font-size: 16px; font-weight: 600; }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt-t em { font-style: normal; font-weight: 400; }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt-s { display: block; font-size: 13px; font-weight: 400; }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt:hover:not(:disabled), .hos-places :is(.nld-desk, .nld-layer) .nld-opt.nld-ink { background: var(--nld-ink); color: var(--nld-snow); border-color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-opt:disabled { opacity: .55; border-style: dashed; }
.hos-places :is(.nld-desk, .nld-layer) .nld-answer-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--nld-ink); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-link { display: inline; padding: 0; border: 0; background: none; color: var(--nld-fjord); text-decoration: underline; font: inherit; min-height: 0; }
.hos-places .nld-desk .nld-link:hover:not(:disabled), .hos-places .nld-layer .nld-link:hover:not(:disabled) { color: var(--nld-ink); background: none; }
.hos-places :is(.nld-desk, .nld-layer) .nld-jobs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-job { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1.5px solid var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-job small { font-size: 13px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-job-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-job-acts button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--nld-ink); font-weight: 600; text-align: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-job-acts button:first-child { background: var(--nld-ink); color: var(--nld-snow); }
.hos-places :is(.nld-desk, .nld-layer) .nld-job-acts button:hover:not(:disabled) { background: var(--nld-fjord); color: var(--nld-snow); border-color: var(--nld-fjord); }

/* ── the phone ── */
html.hos-phone .hos-places .nld-phone { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - var(--ph-header-h, 56px)); }
html.hos-phone .hos-places .nld-phone .nld-head { align-items: baseline; flex-wrap: wrap; margin: 0; }
html.hos-phone .hos-places .nld-phone .nld-head h1 { font-size: 32px; }
html.hos-phone .hos-places .nld-phone .nld-head-sub { margin-left: auto; font-size: 14px; }
html.hos-phone .hos-places .nld-phone .nld-head-count { flex-basis: 100%; color: var(--nld-dim); margin-top: -4px; }
html.hos-phone .hos-places .nld-phone .nld-sheets { display: flex; flex-direction: column; gap: 10px; }
html.hos-phone .hos-places .nld-phone .nld-sheet { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; min-height: 64px; padding: 12px 14px; align-items: start; }
html.hos-phone .hos-places .nld-phone .nld-sheet > * { grid-column: 2; }
html.hos-phone .hos-places .nld-phone .nld-num { grid-column: 1; grid-row: 1 / span 8; font-size: 40px; font-weight: 300; line-height: .9; }
html.hos-phone .hos-places .nld-phone .nld-sheet-cap { justify-content: space-between; }
html.hos-phone .hos-places .nld-phone .nld-sheet-title { font-size: 19px; }
html.hos-phone .hos-places .nld-phone .nld-sheet-line { -webkit-line-clamp: 3; }
html.hos-phone .hos-places .nld-phone .nld-sheet.ph-first { outline: 3px solid var(--nld-ink); outline-offset: 3px; }
html.hos-phone .hos-places :is(.nld-desk, .nld-layer) .nld-alsobtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--nld-ink); font-weight: 600; font-size: 16px; background: transparent; }
html.hos-phone .hos-places :is(.nld-desk, .nld-layer) .nld-alsobtn:hover:not(:disabled) { background: transparent; border-color: var(--nld-ink); }
html.hos-phone .hos-places .nld-phone .nld-rows { background: var(--nld-card); border: 1px solid var(--nld-rule); padding: 0 12px; }
html.hos-phone .hos-places .nld-phone .nld-row { min-height: 52px; flex-wrap: wrap; row-gap: 0; }
html.hos-phone .hos-places .nld-phone .nld-row:first-child { border-top: 0; }
html.hos-phone .hos-places .nld-phone .nld-row-dept { width: 100%; }
html.hos-phone .hos-places .nld-phone .nld-row-title { flex: 1 1 60%; }
html.hos-phone .hos-places .nld-phone .nld-note:first-child { border-top: 0; }
html.hos-phone .hos-places .nld-phone .nld-note-acts button { min-height: 44px; }
html.hos-phone .hos-places :is(.nld-desk, .nld-layer) .nld-term-line { display: block; width: 100%; min-height: 44px; padding: 10px 0; color: var(--nld-dim); font-size: 14px; background: none; border: 0; }
html.hos-phone .hos-places :is(.nld-desk, .nld-layer) .nld-term-line:hover:not(:disabled) { background: none; color: var(--nld-ink); }
.hos-places :is(.nld-desk, .nld-layer) .nld-intro { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--nld-card); border: 1px solid var(--nld-rule); border-left: 4px solid var(--nld-fjord); font-size: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-intro ol { margin: 0; padding-left: 20px; line-height: 1.45; }
.hos-places :is(.nld-desk, .nld-layer) .nld-intro button { align-self: flex-end; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--nld-ink); font-weight: 600; text-align: center; }
.hos-places :is(.nld-desk, .nld-layer) .nld-focus { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--nld-sun); color: var(--nld-ink); border: 1.5px solid var(--nld-ink); font-size: 14px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-done { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--nld-dim); }
.hos-places :is(.nld-desk, .nld-layer) .nld-done span { color: #1c6b45; font-weight: 700; }
.hos-places :is(.nld-desk, .nld-layer) .nld-more { border-top: 1px solid var(--nld-rule); }
.hos-places :is(.nld-desk, .nld-layer) .nld-more > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 600; font-size: 15px; }
.hos-places :is(.nld-desk, .nld-layer) .nld-more[open] > summary { margin-bottom: 6px; }
.hos-places .nld-phone .nld-chief { margin-bottom: 8px; }
html.hos-phone .hos-places .nld-phone :is(.gd-note, .cal, .hm-election) { color: var(--nld-ink) !important; }
html.hos-phone .hos-places .nld-phone .hm-election { background: var(--nld-card) !important; border: 1px solid var(--nld-rule) !important; border-left: 4px solid var(--nld-fjord) !important; border-radius: 0 !important; padding: 12px 14px; }
html.hos-phone .hos-places .nld-phone .hm-election :is(p, li) { color: var(--nld-ink) !important; }
html.hos-phone .hos-places .nld-phone .hm-election .hx-label { color: var(--nld-dim) !important; }

/* the file, full screen on the phone (docs/PHONE-UI.md: --ph-z-file) */
.hos-places .nld-layer { position: fixed; inset: 0; z-index: var(--ph-z-file, 80); display: flex; flex-direction: column; background: var(--nl-snow, #eef2f1); color: var(--nl-ink, #0f2027); font-family: var(--nl-sans, sans-serif); font-size: 15px; line-height: 1.4; }
.hos-places :is(.nld-desk, .nld-layer) .nld-layer-top { flex: none; display: flex; align-items: center; gap: 12px; min-height: var(--ph-header-h, 56px); padding: env(safe-area-inset-top) 16px 0 12px; background: var(--nl-ink, #0f2027); color: var(--nl-snow, #eef2f1); font-size: 14px; white-space: nowrap; overflow: hidden; }
.hos-places :is(.nld-desk, .nld-layer) .nld-layer-top > span { flex: none; }
.hos-places :is(.nld-desk, .nld-layer) .nld-layer-q { font-family: var(--nl-mono, monospace); font-size: 13px; }
.hos-places .nld-layer .nld-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 6px 0 0; font-size: 15px; font-weight: 600; color: var(--nl-snow, #eef2f1); }
.hos-places .nld-layer .nld-back:hover:not(:disabled) { color: var(--nl-snow, #eef2f1); background: none; }
.hos-places .nld-layer .nld-back span { font-size: 22px; line-height: 1; }
.hos-places :is(.nld-desk, .nld-layer) .nld-layer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(var(--ph-bar-space, 74px) + 24px); display: flex; flex-direction: column; gap: 8px; }
.hos-places .nld-layer .nld-docket-line { font-family: var(--nl-mono, monospace); font-size: 12px; text-transform: uppercase; color: var(--nl-dim, #44575c); }
.hos-places .nld-layer .nld-kind-red { margin-top: 2px; }
.hos-places .nld-layer .nld-file-title { font-size: 30px; line-height: 1.05; margin: 0 !important; }
.hos-places .nld-layer .nld-lead { font-size: 17px; line-height: 1.4; max-width: none; }
.hos-places .nld-layer .nld-cols { grid-template-columns: 1fr; gap: 14px; margin-top: 6px; }
.hos-places .nld-layer .nld-cols.nld-one { grid-template-columns: 1fr; }
.hos-places .nld-layer .nld-cap { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--nl-dim, #44575c); }
.hos-places .nld-layer .nld-mono { font-family: var(--nl-mono, monospace); font-size: 12px; }
.hos-places .nld-layer .nld-know { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.hos-places .nld-layer .nld-asks { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.hos-places .nld-layer .nld-ask { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.hos-places .nld-layer .nld-ask i { font-style: normal; color: var(--nl-dim, #44575c); }
.hos-places .nld-layer .nld-conseq { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--nl-rule, #b3bfbe); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.hos-places .nld-layer .nld-answer { background: transparent; border: 0; padding: 0; gap: 8px; margin-top: 6px; }
.hos-places .nld-layer .nld-answer-line { font-size: 17px; margin-bottom: 0; }
.hos-places .nld-layer .nld-opt { border-color: var(--nl-ink, #0f2027); }
.hos-places .nld-layer .nld-answer-foot { border-top: 1px solid var(--nl-rule, #b3bfbe); }
.hos-places .nld-layer .nld-link { color: var(--nl-fjord, #0e4f58); }
.hos-places .nld-layer .nld-job { border-color: var(--nl-ink, #0f2027); }
.hos-places .nld-layer .nld-job-acts button { border-color: var(--nl-ink, #0f2027); }
.hos-places .nld-layer .ph-bar { z-index: 2; }

/* the 12px / 44px floors for the pieces other files bring onto the phone desk (the promise calendar, the world feed) */
html.hos-phone .hos-places .nld-phone :is(.cal-aide, .cal-due-h, .cal-when, .cal-owed, .cal-gain, .cal-upcoming > summary, .wf-head em, small) { font-size: 12px !important; }
html.hos-phone .hos-places .nld-phone :is(.cal button, .cal summary, .cal-wrap button, .cal-wrap summary) { min-height: 44px; min-width: 44px; }