/*
 * prime-core.v1.css
 * Phronesis Project — Shared Prime Stylesheet
 * Eames | Phase 2C | Build plan b609a43f
 * Populated by Argos Seq 45 | 25 May 2026 | extracted from argos.html
 * ─────────────────────────────────────────────────────────────
 *
 * SCOPE
 * This file owns the Prime interface. All layout, typography,
 * component, and colour styles shared across every Prime live here.
 * The HTML shell references only this file — no per-Prime <style>
 * block, no inline styles.
 *
 * Per-Prime identity is expressed through three CSS custom properties
 * only — injected by prime-config.js before first render. See the
 * PER-PRIME VARIABLES section below for names, defaults, and the
 * injection pattern.
 *
 * VERSIONING
 * When this file changes, rename to prime-core.v2.css and update
 * the reference in every prime-config.js. Query-string versioning
 * (?v=2) is unreliable with Cloudflare edge caching — filename
 * versioning is authoritative. (Constantinople, Conference 753f718c.)
 *
 * LOAD ORDER
 * <link rel="preload" href="prime-core.v1.css" as="style"> in <head>
 * then <link rel="stylesheet" href="prime-core.v1.css">
 * then <script src="prime-core.js"></script>
 * then <script src="prime-config.js"></script>
 * Sequential — no async, no defer on cross-dependent files.
 */


/* ================================================================
   DESIGN TOKENS — :root
   ================================================================ */

:root {

  /* ── NEUTRAL PALETTE ─────────────────────────────────────────
   * Shared. Identical across all Primes. Do not override.
   * These are the interface's ground — Prime identity sits on top.
   * ──────────────────────────────────────────────────────────── */

  --bg:            #FAFAF8;   /* page background                  */
  --surface:       #FFFFFF;   /* card / elevated surface          */
  --parchment:     #F5F1EB;   /* warm ground — wake, panel fills  */
  --panel-bg:      #F7F4EE;   /* artefact / side panel background */

  --text:          #1C1C1A;   /* primary body text                */
  --text-muted:    #6B6962;   /* supporting / secondary text      */
  --text-light:    #A8A49C;   /* placeholder / disabled           */

  --border:        #E2DED8;   /* standard divider / border        */
  --border-lt:     #EDEBE4;   /* lightweight / subtle border      */

  /* ── STATUS COLOURS ──────────────────────────────────────────
   * Semantic. Used by the budget gauge bar and any status indicator.
   * Not per-Prime — the meaning must be consistent across Primes.
   * ──────────────────────────────────────────────────────────── */

  --bar-green:     #3D6B50;
  --bar-amber:     #A87820;
  --bar-red:       #8B3020;

  /* ── DISPLAY/VERIFY LAYER (Eames render spec — artifact 2835520b, MR 1ad5b49e)
   * Amber is INFORMATION, never alarm — red is NOT used in this layer.
   * Used by: divergent-open claims, technical-failure gaps, dead/mismatched citations.
   * Additive only (consumed by the new theo render); no change to existing Prime styles.
   * ──────────────────────────────────────────────────────────── */
  --status-amber:     #A87820;                   /* = --bar-amber; separate so the two systems can diverge */
  --status-amber-dim: rgba(168, 120, 32, 0.10);  /* amber left-border fills                                 */
  --claim-infer:      #F5F1EB;                    /* synthesis_inference bg (= --parchment; named for legibility) */

  /* ── BUTTON BASE ─────────────────────────────────────────────
   * Primary action button — shared appearance, not Prime-tinted.
   * ──────────────────────────────────────────────────────────── */

  --btn:           #2C2C2A;   /* primary button background        */
  --btn-text:      #FAFAF8;   /* primary button text              */

  /* ── PER-PRIME VARIABLES ─────────────────────────────────────
   *
   * These three properties are the only CSS that changes between
   * Primes. prime-config.js injects them on :root at init, before
   * any rendering occurs:
   *
   *   document.documentElement.style.setProperty('--accent',        config.accent);
   *   document.documentElement.style.setProperty('--accent-dim',    config.accentDim);
   *   document.documentElement.style.setProperty('--accent-border', config.accentBorder);
   *
   * The defaults below are Argos values. They will be overwritten
   * before first render in any correctly configured Prime, but they
   * ensure the interface is never unstyled if config fires late.
   *
   * --accent         Full-strength identity colour.
   *                  Dark enough for white text — see NOTE below.
   *
   * --accent-dim     10% opacity fill. Used for: highlighted
   *                  message backgrounds, hold_this modal tints,
   *                  active/selected states with low visual weight.
   *
   * --accent-border  35% opacity. Used for: left-border accents,
   *                  focus rings, dividers that carry Prime identity.
   *
   * NOTE: --accent-on (text colour on full-accent backgrounds)
   * ──────────────────────────────────────────────────────────────
   * The current scheme does not declare --accent-on. This works
   * for Argos (#1B4D4D — dark teal, white reads cleanly) and for
   * any dark-value accent colour. If a future Prime uses a light
   * accent, white text on --accent will fail contrast. When scoped:
   *
   *   --accent-on: #1C1C1A;   (or #FFFFFF — whichever passes 4.5:1)
   *
   * The variable name is reserved. Do not use it for other purposes.
   * ──────────────────────────────────────────────────────────── */

  --accent:        #1B4D4D;
  --accent-dim:    rgba(27, 77, 77, 0.10);
  --accent-border: rgba(27, 77, 77, 0.35);

}


