/* ===========================================================================
 * EDITORIAL — the second theme.
 *
 * NOT A RECOLOUR. This file does not define a single colour token. Every
 * colour — the gold, the graphite, the surfaces, the semantic ok/warn/bad —
 * is inherited untouched from the design system in index.html, and works in
 * light and dark exactly as it already does. What changes is the design
 * LANGUAGE:
 *
 *   Classic            Editorial
 *   ------------------ ---------------------------------------------
 *   rounded 12px       square, 0 radius throughout
 *   bordered cards     no boxes — blocks separated by hairline rules
 *   soft shadows       completely flat, no shadow anywhere
 *   filled inputs      underline-only fields, like a printed form
 *   medium density     wide vertical rhythm, much more air
 *   14-17px headings   large display headings, tight tracking
 *   decorative wash    no ambience; the page is paper
 *
 * The idea is a printed report or an exam broadsheet: rules, whitespace and
 * typographic hierarchy doing the work that borders and shadows do in the
 * classic skin. Same product, same palette, different discipline.
 *
 * Scoped entirely under html[data-skin="editorial"] — remove the attribute
 * and not one rule here applies.
 * ========================================================================= */

html[data-skin="editorial"] {
  --ed-rule: color-mix(in srgb, var(--p-line) 100%, transparent);
  --ed-rule-strong: color-mix(in srgb, var(--p-ink3) 55%, transparent);
  --ed-tint: color-mix(in srgb, var(--gold) 7%, transparent);
  --ed-ease: cubic-bezier(.2,.7,.3,1);
}

/* Paper, not a lit surface. The decorative wash is part of the classic look;
   an editorial page is flat by definition. */
html[data-skin="editorial"] .ambience { display:none }
html[data-skin="editorial"] body { background:var(--p-bg) }

/* Square everything. One rule, because the radius is the single most visible
   signature of the classic skin. */
html[data-skin="editorial"] .card,
html[data-skin="editorial"] .btn,
html[data-skin="editorial"] .pill,
html[data-skin="editorial"] .input,
html[data-skin="editorial"] input,
html[data-skin="editorial"] select,
html[data-skin="editorial"] textarea,
html[data-skin="editorial"] .iconbtn,
html[data-skin="editorial"] .seg,
html[data-skin="editorial"] .seg button,
html[data-skin="editorial"] .empty,
html[data-skin="editorial"] .authcard,
html[data-skin="editorial"] .ak-modal { border-radius:0 !important }

/* ------------------------------------------------------------------ chrome */
html[data-skin="editorial"] .apphead {
  background:var(--p-bg);
  border-bottom:1px solid var(--ed-rule-strong);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
  padding:14px 20px;
}
html[data-skin="editorial"] .tabs {
  background:var(--p-bg);
  border-bottom:1px solid var(--ed-rule);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  gap:0; padding:0 14px;
}
html[data-skin="editorial"] .tab {
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 14px 12px; border-bottom:2px solid transparent;
  transition:color .2s var(--ed-ease), border-color .2s var(--ed-ease);
}
html[data-skin="editorial"] .tab.on {
  color:var(--p-ink); border-bottom-color:var(--gold); background:none;
}

/* -------------------------------------------------------------- the block --
   A card stops being a container and becomes a section of a document: no
   border, no shadow, no fill — a rule above it and a short gold tick to mark
   where it starts. Modals are excluded: a dialog genuinely is a surface
   floating over the page and still needs to read as one. */
html[data-skin="editorial"] .card:not(.ak-modal):not(.authcard) {
  background:transparent;
  border:0;
  border-top:1px solid var(--ed-rule);
  box-shadow:none;
  padding:20px 0 24px;
  position:relative;
  animation:none;
}
html[data-skin="editorial"] .card:not(.ak-modal):not(.authcard)::after {
  content:''; position:absolute; top:-1px; left:0; width:34px; height:2px;
  background:var(--gold);
}
/* A block that is a button still has to say so. A tint, not a lift — nothing
   in this skin leaves the plane of the page. */
