/* Vormamim house style — tokens and core components lifted from
   LoFiPySQL/networking/index.html, plus new components for the
   subscription app (forms, tables, badges, reveal-once cards). */

:root{
  --bg:#0A0E13; --panel:#121821; --panel-alt:#1A222C; --border:#26323D;
  --text:#E7EEF4; --text-dim:#8496A6; --text-faint:#54636F;
  --net:#4FD1C5; --net-dim:#1E4A47; --host:#F2A65A; --host-dim:#4A331B;
  --danger:#E4626F; --danger-dim:#4A2027; --blue:#5B9BF2; --blue-dim:#1E3350;
  --violet:#B98CF2; --violet-dim:#332048; --green:#8FD17A; --green-dim:#294222;
  --mono:'IBM Plex Mono', ui-monospace, monospace; --display:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(79,209,197,0.08), transparent),
    radial-gradient(ellipse 900px 500px at 90% 10%, rgba(242,166,90,0.08), transparent),
    var(--bg);
  color:var(--text);font-family:var(--mono);padding:32px 20px 80px;min-height:100vh;
}
a{color:var(--net);}
.wrap{max-width:1100px;margin:0 auto;}
.wrap.narrow{max-width:480px;}

header{margin-bottom:28px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--net);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--net);box-shadow:0 0 8px var(--net);}
h1{font-family:var(--display);font-size:clamp(26px,4vw,36px);font-weight:700;margin:0 0 8px;letter-spacing:-0.01em;}
h2{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 14px;}
.sub{color:var(--text-dim);font-size:14px;line-height:1.6;max-width:680px;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:24px;}
.panel-label{font-family:var(--display);font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 16px;}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.tile{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px 18px;position:relative;overflow:hidden;transition:transform .12s, border-color .12s;}
.tile:hover{transform:translateY(-2px);border-color:var(--accent, var(--net));}

/* Fixed-size squares, not a stretchy grid — every stat tile is identical
   regardless of label length or viewport width. Slot never changes size
   (same technique as .course-pick-slot); the tile inside breaks out via
   position:absolute to grow on hover, floating over whatever's below
   instead of pushing it down.

   Scoped as `.stat-tile-slot .stat-tile` (not bare `.stat-tile`) —
   the student dashboard has its own older, unrelated `.stat-tile` rule
   further down (plain grid, no slot wrapper) that a bare selector here
   would silently merge with, making every student stat tile
   position:absolute with no positioned ancestor and blowing its layout
   apart. Only the teacher dashboard's stat tiles are ever wrapped in
   .stat-tile-slot, so scoping this way reaches exactly those and only
   those. */
.stat-tile-grid{display:flex;gap:14px;flex-wrap:wrap;}
.stat-tile-slot{position:relative;width:150px;height:150px;flex:0 0 auto;}
.stat-tile-slot .stat-tile{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:default;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
.stat-tile-slot .stat-tile:hover{height:auto;min-height:100%;z-index:20;transform:translateY(-2px);border-color:var(--accent, var(--net));box-shadow:0 0 0 1px var(--accent, var(--net)), 0 18px 40px -20px var(--accent, var(--net));}
.stat-tile-slot .stat-tile .stat-detail{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease, opacity .3s ease;font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.stat-tile-slot .stat-tile:hover .stat-detail{max-height:200px;opacity:1;margin-top:10px;}

.btn{background:var(--net-dim);border:1px solid var(--net);color:var(--net);font-family:var(--display);font-weight:700;font-size:12.5px;padding:9px 16px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--net);color:#0A0E13;}
.btn.secondary{background:var(--panel-alt);border-color:var(--border);color:var(--text-dim);}
.btn.secondary:hover{border-color:var(--text-dim);color:var(--text);}
.btn.danger{background:var(--danger-dim);border-color:var(--danger);color:var(--danger);}
.btn.danger:hover{background:var(--danger);color:#0A0E13;}
.btn.outline-host{background:transparent;border-color:var(--host);color:var(--host);}
.btn.outline-host:hover{background:var(--host);color:#0A0E13;}

.btn:disabled{opacity:.5;cursor:not-allowed;}

/* Animated toggle switch — checkbox visually styled as a sliding pill. */
.toggle-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text);}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0;}
.toggle-switch .track{
  position:relative;flex-shrink:0;width:44px;height:24px;border-radius:999px;
  background:var(--border);transition:background-color .25s ease;
}
.toggle-switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.toggle-switch input:checked + .track{background:var(--green);}
.toggle-switch input:checked + .track::after{transform:translateX(20px);}
.toggle-switch input:focus-visible + .track{outline:2px solid var(--net);outline-offset:2px;}

/* Forms */
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--display);font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;}
/* Unscoped (not just inside .field) — several forms in the app lay out
   dense inline rows (table-row edit forms etc.) without a .field wrapper,
   and those inputs still need to look like the rest of the site, not
   fall back to raw browser styling. */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
