/* spaces.css — the Spaces department (socials.css precedent: `sp-` prefix,
   DS tokens only, no raw color literals). The week grid is a real <table>
   because it IS tabular data: spaces down, days across. Screen readers get row
   and column headers for free; a div grid would have to fake both. */

.sp-shell { border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); background:var(--cx-surface-1); padding:var(--cx-s5); }
.sp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cx-s3); margin-bottom:var(--cx-s4); flex-wrap:wrap; }
.sp-head h2 { margin:0; font-size:20px; font-weight:650; }
.sp-head p { margin:4px 0 0; color:var(--cx-text-muted); font-size:13px; max-width:44rem; }
.sp-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sp-actions button, .sp-form button, .sp-link { border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); background:var(--cx-surface-2); color:var(--cx-text); padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; min-height:44px; }
.sp-actions button:hover, .sp-form button:hover { border-color:var(--cx-accent); }
.sp-primary { background:var(--cx-accent); color:var(--cx-accent-wash); border-color:var(--cx-accent); }
.sp-primary[disabled] { opacity:.55; cursor:not-allowed; }

/* Explicit loading / empty / failure. A failed read never renders as an empty
   week — the three states are visually distinct on purpose. */
.sp-loading, .sp-empty, .sp-error { border:1px dashed var(--cx-border); border-radius:var(--cx-radius-lg); padding:1.5rem; color:var(--cx-text-muted); text-align:center; }
.sp-error { border-style:solid; border-color:color-mix(in srgb, var(--cx-error) 45%, var(--cx-border)); color:var(--cx-error); text-align:left; }
.sp-note { margin:0 0 var(--cx-s3); padding:9px 11px; border-left:3px solid var(--cx-accent); background:var(--cx-accent-wash); color:var(--cx-text-2); font-size:12px; }
.sp-help { color:var(--cx-text-muted); font-size:11px; margin:6px 0 0; }

/* Week grid */
.sp-scroll { overflow-x:auto; }
.sp-week { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; min-width:52rem; }
.sp-week th, .sp-week td { border-bottom:1px solid var(--cx-border-soft); border-right:1px solid var(--cx-border-soft); padding:7px 9px; vertical-align:top; text-align:left; }
.sp-week thead th { position:sticky; top:0; background:var(--cx-surface-2); font-weight:650; white-space:nowrap; z-index:1; }
.sp-week tbody th { background:var(--cx-surface-2); min-width:13rem; }
.sp-week tbody th span { display:block; font-weight:650; }
.sp-week tbody th small { display:block; margin-top:2px; color:var(--cx-text-muted); font-weight:400; }
.sp-week tr.sp-search-target > th { box-shadow:inset 3px 0 0 var(--cx-accent); background:var(--cx-accent-wash); }
.sp-week th:last-child, .sp-week td:last-child { border-right:0; }
.sp-cell { min-width:8rem; }
.sp-cell--free { color:var(--cx-text-muted); }
.sp-free-mark { font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.sp-chip { display:block; width:100%; text-align:left; margin:0 0 4px; padding:6px 7px; border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); background:var(--cx-surface-1); color:inherit; font:inherit; font-size:11px; cursor:pointer; }
.sp-chip:hover { border-color:var(--cx-accent); }
.sp-chip strong { display:block; font-variant-numeric:tabular-nums; }
.sp-chip span { display:block; color:var(--cx-text-muted); overflow-wrap:anywhere; }

/* Day view */
.sp-day-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:var(--cx-s3); }
.sp-card { border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); padding:var(--cx-s4); background:var(--cx-panel); min-width:0; }
.sp-card.sp-search-target { border-color:var(--cx-accent); box-shadow:0 0 0 2px var(--cx-accent-wash); }
.sp-card h3 { margin:0; font-size:13px; font-weight:650; }
.sp-day-list { list-style:none; margin:var(--cx-s3) 0 0; padding:0; }
.sp-day-row { display:flex; align-items:baseline; gap:9px; padding:7px 0; border-bottom:1px solid var(--cx-border-soft); }
.sp-day-row:last-child { border-bottom:0; }
.sp-day-row strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-day-row span { flex:1 1 auto; overflow-wrap:anywhere; }
.sp-day-row--empty { color:var(--cx-text-muted); }
.sp-link { background:transparent; border:0; color:var(--cx-accent); padding:0 4px; min-height:44px; }

/* Booking dialog. Every input here is a visible control — nothing is hidden,
   nothing is off-screen, and the submit button is human-only. */
.sp-book { margin-top:var(--cx-s5); padding-top:var(--cx-s4); border-top:1px solid var(--cx-border); }
.sp-book h3 { margin:0 0 var(--cx-s3); font-size:13px; font-weight:650; }
.sp-form { display:grid; gap:var(--cx-s3); max-width:32rem; }
.sp-form label { display:grid; gap:5px; color:var(--cx-text-2); font-size:12px; }
.sp-form input, .sp-form select { min-width:0; min-height:44px; border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); background:var(--cx-surface-1); color:var(--cx-text); padding:8px 9px; font:inherit; font-size:13px; }
.sp-form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cx-s3); }

/* The table caption stays VISIBLE. Nothing in this department is rendered
   off-screen or clipped to zero — the companion's collect gate treats
   invisible content as a refusal, and a hidden string here would be exactly
   the shape that rule exists to forbid. */
.sp-caption { caption-side:top; text-align:left; padding:0 0 6px; color:var(--cx-text-muted); font-size:11px; }

/* ---- row → panel (membership.css precedent) ----------------------------- */
.sp-rowlink { border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; min-height:0; }
.sp-rowlink:hover, .sp-rowlink:focus-visible { text-decoration:underline; text-underline-offset:2px; }
.sp-rowlink:focus-visible { outline:2px solid var(--cx-accent); outline-offset:2px; border-radius:2px; }

/* ---- the detail panel ---------------------------------------------------- */
.sp-panel { display:grid; gap:var(--cx-s4); font-size:13px; }
.sp-panel__facts { margin:0; display:grid; gap:6px; }
.sp-panel__facts > div { display:flex; justify-content:space-between; gap:var(--cx-s2); }
.sp-panel__facts dt { color:var(--cx-text-muted); margin:0; }
.sp-panel__facts dd { margin:0; font-weight:650; text-align:right; }
.sp-panel__facts dd small { display:block; color:var(--cx-text-muted); font-weight:400; font-size:11px; }
.sp-panel__missing { color:var(--cx-text-muted); font-weight:400; font-size:12px; }
.sp-panel__actions { display:flex; gap:var(--cx-s3); align-items:center; }
.sp-link--danger { color:var(--cx-warn); }

@media (max-width:620px) {
  .sp-shell { padding:var(--cx-s3); }
  .sp-head { flex-direction:column; align-items:flex-start; }
  .sp-form-row { grid-template-columns:1fr; }
}