/* ============================================================================
   COS layout glue on the WhirlWind reference tokens (ww-tokens.css) — no literal colour, size or
   font here except 0/1px/transparent/percentages, the same contract as ww-shell.css. Nothing in this
   file is a design decision: page layouts are provisional until the COS screens Leon approves with
   ChatGPT, and any COS brand variation needs his explicit approval first.
   ========================================================================= */

/* The UA [hidden] rule loses to class display rules (e.g. .ww-navbar__menu at < 992px). */
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--bs-body-bg); }
.ww-shell p { margin: 0 0 var(--ww-space-2); }

/* ---- page frame ------------------------------------------------------------- */
.cos-container { max-width: 960px; }
.cos-page-header { margin-bottom: var(--ww-space-5); }
.cos-page-header__lead > :last-child { margin-bottom: 0; }
.cos-section { margin-top: var(--ww-space-6); }
.cos-section:first-of-type { margin-top: 0; }

/* Navigation fallback when JavaScript is off and the drawer cannot open (below 992px only). */
.cos-nojs-nav { display: none; }
@media (max-width: 991.98px) {
  .cos-nojs-nav {
    display: flex; flex-wrap: wrap; gap: var(--ww-space-1);
    padding: var(--ww-space-2) var(--ww-container-pad);
    background: var(--ww-nav-bg); color: var(--ww-nav-color); border-bottom: 1px solid var(--ww-nav-border);
  }
}

/* ---- account block in the side navigation / drawer ---------------------------- */
.cos-account { margin-top: var(--ww-space-4); border-top: 1px solid var(--ww-nav-border); padding-top: var(--ww-space-2); }
.cos-account__email { margin: 0 var(--ww-space-3) var(--ww-space-2); font-size: var(--ww-font-size-small); color: var(--ww-nav-color); overflow-wrap: anywhere; }
.cos-account form { margin: 0; }
.cos-account__signout { width: 100%; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; text-align: left; }

/* ---- signed-out pages ----------------------------------------------------------- */
.cos-public { display: flex; justify-content: center; align-items: flex-start; padding-top: var(--ww-space-8); }
.cos-public__card { width: 100%; max-width: 480px; }
.cos-public__actions { margin-top: var(--ww-space-4); }
.cos-public__actions .ww-btn { width: 100%; }

/* ---- lists of records (PDF: Card) ------------------------------------------------ */
.cos-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ww-space-3); }
.cos-list__title { margin-bottom: var(--ww-space-1); }
.cos-list__text { overflow-wrap: anywhere; }
.cos-list__meta { margin-bottom: 0; overflow-wrap: anywhere; }
.cos-list__item .ww-badge { margin-top: var(--ww-space-1); }

.cos-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ww-space-3); margin: 0 0 var(--ww-space-5); }
.cos-facts__item { padding: var(--ww-space-3) var(--ww-space-4); }
.cos-facts__item dt { font-size: var(--ww-font-size-small); color: var(--bs-secondary-color); font-weight: 700; }
.cos-facts__item dd { margin: 0; font-size: var(--ww-h4); font-weight: var(--ww-heading-weight); }
.cos-actions { display: flex; flex-wrap: wrap; gap: var(--ww-space-2); }

.cos-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ww-space-2); margin: 0 0 var(--ww-space-3); padding: 0; font-size: var(--ww-font-size-small); }
.cos-breadcrumb li + li::before { content: "/"; margin-right: var(--ww-space-2); color: var(--bs-secondary-color); }

/* ---- forms (PDF: Form — label above, required marker, error text under the field) ---- */
.cos-form { margin-top: var(--ww-space-3); }
.cos-field { margin-bottom: var(--ww-space-4); }
.cos-control { width: 100%; min-height: 44px; }   /* 44px target: WCAG 2.5.8 is 24px; 44px suits touch */
.cos-field__hint { margin: var(--ww-space-1) 0 0; }
.cos-field__error { display: flex; gap: var(--ww-space-1); align-items: flex-start; margin: var(--ww-space-1) 0 0; color: var(--bs-danger-text-emphasis); font-size: var(--ww-font-size-small); font-weight: 700; }
.cos-field--error .cos-control { border-color: var(--bs-danger); border-width: 2px; }
.cos-error-list { margin: var(--ww-space-1) 0 0; padding-left: var(--ww-space-4); }

.cos-filter { margin-bottom: var(--ww-space-4); max-width: 480px; }
.cos-filter__row { display: flex; gap: var(--ww-space-2); }
.cos-filter__row .cos-control { flex: 1 1 auto; min-width: 0; }

/* Error summaries take focus after a failed post (cos-shell.js); show where focus went. */
.ww-alert:focus { outline: 0; box-shadow: var(--ww-focus-ring); }
.cos-section > .ww-alert, .cos-page-header + .ww-alert { margin-bottom: var(--ww-space-4); }

