@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* ═══════════════════════════════════════════════════════════
   ETW Fridge Letter — Under-the-Sea UI (v8)
   ═══════════════════════════════════════════════════════════ */

.etw-fridge-letter{
  --navy:#071c31;
  --blue:#0f3f66;
  --sky:#1b77b3;
  --accent:#00b2e3;
  --foam:#86f6e4;
  --sand:#f5fbff;
  --surface-1:rgba(255,255,255,.07);
  --surface-2:rgba(255,255,255,.11);
  --surface-glass:rgba(8,40,68,.55);
  --text-strong:#ffffff;
  --text-muted:rgba(245,251,255,.78);
  --border:rgba(134,246,228,.22);
  --border-soft:rgba(255,255,255,.16);
  --shadow:0 18px 40px rgba(0,0,0,.28);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --dur:.22s;
  --spring:#29d5ff;
  --spring2:#86f6e4;
  --spring3:#eafffb;
  --etw-brand-bg:linear-gradient(135deg,#0b3553,#144a75);

  font-family:"Figtree",sans-serif;
  color:var(--sand);
  font-size:16px;
  line-height:1.55;
  position:relative;
  min-height:100vh;
  padding:12px;
  box-sizing:border-box;
}

.etw-fridge-letter::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(0,178,227,.28), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--blue) 42%, var(--sky) 100%);
}

.etw-fridge-letter::after{
  content:"";
  position:fixed;
  inset:-30px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 78%, rgba(134,246,228,.16) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 55%, rgba(0,178,227,.14) 0%, transparent 48%),
    radial-gradient(circle at 50% 100%, rgba(7,28,49,.35) 0%, transparent 40%);
  animation:etwCausticsShift 16s ease-in-out infinite;
}

@keyframes etwCausticsShift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.85; }
  50%{ transform:translate3d(1.5%,-1%,0) scale(1.03); opacity:1; }
}

/* Sea decorations */
.etw-undersea-floats{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.etw-undersea-floats .etw-bubble{
  position:absolute;
  bottom:-40px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  animation:etwBubbleRise 14s linear infinite;
}
.etw-undersea-floats .etw-bubble:nth-child(1){ animation-duration:12s; }
.etw-undersea-floats .etw-bubble:nth-child(2){ animation-duration:15s; }
.etw-undersea-floats .etw-bubble:nth-child(3){ animation-duration:11s; }
.etw-undersea-floats .etw-bubble:nth-child(4){ animation-duration:16s; }
.etw-undersea-floats .etw-bubble:nth-child(5){ animation-duration:13s; }
.etw-undersea-floats .etw-bubble:nth-child(6){ animation-duration:17s; }
.etw-undersea-floats .etw-sea-critter{
  position:absolute;
  font-size:1.25rem;
  opacity:.2;
  line-height:1;
  animation:etwCritterDrift 10s ease-in-out infinite;
}
.etw-undersea-floats .etw-sea-critter:nth-child(odd){ animation-duration:12s; }
@keyframes etwBubbleRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.55; }
  100%{ transform:translateY(-110vh) translateX(12px); opacity:0; }
}
@keyframes etwCritterDrift{
  0%,100%{ transform:translateX(0) translateY(0); }
  50%{ transform:translateX(10px) translateY(-6px); }
}

