/* ============================================================
   learnfromCher portal — element-square theme.
   Loads AFTER css/styles.css and restyles it: light/dark tokens,
   header, cards, buttons, file lists, notices.
   ============================================================ */

:root {
  --lp-left-bg:  #EAF1F2;
  --lp-right-bg: #F4F7F8;
  --lp-card:     #ffffff;
  --lp-ink:      #1A2E35;
  --lp-muted:    #718096;
  --lp-accent:   #1A7A8A;
  --lp-accent-dk:#0F5A67;
  --lp-border:   #E2E8F0;
  --lp-input-bg: #F7FAFC;
  --lp-grid:     rgba(26,46,53,.05);
  --lp-square:   #1A2E35;
  --lp-accent-sh:rgba(26,122,138,.24);
  --lp-coral:    #E8604C;
}
[data-theme="dark"] {
  --lp-left-bg:  #16262D;
  --lp-right-bg: #0F1C22;
  --lp-card:     #1A2C34;
  --lp-ink:      #EAF1F2;
  --lp-muted:    #8CA3AD;
  --lp-accent:   #35B3C6;
  --lp-accent-dk:#57C6D6;
  --lp-border:   #2B4048;
  --lp-input-bg: #14232A;
  --lp-grid:     rgba(255,255,255,.04);
  --lp-square:   #35B3C6;
  --lp-accent-sh:rgba(53,179,198,.28);
  --lp-coral:    #F07A68;
  /* retint the shared styles.css tokens */
  --white:  #0F1C22;
  --ink:    #EAF1F2;
  --dark:   #EAF1F2;
  --muted:  #8CA3AD;
  --line:   #2B4048;
  --teal:   #35B3C6;
  --teal-dk:#57C6D6;
  --teal-lt:#12333B;
}

body {
  background-color: var(--lp-right-bg);
  background-image:
    linear-gradient(var(--lp-grid) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--lp-grid) 1.5px, transparent 1.5px);
  background-size: 74px 74px;
  color: var(--lp-ink);
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3 { color: var(--lp-ink); }
h1 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 2.3rem; letter-spacing: -.5px; }
h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.55rem; letter-spacing: -.3px; }
a { color: var(--lp-accent-dk); }
.muted, .lead { color: var(--lp-muted); }
code { color: var(--lp-accent-dk); }