/* ================================================================
   BASE RESET & TYPOGRAPHY
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* No heading scale, link colour, or code/pre overrides present in
   argos.html — prose is rendered via .turn-content white-space:pre-wrap.
   Add here when needed. */


/* ================================================================
   LAYOUT — MAIN SHELL
   ================================================================ */

.shell        { display: flex; flex-direction: column; height: 100vh; }

.nav-strip    { height: 34px; flex-shrink: 0; display: flex; align-items: center;
                justify-content: space-between; padding: 0 24px;
                background: var(--bg); border-bottom: 1px solid var(--border-lt); }

.nav-link     { display: flex; align-items: center; gap: 6px; text-decoration: none;
                font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12.5px;
                letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
                transition: color 0.15s; cursor: pointer; }
.nav-link:hover { color: var(--text); }

.nav-icon     { width: 12px; height: 12px; border-radius: 50%;
                background: var(--accent); flex-shrink: 0; }

.main         { display: flex; flex-direction: row; flex: 1; overflow: hidden;
                justify-content: center; }

.left-col     { display: flex; flex-direction: column; flex: 1;
                max-width: 820px; min-width: 0; position: relative; }

.header       { flex-shrink: 0; padding: 18px 24px 0; }
.header-row   { display: flex; align-items: flex-start; justify-content: space-between; }

.prime-identity { display: flex; align-items: center; gap: 14px; }

.prime-icon   { width: 38px; height: 38px; border-radius: 50%;
                background: var(--accent-dim); border: 1.5px solid var(--accent-border);
                display: flex; align-items: center; justify-content: center;
                flex-shrink: 0; font-family: 'Cormorant Garamond', Georgia, serif;
                font-size: 16px; color: var(--accent); }

.prime-name   { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px;
                font-weight: 500; color: var(--text); letter-spacing: -0.01em;
                line-height: 1.1; }

.prime-role   { font-family: 'Lora', Georgia, serif; font-size: 12px; font-style: italic;
                color: var(--text-muted); margin-top: 3px; }

.session-meta { text-align: right; font-family: 'Cormorant Garamond', Georgia, serif;
                font-size: 13.5px; color: var(--text); letter-spacing: 0.03em;
                line-height: 1.8; }

/* No mobile breakpoints present in argos.html — add when responsive work begins. */


/* ================================================================
   BUDGET GAUGE
   ================================================================ */

.token-bar-wrap  { margin-top: 14px; padding-bottom: 14px;
                   border-bottom: 1px solid var(--border-lt); }
.token-bar-track { height: 2px; background: var(--border); border-radius: 1px;
                   overflow: hidden; }
.token-bar-fill  { height: 100%; width: 0%; background: var(--bar-green);
                   border-radius: 1px; transition: width 0.5s ease, background 0.5s ease; }

/* Working budget label — always visible */
.token-bar-label       { margin-top: 5px; font-family: 'Cormorant Garamond', Georgia, serif;
                         font-size: 11px; color: var(--text-light); letter-spacing: 0.03em;
                         text-align: right; }
.token-bar-label.amber { color: var(--bar-amber); }
.token-bar-label.red   { color: var(--bar-red); }