@keyframes etwPulseEvent{
  0%,100%{ box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 0 rgba(0,178,227,0); }
  50%{ box-shadow:0 14px 30px rgba(0,0,0,.28), 0 0 0 8px rgba(0,178,227,.14); }
}
@keyframes etwSteveBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@media print{
  .etw-fridge-letter{ padding:0; background:#fff; color:#0b3553; }
  .etw-fridge-letter::before,
  .etw-fridge-letter::after,
  .etw-undersea-floats{ display:none !important; }
  .etw-sheet{ max-width:none; margin:0; border-radius:0; box-shadow:none; border:none; }
  .etw-hero{ border-radius:0; background:#fff; color:#0b3553; }
  .etw-cal-actions, .etw-toggle, #etw-weather, #etwWeekStrip, .etw-links, .etw-no-print{ display:none !important; }
  .etw-hidden{ display:block !important; }
  .etw-timeline::before{ display:none; }
  .etw-timeline li{ box-shadow:none; background:#fff; color:#0b3553; }
  a{ color:#0b3553; text-decoration:underline; }
}

/* Sheet */
.etw-sheet{
  max-width:980px;
  margin:0 auto;
  position:relative;
  z-index:1;
  padding:4px 0 20px;
}

/* ── Hero ── */
.etw-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(10,55,90,.45) 100%);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-lg);
  color:#fff;
  padding:var(--space-4);
  margin-bottom:var(--space-3);
  box-shadow:var(--shadow);
}
.etw-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,178,227,.28), transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(134,246,228,.18), transparent 45%);
  pointer-events:none;
}
.etw-hero > *{ position:relative; z-index:1; }

.etw-hero-top{
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr minmax(80px,120px);
  align-items:center;
  gap:var(--space-3);
}
.etw-logo{
  width:180px;
  max-width:100%;
  height:auto;
  max-height:64px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.25));
  justify-self:start;
}
.etw-steve{
  width:110px;
  max-width:100%;
  height:auto;
  justify-self:end;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  animation:etwSteveBob 4.5s ease-in-out infinite;
}
.etw-hero-center{ text-align:center; }
.etw-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(0,178,227,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.etw-title{
  font-weight:800;
  font-size:clamp(1.55rem, 4vw, 2.15rem);
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 10px;
  text-shadow:0 8px 24px rgba(0,0,0,.25);
}
.etw-hero-lines{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.etw-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  font-size:.86rem;
  font-weight:500;
  color:var(--text-strong);
}
.etw-sub{ margin:0; opacity:.95; font-weight:400; font-size:1.02rem; }

/* ── Status pills ── */
.etw-pills{
  margin-top:var(--space-3);
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.etw-pill{
  border-radius:var(--radius-md);
  padding:12px 14px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  font-weight:500;
  font-size:.95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  touch-action:manipulation;
}
.etw-pill-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  flex:1;
}
.etw-pill-label{
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  font-weight:700;
}
.etw-pill-value{
  font-weight:800;
  font-size:1.02rem;
  white-space:normal;
  overflow:visible;
  line-height:1.3;
  color:var(--text-strong);
}
.etw-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,178,227,.35), rgba(134,246,228,.25));
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  font-weight:800;
  font-size:.85rem;
  flex-shrink:0;
}
.etw-countdown{ margin-left:0; font-weight:900; }

/* ── Week strip ── */
.etw-week-strip{
  margin-top:var(--space-3);
  display:grid;
  gap:8px;
  grid-template-columns:repeat(7,minmax(0,1fr));
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,178,227,.6) transparent;
}
.etw-week-strip::-webkit-scrollbar{ height:5px; }
.etw-week-strip::-webkit-scrollbar-thumb{
  background:rgba(0,178,227,.55);
  border-radius:999px;
}
.etw-week-day{
  text-align:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
  padding:10px 6px;
  color:#fff;
  line-height:1.2;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:72px;
  justify-content:center;
  font-size:.88rem;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.etw-week-day .dow{ font-weight:800; font-size:.75rem; letter-spacing:.04em; opacity:.9; }
.etw-week-day .date{ font-weight:700; font-size:.88rem; }
.etw-week-day .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  margin:0 auto;
  background:var(--foam);
  box-shadow:0 0 0 3px rgba(134,246,228,.25);
}
.etw-week-day.event{
  background:rgba(0,178,227,.22);
  border-color:rgba(0,178,227,.45);
  color:#fff;
}
.etw-week-day.today{
  background:rgba(134,246,228,.22);
  border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.2);
}

