/* CapCrop shared component layer. Color tokens live in theme.css; this file is
   the one place that styles the primitives every page uses — body shell, type,
   form controls, buttons, cards, focus rings, and a few layout utilities. Page
   stylesheets (capcrop.css, auth.css, billing.css) build only page-specific
   layout on top of this; they must not redefine these primitives. */
*{box-sizing:border-box}

body{margin:0;color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:
    radial-gradient(1100px 550px at 75% -10%,var(--glow) 0,transparent 60%),
    var(--bg);}

/* ── Type ──────────────────────────────────────────────────────────────────*/
h1{margin:0;font-size:20px;letter-spacing:.5px}
h1 .dot{color:var(--accent)}
.sub{color:var(--mut);font-size:13px}
.note{font-size:11px;color:var(--mut);margin-top:6px;line-height:1.4}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--wine)}

/* ── Form controls ─────────────────────────────────────────────────────────*/
label{display:block;font-size:13px;margin:10px 0 4px;color:var(--mut)}
input[type=text],input:not([type]),input[type=password],input[type=number],input[type=email],
select,textarea{width:100%;padding:8px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-family:ui-monospace,monospace;font-size:13px}
select:disabled{opacity:.5}
/* iOS Safari zooms toward any input whose text is under 16px on focus; on
   touch/coarse-pointer devices raise inputs to 16px so focusing never rescales
   the page. Desktop keeps the tighter 13px. */
@media (pointer:coarse){
  input[type=text],input:not([type]),input[type=password],input[type=number],input[type=email],
  select,textarea{font-size:16px}
}
input[type=range]{width:100%;accent-color:var(--accent)}

/* ── Buttons ───────────────────────────────────────────────────────────────*/
button,.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);padding:9px 14px;border-radius:8px;font-size:13px;
  font-family:inherit;transition:.15s}
button:hover,.btn:hover{border-color:var(--accent);color:var(--btnhover)}
button.primary,.btn.primary{background:var(--accent);color:var(--on-accent);
  border-color:var(--accent);font-weight:600}
button.primary:hover,.btn.primary:hover{filter:brightness(1.08);color:var(--on-accent)}
button.danger,.btn.danger{background:transparent;border:1px solid var(--warn);
  color:var(--warn);font-weight:600}
button.danger:hover,.btn.danger:hover{background:var(--warn);color:var(--on-accent);
  border-color:var(--warn)}
/* Small text-link-styled button (used for inline actions like Disconnect). */
.link-btn{width:auto;margin:0;padding:5px 10px;font-size:12px;font-weight:600;
  background:transparent;color:var(--accent-ink);border:1px solid var(--line);
  border-radius:6px;cursor:pointer;text-decoration:none}
.link-btn:hover{border-color:var(--accent);filter:none;color:var(--accent-ink)}

/* ── Icons ─────────────────────────────────────────────────────────────────
   Inline SVG sprite icons (see _icon_sprite.html / the ic() macro + helper).
   Sized to the current font (1em) and painted with currentColor, so an icon
   inherits the color and size of whatever text or button contains it and
   themes for free. .ic-lg bumps standalone icon buttons up from text size. */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.25em;height:1.25em;vertical-align:-.22em}

/* ── Visible keyboard focus everywhere (was hover-only). ────────────────────*/
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button:focus-visible,.btn:focus-visible,.link-btn:focus-visible,
.oauth-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
/* Screen-reader-only text: present in the a11y tree, hidden visually. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Card + simple layout helpers ──────────────────────────────────────────*/
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.row{display:flex;gap:8px;align-items:center}

/* ── Spinner (shared by header status + AI-enhance overlay). ────────────────*/
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:s 0.7s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}

/* ── Utilities — replace the repeated inline styles in markup. ──────────────*/
.w-full{width:100%}
.ml-auto{margin-left:auto}
.mt-1{margin-top:6px}
.mt-2{margin-top:8px}
.mt-3{margin-top:10px}