/* AgAI Labs: F1 site fixes (colors, buttons, states, tap targets).
   Loaded last on every page by scripts/sitefixes.py. Selectors here are
   written to win over site.css, nav.css and tools.css by order or by
   specificity. Sources: receipts/AUDIT-ISSUES.md group F1 (audit-1 D01-D06,
   D12, D13, D23, D24; audit-3 S-02, S-03, S-04, S-12; audit-6 contrast rows;
   audit-2 M03, M04, M06, M07, M08). */

:root{
  /* Redline stays #E0644C for drawings, rules, ticks and focus rings.
     Filled red surfaces use the fill tokens (white text 5.34:1, 5.90:1, 7.49:1). */
  --red-fill:#B5482F;
  --red-fill-hover:#A94430;
  --red-fill-press:#8F3A27;
  --r:0;
}


/* ---- links (D04, audit-6 link hover) ---- */
/* Print to Cyanotype is 10.39:1 on Sheet and 11.08:1 on Paper. */
a:hover{color:var(--cy);text-decoration-thickness:2px}

/* Block links keep their own text color on hover. */
.cards a:hover,.stage-index a:hover,a.sn-cell:hover{color:var(--text)}

/* Text links on dark grounds turn white, never Cyanotype on Cyanotype. */
:is(.page-head,.cta-band,.site-footer) a:not(.btn):not(.brand):hover{color:#fff}


/* ---- one button system (D01, D12, D24, S-02) ---- */
/* Shared metrics: 44 px minimum, radius 0, Saira Condensed 700, one padding. */
.btn,
.site-header .agai-desktop-nav>.btn,
.intake button,
html .agai-tools button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:.02em;line-height:1.2;
  border:1.5px solid currentColor;border-radius:0;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,transform .1s}

/* .btn-lg keeps its class but takes the shared size. */
.btn-lg{font-size:1.06rem;padding:0 20px}

/* The header CTA uses the same size; it fits at 980 px (measured). */
.site-header .agai-desktop-nav>.btn{margin-left:12px}

/* Pressed: a 1 px push on every button. */
.btn:active,
.intake button:not(:disabled):active,
html .agai-tools button:not(:disabled):active,
.agai-mobile-cta:active{transform:translateY(1px)}

/* Focus: 2 px Redline ring, 3 px offset. Redline is 3.40:1 on Cyanotype,
   4.14:1 on Deep, 3.06:1 on Sheet, 3.26:1 on Paper, 3.44:1 on white. */
