/* ===========================================================================
 * SIGNATURE — the third theme.
 *
 * Like theme-editorial.css, this defines NO palette. Not one --p-* token, not
 * one brand hue. The gold, the graphite and the semantic ok/warn/bad all come
 * through from index.html untouched, so all three themes are the same product
 * in the same colours and every one works in light and dark.
 *
 * The only colours written here are neutral black and white at low alpha, and
 * only ever as MATERIAL — the inner top highlight and the ambient shadow that
 * make a surface look like it has thickness. Those are lighting, not brand.
 *
 * Where the other two sit:
 *
 *   Classic     rounded 12px, bordered, flat-ish, medium density
 *   Editorial   square, no boxes, hairline rules, airy, printed
 *   Signature   deep radius, real depth, separated bands, pill controls
 *
 * The idea is a material one: every surface has a lit top edge and casts a
 * soft shadow, controls are fully rounded, and table rows become detached
 * bands rather than lines in a grid. Gold is used as light — a glow, a
 * hairline, a gradient on a number — rather than as fill, so it reads as
 * expensive rather than loud.
 *
 * Scoped entirely under html[data-skin="signature"].
 * ========================================================================= */

html[data-skin="signature"] {
  --sg-r: 18px;
  --sg-r-sm: 12px;

  /* Material, not palette: a lit top edge and an ambient shadow. Kept neutral
     so they read as lighting in both light and dark rather than tinting the
     brand. */
  --sg-lip: inset 0 1px 0 rgba(255,255,255,.07);
  --sg-cast: 0 1px 2px rgba(0,0,0,.10), 0 18px 38px -26px rgba(0,0,0,.55);
  --sg-cast-lift: 0 2px 6px rgba(0,0,0,.12), 0 30px 60px -28px rgba(0,0,0,.62);

  --sg-glow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent);
  --sg-hair: linear-gradient(90deg,
              color-mix(in srgb, var(--gold) 65%, transparent),
              color-mix(in srgb, var(--gold) 8%, transparent) 60%,
              transparent);
  --sg-ease: cubic-bezier(.22,1,.36,1);
  --sg-spring: cubic-bezier(.34,1.35,.5,1);
}
/* In light mode the lit edge has to come from the other direction — a white
   highlight on white is invisible, so it becomes a faint dark seam instead. */
html[data-skin="signature"]:not([data-theme="dark"]) {
  --sg-lip: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.03);
  --sg-cast: 0 1px 2px rgba(16,18,26,.05), 0 14px 32px -22px rgba(16,18,26,.30);
  --sg-cast-lift: 0 2px 6px rgba(16,18,26,.07), 0 26px 52px -24px rgba(16,18,26,.36);
}

/* ------------------------------------------------------------------ chrome */
html[data-skin="signature"] .apphead {
  background: color-mix(in srgb, var(--p-sf) 82%, transparent);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--p-line) 70%, transparent);
  box-shadow: var(--sg-cast);
}
html[data-skin="signature"] .tabs {
  background: color-mix(in srgb, var(--p-sf) 78%, transparent);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--p-line) 60%, transparent);
  padding: 6px 12px; gap: 4px;
}
/* The active tab is a raised pill, not an underline — the control itself
   moves forward instead of being marked from below. */
html[data-skin="signature"] .tab {
  border-bottom: 0 !important;
  border-radius: 999px;
  padding: 8px 14px;
  transition: color .2s var(--sg-ease), background .2s var(--sg-ease);
}
html[data-skin="signature"] .tab.on {
  color: var(--p-ink);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  box-shadow: var(--sg-lip), 0 2px 10px -4px color-mix(in srgb, var(--gold) 55%, transparent);
}
html[data-skin="signature"] .tab:hover:not(.on) {
  background: color-mix(in srgb, var(--p-ink) 6%, transparent);
}

/* ---------------------------------------------------------------- surfaces --
   A card is a slab: lit along its top edge, casting a soft shadow, with a
   gold hairline running off the top-left corner so the eye has somewhere to
   start. Dialogs inherit the same material. */
