/* One black-and-gold system (issue 41) for the public page shell (tcc_html) and SysAdmin.
   Display: Cormorant Garamond. Text: Inter. Labels and eyebrows: JetBrains Mono.
   Loaded after forms.css and before page CSS; page CSS may extend but should not restyle tokens. */
:root {
  --ink: #0a0908; --surface: #14110f; --surface-2: #1b1713; --line: #2a2520; --line-gold: #4a3b22;
  --gold: #d4a017; --gold-bright: #f5d97a; --gold-soft: #e8c25a; --text-dim: #a89c88; --danger: #f1a99b;
  --text: #ece4d5; --bronze: #8b5a2b; --on-gold: #151006; --on-danger: #fff5ef; --ok: #5fa370;
  /* --danger is error text; lines, tints and fills use their own reds. */
  --danger-line: #a55143; --danger-bg: rgba(194,59,34,.08); --danger-fill: #ad3f2d;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --size-h2: 26px; --size-h3: 20px;
  --radius: 20px; --radius-sm: 12px; --shadow: 0 24px 80px rgba(0,0,0,.45);
  --glow: radial-gradient(ellipse at 50% 0, rgba(212,160,23,.10), transparent 62%);
  --ease: cubic-bezier(.2,.7,.2,1);
  /* Older shell names, kept as aliases so existing page CSS resolves to the same colours. */
  --bg: var(--ink); --bg-soft: var(--surface); --rule: var(--line); --amber: var(--gold); --amber-bright: var(--gold-bright);
}
/* Base elements. :where() keeps them at zero specificity, so any page or component rule wins.
   Keyboard focus for links comes from the shared forms.css focus-visible outline. */