html[data-skin="editorial"] button.card:hover,
html[data-skin="editorial"] .card.click:hover {
  background:var(--ed-tint);
  transform:none; box-shadow:none;
}
html[data-skin="editorial"] button.card { padding-left:14px; padding-right:14px }
html[data-skin="editorial"] button.card::after { left:14px }

/* Inside a grid the blocks sit side by side, so they need their own top rule
   each and a little breathing room between columns. */
html[data-skin="editorial"] .grid { gap:0 26px }
html[data-skin="editorial"] .grid.g3 > .card::before,
html[data-skin="editorial"] .metric::before { display:none }

/* ------------------------------------------------------------- typography --
   The hierarchy carries the design here, so it is materially bigger and the
   labels get real presence instead of being a whisper above the number. */
html[data-skin="editorial"] .hero { margin-bottom:30px; padding-bottom:22px;
  border-bottom:1px solid var(--ed-rule-strong) }
html[data-skin="editorial"] .hero-title {
  font-size:clamp(28px, 4.4vw, 44px); line-height:1.04; letter-spacing:-.035em;
}
html[data-skin="editorial"] .hero-eyebrow {
  font-size:10px; letter-spacing:.24em; color:var(--gold-ink); opacity:1;
  margin-bottom:10px;
}
html[data-skin="editorial"] .hero-sub { font-size:14.5px; max-width:66ch; margin-top:11px }

html[data-skin="editorial"] .sect { margin-top:38px; animation:none }
html[data-skin="editorial"] .sect-head {
  border-bottom:1px solid var(--ed-rule); padding-bottom:9px; margin-bottom:14px;
  align-items:baseline;
}
html[data-skin="editorial"] .sect-title {
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--p-ink2);
}
html[data-skin="editorial"] .plbl { font-size:9.5px; letter-spacing:.2em }
html[data-skin="editorial"] .num { letter-spacing:-.045em }
html[data-skin="editorial"] h2 { font-size:22px; letter-spacing:-.03em }

/* ----------------------------------------------------------------- fields --
   Printed-form rules rather than filled boxes. The label sits above the line
   and the line is the input — the single clearest signal that this is a
   different design and not a repaint of the same one. */
html[data-skin="editorial"] .input,
html[data-skin="editorial"] input[type=text],
html[data-skin="editorial"] input[type=password],
html[data-skin="editorial"] input[type=email],
html[data-skin="editorial"] input[type=date],
html[data-skin="editorial"] input[type=number],
html[data-skin="editorial"] select,
html[data-skin="editorial"] textarea {
  background:transparent;
  border:0; border-bottom:1px solid var(--ed-rule-strong);
  padding:9px 2px;
  transition:border-color .2s var(--ed-ease);
}
html[data-skin="editorial"] .input:focus,
html[data-skin="editorial"] input:focus,
html[data-skin="editorial"] select:focus,
html[data-skin="editorial"] textarea:focus {
  outline:none; border-bottom-color:var(--gold); box-shadow:none;
}
html[data-skin="editorial"] .field > .plbl { margin-bottom:2px }

/* ---------------------------------------------------------------- buttons --
   Typographic, not upholstered: uppercase, tracked, square, hairline. */
