/* ============================================================
   Student Portal — gate, dashboard, timeline, hours, calendar
   Scoped under .kiln. Session VALUES live in portal-session.js.
   ============================================================ */

/* Initial-hidden state driven by a CLASS, not a bare [hidden] attribute:
   a boolean attribute authored in a Design Component template compiles to
   hidden="" which React treats as falsy and drops, so the element renders
   visible. A class survives. JS toggles both. */
.kiln .sp-hide{display:none !important;}

/* ---------------- gate ---------------- */
.kiln .spgate{padding-block:clamp(150px,17vw,210px) clamp(70px,9vw,120px);}
.kiln .spgate__grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,80px);align-items:center;}
.kiln .spgate__intro h1{margin:14px 0 0;}
.kiln .spgate__intro .phero__lead{margin-top:clamp(18px,2.2vw,28px);max-width:46ch;}
.kiln .spgate__list{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--hair);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.kiln .spgate__list li{background:var(--cream);padding:14px 16px;
  display:flex;align-items:baseline;gap:10px;font-size:.94rem;line-height:1.4;}
.kiln .spgate__list span{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.12em;color:color-mix(in srgb,var(--ember) 70%,var(--ink));flex:0 0 auto;}

.kiln .spgate__card{position:relative;background:var(--glaze);color:var(--ink);
  border-radius:28px;padding:clamp(30px,3.6vw,48px);
  box-shadow:0 26px 70px rgba(20,18,14,.18);}
.kiln .spgate__card .eyebrow{color:var(--navy);}
.kiln .spgate__card h2{font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(30px,3vw,42px);line-height:1.02;margin:12px 0 10px;}
.kiln .spgate__sub{font-size:.96rem;line-height:1.55;color:var(--navy);margin:0 0 clamp(20px,2.4vw,28px);}

.kiln .spgate__lock{width:46px;height:52px;position:relative;margin-bottom:18px;}
.kiln .spgate__shackle{position:absolute;top:0;left:9px;width:28px;height:26px;
  border:5px solid var(--ink);border-bottom:0;border-radius:16px 16px 0 0;}
.kiln .spgate__body{position:absolute;bottom:0;left:0;width:46px;height:32px;
  background:var(--ember);border:2px solid var(--ink);border-radius:8px;}
.kiln .spgate__body::after{content:"";position:absolute;top:11px;left:50%;
  width:5px;height:10px;margin-left:-2.5px;background:var(--ink);border-radius:3px;}

.kiln .spgate__form label{display:block;font-family:var(--ui);font-weight:700;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 80%,transparent);margin-bottom:8px;}
.kiln .spgate__row{display:flex;gap:8px;}
.kiln .spgate__form input[type=password],
.kiln .spgate__form input[type=text]{flex:1 1 auto;font:inherit;font-size:1rem;
  padding:14px 16px;border-radius:12px;background:var(--cream);
  border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);
  letter-spacing:.04em;min-width:0;}
.kiln .spgate__form input:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 16%,transparent);}
.kiln .spgate__peek{font-family:var(--ui);font-weight:700;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  padding:0 16px;min-width:74px;border-radius:12px;background:transparent;
  border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);color:var(--ink);}
.kiln .spgate__peek:hover{background:var(--cream);}
.kiln .spgate__submit{width:100%;justify-content:center;margin-top:16px;}
.kiln .spgate__err{margin:12px 0 0;font-size:.86rem;line-height:1.5;
  padding:11px 13px;border-radius:10px;background:var(--cream);
  border:1.5px solid var(--ember);color:var(--ink);}
.kiln .spgate__remember{display:flex;align-items:center;gap:9px;margin-top:16px;
  text-transform:none;letter-spacing:0;font-weight:500;font-size:.88rem;
  color:color-mix(in srgb,var(--ink) 78%,transparent);cursor:pointer;}
.kiln .spgate__remember input{width:17px;height:17px;accent-color:var(--ember);flex:0 0 auto;}
.kiln .spgate__help{margin:clamp(20px,2.4vw,26px) 0 0;font-size:.84rem;line-height:1.55;
  color:color-mix(in srgb,var(--ink) 72%,transparent);}
.kiln .spgate__help a{text-decoration:underline;color:var(--navy);}

@keyframes spShake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
.kiln .spgate__form.is-shake{animation:spShake .42s ease both;}

.kiln .spgate__lockout{margin-top:clamp(30px,4vw,48px);cursor:pointer;
  font-family:var(--ui);font-weight:700;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 18px;border-radius:999px;
  background:transparent;border:1.5px solid color-mix(in srgb,var(--ink) 24%,transparent);
  color:color-mix(in srgb,var(--ink) 74%,transparent);}
