/* =========================================================
   Eunomia: Record Their Discord — Desktop Calm Rebuild (clean)
   GOAL: Same visuals + layout, shorter + readable CSS.
   NOTE: No function/animation changes. Duplicate/override
         experiments removed; final intended rules kept.
   ========================================================= */

/* -------------------- Design tokens -------------------- */
:root{
  --bg-top:#f6f1e8;
  --bg-bottom:#ece6da;

  --panel:rgba(255,255,255,0.86);
  --panel-solid:#ffffff;
  --ink:#2e2e2e;
  --muted:#6b6b6b;

  --gold:#c89b39;
  --gold-soft:#ffe7c7;

  --border:rgba(0,0,0,0.10);
  --border-soft:rgba(0,0,0,0.08);

  --r-xl:24px;
  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;

  --shadow-soft:0 6px 18px rgba(0,0,0,0.06);
  --shadow-card:0 10px 28px rgba(0,0,0,0.09);
  --shadow-lift:0 14px 34px rgba(0,0,0,0.14);

  --pad:16px;
  --gap:14px;
}

/* -------------------- Reset -------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
}

/* -------------------- App frame -------------------- */
.app-shell{
  max-width:1400px;
  margin:0 auto;
  padding:18px;
  min-height:100%;
}

/* Screen toggling */
.screen{ display:block; }
.hidden{ display:none !important; }

/* -------------------- Background system -------------------- */
.office-bg,
.classroom-bg{
  background-image:url("assets/classroom-bg.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.classroom-bg{
  background-size: 120% auto;   /* zoom in */
  background-position: center;
}


.office-bg{
  background-image:url("assets/office-bg.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.classroom-bg{
  background-image:url("assets/classroom-bg.png");
  background-repeat:no-repeat;
 background-size:contain;
background-color: var(--bg-top);

  background-position:center;
}


.office-bg::before,
.classroom-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,248,240,0.60);
  backdrop-filter:blur(2px);
  pointer-events:none;
  z-index:0;
}
.office-bg > *,
.classroom-bg > *{
  position:relative;
  z-index:1;
}

/* -------------------- Intro -------------------- */
#introScreen{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.intro-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.intro-video{
  width:56mm;
  height:56mm;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,0.18);
}
.intro-caption{
  font-size:0.95rem;
  color:rgba(40,40,40,0.70);
}

/* -------------------- Topbar -------------------- */
.workspace-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 10px;
}
#adminBackBtn {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 5;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
#adminBackBtn:hover {
  background: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}

.brand-lockup{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width:44px; height:44px;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,0.10);
}
.brand-title{ font-weight:700; letter-spacing:0.2px; }
.brand-sub{ font-size:0.86rem; color:var(--muted); margin-top:2px; }
.brand-status{ text-align:right; }

.euno-clock{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.70);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 10px 26px rgba(0,0,0,0.08);
}
.euno-clock-time{ font-weight:700; font-size:1.05rem; }
.euno-clock-date{ font-size:0.86rem; color:var(--muted); }

.hint{ color:var(--muted); font-size:0.85rem; }
.session-status{ font-size:0.85rem; color:var(--muted); }

/* -------------------- Workspace grid -------------------- */
.workspace-grid{
  display:grid;
  gap:var(--gap);
  padding:0 18px 18px;
  min-height:0;
}
.workspace-grid--groups{ grid-template-columns: 1fr; }
.workspace-grid--admin{ grid-template-columns: 1fr; }
.workspace-grid--students{ grid-template-columns: 1fr; }

@media (min-width: 1024px){
  /* Let the app scroll properly (no zoom needed) */
  body{ overflow:auto; }

  /* Keep the background screens locked to the viewport and scrollable */
  .office-bg,
  .classroom-bg{
    height: calc(100vh - 36px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .workspace-grid--groups{
    grid-template-columns: 1fr 380px;
    align-items:stretch;
  }
  .workspace-grid--admin{
    grid-template-columns: 1fr 420px;
    align-items:stretch;
  }
}


/* -------------------- Panels -------------------- */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.82));
  border:1px solid var(--border-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panel-header{
  position:relative;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
}

/* Thin Eunomia gold rule */
.panel-header::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
  rgba(200,155,57,0.05),
  rgba(200,155,57,0.55),
  rgba(200,155,57,0.05)
  );
  pointer-events:none;
}

.panel-title{
  margin:0;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:0.15px;
}

.panel-body{
  padding:16px;
  min-height:0;

  /* subtle paper grain (no assets) */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.015), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 0%, rgba(0,0,0,0.012), rgba(0,0,0,0) 50%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.008), rgba(0,0,0,0.008) 1px, rgba(0,0,0,0) 10px);
  background-blend-mode: multiply;
}
.panel-body--scroll{ overflow:auto; }

.panel-footer{
  padding:14px 16px 16px;
  border-top:1px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.70);
}

.subpanel{
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.74));
  border:1px solid rgba(0,0,0,0.07);
  border-radius:18px;
  padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,0.07);
  margin-bottom:14px;
}
.subpanel-title{
  margin:0 0 10px;
  font-size:0.95rem;
  font-weight:700;
  color:rgba(20,20,20,0.86);
}

/* -------------------- Buttons -------------------- */
.buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,0.12);
  background:#f8f3eb;
  color:var(--ink);
  border-radius:12px;
  padding:10px 14px;
  font-size:0.92rem;
  cursor:pointer;
  transition:transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out, filter .15s ease-out;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  background:#f2eade;
}
.btn.primary{
  background:var(--gold-soft);
  border-color:rgba(0,0,0,0.10);
  color:#8a5204;
}
.btn.danger{ background:#ffe0e0; color:#9a1515; }
.btn.small{ padding:7px 10px; font-size:0.82rem; }
.btn.wide{ width:100%; }
:root[data-theme="dark"] .btn.primary {
  background: color-mix(in srgb, var(--gold) 40%, #2a2a2a);
  color: #fff8e8;
  border-color: rgba(255,255,255,0.18);
}

:root[data-theme="dark"] .panel-footer {
  background: rgba(22,24,29,0.86) !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--muted) !important;
}

/* -------------------- Inputs -------------------- */
.label-top{ font-size:0.85rem; margin-bottom:4px; color:var(--muted); }

input[type="text"], select, textarea{
  width:100%;
  padding:12px 14px;
  font-size:0.95rem;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:12px;
  background:#fff;
  color:#333;
  outline:none;
  transition:border .2s, box-shadow .2s;
}
input[type="text"]:focus, select:focus, textarea:focus{
  border-color:#d8b87a;
  box-shadow:0 0 0 3px rgba(216,184,122,0.25);
}
textarea{
  resize:vertical;
  min-height:110px;
  max-height:320px;
  line-height:1.45;
  background:#fffcf5;
}

/* Admin cards inside panel */
.control-card--flat{
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.mini-title{ margin:0; font-size:0.98rem; font-weight:700; }

/* Sessions list */
.sessions-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:280px;
  overflow:auto;
  padding-right:6px;
}

/* -------------------- Grids -------------------- */
.student-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}

/* Desktop calm density (kept) */
@media (min-width: 1024px){
  .student-grid{
    grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
    gap:18px;
  }
}

/* Mobile tightening */
@media (max-width: 820px){
  .student-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
}
@media (max-width: 520px){
  .workspace-topbar{ flex-direction:column; align-items:flex-start; }
  .brand-status{ text-align:left; }
  .student-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* -------------------- Student cards + animation (DO NOT BREAK) -------------------- */
.student-card{
  background:var(--panel-solid);
  border-radius:var(--r-lg);
  padding:16px;
  border:1px solid rgba(0,0,0,0.07);
  box-shadow:var(--shadow-soft);
  cursor:pointer;

  /* animation (unchanged) */
  opacity:0;
  transform:translate(var(--card-offset-x, 0px), -40px);
  animation-name:cardFall;
  animation-duration:0.7s;
  animation-timing-function:ease-out;
  animation-fill-mode:forwards;

  /* overlay safety for badges/edit icon */
  position:relative;
  overflow:hidden;
}
@keyframes cardFall{
  0%{ opacity:0; transform:translate(var(--card-offset-x, 0px), -40px); }
  70%{ opacity:1; transform:translate(var(--card-offset-x, 0px), 8px); }
  100%{ opacity:1; transform:translate(0,0); }
}
.student-card:hover{
  transform:translate(0,-2px);
  box-shadow:var(--shadow-lift);
}

/* Calm card presence on desktop (kept) */
@media (min-width: 1024px){
  .student-card{
    padding:18px;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
  }
}

.student-name{ font-weight:700; margin-bottom:4px; }
.student-last-note{ font-size:0.85rem; color:rgba(20,20,20,0.70); }

/* Badge pill (final behaviour: pinned top-right) */
.student-badge{
  position:absolute;
  top:6px;
  right:10px;
  z-index:3;
  font-size:0.7rem;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,255,255,0.8);
  color:#333;
}

/* Edit icon on student cards (final single definition) */
.student-card .student-edit{
  position:absolute;
  top:6px;
  right:8px;
  z-index:3;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1rem;
  background:rgba(255, 255, 255, 0.85);
  border-radius:50%;
  cursor:pointer;

  opacity:0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.student-card:hover .student-edit{ opacity:1; }
.student-card .student-edit:hover{
  background:rgba(255, 255, 255, 0.95);
  color:#000;
}

/* Group screen uses student-card too: “tile” feel (kept) */
#groupScreen .student-card{
  border-radius:22px;
  padding:18px 18px;
  min-height:110px;
  box-shadow:0 10px 26px rgba(0,0,0,0.10);
}
@media (min-width: 1024px){
  #groupScreen .student-card{
    padding:20px 20px;
    min-height:120px;
    border-radius:22px;
    box-shadow:0 12px 28px rgba(0,0,0,0.10);
  }
}

/* -------------------- Desk shortcuts + admin links -------------------- */
.desk-links-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
@media (min-width: 820px){
  .desk-links-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width: 1280px){
  .desk-links-grid{ grid-template-columns:repeat(3, 1fr); }
}

.admin-links-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

.admin-link-wrapper,
.desk-link-wrapper{ position:relative; }


.admin-link-btn,
.desk-link-btn{
  width:100%;
  height:56px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.14);
  background:var(--gold);
  color:#1f2933;
  font-size:0.92rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,0.10);
  transition:transform .15s ease-out, box-shadow .15s ease-out, filter .15s ease-out;
}

:root[data-theme="dark"] .desk-link-btn,
:root[data-theme="dark"] .admin-link-btn{
  background: color-mix(in srgb, var(--gold) 45%, #14171c);
  color: #fff8e8;
  border-color: rgba(255,255,255,0.12);
}



.admin-link-btn:hover,
.desk-link-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,0.14);
  filter:brightness(1.02);
}

/* Empty state */
.admin-link-wrapper.empty .admin-link-btn,
.desk-link-wrapper.empty .desk-link-btn{
  background:#f5f1e9;
  border:1px dashed rgba(0,0,0,0.25);
  box-shadow:none;
  color:#6b6b6b;
  font-weight:700;
}

/* Cog */
.admin-link-cog,
.desk-link-cog{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.82);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
.admin-link-cog:hover,
.desk-link-cog:hover{ background:#fff; }

/* Tooltip for empty desk shortcuts */
.desk-link-wrapper.empty::before{
  content:"Click ⚙ to set shortcut";
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  padding:6px 10px;
  border-radius:10px;
  font-size:0.78rem;
  white-space:nowrap;
  background:rgba(255,248,232,0.96);
  color:rgba(40,40,40,0.92);
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:5;
}
.desk-link-wrapper.empty::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  width:10px;
  height:10px;
  background:rgba(255,248,232,0.96);
  border-left:1px solid rgba(0,0,0,0.10);
  border-top:1px solid rgba(0,0,0,0.10);
  transform:translateX(-50%) translateY(6px) rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:5;
}
.desk-link-wrapper.empty:hover::before,
.desk-link-wrapper.empty:hover::after,
.desk-link-wrapper.empty:focus-within::before,
.desk-link-wrapper.empty:focus-within::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Hover polish for Backup/Restore buttons (kept) */
#backupBtn.hovering,
#restoreBtn.hovering{
  filter: brightness(1.1);
  transform: translateY(-1px);
  transition: all 0.15s ease;
}

/* -------------------- Student screen (layout + spacing) -------------------- */
#studentScreen{
  padding-top: 26px;

  /* warm parchment tint (kept) */
  background-color: rgba(247, 242, 231, 0.72);
  backdrop-filter: blur(6px) saturate(1.1);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* pull in from edges */
#studentScreen .student-header,
#studentScreen #studentGrid,
#studentScreen .session-actions-row{
  padding-left: 18px;
  padding-right: 18px;
}

/* grid separation */
#studentScreen #studentGrid{ margin-top: 12px; }

@media (min-width: 900px){
  #studentScreen .student-header,
  #studentScreen #studentGrid,
  #studentScreen .session-actions-row{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  #studentScreen{ padding-top: 34px; }
}

@media (max-width: 600px){
  #studentScreen{
    background-color: rgba(249, 238, 210, 0.8);
    padding-top: 18px;
  }
}

@media (max-width: 520px){
  #studentScreen .student-header,
  #studentScreen #studentGrid,
  #studentScreen .session-actions-row{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Student screen “no page scroll” on desktop (kept) */
.student-canvas{ min-height:0; }
@media (min-width: 1024px){
  #studentScreen{ height:calc(100vh - 36px); }
  .panel--students{ height:100%; }
  .student-canvas{
    flex:1;
    overflow:auto;
    padding:2px;
  }
  .session-actions-row--desktop{ flex-shrink:0; }
}

/* Warmer student panel tone inside classroom background (kept) */
.classroom-bg .panel--students,
.classroom-bg #studentScreen .panel{
  background: rgba(255, 250, 242, 0.86);
  border: 1px solid rgba(120, 90, 40, 0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Session actions row (final: 3 equal buttons on desktop) */
.session-actions-row{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

#studentScreen .session-actions-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: center;
}



/* Register button wrapper (adds an edit cog like Desk shortcuts) */
.session-link-wrapper{
  position: relative;
  width: 100%;
}
.session-link-wrapper > .btn{
  width: 100%;
}
.session-link-wrapper > .desk-link-cog{
  position: absolute;
  top: 8px;
  right: 8px;
}
#studentScreen #saveSessionBtn,
#studentScreen #resetSessionBtn,
#studentScreen #emailSessionBtn{
  width: 100%;
  justify-self: stretch;
}

/* Ensure hint/footer lines stay below, full width */
#studentScreen .euno-footer,
#studentScreen .euno-footer--compact,
#studentScreen .session-actions-row p,
#studentScreen .session-actions-row .hint,
#studentScreen .session-actions-row small{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  text-align: center;
}

/* Mobile: stack buttons */
@media (max-width: 760px){
  #studentScreen .session-actions-row{ grid-template-columns: 1fr; }
}

/* Student header (final: visual balance grid) */
#studentScreen .student-header{
  display: grid !important;
  grid-template-columns: 160px 1fr 280px;
  align-items: center;
  padding: 18px 28px 8px;
  gap: 16px;
  margin:0;
}

#studentScreen #backHomeBtn{
  justify-self: start;
  margin: 0;
  padding: 8px 18px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

#studentScreen #currentGroupTitle{
  justify-self: center;
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.3;
}

#studentScreen [data-session-status]{
  justify-self: end;
  text-align: right;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.88rem;
  color: rgba(0,0,0,0.65);
}

#studentScreen #studentSectionHint{
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Student header: mobile stacking (kept from earlier attempts, but tidy) */
@media (max-width: 620px){
  #studentScreen .student-header{
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 10px 12px 8px;
  }
  #studentScreen #currentGroupTitle,
  #studentScreen [data-session-status],
  #studentScreen #studentSectionHint{
    justify-self: start;
    text-align:left;
  }
}

/* -------------------- Transition screen -------------------- */
.transition-inner{
  height:60vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.transition-message{
  font-size:1.4rem;
  text-align:center;
  color:#444;
  opacity:0;
  animation:fadeIn 1.4s ease forwards;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* -------------------- Modal -------------------- */
.modal{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:flex-start;
  padding-top:4rem;
  z-index:9999;
}
.modal:not(.hidden){ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(4px);
}
.modal-content{
  position:relative;
  z-index:2;
  width:min(680px, 94%);
  background:var(--panel-solid);
  border-radius:var(--r-xl);
  padding:18px 18px 24px;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lift);
  font-size:0.95rem;
  line-height:1.5;
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* -------------------- Links editing mode (hide note UI) -------------------- */
.links-editing .note-type-row,
.links-editing #noteText,
.links-editing .history-block,
.links-editing .modal-actions,
.links-editing .soft-msg{
  display:none !important;
}
/* Hide the label too in links editing mode */
.links-editing label.label-top{
  display:none !important;
}

/* -------------------- Student Records mode (hide main modal UI) -------------------- */
.records-open .note-type-row,
.records-open .custom-links-block,
.records-open #noteText,
.records-open .history-block,
.records-open .modal-actions,
.records-open .soft-msg,
.records-open label.label-top{
  display:none !important;
}

/* -------------------- Student Records panel -------------------- */
.student-records-panel{
  width: min(760px, 92vw);
  margin: 14px auto;
  padding: 14px;
  background: #fcfaf7;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  max-height: calc(100vh - 220px);
  overflow: auto;
  animation: fadeIn 0.25s ease;
}
.student-records-panel.hidden{ display:none; }

.sr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.sr-title{
  font-weight:800;
  letter-spacing:0.2px;
}
.sr-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.sr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.sr-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.sr-card-title{ font-weight:700; margin-bottom:8px; }
.sr-wide{ grid-column: 1 / -1; }

.sr-small{
  margin-top:8px;
  font-size:0.82rem;
  color: var(--muted);
}

.sr-link-add{
  display:grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.sr-link-add input[type="text"],
.sr-link-add input[type="url"]{
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-size: 0.85rem;
  background: #fff;
}
.sr-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sr-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
}
.sr-row .sr-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.sr-row .sr-name{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sr-row .sr-meta{ font-size:0.8rem; color: var(--muted); }
.sr-row .sr-right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.sr-dropzone{
  position:relative;
  border:1px dashed rgba(0,0,0,0.18);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,0.65);
  cursor:pointer;
  user-select:none;
}
.sr-dropzone.dragover{
  border-color: rgba(200,155,57,0.8);
  box-shadow: 0 0 0 3px rgba(200,155,57,0.18);
}
.sr-dropzone-title{ font-weight:800; }
.sr-dropzone-sub{ font-size:0.85rem; color: var(--muted); margin-top:2px; }

.sr-file-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}



.sr-files{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.sr-file-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
}
.sr-file-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.sr-thumb{
  width:46px;
  height:46px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,0.10);
  flex:0 0 auto;
}
.sr-file-name{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sr-file-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width: 720px){
  .sr-grid{ grid-template-columns: 1fr; }
  .sr-link-add{ grid-template-columns: 1fr; }
}

/* Note type chips */
.note-type-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.note-type-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border-radius:10px;
  padding:8px 12px;
  font-size:0.82rem;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.12);
  background:#f7f3eb;
}
.chip.active{
  background:#ffe4c4;
  border-color:rgba(0,0,0,0.18);
}

/* Modal actions + history */
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.history-block h3{ margin-top:16px; margin-bottom:6px; }
.history-list{
  max-height:240px;
  overflow:auto;
  padding-right:6px;
  font-size:0.88rem;
}
.history-item{
  padding:10px 4px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.history-text{ flex:1; white-space:pre-wrap; }
.history-actions{ flex:0 0 auto; }

/* Custom quick-links row (shown in modal) */
.custom-links-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}
.custom-link-btn{
  border-radius:14px;
  border:none;
  padding:8px 12px;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  background:#e5dcc8;
  color:#1f2933;
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
  white-space:nowrap;
}

/* Ensure ⚙ quick-links edit button is visible */
#studentModal .custom-links-block{
  position: relative;
  z-index: 999 !important;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
#studentModal #editLinksBtn{
  position: relative;
  z-index: 999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.1);
  color:#1b1b1b;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* -------------------- Quick-links editor (final compact two-card layout) -------------------- */
.custom-links-editor{
  width: min(760px, 92vw);
  margin: 14px auto;
  padding: 14px;
  background: #fcfaf7;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  max-height: calc(100vh - 220px);
  overflow: auto;
  animation: fadeIn 0.25s ease;
}
.custom-links-editor.hidden{ display:none; }

/* Hide learner-specific ILP block when using the modal for Desk/Admin shortcut editing */
#studentModal.admin-mode #ilpBlock{
  display:none !important;
}

/* Also hide the learner note / history UI when the modal is being used for Desk/Admin shortcut editing */
#studentModal.admin-mode .label-top,
#studentModal.admin-mode #noteText,
#studentModal.admin-mode .modal-actions,
#studentModal.admin-mode .history-block,
#studentModal.admin-mode #softMsg{
  display:none !important;
}

.qle-head{ margin-bottom: 10px; }
.qle-title-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.qle-title{ font-weight: 700; font-size: 1.05rem; }
.qle-sub{ font-size: 0.85rem; opacity: 0.7; }
.qle-help-btn{ white-space:nowrap; font-size:0.82rem; padding:4px 10px; }