.btn:focus-visible,
.intake button:focus-visible,
html .agai-tools button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Primary (filled). */
.btn-red,
.site-header .agai-desktop-nav>.btn-red,
.intake button:not(:disabled),
html .agai-tools button[type=submit]{background:var(--red-fill);border-color:var(--red-fill);color:#fff}

.btn-red:hover,
.site-header .agai-desktop-nav>.btn-red:hover,
.intake button:not(:disabled):hover,
html .agai-tools button[type=submit]:hover:not(:disabled){background:var(--red-fill-hover);border-color:var(--red-fill-hover);color:#fff}

.btn-red:active,
.site-header .agai-desktop-nav>.btn-red:active,
.intake button:not(:disabled):active,
html .agai-tools button[type=submit]:active:not(:disabled){background:var(--red-fill-press);border-color:var(--red-fill-press);color:#fff}

/* Secondary on dark grounds (page head, CTA band, footer, header). */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cy)}
.btn-ghost:active{background:var(--soft);border-color:var(--soft);color:var(--cy-deep)}

/* Secondary on light grounds (sheet, prose, menu panels), or opt in with .on-light. */
:is(.sheet,.prose,.agai-nav-panel,.agai-mobile-menu) .btn-ghost,
.btn-ghost.on-light{color:var(--cy);border-color:var(--cy);background:transparent}
:is(.sheet,.prose,.agai-nav-panel,.agai-mobile-menu) .btn-ghost:hover,
.btn-ghost.on-light:hover{background:var(--cy);border-color:var(--cy);color:var(--ink)}
:is(.sheet,.prose,.agai-nav-panel,.agai-mobile-menu) .btn-ghost:active,
.btn-ghost.on-light:active{background:var(--cy-deep);border-color:var(--cy-deep);color:#fff}

/* Tool button: Cyanotype fill on Sheet and on the dark tool panels. */
html .agai-tools button{background:var(--cy);border-color:var(--line);color:var(--ink);font-weight:700;white-space:normal}
html .agai-tools button:hover:not(:disabled){background:var(--print);border-color:var(--ink);color:#fff}
html .agai-tools button:active:not(:disabled){background:var(--cy-deep);border-color:var(--ink);color:#fff}
html .agai-tools :is(a,button,summary,[tabindex]):focus-visible{outline-width:2px}

/* Disabled, light ground: Paper, Print text 6.85:1, dashed Print border. */
.btn:is(:disabled,[aria-disabled=true],.is-disabled),
.intake button:disabled,
html .agai-tools button:disabled,
html .agai-tools fieldset:disabled button{
  background:var(--paper);color:var(--print);border:1.5px dashed var(--print);
  opacity:1;cursor:not-allowed;transform:none}

/* Disabled, dark ground: transparent, Soft text 6.71:1 on Cyanotype, dashed Soft border. */
:is(.page-head,.cta-band,.site-footer,.site-header) .btn:is(:disabled,[aria-disabled=true],.is-disabled),
html .agai-tools :is(.tool-panel,.tool-card,.tool-note) button:disabled,
html .agai-tools :is(.tool-panel,.tool-card,.tool-note) fieldset:disabled button{
  background:transparent;color:var(--soft);border:1.5px dashed var(--soft)}

/* Mobile menu CTA: same fill and states. The dialog scrolls, so an outer ring
   would clip; the ring sits inside the fill (white on #B5482F is 5.34:1). */
.agai-mobile-menu .agai-mobile-cta{background:var(--red-fill);color:#fff;transition:background-color .15s,transform .1s}
.agai-mobile-menu .agai-mobile-cta:hover{background:var(--red-fill-hover);color:#fff}
.agai-mobile-menu .agai-mobile-cta:active{background:var(--red-fill-press);color:#fff}
.agai-mobile-menu .agai-mobile-cta:focus-visible{outline:2px solid #fff;outline-offset:-6px}

/* Skip link. */
.skip:focus{background:var(--red-fill);color:#fff;font-family:var(--display);font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;text-decoration:none}
.skip:focus-visible{outline:2px solid var(--red);outline-offset:3px}


/* ---- footer (D05, M03) ---- */
.site-footer{background-color:var(--cy-deep)}
.site-footer li{margin:0}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px}


/* ---- breadcrumbs (M04) ---- */
.crumbs ol{align-items:center;gap:0 6px;margin-bottom:6px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}


/* ---- stage sheet dots (M07, S-12) ---- */
.sn-dot{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 2px;position:relative}
.sn-dot:not(.is-cur):hover{box-shadow:inset 0 -3px 0 var(--print)}
.sn-dot:not(.is-cur):active{background:var(--sheet)}
.sn-dot.is-cur::after{background:var(--line)}
a.sn-cell:hover strong{color:var(--cy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:640px){
  .sn-dots{grid-template-columns:repeat(5,1fr)}
  .sn-dot:nth-child(5n+1){border-left:0}
  .sn-dot:nth-child(n+6){border-top:1px solid var(--line)}
}


/* ---- Redline restraint outside drawings (D06, D23) ----
   Redline stays on: the h2 section rule accent, the card and stage-cell tick
   on hover, the primary CTA fill family and focus rings. */
.answer{border-left-color:var(--print)}
.note{background:var(--paper);border-left:3px solid var(--print);color:var(--text)}
.faq summary::after,html .agai-tools .faq summary::after{color:var(--print)}
.faq summary:hover{background:#fff}
.faq summary:hover::after{color:var(--cy)}
.cards a::before{background:var(--print)}
.cards a:is(:hover,:focus-visible)::before{background:var(--red)}
.cta-inner::after{background:var(--line)}
.tb-wide::after{background:var(--line)}
.checklist li::after{border-left-color:var(--print);border-bottom-color:var(--print)}
html .agai-tools .tool-panel{border-top-color:var(--tool-line,var(--line))}


/* ---- /start/ form (D02, D03, D13, S-03, M08) ---- */
/* One frame: the card. No native fieldset frame inside it. */
.intake fieldset{border:0;margin:0;padding:0;min-width:0}
.intake legend{padding:0;margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:1.32rem;line-height:1.2;color:var(--cy)}
.intake fieldset>label{margin-top:16px}
.intake fieldset>legend+label{margin-top:0}

/* Field borders: Print is 7.23:1 on the white field and 6.85:1 on the Paper card. */
.intake input:not([type=checkbox]),.intake select,.intake textarea{border:1.5px solid var(--print);border-radius:0;min-height:44px}
.intake input:focus,.intake select:focus,.intake textarea:focus{border-color:var(--cy);outline:2px solid var(--red);outline-offset:2px}
.intake ::placeholder{color:var(--mute);opacity:1}

/* Disabled fields: Sheet fill, dashed Print border, Mute text (5.03:1 on Sheet). */
.intake :is(input,select,textarea):disabled{
  background:var(--sheet);border-style:dashed;border-color:var(--print);
  color:var(--mute);-webkit-text-fill-color:var(--mute);opacity:1;cursor:not-allowed}
.intake fieldset:disabled label{color:var(--cy)}

/* Checkbox row: 44 px target. */
.intake label:has(>input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:44px}
.intake input[type=checkbox]{margin:0;accent-color:var(--cy)}

.intake button{margin-top:20px;justify-self:start}


/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .btn,.intake button,html .agai-tools button,.agai-mobile-menu .agai-mobile-cta{transition:none}
  .btn:active,.intake button:active,html .agai-tools button:active,.agai-mobile-cta:active{transform:none}
}