/* ---------- Header ---------- */
.pt-header { background: var(--lp-card); border-bottom: 1px solid var(--lp-border); transition: background-color .3s ease; }
.pt-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.pt-logo { display: inline-flex; align-items: center; text-decoration: none; }
.pt-logo img { height: 32px; width: auto; display: block; }
.pt-logo .logo-dark { display: none; }
[data-theme="dark"] .pt-logo .logo-light { display: none; }
[data-theme="dark"] .pt-logo .logo-dark { display: block; }
.pt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-actions .nav-link { color: var(--lp-muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 8px; }
.pt-actions .nav-link:hover { color: var(--lp-ink); background: color-mix(in srgb, var(--lp-muted) 10%, transparent); }

/* ---------- Theme toggle ---------- */
.lp-theme {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lp-card); color: var(--lp-ink);
  border: 1.5px solid var(--lp-border); border-radius: 999px;
  padding: 7px 13px 7px 11px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
}
.lp-theme svg { width: 16px; height: 16px; }
.lp-theme .moon { display: none; }
[data-theme="dark"] .lp-theme .sun  { display: none; }
[data-theme="dark"] .lp-theme .moon { display: block; }
.lp-theme .label-dark { display: none; }
[data-theme="dark"] .lp-theme .label-light { display: none; }
[data-theme="dark"] .lp-theme .label-dark { display: inline; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; }
.btn-primary { background: var(--lp-accent); color: #fff; box-shadow: 0 6px 16px var(--lp-accent-sh); }
.btn-primary:hover { background: var(--lp-accent-dk); }
[data-theme="dark"] .btn-primary { color: #0F1C22; }
[data-theme="dark"] .btn-primary:hover { background: var(--lp-accent-dk); color: #0F1C22; }
.btn-teal { background: transparent; color: var(--lp-accent-dk); border: 1.5px solid var(--lp-accent); }
.btn-teal:hover { background: color-mix(in srgb, var(--lp-accent) 12%, transparent); color: var(--lp-accent-dk); }
.btn-ghost { color: var(--lp-muted); border: 1.5px solid var(--lp-border); }
.btn-ghost:hover { background: color-mix(in srgb, var(--lp-muted) 10%, transparent); color: var(--lp-ink); }

/* ---------- Fields ---------- */
.field label { color: var(--lp-ink); font-size: .85rem; font-weight: 700; }
.field input, textarea {
  background: var(--lp-input-bg) !important;
  color: var(--lp-ink) !important;
  border: 1.5px solid var(--lp-border) !important;
  border-radius: 10px !important;
}
.field input:focus, textarea:focus { outline: none !important; border-color: var(--lp-accent) !important; background: var(--lp-card) !important; }
.field input::placeholder, textarea::placeholder { color: var(--lp-muted); opacity: .7; }

/* ---------- Cards ---------- */
.card { background: var(--lp-card); border: 1.5px solid var(--lp-border); border-radius: 14px; box-shadow: none; }
.card h3 { color: var(--lp-ink); font-size: 1.05rem; }
.card .pill { background: color-mix(in srgb, var(--lp-accent) 10%, transparent); color: var(--lp-accent-dk); }

/* ---------- Up Next: the element square ---------- */
.upnext {
  background: var(--lp-card); color: var(--lp-ink);
  border: 3px solid var(--lp-square); border-radius: 14px;
  box-shadow: 10px 12px 0 var(--lp-accent-sh);
}
.upnext h2 { color: var(--lp-ink); }
.upnext .pill {
  background: transparent; border: 1.5px solid var(--lp-accent);
  color: var(--lp-accent-dk); font-family: var(--font-mono);
}
.upnext-when { color: var(--lp-muted) !important; font-family: var(--font-mono); }

/* ---------- Sections ---------- */
.portal-section { border-top: 1px solid var(--lp-border); }

/* ---------- Materials ---------- */
.unit-group h3 {
  background: var(--lp-card); color: var(--lp-ink);
  border: 2px solid var(--lp-square); border-radius: 9px;
  font-family: var(--font-mono); padding: 4px 12px;
  box-shadow: 3px 3px 0 var(--lp-accent-sh);
}
.file-list li { background: var(--lp-card); border: 1.5px solid var(--lp-border); border-radius: 12px; }
.file-title { color: var(--lp-ink); }
.ftype { border-radius: 6px; }
.ftype.pdf  { background: var(--lp-coral); }
.ftype.html { background: var(--lp-accent); }
[data-theme="dark"] .ftype { color: #0F1C22; }

/* ---------- Notices ---------- */
.notice.info  { background: color-mix(in srgb, var(--lp-accent) 10%, var(--lp-card)); color: var(--lp-accent-dk); border: 1px solid color-mix(in srgb, var(--lp-accent) 35%, var(--lp-card)); }
.notice.error { background: color-mix(in srgb, #C53030 12%, var(--lp-card)); color: #C53030; border: 1px solid color-mix(in srgb, #C53030 40%, var(--lp-card)); }
[data-theme="dark"] .notice.error { color: #F08A8A; }
.notice.ok    { background: color-mix(in srgb, #276749 12%, var(--lp-card)); color: #276749; border: 1px solid color-mix(in srgb, #276749 40%, var(--lp-card)); }
[data-theme="dark"] .notice.ok { color: #7CC8A0; }

/* ---------- Cal embed ---------- */
.cal-inline { background: var(--lp-card); border: 1.5px solid var(--lp-border); border-radius: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: transparent; color: var(--lp-muted); border-top: 1px solid var(--lp-border); margin-top: 48px; }
.site-footer a { color: var(--lp-accent-dk); }

/* ============================================================
   v2 — hero band, numbered section heads, admin polish, mobile
   ============================================================ */

/* ---------- Hero band ---------- */
.hub-hero { padding: 52px 0 6px; }
.hub-hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hub-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-accent-dk); margin: 0 0 12px;
}
.hub-title { margin-bottom: 10px; font-size: 2.6rem; }
.hub-copy .lead { margin-bottom: 0; }
.hub-body { padding-top: 28px; }

/* floating FOCUS tiles (from the login) */
.hub-tiles { display: flex; gap: 11px; align-items: center; flex-shrink: 0; padding-right: 8px; }
.hub-tile {
  width: 56px; height: 56px; border-radius: 15px;
  background: var(--lp-card);
  border: 2px solid color-mix(in srgb, var(--lp-ink) 14%, transparent);
  box-shadow: 0 8px 18px rgba(26,46,53,.08);
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 9px; color: var(--lp-ink);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.hub-tile .num { font-family: var(--font-mono); font-size: 9px; color: var(--lp-muted); }
.hub-tile .sym { font-family: 'DM Serif Display', serif; font-size: 22px; line-height: 1; }
.hub-tile.is-carbon { border-color: var(--lp-accent); align-items: center; justify-content: center; padding: 6px; }
.hub-tile.is-carbon .num { align-self: flex-start; }
.hub-tile.is-carbon img { height: 26px; width: auto; margin-top: -2px; }
.hub-tile.t1 { animation: hubFloat 7s   ease-in-out infinite; }
.hub-tile.t2 { animation: hubFloat 9s   ease-in-out infinite .6s; }
.hub-tile.t3 { animation: hubFloat 8s   ease-in-out infinite 1.1s; }
.hub-tile.t4 { animation: hubFloat 8.5s ease-in-out infinite 1.35s; }
.hub-tile.t5 { animation: hubFloat 7.5s ease-in-out infinite 1.6s; }
@keyframes hubFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hub-tile { animation: none !important; } }

/* ---------- Numbered section heads ---------- */
.ps-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ps-head h2 { margin: 0; }
.ps-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  border: 2px solid var(--lp-square); background: var(--lp-card);
  color: var(--lp-accent-dk);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 0 var(--lp-accent-sh);
  transition: background .3s ease, border-color .3s ease;
}

/* ---------- Up next: element-square corner ---------- */
.upnext { position: relative; }
.upnext-corner {
  position: absolute; top: 16px; right: 20px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--font-mono);
}
.upnext-corner span:first-child { font-size: 17px; color: var(--lp-ink); }
.upnext-corner span:last-child { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }

/* ---------- Admin: secret bar ---------- */
.admin-secret {
  display: flex; align-items: center; gap: 16px;
  max-width: 560px; padding: 18px 20px;
  background: var(--lp-card);
  border: 3px solid var(--lp-square); border-radius: 14px;
  box-shadow: 8px 9px 0 var(--lp-accent-sh);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.admin-secret .as-lock {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  border: 2px solid var(--lp-accent); color: var(--lp-accent);
  display: flex; align-items: center; justify-content: center;
}
.admin-secret .as-lock svg { width: 19px; height: 19px; }

/* ---------- Admin: codes table ---------- */
.codes-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.codes-scroll { overflow-x: auto; }
#codesTable { width: 100%; border-collapse: collapse; margin-top: 8px; }
#codesTable th {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--lp-muted);
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--lp-square);
}
#codesTable td { padding: 10px; border-bottom: 1px solid var(--lp-border); }
#codesTable td.mono { font-family: var(--font-mono); font-size: .92rem; }
.status-active  { color: #276749; font-weight: 700; }
.status-expired { color: #C53030; font-weight: 700; }
[data-theme="dark"] .status-active  { color: #7CC8A0; }
[data-theme="dark"] .status-expired { color: #F08A8A; }

/* ---------- Admin: [Hannah] to-do notes ---------- */
.todo-note { color: var(--lp-coral); margin: 6px 0 0; }

/* ---------- Footer tagline ---------- */
.footer-tag em { font-family: 'DM Serif Display', serif; font-style: italic; color: var(--lp-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .hub-hero { padding-top: 36px; }
  .hub-hero-grid { flex-direction: column-reverse; align-items: flex-start; gap: 26px; }
  .hub-tiles { padding-right: 0; }
  .hub-tile { width: 48px; height: 48px; border-radius: 13px; }
  .hub-tile .sym { font-size: 19px; }
  .hub-tile.is-carbon img { height: 22px; }
  .hub-title { font-size: 2.1rem; }
  .pt-logo img { height: 26px; }
  .upnext-corner { display: none; }
  .admin-secret { box-shadow: 5px 6px 0 var(--lp-accent-sh); }
}