/* ── Body + cards ── */
.etw-body{
  padding:0;
  display:grid;
  gap:12px;
  position:relative;
  z-index:1;
}
.etw-span-2{ grid-column:1 / -1; }
.etw-card{
  background:var(--surface-1);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.etw-card:hover{
  transform:translateY(-2px);
  border-color:rgba(134,246,228,.38);
  box-shadow:0 16px 34px rgba(0,0,0,.28), 0 0 0 4px rgba(134,246,228,.08);
}
.etw-card h2{
  margin:0 0 10px;
  font-size:1.05rem;
  color:var(--text-strong);
  font-weight:700;
  letter-spacing:.01em;
}
.etw-card p{
  margin:0 0 8px;
  color:var(--text-muted);
}
.etw-card p:last-child{ margin-bottom:0; }

.etw-intro{
  background:linear-gradient(135deg, rgba(134,246,228,.1), rgba(0,178,227,.08));
  border-color:rgba(134,246,228,.28);
  padding:var(--space-4);
}
.etw-intro h2{ font-size:1.2rem; margin:0 0 8px; }
.etw-intro p{ margin:0; font-size:1rem; color:rgba(255,255,255,.92); }

.etw-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.etw-card-head h2{ margin-bottom:0; }
.etw-toggle label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;
  touch-action:manipulation;
  font-weight:500;
  font-size:.85rem;
  color:#fff;
  min-height:40px;
}
.etw-toggle input[type="checkbox"]{
  min-width:18px;
  min-height:18px;
  accent-color:var(--accent);
}