select,
textarea{
  background:var(--panel-alt);border:1px solid var(--border);color:var(--text);
  font-family:var(--mono);font-size:14px;padding:11px 14px;border-radius:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
  color-scheme:dark;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field input[type=date],
.field input[type=time],
.field input[type=datetime-local],
.field select,
.field textarea{width:100%;}
/* The native calendar/clock glyph defaults to solid black, invisible
   against the dark theme's panel background — invert it to match. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(1);opacity:.7;cursor:pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;}
input:hover,select:hover,textarea:hover{border-color:var(--text-faint);}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--net);box-shadow:0 0 0 3px color-mix(in srgb, var(--net) 20%, transparent);
}
/* Browsers force a stark white/yellow background on autofilled fields,
   overriding all of the above — this repaints it back to the theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--panel-alt) inset;
  box-shadow:0 0 0 1000px var(--panel-alt) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}
.field .hint{font-size:11.5px;color:var(--text-faint);margin-top:6px;}
.form-actions{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.alert{padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.6;margin-bottom:18px;border:1px solid var(--border);}
.alert.error{background:var(--danger-dim);border-color:var(--danger);color:var(--danger);}
.alert.success{background:var(--green-dim);border-color:var(--green);color:var(--green);}
.alert.info{background:var(--blue-dim);border-color:var(--blue);color:var(--blue);}

/* Modal dialogs */
dialog.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;color:var(--text);max-width:420px;width:calc(100% - 40px);font-family:var(--mono);}
dialog.modal::backdrop{background:rgba(0,0,0,.6);}
dialog.modal h3{font-family:var(--display);margin:0 0 12px;font-size:16px;}
dialog.modal p{font-size:13px;line-height:1.6;color:var(--text-dim);margin:0 0 8px;}

/* Course picker — small clickable tiles for attaching a course to a class */
.course-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.course-pick-tile{
  background:var(--panel-alt);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:var(--mono);font-size:12.5px;text-align:left;padding:10px 12px;cursor:pointer;
  transition:border-color .12s, transform .12s;
  /* Safari gives <button> a content-based min-width in grid layouts
     instead of respecting minmax(140px,1fr) like other browsers do,
     so a long course title stops the tile shrinking — collapsing
     auto-fill to a single column and stacking every tile full-width. */
  min-width:0;overflow-wrap:break-word;
}
.course-pick-tile:hover,.course-pick-tile:focus-visible{border-color:var(--net);transform:translateY(-2px);}

/* Tiles with a rollover preview (description + what-you'll-learn) — one
   seamless card throughout, not a tile with a separate panel joined
   underneath. .course-pick-slot is the actual grid item and never
   changes size, so neighbors never reflow; the tile inside breaks out
   to real, bigger dimensions (not a transform:scale illusion —
   font-size genuinely increases) via plain :hover/:focus-visible, no JS
   needed. The back-out easing overshoots slightly both ways, giving a
   spring/bounce feel without a separate bounce animation. */
.course-pick-slot{position:relative;min-height:96px;}
.course-pick-tile.has-preview{
  position:absolute;top:0;left:0;z-index:1;width:100%;min-height:96px;
  transition:width .3s cubic-bezier(.34,1.56,.64,1), padding .3s cubic-bezier(.34,1.56,.64,1),
    font-size .3s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, border-color .25s ease;
}
.course-pick-tile .cpt-title{position:relative;z-index:1;display:block;font-family:var(--display);font-weight:700;font-size:1.15em;}
/* CTA sits right under the title — the whole card is one clickable
   button, but this keeps "click to add" visually anchored to the
   heading rather than buried under the description. */