/* Help video modal — short contextual "how does this work" clips */
.help-video-content{ max-width:640px; }
.help-video-player{ width:100%; border-radius:10px; background:#00242c; display:block; }
.help-video-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }

.qle-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 780px){
  .qle-grid{ grid-template-columns: 1fr; }
}

.qle-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 12px;
}
.qle-card-title{
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  opacity: 0.9;
}

.custom-links-editor label{
  display:block;
  font-size:0.78rem;
  margin: 8px 0 4px;
  opacity:0.8;
}

.custom-links-editor input[type="text"],
.custom-links-editor input[type="url"]{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-size: 0.85rem;
  background: #fff;
}

.custom-links-editor input[type="color"]{
  width: 100%;
  height: 30px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.qle-presets{ margin-top: 12px; }
.qle-presets-title{
  font-size: 0.78rem;
  opacity: 0.75;
  margin-bottom: 6px;
}
.qle-presets-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* generic editor helpers (still referenced by JS/markup) */
.editor-row{ margin-bottom:10px; }
.editor-row label{ font-size:0.85rem; display:block; margin-bottom:6px; }
.preset-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.preset-chip{
  padding:8px 10px;
  background:#ececec;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:0.85rem;
}

.qle-actions,
.editor-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}

.qle-btn{
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}
.qle-btn-save{
  background:#c89b39;
  color:#fff;
}
.qle-btn-save:hover{ background:#b48a31; }
.qle-btn-ghost{
  background:#f3f3f3;
}
.qle-btn-ghost:hover{ background:#e4e4e4; }

/* Soft once-per-day message */
.soft-msg{
  position:absolute;
  bottom:18px;
  right:18px;
  max-width:260px;
  background:#fff8e8;
  color:#5b420d;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  opacity:0;
  font-size:0.85rem;
  pointer-events:none;
  transition:opacity 0.8s ease-out;
}
.soft-msg.visible{ opacity:1; }

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:1.6rem;
  transform:translateX(-50%) translateY(10px);
  background:#fff7ed;
  color:#92400e;
  padding:0.75rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(248,196,113,0.8);
  box-shadow:0 18px 36px rgba(0,0,0,0.18);
  font-size:0.88rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index:10000;
}
.toast.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Footer */
.euno-footer{
  margin-top:0;
  text-align:center;
  color:#b89c79;
  opacity:0.85;
}
.euno-footer--compact .euno-footer-line{ margin-bottom:4px; }
.euno-footer-line{
  font-size:0.98rem;
  font-weight:600;
  color:#a38662;
}
.euno-footer-sub{
  font-size:0.9rem;
  font-style:italic;
}
.footer-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
/* ----------------------------------------------------------
   Quick-links editor: align flush with the student modal content
   (removes outer beige card + fixes centring/offset)
---------------------------------------------------------- */
.custom-links-editor{
  background: none !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 12px 0 0 !important;   /* small top gap, no auto-centre */
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the two-card grid fits the container cleanly */
.qle-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stop inner cards from causing overflow oddness */
.qle-card{
  width: 100%;
}
/* Quick-links editor: match the modal content width perfectly */
#studentModal .custom-links-editor{
  box-sizing: border-box;
  width: 100% !important;
}

/* Prevent any inner grid overflow that can nudge alignment */
#studentModal .qle-grid{
  width: 100%;
}

.links-editing .note-type-row,
.links-editing #noteText,
.links-editing .history-block,
.links-editing .modal-actions,
.links-editing .soft-msg {
  display: none !important;
}
/* Hide the quick-tag buttons when editing quick-links */
#studentModal.links-editing #quickTagsRow,
#studentModal.links-editing .chip {
  display: none !important;
}
/* =========================================================
   Eunomia – Modal centring + user-friendly records layout
   Paste at END of adaptionstyle.css (override layer)
   ========================================================= */

/* Modal overlay: truly centred */
.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;          /* vertical centre */
  justify-content: center;      /* horizontal centre */
  padding: clamp(12px, 2vw, 24px);
  z-index: 9999;
}

/* keep your existing hidden behaviour */
.modal.hidden{ display: none; }

/* Backdrop covers everything (even if other layout shifts) */
.modal .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

/* The modal card itself */
.modal-content.student-modal-content{
  position: relative;
  width: min(920px, 96vw);                 /* nice desktop width, responsive */
  max-height: min(86vh, 900px);            /* never exceed viewport */
  overflow: auto;                          /* scroll inside modal if needed */
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Header: tidy + breathable */
.modal-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#modalStudentName{
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

#modalGroupName{
  margin: 0;
  opacity: 0.75;
  white-space: nowrap;
}

/* Body spacing */
.modal-body{
  padding: 16px 20px 20px;
}

/* Quick tags row: wrap neatly */
#quickTagsRow{
  gap: 8px !important;
  margin: 8px 0 12px !important;
}
#quickTagsRow .chip{
  padding: 8px 12px;
  border-radius: 999px;
}

/* Student Records panel: clearer structure */
.student-records-panel{
  margin-top: 14px;
}

/* Cards: consistent spacing + softer look */
.student-records-panel .sr-card{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px;
}

/* Make records layout a grid on desktop, stacked on mobile */
.student-records-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.student-records-panel .sr-wide{
  grid-column: 1 / -1;
}

/* Inputs: full width + comfortable */
.student-records-panel input,
.student-records-panel textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 10px 12px;
  background: rgba(255,255,255,0.85);
}

/* Links add-row: behave nicely */
.sr-link-add{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr auto;
  gap: 10px;
  align-items: center;
}

/* Dropzone: more obvious target */
.sr-dropzone{
  border-radius: 16px;
  border: 2px dashed rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.60);
  padding: 18px;
  cursor: pointer;
}
.sr-dropzone:hover{
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.26);
}

/* When the records panel is open, keep things calm */
.modal.records-open .modal-content.student-modal-content{
  scroll-behavior: smooth;
}
/* =========================================================
   Outlook quick-add card (Group screen footer)
   ========================================================= */
#groupScreen .panel--main .panel-footer{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}

.outlook-card{
  padding: 14px 14px;
}

.outlook-head{
  display:flex;
  gap:10px;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
}

.outlook-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  gap: 12px;
}

.outlook-grid input{
  width: 100%;
}

.outlook-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.outlook-hint{
  margin: 8px 0 0;
}

/* Help desk button area */
.helpdesk-wrap{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.helpdesk-hint{ margin: 0; }

/* Help desk modal content */
.helpdesk-modal{ max-width: 820px; }
.helpdesk-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.helpdesk-section{
  padding: 12px 12px 2px 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
}
.helpdesk-h{
  margin: 0 0 8px 0;
  font-size: 16px;
  letter-spacing: .02em;
}
.helpdesk-list{
  margin: 0 0 10px 18px;
  padding: 0;
  line-height: 1.45;
}
.helpdesk-list li{ margin: 6px 0; }

@media (max-width: 720px){
  .outlook-grid{ grid-template-columns: 1fr; }
}

/* Mobile tweaks */
@media (max-width: 720px){
  .modal-content.student-modal-content{
    width: 96vw;
    max-height: 90vh;
    border-radius: 18px;
  }

  .student-records-panel{
    grid-template-columns: 1fr;
  }

  .sr-link-add{
    grid-template-columns: 1fr;
  }

  #modalGroupName{
    white-space: normal;
    text-align: right;
  }
}
/* Hide behaviour chips when viewing Student Records */
.student-modal-content.records-open .note-type-row,
.student-modal-content.records-open .custom-links-block {
  display: none !important;
}
/* Fix for dashed file upload box */
.sr-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  padding: 16px;
  transition: all 0.2s ease;
}

.sr-dropzone:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.3);
}
.student-records-panel{
  /* visibility controlled via #studentModal.records-open */
  margin-top: 16px;
  padding-top: 0;
}

/* =========================================================
   FIX — Student Records panel should NOT sit under behaviour
   Controlled by JS via: studentModal.classList.add("records-open")
   ========================================================= */
#studentModal .student-records-panel{
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 980px;
  margin: 16px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#studentModal.records-open .student-records-panel{
  display: grid;
}

/* hard override: if JS adds .hidden, it must win */
#studentModal .student-records-panel.hidden{
  display: none !important;
}

/* make the dropzone a proper centred rectangle */
#studentModal .sr-dropzone{
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;
}
/* Hide behaviour chips in special modal modes */
.student-modal-content.links-editing #quickTagsRow,
.student-modal-content.records-open #quickTagsRow {
  display: none !important;
}
.sr-actions {
  text-align: right;
  margin: 10px 0 6px;
}

#srExportBtn {
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 500;
  transition: background 0.2s ease;
}

#srExportBtn:hover {
  background: #b98b31;
}
/* Eunomia Storage Meter */
.sr-storage {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.sr-storage-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 4px;
}

.sr-storage-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), #f0a13b);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.sr-storage-text {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}


/* =========================================================
   Eunomia — Records Export page (calm, minimal additions)
   ========================================================= */
.export-bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
  justify-content:space-between;
}
.export-controls{ min-width: 220px; flex: 1 1 220px; }
.export-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.export-list{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.export-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  cursor:pointer;
}
.export-row:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,0.10); }
.export-row input{ transform:scale(1.2); }
.export-row-text{ min-width:0; }
.export-row-name{ font-weight:800; }
.export-row-meta{ font-size:0.84rem; color:var(--muted); margin-top:2px; }

.export-ul{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.export-ul li{ margin:6px 0; }

.export-overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(20,20,20,0.28);
  backdrop-filter: blur(3px);
  z-index:9999;
}
.export-overlay.hidden{ display:none !important; }
.export-overlay-card{
  width:min(520px, calc(100% - 34px));
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.10);
  border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,0.22);
  padding:18px 18px;
}
.export-overlay-title{ font-weight:900; font-size:1.05rem; }
.export-overlay-sub{ margin-top:6px; color:var(--muted); font-size:0.92rem; }

/* Make the Student Records action row wrap nicely with extra buttons */
.student-records-panel .sr-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}


/* =========================================================
   Timetable hooks (Hub top bar + buttons)
   ========================================================= */
.topbar-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.euno-tt-msg{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;              /* was 6px 10px */
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.72);
  color:var(--muted);

  font-size:clamp(13px, 1.2vw, 16px);  /* was 12px */
  line-height:1.2;                     /* was 1 */
  
  max-width:520px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}


/* Qualification Trackers teaser — deliberately prominent, full-width banner
   rather than a small utility button (see openTrackerScreenBtn). */
.tracker-teaser-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:14px;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(200,155,57,0.14), rgba(200,155,57,0.05));
  border:1.5px solid #c89b39;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.tracker-teaser-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(200,155,57,0.25);
}
.tracker-teaser-icon{ font-size:28px; flex:0 0 auto; }
.tracker-teaser-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.tracker-teaser-title{ font-weight:800; font-size:1.05rem; }
.tracker-teaser-sub{ font-size:0.82rem; opacity:0.75; }
.tracker-teaser-badge{
  flex:0 0 auto;
  background:#c89b39;
  color:#fff;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
}

.tt-actions-row{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tt-hint{
  margin-top:8px;
}

@media (max-width: 720px){
  .topbar-right{ align-items:flex-start; }
  .euno-tt-msg{ max-width:100%; }
}



/* ---------------------------------------------------------------------------
   Decorative corner GIF (panel headers)
--------------------------------------------------------------------------- */
.panel-header{ position: relative; }

.panel-corner-gif{
  position:absolute;
  top:18px;
  right:18px;
  width:96px;
  height:96px;
  opacity:0.95;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.14));
}

@media (max-width: 720px){
  .panel-corner-gif{ width:72px; height:72px; top:14px; right:14px; }
}

@media (prefers-reduced-motion: reduce){
  .panel-corner-gif{ display:none; }
}


/* ---------------------------------------------------------------------------
   Student modal decorative video (top-right)
   - Use WebM w/ alpha for transparent backgrounds.
--------------------------------------------------------------------------- */
.student-modal-art-wrap{
  position:absolute;
  top:78px;          /* below the modal header */
  right:40px;

  width:260px;
  height:200px;

  border-radius:18px;
  overflow:hidden;

  pointer-events:none;
  user-select:none;

  /* no background — let WebM alpha show through */
  background:transparent;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,0.16));
}

.student-modal-art-video{
  width:100%;
  height:100%;
  display:block;
  background:transparent;

  /* 'contain' shows whole animation; swap to 'cover' if you want it to fill */
  object-fit:contain;
}

@media (max-width: 980px){
  .student-modal-art-wrap{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .student-modal-art-wrap{ display:none; }
}


/* ---------------------------------------------------------------------------
   Decorative animation in Admin "Groups" panel header
   NOTE: If your GIF has a black background, 'screen' blend hides it on light UI.
--------------------------------------------------------------------------- */
.admin-header-art{
  position:absolute;
  top:14px;
  right:26px;

  z-index:2;

  width:160px;
  height:auto;

  opacity:0.9;
  pointer-events:none;
  user-select:none;
  

  /* NOTE: avoid mix-blend-mode here — it can "vanish" light GIFs on white panels */
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.14));
}
.admin-header-art{
  opacity: 0.85;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}
.admin-header-art{
  /* existing positioning stuff stays the same */
  opacity: 0.85;

  /* warm it up + kill the blue a bit */
  filter:
    sepia(0.35)
    saturate(0.85)
    hue-rotate(-12deg)
    brightness(1.05)
    contrast(1.02)
    drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}


/* Keep it calm on smaller screens */
@media (max-width: 900px){
  .admin-header-art{ width:120px; right:14px; top:12px; }
}

/* Respect Reduce Motion users */
@media (prefers-reduced-motion: reduce){
  .admin-header-art{ display:none; }
}
/* =========================================================
   Eunomia — Theme system (Light/Dark) — OVERRIDE LAYER
   Paste at VERY END of adaptionstyle.css
   Uses: <html data-theme="light|dark">
   ========================================================= */

:root{
  /* Let the browser theme scrollbars/form controls properly */
  color-scheme: light;

  /* Semantic tokens (light defaults map to your existing look) */
  --e-surface-0: rgba(255,255,255,0.92);   /* main panel face */
  --e-surface-1: rgba(255,255,255,0.82);   /* sub-panels */
  --e-surface-2: rgba(255,255,255,0.70);   /* footers/soft bars */
  --e-paper: #fffcf5;                      /* textarea paper */
  --e-control-bg: #ffffff;
  --e-control-text: #333;
  --e-control-border: rgba(0,0,0,0.15);

  --e-btn-bg: #f8f3eb;
  --e-btn-bg-hover: #f2eade;
  --e-btn-text: var(--ink);
  --e-btn-border: rgba(0,0,0,0.12);

  --e-badge-bg: rgba(255,255,255,0.80);
  --e-badge-text: #333;

  --e-overlay-tint: rgba(255,248,240,0.60); /* office/classroom overlay */
  --e-modal-bg: rgba(255,255,255,0.92);

  /* Tip/help tokens (used by your help injector if you swap to vars) */
  --tip-bg: rgba(248,246,241,0.98);
  --tip-text: var(--ink);
  --tip-border: rgba(200,155,57,0.45);
  --tip-shadow: 0 10px 25px rgba(0,0,0,0.25);

  /* Toast tokens */
  --e-toast-bg: #fff7ed;
  --e-toast-text: #92400e;
  --e-toast-border: rgba(248,196,113,0.8);
}

/* -------------------- Dark theme flips tokens -------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;

  /* Flip your existing core tokens too (big win because you already use them) */
  --bg-top: #0f1115;
  --bg-bottom: #0b0d10;

  --panel: rgba(22,24,29,0.78);
  --panel-solid: #14171c;

  --ink: #e7e7e7;
 --muted: rgba(231,231,231,0.82);


  --border: rgba(255,255,255,0.12);
  --border-soft: rgba(255,255,255,0.08);

  --shadow-soft: 0 10px 26px rgba(0,0,0,0.50);
  --shadow-card: 0 16px 44px rgba(0,0,0,0.60);
  --shadow-lift: 0 20px 52px rgba(0,0,0,0.68);

  /* Semantic tokens (dark) */
  --e-surface-0: rgba(20,23,28,0.92);
  --e-surface-1: rgba(20,23,28,0.82);
  --e-surface-2: rgba(20,23,28,0.70);

  --e-paper: rgba(18,20,26,0.95);
  --e-control-bg: rgba(18,20,26,0.92);
  --e-control-text: var(--ink);
  --e-control-border: rgba(255,255,255,0.14);

  --e-btn-bg: rgba(26,30,37,0.92);
  --e-btn-bg-hover: rgba(32,36,44,0.95);
  --e-btn-text: var(--ink);
  --e-btn-border: rgba(255,255,255,0.14);

  --e-badge-bg: rgba(20,23,28,0.80);
  --e-badge-text: var(--ink);

  --e-overlay-tint: rgba(0,0,0,0.55);
  --e-modal-bg: rgba(20,23,28,0.92);

  --tip-bg: rgba(26,28,34,0.98);
  --tip-text: var(--ink);
  --tip-border: rgba(200,155,57,0.30);
  --tip-shadow: 0 14px 35px rgba(0,0,0,0.70);

  --e-toast-bg: rgba(26,28,34,0.95);
  --e-toast-text: var(--ink);
  --e-toast-border: rgba(200,155,57,0.28);
}

/* =========================================================
   Map existing UI to semantic tokens (override hard-coded bits)
   ========================================================= */

/* Background overlay tint */
.office-bg::before,
.classroom-bg::before{ background: var(--e-overlay-tint) !important; }

/* Panels */
.panel{
  background: linear-gradient(180deg, var(--e-surface-0), var(--e-surface-1)) !important;
  border-color: var(--border-soft) !important;
}
.panel-header{
  background: linear-gradient(180deg, var(--e-surface-0), var(--e-surface-2)) !important;
  border-bottom-color: var(--border-soft) !important;
}
.panel-footer{
  background: var(--e-surface-2) !important;
  border-top-color: var(--border-soft) !important;
}
.subpanel{
  background: linear-gradient(180deg, var(--e-surface-1), var(--e-surface-2)) !important;
  border-color: var(--border-soft) !important;
}
.subpanel-title{ color: color-mix(in srgb, var(--ink) 88%, transparent) !important; }

/* Buttons */
.btn{
  background: var(--e-btn-bg) !important;
  color: var(--e-btn-text) !important;
  border-color: var(--e-btn-border) !important;
}
.btn:hover{ background: var(--e-btn-bg-hover) !important; }
.btn.primary{
  /* keep your gold identity but ensure contrast in dark */
  background: color-mix(in srgb, var(--gold-soft) 88%, var(--e-btn-bg)) !important;
  color: color-mix(in srgb, #8a5204 30%, var(--ink)) !important;
}

/* Inputs */
input[type="text"], select, textarea{
  background: var(--e-control-bg) !important;
  color: var(--e-control-text) !important;
  border-color: var(--e-control-border) !important;
}
textarea{ background: var(--e-paper) !important; }

/* Cards / badges / edit bubbles */
.student-card{
  background: var(--panel-solid) !important;
  border-color: var(--border-soft) !important;
}
.student-last-note{ color: color-mix(in srgb, var(--ink) 70%, transparent) !important; }

.student-badge{
  background: var(--e-badge-bg) !important;
  color: var(--e-badge-text) !important;
  border: 1px solid var(--border-soft);
}

.student-card .student-edit{
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-soft);
}

/* Modal */
.modal-backdrop{ background: rgba(0,0,0,0.55) !important; }
.modal-content,
.modal-content.student-modal-content{
  background: var(--e-modal-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--ink) !important;
}

/* Student Records bits that were hard-coded white */
.student-records-panel,
.custom-links-editor,
.qle-card,
.sr-card,
.sr-row,
.sr-file-row{
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent) !important;
  border-color: var(--border-soft) !important;
}

/* Dropzone */
.sr-dropzone{
  background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
  border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
}
.sr-dropzone.dragover{
  border-color: rgba(200,155,57,0.80) !important;
}

/* Toast */
.toast{
  background: var(--e-toast-bg) !important;
  color: var(--e-toast-text) !important;
  border-color: var(--e-toast-border) !important;
}

/* Clock chip + timetable message chips */
.euno-clock,
.euno-tt-msg{
  background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
  border-color: var(--border-soft) !important;
  color: var(--muted) !important;
}

/* “Empty shortcut” tooltip (so it doesn't glow weirdly in dark) */
.desk-link-wrapper.empty::before,
.desk-link-wrapper.empty::after{
  background: color-mix(in srgb, var(--panel-solid) 85%, transparent) !important;
  color: var(--ink) !important;
  border-color: var(--border-soft) !important;
}

/* =========================================================
   Extra dark-mode coverage (Hub-wide bits not using tokens yet)
   ========================================================= */

/* Toggle button itself should match theme */
#themeToggleBtn{
  background: var(--e-btn-bg) !important;
  color: var(--e-btn-text) !important;
  border-color: var(--e-btn-border) !important;
}

/* Chips / tags */
.chip,
.preset-chip{
  background: var(--e-btn-bg) !important;
  color: var(--ink) !important;
  border-color: var(--e-btn-border) !important;
}
.chip.active{
  background: color-mix(in srgb, var(--gold) 28%, var(--e-btn-bg)) !important;
  border-color: color-mix(in srgb, var(--gold) 40%, var(--e-btn-border)) !important;
  color: var(--ink) !important;
}