/* Links */
.etw-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:12px;
}
.etw-links label{ font-weight:600; color:#fff; }
.etw-links select{
  flex:1;
  min-width:160px;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,.1);
}
.etw-links button{
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(134,246,228,.35);
  background:linear-gradient(135deg,#00b2e3,#1b77b3);
  font-weight:700;
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  touch-action:manipulation;
}

/* Weather */
.etw-weather-box{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.etw-weather-main{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.etw-weather-now{ font-size:1.7rem; font-weight:800; color:#fff; min-width:50px; text-align:center; line-height:1; }
.etw-weather-details{ flex:1; }
.etw-weather-temp-range{ font-size:.95rem; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:2px; }
.etw-weather-conditions{ font-size:.85rem; color:rgba(255,255,255,.7); }
.etw-weather-meta{ color:rgba(255,255,255,.6); font-size:.82rem; margin-top:2px; }
.etw-weather-mini{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.etw-weather-mini .day{
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  min-width:84px;
  text-align:center;
  color:rgba(255,255,255,.92);
  font-size:.84rem;
}
.etw-weather-tips{
  margin-left:6px;
  padding:12px 14px;
  min-width:170px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.etw-weather-tip{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
  margin-bottom:8px;
  line-height:1.4;
}
.etw-weather-tip span{ font-weight:600; }
.etw-weather-tip:last-child{ margin-bottom:0; }

#etw-contacts{
  background:rgba(0,178,227,.08);
  border-color:rgba(0,178,227,.25);
}
#etw-contacts a{ color:#bfe9fb; }

.etw-a2hs{ display:grid; gap:12px; grid-template-columns:1fr; }
.etw-a2hs-card{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.28);
  border-radius:var(--radius-sm);
  padding:14px;
  color:rgba(255,255,255,.9);
}
.etw-a2hs-card p{ margin:0 0 8px; }
.etw-a2hs-card ol{ margin:0; padding-left:20px; }
.etw-a2hs-card li{ margin:6px 0; }

/* ── Timeline ── */
.etw-timeline{ list-style:none; margin:10px 0 0; padding:0; position:relative; }
.etw-timeline::before{
  content:"";
  position:absolute;
  left:16px;
  top:8px;
  bottom:8px;
  width:3px;
  background:linear-gradient(180deg, rgba(134,246,228,.55), rgba(0,178,227,.6));
  border-radius:2px;
  opacity:.95;
}
.etw-timeline li{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  padding:12px 12px 12px 44px;
  margin:8px 0;
  font-size:.94rem;
  color:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.etw-timeline li:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.3);
}
.etw-timeline li::before{
  content:"";
  position:absolute;
  left:10px;
  top:16px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(0,178,227,.2);
  border:3px solid rgba(134,246,228,.7);
  box-shadow:0 0 0 3px rgba(0,178,227,.15);
}
.etw-when{
  display:inline-block;
  font-weight:700;
  color:#fff;
  background:rgba(0,178,227,.22);
  border:1px solid rgba(0,178,227,.4);
  padding:3px 9px;
  border-radius:999px;
  margin-right:8px;
  font-size:.78rem;
}
.etw-timeline .etw-time{
  display:inline-block !important;
  color:rgba(255,255,255,.75);
  font-size:.85rem;
  font-weight:600;
  margin-left:4px;
  background:rgba(255,255,255,.1);
  padding:2px 7px;
  border-radius:6px;
}
.etw-timeline strong{ margin-right:4px; color:#fff; }

.etw-event--trip{ border-left:4px solid #ff6b35; }
.etw-event--meeting{ border-left:4px solid #4a90e2; }
.etw-event--sport{ border-left:4px solid #7ed321; }
.etw-event--academic{ border-left:4px solid #9013fe; }
.etw-event--food{ border-left:4px solid #f5a623; }
.etw-event--holiday{ border-left:4px solid #bd10e0; }
.etw-event--library{ border-left:4px solid #50e3c2; }
.etw-event--general{ border-left:4px solid #6c757d; }
.etw-event--pulse{ animation:etwPulseEvent 2.2s ease-in-out infinite; transform-origin:center; }

.etw-cal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  justify-content:flex-end;
}
.etw-cal-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:36px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(134,246,228,.3);
  background:rgba(0,178,227,.16);
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:.78rem;
  text-decoration:none;
  touch-action:manipulation;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.etw-cal-actions a:hover{
  background:rgba(0,178,227,.28);
  border-color:rgba(134,246,228,.5);
}

.etw-export-btn{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(134,246,228,.35);
  background:linear-gradient(135deg,#00b2e3,#146a9e);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  touch-action:manipulation;
}
.etw-export-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }

.etw-hidden{ display:none; }
.etw-past{ opacity:.72; }

/* Updates */
.etw-updates{ display:grid; gap:8px; }
.etw-update{
  background:rgba(255,215,0,.08);
  border:1px solid rgba(255,215,0,.22);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  color:rgba(255,255,255,.92);
}

/* Term progress (legacy) */
.etw-term-progress-header{ margin-top:8px; padding:6px 0; }
.etw-term-progress-header .etw-progress-label{
  font-size:.85rem; color:rgba(255,255,255,.9); font-weight:500; display:block; margin-bottom:4px; text-align:center;
}
.etw-progress-bar-header{
  height:4px; background:rgba(255,255,255,.2); border-radius:2px; overflow:hidden; margin:0 auto; max-width:200px;
}
.etw-progress-fill-header{
  height:100%; background:linear-gradient(90deg, rgba(134,246,228,.7), rgba(0,178,227,.9)); border-radius:2px;
}
.etw-term-progress{
  margin:16px 0; padding:12px; background:rgba(255,255,255,.06); border-radius:8px; border:1px solid rgba(255,255,255,.15);
}
.etw-progress-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.etw-progress-label{ font-weight:500; color:rgba(255,255,255,.8); font-size:.9rem; }
.etw-progress-percent{ font-weight:700; color:var(--accent); font-size:.95rem; }
.etw-progress-bar{ height:8px; background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.etw-progress-fill{ height:100%; background:linear-gradient(90deg, var(--spring), var(--spring2)); border-radius:4px; }
.etw-progress-dates{ text-align:center; font-size:.85rem; color:rgba(255,255,255,.6); }

/* Footer */
.etw-footer{
  margin-top:var(--space-3);
  padding:var(--space-4);
  text-align:center;
  color:#fff;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-md);
  position:relative;
  z-index:1;
}
.etw-footer-logo{
  height:52px;
  width:auto;
  display:block;
  margin:0 auto 10px;
  opacity:.92;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.etw-footer-text{ font-weight:500; font-size:.92rem; opacity:.92; }
.etw-footer a{ color:#bfe9fb; text-decoration:underline; text-underline-offset:2px; }

.etw-report-wrap{ margin-top:14px; }
.etw-report-toggle{
  background:none;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.7);
  font-size:.8rem;
  min-height:44px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
}
.etw-report-toggle:hover{ border-color:rgba(255,255,255,.45); color:#fff; }
.etw-report-form{ margin-top:10px; max-width:420px; margin-left:auto; margin-right:auto; }
.etw-report-textarea{
  width:100%;
  padding:12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:inherit;
  font-size:.9rem;
  resize:vertical;
  min-height:70px;
  box-sizing:border-box;
}
.etw-report-textarea::placeholder{ color:rgba(255,255,255,.4); }
.etw-report-textarea:focus{ outline:none; border-color:rgba(134,246,228,.5); }
.etw-report-submit{
  margin-top:8px;
  min-height:44px;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(134,246,228,.35);
  background:linear-gradient(135deg, rgba(0,178,227,.85), rgba(41,213,255,.45));
  color:#fff;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
}
.etw-report-submit:disabled{ opacity:.5; cursor:not-allowed; }
.etw-report-status{ margin-top:8px; font-size:.82rem; min-height:1.2em; }
.etw-report-success{ color:#bff6dc; }
.etw-report-error{ color:#ff9b9b; }

/* Collapsible / tables / menus */
.etw-collapse-header{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.etw-collapse-header h2{ margin:0; }
.etw-collapse-icon{ font-size:1.1rem; color:rgba(255,255,255,.5); transition:transform .2s ease; }
.etw-collapse-header.open .etw-collapse-icon{ transform:rotate(90deg); }
.etw-collapse-body{ margin-top:10px; }
.etw-term-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.etw-term-table th{
  text-align:left; padding:6px 8px; border-bottom:1px solid rgba(134,246,228,.2);
  color:rgba(255,255,255,.7); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
}
.etw-term-table td{ padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.etw-term-table tr:last-child td{ border-bottom:none; }
.etw-menu-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.etw-menu-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(134,246,228,.3); background:rgba(0,178,227,.14); color:#fff;
  font-size:.88rem; font-weight:600; text-decoration:none;
}
.etw-menu-btn:hover{ background:rgba(0,178,227,.24); color:#fff; }

/* Class reading */
.etw-reading h3{ margin:0 0 10px; font-size:1rem; color:#fff; font-weight:700; }
.etw-reading-feature{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
  margin-bottom:18px;
}
.etw-reading-feature--with-cover{
  grid-template-columns:minmax(120px,150px) 1fr;
}
.etw-reading-cover{
  width:100%;
  max-width:150px;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.3);
}
.etw-reading-cover--featured{ max-width:160px; }
.etw-reading-title{ font-size:1.15rem; font-weight:800; margin:0 0 8px; color:#fff; }
.etw-reading-feature .etw-reading-author{ font-weight:500; font-size:.92rem; opacity:.9; }
.etw-reading-copy p{ margin:0; color:rgba(255,255,255,.9); font-size:.98rem; line-height:1.55; }
.etw-reading-recs{ margin-top:8px; }
.etw-reading-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.etw-reading-card{
  display:grid;
  grid-template-columns:1fr;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(134,246,228,.2);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.etw-reading-card .etw-reading-cover{
  max-width:none;
  width:100%;
  border-radius:0;
  border:none;
  aspect-ratio:3/4;
  max-height:220px;
  object-fit:cover;
}
.etw-reading-card-body{ padding:12px 14px 14px; }
.etw-reading-card-body strong{ display:block; color:#fff; font-size:.95rem; line-height:1.3; }
.etw-reading-author{ display:block; font-size:.82rem; opacity:.85; margin:2px 0 6px; }
.etw-reading-card-body p{
  margin:0;
  font-size:.86rem;
  color:rgba(255,255,255,.88);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Focus */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible{
  outline:2px solid rgba(0,178,227,.95);
  outline-offset:2px;
}

@media (min-width:900px){
  .etw-body{ grid-template-columns:1fr 1fr; align-items:start; }
  .etw-pills{ grid-template-columns:1fr 1fr; }
  .etw-a2hs{ grid-template-columns:1fr 1fr; }
}

@media (max-width:768px){
  .etw-fridge-letter{ padding:8px; font-size:15.5px; }
  .etw-card{ border-radius:14px; }
}

@media (max-width:640px){
  .etw-reading-feature--with-cover{ grid-template-columns:minmax(96px,112px) 1fr; gap:12px; }
  .etw-reading-cover--featured{ max-width:112px; margin:0; }
  .etw-reading-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .etw-reading-card{
    grid-template-columns:92px 1fr;
    align-items:start;
  }
  .etw-reading-card .etw-reading-cover{
    width:92px;
    max-height:none;
    aspect-ratio:2/3;
    margin:10px 0 10px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 18px rgba(0,0,0,.28);
  }
  .etw-reading-card-body{
    padding:10px 12px 10px 4px;
    min-width:0;
  }
  .etw-reading-card-body strong{ font-size:.9rem; }
  .etw-reading-card-body p{
    font-size:.82rem;
    -webkit-line-clamp:3;
  }
}

@media (max-width:600px){
  .etw-hero{ padding:16px 14px; }
  .etw-hero-top{ grid-template-columns:1fr; justify-content:center; gap:12px; }
  .etw-logo{ justify-self:center; width:200px; max-width:72vw; max-height:58px; }
  .etw-steve{ justify-self:center; width:96px; }
  .etw-title{ font-size:1.55rem; }
  .etw-pill{ align-items:flex-start; min-height:52px; }
  .etw-week-strip{
    grid-auto-flow:column;
    grid-auto-columns:96px;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .etw-week-strip::-webkit-scrollbar{ display:none; }
  .etw-week-day{ min-height:80px; scroll-snap-align:start; }
  .etw-timeline::before{ left:10px; }
  .etw-timeline li{ padding-left:34px; }
  .etw-timeline li::before{ left:4px; }
  .etw-when{ display:block; margin:0 0 6px; width:fit-content; }
  .etw-weather-box{ flex-direction:column; }
  .etw-weather-mini{ width:100%; margin-left:0; }
  .etw-weather-tips{ width:100%; margin-left:0; }
  .etw-card:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .etw-fridge-letter::after,
  .etw-undersea-floats .etw-bubble,
  .etw-undersea-floats .etw-sea-critter,
  .etw-steve,
  .etw-event--pulse{ animation:none !important; }
  .etw-card:hover,
  .etw-timeline li:hover,
  .etw-export-btn:hover{ transform:none !important; }
}

/* ── Curriculum Letter ── */
.etw-curriculum-letter .etw-body{ gap:12px; }
.etw-curriculum-welcome{
  background:rgba(134,246,228,.1) !important;
  border:1px solid rgba(134,246,228,.28) !important;
}
.etw-curriculum-welcome h2{ font-size:1.15rem; margin:0 0 8px; }
.etw-curriculum-welcome p{ margin:0; font-size:.95rem; color:rgba(255,255,255,.9); line-height:1.6; }
.etw-curriculum-subject h2{
  font-size:1rem; color:#fff; border-bottom:1px solid rgba(134,246,228,.18);
  padding-bottom:6px; margin-bottom:8px;
}
.etw-curriculum-subject p{
  margin:0 0 8px; font-size:.92rem; color:rgba(255,255,255,.88); line-height:1.6;
}
.etw-curriculum-bullets{ list-style:none; margin:8px 0 0; padding:0; }
.etw-curriculum-bullets li{
  position:relative; padding:6px 0 6px 18px; font-size:.88rem;
  color:rgba(255,255,255,.85); line-height:1.5; border-bottom:1px solid rgba(255,255,255,.06);
}
.etw-curriculum-bullets li:last-child{ border-bottom:none; }
.etw-curriculum-bullets li::before{
  content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:50%;
  background:rgba(0,178,227,.55); border:2px solid rgba(134,246,228,.4);
}
.etw-curriculum-bullets li strong{ color:#fff; font-weight:600; }
.etw-curriculum-homework{
  background:rgba(255,215,0,.06) !important;
  border:1px solid rgba(255,215,0,.18) !important;
}
.etw-curriculum-homework h2{ font-size:1.1rem; margin:0 0 10px; }
.etw-curriculum-homework p{ margin:0 0 10px; font-size:.92rem; color:rgba(255,255,255,.88); line-height:1.6; }
.etw-curriculum-homework p:last-child{ margin-bottom:0; }
.etw-curriculum-updated{
  font-size:.78rem; color:rgba(255,255,255,.5); margin-top:4px; font-style:italic; letter-spacing:.3px;
}
.etw-chevron{ display:none; }
@media(max-width:600px){
  .etw-curriculum-toggle{
    cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    -webkit-tap-highlight-color:transparent;
  }
  .etw-chevron{
    display:inline-block; width:18px; height:18px; flex-shrink:0; margin-left:8px; position:relative;
  }
  .etw-chevron::before,
  .etw-chevron::after{
    content:""; position:absolute; top:50%; width:8px; height:2px;
    background:rgba(255,255,255,.6); border-radius:1px; transition:transform .25s ease;
  }
  .etw-chevron::before{ left:1px; transform:translateY(-50%) rotate(45deg); }
  .etw-chevron::after{ right:1px; transform:translateY(-50%) rotate(-45deg); }
  .etw-collapsed .etw-chevron::before{ transform:translateY(-50%) rotate(-45deg); }
  .etw-collapsed .etw-chevron::after{ transform:translateY(-50%) rotate(45deg); }
  .etw-curriculum-content{
    overflow:hidden; max-height:2000px; transition:max-height .3s ease, opacity .25s ease; opacity:1;
  }
  .etw-collapsed .etw-curriculum-content{ max-height:0; opacity:0; }
  .etw-collapsed .etw-curriculum-toggle h2,
  .etw-collapsed.etw-curriculum-subject h2{
    border-bottom:none; padding-bottom:0; margin-bottom:0;
  }
}

/* ── 404 Page ── */
.etw-404-letter{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.etw-404-sheet{ text-align:center; max-width:600px !important; }
.etw-404-main{ padding:30px 24px 40px; }
.etw-404-apple{
  font-size:3.2rem; margin-bottom:12px; line-height:1;
  filter:drop-shadow(0 2px 8px rgba(255,80,80,.3));
  animation:etw404bob 2s ease-in-out infinite;
}
@keyframes etw404bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.etw-404-heading{
  font-family:"Figtree",sans-serif; font-size:2rem; font-weight:800; color:#fff;
  margin:0 0 14px; letter-spacing:-.5px;
}
.etw-404-sub{ font-size:1.15rem; color:rgba(255,255,255,.85); margin:0 0 6px; line-height:1.5; }
.etw-404-sub2{ font-size:1rem; color:rgba(255,255,255,.6); margin:0 0 28px; font-style:italic; line-height:1.5; }
.etw-404-biscuit{ margin:0 auto 32px; max-width:280px; }
.etw-404-biscuit img{
  width:100%; height:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
  animation:etw404wobble 3s ease-in-out infinite;
}
@keyframes etw404wobble{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(2deg); }
  75%{ transform:rotate(-2deg); }
}
.etw-404-btn{
  display:inline-block; padding:14px 32px;
  background:linear-gradient(135deg,#00b2e3,#1b77b3);
  color:#fff !important; font-family:"Figtree",sans-serif; font-size:1rem; font-weight:700;
  text-decoration:none !important; border-radius:50px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 4px 16px rgba(0,178,227,.35);
}
.etw-404-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,178,227,.5); }
@media(max-width:600px){
  .etw-404-heading{ font-size:1.5rem; }
  .etw-404-sub{ font-size:1rem; }
  .etw-404-biscuit{ max-width:200px; }
  .etw-404-btn{ padding:12px 24px; font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce){
  .etw-404-apple, .etw-404-biscuit img{ animation:none !important; }
}