html[data-skin="signature"] .card {
  border-radius: var(--sg-r);
  background: linear-gradient(180deg,
              var(--p-sf),
              color-mix(in srgb, var(--p-sf2) 92%, var(--p-sf)));
  border: 1px solid color-mix(in srgb, var(--p-line) 72%, transparent);
  box-shadow: var(--sg-lip), var(--sg-cast);
  padding: 17px 18px;
  position: relative; overflow: hidden;
  transition: transform .32s var(--sg-spring), box-shadow .32s var(--sg-ease);
}
html[data-skin="signature"] .card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 40%; height: 1px;
  background: var(--sg-hair); opacity: .9; pointer-events: none;
}
html[data-skin="signature"] button.card:hover,
html[data-skin="signature"] .card.click:hover {
  transform: translateY(-4px);
  box-shadow: var(--sg-lip), var(--sg-cast-lift);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
html[data-skin="signature"] button.card:active { transform: translateY(-1px) }
/* The classic skin's left accent bar would fight the hairline. */
html[data-skin="signature"] .grid.g3 > .card::after,
html[data-skin="signature"] .metric::after { display: none }

/* ----------------------------------------------------------------- controls */
html[data-skin="signature"] .btn {
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--p-line) 85%, transparent);
  background: color-mix(in srgb, var(--p-sf) 90%, transparent);
  box-shadow: var(--sg-lip);
  transition: transform .2s var(--sg-spring), box-shadow .2s var(--sg-ease),
              border-color .2s, background .2s, color .2s;
}
html[data-skin="signature"] .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: var(--sg-lip), 0 6px 16px -8px rgba(0,0,0,.5);
}
html[data-skin="signature"] .btn:active:not(:disabled) { transform: translateY(0) scale(.985) }
html[data-skin="signature"] .btn.sm { padding: 7px 13px }
html[data-skin="signature"] .btn.pri {
  background: var(--gold); border-color: var(--gold); color: #17130A;
  box-shadow: var(--sg-lip), 0 8px 22px -10px color-mix(in srgb, var(--gold) 90%, transparent);
}
html[data-skin="signature"] .btn.pri:hover:not(:disabled) {
  background: var(--gold2); border-color: var(--gold2);
  box-shadow: var(--sg-lip), 0 12px 28px -10px color-mix(in srgb, var(--gold) 95%, transparent);
}
html[data-skin="signature"] .iconbtn {
  border-radius: 999px;
  box-shadow: var(--sg-lip);
  transition: transform .22s var(--sg-spring), background .2s;
}
html[data-skin="signature"] .iconbtn:hover { transform: scale(1.1) }

html[data-skin="signature"] .input,
html[data-skin="signature"] input,
html[data-skin="signature"] select,
html[data-skin="signature"] textarea {
  border-radius: var(--sg-r-sm);
  background: color-mix(in srgb, var(--p-sf2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-line) 80%, transparent);
  padding: 11px 13px;
  transition: border-color .2s, box-shadow .25s var(--sg-ease), background .2s;
}
html[data-skin="signature"] .input:focus,
html[data-skin="signature"] input:focus,
html[data-skin="signature"] select:focus,
html[data-skin="signature"] textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  box-shadow: var(--sg-glow);
  background: var(--p-sf);
}

html[data-skin="signature"] .pill {
  border-radius: 999px;
  padding: 4px 11px;
  background: color-mix(in srgb, var(--p-ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--p-line) 75%, transparent);
}
html[data-skin="signature"] .pill.gold {
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ------------------------------------------------------------------ tables --
   Rows detach into their own bands. border-spacing on a separated table is
   what makes each row a slab you can hover rather than a line between rules,
   and it is the single clearest structural difference from the other two
   themes at a glance. */
html[data-skin="signature"] table.tbl {
  border-collapse: separate;
  border-spacing: 0 6px;
}
html[data-skin="signature"] table.tbl th {
  border-bottom: 0;
  padding: 4px 14px 8px;
}
html[data-skin="signature"] table.tbl td {
  border-bottom: 0;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--p-sf2) 80%, transparent);
  transition: background .18s var(--sg-ease), box-shadow .18s var(--sg-ease);
}
html[data-skin="signature"] table.tbl tbody td:first-child {
  border-radius: var(--sg-r-sm) 0 0 var(--sg-r-sm);
}
html[data-skin="signature"] table.tbl tbody td:last-child {
  border-radius: 0 var(--sg-r-sm) var(--sg-r-sm) 0;
}
html[data-skin="signature"] table.tbl tbody tr:hover td {
  background: color-mix(in srgb, var(--gold) 10%, var(--p-sf));
}
html[data-skin="signature"] table.tbl tbody tr.click:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