/* Quick-link buttons inside modal */
.custom-link-btn{
  background: color-mix(in srgb, var(--gold) 22%, var(--e-btn-bg)) !important;
  color: var(--ink) !important;
}

/* Admin/Desk shortcut cogs */
.admin-link-cog,
.desk-link-cog{
  background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
  color: var(--ink) !important;
  border-color: var(--border-soft) !important;
}

/* Empty shortcut cards should not glow beige in dark */
:root[data-theme="dark"] .admin-link-wrapper.empty .admin-link-btn,
:root[data-theme="dark"] .desk-link-wrapper.empty .desk-link-btn{
  background: rgba(26,28,34,0.88) !important;
  color: var(--muted) !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
}

/* Soft message bubble */
.soft-msg{
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent) !important;
  color: var(--ink) !important;
  border-color: var(--border-soft) !important;
}

/* Student screen wrapper tint */
#studentScreen{
  background-color: color-mix(in srgb, var(--panel-solid) 55%, transparent) !important;
}

/* Student header pills */
#studentScreen #backHomeBtn,
#studentScreen [data-session-status]{
  background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
  color: var(--ink) !important;
  border-color: var(--border-soft) !important;
}

/* Export overlay */
.export-overlay-card{
  background: var(--e-modal-bg) !important;
  border-color: var(--border-soft) !important;
  color: var(--ink) !important;
}

/* Scrollbars (nice on Chromium + Firefox) */
:root[data-theme="dark"]{
  scrollbar-color: rgba(200,155,57,0.55) rgba(255,255,255,0.08);
}
/* =========================================================
   READABILITY PATCH — Dark mode stragglers (Hub)
   Paste at VERY END of adaptionstyle.css
   ========================================================= */

/* Admin inner cards were still "light" in dark mode */
:root[data-theme="dark"] .control-card--flat{
  background: rgba(20,23,28,0.78) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55) !important;
}

:root[data-theme="dark"] .control-card--flat .label-top,
:root[data-theme="dark"] .control-card--flat .hint,
:root[data-theme="dark"] .control-card--flat small{
  color: rgba(231,231,231,0.72) !important;
}
/* Primary buttons need real contrast in dark mode */
:root[data-theme="dark"] .btn.primary{
  background: rgba(200,155,57,0.95) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: #1b1b1b !important;
}
:root[data-theme="dark"] .btn.primary:hover{
  filter: brightness(1.05);
}

/* Disabled buttons shouldn't become unreadable */
:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .btn[disabled]{
  opacity: 1 !important;
  background: rgba(26,28,34,0.70) !important;
  color: rgba(231,231,231,0.45) !important;
  border-color: rgba(255,255,255,0.12) !important;
  cursor: not-allowed;
}
:root[data-theme="dark"] .euno-footer-line{
  color: rgba(231,231,231,0.72) !important;
}
:root[data-theme="dark"] .euno-footer-sub{
  color: rgba(231,231,231,0.52) !important;
}
/* =========================================================
   FIX: Dark mode primary buttons (Admin bar readability)
   Paste at VERY END of adaptionstyle.css
   ========================================================= */

:root[data-theme="dark"] .btn.primary{
  /* deeper warm gold so it reads on dark panels */
  background: color-mix(in srgb, var(--gold) 62%, rgba(26,30,37,0.92)) !important;
  border-color: rgba(255,255,255,0.14) !important;

  /* dark text on gold = high contrast */
  color: #1f2933 !important;
}

:root[data-theme="dark"] .btn.primary:hover{
  filter: brightness(1.05) !important;
}
/* =========================================================
   FIX: Laptop-friendly scrolling for Student Screen (desktop)
   Paste at VERY END of adaptionstyle.css
   ========================================================= */
@media (min-width: 1024px){
  #studentScreen{ height:auto !important; }
  .panel--students{ height:auto !important; }

  /* Let content size naturally; page/screen scroll handles it */
  .student-canvas{
    overflow: visible !important;
    padding: 2px !important;
  }

  /* Keep your background screens scrollable */
  .office-bg,
  .classroom-bg{
    overflow-y: auto !important;
  }
}
/* FORCE full-screen classroom background (no tiling, no small image) */
.classroom-bg{
  background-image:url("assets/classroom-bg.png");
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
}
#adminBackBtn {
  position: absolute;
  left: 12px;
  top: 14px;
  background: var(--panel-bg, #f8f6f1);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
#adminBackBtn:hover {
  background: var(--btn-hover, #f0ede8);
}


/* ILP comment management (per learner) */
.ilp-list{
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.72);
  border-radius:14px;
  padding:10px;
}
.ilp-item{
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.78);
  border-radius:12px;
  padding:10px;
  margin:10px 0;
}
.ilp-item-meta{
  font-size:0.82rem;
  color:var(--muted);
  font-weight:700;
  margin-bottom:6px;
}
.ilp-item-text{
  white-space:pre-wrap;
  font-size:0.92rem;
  line-height:1.35;
}
.ilp-item-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}


/* -------------------- License footer line -------------------- */
.license-footer-line{
  font-size:0.82rem;
  opacity:0.85;
  margin-top:6px;
}

/* ---------------------------------------------------------------------------
   ONBOARDING / TUTORIAL (restored)
   --------------------------------------------------------------------------- */
.onboard-modal.hidden,
.onboard-overlay.hidden,
.onboard-next.hidden{ display:none !important; }

.onboard-modal{
  position:fixed; inset:0;
  z-index: 10050;
  display:grid;
  place-items:center;
}
.onboard-backdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.50);
  backdrop-filter: blur(6px);
}
.onboard-card{
  position:relative;
  width:min(520px, calc(100vw - 28px));
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
}
html[data-theme="dark"] .onboard-card{
  background: rgba(20,23,28,.92);
  border-color: rgba(255,255,255,.12);
}
.onboard-hd .onboard-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(200,155,57,.16);
  border: 1px solid rgba(200,155,57,.28);
  font-weight: 800;
  font-size: 12px;
}
.onboard-hd h2{
  margin: 10px 0 6px;
  font-size: 18px;
}
.onboard-sub{
  margin:0;
  opacity:.85;
  font-size: 13px;
}
.onboard-list{ margin: 14px 0 10px; }
.onboard-li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
}
html[data-theme="dark"] .onboard-li{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.onboard-note{
  margin: 8px 0 0;
  font-size: 12px;
  opacity:.8;
}
.onboard-ft{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 14px;
}

/* step overlay */
.onboard-overlay{
  position:fixed;
  left: 14px;
  bottom: 14px;
  z-index: 10040;
}
.onboard-step{
  width: min(420px, calc(100vw - 28px));
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(0,0,0,.20);
  padding: 14px 14px 12px;
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .onboard-step{
  background: rgba(20,23,28,.92);
  border-color: rgba(255,255,255,.12);
}
.onboard-step-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.onboard-step-title{
  font-weight: 900;
  font-size: 14px;
}
.onboard-x{
  border:none;
  background: transparent;
  font-size: 16px;
  cursor:pointer;
  opacity:.7;
}
.onboard-x:hover{ opacity: 1; }
.onboard-step-body{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .92;
  white-space: pre-line;
}
.onboard-step-actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
}
.onboard-step-hint{
  margin-top: 8px;
  font-size: 11px;
  opacity: .75;
}

/* highlight target */
.euno-tut-target{
  position: relative;
  z-index: 10041;
  outline: 3px solid rgba(200,155,57,.40);
  box-shadow: 0 0 0 6px rgba(200,155,57,.12);
  border-radius: 16px;
}
.euno-tut-pulse{
  animation: eunoTutPulse 1.25s ease-in-out infinite;
}
@keyframes eunoTutPulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}

/* Next step button */
.onboard-next{
  position:fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10030;
  border: 1px solid rgba(200,155,57,.35);
  background: linear-gradient(135deg, rgba(200,155,57,.20), rgba(255,231,199,.78));
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.onboard-next:hover{ transform: translateY(-1px); }
.onboard-next:active{ transform: translateY(0px); }

/* ------------------------------------------------------------------
   Timetable: Today's Schedule card (auto positions within header)
   ------------------------------------------------------------------ */
.tt-today-card{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tt-today-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-today-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.tt-today-empty{ margin: 8px 0 0; }

.tt-slot{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}
.tt-slot .bar{
  width: 6px;
  height: 34px;
  border-radius: 999px;
  background: rgba(200,155,57,.9);
  flex: 0 0 auto;
}
.tt-slot .meta{
  flex: 1 1 auto;
  min-width: 0;
}
.tt-slot .time{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
}
.tt-slot .label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,0.82);
  margin-top: 2px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-slot.is-now{
  border-color: rgba(200,155,57,0.45);
  box-shadow: 0 14px 34px rgba(200,155,57,0.14);
  transform: translateY(-1px);
}
.tt-slot.is-next{
  border-color: rgba(0,0,0,0.10);
}
.tt-slot.is-done{
  opacity: 0.5;
}
.tt-slot.is-done .time,
.tt-slot.is-done .label{
  text-decoration: line-through;
}

/* Gentle ripple when the next lesson is within 10 minutes — a slow,
   soft pulse, not a flashing alert. Respects reduced-motion. */
.tt-slot.is-soon{
  position: relative;
  border-color: rgba(200,155,57,0.5);
}
@media (prefers-reduced-motion: no-preference){
  .tt-slot.is-soon::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: tt-ripple-pulse 2.6s ease-out infinite;
  }
}
@keyframes tt-ripple-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(200,155,57,0.32); }
  70%  { box-shadow: 0 0 0 12px rgba(200,155,57,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,155,57,0); }
}

/* =========================================================
   Timetable-style visual unifier (v10+)
   Goal: make the whole hub match the Schedule Wizard look
   while keeping all mechanics/layout intact.
   ========================================================= */

:root{
  --bg-top:#f8f3ea;
  --bg-bottom:#efe7d9;

  --panel:rgba(255,255,255,0.90);
  --panel-solid:#ffffff;

  --ink:#111827;
  --muted:#6b7280;

  --border:rgba(17,24,39,.12);
  --border-soft:rgba(17,24,39,.10);

  --r-xl:28px;
  --r-lg:22px;
  --r-md:18px;
  --r-sm:14px;

  --shadow-soft:0 12px 30px rgba(15,23,42,.10);
  --shadow-card:0 22px 60px rgba(15,23,42,.12);
  --shadow-lift:0 26px 70px rgba(15,23,42,.16);

  --focus:0 0 0 3px rgba(200,155,57,.35);
}

body{
  background: linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

/* Make the workspace feel like one coherent "card system" */
.panel{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(10px);
}

.panel-header{
  padding: 20px 22px 14px !important;
}

.panel-title{
  font-size: clamp(18px, 1.2vw + 14px, 24px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

.panel-subtitle,
.hint,
.session-status,
.brand-sub,
.euno-clock-date{
  color: var(--muted) !important;
}

.panel-body{ padding: 0 22px 18px !important; }
.panel-footer{ padding: 0 22px 18px !important; }

/* Buttons: match timetable (black primary, soft ghost) */
.btn{
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.70) !important;
  color: rgba(17,24,39,.78) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  transition: transform .12s ease, background .12s ease, box-shadow .15s ease, filter .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.88) !important; }
.btn:active{ transform: scale(.985); }

.btn.primary{
  border: none !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  letter-spacing: .06em;
}
.btn.primary:hover{ filter: brightness(1.02); }

.btn.small{
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* Inputs: clean, readable, timetable focus ring */
input, select, textarea{
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  font-weight: 650 !important;
  color: var(--ink) !important;
  background: rgba(255,255,255,.92) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  box-shadow: var(--focus) !important;
  border-color: rgba(200,155,57,.55) !important;
}

/* Cards/tiles inside panels */
.tile, .student-card, .admin-card, .quick-card, .mini-card, .slot, .tt-slot{
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
}

/* Improve readability for dense areas */
.panel-body--scroll{
  scrollbar-gutter: stable;
}

/* Modal polish to match */
.modal, .modal-card, .modal-panel, #studentModal .modal-content{
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lift) !important;
}

/* Ensure the app isn't "tiny" on desktop */
.app-shell{
  max-width: 1500px;
  padding: 20px;
}

@media (min-width: 1200px){
  .workspace-grid{ gap: 18px; }
}

/* -------------------------------------------------------------------------
   Language selector (minimal, non-invasive)
   ------------------------------------------------------------------------- */
