/* ==========================================================================
   العاصمة — «مدار القدس» (jerusalem.html)
   The prototype's own page styles, moved out of its <style> block as they
   are (text fonts read the site-font contract first). Below them, the
   states the dashboard can produce that its frozen week never drew.
   ========================================================================== */

.hub-hero { padding-block: var(--s-7) var(--s-6); position: relative; overflow: hidden; }
.hub-hero__globe { position: absolute; inset-inline-start: -4vw; bottom: 0; width: min(720px, 70vw); aspect-ratio: 2 / 1; color: var(--ink); opacity: .07; pointer-events: none; } .hub-hero__globe svg { width: 100%; height: 100%; }
.hub-hero h1 { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6rem); font-weight: 800; line-height: 1.25; }
.hub-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.pulse-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-6); border-top: 1px solid var(--rule-strong); }
.pulse-row > div { padding: var(--s-4) 0 0; padding-inline-end: var(--s-4); display: grid; gap: 4px; }
.pulse-row > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-4); }
.pulse-row dt { font-size: var(--t-meta); color: var(--ink-3); }
.pulse-row dd { margin: 0; font-weight: 700; font-size: var(--t-4); display: flex; align-items: center; gap: 8px; }
.pulse-row .sq { width: 20px; height: 11px; flex: none; background: var(--dome); -webkit-mask: var(--dome-mask) center / contain no-repeat; mask: var(--dome-mask) center / contain no-repeat; } .pulse-row .sq--line { -webkit-mask-image: var(--arc-mask); mask-image: var(--arc-mask); background: var(--accent); } .pulse-row .sq--ok { background: #5CC497; }

.atlas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); padding-bottom: var(--s-8); align-items: start; }
.atlas__map { display: grid; gap: 14px; min-width: 0; }
/* the index is the city list; closer in, the column shows the gates the map shows */
#hub-panel [data-panel="city"], .atlas:not([data-view="city"]) #gaz { display: none; }
#hub-panel .omap__now { margin-top: var(--s-4); }

.gaz { display: grid; align-content: start; }
.gaz__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--ink); padding-bottom: 10px; }
.gaz__head h2 { font-size: var(--t-3); font-weight: 800; }
.gaz button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 12px 10px; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: start; color: var(--ink); transition: background var(--d-2); }
.gaz button:hover b { color: var(--accent); }
.gaz button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); } .gaz button[aria-pressed="true"] b::before { content: ""; display: inline-block; width: 18px; height: 10px; margin-inline-end: 8px; background: var(--accent); -webkit-mask: var(--dome-mask) center / contain no-repeat; mask: var(--dome-mask) center / contain no-repeat; }
.gaz b { font-weight: 700; font-size: var(--t-4); }
.gaz .n { font-weight: 800; color: var(--accent); font-size: .95rem; align-self: center; font-variant-numeric: tabular-nums; }
.gaz .coord { grid-column: 1 / -1; }

.feed-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-7); }
.feed { display: grid; }
.feed article { display: grid; grid-template-columns: 88px minmax(0, 1fr) 150px; gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid var(--rule); align-items: start; }
.feed article .when { font-size: .86rem; font-weight: 800; text-align: end; line-height: 1.8; font-variant-numeric: tabular-nums; }
.feed article .when small { display: block; color: var(--ink-3); font-weight: 400; font-size: .8rem; }
.feed article h3 { font-size: var(--t-3); font-weight: 700; line-height: 1.45; margin-block: 6px; }
.feed article p { color: var(--ink-2); font-size: var(--t-sm); }
.feed article .frame { aspect-ratio: 3 / 2; }
.feed__status { font-size: var(--t-sm); color: var(--ink-3); padding-block: 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.dossiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.dossier-card { display: grid; gap: 10px; align-content: start; padding-top: 18px; position: relative; } .dossier-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--ink); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.dossier-card h3 { font-size: var(--t-3); font-weight: 800; }
.dossier-card .ticks { display: flex; gap: 3px; height: 26px; align-items: end; }
.dossier-card .ticks i { flex: 1; background: var(--ink); opacity: .85; min-height: 3px; }
.dossier-card .ticks i.k { background: var(--accent); opacity: 1; }

.chart { width: 100%; height: auto; direction: ltr; }
.chart .bar { fill: var(--ink-3); }
.chart .bar.hl { fill: var(--accent); }
.chart text { font: 500 12px var(--devlo-font, var(--f-display)); fill: var(--ink-3); }
.chart .grid { stroke: var(--rule); }
.chart .val { font: 800 12px var(--devlo-font, var(--f-display)); fill: var(--ink); }

.archive { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.archive__year { font-family: var(--devlo-font, var(--f-display)); font-weight: 800; font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: 1; color: var(--accent); direction: ltr; text-align: end; }

@media (max-width: 1100px) {
  .atlas, .feed-wrap, .archive { grid-template-columns: 1fr; }
  #gaz { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--s-5); }
  .dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-row > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .archive__year { text-align: start; }
}
@media (max-width: 640px) {
  .hub-hero__top { grid-template-columns: 1fr; }
  .feed article { grid-template-columns: 64px minmax(0, 1fr); }
  .feed article .frame { display: none; }
  .dossiers { grid-template-columns: 1fr; }
  .gaz { max-height: none; }
  .gaz .coord { display: none; }
  /* one column on a phone: each place and each status reads on one line, label at the start and value at the end */
  #gaz { grid-template-columns: 1fr; }
  .gaz button { padding: 12px 4px; }
  .gaz b { font-size: var(--fs-h5); line-height: 1.4; }
  .pulse-row { grid-template-columns: 1fr; }
  .pulse-row > div, .pulse-row > div + div { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-inline-start: 0; padding-inline: 0; }
  .pulse-row > div + div { border-top: 1px solid var(--rule); }
  .pulse-row dd { justify-content: flex-end; text-align: end; font-size: var(--fs-ui); line-height: 1.5; }
  .pulse-row .live-tag { padding-block: 10px; margin-block: -10px; }   /* a 44px tap area without moving the row */
}

/* ── What the dashboard brings ── */

/* the week beside the log is drawn only when it holds something; alone, the log takes the row */
.feed-wrap:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
/* a ledger day is a way into its story */
.ledger__body h4 a { color: inherit; }