/* ---- document library (Design Authority) ------------------------------------------ */
.cos-facts__item dd.cos-facts__text { font-size: var(--bs-body-font-size); }
.cos-meta { margin: var(--ww-space-2) 0; font-size: var(--ww-font-size-small); }
.cos-meta > div { display: flex; flex-wrap: wrap; gap: 0 var(--ww-space-2); margin-bottom: var(--ww-space-1); }
.cos-meta dt { font-weight: 700; color: var(--bs-secondary-color); }
.cos-meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.cos-meta__code { font-family: var(--bs-font-monospace); font-size: var(--ww-font-size-code); }
.cos-list__item .cos-form { margin-top: var(--ww-space-3); }
#versions:focus { outline: 0; }
.cos-plain-list { margin: 0 0 var(--ww-space-3); padding-left: var(--ww-space-4); }
.cos-plain-list li { margin-bottom: var(--ww-space-1); overflow-wrap: anywhere; }
.cos-hierarchy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ww-space-3); counter-reset: none; }
.cos-check { display: flex; gap: var(--ww-space-2); align-items: flex-start; }
.cos-check input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; }
.cos-choice-group { border: 0; margin: 0 0 var(--ww-space-4); padding: 0; min-width: 0; }
.cos-choice-group legend { padding: 0; }
.cos-choice-group .cos-check { margin-bottom: var(--ww-space-1); }

/* ---- project memory ----------------------------------------------------------------- */
.cos-subsection { margin-top: var(--ww-space-4); }
.cos-statement { overflow-wrap: anywhere; white-space: pre-line; }
/* Superseded and rejected wording stays readable; the struck line and the "do not use" badge say it is not in force. */
.cos-decision__retired { text-decoration: line-through; text-decoration-thickness: 1px; }
.cos-excerpt {
  margin: var(--ww-space-2) 0; padding: var(--ww-space-2) var(--ww-space-3);
  border-left: 4px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24em; overflow-y: auto;
}
.cos-excerpt:focus-visible { outline: 0; box-shadow: var(--ww-focus-ring); }
.cos-briefing { font-family: var(--bs-font-monospace); font-size: var(--ww-font-size-code); white-space: pre-wrap; }
.cos-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--ww-space-3); border-left: 2px solid var(--bs-border-color); }
.cos-timeline__item { margin-bottom: var(--ww-space-4); overflow-wrap: anywhere; }
#reconcile > p { overflow-wrap: anywhere; }
.cos-timeline__item > :last-child { margin-bottom: 0; }
.cos-timeline__title { margin-bottom: 0; }
.cos-details summary { cursor: pointer; min-height: 24px; }
.cos-details summary:focus-visible { outline: 0; box-shadow: var(--ww-focus-ring); }
#review:focus, #reconcile:focus, #approve-supersede:focus { outline: 0; }

/* Project Memory (B1): status, counts, matters for the owner, direction. */
.cos-memory-status { margin-bottom: var(--ww-space-4); border-left: 4px solid var(--ww-attention); }
.cos-memory-status--current { border-left-color: var(--bs-success); }
.cos-memory-status__title { display: flex; align-items: center; gap: var(--ww-space-2); }
.cos-memory-status__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ww-space-2) var(--ww-space-4); margin: 0; }
.cos-memory-status__facts dt { font-weight: 700; }
.cos-memory-status__facts dd { margin: 0; overflow-wrap: anywhere; }
.cos-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ww-space-3); margin: 0 0 var(--ww-space-5); }
.cos-counts__item { display: flex; flex-direction: column; padding: var(--ww-space-3) var(--ww-space-4); color: var(--bs-body-color); text-decoration: none; min-height: 44px; }
.cos-counts__item:hover .cos-counts__label { text-decoration: underline; }
.cos-counts__item:focus-visible { outline: 0; box-shadow: var(--ww-focus-ring); }
.cos-counts__n { font-size: var(--ww-h4); font-weight: var(--ww-heading-weight); line-height: 1.2; }
.cos-counts__label { font-size: var(--ww-font-size-small); font-weight: 700; color: var(--bs-link-color); }
#attention:focus { outline: 0; }
.cos-matter__question { margin-bottom: var(--ww-space-3); overflow-wrap: anywhere; }
.cos-matter__advice { padding: var(--ww-space-3); margin-bottom: var(--ww-space-3); background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); overflow-wrap: anywhere; }
.cos-matter__advice > :last-child { margin-bottom: 0; }
.cos-matter__decisions, .cos-evidence, .cos-direction { list-style: none; margin: 0 0 var(--ww-space-3); padding: 0; }
.cos-matter__decisions > li, .cos-direction > li { padding: var(--ww-space-2) 0; border-top: 1px solid var(--bs-border-color); overflow-wrap: anywhere; }
.cos-matter__decisions p, .cos-direction p { margin-bottom: var(--ww-space-1); }
.cos-evidence > li { margin-bottom: var(--ww-space-3); overflow-wrap: anywhere; }
.cos-evidence .ww-badge { margin-right: var(--ww-space-1); }
.cos-matter__supersede { overflow-wrap: anywhere; }
.cos-matter__actions { display: flex; flex-wrap: wrap; gap: var(--ww-space-2); }
.cos-matter__actions form { margin: 0; }
.cos-matter__actions .ww-btn { white-space: normal; text-align: left; }
.cos-details { margin-bottom: var(--ww-space-3); }
.cos-details__heading { display: inline; margin: 0; }
.cos-filter-note { overflow-wrap: anywhere; }

/* Project Memory (B2): themes, at-a-glance counts, discrepancies. */
.cos-glance { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ww-space-2) var(--ww-space-5); margin: 0 0 var(--ww-space-4); padding: 0; }
.cos-glance__n { font-weight: 700; font-size: var(--ww-h5); }
.cos-theme { margin-top: var(--ww-space-5); }
.cos-theme__title { border-bottom: 1px solid var(--bs-border-color); padding-bottom: var(--ww-space-2); overflow-wrap: anywhere; }
.cos-theme__batch .cos-plain-list li { overflow-wrap: anywhere; }
.cos-matter__gap { margin-bottom: var(--ww-space-3); }