.lang-wrap{
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
.lang-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
html[dir="rtl"] .workspace-topbar,
html[dir="rtl"] .panel-header,
html[dir="rtl"] .panel-body,
html[dir="rtl"] .panel-footer{
  direction: rtl;
}



/* ===== TutorFlow premium clean base overrides ===== */
:root{
  --bg-top:#cfd5df;
  --bg-bottom:#bcc6d4;
  --panel:rgba(255,255,255,0.82);
  --panel-solid:rgba(255,255,255,0.9);
  --ink:#0f1720;
  --muted:#5f6c79;
  --border:rgba(74,86,102,0.18);
  --border-soft:rgba(74,86,102,0.14);
  --shadow-soft:0 10px 28px rgba(59,72,89,0.10);
  --shadow-card:0 18px 38px rgba(59,72,89,0.14);
  --r-xl:22px; --r-lg:18px; --r-md:14px; --r-sm:12px;
  --tf-accent:#87d8d0;
}
body{background:linear-gradient(180deg,#ccd4df 0%,#bec8d6 100%);}
.app-shell{max-width:1600px;padding:20px 22px 26px;}
.office-bg,.classroom-bg,.tf-surface,.tf-surface--student{background:none !important;}
.office-bg::before,.classroom-bg::before,.tf-surface::before,.tf-surface--student::before{display:none !important;}
#introScreen{display:none !important;}
.workspace-topbar{padding:10px 6px 18px;align-items:flex-start;}
.workspace-topbar--group{display:grid;grid-template-columns:260px 220px 1fr;gap:18px;align-items:start;}
.tf-brand-lockup,.tf-clock,.topbar-right{background:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.64));backdrop-filter:blur(8px);border:1.5px solid rgba(96,109,124,0.18);box-shadow:0 12px 28px rgba(59,72,89,0.10);border-radius:22px;}
.tf-brand-lockup{padding:18px 20px;min-height:92px;align-items:flex-start;}
.tf-brand-logo{width:48px;height:48px;border-radius:14px;box-shadow:none;background:transparent;}
.brand-title{font-size:1.5rem;font-weight:800;letter-spacing:-0.02em;}
.brand-sub{font-size:0.95rem;color:var(--muted);margin-top:4px;}
.tf-clock{padding:18px 20px;min-height:92px;justify-content:center;}
.euno-clock-time{font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1;}
.euno-clock-date{font-size:0.96rem;color:#4d5a68;margin-top:8px;}
.topbar-right{padding:14px 16px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-height:92px;}
.topbar-right .lang-wrap{margin:0;}
.lang-select{appearance:none;border:1.5px solid rgba(96,109,124,0.18);background:rgba(255,255,255,0.85);padding:10px 14px;border-radius:14px;font-weight:700;color:#233141;}
#eunoTimetableMsg,.session-status{background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;font-size:0.95rem;color:#5b6876;text-align:right;}
.workspace-grid--groups{grid-template-columns:minmax(760px,1fr) 360px !important;gap:18px;padding:0 6px 18px;}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.70));backdrop-filter:blur(10px);border:1.5px solid rgba(96,109,124,0.18);box-shadow:0 14px 34px rgba(59,72,89,0.11);}
.panel-header{background:transparent;border-bottom:none;padding:18px 18px 10px;}
.panel-header::after{display:none;}
.panel-title{font-size:1.9rem;line-height:1.05;letter-spacing:-0.03em;color:#101820;margin:0 0 8px;}
.hint{font-size:0.95rem;color:#61707d;}
.tt-actions-row{margin-top:16px;}
.btn,.btn.small,.btn.primary,.btn.ghost,.btn.danger{border-radius:14px;border:1.5px solid rgba(96,109,124,0.18);background:rgba(255,255,255,0.86);color:#19232e;font-weight:700;box-shadow:0 6px 16px rgba(59,72,89,0.06);}
.btn.primary{background:linear-gradient(180deg,#9fe3dc,#86d7d0);border-color:rgba(113,196,188,0.7);}
.btn.wide{width:auto;min-width:180px;}
#openAdminBtn{margin-top:12px;}
.panel-corner-gif,.admin-header-art,.student-modal-art-wrap,.intro-wrap,.intro-video,.intro-caption{display:none !important;}
.panel-body{padding:0 18px 18px;}
.panel-body--scroll{overflow:auto;}
#groupGrid.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
#groupGrid .student-card, #groupGrid .student-tile, #groupGrid > button, #groupGrid > .btn, #groupGrid > div{background:linear-gradient(180deg,rgba(255,255,255,0.86),rgba(255,255,255,0.72));border:1.5px solid rgba(96,109,124,0.16);border-radius:16px;box-shadow:0 8px 22px rgba(59,72,89,0.08);padding:14px;}
.panel-footer{padding:0 18px 18px;border-top:none;background:transparent;}
.control-card--flat,.control-card,.tt-today-card,.helpdesk-wrap{background:linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,255,255,0.70));border:1.5px solid rgba(96,109,124,0.16);border-radius:18px;box-shadow:0 10px 24px rgba(59,72,89,0.08);}
.outlook-card{padding:10px 14px;}
.outlook-head{display:none;}
.outlook-hint{display:none;}
.outlook-grid{display:flex;gap:8px;align-items:center;margin-top:0;flex-wrap:nowrap;}
.outlook-grid > div{flex:1;min-width:0;}
.outlook-grid .label-top{display:none;}
.outlook-grid input{padding:7px 10px;font-size:0.82rem;}
.outlook-actions{margin-top:8px;gap:8px;}
.outlook-actions .btn{padding:7px 12px;font-size:0.82rem;}
.outlook-grid input,.lang-select,select,input,textarea{background:rgba(255,255,255,0.82);border:1.5px solid rgba(96,109,124,0.18);border-radius:14px;padding:10px 12px;color:#17202c;}
.helpdesk-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;margin-top:12px;}
.helpdesk-hint{margin:0 0 0 12px;}
.panel--side .panel-header{padding-bottom:8px;}
.desk-links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.desk-link, .desk-link-btn, [data-desk-links-grid] > *{min-height:58px;border-radius:14px;border:1.5px solid rgba(96,109,124,0.14);box-shadow:0 8px 18px rgba(59,72,89,0.06);}
.footer-actions{display:flex;gap:10px;justify-content:center;margin-bottom:12px;}
.euno-footer{padding:8px 0 0;text-align:center;color:#6b7580;}
#homeScreen .brand-title,#homeScreen .brand-sub{font-size:inherit;}
#homeScreen .workspace-topbar,#studentScreen .workspace-topbar{padding:10px 6px 16px;}
.student-header--desktop{background:transparent;border:none;padding:0 0 16px;}
.student-canvas{background:transparent;}
.modal-content{background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.82));backdrop-filter:blur(10px);border:1.5px solid rgba(96,109,124,0.18);box-shadow:0 18px 40px rgba(59,72,89,0.16);}
@media (max-width: 1100px){.workspace-topbar--group{grid-template-columns:1fr;}.topbar-right{align-items:flex-start;}.workspace-grid--groups{grid-template-columns:1fr !important;}}


/* pass 22: premium logo + analogue clock */
.workspace-topbar--group{grid-template-columns:300px 320px 1fr;gap:22px;align-items:start;}
.tf-brand-lockup--stacked{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px 22px;min-height:148px;}
.tf-brand-logo--hero{
  width:132px;
  height:132px;
  max-width:100%;
  object-fit:contain;
  display:block;
  border-radius:32px;
  padding:14px;
  background:radial-gradient(circle at 30% 0,rgba(255,255,255,0.98),rgba(255,255,255,0.9));
  box-shadow:0 18px 40px rgba(15,23,42,0.22);
  border:2px solid rgba(148,163,184,0.6);
}
.brand-text--stacked{margin-top:18px;}
.tf-brand-lockup--stacked .brand-title{font-size:2rem;line-height:1.05;}
.tf-brand-lockup--stacked .brand-sub{font-size:1.02rem;line-height:1.3;max-width:14ch;}
.tf-clock{padding:18px 20px;min-height:148px;display:flex;align-items:center;gap:18px;justify-content:flex-start;}
.clock-face{width:124px;height:124px;border-radius:50%;position:relative;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.98),rgba(255,255,255,0.82));border:2px solid rgba(96,109,124,0.20);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 8px 18px rgba(59,72,89,0.06);flex:0 0 auto;}
.clock-face::before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px dashed rgba(96,109,124,0.16);}
.clock-center{position:absolute;left:50%;top:50%;width:12px;height:12px;background:#ff8d2e;border:2px solid #1a2230;border-radius:50%;transform:translate(-50%,-50%);z-index:4;}
.clock-hand{position:absolute;left:50%;top:50%;transform-origin:bottom center;border-radius:999px;z-index:3;}
.clock-hand--hour{width:6px;height:34px;background:#1a2230;transform:translate(-50%,-100%) rotate(0deg);}
.clock-hand--minute{width:4px;height:46px;background:#303a46;transform:translate(-50%,-100%) rotate(0deg);}
.clock-hand--second{width:2px;height:52px;background:#ff8d2e;transform:translate(-50%,-100%) rotate(0deg);}
.clock-num{position:absolute;font-weight:800;color:#1e2734;font-size:1.35rem;line-height:1;}
.clock-num--12{top:10px;left:50%;transform:translateX(-50%);}
.clock-num--3{right:12px;top:50%;transform:translateY(-50%);}
.clock-num--6{bottom:10px;left:50%;transform:translateX(-50%);}
.clock-num--9{left:12px;top:50%;transform:translateY(-50%);}
.clock-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;}
.euno-clock-time{font-size:2.25rem;font-weight:800;letter-spacing:-0.04em;line-height:1.02;}
.euno-clock-date{font-size:1rem;color:#4d5a68;margin-top:8px;}
.euno-clock-label{margin-top:10px;font-size:0.95rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#677585;}
@media (max-width:1200px){
  .workspace-topbar--group{grid-template-columns:1fr;}
  .tf-clock{min-height:auto;}
}

/* =========================================================
   Teacher Flow – viral skins (final override)
   - Base: calm light
   - Themes via html[data-tf-theme]
   - Accent + density via html[data-tf-accent], html[data-tf-density]
   ========================================================= */

html{
  --tf-accent: #2563eb;
  --tf-accent-soft: rgba(37,99,235,0.12);
}

html[data-tf-accent="sky"]{
  --tf-accent:#2563eb;
  --tf-accent-soft:rgba(37,99,235,0.12);
}

html[data-tf-accent="mint"]{
  --tf-accent:#059669;
  --tf-accent-soft:rgba(5,150,105,0.12);
}

html[data-tf-accent="amber"]{
  --tf-accent:#d97706;
  --tf-accent-soft:rgba(217,119,6,0.12);
}

html[data-tf-accent="rose"]{
  --tf-accent:#e11d48;
  --tf-accent-soft:rgba(225,29,72,0.14);
}

body{
  background:
    radial-gradient(circle at top left, rgba(191,219,254,0.9) 0%, transparent 55%),
    radial-gradient(circle at bottom right, rgba(167,243,208,0.9) 0%, transparent 52%),
    linear-gradient(180deg,#f9fafb,#eef2ff);
  color:#0f172a;
}

.app-shell{
  max-width:1500px;
  padding:22px 24px 26px;
}

.workspace-topbar--group{
  gap:18px;
}

.tf-brand-lockup,
.tf-clock,
.topbar-right{
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:0 22px 52px rgba(15,23,42,0.14);
}

.tf-brand-lockup--stacked .brand-title{
  font-size:2.1rem;
  letter-spacing:-0.06em;
}

.tf-brand-lockup--stacked .brand-sub{
  font-size:1rem;
  color:#6b7280;
}

.clock-face{
  background:radial-gradient(circle at 30% 30%,#eff6ff,#dbeafe);
  border-color:rgba(148,163,184,0.7);
}

.clock-center{
  background:var(--tf-accent);
  border-color:#0f172a;
}

.clock-num{
  color:#0f172a;
}

.euno-clock-time{
  font-size:2.2rem;
  letter-spacing:-0.04em;
}

.euno-clock-date,
.euno-clock-label{
  color:#6b7280;
}

.lang-select{
  background:#f9fafb !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,0.7) !important;
}

.panel{
  background:rgba(255,255,255,0.94) !important;
  border:1px solid rgba(148,163,184,0.55) !important;
  box-shadow:0 24px 60px rgba(15,23,42,0.12) !important;
}

.panel-title{
  color:#020617 !important;
}

.hint,
.session-status,
.brand-sub{
  color:#6b7280 !important;
}

.btn{
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,0.6) !important;
  background:#f9fafb !important;
  color:#0f172a !important;
  box-shadow:0 10px 26px rgba(15,23,42,0.08) !important;
  transition:transform .14s ease, box-shadow .16s ease, background .16s ease, filter .16s ease !important;
}

.btn.primary{
  border:none !important;
  background:linear-gradient(135deg,var(--tf-accent),color-mix(in srgb,var(--tf-accent) 60%,#22c55e)) !important;
  color:white !important;
  box-shadow:0 18px 46px color-mix(in srgb,var(--tf-accent) 50%,rgba(15,23,42,0.3)) !important;
}

.btn.primary:hover{
  filter:brightness(1.04);
  transform:translateY(-1px) scale(1.01);
}

.btn:active{
  transform:translateY(0) scale(0.97);
  box-shadow:0 6px 18px rgba(15,23,42,0.3) !important;
}

input,
select,
textarea{
  background:#f9fafb !important;
  border:1px solid rgba(148,163,184,0.9) !important;
  color:#0f172a !important;
}

input:focus,
select:focus,
textarea:focus{
  box-shadow:0 0 0 1px var(--tf-accent),0 0 0 5px var(--tf-accent-soft) !important;
}

.student-card{
  background:linear-gradient(145deg,#ffffff,#eff6ff) !important;
  border:1px solid rgba(148,163,184,0.6) !important;
  box-shadow:0 14px 40px rgba(15,23,42,0.10) !important;
}

.student-card:hover{
  border-color:var(--tf-accent) !important;
  box-shadow:0 20px 60px rgba(15,23,42,0.18) !important;
}

.student-badge{
  background:var(--tf-accent-soft) !important;
  color:#0f172a !important;
  border:1px solid color-mix(in srgb,var(--tf-accent) 65%,transparent) !important;
}

.desk-link-btn,
.admin-link-btn{
  background:linear-gradient(135deg,#ffffff,#eff6ff) !important;
  border:1px solid rgba(148,163,184,0.7) !important;
  color:#0f172a !important;
  box-shadow:0 14px 40px rgba(15,23,42,0.12) !important;
}

.desk-link-wrapper.empty .desk-link-btn,
.admin-link-wrapper.empty .admin-link-btn{
  border-style:dashed !important;
  opacity:0.85;
}

.desk-link-cog,
.admin-link-cog{
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,0.7) !important;
}

.tt-today-card{
  background:#eef2ff !important;
  border:1px solid rgba(129,140,248,0.7) !important;
}

.tt-slot{
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,0.65) !important;
}

.tt-slot.is-now{
  box-shadow:0 18px 46px rgba(37,99,235,0.28) !important;
}

.modal-backdrop{
  background:rgba(15,23,42,0.35) !important;
}

.modal-content{
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,0.7) !important;
  box-shadow:0 24px 70px rgba(15,23,42,0.25) !important;
}

.helpdesk-section{
  background:#f9fafb !important;
  border:1px solid rgba(148,163,184,0.6) !important;
}

.sr-dropzone{
  background:#f9fafb !important;
  border:2px dashed color-mix(in srgb,var(--tf-accent) 65%,transparent) !important;
}

.toast,
.soft-msg{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border:1px solid rgba(148,163,184,0.8) !important;
}

.euno-footer-line{
  color:#111827 !important;
}

.euno-footer-sub{
  color:#4b5563 !important;
}

/* -------------------- Theme: Notebook -------------------- */
html[data-tf-theme="notebook"] body{
  background:
    linear-gradient(180deg,#fefce8,#fefce8);
  color:#1c1917;
}

html[data-tf-theme="notebook"] .panel{
  background:#fffbeb !important;
  border:1px solid rgba(231,158,60,0.7) !important;
  box-shadow:0 18px 40px rgba(146,64,14,0.25) !important;
}

html[data-tf-theme="notebook"] .panel-body{
  background-image:
    repeating-linear-gradient(180deg,rgba(252,211,77,0.25) 0,rgba(252,211,77,0.25) 1px,transparent 1px,transparent 18px);
}

html[data-tf-theme="notebook"] .student-card{
  background:#fffbeb !important;
  border:1px solid rgba(231,158,60,0.7) !important;
  box-shadow:0 14px 32px rgba(146,64,14,0.18) !important;
}

html[data-tf-theme="notebook"] .btn{
  background:#fff7ed !important;
  border:1px solid rgba(231,158,60,0.9) !important;
  color:#7c2d12 !important;
}

html[data-tf-theme="notebook"] .btn.primary{
  background:linear-gradient(135deg,#ea580c,#f97316) !important;
  color:#fffbeb !important;
}

html[data-tf-theme="notebook"] .desk-link-btn,
html[data-tf-theme="notebook"] .admin-link-btn{
  background:#fffbeb !important;
}

/* -------------------- Notebook: Dark mode -------------------- */
/* Activated when data-tf-theme="notebook" AND data-theme="dark" are both set */

html[data-tf-theme="notebook"][data-theme="dark"] body{
  background: linear-gradient(180deg,#1a1208,#120d04) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel{
  background: rgba(37,24,8,0.94) !important;
  border: 1px solid rgba(200,140,40,0.28) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.70) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel-header{
  background: rgba(28,17,4,0.96) !important;
  border-bottom: 1px solid rgba(200,140,40,0.18) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel-footer{
  background: rgba(24,14,3,0.92) !important;
  border-top: 1px solid rgba(200,140,40,0.18) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel-body{
  background-image: repeating-linear-gradient(
    180deg,
    rgba(180,130,30,0.10) 0,
    rgba(180,130,30,0.10) 1px,
    transparent 1px,
    transparent 18px
  ) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .student-card{
  background: rgba(37,24,8,0.96) !important;
  border: 1px solid rgba(200,140,40,0.22) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.60) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .student-card:hover{
  border-color: rgba(200,140,40,0.55) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .btn{
  background: rgba(37,24,8,0.92) !important;
  border: 1px solid rgba(200,140,40,0.50) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .btn:hover{
  background: rgba(52,33,10,0.95) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .btn.primary{
  background: linear-gradient(135deg,#c04a08,#d96012) !important;
  color: #fef3e2 !important;
  border-color: transparent !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .desk-link-btn,
html[data-tf-theme="notebook"][data-theme="dark"] .admin-link-btn{
  background: rgba(37,24,8,0.92) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.35) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel-title,
html[data-tf-theme="notebook"][data-theme="dark"] .brand-title,
html[data-tf-theme="notebook"][data-theme="dark"] .student-name,
html[data-tf-theme="notebook"][data-theme="dark"] .modal-header h2{
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .hint,
html[data-tf-theme="notebook"][data-theme="dark"] .session-status,
html[data-tf-theme="notebook"][data-theme="dark"] .brand-sub,
html[data-tf-theme="notebook"][data-theme="dark"] .label-top,
html[data-tf-theme="notebook"][data-theme="dark"] .student-last-note,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-footer-sub,
html[data-tf-theme="notebook"][data-theme="dark"] .subpanel-title,
html[data-tf-theme="notebook"][data-theme="dark"] small{
  color: rgba(245,230,200,0.62) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] input[type="text"],
html[data-tf-theme="notebook"][data-theme="dark"] select,
html[data-tf-theme="notebook"][data-theme="dark"] textarea{
  background: rgba(28,17,4,0.90) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.32) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .modal-content{
  background: rgba(28,17,4,0.97) !important;
  border-color: rgba(200,140,40,0.22) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .student-badge{
  background: rgba(200,140,40,0.16) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.32) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .student-edit{
  background: rgba(28,17,4,0.85) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.22) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .subpanel{
  background: rgba(30,19,5,0.88) !important;
  border-color: rgba(200,140,40,0.18) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .chip,
html[data-tf-theme="notebook"][data-theme="dark"] .preset-chip{
  background: rgba(37,24,8,0.92) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.38) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .chip.active{
  background: rgba(200,140,40,0.20) !important;
  border-color: rgba(200,140,40,0.60) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .euno-clock,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-tt-msg{
  background: rgba(37,24,8,0.85) !important;
  border-color: rgba(200,140,40,0.22) !important;
  color: rgba(245,230,200,0.75) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .soft-msg{
  background: rgba(50,33,10,0.90) !important;
  color: rgba(245,230,200,0.80) !important;
  border-color: rgba(200,140,40,0.30) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .toast{
  background: rgba(37,24,8,0.96) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.35) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .admin-link-cog,
html[data-tf-theme="notebook"][data-theme="dark"] .desk-link-cog{
  background: rgba(37,24,8,0.85) !important;
  color: rgba(245,230,200,0.80) !important;
  border-color: rgba(200,140,40,0.25) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .sr-card,
html[data-tf-theme="notebook"][data-theme="dark"] .sr-row,
html[data-tf-theme="notebook"][data-theme="dark"] .sr-file-row,
html[data-tf-theme="notebook"][data-theme="dark"] .qle-card,
html[data-tf-theme="notebook"][data-theme="dark"] .student-records-panel,
html[data-tf-theme="notebook"][data-theme="dark"] .custom-links-editor{
  background: rgba(37,24,8,0.90) !important;
  border-color: rgba(200,140,40,0.20) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .sr-dropzone{
  background: rgba(28,17,4,0.80) !important;
  border-color: rgba(200,140,40,0.28) !important;
}

/* Dark notebook scrollbars */
html[data-tf-theme="notebook"][data-theme="dark"]{
  scrollbar-color: rgba(200,140,40,0.40) rgba(255,255,255,0.05);
}

/* ---- Notebook dark: premium polish layer overrides ---- */
/* These selectors come from the late-stage polish rules that
   hard-code white glassmorphism — they need beating in dark mode */

html[data-tf-theme="notebook"][data-theme="dark"] .tf-brand-lockup,
html[data-tf-theme="notebook"][data-theme="dark"] .tf-clock,
html[data-tf-theme="notebook"][data-theme="dark"] .topbar-right{
  background: rgba(30,19,5,0.92) !important;
  border-color: rgba(200,140,40,0.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .brand-title{
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .brand-sub,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-clock-date,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-clock-label{
  color: rgba(245,230,200,0.58) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel{
  background: rgba(30,19,5,0.90) !important;
  border-color: rgba(200,140,40,0.20) !important;
  backdrop-filter: none !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .panel-title{
  color: #f5e6c8 !important;
}

/* Group tiles on main class picker screen */
html[data-tf-theme="notebook"][data-theme="dark"] #groupGrid .student-card,
html[data-tf-theme="notebook"][data-theme="dark"] #groupGrid .student-tile,
html[data-tf-theme="notebook"][data-theme="dark"] #groupGrid > button,
html[data-tf-theme="notebook"][data-theme="dark"] #groupGrid > .btn,
html[data-tf-theme="notebook"][data-theme="dark"] #groupGrid > div{
  background: rgba(37,24,8,0.94) !important;
  border-color: rgba(200,140,40,0.28) !important;
  color: #f5e6c8 !important;
}

/* Today's schedule card, help desk wrap, control cards */
html[data-tf-theme="notebook"][data-theme="dark"] .tt-today-card,
html[data-tf-theme="notebook"][data-theme="dark"] .helpdesk-wrap,
html[data-tf-theme="notebook"][data-theme="dark"] .control-card--flat,
html[data-tf-theme="notebook"][data-theme="dark"] .control-card{
  background: rgba(37,24,8,0.92) !important;
  border-color: rgba(200,140,40,0.20) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55) !important;
  color: #f5e6c8 !important;
}

/* Timetable slot rows inside today's schedule */
html[data-tf-theme="notebook"][data-theme="dark"] .tt-slot{
  background: rgba(45,28,8,0.90) !important;
  border-color: rgba(200,140,40,0.18) !important;
  color: #f5e6c8 !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .tt-slot .time{
  color: rgba(245,230,200,0.55) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .tt-slot .label{
  color: #f5e6c8 !important;
}

/* Inputs — the polish layer hard-codes white here too */
html[data-tf-theme="notebook"][data-theme="dark"] .outlook-grid input,
html[data-tf-theme="notebook"][data-theme="dark"] .lang-select,
html[data-tf-theme="notebook"][data-theme="dark"] select,
html[data-tf-theme="notebook"][data-theme="dark"] input,
html[data-tf-theme="notebook"][data-theme="dark"] textarea{
  background: rgba(28,17,4,0.90) !important;
  color: #f5e6c8 !important;
  border-color: rgba(200,140,40,0.30) !important;
}

/* Modal — polish layer overrides this with white glassmorphism */
html[data-tf-theme="notebook"][data-theme="dark"] .modal-content{
  background: rgba(28,17,4,0.97) !important;
  border-color: rgba(200,140,40,0.22) !important;
  backdrop-filter: none !important;
  color: #f5e6c8 !important;
}

/* Buttons — polish layer sets its own white style */
html[data-tf-theme="notebook"][data-theme="dark"] .btn,
html[data-tf-theme="notebook"][data-theme="dark"] .btn.small,
html[data-tf-theme="notebook"][data-theme="dark"] .btn.ghost{
  background: rgba(37,24,8,0.92) !important;
  border-color: rgba(200,140,40,0.45) !important;
  color: #f5e6c8 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}

html[data-tf-theme="notebook"][data-theme="dark"] .btn.primary{
  background: linear-gradient(135deg,#c04a08,#d96012) !important;
  color: #fef3e2 !important;
  border-color: transparent !important;
}

/* Desk + admin link buttons */
html[data-tf-theme="notebook"][data-theme="dark"] .desk-link,
html[data-tf-theme="notebook"][data-theme="dark"] .desk-link-btn,
html[data-tf-theme="notebook"][data-theme="dark"] [data-desk-links-grid] > *{
  background: rgba(37,24,8,0.92) !important;
  border-color: rgba(200,140,40,0.28) !important;
  color: #f5e6c8 !important;
}

/* Hint/muted text throughout */
html[data-tf-theme="notebook"][data-theme="dark"] .hint,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-footer,
html[data-tf-theme="notebook"][data-theme="dark"] .euno-footer-sub{
  color: rgba(245,230,200,0.55) !important;
}

/* Density: cozy vs compact */
html[data-tf-density="compact"] .student-card{
  padding:12px !important;
}

html[data-tf-density="compact"] #groupGrid.student-grid{
  gap:10px;
}

html[data-tf-density="compact"] .desk-links-grid{
  gap:8px;
}

/* Personalisation modal styling */
.tf-prefs-modal{
  max-width:520px;
}

.tf-prefs-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tf-prefs-section{
  padding:10px 6px 4px;
}

.tf-prefs-h{
  margin:0 0 4px;
  font-size:0.9rem;
  font-weight:700;
}

.tf-accent-row,
.tf-density-row,
.tf-theme-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.tf-accent-chip,
.tf-density-chip{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  background:#f9fafb;
  padding:7px 12px;
  font-size:0.85rem;
  cursor:pointer;
}

.tf-accent-chip.active,
.tf-density-chip.active,
.tf-theme-chip.active{
  border-color:var(--tf-accent);
  background:var(--tf-accent-soft);
}

/* ── Theme & Personalise buttons makeover ── */
#themeToggleBtn, #tfCustomizeBtn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px; font-size: 0.82rem; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.18s; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
#themeToggleBtn {
  background: #2d3748; color: #f0e6c8; letter-spacing: 0.02em;
}
#themeToggleBtn:hover { background: #1a202c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
#tfCustomizeBtn {
  background: linear-gradient(135deg, #c89b39, #e0b84a); color: #fff; letter-spacing: 0.02em;
}
#tfCustomizeBtn:hover { background: linear-gradient(135deg, #a07820, #c89b39); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,155,57,0.4); }

/* ── Quick Scratchpad ── */
.topbar-right {
  display: flex; align-items: stretch; gap: 12px; flex: 1;
}
.quick-scratchpad {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.quick-scratchpad-label {
  font-size: 0.72rem; font-weight: 600; color: var(--color-text-soft, #888);
  margin-bottom: 4px; letter-spacing: 0.03em;
}
.quick-scratchpad-input {
  flex: 1; width: 100%; box-sizing: border-box;
  border: 1px solid rgba(148,163,184,0.4);
  border-radius: 8px; padding: 8px 10px;
  font-size: 1rem; font-family: inherit; line-height: 1.4;
  resize: none; background: rgba(255,255,255,0.55); color: inherit;
  transition: border-color 0.15s, background 0.15s; min-height: 80px;
}
.quick-scratchpad-input:focus {
  outline: none; border-color: var(--tf-accent, #c89b39);
  background: rgba(255,255,255,0.85);
}

/* ── Tutor welcome banner (sits under Quick notes) ── */
.tutor-welcome-banner {
  margin-top: 8px; margin-right: 14px; padding: 16px 20px;
  min-height: 54px;
  border-radius: 14px;
  background: rgba(200,155,57,0.10);
  border: 1px solid rgba(200,155,57,0.25);
  display: flex; align-items: center;
  animation: twbSlideIn 0.45s ease both;
}
.tutor-welcome-banner.hidden { display: none; }
.tutor-welcome-banner .twb-text {
  font-family: 'Bellota', cursive;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
}
.tutor-welcome-banner .twb-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: twbWordIn 0.5s ease forwards;
}
@keyframes twbSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes twbWordIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.topbar-controls {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 4px; flex-shrink: 0;
}

.tf-bg-swatches{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;
}
.tf-bg-swatch{
  width:38px; height:38px; border-radius:50%;
  border:2px solid rgba(100,100,100,0.3);
  cursor:pointer; transition:transform 0.15s, border-color 0.15s;
}
.tf-bg-swatch:hover{ transform:scale(1.15); }
.tf-bg-swatch.active{ border-color:#333; border-width:3px; box-shadow:0 0 0 2px #fff inset; }
.tf-bg-swatch--remove{
  background:#e5e7eb; font-size:0.85rem; color:#555; display:flex; align-items:center; justify-content:center;
}

/* User-set background — overrides theme */
html[data-tf-userbg="1"] body{
  background: var(--tf-user-bg, #f5f0e8) !important;
  background-image: none !important;
}
html[data-tf-userbg="photo"] body{
  background-image: var(--tf-user-bg-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* =========================================================
   Teacher Flow – premium polish layer
   Goal: make the hub feel like a flagship “teaching desk”
   without changing any mechanics or layout structure.
   ========================================================= */

/* Refine global feel: slightly calmer contrast + smoother radius */
:root{
  --tf-accent:#72e1d4;
  --r-xl:26px;
  --r-lg:20px;
  --shadow-soft:0 14px 32px rgba(42,53,70,0.16);
  --shadow-card:0 20px 42px rgba(42,53,70,0.20);
}

body{
  letter-spacing:-0.01em;
}

/* App shell: centre the “desk” and give breathing space */
.app-shell{
  max-width:1580px;
  padding-inline:24px;
  padding-block:22px 26px;
}

/* Workspace topbar: make it read as one hero band */
.workspace-topbar--group{
  margin-bottom:4px;
}

.tf-brand-lockup,
.tf-clock,
.topbar-right{
  border-radius:24px;
  box-shadow:0 18px 40px rgba(42,53,70,0.18);
}

.tf-brand-lockup--stacked .brand-title{
  font-size:2.1rem;
}

.tf-brand-lockup--stacked .brand-sub{
  font-size:1rem;
  opacity:0.95;
}

.euno-clock-time{
  font-size:2.3rem;
}

/* Main panels: stronger hierarchy between primary + side */
.workspace-grid--groups .panel--main{
  box-shadow:0 22px 60px rgba(42,53,70,0.22);
}

.workspace-grid--groups .panel--side{
  box-shadow:0 14px 40px rgba(42,53,70,0.18);
}

/* Panel headers: give title block more air */
.panel-header{
  padding-top:20px;
  padding-bottom:12px;
}

.panel-title{
  font-size:1.95rem;
}

.panel-header .hint{
  margin-top:4px;
}

/* TODAY schedule card: make it feel like a live “now” rail */
.tt-today-card{
  border-radius:18px;
  border:1.5px solid rgba(96,109,124,0.20);
}

.tt-today-head .mini-title{
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
}

.tt-slot{
  background:linear-gradient(180deg,rgba(255,255,255,0.94),rgba(248,250,252,0.9));
}

.tt-slot.is-now .bar{
  background:var(--tf-accent);
}

.tt-slot.is-now .label{
  color:#111827;
}

/* Group tiles: more “premium card” feel */
#groupGrid.student-grid{
  gap:16px;
}

#groupGrid .student-card{
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(244,249,252,0.92));
  box-shadow:0 16px 34px rgba(42,53,70,0.14);
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}

#groupGrid .student-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(42,53,70,0.22);
  border-color:rgba(114,137,163,0.45);
}

/* Student cards in lesson screen: calmer, focused */
#studentScreen .student-card{
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,0.96),rgba(244,249,252,0.9));
}

#studentScreen .student-name{
  font-weight:800;
}

/* Buttons: capsule-style, with accent “primary” */
.btn{
  border-radius:999px !important;
  padding-inline:18px !important;
}

.btn.primary{
  background:linear-gradient(135deg,#111827,#111827) !important;
  color:#f9fafb !important;
  box-shadow:0 16px 38px rgba(15,23,42,0.38) !important;
}

.btn.primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.btn.small{
  padding-inline:14px !important;
}

/* Desk shortcuts: read like “pro launcher” pills */
.desk-links-grid{
  gap:14px;
}

.desk-link-btn,
.admin-link-btn{
  border-radius:18px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.8rem;
}

/* Modals: tidy spacing + readable lines */
.modal-content.student-modal-content{
  padding-top:20px;
  padding-bottom:22px;
}

.modal-body textarea{
  line-height:1.4;
}

/* Help desk + onboarding: more “product voice” */
.helpdesk-h{
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.82rem;
}

.onboard-card h2{
  letter-spacing:-0.02em;
}

/* Mobile refinements */
@media (max-width: 720px){
  .app-shell{
    padding-inline:14px;
    padding-block:14px 18px;
  }

  .workspace-topbar--group{
    gap:14px;
  }

  #groupGrid.student-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===== VIEWPORT FIT — no page scroll on desktop ===========================
   The whole app locks to the viewport. Scrolling happens inside panels only.
   ========================================================================== */
@media (min-width: 1024px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100%;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Main app screens fill the shell vertically */
  #groupScreen,
  #homeScreen,
  #studentScreen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Topbar never grows */
  .workspace-topbar { flex-shrink: 0; }

  /* Grid fills all remaining height after the topbar */
  .workspace-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }

  /* Every direct panel/section in the grid fills its cell height */
  .workspace-grid > .panel,
  .workspace-grid > section,
  .workspace-grid > div {
    min-height: 0;
  }

  /* Panels are already flex-column; body fills the remaining space */
  .panel-body {
    flex: 1;
    min-height: 0;
  }

  /* Override the old fixed calc height on student screen */
  #studentScreen { height: auto; }

  /* The UI Zoom control (− 100% +, pinch, Ctrl+wheel) applies CSS zoom to
     <body>. "height:100%" still means the window, so the one-screen desk
     fits at any zoom, but at 120%+ on a laptop the full desk squeezed
     "Choose a class" off-screen (2026-10-20). When it can't fit
     (.ca-zoom-tight, set by initUIZoom) the groups screen uses the compact
     column and the class/home screens scroll up and down instead. Never
     sideways. At exactly 100% none of this applies. */
  html.ca-zoom-tight #homeScreen,
  html.ca-zoom-tight #studentScreen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  html.ca-zoom-tight #homeScreen > *,
  html.ca-zoom-tight #studentScreen > * {
    flex-shrink: 0;
  }
  html.ca-zoom-tight #studentScreen .workspace-grid,
  html.ca-zoom-tight #homeScreen .workspace-grid {
    flex: 0 0 auto;
    overflow: visible;
  }
}

/* Pop-up boxes at UI zoom: "100vh" is zoomed too, so a box sized to 88vh
   ended up taller than the window with Save off the bottom. Size boxes to
   the overlay instead (it is always exactly the window) and let them
   scroll inside, with their buttons kept in view. */
html.ca-zoomed .modal:not(.hidden){
  overflow-y: auto;
}
html.ca-zoomed .modal:not(.hidden) > .modal-content{
  max-height: 100% !important;
  overflow-y: auto;
  box-sizing: border-box;
}
/* Save / Close stay pinned to the bottom of the box while the rest scrolls */
html.ca-zoomed .modal:not(.hidden) .modal-actions{
  position: sticky;
  bottom: 0;
  z-index: 1000; /* .custom-links-block above it sits at 999 */
  padding-top: 8px;
  padding-bottom: 8px;
  background: #f8f8f7;
  box-shadow: 0 -10px 12px -10px rgba(15, 23, 42, 0.18);
}
html[data-theme="dark"].ca-zoomed .modal:not(.hidden) .modal-actions{
  background: rgb(28, 17, 4);
}
html.ca-zoomed .student-records-panel,
html.ca-zoomed .custom-links-editor{
  max-height: calc(100vh / var(--ca-zoom, 1) - 220px);
}
html.ca-zoomed #tfPrefsModal .tf-prefs-modal{
  max-height: calc(100vh / var(--ca-zoom, 1) - 32px) !important;
}

/* =========================================================
   Council Layout — Outlook Dropdown + Sidebar Collapse
   ========================================================= */

/* Panel header with inline action button */
.panel-header--with-action {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.panel-header-main { flex: 1; min-width: 0; }

.panel-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

/* Outlook dropdown */
.outlook-dropdown-wrap { position: relative; }

.outlook-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(600px, 96vw);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(96,109,124,0.22);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(15,23,42,0.22);
  z-index: 9999;
  padding: 0;
}

.outlook-dropdown .outlook-card {
  margin-bottom: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 22px 24px !important;
}

/* Re-show outlook head + hint inside dropdown (were hidden by TF theme) */
.outlook-dropdown .outlook-head { display: flex !important; }
.outlook-dropdown .outlook-hint { display: block !important; margin-top: 12px !important; }
.outlook-dropdown .mini-title { font-size: 1.05rem !important; }

/* Bigger, roomier layout: Label gets its own full-width row, Date/Duration
   share the row below — was 3 equal columns crammed onto one line, truncating
   the Label placeholder and leaving the duration field barely wide enough
   for its digits. */
.outlook-dropdown .outlook-grid {
  display: grid !important;
  flex-wrap: unset !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.outlook-dropdown .outlook-field--title { grid-column: 1 / -1; }

.outlook-dropdown .outlook-grid .label-top {
  display: block !important;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b6876;
  margin: 0 0 6px;
}

.outlook-dropdown .outlook-grid input,
.outlook-dropdown .outlook-grid select {
  width: 100%;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 600;
}

.outlook-dropdown .outlook-grid select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235b6876' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px !important;
  cursor: pointer;
}

.outlook-dropdown .outlook-actions {
  margin-top: 18px !important;
}
.outlook-dropdown .outlook-actions .btn {
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  min-height: 46px;
}

/* Sidebar collapse toggle button */
#sidebarToggleBtn {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
  /* Collapsed sidebar shrinks grid column to icon-rail width */
  #groupScreen .workspace-grid--groups.sidebar-collapsed {
    grid-template-columns: 1fr 52px !important;
  }

  .workspace-grid--groups.sidebar-collapsed .panel--side .panel-body,
  .workspace-grid--groups.sidebar-collapsed .panel--side .panel-footer {
    display: none !important;
  }

  .workspace-grid--groups.sidebar-collapsed .panel--side .panel-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 6px !important;
    gap: 4px !important;
  }

  .workspace-grid--groups.sidebar-collapsed .panel--side .panel-title,
  .workspace-grid--groups.sidebar-collapsed .panel--side .sidebar-expand-hint {
    display: none !important;
  }

  .workspace-grid--groups.sidebar-collapsed #sidebarToggleBtn {
    transform: rotate(180deg);
  }
}

/* Topbar controls: horizontal row of action buttons (not a column list) */
.topbar-controls {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* Language select: compact button style matching the other controls */
.topbar-controls .lang-select {
  width: auto !important;
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  cursor: pointer;
}

/* Group screen: tile grid fills available panel body height */
@media (min-width: 1024px) {
  #groupScreen .panel-body--scroll {
    display: flex;
    flex-direction: column;
  }
  #groupScreen #groupGrid {
    flex: 1;
    min-height: 0;
    grid-auto-rows: minmax(130px, 1fr);
  }
}

/* Student modal: no outer scroll — history fills remaining height */
@media (min-width: 768px) {
  .modal-content.student-modal-content {
    max-height: 88vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-content.student-modal-content .modal-header {
    flex-shrink: 0;
    padding: 14px 20px 10px !important;
  }

  .modal-content.student-modal-content .modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding-top: 10px !important;
  }

  .modal-content.student-modal-content .note-type-row,
  .modal-content.student-modal-content .custom-links-block,
  .modal-content.student-modal-content .modal-actions {
    flex-shrink: 0;
  }

  /* Lock textarea to a comfortable fixed height — no resize */
  #noteText {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    resize: none !important;
  }

  /* History grows to fill all remaining space and scrolls internally */
  .modal-content.student-modal-content .history-block {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-top: 0 !important;
  }

  .modal-content.student-modal-content .history-block h3 {
    flex-shrink: 0;
    margin: 0 0 6px !important;
  }

  .modal-content.student-modal-content .history-list {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* Student records panel: also fills space when open */
  .modal-content.student-modal-content.records-open .student-records-panel {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
  }
}

/* Student screen: cards fill viewport, canvas scrolls internally */
@media (min-width: 1024px) {
  /* Restore flex chain (overrides the old height:auto !important fix) */
  .panel--students {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .student-canvas {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 2px !important;
  }

  /* Cards grow to fill available rows; minimum height prevents tiny cards */
  #studentScreen #studentGrid {
    grid-auto-rows: minmax(120px, 1fr);
  }
}

/* ===== Laptop compatibility ===== */

/* Fix: groups grid overflows at 1101–1181px because TF theme sets
   minmax(760px,1fr) 360px (needs 1182px) but single-column breakpoint
   is only at ≤1100px. Override with fluid columns that never overflow. */
@media (min-width: 1101px) {
  .workspace-grid--groups { grid-template-columns: 1fr 280px !important; }
  #groupScreen .workspace-grid--groups.sidebar-collapsed {
    grid-template-columns: 1fr 52px !important;
  }
}

/* Compact topbar cards on height-constrained laptop screens (≤820px tall) */
@media (max-height: 820px) and (min-width: 1024px) {
  .tf-brand-lockup--stacked { min-height: 112px !important; padding: 12px 18px !important; }
  .tf-brand-logo--hero       { width: 88px !important; height: 88px !important; }
  .brand-text--stacked       { margin-top: 8px !important; }
  .tf-clock                  { min-height: 112px !important; padding: 12px 16px !important; }
  .clock-face                { width: 92px !important; height: 92px !important; }
}

/* UI zoom control */
.zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 3px 8px;
  border: 1.5px solid rgba(96,109,124,0.18);
}
.zoom-control .btn.small {
  padding: 5px 10px !important;
  min-width: 0;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
}
.zoom-level-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #4a5568;
  min-width: 38px;
  text-align: center;
  white-space: nowrap;
}

/* ===== Student modal: wide card (no history) ===== */

/* Force width regardless of zoom — wide, not tall */
.modal-content.student-modal-content {
  width: 90vw !important;
  max-width: 1060px !important;
  min-width: 320px !important;
  max-height: 80vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Header: name + group on one line */
.modal-content.student-modal-content .modal-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 22px 12px !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(96,109,124,0.12) !important;
  margin-bottom: 0 !important;
}
.modal-content.student-modal-content .modal-header h2 { margin: 0 !important; }
.modal-content.student-modal-content .modal-header p  { margin: 0 !important; }

/* Body: two equal columns — left = controls, right = textarea + ILP */
.modal-content.student-modal-content .modal-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 22px !important;
  row-gap: 10px !important;
  padding: 16px 22px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
  align-items: start !important;
}

/* Left column: Type → tags → links → actions */
.modal-content.student-modal-content .note-type-row        { grid-column: 1; grid-row: 1; }
#quickTagsRow                                               { grid-column: 1; grid-row: 2; flex-wrap: wrap !important; }
.modal-content.student-modal-content .custom-links-block   { grid-column: 1; grid-row: 3; }
.modal-content.student-modal-content .modal-actions        { grid-column: 1; grid-row: 4; }
.modal-content.student-modal-content #softMsg              { grid-column: 1; grid-row: 5; }

/* Right column: textarea top, ILP block below */
.modal-content.student-modal-content .modal-body > .label-top { display: none !important; }
.modal-content.student-modal-content #noteText {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
  resize: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#ilpBlock {
  grid-column: 2 !important;
  grid-row: 2 / 6 !important;
  margin-top: 0 !important;
}

/* Full-width items */
.modal-content.student-modal-content #customLinksEditor    { grid-column: 1 / -1; grid-row: 6; }
.modal-content.student-modal-content .student-records-panel { grid-column: 1 / -1; grid-row: 7; overflow-y: auto; max-height: none; }

/* History not needed on the card */
.modal-content.student-modal-content .history-block   { display: none !important; }

/* === Records mode: panel takes over when open === */
.modal-content.student-modal-content.records-open {
  max-height: 90vh !important;
}
.modal-content.student-modal-content.records-open .modal-body {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: visible !important;
  gap: 12px !important;
}
/* Hide normal interaction content when records are open */
.modal-content.student-modal-content.records-open .note-type-row,
.modal-content.student-modal-content.records-open #quickTagsRow,
.modal-content.student-modal-content.records-open .custom-links-block,
.modal-content.student-modal-content.records-open #softMsg,
.modal-content.student-modal-content.records-open #customLinksEditor,
.modal-content.student-modal-content.records-open #noteText,
.modal-content.student-modal-content.records-open #ilpBlock {
  display: none !important;
}
/* Actions dock to bottom row */
.modal-content.student-modal-content.records-open .modal-actions {
  order: 99 !important;
  flex-shrink: 0 !important;
  grid-column: unset !important;
  grid-row: unset !important;
}
/* Records panel fills available space in 2-col card grid */
.modal-content.student-modal-content.records-open .student-records-panel {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.modal-content.student-modal-content.records-open .student-records-panel .sr-wide {
  grid-column: 1 / -1 !important;
}
/* Cards flex vertically so Notes textarea can grow */
.modal-content.student-modal-content.records-open .student-records-panel .sr-card {
  display: flex !important;
  flex-direction: column !important;
}
.modal-content.student-modal-content.records-open #srNotes {
  flex: 1 !important;
  min-height: 80px !important;
  resize: none !important;
}

/* WCAG contrast fixes: footer text — all pass 4.5:1 on every blended footer bg */
.euno-footer-line {
  color: #7c5c30 !important;
}
.euno-footer-sub {
  color: #4d5a68 !important;
}
.euno-footer-data {
  font-size: 0.72rem !important;
  color: #4d5a68 !important;
  margin-top: 4px !important;
  letter-spacing: 0.01em !important;
}
/* Dark mode: flip to light text on dark footer background */
:root[data-theme="dark"] .euno-footer-line,
:root[data-theme="dark"] .euno-footer-sub,
:root[data-theme="dark"] .euno-footer-data {
  color: #9ca3af !important;
}

/* topbar-right must outstack the workspace cards so the Outlook dropdown shows above them */
.topbar-right {
  position: relative !important;
  z-index: 200 !important;
}

/* === Word clock: centred and prominent === */
.clock-meta {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  align-self: center !important;
}
.euno-clock-time {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #1a2332 !important;
  text-align: center !important;
}
.euno-clock-date {
  text-align: center !important;
}

/* === Topbar cards: stretch to equal height, scratchpad fills space === */
.workspace-topbar--group {
  align-items: stretch !important;
}
.tf-brand-lockup,
.tf-clock,
.topbar-right {
  height: 100% !important;
  box-sizing: border-box !important;
  min-height: unset !important;
}
.topbar-right .quick-scratchpad {
  flex: 1 !important;
  min-height: 0 !important;
}
.quick-scratchpad-input {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  resize: none !important;
}

/* ===== Button animations ===== */

/* All buttons: smooth hover lift + satisfying press */
.btn, .chip, .preset-chip, .qle-btn {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease,
              background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease !important;
}
.btn:hover:not(:disabled), .chip:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13) !important;
}
.btn:active:not(:disabled), .chip:active:not(:disabled) {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  transition-duration: 0.07s !important;
}

/* Primary button: shimmer sweep on hover */
.btn.primary {
  isolation: isolate;
}
.btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -110%;
  width: 60%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  pointer-events: none;
  transition: left 0s;
}
.btn.primary:hover::before {
  left: 160%;
  transition: left 0.46s ease;
}

/* Behaviour chips: scale pop on hover */
.chip:hover:not(.active):not(:disabled) {
  transform: translateY(-1px) scale(1.05) !important;
}
.chip.active {
  transform: scale(1.04) !important;
}

/* Ripple element (injected by JS on click) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-expand 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes ripple-expand {
  to { transform: scale(4.5); opacity: 0; }
}

/* ===== Typography: Inter for clean professional rendering ===== */
html, body, button, input, textarea, select, label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Buttons specifically: medium weight, tight letter-spacing for crispness */
.btn, .chip, .preset-chip, .qle-btn {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

.btn.primary { font-weight: 600 !important; }

/* =========================================================
   Sidebar resize handle (groups screen)
   Sits inside .panel--side and hangs left into the gap.
   ========================================================= */
.sidebar-resizer {
  display: none;
}
/* Allow the resizer to extend outside the sidebar panel */
#groupScreen .panel--side {
  overflow: visible;
  position: relative;
}
/* Keep panel body/footer visually clipped as before */
#groupScreen .panel--side > .panel-header,
#groupScreen .panel--side > .panel-body,
#groupScreen .panel--side > .panel-footer {
  border-radius: 0;
}
@media (min-width: 1024px) {
  .sidebar-resizer {
    display: block;
    position: absolute;
    left: -7px;
    top: 0;
    bottom: 0;
    width: 14px;
    cursor: col-resize;
    z-index: 20;
    user-select: none;
  }
  .sidebar-resizer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 48px;
    border-radius: 5px;
    /* Always faintly visible so tutors can see the divider can be dragged */
    background: rgba(96, 109, 124, 0.75); /* ≥3:1 vs the page, WCAG 1.4.11 */
    transition: background 0.2s ease, height 0.2s ease;
  }
  .sidebar-resizer:hover::after,
  .sidebar-resizer:focus-visible::after,
  .sidebar-resizer.dragging::after {
    background: rgba(200, 155, 57, 0.85);
    height: 72px;
  }
  .sidebar-resizer:focus-visible {
    outline: none;
  }
  .sidebar-resizer:focus-visible::after {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55);
  }
  .sidebar-resizer { touch-action: none; }
}

/* =========================================================
   Desk shortcuts fill the sidebar (2026-10-04)
   The footer used to take a fixed ~165px, leaving 51px for the
   buttons on a 1366x768 laptop. Footer is now one compact block and
   the button grid stretches to fill whatever height is left; when
   there isn't room for every button it scrolls instead of hiding
   behind Backup/Restore.
   ========================================================= */
#groupScreen .panel--side > .panel-body{
  display:flex;
  flex-direction:column;
  min-height:0;
}
#groupScreen #deskLinksGridGroup{
  flex:1 1 auto;
  grid-auto-rows:minmax(40px,1fr);
  align-content:stretch;
  gap:8px;
  padding:2px 2px 6px;
}
#groupScreen #deskLinksGridGroup > *{
  min-height:40px;
  height:100%;
}
#groupScreen .panel--side > .panel-footer{
  padding-top:10px !important;
  padding-bottom:12px !important;
}
#groupScreen .panel--side .footer-actions{
  margin-bottom:6px;
}
#groupScreen .panel--side .euno-footer--compact{
  margin:0;
}
#groupScreen .panel--side .euno-footer--compact .euno-footer-line{
  margin-bottom:0;
  font-size:13px;
}
#groupScreen .panel--side .euno-footer-sub{
  display:none;
}
#groupScreen .panel--side .euno-footer-data,
#groupScreen .panel--side .license-footer-line{
  font-size:11.5px;
  margin-top:2px;
}
#groupScreen #deskLinksGridGroup .desk-link-btn{
  min-height:38px;
  height:100%;
  padding-top:8px;
  padding-bottom:8px;
}
/* Short screens (e.g. 1366x768 laptops): give the buttons the height */
@media (max-height: 820px){
  #groupScreen .panel--side > .panel-header{
    padding:12px 18px 8px !important;
  }
  #groupScreen .panel--side .sidebar-expand-hint{
    display:none;
  }
  #groupScreen .panel--side .euno-footer--compact .euno-footer-line{
    display:none;
  }
  #groupScreen .panel--side > .panel-footer{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
}