.kiln .spgate__lockout:hover{border-color:var(--ink);color:var(--ink);}

/* ---------------- dashboard ---------------- */
.kiln .sp-dash{background:var(--navy);color:var(--cream);
  padding-block:clamp(140px,16vw,190px) clamp(56px,7vw,90px);}
.kiln .sp-dash__top{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,64px);align-items:end;}
.kiln .sp-dash__h1{font-family:var(--serif);font-weight:500;
  font-size:clamp(42px,6vw,86px);line-height:1;letter-spacing:-.02em;margin:14px 0 0;}
.kiln .sp-dash__h1 em{font-style:italic;color:var(--glaze);}
.kiln .sp-dash__lead{font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:48ch;
  color:color-mix(in srgb,var(--cream) 88%,transparent);margin:clamp(18px,2.2vw,26px) 0 0;}
.kiln .sp-dash__lead b{color:var(--cream);font-weight:700;}

/* next-up card */
.kiln .sp-next{display:flex;flex-direction:column;gap:5px;
  background:var(--ember);color:var(--ink);border-radius:20px;
  padding:clamp(20px,2.4vw,28px);box-shadow:0 18px 44px rgba(9,20,33,.32);}
.kiln .sp-next__k{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.kiln .sp-next__label{font-family:var(--display);font-weight:900;
  font-size:clamp(20px,1.9vw,27px);line-height:1.08;letter-spacing:-.03em;margin-top:4px;}
.kiln .sp-next__date{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,19px);}
.kiln .sp-next__in{align-self:flex-start;margin-top:8px;
  font-family:var(--ui);font-weight:800;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:var(--ink);color:var(--cream);}
.kiln .sp-next__in.is-soon{background:#7A1B00;}

/* dashboard jump */
.kiln .sp-dash__jump{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1.5px;background:color-mix(in srgb,var(--cream) 26%,transparent);
  margin-top:clamp(34px,4.4vw,56px);
  border-top:2px solid var(--cream);border-bottom:2px solid var(--cream);}
.kiln .sp-dash__jump a{background:var(--navy);padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;}
.kiln .sp-dash__jump a:hover{background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--cream);}
.kiln .sp-dash__jump b{font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.3vw,19px);letter-spacing:-.02em;color:var(--cream);}
.kiln .sp-dash__jump span{font-size:.86rem;
  color:color-mix(in srgb,var(--cream) 74%,transparent);}

/* notices */
.kiln .sp-notice-wrap{margin-top:clamp(24px,3vw,34px);}
.kiln .sp-notice{display:flex;gap:11px;align-items:baseline;margin:0 0 8px;
  padding:13px 15px;border-radius:12px;color:var(--cream);
  background:color-mix(in srgb,var(--cream) 14%,transparent);
  border:1.5px solid color-mix(in srgb,var(--cream) 30%,transparent);
  font-size:.93rem;line-height:1.55;}
.kiln .sp-notice span{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;flex:0 0 auto;
  padding:3px 9px;border-radius:999px;background:var(--ember);color:var(--ink);}

/* ---------------- timeline ---------------- */
.kiln .sp-timeline{background:var(--cream);padding-block:clamp(80px,11vw,150px);}
.kiln .sp-ms-rail{list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;
  position:relative;}
.kiln .sp-ms-rail::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;
  width:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);}
.kiln .sp-ms{position:relative;padding:0 0 clamp(24px,2.8vw,34px) 40px;}
.kiln .sp-ms:last-child{padding-bottom:0;}
.kiln .sp-ms__dot{position:absolute;left:0;top:5px;width:20px;height:20px;
  border-radius:50%;background:var(--cream);
  border:3px solid color-mix(in srgb,var(--ink) 34%,transparent);}
.kiln .sp-ms__date{font-family:var(--ui);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 74%,transparent);}
.kiln .sp-ms__label{font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,25px);line-height:1.12;letter-spacing:-.028em;
  margin:5px 0 0;display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.kiln .sp-ms__note{margin:8px 0 0;font-size:.94rem;line-height:1.6;max-width:62ch;
  color:color-mix(in srgb,var(--ink) 76%,transparent);text-wrap:pretty;}
.kiln .sp-ms__tag{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  color:color-mix(in srgb,var(--ink) 76%,transparent);}

