/* page-shared-plan.css: the shared plan view, #s/<token> (spec/page-shared-plan.md). Tokens and components from
   dibs.css only; the week grid and day list are the Plan page's own classes (.wk, .adl), unchanged. */

/* ---- minimal shell for signed-out readers (R1: a thin bar with almost nothing in it) ---- */
.shp.is-bare { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.shp-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 56px; padding: 0 var(--s-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.shp-mark { align-self: center; padding: 0; }
.shp-bar-r { display: flex; align-items: center; gap: var(--s-1); }
.shp-theme { width: 32px; height: 32px; min-height: 32px; }
.shp.is-bare .shp-wrap { flex: 1; width: 100%; max-width: calc(var(--w-list) + 2 * var(--s-8)); margin: 0 auto; padding: var(--s-8); }
.shp-foot { display: flex; gap: var(--s-4); width: 100%; max-width: calc(var(--w-list) + 2 * var(--s-8)); margin: 0 auto; padding: var(--s-4) var(--s-8) var(--s-6); font: var(--t-label); }
.shp-foot a { color: var(--muted); }
.shp-foot a:hover { color: var(--ink); }

/* ---- header (R1 eyebrow over a large title, facts with leading icons) ---- */
.shp-head h1 { margin: var(--s-1) 0 0; font: var(--t-title); color: var(--ink); }
.shp-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font: var(--t-label); color: var(--muted); }
.shp-eyebrow .badge { margin-left: var(--s-1); }
.shp-dot { display: inline-block; width: 3px; height: 3px; margin: 0 var(--s-2); border-radius: var(--r-pill); background: var(--muted); vertical-align: middle; }
.shp-eyebrow .shp-dot { margin: 0; }
.shp-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--ink); }
.shp-fact { display: inline-flex; align-items: center; gap: 6px; }
.shp-fact .icon { width: 16px; height: 16px; color: var(--muted); }
.shp-scope { margin: var(--s-2) 0 0; max-width: var(--w-read); font: var(--t-meta); color: var(--ink-2); text-wrap: pretty; }
.shp-scope + .shp-scope { margin-top: 0; }
.shp-ended { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); max-width: var(--w-read); border-radius: var(--r-control); background: var(--warning-subtle); color: var(--warning); font: var(--t-meta); }
.shp-sample-note { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); max-width: var(--w-read); border-radius: var(--r-control); background: var(--surface-2); font: var(--t-meta); color: var(--muted); }
.shp-owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-6); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--accent-subtle); }
.shp-owner p { margin: 0; font: var(--t-meta); color: var(--ink); }
.shp-owner .text-btn { margin: 0; }

/* ---- sections ---- */
.shp-sec { margin-top: var(--s-8); }
.shp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.shp-sec-head h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.shp-sec-meta { margin: 0; font: var(--t-label); color: var(--muted); }

/* legend (R2: a quiet key for what the coloured marks are) */
.shp-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; font: var(--t-label); color: var(--ink-2); }
.shp-key { display: inline-flex; align-items: center; gap: 6px; }
.shp-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--hue-brand-fill); box-shadow: inset 3px 0 0 var(--hue-brand); }
.shp-sw.is-dis { background: color-mix(in srgb, var(--hue-brand-fill) 50%, var(--surface)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--hue-brand) 50%, transparent); }
.shp-sw.is-busy { box-shadow: none; background: repeating-linear-gradient(135deg, var(--busy-stripe) 0 3px, var(--bg) 3px 6px); outline: 1px solid var(--line); }