/* Shortcut buttons: the cog sits in its own section beside the name, never
   over the wording (tutor feedback 2026-10-25). The button's right border
   is the dividing line. */
.admin-link-wrapper,
.desk-link-wrapper,
.session-link-wrapper{
  display:flex !important;
  align-items:stretch;
}
.admin-link-wrapper > .admin-link-btn,
.desk-link-wrapper > .desk-link-btn,
.session-link-wrapper > .btn{
  flex:1 1 auto;
  min-width:0;
  width:auto !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.admin-link-wrapper > .admin-link-btn:hover,
.desk-link-wrapper > .desk-link-btn:hover{ transform:none; }
.admin-link-wrapper > .admin-link-cog,
.desk-link-wrapper > .desk-link-cog,
.session-link-wrapper > .desk-link-cog{
  position:static !important;
  flex:0 0 44px;
  width:44px !important;
  height:auto !important;
  margin:0;
  border-radius:0 14px 14px 0 !important;
  border-left-width:0 !important;
  box-shadow:none !important;
  font-size:0 !important; /* the ⚙ text stays for old themes; the icon below replaces it */
}
/* Cog section takes the Personalise accent colour. :root:root out-ranks the
   theme rules that force a plain white cog background. */
:root:root .admin-link-wrapper > .admin-link-cog,
:root:root .desk-link-wrapper > .desk-link-cog,
:root:root .session-link-wrapper > .desk-link-cog{
  background:color-mix(in srgb, var(--tf-accent) 14%, #fff) !important;
  transition:background .15s ease-out;
}
:root:root .admin-link-wrapper > .admin-link-cog:hover,
:root:root .desk-link-wrapper > .desk-link-cog:hover,
:root:root .session-link-wrapper > .desk-link-cog:hover{
  background:color-mix(in srgb, var(--tf-accent) 26%, #fff) !important;
}
:root:root[data-theme="dark"] .admin-link-wrapper > .admin-link-cog,
:root:root[data-theme="dark"] .desk-link-wrapper > .desk-link-cog,
:root:root[data-theme="dark"] .session-link-wrapper > .desk-link-cog{
  background:color-mix(in srgb, var(--tf-accent) 26%, #15181d) !important;
}
:root:root[data-theme="dark"] .admin-link-wrapper > .admin-link-cog:hover,
:root:root[data-theme="dark"] .desk-link-wrapper > .desk-link-cog:hover,
:root:root[data-theme="dark"] .session-link-wrapper > .desk-link-cog:hover{
  background:color-mix(in srgb, var(--tf-accent) 40%, #15181d) !important;
}
.admin-link-wrapper > .admin-link-cog::before,
.desk-link-wrapper > .desk-link-cog::before,
.session-link-wrapper > .desk-link-cog::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  margin:auto;
  background:color-mix(in srgb, var(--tf-accent) 78%, #000);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
  transition:transform .3s ease-out;
}
:root[data-theme="dark"] .admin-link-wrapper > .admin-link-cog::before,
:root[data-theme="dark"] .desk-link-wrapper > .desk-link-cog::before,
:root[data-theme="dark"] .session-link-wrapper > .desk-link-cog::before{
  background:color-mix(in srgb, var(--tf-accent) 55%, #fff);
}
.admin-link-wrapper > .admin-link-cog:hover::before,
.desk-link-wrapper > .desk-link-cog:hover::before,
.session-link-wrapper > .desk-link-cog:hover::before,
.admin-link-wrapper > .admin-link-cog:focus-visible::before,
.desk-link-wrapper > .desk-link-cog:focus-visible::before,
.session-link-wrapper > .desk-link-cog:focus-visible::before{ transform:rotate(60deg); }
@media (prefers-reduced-motion: reduce){
  .admin-link-wrapper > .admin-link-cog::before,
  .desk-link-wrapper > .desk-link-cog::before,
  .session-link-wrapper > .desk-link-cog::before{ transition:none; }
}

/* Long shortcut names: one line with "…", and the full name slides along
   while the button is hovered or focused (JS adds .is-scrolling only when
   the name doesn't fit). */
.desk-link-btn,
.admin-link-btn{ overflow:hidden; }
.desk-link-btn > .link-label,
.admin-link-btn > .link-label{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.desk-link-btn > .link-label.is-scrolling,
.admin-link-btn > .link-label.is-scrolling{
  overflow:visible;
  text-overflow:clip;
  width:max-content;
  animation:linkLabelScroll var(--scroll-time, 3s) ease-in-out .3s infinite alternate;
}
@keyframes linkLabelScroll{
  0%, 15%{ transform:translateX(0); }
  85%, 100%{ transform:translateX(var(--scroll-by, 0)); }
}
/* Work PCs often have Windows animations switched off, which turns on
   reduced motion, so the name never slid and stayed cut off ("TIMETAB…").
   With motion off, hovering shows the full name on two lines instead. */
@media (prefers-reduced-motion: reduce){
  .desk-link-btn > .link-label.is-scrolling,
  .admin-link-btn > .link-label.is-scrolling{
    animation:none;
    width:auto;
    overflow:hidden;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.1;
    font-size:0.88em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}

/* Long Email button above the desk shortcuts (spans both columns).
   Darkened accent keeps white text above 4.5:1 for every accent. */
.desk-email-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:46px;
  margin:0 0 12px;
  padding:10px 16px;
  border:0;
  border-radius:14px;
  background:color-mix(in srgb, var(--tf-accent) 78%, #000);
  color:#fff;
  font:inherit;
  font-size:0.9rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
  transition:filter .15s ease-out, transform .15s ease-out;
}
.desk-email-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.desk-email-btn:focus-visible{ outline:3px solid var(--tf-accent); outline-offset:2px; }
.desk-email-btn svg{ flex:0 0 auto; }
#groupScreen .desk-email-btn{ min-height:38px; padding:6px 14px; margin-bottom:8px; }
@media (prefers-reduced-motion: reduce){ .desk-email-btn{ transition:none; } .desk-email-btn:hover{ transform:none; } }

/* Email button: own colour (cog picker) + cog section like the shortcuts */
.desk-email-wrap{
  display:flex;
  align-items:stretch;
  margin:0 0 12px;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
#groupScreen .desk-email-wrap{ margin-bottom:8px; }
.desk-email-wrap > .desk-email-btn{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  border-radius:14px 0 0 14px;
  box-shadow:none;
  background:var(--email-color, color-mix(in srgb, var(--tf-accent) 78%, #000));
  color:var(--email-ink, #fff);
}
.desk-email-cog{
  position:relative;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:0 14px 14px 0;
  border-left:1px solid rgba(0,0,0,0.18);
  background:color-mix(in srgb, var(--email-color, var(--tf-accent)) 22%, #fff);
  cursor:pointer;
}
:root[data-theme="dark"] .desk-email-cog{
  background:color-mix(in srgb, var(--email-color, var(--tf-accent)) 35%, #15181d);
}
.desk-email-cog:hover{ filter:brightness(0.95); }
.desk-email-cog:focus-within{ outline:3px solid var(--tf-accent); outline-offset:2px; }
.desk-email-cog::before{
  content:"";
  width:22px;
  height:22px;
  background:color-mix(in srgb, var(--email-color, var(--tf-accent)) 70%, #000);
  -webkit-mask:var(--ca-gear-mask) center / contain no-repeat;
          mask:var(--ca-gear-mask) center / contain no-repeat;
  transition:transform .3s ease-out;
}
:root[data-theme="dark"] .desk-email-cog::before{
  background:color-mix(in srgb, var(--email-color, var(--tf-accent)) 55%, #fff);
}
.desk-email-cog:hover::before,
.desk-email-cog:focus-within::before{ transform:rotate(60deg); }
.desk-email-cog input[type="color"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  padding:0;
}
@media (prefers-reduced-motion: reduce){ .desk-email-cog::before{ transition:none; } }

/* Shortcut colour picker now actually shows: a chosen colour beats the
   theme's painted backgrounds (:root x3 out-ranks the theme selectors). */
:root:root:root .desk-link-btn.has-custom-color,
:root:root:root .admin-link-btn.has-custom-color{
  background:var(--link-color) !important;
  color:var(--link-ink) !important;
  border-color:rgba(0,0,0,0.18) !important;
}

:root{ --ca-gear-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* Digital clock (Personalise > Clock > Digital): numbers only, no words.
   Large bold text, so 3:1 contrast applies; every accent passes. */
.euno-clock-digital{ display:none; }
html[data-tf-clock="digital"] #eunoClock .clock-face,
html[data-tf-clock="digital"] #eunoClock .clock-meta{ display:none !important; }
html[data-tf-clock="digital"] #eunoClock{ justify-content:center; }
html[data-tf-clock="digital"] #eunoClock .euno-clock-digital{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
}
.euno-digital-time{
  display:flex;
  align-items:baseline;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(3rem, 5.4vw, 4.8rem);
  line-height:1;
  letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tf-accent) 70%, #000), var(--tf-accent));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
:root[data-theme="dark"] .euno-digital-time{
  background-image:linear-gradient(135deg, #fff, color-mix(in srgb, var(--tf-accent) 55%, #fff));
}
.euno-digital-colon{
  margin:0 0.05em;
  position:relative;
  top:-0.07em;
  animation:eunoColonBlink 1s steps(1) infinite;
}
@keyframes eunoColonBlink{ 50%{ opacity:0.2; } }
.euno-digital-track{
  width:min(230px, 80%);
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb, var(--tf-accent) 18%, transparent);
  overflow:hidden;
}
.euno-digital-sweep{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--tf-accent);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1s linear;
}
.tf-clock-chip{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  background:#f9fafb;
  padding:7px 12px;
  font-size:0.85rem;
  cursor:pointer;
}
.tf-clock-chip.active{
  border-color:var(--tf-accent);
  background:var(--tf-accent-soft);
}
@media (prefers-reduced-motion: reduce){
  .euno-digital-colon{ animation:none; }
  .euno-digital-sweep{ transition:none; }
}

/* Personalise was taller than a laptop screen and didn't scroll, so
   "Save & close" sat off the bottom. Scroll the box; keep the buttons
   pinned to its bottom edge. */
#tfPrefsModal .tf-prefs-modal{
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:0 !important; /* sticky footer must reach the true bottom edge */
}
#tfPrefsModal .tf-prefs-modal > .modal-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  padding:12px 0 18px;
  background:#fffdf8;
  box-shadow:0 -10px 14px -10px rgba(0,0,0,0.18);
}
:root[data-theme="dark"] #tfPrefsModal .tf-prefs-modal > .modal-actions{ background:#1a1d23; }

/* =========================================================
   Personalise > What's on your screen: sections a tutor switched off
   (html[data-tf-hide] lists them). The rest of the top band takes
   the space, and view transitions glide everything into place.
   ========================================================= */
html[data-tf-hide~="logo"] #groupScreen .tf-brand-lockup,
html[data-tf-hide~="clock"] #groupScreen #eunoClock,
html[data-tf-hide~="notes"] #groupScreen .quick-scratchpad,
html[data-tf-hide~="today"] #groupScreen #ttTodayCard{
  display:none !important;
}
@media (min-width:1201px){
  html[data-tf-hide~="logo"]:not([data-tf-hide~="clock"]) #groupScreen .workspace-topbar--group{ grid-template-columns:320px 1fr; }
  html[data-tf-hide~="clock"]:not([data-tf-hide~="logo"]) #groupScreen .workspace-topbar--group{ grid-template-columns:300px 1fr; }
  html[data-tf-hide~="logo"][data-tf-hide~="clock"] #groupScreen .workspace-topbar--group{ grid-template-columns:1fr; }
}
/* Notes off: the controls row no longer needs the tall card */
/* Notes off: the card shrinks to just hug the buttons (no stretching to the
   logo/clock height, no full-width band) */
html[data-tf-hide~="notes"] #groupScreen .topbar-right{
  min-height:0 !important;
  height:auto !important;   /* beats the older height:100% !important */
  align-self:start !important;
  justify-self:end !important;
  width:fit-content !important;
  max-width:100%;
  padding:12px 14px;
  gap:8px;
}

/* Named pieces so the browser can morph each one to its new place */
#groupScreen .tf-brand-lockup{ view-transition-name:tf-logo; }
#groupScreen #eunoClock{ view-transition-name:tf-clock; }
#groupScreen .topbar-right{ view-transition-name:tf-topright; }
#groupScreen .panel--main{ view-transition-name:tf-main; }
#groupScreen .panel--side{ view-transition-name:tf-side; }
#groupScreen #ttTodayCard{ view-transition-name:tf-today; }
::view-transition-group(*){
  animation-duration:.5s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}
::view-transition-old(*),
::view-transition-new(*){
  height:100%;
  object-fit:none;
  object-position:left top;
}

/* Slide switches for the show/hide list */
.tf-show-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 14px;
  margin-top:8px;
}
.tf-show-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,0.55);
  border-radius:12px;
  background:#f9fafb;
  cursor:pointer;
  font-size:0.9rem;
  font-weight:600;
  transition:border-color .2s, background .2s;
}
.tf-show-item input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.tf-switch{
  position:relative;
  flex:0 0 auto;
  width:38px;
  height:22px;
  border-radius:999px;
  background:#cbd5e1;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.18);
  transition:background .25s ease;
}
.tf-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.tf-show-item input:checked + .tf-switch{ background:var(--tf-accent); }
.tf-show-item input:checked + .tf-switch::after{ transform:translateX(16px); }
.tf-show-item:has(input:checked){
  border-color:color-mix(in srgb, var(--tf-accent) 55%, transparent);
  background:var(--tf-accent-soft);
}
.tf-show-item:has(input:not(:checked)) .tf-show-name{ color:#64748b; }
.tf-show-item input:focus-visible + .tf-switch{ outline:3px solid var(--tf-accent); outline-offset:2px; }
:root[data-theme="dark"] .tf-show-item{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.14); }
:root[data-theme="dark"] .tf-show-item:has(input:not(:checked)) .tf-show-name{ color:#94a3b8; }
@media (prefers-reduced-motion: reduce){
  .tf-switch, .tf-switch::after, .tf-show-item{ transition:none; }
}

/* =========================================================
   Split screen (window about half a screen wide or less):
   a slim top strip, then classes, then shortcuts, then the rest.
   Follows the Personalise on/off switches.
   ========================================================= */
@media (max-width:1000px){
  /* Slim strip: small logo, small digital time, buttons */
  #groupScreen .workspace-topbar--group{
    display:flex !important;
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px !important;
    padding:6px 2px 10px !important;
  }
  #groupScreen .tf-brand-lockup{
    flex:0 0 auto;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:6px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
  }
  #groupScreen .tf-brand-lockup .brand-text{ display:none !important; }
  #groupScreen .tf-brand-logo--hero{ flex:0 0 auto; width:48px !important; height:48px !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; border-radius:12px !important; }
  #groupScreen #eunoClock{
    flex:0 0 auto;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:6px 14px !important;
    border-radius:16px !important;
  }
  #groupScreen #eunoClock .clock-face,
  #groupScreen #eunoClock .clock-meta{ display:none !important; }
  #groupScreen #eunoClock{ display:flex !important; align-items:center !important; justify-content:center !important; }
  #groupScreen #eunoClock .euno-clock-digital{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  #groupScreen .euno-digital-time{ font-size:1.7rem !important; }
  #groupScreen .euno-digital-track{ width:64px; height:4px; }
  #groupScreen .topbar-right{
    flex:1 1 260px;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 10px !important;
    gap:6px !important;
    align-items:stretch !important;
    border-radius:16px !important;
  }
  #groupScreen .topbar-controls{ flex-wrap:wrap; justify-content:flex-start; gap:6px; }
  #groupScreen .topbar-controls .btn.small,
  #groupScreen .topbar-controls .lang-select{ padding:5px 10px !important; font-size:0.78rem !important; }
  #groupScreen .quick-scratchpad-label{ display:none; }
  #groupScreen .topbar-right .quick-scratchpad{ flex:0 0 auto !important; }
  #groupScreen .quick-scratchpad-input{ flex:0 0 auto !important; min-height:0 !important; height:40px !important; padding:8px 12px !important; resize:vertical !important; }
  #groupScreen .session-status{ display:none; }

  /* One column; the page scrolls instead of panels scrolling inside */
  #groupScreen .workspace-grid--groups{
    display:flex !important;
    flex-direction:column;
    gap:12px !important;
    padding:0 2px 16px !important;
    height:auto !important;
  }
  #groupScreen .panel--main,
  #groupScreen .panel--side{ height:auto !important; max-height:none !important; }
  #groupScreen .panel-body--scroll{ max-height:none !important; overflow:visible !important; }
  #groupScreen .sidebar-resizer,
  #groupScreen #sidebarToggleBtn,
  #groupScreen .sidebar-expand-hint{ display:none !important; }

  /* Classes straight after the title; set-up extras drop below them */
  #groupScreen .panel--main{ display:flex !important; flex-direction:column; }
  #groupScreen .panel--main > .panel-header,
  #groupScreen .panel--main .panel-header-main{ display:contents !important; }
  #groupScreen .panel--main .panel-header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  #groupScreen .panel--main .panel-header-top-row{ order:0; padding:14px 16px 0; }
  #groupScreen .panel--main .panel-header-main > .hint:not(.tt-hint){ order:0; padding:0 16px; margin:4px 0 8px; }
  #groupScreen .panel--main > .panel-body{ order:1; }
  #groupScreen #openTrackerScreenBtn{ order:2; margin:10px 16px 0 !important; width:auto !important; }
  #groupScreen .tt-actions-row{ order:2; padding:10px 16px 0; }
  #groupScreen .tt-hint{ order:2; padding:0 16px; }
  #groupScreen #ttTodayCard{ order:2; margin:8px 16px 16px !important; }

  /* Shortcuts: only the ones set up plus one empty "Add" slot */
  #groupScreen .desk-link-wrapper.empty ~ .desk-link-wrapper.empty{ display:none !important; }
  /* Shortcuts: no inner scroll; trim the footer */
  #groupScreen .panel--side .euno-footer{ display:none; }
  #groupScreen .panel--side .panel-footer{ padding-top:6px !important; }
}


/* Personalise > "Always use the compact layout": the same split-screen
   layout at any window size (copy of the max-width:1000px block above,
   keyed on html[data-tf-layout="compact"]). On a wide screen it sits as a
   centred column instead of stretching edge to edge. */

  /* Slim strip: small logo, small digital time, buttons */
  html[data-tf-layout="compact"] #groupScreen .workspace-topbar--group{
    display:flex !important;
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px !important;
    padding:6px 2px 10px !important;
  }
  html[data-tf-layout="compact"] #groupScreen .tf-brand-lockup{
    flex:0 0 auto;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:6px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
  }
  html[data-tf-layout="compact"] #groupScreen .tf-brand-lockup .brand-text{ display:none !important; }
  html[data-tf-layout="compact"] #groupScreen .tf-brand-logo--hero{ flex:0 0 auto; width:48px !important; height:48px !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; border-radius:12px !important; }
  html[data-tf-layout="compact"] #groupScreen #eunoClock{
    flex:0 0 auto;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:6px 14px !important;
    border-radius:16px !important;
  }
  html[data-tf-layout="compact"] #groupScreen #eunoClock .clock-face,
  html[data-tf-layout="compact"] #groupScreen #eunoClock .clock-meta{ display:none !important; }
  html[data-tf-layout="compact"] #groupScreen #eunoClock{ display:flex !important; align-items:center !important; justify-content:center !important; }
  html[data-tf-layout="compact"] #groupScreen #eunoClock .euno-clock-digital{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  html[data-tf-layout="compact"] #groupScreen .euno-digital-time{ font-size:1.7rem !important; }
  html[data-tf-layout="compact"] #groupScreen .euno-digital-track{ width:64px; height:4px; }
  html[data-tf-layout="compact"] #groupScreen .topbar-right{
    flex:1 1 260px;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 10px !important;
    gap:6px !important;
    align-items:stretch !important;
    border-radius:16px !important;
  }
  html[data-tf-layout="compact"] #groupScreen .topbar-controls{ flex-wrap:wrap; justify-content:flex-start; gap:6px; }
  html[data-tf-layout="compact"] #groupScreen .topbar-controls .btn.small,
  html[data-tf-layout="compact"] #groupScreen .topbar-controls .lang-select{ padding:5px 10px !important; font-size:0.78rem !important; }
  html[data-tf-layout="compact"] #groupScreen .quick-scratchpad-label{ display:none; }
  html[data-tf-layout="compact"] #groupScreen .topbar-right .quick-scratchpad{ flex:0 0 auto !important; }
  html[data-tf-layout="compact"] #groupScreen .quick-scratchpad-input{ flex:0 0 auto !important; min-height:0 !important; height:40px !important; padding:8px 12px !important; resize:vertical !important; }
  html[data-tf-layout="compact"] #groupScreen .session-status{ display:none; }

  /* One column; the page scrolls instead of panels scrolling inside */
  html[data-tf-layout="compact"] #groupScreen .workspace-grid--groups{
    display:flex !important;
    flex-direction:column;
    gap:12px !important;
    padding:0 2px 16px !important;
    height:auto !important;
  }
  html[data-tf-layout="compact"] #groupScreen .panel--main,
  html[data-tf-layout="compact"] #groupScreen .panel--side{ height:auto !important; max-height:none !important; }
  html[data-tf-layout="compact"] #groupScreen .panel-body--scroll{ max-height:none !important; overflow:visible !important; }
  html[data-tf-layout="compact"] #groupScreen .sidebar-resizer,
  html[data-tf-layout="compact"] #groupScreen #sidebarToggleBtn,
  html[data-tf-layout="compact"] #groupScreen .sidebar-expand-hint{ display:none !important; }

  /* Classes straight after the title; set-up extras drop below them */
  html[data-tf-layout="compact"] #groupScreen .panel--main{ display:flex !important; flex-direction:column; }
  html[data-tf-layout="compact"] #groupScreen .panel--main > .panel-header,
  html[data-tf-layout="compact"] #groupScreen .panel--main .panel-header-main{ display:contents !important; }
  html[data-tf-layout="compact"] #groupScreen .panel--main .panel-header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  html[data-tf-layout="compact"] #groupScreen .panel--main .panel-header-top-row{ order:0; padding:14px 16px 0; }
  html[data-tf-layout="compact"] #groupScreen .panel--main .panel-header-main > .hint:not(.tt-hint){ order:0; padding:0 16px; margin:4px 0 8px; }
  html[data-tf-layout="compact"] #groupScreen .panel--main > .panel-body{ order:1; }
  html[data-tf-layout="compact"] #groupScreen #openTrackerScreenBtn{ order:2; margin:10px 16px 0 !important; width:auto !important; }
  html[data-tf-layout="compact"] #groupScreen .tt-actions-row{ order:2; padding:10px 16px 0; }
  html[data-tf-layout="compact"] #groupScreen .tt-hint{ order:2; padding:0 16px; }
  html[data-tf-layout="compact"] #groupScreen #ttTodayCard{ order:2; margin:8px 16px 16px !important; }

  /* Shortcuts: only the ones set up plus one empty "Add" slot */
  html[data-tf-layout="compact"] #groupScreen .desk-link-wrapper.empty ~ .desk-link-wrapper.empty{ display:none !important; }
  /* Shortcuts: no inner scroll; trim the footer */
  html[data-tf-layout="compact"] #groupScreen .panel--side .euno-footer{ display:none; }
  html[data-tf-layout="compact"] #groupScreen .panel--side .panel-footer{ padding-top:6px !important; }