/* deadline rows read louder */
.kiln .sp-ms.is-hot .sp-ms__dot{background:var(--ember);border-color:var(--ink);}
.kiln .sp-ms.is-hot .sp-ms__tag{background:var(--ember);color:var(--ink);}
.kiln .sp-ms.is-hot .sp-ms__date{color:color-mix(in srgb,var(--ember) 66%,var(--ink));}

/* the one coming next */
.kiln .sp-ms.is-next{background:color-mix(in srgb,var(--glaze) 40%,transparent);
  border-radius:16px;padding:16px 18px 18px 40px;margin-bottom:clamp(24px,2.8vw,34px);}
.kiln .sp-ms.is-next .sp-ms__dot{left:12px;top:20px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--navy) 22%,transparent);}
.kiln .sp-ms__tag--next{background:var(--navy);color:var(--cream);}

/* already happened */
.kiln .sp-ms.is-past{opacity:.5;}
.kiln .sp-ms.is-past .sp-ms__dot{background:color-mix(in srgb,var(--ink) 26%,transparent);
  border-color:transparent;}
.kiln .sp-ms.is-past .sp-ms__label{text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent);}

.kiln .sp-updated{margin:clamp(28px,3.4vw,42px) 0 0;font-size:.9rem;line-height:1.6;
  color:color-mix(in srgb,var(--ink) 70%,transparent);}
.kiln .sp-updated b{color:var(--ink);}

/* ---------------- hours ---------------- */
.kiln .sp-hours-sec{background:var(--olive);color:var(--cream);
  padding-block:clamp(80px,11vw,150px);}
.kiln .sp-hours-sec .sec-head .eyebrow{color:color-mix(in srgb,var(--cream) 80%,transparent);}
.kiln .sp-hours-sec .sec-head .intro{color:color-mix(in srgb,var(--cream) 88%,transparent);}
.kiln .sp-hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(14px,1.7vw,22px);margin-top:clamp(30px,3.6vw,48px);}
.kiln .sp-hcard{background:color-mix(in srgb,var(--ink) 16%,transparent);
  border:1.5px solid color-mix(in srgb,var(--cream) 32%,transparent);
  border-radius:18px;padding:clamp(22px,2.4vw,30px);}
.kiln .sp-hcard__k{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);}
.kiln .sp-hcard h3{font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(20px,1.8vw,26px);line-height:1.05;margin:9px 0 16px;}
.kiln .sp-hcard__n{margin:14px 0 0;font-size:.92rem;line-height:1.6;font-style:italic;
  font-family:var(--serif);color:var(--cream);}
.kiln .sp-hcard--alert{border-color:var(--ember);
  box-shadow:inset 4px 0 0 0 var(--ember);}

.kiln .sp-hours{display:grid;gap:1.5px;
  background:color-mix(in srgb,var(--cream) 26%,transparent);}
.kiln .sp-hr{display:flex;justify-content:space-between;gap:14px;
  background:#454927;padding:11px 12px;}
.kiln .sp-hr__d{font-family:var(--ui);font-weight:700;font-size:.88rem;color:var(--cream);}
.kiln .sp-hr__t{font-family:var(--display);font-weight:800;font-size:.96rem;}

.kiln .sp-hol + .sp-hol{margin-top:14px;
  padding-top:14px;border-top:1px solid color-mix(in srgb,var(--cream) 24%,transparent);}
.kiln .sp-hol__n{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(19px,1.7vw,25px);letter-spacing:-.03em;margin:9px 0 7px;}
.kiln .sp-hol p{margin:0;font-size:.94rem;line-height:1.6;color:var(--cream);}

/* ---------------- calendar ---------------- */
.kiln .sp-cal{margin-top:clamp(26px,3vw,40px);}
.kiln .sp-cal__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.kiln .sp-cal__tab{font-family:var(--ui);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  padding:11px 18px;border-radius:999px;background:transparent;color:var(--cream);
  border:1.5px solid color-mix(in srgb,var(--cream) 38%,transparent);}
.kiln .sp-cal__tab:hover{border-color:var(--cream);}
.kiln .sp-cal__tab.is-on{background:var(--cream);color:var(--navy);border-color:var(--cream);}
.kiln .sp-cal__bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-bottom:16px;}
.kiln .sp-cal__bar p{margin:0;font-size:.98rem;
  color:color-mix(in srgb,var(--cream) 88%,transparent);}
.kiln .sp-cal__frame{border-radius:18px;overflow:hidden;
  border:2px solid var(--cream);background:var(--cream);}
.kiln .sp-cal__frame iframe{display:block;width:100%;height:640px;border:0;}