:where(a) { color: var(--gold-soft); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
:where(a:hover) { text-decoration-color: currentColor; }
:where(h2, h3) { font-family: var(--font-display); font-weight: 600; color: var(--text); overflow-wrap: break-word; }
:where(h2) { font-size: var(--size-h2); }
:where(h3) { font-size: var(--size-h3); }
.tc-eyebrow { font: 500 11px/1.4 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.tc-title { font: 600 clamp(30px, 5vw, 42px)/1.12 var(--font-display); color: var(--gold-bright); letter-spacing: -.01em; margin: 0 0 10px; }
.tc-lead { font: 16px/1.6 var(--font-text); color: var(--text-dim); margin: 0 0 20px; }
/* The one card. .card is a temporary alias for the older shell and SysAdmin cards. A card holds
   tiles and alerts, never another card. */
.tc-panel, .card { width: 100%; min-width: 0; box-sizing: border-box; background: var(--glow), var(--surface); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
/* The one panel heading: every h2 in a card, and an h3 that opens a card, share one size, colour
   and font. Its specificity is one element, so page CSS may set spacing or a named hero title. */
:where(.tc-panel, .card) h2, :where(.tc-panel, .card) > h3 { font: 600 24px/1.2 var(--font-display); color: var(--gold-bright); letter-spacing: 0; text-transform: none; margin: 0 0 12px; overflow-wrap: break-word; }
/* A wide table scrolls sideways in its own region, so the page never does. */
.tc-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tc-table-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tc-tile { box-sizing: border-box; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.tc-tile:hover { border-color: var(--line-gold); }
/* Buttons, one family: .tc-btn is the primary (gold, one per view), .tc-btn-secondary the outline,
   .tc-btn-danger a destructive action (red, never gold) and .tc-btn-sm the dense size for admin rows,
   still a 44px target. .form-action is an older alias of .tc-btn. A class-less
   <button> in page content gets the primary look at zero specificity, so any page rule still wins. */
.tc-btn, .form-action, :where(main button:not([class])) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 48px; max-width: 100%; padding: 12px 22px; border: 1px solid var(--gold); border-radius: var(--radius-sm); background: linear-gradient(180deg, #e2b12c, var(--gold)); color: var(--on-gold); font: 600 15px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; text-align: center; text-decoration: none; overflow-wrap: break-word; cursor: pointer; margin: 0; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.tc-btn:hover:not(:disabled, [aria-disabled=true]), .form-action:hover:not(:disabled), :where(main button:not([class]):hover:not(:disabled)) { background: linear-gradient(180deg, #ecbd3a, #dcaa1e); box-shadow: 0 8px 28px rgba(212,160,23,.28); transform: translateY(-1px); }
.tc-btn:active:not(:disabled, [aria-disabled=true]), .form-action:active:not(:disabled) { transform: translateY(0) scale(.98); }
.tc-btn-secondary { background: transparent; color: var(--gold-soft); border-color: var(--line-gold); }
.tc-btn-secondary:hover:not(:disabled, [aria-disabled=true]) { background: rgba(212,160,23,.06); border-color: var(--gold); box-shadow: none; }
.tc-btn-danger { background: var(--danger-fill); color: var(--on-danger); border-color: var(--danger-line); }
.tc-btn-danger:hover:not(:disabled, [aria-disabled=true]) { background: #c34c37; border-color: #d98976; box-shadow: 0 8px 24px rgba(173,63,45,.3); }
.tc-btn-sm { min-height: 44px; padding: 8px 14px; gap: 8px; font-size: 14px; border-radius: 10px; }
.tc-btn:disabled, .tc-btn[aria-disabled=true], .form-action:disabled, :where(main button:not([class]):disabled) { cursor: not-allowed; opacity: .5; box-shadow: none; }
.tc-btn[aria-busy=true], :where(main button:not([class])[aria-busy=true]) { cursor: progress; opacity: .85; }
.tc-link, a.tc-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font: 500 15px var(--font-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(232,194,90,.4); }
.tc-link:hover { text-decoration-color: var(--gold-soft); }
/* One back link: a 44px link with a chevron, above a page's heading. */
.tc-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; color: var(--gold-soft); font: 500 14px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; text-decoration: none; overflow-wrap: anywhere; }
.tc-back::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tc-back:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.tc-status { min-height: 0; margin: 12px 0 0; font: 14px/1.5 var(--font-text); color: var(--text-dim); }
.tc-status:empty { display: none; }
.tc-status.is-error { color: var(--danger); }
/* Alerts: one box for a message about the page or a form; the modifier says what kind. */
.tc-alert { box-sizing: border-box; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line-gold); border-left-width: 3px; border-radius: 10px; background: rgba(212,160,23,.06); color: var(--text); font: 14px/1.55 var(--font-text); letter-spacing: 0; text-transform: none; text-align: left; overflow-wrap: anywhere; }
.tc-alert.is-info { border-left-color: var(--gold); }
.tc-alert.is-success { border-color: rgba(95,163,112,.45); border-left-color: var(--ok); background: rgba(95,163,112,.08); }
.tc-alert.is-warn { border-left-color: var(--gold-bright); background: rgba(212,160,23,.12); color: var(--gold-bright); }
.tc-alert.is-error { border-color: var(--danger-line); border-left-color: var(--danger-fill); background: var(--danger-bg); color: var(--danger); }
.tc-alert p { margin: 0 0 8px; color: inherit; font: inherit; }
.tc-alert > :last-child { margin-bottom: 0; }
/* Badges and dots: one status vocabulary (is-ok, is-warn, is-danger, is-muted). */
.tc-badge { display: inline-flex; align-items: center; box-sizing: border-box; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-dim); font: 500 10px/1.6 var(--font-label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.tc-badge.is-ok { color: var(--ok); border-color: rgba(95,163,112,.6); background: rgba(95,163,112,.08); }
.tc-badge.is-warn { color: var(--gold-soft); border-color: var(--line-gold); background: rgba(212,160,23,.08); }
.tc-badge.is-danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.tc-badge.is-muted { color: var(--text-dim); border-color: var(--line); background: transparent; }
.tc-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; background: var(--text-dim); }
.tc-dot.is-ok { background: var(--ok); box-shadow: 0 0 8px rgba(95,163,112,.6); }
.tc-dot.is-warn { background: var(--gold); box-shadow: 0 0 8px rgba(212,160,23,.6); }
.tc-dot.is-danger { background: var(--danger-fill); box-shadow: 0 0 8px rgba(194,59,34,.6); }
/* Empty states say so in the space the content would take. */
.tc-empty { box-sizing: border-box; margin: 0; padding: 24px 20px; border: 1px dashed var(--line-gold); border-radius: var(--radius-sm); color: var(--text-dim); font: 15px/1.6 var(--font-text); text-align: center; overflow-wrap: anywhere; }
.tc-empty p { margin: 0; color: inherit; font: inherit; }
.tc-empty a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
.tc-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(21,16,6,.35); border-top-color: var(--on-gold); animation: tc-spin .8s linear infinite; flex-shrink: 0; }
.tc-btn-secondary .tc-spinner { border-color: rgba(232,194,90,.3); border-top-color: var(--gold-soft); }
.tc-btn-danger .tc-spinner { border-color: rgba(255,245,239,.3); border-top-color: var(--on-danger); }
.tc-rise { animation: tc-rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.tc-success { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--ink); background: var(--gold); box-shadow: 0 0 0 8px rgba(212,160,23,.12); animation: tc-pop .5s var(--ease) both; }
.tc-success svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: tc-draw .45s .2s var(--ease) forwards; }
@keyframes tc-spin { to { transform: rotate(360deg); } }
@keyframes tc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tc-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tc-draw { to { stroke-dashoffset: 0; } }
@keyframes tc-shimmer { from { background-position: -240px 0; } to { background-position: 240px 0; } }
@media (max-width: 600px) { .tc-panel, .card { padding: 24px 18px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .tc-rise, .tc-success, .tc-success svg { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .tc-btn, .form-action, :where(main button:not([class])), .tc-tile { transition: none; }
  .tc-btn, .form-action, :where(main button:not([class])) { transform: none !important; }
  .tc-spinner { animation-duration: 2s; }
}