@media (min-width:1001px){
  html[data-tf-layout="compact"] #groupScreen .workspace-topbar--group,
  html[data-tf-layout="compact"] #groupScreen .workspace-grid--groups{
    width:100%;
    max-width:760px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  html[data-tf-layout="compact"] #groupScreen{ overflow-y:auto !important; }
  /* Full-screen panels squeeze to the window height; in the compact column
     they keep their natural height and the screen scrolls instead. */
  html[data-tf-layout="compact"] #groupScreen .workspace-grid--groups,
  html[data-tf-layout="compact"] #groupScreen .panel--main,
  html[data-tf-layout="compact"] #groupScreen .panel--side,
  html[data-tf-layout="compact"] #groupScreen .panel-body,
  html[data-tf-layout="compact"] #groupGrid,
  html[data-tf-layout="compact"] #groupScreen .desk-links-grid{
    flex:0 0 auto !important;
    overflow:visible !important;
    min-height:0 !important;
  }
}

.tf-show-item--wide{ grid-column:1 / -1; }
.tf-show-sub{ display:block; font-weight:500; font-size:0.78rem; color:#64748b; }
:root[data-theme="dark"] .tf-show-sub{ color:#94a3b8; }

/* =========================================================
   Layout lock + rearranging (initLayoutLock in adaptscript.js)
   ========================================================= */

/* Top band is a row of cards whose order the tutor can change. Flex (not the
   fixed 300/320/1fr grid) so a card keeps its size wherever it moves. */
@media (min-width:1201px){
  #groupScreen .workspace-topbar--group{ display:flex !important; align-items:stretch; }
  #groupScreen .workspace-topbar--group > .tf-brand-lockup{ flex:0 0 300px; }
  #groupScreen .workspace-topbar--group > #eunoClock{ flex:0 0 320px; }
  #groupScreen .workspace-topbar--group > .topbar-right{ flex:1 1 0; min-width:0; }
  html[data-tf-hide~="notes"] #groupScreen .workspace-topbar--group > .topbar-right{ flex:0 1 auto !important; }
  html[data-tf-hide~="notes"] #groupScreen .workspace-topbar--group > .topbar-right.tf-top-last{ margin-left:auto; }
}

/* Shortcuts panel on the left */
html[data-tf-side="left"] #groupScreen .panel--side{ order:-1; }
@media (min-width:1101px){
  html[data-tf-side="left"] #groupScreen .workspace-grid--groups:not(.sidebar-collapsed){ grid-template-columns:360px minmax(0,1fr) !important; }
  html[data-tf-side="left"] #groupScreen .workspace-grid--groups.sidebar-collapsed{ grid-template-columns:52px 1fr !important; }
  html[data-tf-side="left"] #groupScreen .sidebar-resizer{ left:auto; right:-7px; }
}

/* The padlock button */
.tf-lock-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--tf-accent) 88%, #fff), color-mix(in srgb, var(--tf-accent) 62%, #000));
  box-shadow:0 6px 14px color-mix(in srgb, var(--tf-accent) 38%, transparent), inset 0 -2px 0 rgba(0,0,0,0.18);
  transition:transform .2s ease, box-shadow .2s ease, background .3s ease, color .3s ease;
}
.tf-lock-btn:hover{ transform:translateY(-1px) scale(1.06); }
.tf-lock-btn:focus-visible{ outline:3px solid var(--tf-accent); outline-offset:3px; }
.tf-lock-svg{ width:21px; height:21px; overflow:visible; }
.tf-anchor{
  transform-box:view-box;
  transform-origin:12px 3px;
  transition:transform .4s ease;
}
html.tf-editing .tf-lock-btn{
  color:var(--tf-accent);
  background:#fff;
  animation:tfLockPulse 1.8s ease-in-out infinite;
}
/* Unlocked: the anchor is raised and swings from its ring */
html.tf-editing .tf-anchor{ animation:tfAnchorSwing 1.7s ease-in-out infinite; }
@keyframes tfAnchorSwing{
  0%, 100%{ transform:translateY(-2.5px) rotate(-11deg); }
  50%{ transform:translateY(-2.5px) rotate(11deg); }
}
@keyframes tfLockPulse{
  0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--tf-accent) 50%, transparent), 0 6px 14px rgba(0,0,0,0.18); }
  50%{ box-shadow:0 0 0 9px transparent, 0 6px 14px rgba(0,0,0,0.18); }
}

