/* Page CSS for Night Crew. The kit's own files stay untouched in /taste. */

/* A pane fills its section on a tablet too, where the section's height is not fixed. */
@media (min-width: 640px) and (max-width: 1279px) { main > section > .wrap > .fill { min-height: 62svh; flex: 1 0 auto; } }

/* The tower: the product's own picture. A dark stack of floors, newest at the top. */
.stage > .tower { inset: 24px; display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #0a0a0a; color: #dedad3; border-radius: var(--r-md); overflow: hidden; }
.tower__floor { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 12px; background: #151515; border-radius: var(--r-sm); font-size: 14px; line-height: 1.2; color: inherit; text-decoration: none; }
.tower__num { font: 500 13px/1 var(--font-mono); color: #84827e; }
.tower__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tower__state { font: 500 13px/1 var(--font-mono); color: #84827e; }
.tower__floor--lit { background: var(--p-accent); color: #ffffff; }
.tower__floor--lit .tower__num, .tower__floor--lit .tower__state { color: #ffffff; }
.tower__floor--tonight { background: #151515; box-shadow: inset 0 0 0 1px var(--p-accent); }
.tower__floor--tonight .tower__state { color: #dedad3; }
.tower__floor--upcoming { background: #101010; color: #84827e; }
.tower__floor--dark { background: #101010; color: #84827e; }

/* Hero float card: one opaque fact over the tower, on its empty upcoming floors so no shipped floor is covered. */
.stage > .tower-float { left: 48px; top: 48px; z-index: 2; width: min(300px, calc(100% - 96px)); padding: 16px; background: var(--p-bg); color: var(--p-ink); border: 1px solid rgba(10, 10, 10, 0.14); border-radius: var(--r-sm); }
.tower-float p { margin: 0; }
.tower-float__text { font-size: 16px; line-height: 24px; }
@media (max-width: 639px) {
  .stage > .tower-float { left: 40px; right: 40px; top: 40px; width: auto; padding: 12px; }
  .tower-float__text { font-size: 14px; line-height: 20px; }
}

/* The app window, from the skill's app-frame recipe. */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* Floor rows inside the app window. */
.floor-rows { list-style: none; margin: 0; padding: 0; }
.floor-rows__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--u-line); font-size: 14px; color: inherit; text-decoration: none; }
.floor-rows__who { font: 500 13px/1 var(--font-mono); }
.floor-rows__sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.floor-rows__chip { font: 500 13px/1 var(--font-mono); }
.floor-rows__row--lit .floor-rows__chip { color: var(--p-accent); }
.floor-rows__row--muted { color: var(--u-muted, #55514c); }
.floor-rows__row--window { min-height: 36px; font-size: 13px; font-weight: 500; background: var(--p-surface); }

/* A real log in the open pane. */
.log { margin: 0; padding: 16px; font: 400 13px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.log__pass { color: var(--p-accent); }

/* Tonight's proposal rows. */
.vote-rows .rows__name { font-weight: 400; }
@media (max-width: 639px) {
  #tonight .vote-rows > li { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-2); }
  #tonight .vote-rows > li:nth-child(n+3) { display: none; }
  #tonight .vote-rows .rows__value { grid-column: 1; grid-row: auto; color: var(--muted); }
  #tonight .how-to .rows > li { padding-block: var(--s-2); }
  #tonight .how-to { gap: var(--s-3); }
}
@media (max-width: 1279px) { #tonight .rows > li { padding-block: var(--s-3); } }

/* The stored floor picture is 3:2 and shares the page's putty ground, so the frame keeps its ratio and a hairline marks its edge. */
#last-floor .frame--photo { outline: 1px solid var(--line); outline-offset: -1px; }

/* How a shift works: the kit's diagram across the wrap. */
.shift-diagram { min-height: 0; }
.shift-diagram .dg { width: 100%; height: 100%; }
/* On a phone the timeline runs down the page: each caption stacks its name over its line and wraps, so no line is cut at the panel's edge. */
@media (max-width: 639px) {
  .shift-diagram .dg .dg-node.dg-node--side > .dg-cap { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; width: max-content; max-width: min(260px, calc(100vw - 140px)); }
  .shift-diagram .dg .dg-node.dg-node--side > .dg-cap .dg-cap__s { white-space: normal; }
}

/* Receipts: rows with a line under the name, and scrollable real text. */
.receipt-rows__line { grid-column: 1 / -1; font-size: 16px; line-height: 24px; }
.receipt-rows .link { justify-self: start; }
.test-pass { color: var(--p-accent); }
.test-fail { color: #9a2f22; }
.log-pane, .log-pane.frame { display: block; min-height: 0; overflow: auto; padding: var(--s-5); background: #0a0a0a; color: #dedad3; border-radius: var(--r-md); font: 400 13px/1.7 var(--font-mono); }
.log-pane:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.log-pane.log-pane--light { background: var(--p-surface); color: var(--p-ink); font: inherit; }
.log-pane__entry { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-1); }
.log-pane__kind { color: #84827e; }
.log-pane__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-pane__entry--error .log-pane__text { color: #e8a79c; }
.diff-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-line--add { color: #8fd3a8; }
.diff-line--del { color: #e8a79c; }
@media (max-width: 639px) { .log-pane__entry { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* On a phone each receipt row stacks its value under its name, in the one column, so the name keeps the full width. */
@media (max-width: 639px) { .receipt-rows .rows__value { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; } }

/* The floor in its sandbox, and a dark floor. */
.stage > .floor-frame { inset: 0; width: 100%; height: 100%; border: 0; background: var(--p-bg); }
.tower-dark, .floor-frame__left { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-7); background: #0a0a0a; color: #84827e; text-align: center; }

/* The vote page's list. */
.vote-top { background: var(--p-surface); }
.vote-top > .vote-top__in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); overflow: auto; }
.vote-top__in:focus-visible { outline-offset: -2px; }
/* Five slots share the frame's spare height, so five rows fill it and fewer rows do not stretch to fill it. */
.vote-top .vote-list { flex: 1 0 auto; display: grid; grid-template-rows: repeat(5, auto); }
@media (max-width: 1279px) { .vote-top .vote-list > li { padding-block: var(--s-3); } .vote-top .vote-list > li:first-child { padding-top: 0; } }
.vote-list > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; }
.vote-list .rows__name { font-weight: 400; grid-column: 1; }
.vote-list .vote-row__meta { grid-column: 1; grid-row: 2; justify-self: start; font-size: 14px; color: var(--muted); text-align: left; white-space: normal; }
.vote-button { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: end; gap: var(--s-1); }
.vote-button__problem { font-size: 13px; max-width: 200px; }
/* The kit gives a disabled button no look of its own, and a Vote button that cannot be pressed must not read as live. */
.btn.btn--secondary:disabled { color: var(--muted); cursor: not-allowed; }
.pager { display: flex; justify-content: space-between; margin-top: var(--s-4); }
@media (max-width: 1023px) { .hero-visual.vote-top { min-height: 0; } }
/* On a phone the button stays beside the text and the figures take the row's whole width, so they keep one line. */
@media (max-width: 639px) { .vote-list .vote-row__meta { grid-column: 1 / -1; } .vote-button { grid-row: 1; } }
/* On a phone the section is two screens: the form on the first, the rules --padt under the second's top. The .wrap starts --padt under the section's top, so that is one screen down from it. */
@media (max-width: 639px) { #propose .propose-rules { position: absolute; top: 100vh; top: 100lvh; left: 0; right: 0; } }

/* Taking part so far: real counts as a ruled row of facts, never cards or counters. */
.demand-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-7) 0 0; }
.demand-facts > div { min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.demand-facts dt { font-size: 14px; line-height: 20px; color: var(--p-muted); }
.demand-facts dd { margin: var(--s-2) 0 0; font: var(--display-weight) 48px/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .demand-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .demand-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demand-facts dd { font-size: 36px; } }
/* The row takes what the screen leaves under the heading. Each fact's rule, label and number sit together at the foot of its column, the numbers large, so the section is a screen of figures and not a strip above an empty ground. */
.demand-facts { flex: 1 1 0; min-height: 0; align-items: stretch; }
.demand-facts > div { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 0; border-top: 0; }
.demand-facts dt { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.demand-facts dd { font-size: clamp(64px, 10vw, 160px); }
/* A label that wraps to two lines must not lift its rule above its neighbours'. */
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 639px) { .demand-facts dt { min-height: calc(var(--s-3) + 1px + 40px); } }
/* Where the facts wrap into rows, the rows sit together at the foot, not one in each half of the screen. */
@media (max-width: 1023px) { .demand-facts { align-content: end; } }
@media (max-width: 639px) { .demand-facts dd { font-size: 56px; } }