/* Widgets: every section of a screen is an outlined sheet of paper — 1 px --widget-border (≥ 3:1 on --paper in all four
   themes), --widget-bg (= surface), radius by role, no drop shadow. One place for the box; views only add their content.
   What is a widget (no extra class needed in the markup):
     .card (every <section class="card">) · .widget (opt-in) · .profile-hero · .cal-card · .lock-screen · .auth-card
     · a .stat-grid that is not inside a card (profile, finance, accounting, portal)
   Tiles (repeated widgets in a grid): .student-card, .price-card — radius --widget-radius-tile.
   Tonal widgets keep their fill and get the same border: .card.panel (inbox tray: warn, onboarding), .plan-banner,
   .trial-banner, .dash-hero-sec (student hue), the accounting limit card, .profile-hero / .sp-hero (student hue).
   A 2 px rule on the inside top edge marks a tone (inset shadow, so it follows the radius): figures = ink, inbox = warn.
   Inner groups (ledger, grouped rows, chart foot, prep note) use the quieter --rule-2 outline; inside sheets they use
   the widget border. Hover (desktop): border shifts to --widget-border-hover; interactive tiles also lift 2 px. */
@layer components {
  :where(.card, .widget, .profile-hero, .cal-card, .lock-screen, .auth-card),
  .stat-grid:not(:is(.card, .lock-screen-bg, .widget) .stat-grid) {
    position: relative; min-width: 0;
    background: var(--widget-bg); border: 1px solid var(--widget-border); border-radius: var(--widget-radius);
    box-shadow: none;
    transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background-color var(--t-base);
  }
  :where(.card, .widget) { padding: var(--widget-pad) var(--widget-pad-x); margin-top: var(--widget-gap); }

  /* figures table as its own widget: ink rule inside the top edge, rows run inside the padding */
  .stat-grid:not(:is(.card, .lock-screen-bg, .widget) .stat-grid) {
    margin: var(--widget-gap) 0 0; padding: 2px var(--widget-pad-x); border-top: 1px solid var(--widget-border);
    box-shadow: inset 0 2px 0 var(--ink);
  }
  .card:has(> .stat-grid:first-child) { padding-top: 2px; padding-bottom: 2px; box-shadow: inset 0 2px 0 var(--ink); }
  .card > .stat-grid:first-child { border-top: 0; margin: 0; }

  /* tonal widgets */
  .card.panel, .plan-banner, .trial-banner, .profile-hero, .sp-hero, .lock-screen { border-radius: var(--widget-radius-tone); }
  .card.panel { background: var(--paper-2); }
  .card.panel.dash-inbox { background: var(--warn-soft); box-shadow: inset 0 2px 0 var(--warn); }
  .plan-banner, .trial-banner { background: var(--paper-2); }
  .dash-hero-sec:has(> .dash-hero), .profile-hero, .sp-hero { background: var(--hue-soft); }
  .dash-hero-sec:has(> .dash-hero.is-live) { border-color: var(--hue-line); box-shadow: inset 0 0 0 1px var(--hue-line); }
  .card:has(> .limit-card) { background: var(--paper-2); border-radius: var(--widget-radius-tone); }
  .card > .limit-card, .dash-hero-sec > .dash-hero { background: none; padding: 0; border-radius: 0; box-shadow: none; }
  .lock-screen { background: var(--paper-2); }

  /* tiles */
  .student-card, .price-card {
    background: var(--widget-bg); border: 1px solid var(--widget-border); border-radius: var(--widget-radius-tile);
    transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background-color var(--t-base);
  }
  .price-card { background: var(--paper-2); }
  .price-card.is-featured { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  /* a card that only groups tiles is not a box itself */
  .card.billing-plans { background: none; border: 0; padding: 0; }

  /* inner groups: quieter outline inside a widget, widget border inside a sheet */
  :where(.rows.group, .ledger, .chart-foot, .dash-prep, .settle-list, .pt-code-box, .paywall-perks, .msg-preview) { box-shadow: inset 0 0 0 1px var(--rule-2); }
  .dash-prep { box-shadow: inset 3px 0 0 var(--hue), inset 0 0 0 1px var(--rule-2); }
  .sheet :where(.rows.group, .ledger, .settle-list, .pt-code-box, .paywall-perks, .msg-preview, .stat-grid) { box-shadow: inset 0 0 0 1px var(--widget-border); }

  @media (hover: hover) and (pointer: fine) {
    :where(.card, .widget, .profile-hero, .auth-card):hover,
    .stat-grid:not(:is(.card, .lock-screen-bg, .widget) .stat-grid):hover { border-color: var(--widget-border-hover); }
    .card.billing-plans:hover { border-color: transparent; }
    .student-card:hover, .price-card:hover { border-color: var(--widget-border-hover); transform: translateY(-2px); }
    .price-card.is-featured:hover { border-color: var(--accent); }
  }
}