/* Unlocked: what can move shows a dashed edge and a name chip */
html.tf-editing #groupScreen [data-tf-move]{
  position:relative;
  cursor:grab;
  touch-action:none;
  user-select:none;
  outline:2px dashed color-mix(in srgb, var(--tf-accent) 70%, transparent);
  outline-offset:3px;
}
html.tf-editing #groupScreen [data-tf-move]:focus-visible{ outline:3px solid var(--tf-accent); }
.tf-move-chip{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  z-index:35;
  padding:3px 11px;
  border-radius:999px;
  background:var(--tf-accent);
  color:#fff;
  font:800 11px/1.5 "Inter", system-ui, sans-serif;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
html.tf-editing #groupScreen .sidebar-resizer{ display:none !important; }
html.tf-editing #deskLinksGridGroup .desk-link-wrapper[tabindex]{
  cursor:grab;
  touch-action:none;
  user-select:none;
  border-radius:14px;
  outline:1.5px dashed color-mix(in srgb, var(--tf-accent) 55%, transparent);
  outline-offset:2px;
  animation:tfWiggle 1.1s ease-in-out infinite;
}
html.tf-editing #deskLinksGridGroup .desk-link-wrapper[tabindex]:nth-child(2n){ animation-delay:-.55s; }
html.tf-editing #deskLinksGridGroup .desk-link-wrapper[tabindex]:focus-visible{ outline:3px solid var(--tf-accent); }
@keyframes tfWiggle{ 0%, 100%{ transform:rotate(-0.6deg); } 50%{ transform:rotate(0.6deg); } }

html.tf-editing .tf-dragging{
  cursor:grabbing !important;
  opacity:0.88;
  z-index:40;
  animation:none !important;
  box-shadow:0 22px 48px rgba(0,0,0,0.28) !important;
  outline:3px solid var(--tf-accent) !important;
}
html.tf-drag, html.tf-drag *{ cursor:grabbing !important; }
html.tf-drag::view-transition-group(*){ animation-duration:.3s; }

/* Banner while unlocked */
.tf-edit-banner{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:9600;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:calc(100vw - 24px);
  padding:8px 8px 8px 16px;
  border-radius:999px;
  background:color-mix(in srgb, var(--tf-accent) 30%, #0f172a);
  color:#fff;
  font:600 0.88rem/1.3 "Inter", system-ui, sans-serif;
  box-shadow:0 14px 34px rgba(0,0,0,0.3);
}
.tf-edit-banner[hidden]{ display:none; }
.tf-edit-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--tf-accent);
  box-shadow:0 0 0 0 var(--tf-accent);
  animation:tfLockPulse 1.8s ease-in-out infinite;
}
.tf-edit-msg{ min-width:0; }
.tf-edit-banner button{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 14px;
  font:700 0.82rem/1 "Inter", system-ui, sans-serif;
  cursor:pointer;
}
.tf-edit-reset{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.45); }
.tf-edit-done{ background:#fff; color:#0f172a; border:0; }
.tf-edit-banner button:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

.tf-drag-ghost{
  position:fixed;
  top:0;
  left:0;
  z-index:9700;
  padding:5px 12px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font:700 0.78rem/1.3 "Inter", system-ui, sans-serif;
  pointer-events:none;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.tf-drag-ghost[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  html.tf-editing .tf-lock-btn,
  .tf-edit-dot,
  html.tf-editing #deskLinksGridGroup .desk-link-wrapper[tabindex]{ animation:none; }
  .tf-anchor{ transition:none; }
  html.tf-editing .tf-anchor{ animation:none; transform:translateY(-2.5px); }
}

/* =========================================================
   Today's schedule: lessons sit side by side as boxes (2026-10-28)
   Stacked rows took ~320px of the classes panel on a laptop; boxes
   across take one short row and wrap onto a second if the day is busy.
   ========================================================= */
#ttTodayCard.tt-today-card{ padding:10px 12px; }
#ttTodayCard .tt-today-head{ margin-bottom:8px; }
#ttTodayList.tt-today-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
  max-height:none;
  overflow:visible;
}
#ttTodayList .tt-slot{
  min-width:0;
  padding:8px 10px;
  gap:8px;
}
#ttTodayList .tt-slot .bar{ height:30px; }
#ttTodayList .tt-slot.is-now{ transform:none; }

/* Choose a class: on a short laptop screen the header (title, trackers,
   wizard, today's lessons) used every pixel and the class tiles had no
   room at all. If it can't all fit, the whole box now scrolls as one so
   the classes are always reachable; on a taller screen nothing changes. */
@media (min-width:1024px){
  html:not([data-tf-layout="compact"]) #groupScreen .panel--main{ overflow-y:auto; overflow-x:hidden; }
  html:not([data-tf-layout="compact"]) #groupScreen .panel--main > .panel-header{ flex-shrink:0; }
  html:not([data-tf-layout="compact"]) #groupScreen .panel--main > .panel-body{ flex:1 0 auto; min-height:150px; overflow:visible; }
}

/* =========================================================
   Class tiles (2026-10-28): good-sized cards with depth instead of
   boxes stretched to fill the panel. Each class has its own edge
   colour + initials badge (--tile-c, set in renderGroupGrid); the class
   that's on now gets a "Now" tag (_ttMarkNowTile).
   ========================================================= */
#groupScreen #groupGrid.student-grid{
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important;
  grid-auto-rows:auto !important;
  align-content:start;
  align-items:start;
  gap:14px;
  padding:4px 2px 10px;
}
#groupScreen #groupGrid .ca-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:118px;
  max-height:none;
  padding:12px 14px 12px 18px !important;
  border-radius:16px;
  border:1px solid rgba(96,109,124,0.18);
  background:linear-gradient(160deg, #ffffff 0%, #f6f7f9 100%);
  /* layered: crisp contact shadow + soft lift shadow + top highlight */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(42,53,70,0.10),
    0 8px 18px -6px rgba(42,53,70,0.18);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Coloured edge, like the end of a board */
#groupScreen #groupGrid .ca-tile::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:var(--tile-c, #c89b39);
}
#groupScreen #groupGrid .ca-tile:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--tile-c, #c89b39) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(42,53,70,0.10),
    0 16px 30px -8px rgba(42,53,70,0.28);
}
#groupScreen #groupGrid .ca-tile:active{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(42,53,70,0.12), 0 6px 12px -6px rgba(42,53,70,0.2);
}
#groupScreen #groupGrid .ca-tile-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
#groupScreen #groupGrid .ca-tile-badge{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--tile-c, #c89b39);
  color:#fff;
  font:800 0.85rem/1 "Inter", system-ui, sans-serif;
  letter-spacing:0.04em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,0.18), 0 3px 8px -2px color-mix(in srgb, var(--tile-c, #c89b39) 60%, transparent);
}
#groupScreen #groupGrid .ca-tile-now{
  display:none;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  background:#dcfce7;
  color:#14532d;
  font:800 0.72rem/1.2 "Inter", system-ui, sans-serif;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
#groupScreen #groupGrid .ca-tile-now::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:#16a34a;
}
#groupScreen #groupGrid .ca-tile.is-now .ca-tile-now{ display:inline-flex; }
#groupScreen #groupGrid .ca-tile.is-now{
  border-color:rgba(22,163,74,0.45);
}
#groupScreen #groupGrid .ca-tile .student-name{
  margin:0;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.25;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#groupScreen #groupGrid .ca-tile .student-last-note{
  margin-top:auto;
  padding-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  font-weight:600;
  color:#475569;
}
#groupScreen #groupGrid .ca-tile .student-last-note::before{
  content:"";
  width:14px; height:14px;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 20c0-3.3 3.1-6 7-6s7 2.7 7 6v1H2v-1Zm15.5 1v-1c0-1.8-.7-3.4-1.9-4.6.5-.1.9-.1 1.4-.1 2.8 0 5 1.9 5 4.4V21h-4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 20c0-3.3 3.1-6 7-6s7 2.7 7 6v1H2v-1Zm15.5 1v-1c0-1.8-.7-3.4-1.9-4.6.5-.1.9-.1 1.4-.1 2.8 0 5 1.9 5 4.4V21h-4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#groupScreen #groupGrid .ca-tile:focus-visible{
  outline:3px solid #2563eb;
  outline-offset:2px;
}
/* Tiles rise in one after another when the screen loads */
@media (prefers-reduced-motion: no-preference){
  #groupScreen #groupGrid .ca-tile{
    animation:caTileIn .38s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--i, 0) * 45ms);
  }
  #groupScreen #groupGrid .ca-tile.is-now .ca-tile-now::before{
    animation:caNowPulse 2.4s ease-in-out infinite;
  }
}
@keyframes caTileIn{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@keyframes caNowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,0.45); }
  60%{ box-shadow:0 0 0 5px rgba(22,163,74,0); }
}
/* Dark theme */
html[data-theme="dark"] #groupScreen #groupGrid .ca-tile{
  background:linear-gradient(160deg, rgba(48,32,12,0.96), rgba(37,24,8,0.96)) !important;
  border-color:rgba(200,140,40,0.28) !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 10px 22px -8px rgba(0,0,0,0.6);
}
html[data-theme="dark"] #groupScreen #groupGrid .ca-tile .student-name{ color:#f5e6c8; }
html[data-theme="dark"] #groupScreen #groupGrid .ca-tile .student-last-note{ color:#d6c3a0; }

/* =========================================================
   Watch colour on student cards (2026-10-28, _addRagControl).
   A ring round the card + a lettered dot in the bottom corner.
   ========================================================= */
#studentScreen .student-card{ position:relative; }
#studentScreen .student-card[data-rag="green"]{ box-shadow:inset 0 0 0 4px #16a34a, 0 10px 22px -10px rgba(22,163,74,0.55) !important; }
#studentScreen .student-card[data-rag="amber"]{ box-shadow:inset 0 0 0 4px #d97706, 0 10px 22px -10px rgba(217,119,6,0.55) !important; }
#studentScreen .student-card[data-rag="red"]{ box-shadow:inset 0 0 0 4px #dc2626, 0 10px 22px -10px rgba(220,38,38,0.6) !important; }

/* The control is a strip down the card's right side, like the cog part of
   a desk shortcut, so it's a separate target from the card itself */