/* ================================================================
   CONVERSATION AREA
   ================================================================ */

.conversation { flex: 1; overflow-y: auto; padding: 24px 24px 12px;
                scroll-behavior: smooth; scrollbar-width: thin;
                scrollbar-color: var(--border) transparent; }

.session-divider         { text-align: center; position: relative; margin: 4px 0 20px; }
.session-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0;
                           height: 1px; background: var(--border-lt); }
.session-divider span    { position: relative; background: var(--bg); padding: 0 12px;
                           font-family: 'Cormorant Garamond', Georgia, serif;
                           font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
                           color: var(--text-light); }

/* No explicit empty-state element present in argos.html. */


/* ================================================================
   WAKE DISPLAY
   ================================================================ */

.turn-wake              { background: var(--accent-dim);
                          border-left: 2.5px solid var(--accent-border);
                          border-radius: 0 6px 6px 0; padding: 14px 18px;
                          margin-bottom: 24px; }
.turn-wake .turn-label  { font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
                          text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.turn-wake .turn-content { font-style: italic; font-size: 14px; color: var(--text);
                           line-height: 1.65; }


/* ================================================================
   MESSAGE BUBBLES — USER & ASSISTANT
   ================================================================ */

.turn-user              { background: var(--parchment); border-radius: 3px;
                          padding: 11px 16px; margin-bottom: 2px; max-width: 92%; }
.turn-user .turn-label  { font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 11px; font-weight: 600; letter-spacing: 0.10em;
                          text-transform: uppercase; color: var(--text-muted);
                          margin-bottom: 5px; }
.turn-user .turn-time   { font-weight: 400; margin-left: 8px; letter-spacing: 0.03em; }
.turn-user .turn-content { font-size: 15px; line-height: 1.7; white-space: pre-wrap; }

.turn-assistant              { background: var(--surface);
                               border-left: 2.5px solid var(--accent);
                               border-radius: 0 3px 3px 0; padding: 13px 18px;
                               margin-bottom: 18px; max-width: 96%; position: relative; }
.turn-assistant .turn-label  { font-family: 'Cormorant Garamond', Georgia, serif;
                               font-size: 11px; font-weight: 600; letter-spacing: 0.10em;
                               text-transform: uppercase; color: var(--accent);
                               margin-bottom: 6px; }

.turn-content  { font-size: 15px; line-height: 1.7; white-space: pre-wrap;
                 word-break: break-word; }
.turn-tokens   { margin-top: 8px; font-family: 'Cormorant Garamond', Georgia, serif;
                 font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }

.artefact-ref  { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
                 padding: 5px 10px; background: var(--parchment); border-radius: 2px;
                 font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                 color: var(--text-muted); letter-spacing: 0.04em; }

/* Pin button — PRESENT, not hover-revealed.
   Found by sweeping for the pattern that hid the library's delete control (Reg, 17 Aug): this sat at
   opacity:0 until the turn was hovered, and this file is loaded by EVERY Prime page, so the defect was
   on all of them. It hid precisely when it was wanted — an unpinned turn is the only kind you would
   ever want to pin, and .pinned already forced it visible, so the control was invisible in exactly the
   state where it is the useful one. On touch there is no hover, so it could not be reached at all.
   Recessive by COLOUR at full strength, which is the standing rule, rather than by fading to nothing. */
.pin-btn { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px;
           display: flex; align-items: center; justify-content: center;
           opacity: 0.55; transition: opacity 0.15s, color 0.15s; cursor: pointer; font-size: 16px;
           color: var(--text-muted); border: none; background: none; padding: 0; }
.turn-assistant:hover .pin-btn         { opacity: 1; }
.pin-btn:hover, .pin-btn:focus-visible { opacity: 1; color: var(--accent); }
.turn-assistant.pinned .pin-btn        { opacity: 1; color: var(--accent); }
.turn-assistant.pinned::after          { content: ''; position: absolute; top: 0; right: 0;
                                         width: 0; height: 0; border-style: solid;
                                         border-width: 0 14px 14px 0;
                                         border-color: transparent var(--accent-border)
                                         transparent transparent; }

/* Attention divider — between turns when context boundary is signalled */
.attention-divider               { display: flex; align-items: center; gap: 10px;
                                   margin: 6px 0 18px; opacity: 0.7; }
.attention-divider::before,
.attention-divider::after        { content: ''; flex: 1; height: 1px;
                                   background: var(--accent-dim); }
.attention-divider span          { font-family: 'Cormorant Garamond', Georgia, serif;
                                   font-size: 10px; letter-spacing: 0.1em;
                                   text-transform: uppercase; color: var(--accent);
                                   opacity: 0.6; white-space: nowrap; }

/* Thinking indicator */
.thinking         { display: none; padding: 8px 0 8px 18px;
                    font-family: 'Cormorant Garamond', Georgia, serif;
                    font-style: italic; font-size: 14px; color: var(--text-muted);
                    border-left: 2px solid var(--border); margin-bottom: 18px;
                    animation: thinkPulse 2s ease-in-out infinite; }
.thinking.visible { display: block; }
@keyframes thinkPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }


/* ================================================================
   SESSION CONTROLS — NEW / CONTINUE / RETIRE
   ================================================================ */

/* Retirement prompt — shown when budget reaches threshold */
.retirement-prompt  { display: flex; align-items: center; gap: 10px; padding: 10px 0;
                      margin-bottom: 8px; animation: fadeIn 0.6s ease forwards; }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }

.retirement-dot     { width: 6px; height: 6px; border-radius: 50%;
                      background: var(--bar-amber); flex-shrink: 0;
                      animation: dotPulse 2.5s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.retirement-text    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px;
                      font-style: italic; color: var(--text-muted); letter-spacing: 0.02em; }

.retirement-confirm { text-align: center; padding: 14px 0;
                      font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px;
                      font-style: italic; color: var(--text-muted);
                      animation: fadeIn 0.8s ease forwards; }

/* NOTE: .btn-new-session is shared across New Session, Continue, and Retire buttons
   in argos.html (same class on all three). Depart button redesign (MST 0dbae34f)
   will differentiate these — update this section at that point. */


/* ================================================================
   INPUT AREA
   ================================================================ */

.input-area         { flex-shrink: 0; padding: 12px 24px 20px;
                      border-top: 1px solid var(--border); }

/* Image / file preview strip */
.image-preview           { display: none; align-items: center; gap: 8px;
                           padding: 8px 10px; margin-bottom: 6px;
                           background: var(--parchment); border-radius: 2px;
                           border: 1px solid var(--border); }
.image-preview.visible   { display: flex; }
.image-preview img       { width: 48px; height: 48px; object-fit: cover;
                           border-radius: 2px; }
.image-preview-name      { font-family: 'Cormorant Garamond', Georgia, serif;
                           font-size: 12px; color: var(--text-muted); flex: 1;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-remove-image        { background: none; border: none; cursor: pointer;
                           color: var(--text-light); font-size: 14px; padding: 0;
                           transition: color 0.15s; }
.btn-remove-image:hover  { color: var(--text); }

/* Input row */
.input-row  { display: flex; align-items: flex-start; gap: 8px; }

.btn-attach       { flex-shrink: 0; width: 36px; height: 36px; margin-top: 2px;
                    display: flex; align-items: center; justify-content: center;
                    border: 1px solid var(--border); border-radius: 2px;
                    background: transparent; cursor: pointer; color: var(--text-muted);
                    transition: color 0.15s, border-color 0.15s; }
.btn-attach:hover { color: var(--text-muted); border-color: var(--text-muted); }

#file-input { display: none; }

textarea             { flex: 1; min-height: 72px; max-height: 160px; padding: 11px 13px;
                       resize: none; outline: none; background: var(--surface);
                       border: 1px solid var(--border); border-radius: 3px;
                       font-family: 'Lora', Georgia, serif; font-size: 14px;
                       color: var(--text); line-height: 1.65; transition: border-color 0.2s; }
textarea:focus       { border-color: var(--accent); }
textarea::placeholder { color: var(--text-light); font-style: italic; }

.input-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }


/* ================================================================
   BUTTONS & CONTROLS
   ================================================================ */

.btn                    { font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
                          padding: 7px 18px; border-radius: 2px; cursor: pointer;
                          transition: opacity 0.15s; }
.btn:hover:not(:disabled) { opacity: 0.75; }
.btn:disabled           { opacity: 0.35; cursor: default; }