/* the week: read-only blocks are links */
.shp .wk { margin-top: var(--s-3); }
.shp .wk-body { height: calc(16px + var(--rows) * var(--pitch)); } /* ends 8 below its last line, as Plan's does */
.shp a.wk-block, .shp a.wk-chip, .shp a.adl-row { text-decoration: none; }
.shp a.wk-block:hover .wk-code, .shp a.wk-chip:hover .wk-code { text-decoration: underline; }
.shp .wk-busy { cursor: default; }
.shp .shp-days { display: none; }
/* Week and Finals (owner walk 2 W2): the .seg switch under the section head; the finals lines are page-plan.css's */
.shp-views { margin-top: var(--s-3); }
.shp .plan-fin-days { margin-top: var(--s-2); }
.shp-free { margin: 0; padding: 0 var(--s-2) var(--s-1); font: var(--t-meta); color: var(--muted); }
.shp-out { margin-top: var(--s-3); }
.shp-out h3 { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--muted); }
.shp-out ul { list-style: none; margin: 0; padding: 0; }
.shp-out li { display: flex; flex-wrap: wrap; gap: var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.shp-out a { font-weight: 600; }

/* class rows */
.shp-rows { list-style: none; margin: var(--s-3) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.shp-row { padding: var(--s-3) var(--s-4); }
.shp-row + .shp-row { border-top: 1px solid var(--line); }
.shp-row p { margin: 0; }
.shp-row-top { display: flex; align-items: baseline; gap: var(--s-2); }
.shp-code { font: var(--t-item); color: var(--ink); }
.shp-code:hover { color: var(--accent); }

.shp-lec { font: var(--t-label); color: var(--muted); }
.shp-units { margin-left: auto; font: var(--t-meta); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shp-title { font: var(--t-body); color: var(--ink); }
.shp-meet { margin-top: 2px !important; font: var(--t-meta); color: var(--ink); font-variant-numeric: tabular-nums; }
.shp-ge { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2) !important; }
.shp-ge-none { margin-top: var(--s-1) !important; font: var(--t-label); color: var(--muted); }

/* the way in (R3: one card, after the content) */
.shp-way { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.shp-way h2 { margin: 0; font: var(--t-item); color: var(--ink); }
.shp-way p { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.shp-way-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* empty, revoked, error (R3 centred one-message layout) */
.shp-empty { margin-top: var(--s-6); padding: var(--s-6); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); text-align: center; }
.shp-empty p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.shp.is-centered .shp-wrap { max-width: calc(560px + 2 * var(--s-8)); }
.shp:not(.is-bare).is-centered .shp-wrap { margin: 0 auto; }
.shp-msg { padding-top: var(--s-12); text-align: center; }
.shp-msg h1 { margin: 0; font: var(--t-title); color: var(--ink); }
.shp-msg-line { margin: var(--s-2) 0 0; font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
.shp-msg-actions { display: flex; justify-content: center; margin-top: var(--s-4); }
.shp.is-centered .shp-way { flex-direction: column; align-items: stretch; text-align: center; padding: var(--s-4); }
.shp.is-centered .shp-way-actions { justify-content: center; }

/* loading (R6: the frame stays, grey bars hold the shape) */
.shp-skel-title .skel { height: 26px; margin-top: var(--s-2); }
.shp-facts .skel { height: 14px; }
.shp-skel-week { margin-top: var(--s-8); height: 420px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); padding: var(--s-4); }
.shp-skel-week .skel { display: block; width: 100%; height: 100%; }
.shp-loading .shp-rows { margin-top: var(--s-6); }
.shp-skel-line { margin-top: var(--s-2) !important; }
.shp-skel-line .skel { display: block; }

/* ---- phones: the day list (page-plan 12; R5), stacked header (R4) ---- */
@media (max-width: 599px) {
  .shp .shp-grid { display: none; }
  .shp .shp-days { display: block; margin-top: var(--s-2); }
  .shp-bar { height: 48px; padding: 0 var(--s-4); }
  .shp.is-bare .shp-wrap { padding: var(--s-6) var(--s-4); }
  .shp-foot { padding: var(--s-4); }
  .shp-sec { margin-top: var(--s-6); }
  .shp-row { padding: var(--s-3); }
  .shp-way { padding: var(--s-4); }
  .shp-way-actions { flex-direction: column-reverse; width: 100%; }
  .shp-way-actions .btn { width: 100%; min-height: 44px; }
  .shp-msg { padding-top: var(--s-8); }
  .shp-skel-week { height: 280px; }
}
@media (max-width: 359px) {
  .shp-facts { gap: var(--s-1) var(--s-3); }
  .shp-units { font: var(--t-label); }
}