/* views.css — view-scoped compositions. Requires theme.css + ui.css.

   The design ships one HTML file per screen, each carrying a small <style>
   block for the pieces that belong to that screen rather than to the shared
   component sheet: a table's column track list, a stat treatment used once.
   This console is a single document, so those blocks are collected here
   instead of being inlined seven times.

   Anything reused across screens belongs in ui.css, not here. */

/* ── Shared view scaffolding ───────────────────────────────────────────── */

/* ui.css only defines .cols and .stack from 680px up, because that is where
   they become a two-column grid. Below it they are plain blocks with no gap,
   so their cards would butt together — the design's own page papered over this
   with an inline flex style on each stack. One rule instead. It has to be a
   max-width query: views.css loads after ui.css, so an unscoped rule here
   would beat the grid at every width. */
@media(max-width:679.98px){
  .cols,.stack{display:flex;flex-direction:column;gap:var(--gap)}
}

/* .lrow reads its track list from --cols. A list that is simply "content on
   the left, one status on the right" has no per-table tracks of its own, and
   without them the var() falls back to an invalid value and the grid collapses
   to auto columns. This is that default. */
.list2{--cols:minmax(0,1fr) auto;--cols-md:minmax(0,1fr) auto}

/* Card grids. ui.css ships .tiles and .kpis, both of which carry their own
   padding and type treatment; these are the plain "n equal cards" cases. */
.grid2,.grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
@media(min-width:680px){.grid2,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Dashboard ─────────────────────────────────────────────────────────── */

/* Per-table column tracks, read by .lrow/.lhead in ui.css. --cols is the
   desktop set; --cols-md the narrower one used from 680px. */
.docs{--cols:2.4fr .9fr .9fr .9fr;--cols-md:1.6fr .9fr .9fr .9fr}

.readiness{display:flex;align-items:center;gap:18px}
.readiness ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.readiness li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.readiness li i{width:8px;height:8px;border-radius:50%;flex:none}
.readiness li b{margin-left:auto;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

.countdown{display:flex;align-items:baseline;gap:8px}
.countdown b{font-family:var(--font-display);font-size:40px;line-height:1;font-weight:300;color:var(--brass-text)}

/* The checklist rows are buttons so they can be toggled from the keyboard;
   strip the button chrome and let .lrow's grid do the layout. */
.lrow.rowbtn{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.lrow.rowbtn:hover{background:var(--primary-soft)}

/* ── Pilgrims ──────────────────────────────────────────────────────────── */

/* Six columns on a full desktop. Country and age are the two a leader scans
   least, so they carry .md-hide and sit out the 680-1079px layout, which uses
   the four-track list instead. */
.roster{--cols:2.1fr .9fr .5fr 1.1fr .9fr 1fr;--cols-md:1.7fr 1.1fr .9fr 1fr}

/* Clay is the readiness legend's colour for "balance due" on the dashboard;
   ui.css has no clay pill, so the roster would otherwise have to reuse warn
   for both "documents pending" and "balance due" and lose the distinction. */
.pill.clay{color:var(--c-clay);border-color:var(--c-clay);background:var(--tint-clay)}

/* Sortable column headers. Inherit the .lhead type treatment rather than
   restating it, so a sortable header and a plain one look identical. */
.lhead button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.lhead button[data-active="true"]{color:var(--brass-text)}

/* Detail panel. The handover names .sheet as the phone shell for detail views
   but never draws the desktop counterpart, so this composes one from the same
   idiom: a bottom sheet that becomes a right-hand panel once there is width
   for it. Kept mounted and made inert while closed, like the More sheet. */
.detail{position:fixed;inset:auto 0 0 0;z-index:50;display:flex;flex-direction:column;
  max-height:88vh;background:var(--bg);border-top:1px solid var(--hair);
  border-radius:16px 16px 0 0;transform:translateY(101%);visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.8,.3,1),visibility 0s linear .3s}
.detail[data-open="true"]{transform:none;visibility:visible;
  transition:transform .3s cubic-bezier(.22,.8,.3,1),visibility 0s}
.detail .dhead{padding:16px 18px 12px;background:var(--panel);border-bottom:1px solid var(--hair)}
.detail .body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px 28px;
  display:flex;flex-direction:column;gap:var(--gap)}
.detail-scrim{position:fixed;inset:0;z-index:49;background:rgba(4,9,7,.55)}
@media(min-width:680px){
  .detail{inset:0 0 0 auto;width:min(460px,92vw);max-height:none;border-top:0;
    border-left:1px solid var(--hair);border-radius:0;transform:translateX(101%)}
}

/* ── Broadcasts ────────────────────────────────────────────────────────── */

/* The composer's message box. .field is a one-line control with a fixed
   height, so a textarea restates that surface rather than inheriting it. */
.ta{display:block;width:100%;min-height:120px;resize:vertical;padding:12px 13px;
  background:var(--sunken);border:1px solid var(--hair);border-radius:var(--r-sm);
  font:inherit;font-size:13px;color:var(--ink);line-height:1.55;outline:none}
.ta::placeholder{color:var(--ink-3)}

/* ui.css styles .btn but never its disabled state, so a disabled button looked
   identical to a live one — it just silently did nothing. pointer-events also
   suppresses the hover treatment, which would otherwise still fire. */
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Itinerary ─────────────────────────────────────────────────────────── */

/* A day's schedule, as a spine with a node per item. The connector is drawn
   from the item itself rather than as a separate element, so it cannot fall
   out of step with the list. */
.sched{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sched li{position:relative;display:flex;gap:13px;padding:0 0 16px}
.sched li:last-child{padding-bottom:0}
.sched li:not(:last-child):before{content:'';position:absolute;left:4px;top:15px;bottom:0;
  width:1px;background:var(--hair)}
.sched .dot{width:9px;height:9px;border-radius:50%;background:var(--brass);flex:none;margin-top:4px}
.sched p{font-size:13px;color:var(--ink);line-height:1.5}

/* ── Billing ───────────────────────────────────────────────────────────── */

/* "Paid" and the progress meter are what a leader scans least when chasing a
   balance, so they carry .md-hide and sit out the 680-1079px layout. */
.owing{--cols:2fr .9fr .9fr 1.3fr auto;--cols-md:1.8fr 1fr auto}