#studentScreen .student-card{ padding-right:58px !important; }
#studentScreen .student-card .student-badge{ right:56px; }
#studentScreen .student-card .student-edit{ right:56px; }
.student-card .student-rag{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:4;
  width:46px;
  padding:0;
  border:0;
  border-left:1px solid rgba(148,163,184,0.7);
  border-top-right-radius:inherit;
  border-bottom-right-radius:inherit;
  display:grid;
  place-items:center;
  background:#e3e9fb;
  cursor:pointer;
  transition:background .15s ease;
}
.student-card .student-rag:hover{ background:#d3ddfa; }
.student-card .student-rag:focus-visible,
.student-card .student-rag-opt:focus-visible{ outline:3px solid #2563eb; outline-offset:-3px; }
.student-card .student-rag-opt:focus-visible{ outline-offset:2px; }
.student-card .student-rag-dot{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px dashed rgba(51,65,85,0.6);
  background:rgba(255,255,255,0.9);
  color:#fff;
  font:800 0.8rem/1 "Inter", system-ui, sans-serif;
  transition:transform .15s ease;
}
.student-card .student-rag:hover .student-rag-dot{ transform:scale(1.1); }
/* Text colours below all >=4.5:1 against white */
/* Chosen colour fills the whole strip; the lettered dot sits on top with
   a white ring so it still stands out */
.student-card[data-rag="green"] .student-rag{ background:#16a34a; border-left-color:#16a34a; }
.student-card[data-rag="amber"] .student-rag{ background:#f59e0b; border-left-color:#f59e0b; }
.student-card[data-rag="red"]   .student-rag{ background:#dc2626; border-left-color:#dc2626; }
.student-card[data-rag="green"] .student-rag:hover{ background:#15803d; }
.student-card[data-rag="amber"] .student-rag:hover{ background:#d97706; }
.student-card[data-rag="red"]   .student-rag:hover{ background:#b91c1c; }
.student-card[data-rag="green"] .student-rag-dot{ border:3px solid #fff; background:#14532d; box-shadow:0 2px 8px rgba(0,0,0,0.35); }
.student-card[data-rag="amber"] .student-rag-dot{ border:3px solid #fff; background:#92400e; box-shadow:0 2px 8px rgba(0,0,0,0.35); }
.student-card[data-rag="red"]   .student-rag-dot{ border:3px solid #fff; background:#7f1d1d; box-shadow:0 2px 8px rgba(0,0,0,0.35); }

.student-card .student-rag-picker{
  position:absolute;
  right:52px;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  display:none;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:0 10px 24px -6px rgba(15,23,42,0.35);
}
.student-card.rag-open .student-rag-picker{ display:flex; }
.student-card .student-rag-opt{
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  border:2px solid transparent;
  color:#fff;
  font:800 0.82rem/1 "Inter", system-ui, sans-serif;
  cursor:pointer;
}
.student-card .student-rag-opt[data-rag="green"]{ background:#15803d; }
.student-card .student-rag-opt[data-rag="amber"]{ background:#b45309; }
.student-card .student-rag-opt[data-rag="red"]{ background:#b91c1c; }
.student-card .student-rag-opt[data-rag=""]{ background:#f1f5f9; color:#334155; border-color:#cbd5e1; }
.student-card .student-rag-opt[aria-pressed="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #0f172a; }
@media (prefers-reduced-motion: no-preference){
  .student-card.rag-open .student-rag-picker{ animation:ragPop .16s ease-out; }
}
@keyframes ragPop{ from{ opacity:0; transform:translate(6px,-50%) scale(.96); } to{ opacity:1; transform:translateY(-50%); } }

/* =========================================================
   Calendar | Book a date split button under Email (2026-10-28).
   Teal so it reads apart from the blue Email button; white text
   on #0f766e / #115e59 is 5.5:1+.
   ========================================================= */
.desk-cal-wrap{
  display:flex;
  flex:0 0 auto; /* the shortcuts grid below flexes; this must keep its height */
  align-items:stretch;
  margin:0 0 12px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
#groupScreen .desk-cal-wrap{ margin-bottom:8px; }
.desk-cal-btn{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:8px 10px;
  border:0;
  background:#0f766e;
  color:#fff;
  font:inherit;
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .15s ease-out;
}
#groupScreen .desk-cal-btn{ min-height:38px; padding:6px 10px; }
.desk-cal-btn span{ overflow:hidden; text-overflow:ellipsis; }
.desk-cal-btn svg{ flex:0 0 auto; }
.desk-cal-btn--book{
  background:#115e59;
  border-left:2px solid rgba(255,255,255,0.35);
}
.desk-cal-btn:hover{ filter:brightness(1.15); }
.desk-cal-btn:focus-visible{ outline:3px solid #fff; outline-offset:-5px; }
@media (prefers-reduced-motion: reduce){ .desk-cal-btn{ transition:none; } }

/* =========================================================
   Quick-notes toolbar (2026-10-28): one matching style for the
   language picker, Theme, Personalise, Help and zoom. Same height,
   dark text (13:1+), a clear outline, one tidy row.
   ========================================================= */
#groupScreen .topbar-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
#groupScreen .topbar-controls .btn.small,
#groupScreen .topbar-controls .lang-select,
#groupScreen .topbar-controls .zoom-control{
  height:38px;
  min-height:38px;
  box-sizing:border-box;
  padding:0 9px !important;
  border-radius:12px !important;
  border:1.5px solid #cbd5e1 !important;
  background:#ffffff !important;
  color:#1e293b !important;
  font:700 0.85rem/1 "Inter", system-ui, sans-serif !important;
  letter-spacing:0;
  box-shadow:0 1px 2px rgba(15,23,42,0.06), 0 3px 8px -4px rgba(15,23,42,0.12) !important;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
#groupScreen .topbar-controls .btn.small{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
#groupScreen .topbar-controls .btn.small:hover,
#groupScreen .topbar-controls .lang-select:hover{
  border-color:#64748b !important;
  background:#f8fafc !important;
  transform:translateY(-1px);
}
#groupScreen .topbar-controls .btn.small:focus-visible,
#groupScreen .topbar-controls .lang-select:focus-visible{
  outline:3px solid #2563eb;
  outline-offset:2px;
}
/* Language picker: room for the arrow */
#groupScreen .topbar-controls .lang-select{
  padding-right:26px !important;
  width:96px !important;
  min-width:0 !important;
  text-overflow:ellipsis;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px !important;
  cursor:pointer;
}
/* Zoom sits in the row as one joined control */
#groupScreen .topbar-controls .zoom-control{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:0 4px !important;
}
#groupScreen .topbar-controls .zoom-control .btn.small{
  height:30px;
  min-height:30px;
  width:30px;
  padding:0 !important;
  justify-content:center;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  background:transparent !important;
  font-size:1.05rem !important;
}
#groupScreen .topbar-controls .zoom-control .btn.small:hover{ background:#f1f5f9 !important; transform:none; }
#groupScreen .topbar-controls .zoom-control .btn.small:disabled{ opacity:0.4; cursor:default; }
#groupScreen .topbar-controls .zoom-level-label{ color:#1e293b; font-size:0.82rem; min-width:40px; }
#groupScreen .topbar-controls .tf-lock-btn{ width:38px; height:38px; }

/* Dark theme */
html[data-theme="dark"] #groupScreen .topbar-controls .btn.small,
html[data-theme="dark"] #groupScreen .topbar-controls .lang-select,
html[data-theme="dark"] #groupScreen .topbar-controls .zoom-control{
  background-color:#2a1d0c !important;
  border-color:rgba(200,140,40,0.4) !important;
  color:#f5e6c8 !important;
}
html[data-theme="dark"] #groupScreen .topbar-controls .zoom-level-label{ color:#f5e6c8; }
html[data-theme="dark"] #groupScreen .topbar-controls .zoom-control .btn.small{ background:transparent !important; }

/* Class box resize (initTileResize): once a size is picked every box is
   exactly that size; the grip lives in each box's bottom-right corner. */
#groupScreen #groupGrid.tiles-sized{
  grid-template-columns:repeat(auto-fill, minmax(min(var(--tile-w), 100%), var(--tile-w))) !important;
}
#groupScreen #groupGrid.tiles-sized .ca-tile{ min-height:var(--tile-h); }
#groupScreen #groupGrid.tiles-resizing .ca-tile{ transition:none; }
#groupScreen #groupGrid.tiles-resizing{ cursor:nwse-resize; user-select:none; }
#groupScreen #groupGrid .ca-tile-grip{
  position:absolute;
  right:2px;
  bottom:2px;
  z-index:2;
  width:24px;
  height:24px;
  border-radius:8px;
  cursor:nwse-resize;
  touch-action:none;
  opacity:0.55;
  transition:opacity .15s ease, background .15s ease;
  /* three diagonal ridges, like a window's resize corner */
  background:
    linear-gradient(135deg, transparent 0 52%, #64748b 52% 58%, transparent 58% 66%, #64748b 66% 72%, transparent 72% 80%, #64748b 80% 86%, transparent 86%);
}
#groupScreen #groupGrid .ca-tile:hover .ca-tile-grip,
#groupScreen #groupGrid .ca-tile-grip:focus-visible,
#groupScreen #groupGrid.tiles-resizing .ca-tile-grip{ opacity:1; }
#groupScreen #groupGrid .ca-tile-grip:hover{ background-color:rgba(100,116,139,0.12); }
#groupScreen #groupGrid .ca-tile-grip:focus-visible{ outline:3px solid #2563eb; outline-offset:1px; }
html[data-theme="dark"] #groupScreen #groupGrid .ca-tile-grip{
  background:linear-gradient(135deg, transparent 0 52%, #d6c3a0 52% 58%, transparent 58% 66%, #d6c3a0 66% 72%, transparent 72% 80%, #d6c3a0 80% 86%, transparent 86%);
}

/* =========================================================
   Scratch pad (initScratchPad, 2026-10-28): pen in the Quick notes
   box opens a pop-out pad (drawing + basic calculator) that grows out
   of the pen. Notebook paper on the left, slate calculator on the right.
   ========================================================= */
.quick-scratchpad{ position:relative; }
.quick-scratchpad-input{ padding-right:46px !important; }
.ca-pen-btn{
  position:absolute;
  right:8px;
  top:6px;
  z-index:2;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:10px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  color:#1e293b;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,0.08), 0 4px 10px -4px rgba(15,23,42,0.2);
  transition:transform .18s ease, background .15s ease, border-color .15s ease;
}
.ca-pen-btn:hover{ border-color:#64748b; transform:translateY(-1px) rotate(-8deg); }
.ca-pen-btn[aria-expanded="true"]{ background:#1e293b; color:#fff; border-color:#1e293b; }
.ca-pen-btn:focus-visible{ outline:3px solid #2563eb; outline-offset:2px; }
html[data-theme="dark"] .ca-pen-btn{ background:#2a1d0c; color:#f5e6c8; border-color:rgba(200,140,40,0.4); }

.ca-pad-wrap{
  position:fixed;
  inset:0;
  z-index:9500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,0.28);
  backdrop-filter:blur(3px);
}
.ca-pad-wrap[hidden]{ display:none; }
.ca-pad{
  width:880px;
  max-width:100%;
  max-height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.1);
  box-shadow:0 30px 70px -20px rgba(15,23,42,0.55), 0 2px 6px rgba(15,23,42,0.12);
}
.ca-pad-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px 10px 20px;
}
.ca-pad-head h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 auto 0 0;
  font:800 1.05rem/1.2 "Inter", system-ui, sans-serif;
  color:#0f172a;
}
.ca-pad-clear,
.ca-pad-close{
  height:36px;
  border-radius:10px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  color:#1e293b;
  font:700 0.85rem/1 "Inter", system-ui, sans-serif;
  cursor:pointer;
  padding:0 12px;
}
.ca-pad-close{ width:36px; padding:0; font-size:1rem; }
.ca-pad-clear:hover,
.ca-pad-close:hover{ border-color:#64748b; }
.ca-pad-clear:focus-visible,
.ca-pad-close:focus-visible,
.ca-calc-key:focus-visible,
.ca-calc-add:focus-visible{ outline:3px solid #2563eb; outline-offset:2px; }

.ca-pad-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:14px;
  padding:0 16px 16px;
}
.ca-pad-draw{ display:flex; flex-direction:column; min-width:0; }
.ca-pad-draw canvas{
  display:block;
  width:100%;
  height:360px;
  border-radius:16px;
  border:1px solid #e2e8f0;
  /* notebook paper: ruled lines + a red margin */
  background:
    linear-gradient(90deg, transparent 38px, rgba(220,38,38,0.35) 38px 40px, transparent 40px),
    repeating-linear-gradient(180deg, #fffdf6 0 29px, #dbe4f0 29px 30px);
  cursor:crosshair;
  touch-action:none;
  box-shadow:inset 0 1px 3px rgba(15,23,42,0.06);
}
.ca-pad-hint{ margin:8px 2px 0; font-size:0.82rem; color:#475569; }

.ca-calc{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(165deg, #1e293b, #0f172a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px -10px rgba(15,23,42,0.6);
}
.ca-calc-display{
  padding:10px 12px;
  border-radius:12px;
  background:#0b1220;
  text-align:right;
  min-height:62px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.5);
}
.ca-calc-sum{ min-height:16px; font:600 0.8rem/1.2 "Inter", system-ui, sans-serif; color:#94a3b8; }
.ca-calc-num{
  font:700 1.6rem/1.2 "Inter", system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
  color:#f8fafc;
  overflow-wrap:anywhere;
}
.ca-calc-keys{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:7px;
}
.ca-calc-key{
  height:44px;
  border:0;
  border-radius:12px;
  background:#334155;
  color:#f8fafc;
  font:700 1.1rem/1 "Inter", system-ui, sans-serif;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 0 #0b1220;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.ca-calc-key:hover{ background:#3e4c63; }
.ca-calc-key:active{ transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 #0b1220; }
.ca-calc-key.is-op{ background:#475569; color:#fde68a; }
.ca-calc-key.is-fn{ background:#1f2a3b; color:#cbd5e1; }
.ca-calc-key.is-eq{ background:#c2410c; color:#fff; } /* white on #c2410c = 5.2:1 */
.ca-calc-key.is-eq:hover{ background:#d4500f; }
.ca-calc-key:nth-last-child(2){ grid-column:span 2; } /* C spans two, ⌫ two */
.ca-calc-key:last-child{ grid-column:span 2; }
.ca-calc-add{
  height:44px;
  border:0;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font:800 0.9rem/1 "Inter", system-ui, sans-serif;
  letter-spacing:0.02em;
  cursor:pointer;
  box-shadow:0 3px 0 #064e48;
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.ca-calc-add:hover{ filter:brightness(1.12); }
.ca-calc-add:active{ transform:translateY(3px); box-shadow:0 0 0 #064e48; }

html[data-theme="dark"] .ca-pad{ background:#1c1104; border-color:rgba(200,140,40,0.25); }
html[data-theme="dark"] .ca-pad-head h2{ color:#f5e6c8; }
html[data-theme="dark"] .ca-pad-hint{ color:#d6c3a0; }
html[data-theme="dark"] .ca-pad-clear,
html[data-theme="dark"] .ca-pad-close{ background:#2a1d0c; color:#f5e6c8; border-color:rgba(200,140,40,0.4); }
html[data-theme="dark"] .ca-pad-draw canvas{
  background:
    linear-gradient(90deg, transparent 38px, rgba(248,113,113,0.35) 38px 40px, transparent 40px),
    repeating-linear-gradient(180deg, #241708 0 29px, #3a2a14 29px 30px);
  border-color:rgba(200,140,40,0.25);
}

/* Small screens: drawing on top, calculator underneath */
@media (max-width:760px){
  .ca-pad-body{ grid-template-columns:1fr; }
  .ca-pad-draw canvas{ height:240px; }
}
/* Short laptop screens: a shorter drawing area so it all fits */
@media (max-height:700px){
  .ca-pad-draw canvas{ height:280px; }
  .ca-calc-key, .ca-calc-add{ height:38px; }
}

/* Motion: grows out of the pen, keys pop in one after another */
@media (prefers-reduced-motion: no-preference){
  .ca-pad-wrap:not([hidden]){ animation:caPadFade .22s ease-out; }
  .ca-pad-wrap:not([hidden]) .ca-pad{ animation:caPadIn .38s cubic-bezier(.2,1.25,.35,1); }
  .ca-pad-wrap:not([hidden]) .ca-calc-key{
    animation:caKeyPop .3s cubic-bezier(.2,1.4,.4,1) both;
    animation-delay:calc(.12s + var(--k, 0) * 18ms);
  }
  .ca-pad-wrap.is-closing{ animation:caPadFadeOut .2s ease-in forwards; }
  .ca-pad-wrap.is-closing .ca-pad{ animation:caPadOut .2s ease-in forwards; }
  .ca-pen-btn[aria-expanded="true"] svg{ animation:caPenWiggle .5s ease; }
}
@keyframes caPadFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes caPadFadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes caPadIn{ from{ opacity:0; transform:scale(.25); } 60%{ opacity:1; } to{ opacity:1; transform:none; } }
@keyframes caPadOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:scale(.3); } }
@keyframes caKeyPop{ from{ opacity:0; transform:translateY(8px) scale(.85); } to{ opacity:1; transform:none; } }
@keyframes caPenWiggle{ 0%,100%{ transform:none; } 30%{ transform:rotate(-14deg); } 60%{ transform:rotate(8deg); } }

/* Help desk boxes: the help text scrolls inside the box so the header and
   "Got it" always stay on screen (it outgrew a laptop screen, 2026-10-28).
   Percentages, so it also fits at any UI zoom. */
.modal:not(.hidden) > .modal-content.helpdesk-modal{
  max-height:100% !important;
  display:flex !important;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
}
.modal-content.helpdesk-modal > .modal-header,
.modal-content.helpdesk-modal > .modal-actions{ flex-shrink:0; }
.modal-content.helpdesk-modal > .helpdesk-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* =========================================================
   Tablets (touch, no mouse): bigger tap targets (44px) and full shortcut
   names, since there's no hover. Laptops — even touchscreen ones with a
   touchpad — don't match (hover:none) and look exactly the same.
   ========================================================= */
@media (hover: none) and (pointer: coarse){
  #groupScreen .topbar-controls .btn.small,
  #groupScreen .topbar-controls .lang-select,
  #groupScreen .topbar-controls .zoom-control{ height:44px; min-height:44px; }
  #groupScreen .topbar-controls .zoom-control .btn.small{ width:40px; height:40px; min-height:40px; }
  #groupScreen .topbar-controls .tf-lock-btn{ width:44px; height:44px; }
  .ca-pen-btn{ width:42px; height:42px; }
  .desk-link-btn, .admin-link-btn, .desk-link-cog, .admin-link-cog{ min-height:44px; }
  #groupScreen .desk-email-btn, #groupScreen .desk-cal-btn{ min-height:46px; }
  #groupScreen #groupGrid .ca-tile-grip{ width:36px; height:36px; opacity:0.8; }
  .sidebar-resizer{ width:28px !important; left:-14px !important; }
  .ca-pad-clear, .ca-pad-close{ height:44px; }
  .ca-pad-close{ width:44px; }
  .ca-calc-key, .ca-calc-add{ height:48px; }
  .student-card .student-rag-opt{ width:42px; height:42px; }
  #openAdminBtn, #ttTodayOpenWizard, #sidebarToggleBtn,
  #groupScreen .panel--side .panel-footer .btn{ min-height:44px; }

  /* No hover to slide long names along, so show them on two lines */
  .desk-link-btn > .link-label,
  .admin-link-btn > .link-label{
    white-space:normal;
    overflow-wrap:anywhere;
    text-overflow:clip;
    line-height:1.1;
    font-size:0.88em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .desk-link-btn > .link-label.is-scrolling,
  .admin-link-btn > .link-label.is-scrolling{ animation:none; width:auto; }
}

/* =========================================================
   Student Records: photos (2026-10-28, records-idb.js)
   Take photo button + caption step, photo gallery, full-size viewer.
   ========================================================= */
.student-records-panel .sr-capture{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:12px 0; }
.sr-photo-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:0 22px;
  border:0; border-radius:14px;
  background:#0f766e; color:#fff;            /* white on #0f766e = 5.5:1 */
  font:800 1rem/1 "Inter", system-ui, sans-serif;
  cursor:pointer;
  box-shadow:0 4px 0 #064e48, 0 10px 20px -8px rgba(15,118,110,0.6);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.sr-photo-btn:hover{ filter:brightness(1.1); }
.sr-photo-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #064e48; }
.sr-photo-btn:focus-visible{ outline:3px solid #2563eb; outline-offset:3px; }
.sr-capture-note{ margin:0; font-size:0.85rem; color:#475569; }

.sr-pending{
  flex-basis:100%;
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  padding:12px; border-radius:14px;
  background:#f0fdfa; border:1.5px solid #99f6e4;
}
.sr-pending[hidden]{ display:none; }
.sr-pending img{ width:160px; max-width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#e2e8f0; }
.sr-pending-form{ flex:1 1 220px; display:flex; flex-direction:column; gap:6px; }
.sr-pending-form label{ font-weight:700; color:#0f172a; }
.sr-pending-form label span{ font-weight:500; color:#475569; }
.sr-pending-form input{ min-height:42px; border-radius:10px; border:1.5px solid #94a3b8; padding:0 12px; font:inherit; }
.sr-pending-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.sr-pending-btns button{
  min-height:42px; padding:0 16px; border-radius:10px; cursor:pointer;
  font:700 0.9rem/1 "Inter", system-ui, sans-serif;
  border:1.5px solid #cbd5e1; background:#fff; color:#1e293b;
}
.sr-pending-btns .sr-pending-save{ background:#0f766e; border-color:#0f766e; color:#fff; }
.sr-pending-btns button:focus-visible{ outline:3px solid #2563eb; outline-offset:2px; }

.sr-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin:4px 0 10px;
}
.sr-photo{
  display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 1px 2px rgba(15,23,42,0.06), 0 6px 14px -8px rgba(15,23,42,0.25);
}
.sr-photo-view{
  display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  aspect-ratio:4/3; background:#e2e8f0;
}
.sr-photo-view img{ display:block; width:100%; height:100%; object-fit:cover; }
.sr-photo-view.is-missing{ display:grid; place-items:center; color:#475569; font-size:0.8rem; cursor:default; }
.sr-photo-view:focus-visible{ outline:3px solid #2563eb; outline-offset:-3px; }
.sr-photo-cap{ padding:8px 10px 2px; min-width:0; }
.sr-photo-cap .sr-file-name{ font-weight:700; font-size:0.88rem; overflow-wrap:anywhere; }
.sr-photo-cap .sr-meta{ font-size:0.76rem; color:#475569; }
.sr-photo .sr-file-actions{
  padding:6px 10px 10px;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.sr-photo .sr-file-actions .btn{ width:100%; min-width:0; padding-left:6px !important; padding-right:6px !important; justify-content:center; font-size:0.82rem !important; }
.sr-thumb--file{ display:grid; place-items:center; font-weight:800; color:#475569; }
.sr-empty{ padding:6px 2px; }

.sr-viewer{
  position:fixed; inset:0; z-index:10050;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(15,23,42,0.82);
}
.sr-viewer[hidden]{ display:none; }
.sr-viewer figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.sr-viewer img{ max-width:100%; max-height:calc(100vh / var(--ca-zoom, 1) - 110px); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.sr-viewer figcaption{ color:#f8fafc; font:600 0.95rem/1.3 "Inter", system-ui, sans-serif; text-align:center; }
.sr-viewer-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border-radius:12px; border:0;
  background:#fff; color:#0f172a; font-size:1.1rem; cursor:pointer;
}
.sr-viewer-close:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px; }
@media (prefers-reduced-motion: no-preference){
  .sr-viewer:not([hidden]) img{ animation:srZoomIn .22s ease-out; }
  .sr-pending:not([hidden]){ animation:srSlide .2s ease-out; }
}
@keyframes srZoomIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
@keyframes srSlide{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

html[data-theme="dark"] .sr-photo{ background:#2a1d0c; border-color:rgba(200,140,40,0.3); }
html[data-theme="dark"] .sr-photo-cap .sr-file-name{ color:#f5e6c8; }
html[data-theme="dark"] .sr-photo-cap .sr-meta,
html[data-theme="dark"] .sr-capture-note{ color:#d6c3a0; }
html[data-theme="dark"] .sr-pending{ background:#10302c; border-color:#0f766e; }
html[data-theme="dark"] .sr-pending-form label{ color:#f5e6c8; }