/* --------------------------------------------------------------- hierarchy --
   Gold as light: the big numbers are lit with it rather than painted in it,
   and section heads get a hairline that fades out instead of a full rule. */
html[data-skin="signature"] .num {
  background: linear-gradient(135deg, var(--p-ink) 30%,
              color-mix(in srgb, var(--gold) 78%, var(--p-ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-skin="signature"] .hero { margin-bottom: 24px }
html[data-skin="signature"] .hero-title {
  font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.03em; line-height: 1.1;
}
html[data-skin="signature"] .hero-eyebrow { color: var(--gold-ink); letter-spacing: .2em }
html[data-skin="signature"] .sect-head {
  position: relative; padding-bottom: 10px; margin-bottom: 14px;
}
html[data-skin="signature"] .sect-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sg-hair);
}

/* ----------------------------------------------------------------- dialogs */
html[data-skin="signature"] .ak-scrim {
  background: color-mix(in srgb, var(--p-bg) 55%, transparent) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}
html[data-skin="signature"] .ak-modal {
  border-radius: 22px;
  box-shadow: var(--sg-lip), var(--sg-cast-lift);
  animation: sg-in .32s var(--sg-spring) both;
}
html[data-skin="signature"] .ak-modal-head,
html[data-skin="signature"] .ak-modal-foot {
  background: color-mix(in srgb, var(--p-sf) 90%, transparent);
  border-color: color-mix(in srgb, var(--p-line) 65%, transparent);
}
@keyframes sg-in {
  from { opacity: 0; transform: translate3d(0,12px,0) scale(.97) }
  to   { opacity: 1; transform: none }
}

/* ----------------------------------------------------------------- sign-in */
html[data-skin="signature"] .authcard {
  border-radius: 24px;
  box-shadow: var(--sg-lip), var(--sg-cast-lift);
  border: 1px solid color-mix(in srgb, var(--p-line) 70%, transparent);
}
html[data-skin="signature"] .seg { border-radius: 999px; padding: 4px }
html[data-skin="signature"] .seg button { border-radius: 999px }
html[data-skin="signature"] .seg button.on {
  background: var(--gold); color: #17130A;
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--gold) 90%, transparent);
}

/* ------------------------------------------------------------------- misc */
html[data-skin="signature"] .empty { border-radius: var(--sg-r) }
html[data-skin="signature"] .person-card,
html[data-skin="signature"] .course-card { border-radius: var(--sg-r) }
html[data-skin="signature"] .grid { gap: 14px }

/* Entrances: a short, unfussy rise. The depth is doing the work here, so the
   motion does not need to. */
html[data-skin="signature"] .grid > *,
html[data-skin="signature"] .hero-metrics > * {
  animation: sg-rise .42s var(--sg-ease) both;
}
html[data-skin="signature"] .grid > *:nth-child(2),
html[data-skin="signature"] .hero-metrics > *:nth-child(2) { animation-delay: .05s }
html[data-skin="signature"] .grid > *:nth-child(3),
html[data-skin="signature"] .hero-metrics > *:nth-child(3) { animation-delay: .1s }
html[data-skin="signature"] .grid > *:nth-child(n+4) { animation-delay: .15s }
@keyframes sg-rise {
  from { opacity: 0; transform: translate3d(0,10px,0) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  html[data-skin="signature"] *,
  html[data-skin="signature"] *::before,
  html[data-skin="signature"] *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html[data-skin="signature"] button.card:hover,
  html[data-skin="signature"] .card.click:hover,
  html[data-skin="signature"] .btn:hover:not(:disabled) { transform: none }
}