html[data-skin="editorial"] .btn {
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 16px;
  border:1px solid var(--ed-rule-strong);
  background:transparent;
  transition:background .18s var(--ed-ease), color .18s var(--ed-ease),
             border-color .18s var(--ed-ease);
}
html[data-skin="editorial"] .btn:hover:not(:disabled) {
  background:var(--p-ink); color:var(--p-bg); border-color:var(--p-ink);
}
html[data-skin="editorial"] .btn.pri {
  background:var(--gold); border-color:var(--gold); color:#17130A;
}
html[data-skin="editorial"] .btn.pri:hover:not(:disabled) {
  background:var(--p-ink); border-color:var(--p-ink); color:var(--p-bg);
}
html[data-skin="editorial"] .btn.sm { padding:7px 11px; font-size:9.5px }
html[data-skin="editorial"] .btn.danger { border-color:var(--rose); color:var(--rose); background:transparent }
html[data-skin="editorial"] .btn.danger:hover:not(:disabled) { background:var(--rose); color:#fff }

html[data-skin="editorial"] .iconbtn { border:1px solid var(--ed-rule-strong); background:transparent }
html[data-skin="editorial"] .iconbtn:hover { background:var(--p-ink); color:var(--p-bg) }

/* ----------------------------------------------------------------- tables --
   A results table in a printed report: no cell boxes, a rule under the head,
   generous row height, and the row you are on marked by a gold edge rather
   than a fill. */
html[data-skin="editorial"] table.tbl th {
  border-bottom:1.5px solid var(--ed-rule-strong);
  padding:10px 12px 9px; letter-spacing:.18em;
}
html[data-skin="editorial"] table.tbl td {
  padding:14px 12px; border-bottom:1px solid var(--ed-rule);
}
html[data-skin="editorial"] table.tbl tbody tr {
  box-shadow:inset 2px 0 0 transparent;
  transition:box-shadow .16s var(--ed-ease), background .16s var(--ed-ease);
}
html[data-skin="editorial"] table.tbl tbody tr:hover {
  background:var(--ed-tint); box-shadow:inset 2px 0 0 var(--gold);
}

/* ------------------------------------------------------------------ pills --
   Square and typographic, so they read as annotations in the margin rather
   than as UI chips. */
html[data-skin="editorial"] .pill {
  border-radius:0; padding:3px 8px; letter-spacing:.13em;
  border-width:1px; background:transparent;
}

/* ------------------------------------------------------------- dialogs ---
   Still a surface, because it genuinely floats — but a square one with a
   hard edge instead of a soft floating panel. */
html[data-skin="editorial"] .ak-scrim {
  background:color-mix(in srgb, var(--p-bg) 82%, transparent) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-skin="editorial"] .ak-modal {
  background:var(--p-sf);
  border:1px solid var(--ed-rule-strong);
  box-shadow:none;
  animation:ed-in .24s var(--ed-ease) both;
}
html[data-skin="editorial"] .ak-modal-head {
  border-bottom:1px solid var(--ed-rule-strong); background:var(--p-sf);
  padding:16px 18px 13px;
}
html[data-skin="editorial"] .ak-modal-head h3 {
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
html[data-skin="editorial"] .ak-modal-body { padding:18px }
html[data-skin="editorial"] .ak-modal-foot { border-top:1px solid var(--ed-rule-strong); background:var(--p-sf) }

/* ------------------------------------------------------------- sign-in ---- */
html[data-skin="editorial"] .authcard {
  background:transparent; border:0; border-top:2px solid var(--gold);
  box-shadow:none; padding:30px 0 0; max-width:400px;
}
html[data-skin="editorial"] .seg {
  background:transparent; border:1px solid var(--ed-rule-strong); padding:0; gap:0;
}
html[data-skin="editorial"] .seg button {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px; border-radius:0;
}
html[data-skin="editorial"] .seg button.on { background:var(--p-ink); color:var(--p-bg) }

/* -------------------------------------------------------------- misc ------ */
html[data-skin="editorial"] .empty { border:1px dashed var(--ed-rule-strong); background:transparent }
html[data-skin="editorial"] .crumbs { font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px }
html[data-skin="editorial"] .body { padding:26px 20px }
html[data-skin="editorial"] .person-card,
html[data-skin="editorial"] .course-card { border-radius:0 }

/* Motion is restrained on purpose: a printed page does not bounce. One clean
   rise, no spring, nothing on hover that leaves the plane. */
@keyframes ed-in {
  from { opacity:0; transform:translate3d(0,6px,0) }
  to   { opacity:1; transform:none }
}
html[data-skin="editorial"] .body > .wrap { animation:ed-in .3s var(--ed-ease) both }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="editorial"] *,
  html[data-skin="editorial"] *::before,
  html[data-skin="editorial"] *::after {
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}