/* The new look, step 3: the quarter report as "The Valeran State Gazette" (turn-report.js; boards "Gazette" and "Gazette-phone").
   An ink ground with one card-colored sheet; flat color, 1.5px ink rules, square corners. Prefix nlg-. Selectors carry
   .hos-places only where they must beat the generic element rules the shell stylesheets put on p, h1, h2, ul, li and button. */
.nlg-ground { position: fixed; inset: 0; z-index: var(--ph-z-turn, 120); box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: 24px clamp(16px, 7.6vw, 110px); background: var(--nl-ink, #0f2027); }
.nlg-sheet { box-sizing: border-box; width: 100%; max-width: 1280px; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 34px 48px 0; background: var(--nl-card, #fbfcfb); color: var(--nl-ink, #0f2027);
  font-family: var(--nl-sans, system-ui, sans-serif); font-size: 17px; line-height: 1.4; -webkit-overflow-scrolling: touch; }
.nlg-sheet *, .nlg-sheet *::before, .nlg-sheet *::after { box-sizing: border-box; }
.hos-places .nlg-sheet h1, .hos-places .nlg-sheet h2, .hos-places .nlg-sheet p, .hos-places .nlg-sheet ul, .hos-places .nlg-sheet ol, .hos-places .nlg-sheet li, .hos-places .nlg-sheet dl, .hos-places .nlg-sheet dd, .hos-places .nlg-sheet dt { margin: 0; padding: 0; color: var(--nl-ink, #0f2027); text-transform: none; letter-spacing: normal; }

/* masthead */
.nlg-mast { padding: 8px 0; text-align: center; border-top: 5px solid var(--nl-ink, #0f2027); border-bottom: 1.5px solid var(--nl-ink, #0f2027); }
.hos-places .nlg-sheet .nlg-title { font-family: var(--nl-serif, Georgia, serif); font-weight: 600; font-size: clamp(34px, 4.45vw, 64px); line-height: 1; letter-spacing: .04em; }
.hos-places .nlg-sheet .nlg-issue { margin-top: 4px; font-family: var(--nl-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.5; color: var(--nl-dim, #44575c); }

/* three columns */
.nlg-cols { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 30px; margin-top: 18px; padding-bottom: 24px; }
.nlg-c1 { padding-right: 28px; border-right: 1px solid var(--nl-rule, #b3bfbe); }
.hos-places .nlg-sheet .nlg-cap { font-family: var(--nl-sans, system-ui, sans-serif); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: var(--nl-dim, #44575c); }
.nlg-sec + .nlg-sec { margin-top: 14px; }
.hos-places .nlg-sheet .nlg-verdict { margin: 6px 0 14px; font-family: var(--nl-serif, Georgia, serif); font-weight: 500; font-size: clamp(48px, 5.8vw, 84px); line-height: .96; letter-spacing: -.01em; }

/* by your hand */
.hos-places .nlg-sheet .nlg-did { list-style: none; }
.hos-places .nlg-sheet .nlg-did li { margin-top: 9px; padding: 9px 0 0; border-top: 1px solid var(--nl-rule, #b3bfbe); font-family: var(--nl-serif, Georgia, serif); font-size: clamp(18px, 1.53vw, 22px); line-height: 1.35; }
.hos-places .nlg-sheet .nlg-did li::before { content: none; }
.nlg-n { margin-right: 8px; font-family: var(--nl-sans, system-ui, sans-serif); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nl-fjord, #0e4f58); }
.nlg-did li.bad .nlg-n { color: var(--nl-red, #c2371d); }

/* the figures */
.nlg-figs { margin-top: 6px; }
.nlg-fig { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--nl-rule, #b3bfbe); }
.hos-places .nlg-sheet .nlg-fig dd { display: contents; }
.hos-places .nlg-sheet .nlg-fig b { margin-left: auto; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hos-places .nlg-sheet .nlg-fig em { flex: none; width: 86px; text-align: right; font-style: normal; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--nl-dim, #44575c); }
.hos-places .nlg-sheet .nlg-fig.up em { color: #1c6b45; font-weight: 700; }
.hos-places .nlg-sheet .nlg-fig.down em { color: var(--nl-red, #c2371d); font-weight: 700; }
.hos-places .nlg-sheet .nlg-mint { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--nl-ink, #0f2027); background: var(--nl-mint, #bfe3df); font-size: 16px; line-height: 1.45; }

/* abroad and coming up */
.hos-places .nlg-sheet .nlg-list { list-style: none; margin-top: 6px; }
.hos-places .nlg-sheet .nlg-list li { padding: 8px 0; border-top: 1px solid var(--nl-rule, #b3bfbe); font-size: 16px; line-height: 1.4; }
.hos-places .nlg-sheet .nlg-list li::before { content: none; }
.hos-places .nlg-sheet .nlg-list li span { color: var(--nl-dim, #44575c); }
.hos-places .nlg-sheet .nlg-list li.urgent b { color: var(--nl-red, #c2371d); }

/* the buttons: sticky so there is always a way out */
.nlg-acts { position: sticky; bottom: 0; z-index: 1; display: flex; gap: 12px; margin-top: 12px; padding: 12px 0 0; background: var(--nl-card, #fbfcfb); }
.hos-places .nlg-sheet .nlg-acts button { box-sizing: border-box; min-height: 52px; margin: 0; padding: 0 18px; border: 1.5px solid var(--nl-ink, #0f2027); border-radius: 0; box-shadow: none; font-family: var(--nl-sans, system-ui, sans-serif); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: normal; cursor: pointer; }
.hos-places .nlg-sheet .nlg-go { flex: 1 1 auto; background: var(--nl-ink, #0f2027); color: var(--nl-snow, #eef2f1); }
.hos-places .nlg-sheet .nlg-more { flex: 0 0 auto; background: transparent; color: var(--nl-ink, #0f2027); }
@media (hover: hover) {
  .hos-places .nlg-sheet .nlg-go:hover:not(:disabled) { background: #1d3a44; border-color: var(--nl-ink, #0f2027); }
  .hos-places .nlg-sheet .nlg-more:hover:not(:disabled) { background: var(--nl-snow, #eef2f1); border-color: var(--nl-ink, #0f2027); }
}
.hos-places .nlg-sheet .nlg-acts button:focus-visible { outline: 3px solid var(--nl-sun, #f2c230); outline-offset: 2px; }

/* narrow desktop windows: one column, the sheet scrolls */
@media (max-width: 999px) {
  .nlg-ground { padding: 16px; }
  .nlg-sheet { padding: 24px 24px 0; }
  .nlg-cols { grid-template-columns: 1fr; gap: 14px; }
  .nlg-c1 { padding-right: 0; border-right: 0; }
}

/* the phone: the sheet fills the screen, no ink margin; the primary button is pinned at the bottom and respects the safe area */
html.hos-phone .nlg-ground { padding: 0; align-items: stretch; }
html.hos-phone .nlg-sheet { max-width: none; height: 100%; max-height: none; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 0; }
html.hos-phone .nlg-mast { flex: none; }
html.hos-phone .hos-places .nlg-sheet .nlg-title, html.hos-phone .nlg-sheet .nlg-title { font-size: 25px; }
html.hos-phone .nlg-cols { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding-bottom: 0; }
html.hos-phone .nlg-col { display: contents; }
html.hos-phone .nlg-c1 { border: 0; padding: 0; }
html.hos-phone .nlg-line { order: 1; } html.hos-phone .nlg-hand { order: 2; } html.hos-phone .nlg-figures { order: 3; } html.hos-phone .nlg-mint { order: 4; }
html.hos-phone .nlg-coming { order: 5; } html.hos-phone .nlg-abroad { order: 6; } html.hos-phone .nlg-acts { order: 7; }
html.hos-phone .nlg-sec + .nlg-sec { margin-top: 0; }
html.hos-phone .nlg-hand, html.hos-phone .nlg-figures, html.hos-phone .nlg-coming, html.hos-phone .nlg-abroad { margin-top: 12px; }
html.hos-phone .hos-places .nlg-sheet .nlg-verdict, html.hos-phone .nlg-sheet .nlg-verdict { margin: 2px 0 8px; font-size: 42px; line-height: 1; }
html.hos-phone .hos-places .nlg-sheet .nlg-did li { margin-top: 6px; padding-top: 6px; font-size: 16px; line-height: 1.3; }
html.hos-phone .nlg-figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
html.hos-phone .nlg-fig { display: block; padding: 5px 0; }
html.hos-phone .hos-places .nlg-sheet .nlg-fig dt { font-size: 13px; color: var(--nl-dim, #44575c); }
html.hos-phone .hos-places .nlg-sheet .nlg-fig dd { display: flex; align-items: baseline; gap: 6px; }
html.hos-phone .hos-places .nlg-sheet .nlg-fig b { margin-left: 0; font-size: 20px; }
html.hos-phone .hos-places .nlg-sheet .nlg-fig em { width: auto; font-size: 13px; }
html.hos-phone .hos-places .nlg-sheet .nlg-mint { margin-top: 10px; font-size: 14px; line-height: 1.4; }
html.hos-phone .hos-places .nlg-sheet .nlg-list li { padding: 6px 0; font-size: 14px; }
html.hos-phone .nlg-acts { gap: 8px; margin-top: auto; padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
html.hos-phone .nlg-sec + .nlg-acts, html.hos-phone .nlg-cols > .nlg-c3 > .nlg-acts { margin-top: auto; }
html.hos-phone .hos-places .nlg-sheet .nlg-acts button { min-height: 52px; }
html.hos-phone .hos-places .nlg-sheet .nlg-go { padding: 0 8px; }
html.hos-phone .hos-places .nlg-sheet .nlg-more { padding: 0 12px; }
@media (prefers-reduced-motion: no-preference) { .nlg-sheet { animation: nlg-in .2s ease-out; } @keyframes nlg-in { from { opacity: 0; } to { opacity: 1; } } }