.course-pick-tile .cpt-cta{
  display:block;font-family:var(--display);font-weight:700;font-size:.8em;color:var(--net);
  max-height:0;opacity:0;margin-top:0;overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.course-pick-tile .cpt-overlay{
  max-height:0;opacity:0;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;text-align:left;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.cpt-overlay .cpt-desc{font-size:.95em;line-height:1.5;color:var(--text);margin:0;}
.cpt-overlay .cpt-learn-list{margin:0;padding-left:16px;font-size:.9em;line-height:1.6;color:var(--text-dim);}
.cpt-overlay .cpt-learn-list li{margin-bottom:2px;}

/* Rollover state: real size increase (width + padding + font-size all
   grow), highlight background, reveal CTA + description/learn — all
   inside the same rounded box, no seam. */
.course-pick-tile.has-preview:hover,
.course-pick-tile.has-preview:focus-visible{
  z-index:30;
  width:260px;padding:16px 18px;font-size:16px;
  background-color:var(--net-dim);border-color:var(--net);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.6);
}
.course-pick-tile.has-preview:hover .cpt-cta,
.course-pick-tile.has-preview:focus-visible .cpt-cta{max-height:20px;opacity:1;margin-top:6px;}
.course-pick-tile.has-preview:hover .cpt-overlay,
.course-pick-tile.has-preview:focus-visible .cpt-overlay{max-height:300px;opacity:1;margin-top:8px;}

/* Status badges */
.badge{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:3px 9px;border-radius:99px;border:1px solid;}
.badge.active{color:var(--green);border-color:var(--green);background:var(--green-dim);}
.badge.pending{color:var(--host);border-color:var(--host);background:var(--host-dim);}
.badge.suspended,.badge.expired{color:var(--danger);border-color:var(--danger);background:var(--danger-dim);}
.badge.deleted,.badge.archived,.badge.cancelled{color:var(--text-faint);border-color:var(--border);background:var(--panel-alt);}

/* Per-student seat pricing (buy-classes.php cart) — three tiers, at-a-glance */
.seat-pricing{margin-top:16px;}
.seat-pricing-label{font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 10px;}
.seat-pricing-label #seatSavingNote{color:var(--green);}
.seat-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.seat-box{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.seat-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--net));opacity:.85;}
.seat-box:hover{transform:translateY(-3px);border-color:var(--accent,var(--net));box-shadow:0 8px 24px rgba(0,0,0,.35);}
.seat-box:nth-child(1){--accent:var(--net);}
.seat-box:nth-child(2){--accent:var(--blue);}
.seat-box:nth-child(3){--accent:var(--violet);}
.seat-box-count{font-family:var(--mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;}
.seat-box-price{font-family:var(--display);font-size:24px;font-weight:700;color:var(--text);}
.seat-box-price .per{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text-dim);margin-left:3px;}
@keyframes seatBoxPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent,var(--net)) 55%, transparent);}
  70%{box-shadow:0 0 0 10px color-mix(in srgb, var(--accent,var(--net)) 0%, transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent,var(--net)) 0%, transparent);}
}
.seat-box.updated{animation:seatBoxPulse .6s ease-out;border-color:var(--accent,var(--net));}

/* Data table */
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data th{text-align:left;font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);border-bottom:1px solid var(--border);padding:10px 12px;}
table.data td{padding:10px 12px;border-bottom:1px solid var(--border);}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover td{background:var(--panel-alt);}
table.data tr:target td{background:var(--net-dim);}

/* Reveal-once credential card */
.reveal-card{background:var(--panel-alt);border:1px dashed var(--host);border-radius:10px;padding:18px 20px;margin:16px 0;}
.reveal-card .label{font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--host);margin-bottom:8px;}
.reveal-card .credential{font-family:var(--mono);font-size:16px;color:var(--text);letter-spacing:0.02em;user-select:all;}
.reveal-card .warn{font-size:11.5px;color:var(--text-faint);margin-top:10px;}

/* Class tile — student dashboard, styled after the 2026Vormamim landing
   page cards (spine + thumb + tag/title/blurb + enter-arrow). */
.class-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.class-tile{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.class-tile:hover,.class-tile:focus-visible{
  transform:translateY(-3px);border-color:var(--accent, var(--net));
  box-shadow:0 0 0 1px var(--accent, var(--net)), 0 18px 40px -20px var(--accent, var(--net));
}
.class-tile .spine{height:4px;background:var(--accent, var(--net));}
.class-tile .thumb{
  height:110px;position:relative;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 220px 140px at 30% 0%, color-mix(in srgb, var(--accent, var(--net)) 30%, transparent), transparent),
    var(--panel-alt);
}
.class-tile .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, var(--panel) 100%);}
.class-tile .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.02);transition:transform .5s ease;}
.class-tile:hover .thumb img,.class-tile:focus-visible .thumb img{transform:scale(1.08);}
.class-tile .thumb-letter{
  font-family:var(--display);font-weight:700;font-size:38px;color:var(--accent, var(--net));
  opacity:.85;position:relative;z-index:1;
}
.class-tile .body{padding:14px 16px 16px;}
.class-tile .tag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent, var(--net));}
.class-tile h3{font-family:var(--display);font-size:16px;font-weight:700;margin:5px 0 6px;letter-spacing:-0.005em;}
.class-tile p{margin:0;color:var(--text-dim);font-size:12.5px;line-height:1.6;}
.class-tile .enter{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--text);}
.class-tile .enter .arrow{transition:transform .2s ease;}
.class-tile:hover .enter .arrow,.class-tile:focus-visible .enter .arrow{transform:translateX(3px);}

.class-tile.pending{cursor:default;}
.class-tile.pending:hover,.class-tile.pending:focus-visible{transform:none;border-color:var(--border);box-shadow:none;}
.class-tile.pending .thumb-letter{color:var(--text-faint);}
.class-tile.pending .tag{color:var(--text-faint);}

/* Stat row — student dashboard "fun" counters, same tile language as
   class-tile but compact and non-interactive. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px;}
.stat-tile{
  background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--accent, var(--net));
  border-radius:10px;padding:16px 18px;text-align:center;
}
.stat-value{font-family:var(--display);font-weight:700;font-size:22px;color:var(--accent, var(--net));line-height:1.2;}
.stat-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-top:4px;}
.class-tile.pending .enter{color:var(--text-faint);}

.site-footer{margin-top:40px;padding:20px 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--text-faint);font-size:11px;}
.site-footer-logo{height:22px;width:auto;opacity:.8;}