.kiln .sp-cal__soon{background:color-mix(in srgb,var(--cream) 10%,transparent);
  border:1.5px dashed color-mix(in srgb,var(--cream) 40%,transparent);
  border-radius:18px;padding:clamp(26px,3.2vw,44px);}
.kiln .sp-cal__k{font-family:var(--ui);font-weight:800;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ember);}
.kiln .sp-cal__soon h3{font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(26px,2.6vw,38px);line-height:1.02;margin:10px 0 12px;}
.kiln .sp-cal__soon p{margin:0 0 12px;font-size:.99rem;line-height:1.65;max-width:56ch;
  color:color-mix(in srgb,var(--cream) 90%,transparent);}
.kiln .sp-cal__soonnote{font-style:italic;font-family:var(--serif);
  color:color-mix(in srgb,var(--cream) 78%,transparent) !important;}

/* ---------------- letter ---------------- */
.kiln .sp-letter{background:var(--cream);padding-block:clamp(80px,11vw,150px);}
.kiln .sp-letter__grid{display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,5vw,90px);align-items:start;}
.kiln .sp-letter__h2{font-family:var(--display);font-weight:900;
  font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.04em;
  color:var(--navy);margin:0;}
.kiln .sp-letter__body p{font-size:clamp(16px,1.25vw,19px);line-height:1.75;
  color:var(--navy);margin:0 0 1.1em;text-wrap:pretty;}
.kiln .sp-letter__links{display:grid;gap:1.5px;background:var(--hair);
  margin-top:clamp(22px,2.6vw,32px);}
.kiln .sp-letter__links a{display:flex;justify-content:space-between;align-items:center;
  gap:12px;background:var(--cream);padding:14px 4px 14px 0;font-weight:600;font-size:.96rem;
  color:var(--navy);}
.kiln .sp-letter__links a span{color:color-mix(in srgb,var(--ember) 66%,var(--ink));font-weight:800;}
.kiln .sp-letter__links a:hover{color:var(--ember);}

/* ---------------- feedback ---------------- */
.kiln .sp-feedback{background:var(--glaze);padding-block:clamp(80px,11vw,150px);}
.kiln .sp-fb__head{text-align:center;max-width:52ch;margin:0 auto clamp(34px,4.4vw,56px);}
.kiln .sp-fb__head h2{font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;
  color:var(--navy);margin:0 0 16px;}
.kiln .sp-fb__head p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;
  color:var(--navy);margin:0;}
.kiln .sp-fb__form{display:grid;gap:clamp(16px,1.8vw,22px);max-width:760px;margin:0 auto;}
.kiln .sp-fb__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);}
.kiln .sp-fb__form label{display:grid;gap:8px;font-family:var(--ui);font-weight:700;
  font-size:.8rem;letter-spacing:.02em;color:var(--ink);}
.kiln .sp-fb__form input,
.kiln .sp-fb__form textarea{font:inherit;font-size:1rem;padding:13px 15px;
  border-radius:10px;background:var(--cream);color:var(--ink);
  border:1.5px solid color-mix(in srgb,var(--ink) 24%,transparent);width:100%;}
.kiln .sp-fb__form textarea{resize:vertical;min-height:150px;line-height:1.6;}
.kiln .sp-fb__form input:focus,
.kiln .sp-fb__form textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 16%,transparent);}
.kiln .sp-fb__form button{justify-self:start;}
.kiln .sp-feedback .nf-success{max-width:760px;margin:0 auto;text-align:center;}
.kiln .sp-feedback .spgate__lockout{display:block;margin-left:auto;margin-right:auto;}

@media (max-width:960px){
  .kiln .spgate__grid,
  .kiln .sp-dash__top,
  .kiln .sp-letter__grid{grid-template-columns:1fr;}
  .kiln .spgate__card{order:-1;}
  .kiln .sp-dash__top{align-items:start;}
}
@media (max-width:640px){
  .kiln .spgate{padding-block:clamp(104px,26vw,124px) clamp(56px,14vw,86px) !important;}
  .kiln main > section.sp-dash{padding-block:clamp(104px,26vw,124px) clamp(50px,12vw,74px) !important;}
  .kiln .spgate__list{grid-template-columns:1fr;}
  .kiln .sp-fb__row{grid-template-columns:1fr;}
  .kiln .sp-cal__frame iframe{height:540px;}
  .kiln .sp-ms{padding-left:34px;}
  .kiln .sp-ms.is-next{padding-left:34px;}
  .kiln .sp-ms.is-next .sp-ms__dot{left:7px;}
}