/* Shared styles for the learner dashboard. */
:root{
  --paper:#F5EFE2;
  --paper-2:#EFE7D3;
  --ink:#1C2B21;
  --ink-soft:#54624F;
  --bio:#2F6B3C;
  --chem:#C05A2E;
  --line:rgba(28,43,33,.16);
  --line-strong:rgba(28,43,33,.55);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Space Grotesk",Helvetica,sans-serif;
  --mono:"JetBrains Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--chem);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--chem);outline-offset:3px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* top bar + menu */
header.top{
  border-bottom:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:20;
}
.bar{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand svg{display:block}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--ink);background:rgba(28,43,33,.06)}
.nav a.on{color:var(--paper);background:var(--ink)}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;white-space:nowrap;flex:none;
}
.chip.hot{color:var(--chem);border-color:var(--chem)}
@media(max-width:640px){.chip{display:none}.bar{gap:10px}}

/* layout */
.page{padding:44px 0 96px}
.fig{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fig::after{content:"";flex:1;height:1px;background:var(--line)}
h1{font-family:var(--serif);font-weight:560;font-variation-settings:"opsz" 100;font-size:clamp(32px,5vw,46px);line-height:1.05;letter-spacing:-.015em;margin-bottom:26px}
h2.sec{font-family:var(--serif);font-weight:560;font-size:24px;margin:38px 0 16px}
.lede{color:var(--ink-soft);font-size:16px;max-width:52ch;margin:-12px 0 26px}

/* cards */
.grid{display:grid;gap:16px}
.cols2{grid-template-columns:1fr 1fr}
.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.cols3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cols2,.cols3{grid-template-columns:1fr}}
.card{
  background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;
  padding:20px 22px;box-shadow:5px 5px 0 rgba(28,43,33,.1);
}
.card h3{font-family:var(--serif);font-weight:560;font-size:21px;line-height:1.2;margin-bottom:6px}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:10px}
.card .k.bio{color:var(--bio)}
.card .k.chem{color:var(--chem)}
.card .body{font-size:15.5px;white-space:pre-wrap;word-wrap:break-word;margin-top:8px}
.card .sum{color:var(--ink-soft);font-size:14.5px;margin-top:4px}
.card .when{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:12px}
.tile{display:block;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.tile:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(28,43,33,.14)}
.tile .n{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.tile .arr{float:right;font-family:var(--mono);color:var(--ink-soft)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:10px;border:1px solid var(--ink);cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;background:transparent;color:var(--ink);
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--chem)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--chem)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--chem)}
.btn-sm{width:auto;padding:9px 18px;font-size:13.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* inputs */
.input,.area,.select{
  width:100%;background:transparent;border:1px solid var(--line-strong);border-radius:8px;
  padding:11px 14px;font-family:var(--sans);font-size:15.5px;color:var(--ink);appearance:none;
}
.input:focus,.area:focus,.select:focus{outline:none;border-color:var(--bio);box-shadow:3px 3px 0 rgba(47,107,60,.2)}
.area{resize:vertical;min-height:90px}
.search{margin-bottom:26px}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C2B21' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* empty + locked states */
.empty{
  border:1px dashed var(--line-strong);border-radius:12px;padding:46px 20px;text-align:center;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--ink-soft);
}
.lock-panel{max-width:520px;margin:48px auto 0;text-align:center;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;
  padding:44px 30px;box-shadow:7px 7px 0 rgba(28,43,33,.12);
}
.lock-panel svg{margin-bottom:16px}
.lock-panel h2{font-family:var(--serif);font-weight:560;font-size:28px;margin-bottom:8px}
.lock-panel p{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px}

/* meets */
.meet{display:flex;gap:18px;align-items:flex-start}
.datebox{
  flex:none;width:92px;border:1px solid var(--line-strong);border-radius:10px;padding:10px 8px;
  text-align:center;font-family:var(--mono);background:var(--paper-2);
}
.datebox .d{font-family:var(--serif);font-size:22px;font-weight:560;display:block;line-height:1.1}
.datebox .m{font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block}
.meet .join{margin-top:12px}
@media(max-width:520px){.meet{flex-direction:column}.datebox{width:100%;display:flex;justify-content:center;gap:8px;align-items:baseline}}

/* videos */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}
.vcard{
  background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
  box-shadow:5px 5px 0 rgba(28,43,33,.1);cursor:pointer;padding:0;text-align:left;font-family:var(--sans);
  transition:transform .15s ease,box-shadow .15s ease;color:var(--ink);
}
.vcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(28,43,33,.15)}
.vthumb{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:var(--paper-2)}
.vthumb.empty-thumb{display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.vbody{padding:14px 16px 16px}
.vtopic{font-family:var(--serif);font-weight:560;font-size:19px;line-height:1.2}
.vsum{font-size:13.5px;color:var(--ink-soft);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vmodal{position:fixed;inset:0;background:rgba(28,43,33,.62);display:flex;align-items:center;justify-content:center;z-index:40;padding:20px}
.vmodal .inner{background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;max-width:860px;width:100%;padding:18px;box-shadow:8px 8px 0 rgba(28,43,33,.25)}
.vmodal .x{float:right;background:none;border:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;cursor:pointer;color:var(--ink-soft);padding:4px 6px}
.vmodal video{width:100%;border-radius:10px;background:#000;max-height:68vh;margin-top:10px}
.vmodal h3{font-family:var(--serif);font-weight:560;font-size:22px;margin-top:10px}
.vmodal .sum{color:var(--ink-soft);font-size:15px;margin-top:6px}

/* profile */
.rows{border-top:1px solid var(--line-strong)}
.row{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line)}
.row .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.row .v{text-align:right}

/* footer */
footer{border-top:1px solid var(--line-strong);padding:30px 0 40px;background:var(--paper)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot p{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  .btn,.tile,.vcard{transition:none}
}