.btn-send               { background: var(--btn); color: var(--btn-text);
                          border: none; padding: 7px 22px; }
.btn-new-session        { background: transparent; color: var(--text-muted);
                          border: 1px solid var(--border); }


/* ================================================================
   ARTEFACT PANEL
   ================================================================ */

/* Panel toggle tab — sits on the edge of left-col */
.panel-toggle           { position: absolute; right: -1px; bottom: 40px; width: 20px;
                          padding: 8px 0; background: var(--panel-bg);
                          border: 1px solid var(--border); border-right: none;
                          border-radius: 2px 0 0 2px;
                          font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 10px; color: var(--text-light);
                          writing-mode: vertical-rl; cursor: pointer;
                          letter-spacing: 0.08em; text-transform: uppercase;
                          display: none; align-items: center; justify-content: center;
                          gap: 4px; transition: color 0.15s; }
.panel-toggle.visible   { display: flex; }
.panel-toggle:hover     { color: var(--text-muted); }

.panel-badge            { display: none; width: 14px; height: 14px;
                          background: var(--accent); color: white; font-size: 8px;
                          border-radius: 50%; align-items: center; justify-content: center;
                          writing-mode: horizontal-tb; }
.panel-badge.visible    { display: flex; }

/* Panel body */
.artefact-panel         { width: 280px; flex-shrink: 0; background: var(--panel-bg);
                          border-left: 1px solid var(--border); display: flex;
                          flex-direction: column; transition: width 0.25s ease;
                          overflow: hidden; }
.artefact-panel.closed  { width: 0; border-left: none; }

.panel-header           { padding: 18px 16px 12px; border-bottom: 1px solid var(--border-lt);
                          display: flex; align-items: center; justify-content: space-between;
                          flex-shrink: 0; }
.panel-label            { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                          letter-spacing: 0.12em; text-transform: uppercase;
                          color: var(--text-muted); }
.panel-close            { background: none; border: none; font-size: 16px;
                          color: var(--text-light); cursor: pointer; padding: 0;
                          line-height: 1; transition: color 0.15s; }
.panel-close:hover      { color: var(--text); }

.panel-scroll           { flex: 1; overflow-y: auto; scrollbar-width: thin;
                          scrollbar-color: var(--border) transparent; }
.panel-section-label    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 10px;
                          letter-spacing: 0.12em; text-transform: uppercase;
                          color: var(--text-light); padding: 10px 16px 6px; }
.panel-empty            { padding: 24px 16px; font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 12px; color: var(--text-light); font-style: italic;
                          text-align: center; }

/* Pinned entries */
.pinned-entry           { padding: 8px 16px; border-bottom: 1px solid var(--border-lt);
                          cursor: pointer; display: flex; align-items: flex-start;
                          gap: 6px; transition: background 0.15s; }
.pinned-entry:hover     { background: rgba(0,0,0,0.03); }
.pinned-icon            { font-size: 10px; color: var(--accent); margin-top: 2px;
                          flex-shrink: 0; }
.pinned-excerpt         { font-size: 12px; color: var(--text-muted); font-style: italic;
                          line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
                          -webkit-box-orient: vertical; overflow: hidden; }

/* Artefact entries */
.artefact-entry         { padding: 10px 16px; border-bottom: 1px solid var(--border-lt); }
.artefact-title         { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px;
                          color: var(--text); letter-spacing: 0.02em; margin-bottom: 3px;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artefact-meta          { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 10.5px;
                          color: var(--text-light); letter-spacing: 0.04em; margin-bottom: 8px; }
.artefact-actions       { display: flex; gap: 4px; flex-wrap: wrap; }

.btn-artefact           { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                          padding: 4px 8px; border: 1px solid var(--border); border-radius: 2px;
                          background: var(--surface); color: var(--text-muted); cursor: pointer;
                          transition: background 0.15s; white-space: nowrap; }
.btn-artefact:hover     { background: var(--parchment); }
.btn-artefact.hold      { color: var(--text); background: rgba(100,80,40,0.04); }
.btn-artefact.hold:hover { background: rgba(100,80,40,0.09);
                           border-color: rgba(100,80,40,0.3); }


/* ================================================================
   HOLD THIS UI
   ================================================================ */

.hold-modal             { background: var(--surface); border: 1px solid var(--border);
                          border-radius: 4px; width: 100%; max-width: 520px;
                          max-height: 88vh; display: flex; flex-direction: column;
                          box-shadow: 0 8px 32px rgba(28,28,26,0.15); }
.hold-modal-head        { padding: 16px 22px 12px; border-bottom: 1px solid var(--border-lt);
                          flex-shrink: 0; }
.hold-modal-title       { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px;
                          font-weight: 600; color: var(--text); letter-spacing: -0.01em;
                          line-height: 1.2; }
.hold-modal-subtitle    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12px;
                          color: var(--accent); margin-top: 3px; letter-spacing: 0.04em; }
