/* =========================================================
   STUDX BRAND TOKENS
   ========================================================= */
:root{
  --brand:#4642F1;  --brand-dk:#312DD6;  --brand-soft:#EEEDFE;  --brand-line:#D6D4FB;
  --accent:#FF6B35;
  --ink:#16161A;  --ink-2:#3A3B42;  --sub:#6B6F76;
  --bg:#F5F4F2;   --card:#FFFFFF;   --line:#E7E6E3;  --line-2:#F0EFEC;
  --green:#12734A; --green-soft:#E4F2EA; --green-line:#BEE0CE;
  --amber:#8A5D0B; --amber-soft:#FBF0DC; --amber-line:#EBD5A6;
  --red:#B8352A;   --red-soft:#FBEAE8;   --red-line:#F0C8C3;
  --shadow:0 1px 2px rgba(22,22,26,.04), 0 8px 24px -12px rgba(22,22,26,.14);
  --shadow-lg:0 2px 4px rgba(22,22,26,.05), 0 24px 48px -20px rgba(22,22,26,.24);
  --r:14px;
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:15.5px;line-height:1.5;color:var(--ink);
  background:
    radial-gradient(900px 420px at 12% -8%, #EAE9FE 0%, transparent 62%),
    radial-gradient(720px 380px at 96% 4%, #FFEDE5 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px;color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- header ---------- */
header{border-top:3px solid var(--accent);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hwrap{max-width:none;margin:0;padding:12px 26px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logo{height:36px;width:auto;display:block}
/* Shown only if the logo file is missing, so the header never collapses. */
.wordmark{font-family:var(--font-display);font-size:25px;letter-spacing:.4px;line-height:1}
.wordmark .x{color:var(--accent)}
.brand-divider{width:1px;height:30px;background:var(--line)}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.hdate{margin-left:auto;text-align:right;font-size:12.5px;color:var(--sub)}
.hactions{margin-left:auto;display:flex;gap:8px;align-items:center}
.hdate b{display:block;color:var(--ink);font-size:13.5px}
.adminlink{font-size:12px;color:var(--sub);text-decoration:none;border:1px solid var(--line);
  padding:6px 11px;border-radius:8px;background:#fff;transition:.15s;white-space:nowrap}
.adminlink:hover{border-color:var(--brand);color:var(--brand)}
#logoutBtn:hover{border-color:var(--red);color:var(--red)}
.toggle{display:flex;gap:3px;background:var(--bg);border-radius:9px;padding:4px}
.toggle>*{font-size:12px;font-weight:600;color:var(--sub);padding:6px 12px;border-radius:6px;
  text-decoration:none;border:1px solid transparent;transition:.15s;white-space:nowrap}
.toggle>.on{background:#fff;color:var(--ink);border-color:var(--line)}
.toggle a:hover{color:var(--brand)}

/* ---------- layout ---------- */
main{max-width:720px;margin:0 auto;padding:26px 18px 72px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:24px}
.stack>*+*{margin-top:16px}
h1{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
h2{font-size:19px;font-weight:700;letter-spacing:-.015em}
.muted{color:var(--sub);font-size:13.5px}
.mono{font-family:var(--mono);letter-spacing:.01em}
.label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:7px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.hide{display:none!important}
.center{text-align:center}

/* ---------- inputs ---------- */
.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:#fff;
  transition:border-color .15s, box-shadow .15s}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.input{min-height:60px;resize:vertical;line-height:1.45}
/* Placeholders read as a hint, never as text someone should copy. */
.input::placeholder{color:#A8ABB1;opacity:1}
.codebox{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:16px 12px}
.codebox::placeholder{color:#B4B7BC;font-weight:500;letter-spacing:.2em}

/* ---------- buttons ---------- */
.btn{border-radius:10px;font-weight:600;font-size:15px;padding:13px 20px;transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(70,66,241,.3)}
.btn.primary:hover{background:var(--brand-dk)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink-2)}
.btn.sm{padding:9px 14px;font-size:13.5px;border-radius:9px}
.btn.danger{background:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(.92)}
.btn.block{width:100%}
/* Signed in the content pane is the whole window, so a 100%-wide primary
   button becomes a 1500px slab. Capped and left-aligned, it reads as an
   action again. Ghost block buttons keep their width - "+ Add another
   task" spanning the list is what makes it read as "add a row here".
   The signed-out Continue is untouched: it sits in a narrow centred card
   where full width is only ~600px and correct. */
body.in-panel .btn.primary.block{width:auto;min-width:250px;max-width:340px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.linkbtn{color:var(--sub);font-size:12.5px;font-weight:600;padding:4px 6px;border-radius:6px}
.linkbtn:hover{color:var(--red);background:var(--red-soft)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:4px 9px;font-size:12px;font-weight:600}
.c-green{color:var(--green);background:var(--green-soft)}
.c-amber{color:var(--amber);background:var(--amber-soft)}
.c-red{color:var(--red);background:var(--red-soft)}
.c-brand{color:var(--brand);background:var(--brand-soft)}

/* ---------- task cards ---------- */
.taskcard{border:1px solid var(--line);border-radius:12px;padding:15px;background:#fff;
  animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* The "Assigned" chip sits between the number and Remove, so the row gains a
   marker without the two ends moving. */
.taskhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}
.taskhead .chip{margin-right:auto}
.tasknum{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--sub);letter-spacing:.1em}
.hours{width:104px;flex:0 0 auto}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border-radius:9px;padding:9px 13px;font-size:13px;font-weight:600;background:#fff;
  color:var(--sub);border:1px solid var(--line);transition:.14s}
.pill:hover{border-color:var(--ink-2)}
.pill.on-done{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
.pill.on-wip{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.pill.on-blocked{color:var(--red);background:var(--red-soft);border-color:var(--red-line)}

/* ---------- summary bar ---------- */
.sumbar{display:flex;gap:8px;align-items:center;background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:11px;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--brand)}
.meter{flex:1;height:7px;border-radius:99px;background:#fff;overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .35s ease}

/* ---------- day strip ---------- */
/* Seven equal columns so a week always spans the full card width. */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
/* The 30-day read-back is pinned to two rows and scrolls sideways when it has
   to. --cols is set inline to half the day count, so the days still read
   left-to-right along the top row and then the bottom one. */
.week.month{
  grid-template-columns:repeat(var(--cols,15),minmax(34px,1fr));
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scroll-behavior:smooth;
  padding-bottom:6px;
}
.week.month::-webkit-scrollbar{height:6px}
.week.month::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.week.month::-webkit-scrollbar-track{background:transparent}
.wday{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 2px;border-radius:10px;background:var(--line-2);border:1px solid var(--line);
  color:var(--sub);transition:transform .13s,box-shadow .13s}
.wday .dnum{font-family:var(--mono);font-size:14.5px;font-weight:700;line-height:1}
.wday .dname{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.8}
.wday.l1{background:#E7E6FD;border-color:#D3D1FA;color:var(--brand-dk)}
.wday.l2{background:#B4B1F8;border-color:#9F9BF5;color:#221F6B}
.wday.l3{background:var(--brand);border-color:var(--brand-dk);color:#fff}
/* Still inside the write window. A dashed edge rather than another fill:
   the fills already encode the input score, and overloading them would
   make a low-scoring open day look like a high-scoring closed one. */
.wday.open{border-style:dashed;border-color:var(--brand)}
.wday.open .dnum{color:var(--brand-dk)}
.wday.l3.open{border-color:#fff}
.wday.l3.open .dnum{color:#fff}
.wday.today{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent)}
/* Later this week: shown so the row is always a whole week and the columns
   do not shift as it fills, but faded and not offered. */
.wday.future{opacity:.42;border-style:dotted}
.wday[data-day]{cursor:pointer}
.wday[data-day]:hover{transform:translateY(-2px)}

/* The label and the "another day" picker share a line, wrapping on a phone
   rather than squeezing the input to nothing. */
.week-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;
  margin-bottom:9px}
.week-jump{display:flex;align-items:center;gap:7px;font-size:12.5px}
/* The label is two words and must stay two words: the flex row will squeeze
   it before it squeezes the input, and "Another / day" over two lines pushes
   the whole row out of alignment with the label beside it. */
.week-jump > span{white-space:nowrap;flex:none}
.week-jump .input{padding:7px 9px;font-size:13px;max-width:165px}
@media(max-width:400px){
  .week{gap:4px}
  .wday{padding:8px 1px}
  .wday .dnum{font-size:13px}
  .wday .dname{font-size:8.5px;letter-spacing:.02em}
}

/* ---------- success ---------- */
.big-ok{width:60px;height:60px;border-radius:50%;background:var(--green-soft);color:var(--green);
  font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  animation:pop .3s ease-out}
.score{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--brand);letter-spacing:-.02em}

.err{color:var(--red);font-size:13.5px;font-weight:500}
.notice{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);
  border-radius:10px;padding:12px 14px;font-size:13.5px}
.spin{color:var(--sub);font-size:13.5px;padding:8px 0}
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--line-2),#fff,var(--line-2));
  background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}

@media(max-width:540px){
  .hwrap{padding:10px 14px;gap:8px}
  .logo{height:29px}
  /* The logo alone is enough on a phone, and the date is repeated on the page. */
  .brand-divider,.eyebrow,.hdate{display:none}
  .adminlink{padding:6px 9px}
  main{padding:18px 14px 56px}
  .pad{padding:18px}
  h1{font-size:22px}
  .hours{width:88px}
}

/* ---------- Month calendar ---------- */
/* Seven fixed columns so the grid keeps its shape on a narrow phone rather
   than reflowing into something that is no longer a calendar. */
.calhead{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:18px;margin-bottom:6px}
.calhead span{text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sub)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}

.cday{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:6px 2px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2)}
.cday.blank{border:0;background:transparent}
.cday .cnum{font-family:var(--mono);font-size:13.5px;font-weight:700;line-height:1}
.cday .cmeta{font-size:9.5px;font-weight:700;letter-spacing:.03em;opacity:.85}
.cday[data-cal]{cursor:pointer}
.cday[data-cal]:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
/* An empty day still inside the window: it opens, so it says so rather than
   looking like the closed days beside it. */
.cday.openable{border-style:dashed;border-color:var(--brand)}
.cday.openable .cnum{color:var(--brand-dk)}

/* One state per cell. Deliberately distinguishable without colour alone —
   logged days carry their hours, leave carries an L, so the grid still reads
   printed in mono or by someone who cannot separate the hues. */
.cday.s-filed{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-dk)}
.cday.s-leave{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.cday.s-leave-pending{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.cday.s-missed{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.cday.s-off{background:var(--line-2);border-color:var(--line);color:var(--sub);opacity:.7}
.cday.s-future{background:var(--card);border-style:dashed;color:var(--sub);opacity:.55}
/* Holidays get their own colour and full opacity even ahead of time — the
   point of marking one is that people can see it coming. */
.cday.s-holiday{background:#F2ECFD;border-color:#D9CBF6;color:#5B3AB8}
.cday .chol{max-width:100%;padding:0 3px;font-size:9.5px;font-weight:600;line-height:1.15;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A holiday somebody worked through: the cell stays "logged", with a small
   corner mark so the festival is not lost from the month. */
.cday.s-filed.has-hol{position:relative}
.cday.s-filed.has-hol::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;
  border-radius:50%;background:#7B5BD6}
.cday.today{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent)}

.callegend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px;
  font-size:11.5px;color:var(--sub)}
.callegend span{display:inline-flex;align-items:center;gap:5px}
.callegend .dot{width:9px;height:9px;border-radius:3px;border:1px solid var(--line);display:inline-block}
.callegend .dot.s-filed{background:var(--brand-soft);border-color:var(--brand-line)}
.callegend .dot.s-leave{background:var(--green-soft);border-color:var(--green-line)}
.callegend .dot.s-leave-pending{background:var(--amber-soft);border-color:var(--amber-line)}
.callegend .dot.s-missed{background:var(--red-soft);border-color:var(--red-line)}
.callegend .dot.s-off{background:var(--line-2)}
.callegend .dot.s-holiday{background:#F2ECFD;border-color:#D9CBF6}

/* ---------- Leave list ---------- */
.leaverow{display:flex;align-items:flex-start;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line-2)}
.leaverow:last-child{border-bottom:0;padding-bottom:0}
.leaverow-main{flex:1;min-width:0}
/* Status above, the delete link under it: the status is what is scanned
   down the list, the delete is a second thought. */
.leaverow-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.lv-del{background:none;border:0;padding:2px 0;font-size:12.5px;font-weight:600;
  color:var(--red);cursor:pointer}
.lv-del:hover{text-decoration:underline}

/* The pager sits under the pager-less rows, not in a toolbar of its own. */
.lv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lv-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px}
.lv-notice{margin-bottom:12px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  background:var(--green-soft);border:1px solid var(--green-line);color:var(--green)}
.lv-notice.bad{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
/* Dates, type, length and any upcoming marker on one line, wrapping as a
   group rather than each fragment breaking on its own. */
.leaverow-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.leaverow b{font-size:14.5px;color:var(--ink)}
.leaverow-note{margin-top:7px;font-size:13px;line-height:19px;color:var(--ink-2)}
/* A small caps label in front of the text, so the employee's own reason
   and the manager's note are never mistaken for each other. */
.leaverow-tag{display:inline-block;margin-right:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sub)}
.leaverow-trail{margin-top:7px;font-size:12px;color:var(--sub)}
.chip.sm{padding:2px 7px;font-size:11px;border-radius:6px}

@media(max-width:400px){
  .cal,.calhead{gap:3px}
  .cday{min-height:42px;border-radius:7px}
  .cday .cnum{font-size:12px}
  .cday .cmeta{font-size:8.5px}
  /* A 42px cell cannot hold "Ganesh Chaturthi". The colour marks it and the
     name is one tap away in the day's title. */
  .cday .chol{display:none}
}

/* =========================================================
   PANEL SHELL — menu left, content right
   =========================================================
   Signed in only. Signed out .pnav carries .hide and the layout collapses
   back to the single centred column the code entry was designed for.

   Below 900px the menu moves to a fixed bottom bar. That is not decoration:
   this app is opened on a phone on patchy campus data, and a 210px sidebar on
   a 360px screen would take more than half the width the work itself needs.
   ========================================================= */
/* Full window width, menu flush to the left edge. The rail is its own
   column rather than a floating card, so the content starts where the
   menu ends instead of both being centred inside dead space. */
.panel{display:flex;gap:0;max-width:none;margin:0;padding:0;align-items:flex-start}
.panel .pmain{flex:1;min-width:0;max-width:none;margin:0;padding:28px 32px 80px}

/* Signed out: no menu, and the old centred column width comes back so the
   code entry does not stretch across a desktop. */
.pnav.hide{display:none}
.pnav.hide+.pmain{max-width:720px;margin:0 auto}

/* --hdr is the sticky site header. The rail sits under it and fills what is
   left of the viewport, so it reads as part of the window rather than a
   card floating on the page. */
:root{--hdr:56px}
.pnav{position:sticky;top:var(--hdr);width:264px;flex:0 0 264px;margin:0;
  height:calc(100vh - var(--hdr));background:var(--card);border:0;
  border-right:1px solid var(--line);border-radius:0;box-shadow:none;
  padding:22px 16px;display:flex;flex-direction:column;gap:5px}

.pnav-who{padding:4px 10px 16px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
.pnav-name{display:block;font-weight:700;font-size:16px;color:var(--ink);line-height:1.3}
.pnav-code{display:block;font-size:12px;color:var(--sub);margin-top:3px}

.pnav-list{display:flex;flex-direction:column;gap:4px}
.pnav-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  border:0;border-radius:10px;background:transparent;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:600;color:var(--ink-2);text-align:left;
  transition:background .12s,color .12s}
.pnav-item:hover{background:var(--line-2);color:var(--ink)}
.pnav-item.on{background:var(--brand-soft);color:var(--brand-dk)}
.pnav-icon{width:22px;flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.pnav-icon svg{width:19px;height:19px;display:block}
.pnav-label{flex:1;min-width:0}
.pnav-badge{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);
  border-radius:20px;padding:2px 8px;font-size:12px;font-weight:700}

.pnav-out{margin-top:auto;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--sub)}
.pnav-out:hover{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}

/* ---------- Page heading inside the pane ---------- */
.phead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.phead>div{flex:1;min-width:200px}
.phead h1{font-size:22px;line-height:1.2}
.phead .muted{font-size:13.5px;margin-top:5px}

/* ---------- The counts row ---------- */
/* auto-fit rather than a fixed column count, so six tiles become three rows of
   two on a phone without a breakpoint per size. */
/* One row, as asked. Six across on a wide pane, halving down rather than
   reflowing to an awkward five-plus-one. */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:18px}
@media(max-width:1080px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-n,.stat-l,.stat-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-n{font-size:19.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.stat-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.stat-s{font-size:11.5px;color:var(--sub);opacity:.85}
.stat.good .stat-n{color:var(--green)}
.stat.warn .stat-n{color:var(--amber)}
.stat.bad .stat-n{color:var(--red)}
/* A tile that opens something says so before it is tapped. */
.stat.tappable{cursor:pointer;transition:.13s}
.stat.tappable:hover{border-color:var(--ink-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.stat.tappable:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Assigned work ---------- */
.asg-list{margin-top:14px;max-height:56vh;overflow:auto}
.asg{padding:13px 0;border-bottom:1px solid var(--line-2)}
.asg:last-child{border-bottom:0}
.asg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.asg-top b{font-size:14.5px;line-height:1.35;color:var(--ink)}
.asg-meta{margin-top:5px;font-size:12px;color:var(--sub)}
/* Overdue is the one thing on the row that changes what you do today. */
.asg-late{color:var(--red);font-weight:600}
.asg-note{margin-top:7px;font-size:13px;line-height:19px;color:var(--ink-2);white-space:pre-line}
.asg-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}

@media(min-width:901px){
  body.in-panel #logoutBtn{display:none}
}

/* ---------- Phone: the menu becomes a bottom bar ---------- */
@media(max-width:900px){
  .pnav-out{display:none}
  .panel{display:block;padding:0;max-width:none}
  .hwrap{padding:12px 18px}
  .panel .pmain{padding:22px 18px 96px}
  .pnav.hide+.pmain{max-width:none}

  .pnav{position:fixed;inset:auto 0 0 0;width:auto;flex:none;margin:0;z-index:40;height:auto;
    flex-direction:row;align-items:center;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border:0;border-top:1px solid var(--line);border-radius:0;
    box-shadow:0 -2px 14px rgba(22,22,26,.07)}
  /* The name is already in the header on a phone; repeating it costs a row
     of the little vertical space a bottom bar has. */
  .pnav-who{display:none}
  .pnav-list{flex-direction:row;flex:1;gap:2px}
  .pnav-item{flex-direction:column;gap:3px;justify-content:center;padding:7px 4px;
    font-size:10.5px;letter-spacing:.02em;text-align:center;border-radius:10px}
  .pnav-icon{width:auto;flex:none}
  .pnav-icon svg{width:20px;height:20px}
  .pnav-badge{position:absolute;transform:translate(14px,-6px);padding:0 5px;font-size:10px}
  .pnav-out{margin:0 0 0 4px;padding:7px 10px;font-size:11px;border-radius:10px;align-self:stretch}
}

@media(max-width:400px){
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:11px 12px}
  .stat-n{font-size:19px}
  .pnav-out{padding:7px 8px;font-size:10.5px}
}

/* ---------- profile ---------- */
/* .field only exists to stop .stack's 16px rule separating a label from the
   input it belongs to — inside a field they stay together. */
.field>*+*{margin-top:0}

.ok-banner{background:var(--green-soft);border:1px solid var(--green-line);color:var(--green);
  border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;margin-bottom:16px}

/* What the employee cannot change, shown rather than hidden: it answers
   "where do I change this?" on the row instead of leaving them hunting. */
.readonly-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  font-size:14px;color:var(--sub)}
.readonly-row b{color:var(--ink-2);font-weight:600}

/* Profile: the editable form beside what an admin owns. Two columns rather
   than one long scroll, so the read-only card reads as a note alongside
   the form rather than as more fields below it. */
.profile-grid{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,22rem);
  gap:16px;align-items:start}
@media(max-width:70rem){.profile-grid{grid-template-columns:minmax(0,34rem)}}

/* A short form does not get better by being 1100px wide — the label and the
   value it belongs to end up a screen apart. Only forms are capped; tables,
   calendars and lists still use the full pane. */
.narrow{max-width:34rem}

/* =========================================================
   CREATORS — uploaded sheets and what came back
   =========================================================
   Hand-written like the rest of this file: the employee app has no build
   step, so utility classes written in the JS templates would compile to
   nothing. */

.cx-note{border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.55;
  background:#F4F4F7;color:var(--ink);margin-bottom:14px}
.cx-note-ok{background:#E9F7EF;color:#1B6B3A}
.cx-note-bad{background:#FBEAE8;color:#B8352A}



.sm{font-size:12.5px}


/* ---------- Creator insights, employee side ----------
   Deliberately the admin panel's layout: header buttons on the right of the
   title, then one bordered panel holding a search box, the run table and the
   result count. The two halves of the app show the same feature, so they
   should not look like two different products. */
.phead-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.cxbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.cxbtn svg{width:16px;height:16px;flex:0 0 16px}
.cxbtn:hover{border-color:var(--brand);color:var(--brand-dk)}
.cxbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.cxbtn.primary:hover{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff}
.cxbtn:disabled{opacity:.5;cursor:not-allowed}

.cx-panel{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.cx-toolbar{display:flex;justify-content:flex-end;padding:12px 14px;border-bottom:1px solid var(--line)}
.cx-search{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;min-width:min(18rem,100%);color:var(--sub)}
.cx-search svg{width:16px;height:16px;flex:0 0 16px}
.cx-search input{border:0;outline:0;font:inherit;font-size:13.5px;width:100%;background:none;color:var(--ink)}
.cx-search:focus-within{border-color:var(--brand)}

.cx-empty{padding:34px 16px}
.cx-foot{padding:12px 14px;border-top:1px solid var(--line);font-size:13px}

.cx-scroll{overflow-x:auto}
.cx-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cx-table th{background:#FAFAF8;color:var(--sub);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-align:left;
  padding:10px 14px;white-space:nowrap;border-bottom:1px solid var(--line)}
.cx-table td{padding:12px 14px;border-top:1px solid #F1F1EE;vertical-align:top}
.cx-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-table .ok{color:#1B6B3A}
.cx-table .warn{color:#9A6400}
.cx-table .bad{color:#B8352A}
.cx-cell{max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cx-name{display:block;font-weight:600;word-break:break-word;max-width:20rem;color:var(--ink);text-decoration:none}
a.cx-name:hover{text-decoration:underline}
.cx-when{color:var(--sub);white-space:nowrap}
.cx-sub{display:block;margin-top:3px;font-size:11.5px;color:var(--sub);font-weight:400;line-height:1.45}
.cx-hint{margin:10px 0 0;font-size:12.5px;color:var(--sub);line-height:1.55}

/* Row actions read as links, not as a row of competing buttons. */
.cx-act{white-space:nowrap;text-align:right}
.cxlink{display:inline-flex;align-items:center;gap:5px;border:0;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--sub);
  cursor:pointer;padding:3px 7px;border-radius:7px}
.cxlink svg{width:14px;height:14px;flex:0 0 14px}
.cxlink:hover{background:#F4F4F1;color:var(--ink)}
.cxlink.brand{color:var(--brand-dk)}
.cxlink.bad{color:#B8352A}
.cxlink:disabled{opacity:.5;cursor:not-allowed}

.cx-tag{display:inline-block;border-radius:7px;padding:2px 8px;font-size:11.5px;font-weight:600;
  background:#F1F1EE;color:var(--sub);white-space:nowrap}
.cx-tag.ok{background:#E9F7EF;color:#1B6B3A}
.cx-tag.info{background:#EEEEFD;color:#3B38C4}
.cx-tag.warn{background:#FBF0DC;color:#8A5D0B}
.cx-tag.bad{background:#FBEAE8;color:#B8352A}

/* ---------- the one modal ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:none}
.sheet-wrap.on{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(22,22,26,.45)}
.sheet{position:relative;margin:6vh auto;max-width:min(46rem,94vw);max-height:88vh;
  overflow:auto;padding:22px;border-radius:16px}
.sheet h3{font-size:17px;margin:0 0 4px}
.sheet .input{margin-top:12px}
.sheet-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ---------- the single-lookup result ---------- */
.cxc{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.cxc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cxc-name{display:block;font-weight:600}
.cxc-handle{font-size:13px;color:var(--brand-dk);text-decoration:none}
.cxc-handle:hover{text-decoration:underline}
.cxc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:10px;margin-top:8px}
/* Best and quietest reel are a pair — a range, not two unrelated figures —
   so they sit on their own row rather than wrapping into the four above. */
.cxc-grid.two{grid-template-columns:repeat(2,1fr)}
.cxc-stat{background:#FAFAF8;border:1px solid #F1F1EE;border-radius:10px;padding:9px 11px;min-width:0}
.cxc-k{display:block;font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxc-stat b{display:block;margin-top:2px;font-size:15px;font-variant-numeric:tabular-nums}
/* Engagement rate is the one number people quote, so it is accented rather
   than given a row of its own — a full-width tile threw the column widths
   out against the reel row below it. */
.cxc-stat.key{background:#F2F2FD;border-color:#E2E2FA}
.cxc-stat.key b{color:var(--brand-dk)}

.cxc-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:#F1F1EE}
.cxc-who{flex:1;min-width:0}
.cxc-city{display:block;margin-top:3px;font-size:12.5px;font-weight:500}
.cxc-bio{margin:10px 0 0;font-size:12.5px;color:var(--sub);line-height:1.55;
  white-space:pre-line;word-break:break-word}

/* A label for the group beneath it, not a heading in the document — small,
   spaced, and carrying the sample size where there is one. */
.cxc-section{display:flex;align-items:baseline;gap:8px;margin:18px 0 0;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.cxc-note{font-weight:500;letter-spacing:0;text-transform:none;color:var(--sub)}

.cxc-empty{margin:8px 0 0;font-size:12.5px;color:var(--sub);line-height:1.55}

.cxc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--sub)}
.cxc-foot a{color:var(--brand-dk);text-decoration:none;word-break:break-all}
.cxc-foot a:hover{text-decoration:underline}
.cxc-saved{margin:8px 0 0;font-size:11.5px;color:#A3A3A0;line-height:1.5}

/* A phone cannot show eight columns. Sheet, what came back, status and the
   actions are the four that answer "is it done and can I send it on?" */
@media (max-width:760px){
  .cx-table th:nth-child(1), .cx-table td:nth-child(1),
  .cx-table th:nth-child(3), .cx-table td:nth-child(3),
  .cx-table th:nth-child(6), .cx-table td:nth-child(6){display:none}
  .cx-toolbar{justify-content:stretch}
  .cx-search{min-width:100%}
  .sheet{margin:0;max-width:100%;max-height:100vh;border-radius:0;min-height:100vh}
}