/* WorkAdept Portal components — the Workbench shell and the parts every screen is built from:
 * header/nav, page scaffolding, panels, cards, tables, forms, buttons, status pills, and the
 * inert "coming soon" affordance. Layer order is declared once in tokens.css.
 */

@layer components {
  /* -- Shell ----------------------------------------------------------------------------------- */

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;

    /* Visually hidden until focused — never display:none, so it stays reachable. */
    &:not(:focus-visible) {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .portal-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    min-block-size: 4.25rem;
    padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
    border-block-end: var(--rule);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 38%),
      linear-gradient(180deg, var(--color-surface), var(--color-paper-2));

    /* Signature Workbench detail: the cobalt spectrum strip across the very top. */
    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      block-size: 0.25rem;
      background: linear-gradient(90deg, var(--color-accent), var(--color-success), var(--color-accent-strong));
    }
  }

  .portal-logo {
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    gap: var(--space-3);
    align-items: center;
    min-inline-size: 0;
    margin-inline-end: auto;
    text-decoration: none;
  }

  .portal-logo__mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklch, var(--color-accent) 36%, var(--color-rule));
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
    color: var(--color-accent-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0.625rem 1.25rem color-mix(in oklch, var(--color-accent) 16%, transparent);
  }

  .portal-logo__word {
    min-inline-size: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.75rem;
      padding-inline: var(--space-3);
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      color: var(--color-ink-2);
      font-size: var(--text-sm);
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;

      &[aria-current="page"] {
        border-color: var(--color-rule-strong);
        background: var(--color-paper-2);
        color: var(--color-accent-strong);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          border-color: var(--color-rule);
          background: var(--color-paper-2);
          color: var(--color-accent-strong);
        }
      }
    }
  }

  .portal-main {
    inline-size: 100%;
    max-inline-size: 82rem;
    margin-inline: auto;
    padding: var(--space-8) clamp(var(--space-4), 4vw, var(--space-8)) var(--space-12);
  }

  .portal-footer {
    padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
    border-block-start: var(--rule);
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  /* -- Page scaffolding -------------------------------------------------------------------------- */

  .page-head {
    display: grid;
    gap: var(--space-3);
    max-inline-size: 48rem;
    margin-block-end: var(--space-8);
  }

  .page-kicker {
    color: var(--color-accent-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .page-title {
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.03;
    overflow-wrap: anywhere;
  }

  .page-intro {
    color: var(--color-ink-2);
    font-size: var(--text-lg);
  }

  /* -- Panels & cards ---------------------------------------------------------------------------- */

  .panel {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
    padding: var(--space-5);
    border: var(--rule-strong);
    border-block-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    container-type: inline-size;

    & > h2 {
      font-size: var(--text-xl);
      font-weight: 600;
      letter-spacing: -0.03em;
    }
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    padding: 0;
    list-style: none;
  }

  .card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: var(--space-5);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);

    /* A card whose main affordance is a link lights up cobalt as one unit. */
    @media (hover: hover) and (pointer: fine) {
      &:has(> a:hover) {
        border-color: var(--color-accent);
        background: var(--color-paper-2);
      }
    }

    & > a {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
      letter-spacing: -0.025em;
      text-decoration: none;
    }

    & > p {
      color: var(--color-ink-2);
      font-size: var(--text-sm);
    }
  }

  /* -- Tables ------------------------------------------------------------------------------------ */

  .table-wrap {
    overflow-x: auto;
    border-block-start: 3px solid var(--color-accent);
    border-block-end: var(--rule);
    background: var(--color-surface);
  }

  .data-table {
    inline-size: 100%;
    min-inline-size: 40rem;
    border-collapse: collapse;

    & th,
    & td {
      padding: var(--space-3) var(--space-4);
      border-block-end: var(--rule);
      text-align: start;
      vertical-align: top;
      font-size: var(--text-sm);
    }

    & thead th {
      color: var(--color-ink);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & tbody td {
      color: var(--color-ink-2);
    }

    @media (hover: hover) and (pointer: fine) {
      & tbody tr:hover {
        background: var(--color-paper-2);
      }
    }

    /* A disabled account's whole row recedes — parent styled from its content, no extra class. */
    & tbody tr:has(.status-pill[data-status="disabled"]) td {
      color: var(--color-muted);
    }
  }

  .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);

    & form {
      display: contents;
    }
  }

  .row-actions .method-change-form {
    display: grid;
    flex-basis: 100%;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule);

    & select {
      max-inline-size: 14rem;
    }
  }

  .method-change-confirmation {
    display: flex;
    align-items: start;
    gap: var(--space-2);
    max-inline-size: 26rem;
    color: var(--color-ink-2);
  }

  .method-change-notice {
    max-inline-size: 36rem;
    margin: 0;
    color: var(--color-ink-2);
  }

  .row-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;

    & li,
    & .inline-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
    }
  }

  .inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* -- Status pills -------------------------------------------------------------------------------
   * State is never color alone: every pill carries its status as visible text. */

  .status-pill {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.35rem;
    inline-size: fit-content;
    padding-inline: var(--space-2);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;

    &[data-status="active"] {
      border-color: var(--color-success);
      color: var(--color-success);
    }

    &[data-status="disabled"] {
      border-color: var(--color-warning);
      color: var(--color-warning);
    }

    &[data-status="error"] {
      border-color: var(--color-error);
      color: var(--color-error);
    }
  }

  /* -- Forms ------------------------------------------------------------------------------------- */

  .form {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    max-inline-size: 32rem;
  }

  .field {
    display: grid;
    gap: var(--space-2);
    inline-size: 100%;

    & label {
      color: var(--color-ink);
      font-size: var(--text-sm);
      font-weight: 700;
    }

    /* Only flag a field the user has actually interacted with. */
    &:has(:user-invalid) label {
      color: var(--color-error);
    }
  }

  .form input:not([type="hidden"]),
  .form select,
  .form textarea {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);

    &:focus-visible {
      border-color: var(--color-accent);
    }

    &:user-invalid {
      border-color: var(--color-error);
    }
  }

  .form textarea {
    min-block-size: 6rem;
    field-sizing: content;
    resize: vertical;
  }

  .field-validation-error,
  .validation-summary-errors {
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .validation-summary-errors ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .form-message {
    max-inline-size: 48rem;
    margin-block: 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .form-message--success {
    border-color: var(--color-success);
    color: var(--color-success);
  }

  /* -- Buttons ------------------------------------------------------------------------------------ */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);

    @media (hover: hover) and (pointer: fine) {
      &:hover:not(:disabled) {
        background: var(--color-accent-strong);
        border-color: var(--color-accent-strong);
      }
    }

    &:active:not(:disabled) {
      transform: translateY(1px);
    }

    &:disabled {
      opacity: 0.55;
    }
  }

  .button--quiet {
    border-color: var(--color-rule-strong);
    background: var(--color-surface);
    color: var(--color-accent-strong);

    @media (hover: hover) and (pointer: fine) {
      &:hover:not(:disabled) {
        border-color: var(--color-accent);
        background: var(--color-paper-2);
        color: var(--color-accent-strong);
      }
    }
  }

  /* Bare, link-weight button (header sign-out). */
  .quiet-button {
    min-block-size: 2.75rem;
    padding-inline: var(--space-2);
    border: 0;
    background: none;
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
  }

  /* -- Auth card (sign-in surfaces) ----------------------------------------------------------------
   * The portal's front door: one centered card on the paper ground. */

  .auth-card {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 26rem;
    margin-block-start: var(--space-10);
    margin-inline: auto;
    padding: var(--space-8) var(--space-6);
    border: var(--rule-strong);
    border-block-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);

    & h1 {
      font-size: var(--text-2xl);
      letter-spacing: -0.035em;
    }

    & p {
      color: var(--color-ink-2);
      font-size: var(--text-sm);
    }

    & .form {
      max-inline-size: none;
      justify-items: stretch;
    }
  }

  /* -- Profile and client selection ------------------------------------------------------------- */

  .profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
    gap: var(--space-5);
    align-items: start;
  }

  .profile-access {
    & > p {
      color: var(--color-ink-2);
      font-size: var(--text-sm);
    }

    & > form {
      margin: 0;
    }
  }

  .profile-facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;

    & > div {
      display: grid;
      gap: var(--space-1);
      padding-block-end: var(--space-3);
      border-block-end: var(--rule);
    }

    & dt {
      color: var(--color-muted);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & dd {
      margin: 0;
      color: var(--color-ink);
      font-size: var(--text-sm);
      font-weight: 600;
      overflow-wrap: anywhere;
    }
  }

  .profile-actions {
    display: grid;
    gap: var(--space-2);

    & .button {
      inline-size: 100%;
    }
  }

  .client-choice-list {
    display: grid;
    gap: var(--space-3);
    max-inline-size: 48rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .client-choice {
    border: var(--rule-strong);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);

    &:has(a:hover) {
      @media (hover: hover) and (pointer: fine) {
        border-color: var(--color-accent);
        background: var(--color-paper-2);
      }
    }

    & a {
      display: flex;
      gap: var(--space-4);
      align-items: center;
      justify-content: space-between;
      min-block-size: 4rem;
      padding: var(--space-4);
      color: var(--color-ink);
      font-weight: 700;
      text-decoration: none;

      &:focus-visible {
        outline-offset: -3px;
      }
    }
  }

  .client-choice__name {
    min-inline-size: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .client-choice__action {
    flex: 0 0 auto;
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  @media (max-width: 30rem) {
    .profile-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .client-choice a {
      align-items: start;
      flex-direction: column;
      gap: var(--space-2);
      min-block-size: 7rem;
    }
  }

  /* -- Inert affordance (_ComingSoon partial) ------------------------------------------------------
   * A disabled control plus an honest "later release" hint — used wherever a later task's
   * capability is previewed but not yet wired up. */

  .coming-soon {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .coming-soon__hint {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.35rem;
    padding-inline: var(--space-2);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* Task 16 — client read UI: workspace, project (project), question detail. Extends the
 * Workbench components above with the discovery-specific pieces (queue cards, process map, thread
 * history, the inert answer composer) and the tone-keyed status pills they share. */
@layer components {
  /* -- Status pill tones ---------------------------------------------------------------------------
   * Each pill still carries its state as visible text; the tone only tints border + ink so colour
   * is never the sole signal. Tones map from open-set health/readiness/state strings in ClientDisplay. */
  .status-pill[data-tone="attention"] {
    border-color: var(--color-warning);
    color: var(--color-warning);
  }

  .status-pill[data-tone="progress"] {
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
  }

  .status-pill[data-tone="positive"] {
    border-color: var(--color-success);
    color: var(--color-success);
  }

  .status-pill[data-tone="critical"] {
    border-color: var(--color-error);
    color: var(--color-error);
  }

  /* neutral falls through to the base .status-pill (muted ink, rule border). */

  /* -- Shared layout bits ------------------------------------------------------------------------- */

  .workspace-section {
    margin-block-end: var(--space-8);
    container-type: inline-size;
  }

  .section-title {
    margin-block-end: var(--space-4);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  .def-list {
    display: grid;
    gap: var(--space-1) var(--space-4);
    margin: 0;

    & dt {
      color: var(--color-accent-strong);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & dd {
      margin: 0;
      margin-block-end: var(--space-3);
      color: var(--color-ink-2);
      font-size: var(--text-sm);

      &:last-child {
        margin-block-end: 0;
      }
    }

    /* Two columns once the container is wide enough — terms beside their descriptions. */
    @container (inline-size > 40rem) {
      grid-template-columns: minmax(8rem, 12rem) 1fr;

      & dt {
        padding-block-start: 0.15em;
      }

      & dd {
        margin-block-end: var(--space-2);
      }
    }
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-block-end: var(--space-5);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);

    & [aria-current="page"] {
      color: var(--color-ink-2);
    }
  }

  .empty-state {
    padding: var(--space-5);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: center;
    max-inline-size: none;
  }

  /* -- Discovery queue cards --------------------------------------------------------------------- */

  .queue-card__head,
  .question-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    justify-content: space-between;

    & > a {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
      letter-spacing: -0.025em;
      text-decoration: none;
    }
  }

  /* Whole card lights up when its (nested) title link is hovered. */
  @media (hover: hover) and (pointer: fine) {
    .card:has(.queue-card__head a:hover),
    .card:has(.question-card__head a:hover) {
      border-color: var(--color-accent);
      background: var(--color-paper-2);
    }
  }


  .queue-card__reason,
  .project-meta__reason {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-style: italic;
  }

  .next-action {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .next-action__label {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .next-action__owner {
    padding-inline: var(--space-2);
    border: var(--rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .readiness-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: inline-flex;
      gap: var(--space-1);
      align-items: center;
    }
  }

  .readiness-summary__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .queue-card__count {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
  }

  /* -- Project page -------------------------------------------------------------------------------- */

  .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    margin-block-start: var(--space-2);
  }

  .review-prompts__list,
  .review-prompts ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: var(--space-5);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
  }

  /* -- Process map ------------------------------------------------------------------------------- */

  .process-map {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: node;

    @container (inline-size > 52rem) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .process-node {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-5);
    border: var(--rule-strong);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    counter-increment: node;
  }

  .process-node__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .node-kind {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-accent) 16%, transparent);
    color: var(--color-accent-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;

    &::before {
      content: counter(node) " · ";
    }
  }

  .node-role {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .node-title {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .node-description {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
  }

  .node-detail {
    border-block-start: var(--rule);
    padding-block-start: var(--space-3);

    & > summary {
      color: var(--color-accent-strong);
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
    }

    &[open] > summary {
      margin-block-end: var(--space-3);
    }
  }

  .node-detail__body {
    display: grid;
    gap: var(--space-4);
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      padding-inline: var(--space-2);
      border: var(--rule);
      border-radius: var(--radius-sm);
      background: var(--color-paper-2);
      font-size: var(--text-xs);
    }
  }

  .review-prompts {
    & h4 {
      margin-block-end: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & ul {
      display: grid;
      gap: var(--space-2);
      margin: 0;
      padding-inline-start: var(--space-5);
      color: var(--color-ink-2);
      font-size: var(--text-sm);
    }
  }

  /* -- Question list ----------------------------------------------------------------------------- */

  .question-list {
    grid-template-columns: 1fr;
  }

  .question-card__actor {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* -- Question detail: thread history + inert composer ------------------------------------------ */

  .thread-history {
    margin-block-end: var(--space-8);

    & > h2 {
      margin-block-end: var(--space-4);
      font-size: var(--text-xl);
      font-weight: 600;
      letter-spacing: -0.03em;
    }
  }

  .thread-history__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .thread-message,
  .thread-resolution,
  .thread-event {
    padding: var(--space-4) var(--space-5);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .thread-message__meta,
  .thread-resolution__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    margin-block-end: var(--space-2);
    color: var(--color-muted);
    font-size: var(--text-xs);

    & strong {
      color: var(--color-ink);
      font-size: var(--text-sm);
    }
  }

  .thread-message__body {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
  }

  .thread-resolution {
    border-inline-start: 3px solid var(--color-accent);
  }

  .thread-event {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .thread-event__type {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-ink-2);
  }

  /* The answer composer is a full, deliberately INERT preview: a disabled textarea + submit, the
   * verbatim non-PHI notice, and a "later release" hint. Phase 4 replaces this partial wholesale. */
  .answer-affordance {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: var(--rule-strong);
    border-block-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);

    & > h2 {
      font-size: var(--text-lg);
      font-weight: 600;
    }
  }

  .phi-notice {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--color-caution);
    color: var(--color-caution-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    max-inline-size: none;
  }

  .answer-composer {
    display: grid;
    gap: var(--space-3);

    & label {
      color: var(--color-ink);
      font-size: var(--text-sm);
      font-weight: 700;
    }

    & textarea {
      inline-size: 100%;
      min-block-size: 6rem;
      padding: var(--space-3);
      border: var(--rule-strong);
      border-radius: var(--radius-sm);
      background: var(--color-paper-2);
      color: var(--color-ink);
      font-size: var(--text-sm);
      resize: vertical;

      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
  }

  .answer-composer__foot {
    display: flex;
    justify-content: flex-end;
  }

  .answer-affordance__hint {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }
}

/* Task 17 — admin collaboration queue: cross-client, read-only, bucketed by the queue-ordering
 * contract. Reuses .data-table/.status-pill/.empty-state/.coming-soon/.card-list from above; the
 * only new pieces are the plain-language bucket-count strip and the small inline bucket label
 * next to each row's status pill (state is never colour alone — the bucket name is always text). */
@layer components {
  .queue-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;

    & li {
      display: inline-flex;
      align-items: center;
      padding: var(--space-2) var(--space-3);
      border: var(--rule-strong);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      font-size: var(--text-sm);
      font-weight: 600;
    }
  }

  .queue-table {
    min-inline-size: 64rem;
  }

  .queue-bucket {
    display: block;
    margin-block-start: var(--space-1);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
}

/* Task 17.1 — admin client/project editing: an "Archived" pill tone, and the inline edit
 * disclosure used by the client header and each project row. The disclosure needs zero JS —
 * <details>/<summary> is the platform's own show/hide, so it works identically whether or not
 * HTMX's progressive enhancement (the hx-post on the form inside it) is present. */
@layer components {
  .status-pill[data-status="archived"] {
    border-color: var(--color-muted);
    color: var(--color-muted);
  }

  .edit-toggle {
    margin-block-start: var(--space-2);

    & > summary {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.25rem;
      padding-inline: var(--space-3);
      border: var(--rule-strong);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-accent-strong);
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      list-style: none;
      transition: border-color var(--dur-fast) var(--ease-out);

      &::-webkit-details-marker {
        display: none;
      }
    }

    &[open] > summary {
      border-color: var(--color-accent);
    }

    & > .form {
      margin-block-start: var(--space-3);
    }
  }

  /* A read-only field (slug, ContentKey) inside an edit form: shown, never editable. */
  .form input:disabled {
    background: var(--color-paper-2);
    color: var(--color-muted);
  }
}

/* Task 17.2 — admin process-map editor (create/edit/reorder/archive ProcessNodes). Each node is
 * a card in an ordered list, not a table row: it carries a lot more content (flow detail, three
 * array fields) than a project row, so it gets the same disclosure-per-item shape as _ProjectRow
 * but with room to breathe. Reorder is plain up/down buttons — no drag-and-drop, no JS beyond the
 * hx-post already on every other admin mutation here. */
@layer components {
  .node-list {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    list-style: none;
  }

  .node-editor {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    container-type: inline-size;

    /* An archived node recedes, same treatment as a disabled account row. */
    &:has(.status-pill[data-status="archived"]) {
      color: var(--color-muted);
    }
  }

  .node-editor__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);

    & .node-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
    }

    & .node-kind {
      color: var(--color-accent-strong);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    & .node-order {
      color: var(--color-muted);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
    }
  }

  /* A node's edit form carries far more fields than a project row's — let it use the
   * node-editor's own width (the container it just declared above) rather than the shared
   * .form's 32rem cap, which was sized for the shorter client/project forms. */
  .node-editor .edit-toggle > .form {
    max-inline-size: 100%;
  }
}

/* Task 17.3 — admin discovery-question editor, nested one level inside each node's card (Task
 * 17.2's .node-editor above). Same disclosure-per-item shape as .node-editor/.edit-toggle, just
 * indented and toned down a step (a lighter inset background, a thinner accent rule) so the
 * container query's own nesting reads visually, not just structurally — no new interaction
 * pattern, only a quieter visual register one level in. */
@layer components {
  .node-questions {
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--rule-strong);

    & > h4 {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  .node-questions__list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
  }

  .question-editor {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    container-type: inline-size;

    /* An archived question recedes, same treatment as an archived node. */
    &:has(.status-pill[data-status="archived"]) {
      color: var(--color-muted);
    }
  }

  .question-editor__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
  }

  .question-prompt {
    flex: 1 1 auto;
    min-inline-size: 12rem;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .question-editor .edit-toggle > .form {
    max-inline-size: 100%;
  }

  /* A create-question form nested inside a node card — the same .panel shape, but quieter (no
   * accent top-rule, less padding) so it doesn't compete with the node's own top-level panels. */
  .panel--nested {
    margin-block-end: 0;
    padding: var(--space-4);
    border-block-start: var(--rule);

    & > h5 {
      margin: 0;
      font-size: var(--text-base);
      font-weight: 600;
    }
  }

  .empty-state--compact {
    padding: var(--space-3);
    font-size: var(--text-xs);
  }
}

/* Task 17.4 — admin proposal line-item editor (_ProposalEditor/_ProposalItemEditor). Reuses the
 * .node-editor/.question-editor card-per-item shape from 17.2/17.3 above (an ordered list of
 * disclosure-per-item cards) rather than a wide, many-columned table. The `.requirement-*` class
 * names are a holdover from the deleted Shared Requirements feature; these styles are LIVE for
 * proposal line items, not dead code. */
@layer components {
  .requirement-list-admin {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    list-style: none;
  }

  .requirement-editor {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    container-type: inline-size;

    /* An archived item recedes, same treatment as an archived node/question. */
    &:has(.status-pill[data-status="archived"]) {
      color: var(--color-muted);
    }
  }

  .requirement-editor__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
  }

  .requirement-editor__title {
    flex: 1 1 auto;
    min-inline-size: 12rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .requirement-editor .edit-toggle > .form {
    max-inline-size: 100%;
  }
}

/* Dev-only email outbox viewer (Pages/Dev/EmailOutbox): the raw email body, readable and wrapped
 * rather than the browser's default single unbroken line, in a data-table cell that must still fit
 * inside .table-wrap's horizontal scroller. */
@layer components {
  .email-body {
    max-inline-size: 32rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}