.hold-modal-body        { padding: 16px 22px; overflow-y: auto; flex: 1;
                          scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hold-modal-foot        { padding: 12px 22px 16px; border-top: 1px solid var(--border-lt);
                          display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }

.hold-field-group       { margin-bottom: 14px; }
.hold-field-row         { display: flex; gap: 10px; margin-bottom: 14px; }
.hold-field-row .hold-field-group { flex: 1; margin-bottom: 0; }
.hold-field-label       { display: block; font-family: 'Cormorant Garamond', Georgia, serif;
                          font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
                          color: var(--text-muted); margin-bottom: 4px; }
.hold-field-hint        { font-size: 12px; color: var(--text-light); font-style: italic;
                          line-height: 1.5; margin-bottom: 6px; }
.hold-tag               { display: inline-block; margin-left: 6px; padding: 1px 6px;
                          background: var(--border-lt); border-radius: 2px;
                          font-family: 'Cormorant Garamond', Georgia, serif; font-size: 9px;
                          letter-spacing: 0.08em; text-transform: uppercase;
                          color: var(--text-light); }

.hold-modal input[type="text"],
.hold-modal textarea            { width: 100%; padding: 8px 10px;
                                  border: 1px solid var(--border); border-radius: 2px;
                                  background: var(--bg); color: var(--text);
                                  font-family: 'Lora', Georgia, serif; font-size: 13px;
                                  line-height: 1.6; outline: none;
                                  transition: border-color 0.15s; resize: vertical; }
.hold-modal input[type="text"]:focus,
.hold-modal textarea:focus      { border-color: var(--accent); }
.hold-modal input[type="text"]::placeholder,
.hold-modal textarea::placeholder { color: var(--text-light); font-style: italic; }

/* Notes toggle */
.hold-notes-toggle      { cursor: pointer; display: flex; align-items: center; gap: 7px;
                          padding: 7px 0; margin-bottom: 2px;
                          font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12px;
                          letter-spacing: 0.04em; color: var(--text-muted);
                          user-select: none; border-top: 1px solid var(--border-lt); }
.hold-notes-toggle:hover { color: var(--text); }
.hold-notes-arrow       { font-size: 9px; transition: transform 0.15s; flex-shrink: 0; }
.hold-notes-arrow.open  { transform: rotate(90deg); }
.hold-notes-section     { display: none; }
.hold-notes-section.open { display: block; }

/* Amend display — existing membrane shown when amending */
.hold-amend-display     { background: var(--parchment); border-radius: 4px;
                          border: 1px solid var(--border-lt);
                          border-left: 2.5px solid rgba(100,80,40,0.25);
                          padding: 12px 14px; margin-bottom: 16px; }
.hold-amend-label,
.hold-amend-log-label   { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 9.5px;
                          letter-spacing: 0.12em; text-transform: uppercase;
                          color: var(--text-light); margin-bottom: 6px; display: block; }
.hold-amend-log-label   { margin-top: 10px; }
.hold-amend-current     { font-size: 13px; color: var(--text); line-height: 1.65;
                          margin-bottom: 4px; }
.hold-amend-entry       { font-size: 12px; color: var(--text-muted); line-height: 1.6;
                          padding: 6px 0; border-top: 1px solid var(--border-lt); }
.hold-amend-entry:first-child { border-top: none; padding-top: 0; }

.hold-type-badge          { display: inline-block; padding: 1px 6px; margin-right: 4px;
                            font-family: 'Cormorant Garamond', Georgia, serif; font-size: 9px;
                            letter-spacing: 0.06em; text-transform: uppercase;
                            border-radius: 2px; vertical-align: middle; }
.hold-type-badge.world    { background: rgba(60,100,70,0.1); color: #2D6040; }
.hold-type-badge.revision { background: rgba(80,60,120,0.1); color: #4A3870; }

.hold-date-prelabel     { display: flex; align-items: baseline; gap: 8px;
                          margin-bottom: 6px; flex-wrap: wrap; }
.hold-date-str          { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                          color: var(--text-muted); letter-spacing: 0.04em; flex-shrink: 0; }

.hold-btn-cancel        { padding: 7px 18px; border: 1px solid var(--border);
                          border-radius: 2px; background: transparent;
                          font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px;
                          color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.hold-btn-cancel:hover  { border-color: var(--text-muted); color: var(--text); }
.hold-btn-primary       { padding: 7px 22px; border: none; border-radius: 2px;
                          background: var(--btn);
                          font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px;
                          color: var(--btn-text); cursor: pointer; transition: opacity 0.15s;
                          letter-spacing: 0.02em; }
.hold-btn-primary:hover    { opacity: 0.82; }
.hold-btn-primary:disabled { opacity: 0.4; cursor: default; }


/* ================================================================
   MODALS & OVERLAYS
   ================================================================ */

/* Generic overlay — used by both inspect modal and hold-this modal */
.inspect-modal-overlay  { position: fixed; inset: 0; background: rgba(28,28,26,0.45);
                          display: flex; align-items: center; justify-content: center;
                          z-index: 1000; padding: 24px; }

.inspect-modal          { background: var(--surface); border: 1px solid var(--border);
                          border-radius: 4px; width: 100%; max-width: 680px;
                          max-height: 80vh; display: flex; flex-direction: column;
                          box-shadow: 0 8px 32px rgba(28,28,26,0.15); }
.inspect-modal-header   { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-lt);
                          display: flex; align-items: center; justify-content: space-between;
                          flex-shrink: 0; }
.inspect-modal-title    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px;
                          color: var(--text); letter-spacing: 0.02em; overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; flex: 1;
                          margin-right: 12px; }
.inspect-modal-close    { background: none; border: none; font-size: 18px;
                          color: var(--text-light); cursor: pointer; padding: 0;
                          line-height: 1; flex-shrink: 0; transition: color 0.15s; }
.inspect-modal-close:hover { color: var(--text); }
.inspect-modal-body     { flex: 1; overflow-y: auto; padding: 16px 20px;
                          scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.inspect-modal-content  { font-family: 'Lora', Georgia, serif; font-size: 13.5px;
                          color: var(--text); line-height: 1.7; white-space: pre-wrap;
                          word-break: break-word; }
.inspect-modal-footer   { padding: 12px 20px; border-top: 1px solid var(--border-lt);
                          display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }


/* ================================================================
   ERROR STATE
   ================================================================ */

.error-state              { margin-top: 8px; padding: 10px 14px; border-radius: 2px;
                            border-left: 2.5px solid; font-family: 'Cormorant Garamond',
                            Georgia, serif; font-size: 13px; line-height: 1.5;
                            display: none; animation: fadeIn 0.3s ease; }
.error-state.visible      { display: block; }
.error-state.rate-limit   { background: rgba(168,120,32,0.08); border-left-color: var(--bar-amber);
                            color: var(--bar-amber); }
.error-state.api-error    { background: rgba(139,48,32,0.06); border-left-color: var(--bar-red);
                            color: var(--bar-red); }
.error-state.ctx-exceeded { background: rgba(139,48,32,0.06); border-left-color: var(--bar-red);
                            color: var(--bar-red); }
.error-countdown          { font-size: 11px; opacity: 0.7; margin-top: 4px; }
.error-dismiss            { background: none; border: 1px solid currentColor; color: inherit;
                            font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                            padding: 2px 8px; border-radius: 2px; cursor: pointer;
                            margin-top: 6px; opacity: 0.7; }
.error-dismiss:hover      { opacity: 1; }


/* ================================================================
   UTILITY
   ================================================================ */

/* No .sr-only or .hidden classes present in argos.html.
   Add here when needed. */


/* ================================================================
   RESPONSIVE — MOBILE BREAKPOINTS
   ================================================================ */

/* No @media queries present in argos.html at extraction time.
   Add here when responsive work begins — co-locate with components
   or consolidate at end of file, matching source structure. */
