/* ======================================================================
   HFC PORTAL — PREMIUM DESIGN LAYER  (portal-polish.css)
   Look and feel only. No data, no permissions, no behaviour.
   One file, loaded last in <head>. Rules start with "html body" so they
   beat the styles that the portal-*.js files add later.

   The idea
   - ONE typeface for the whole interface: Manrope (geometric, calm, very
     readable). The serif (Fraunces) appears in a single place: the warm
     "Hi, Name" greeting and the sign-in title.
   - Surfaces are layered like paper: page < card < raised card, separated
     by a hairline and a soft inner highlight, never by glow.
   - The mint green is used only for what is actionable or selected.
   - Everything sits on a 4px grid with generous breathing room.
   ====================================================================== */

:root{
  --font-ui:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-voice:'Fraunces',Georgia,'Times New Roman',serif;

  /* ---- dark (default) ---- */
  --bg:#090c0b;
  --bg-raised:#0f1412;
  --card:#111715;
  --card-2:#161d1a;
  --card-border:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.06);
  --text:#f3f0e8;
  --text-dim:#a7b0ab;
  --text-faint:#707b75;
  --accent:#34d49c;
  --accent-dim:#1f8a67;
  --accent-ghost:rgba(52,212,156,.11);
  --accent-ink:#04150e;
  --admin:#d8bb78;
  --admin-ghost:rgba(216,187,120,.13);
  --danger:#ea7f63;
  --radius:16px;
  --radius-sm:10px;
  --hl:inset 0 1px 0 rgba(255,255,255,.045);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-pop:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 4px rgba(0,0,0,.4), 0 28px 60px -20px rgba(0,0,0,.85);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"]{
  --bg:#f5f3ed;
  --bg-raised:#ffffff;
  --card:#ffffff;
  --card-2:#faf8f3;
  --card-border:rgba(20,32,27,.09);
  --line:rgba(20,32,27,.07);
  --text:#15201b;
  --text-dim:#4a5750;
  --text-faint:#7d8982;
  --accent:#0f8f65;
  --accent-dim:#0b6e4e;
  --accent-ghost:rgba(15,143,101,.09);
  --accent-ink:#ffffff;
  --admin:#8f6d1e;
  --admin-ghost:rgba(143,109,30,.11);
  --danger:#bf4a2c;
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(20,32,27,.06), 0 16px 36px -22px rgba(20,32,27,.22);
  --shadow-pop:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(20,32,27,.08), 0 26px 56px -22px rgba(20,32,27,.3);
}

/* ---------- the page ---------- */
html body{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:14.5px;
  line-height:1.55;
  letter-spacing:-.006em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-synthesis:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 420px at 50% -220px, rgba(52,212,156,.075), transparent 70%),
    radial-gradient(700px 360px at 100% 0, rgba(216,187,120,.035), transparent 70%);
  background-attachment:fixed;
}
:root[data-theme="light"] body{
  background-image:radial-gradient(1000px 380px at 50% -240px, rgba(15,143,101,.06), transparent 70%);
}

/* every piece of text uses the one typeface (icons and code excepted) */
html body :where(*:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *):not(.material-icons)){font-family:var(--font-ui) !important;}
html body h1, html body h2, html body h3, html body h4{font-weight:700;letter-spacing:-.025em;line-height:1.2;}
html body button, html body input, html body select, html body textarea{font-weight:600;}
html body input, html body textarea{font-weight:500;}
html body td, html body th, html body [class*="num"], html body [class*="count"], html body [class*="stat"], html body [class*="total"]{font-variant-numeric:tabular-nums;}

/* the voice: one serif moment */
html body .hd-greeting, html body #bd-wish h2, html body .signin-card h1, html body .mtg-hello, html body .mw-who h2{
  font-family:var(--font-voice) !important;font-weight:500;letter-spacing:-.02em;font-optical-sizing:auto;
}
html body .hd-greeting{font-size:clamp(28px,4vw,38px);line-height:1.1;}
html body .signin-card h1{font-size:26px;}

/* ---------- sign-in ---------- */
html body .signin-card{background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--card-border);border-radius:22px;box-shadow:var(--shadow-pop);padding:48px 40px;}
html body .signin-mark, html body .brand-mark{background:linear-gradient(160deg,#25a37a,#16684d);box-shadow:var(--hl),0 6px 16px -8px rgba(0,0,0,.6);}

/* ---------- top bar ---------- */
html body header{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line);box-shadow:none;
}
html body header::before{display:none;}
:root[data-theme="light"] body header{background:color-mix(in srgb,#fff 80%,transparent);}
html body .brand-text{font-weight:800;font-size:16px;letter-spacing:-.03em;}
html body .brand-text span{font-weight:500;letter-spacing:0;color:var(--text-faint);}

html body .header-row .signout-btn{
  background:transparent;border:1px solid var(--card-border);color:var(--text-dim);font-weight:600;font-size:13px;box-shadow:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
html body .header-row .signout-btn:hover{background:var(--card-2);border-color:rgba(255,255,255,.16);color:var(--text);transform:none;}
:root[data-theme="light"] body .header-row .signout-btn:hover{border-color:rgba(20,32,27,.2);}
html body .header-row .my-dashboard-btn, :root[data-theme="light"] body .header-row .my-dashboard-btn{
  background:var(--accent) !important;background-image:none !important;border-color:transparent !important;color:var(--accent-ink) !important;font-weight:700;
  box-shadow:var(--hl),0 6px 18px -10px var(--accent) !important;
}
html body .header-row .my-dashboard-btn:hover{filter:brightness(1.07);transform:none;}
html body .tb-icons{background:transparent;border:1px solid var(--card-border);box-shadow:none;}
html body .tb-icons .signout-btn:hover, html body .tb-icons #portal-help-btn:hover{background:var(--card-2) !important;}
html body .tb-sep{background:var(--line);}
html body .header-row .role-badge.admin, html body .role-badge.admin{
  background:rgba(139,124,246,.14);color:#b7acff;border:1px solid rgba(139,124,246,.42);font-weight:700;letter-spacing:.01em;
}
:root[data-theme="light"] body .header-row .role-badge.admin, :root[data-theme="light"] body .role-badge.admin{background:rgba(99,81,214,.1);color:#5340c9;border-color:rgba(99,81,214,.38);}
html body .role-badge.ticket-admin{background:var(--accent-ghost);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);}

/* ---------- main navigation (a quiet segmented dock) ---------- */
html body .view-tabs{background:var(--bg-raised);border:1px solid var(--card-border);box-shadow:var(--hl);}
:root[data-theme="light"] body .view-tabs{background:var(--card);}
html body .view-tabs .view-tab:not(.grouped-route-tab), html body .view-tabs .nav-group-btn{
  font-weight:600;font-size:13.5px;letter-spacing:-.005em;color:var(--text-dim);
}
html body .view-tabs .view-tab:not(.grouped-route-tab):hover, html body .view-tabs .nav-group-btn:hover{background:transparent;color:var(--text);}
html body .view-tabs .view-tab.active:not(.grouped-route-tab), html body .view-tabs .nav-group.active-group .nav-group-btn, html body .view-tabs .nav-group.open .nav-group-btn{color:var(--text);}
html body .tb-pill{background:var(--card-2);border:1px solid var(--card-border);box-shadow:var(--hl),0 2px 8px -2px rgba(0,0,0,.4);}
:root[data-theme="light"] body .tb-pill{background:#fff;box-shadow:0 1px 2px rgba(20,32,27,.1),0 4px 12px -4px rgba(20,32,27,.12);}
html body .nav-group-option.active::after{box-shadow:none;}
html body .nav-group-menu, html body .nav-menu, html body [class*="dropdown-menu"]{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow-pop);
}

/* sub-tab bars */
html body .admin-subtabs, html body .repo-subtabs, html body .mlf-subtabs, html body .sa-tabs{background:var(--bg-raised);border:1px solid var(--card-border);border-radius:14px;box-shadow:var(--hl);}
html body .admin-subtab, html body .task-subtab, html body .completion-sub-tab, html body .progress-inner-tab, html body .repo-subtab, html body .mlf-subtab, html body .sa-tab{font-weight:600;border-radius:10px;color:var(--text-dim);}
html body .admin-subtab.active, html body .task-subtab.active, html body .completion-sub-tab.active, html body .progress-inner-tab.active, html body .repo-subtab.active, html body .mlf-subtab.active, html body .sa-tab.active{
  color:var(--text);background:var(--card-2);border-color:var(--card-border);box-shadow:var(--hl),0 2px 6px -2px rgba(0,0,0,.35);
}
:root[data-theme="light"] body .sa-tab.active, :root[data-theme="light"] body .repo-subtab.active, :root[data-theme="light"] body .admin-subtab.active{background:#fff;box-shadow:0 1px 2px rgba(20,32,27,.1);}

/* ---------- cards and panels ---------- */
html body .intern-card, html body .stat-box, html body .task-card, html body .ann-card, html body .sa-card, html body .hx-card,
html body .leaderboard, html body .profile-card, html body .bucket, html body .dosti-card{
  background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);
}
:root[data-theme="light"] body .intern-card, :root[data-theme="light"] body .stat-box, :root[data-theme="light"] body .task-card, :root[data-theme="light"] body .ann-card,
:root[data-theme="light"] body .sa-card, :root[data-theme="light"] body .hx-card{background:var(--card);}
html body .intern-card:hover, html body .task-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--card-border));transform:translateY(-1px);box-shadow:var(--shadow-pop);transition:all .25s var(--ease);}

/* hero panels: a calm raised surface with the faintest tint in one corner */
html body [class*="hero"]:not([class*="hero-"]){
  background:radial-gradient(640px 220px at 0 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),linear-gradient(180deg,var(--card-2),var(--card)) !important;
  border:1px solid var(--card-border) !important;border-radius:20px !important;box-shadow:var(--shadow) !important;
}
:root[data-theme="light"] body [class*="hero"]:not([class*="hero-"]){background:radial-gradient(640px 220px at 0 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),#fff !important;}
html body [class*="hero"]:not([class*="hero-"])::before, html body [class*="hero"]:not([class*="hero-"])::after{background:none !important;box-shadow:none !important;}
html body .hd-sale, html body .hd-sale.done, html body .hd-sale.wait, html body .hd-completion, html body .hd-nudge, html body .bd-got, html body .hfc-nudge, html body .cnd-card, html body .ta-pend{
  background:linear-gradient(180deg,var(--card-2),var(--card)) !important;box-shadow:var(--shadow) !important;
}
html body .mtg-hello{background:none !important;-webkit-text-fill-color:currentColor;color:var(--text);}
html body .hfc-dp-top{background:var(--card-2) !important;}

/* big numbers */
html body .stat-box-value, html body .hd-stat-num, html body .hd-big-num, html body .hd-mtg-count, html body .mw-stat b, html body .hx-stat b{
  font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}

/* ---------- buttons ---------- */
html body .th-lens.on, html body .hx-btn.pri, html body .dk-act.go, html body .mw-av, html body .ip-av, html body .sa-go{
  background:var(--accent) !important;background-image:none !important;color:var(--accent-ink) !important;border-color:transparent !important;
  box-shadow:var(--hl) !important;font-weight:700;
}
html body .th-lens.on:hover, html body .hx-btn.pri:hover, html body .sa-go:hover{filter:brightness(1.07);}
html body .th-lens, html body .mine-toggle, html body .filter-select{font-weight:600;}
html body .leaderboard-bar-fill, html body .dk-prog i, html body .hx-prog i, html body .cnd-bar i, html body .ta-bar i{background:var(--accent) !important;background-image:none !important;}

/* ---------- inputs ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), html body textarea, html body select:not([multiple]):not([size]){
  background-color:var(--bg-raised);border:1px solid var(--card-border);border-radius:12px;color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
:root[data-theme="light"] body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), :root[data-theme="light"] body textarea{background-color:#fff;}
html body input:focus, html body textarea:focus, html body select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ghost);}
html body ::placeholder{color:var(--text-faint);font-weight:500;}
html body .search-box input{padding-left:40px;height:44px;}

/* ---------- admin helper chips (View as / Activity) ---------- */
html body #hfc-va-fab, html body #hfc-act-fab{
  background:var(--card) !important;color:var(--text-dim) !important;border:1px solid var(--card-border) !important;
  font-weight:600 !important;font-size:12px !important;opacity:.92;box-shadow:var(--shadow);
}
html body #hfc-va-fab:hover, html body #hfc-act-fab:hover{color:var(--text) !important;border-color:var(--accent-dim) !important;opacity:1;}
@media (max-width:760px){
  html body #hfc-va-fab, html body #hfc-act-fab{bottom:calc(68px + env(safe-area-inset-bottom,0px)) !important;padding:6px 11px !important;font-size:11px !important;}
}

/* ---------- scrollbars ---------- */
html body ::-webkit-scrollbar{width:10px;height:10px;}
html body ::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
html body ::-webkit-scrollbar-thumb:hover{background:var(--text-faint);background-clip:content-box;}
html body ::selection{background:var(--accent-ghost);color:var(--text);}

/* ---------- tablet: header must fit ---------- */
@media (min-width:761px) and (max-width:1100px){
  html body .brand-text{display:none;}
  html body .header-row{gap:8px;}
  html body .header-row .signout-btn{padding:0 12px;}
  html body .header-row .role-badge{max-width:120px;padding:0 10px;}
  html body .tb-sep{margin:0 1px;}
  html body .view-tabs{border-radius:22px;}
  html body .view-tabs .view-tab:not(.grouped-route-tab), html body .view-tabs .nav-group-btn{padding:8px 13px;}
}

/* ---------- motion: respect the person ---------- */
@media (prefers-reduced-motion:reduce){
  html body *, html body *::before, html body *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- Task Hub: hero greeting + attention banner contrast + mobile search ---------- */
html body .mw-who h2{font-size:clamp(24px,3.2vw,30px);line-height:1.12;}
html body .mw-alert{background:rgba(224,160,90,.10);}
:root[data-theme="light"] html body .mw-alert, :root[data-theme="light"] body .mw-alert{background:#fbefdc;border-color:#e3b878;color:#7a4a0a;}
:root[data-theme="light"] body .mw-alert button{color:#7a4a0a;border-color:#c98a2e;}
@media (max-width:760px){
  html body .toolbar .search-box{flex:0 0 auto;width:100%;}
  html body .toolbar{gap:8px;}
}

/* Phones: small close / collapse buttons get a thumb-sized touch area (tested at 390 px). */
@media (max-width: 760px) {
  .ta-collapse, .hd-spotlight-close, .hd-try-x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .hd-try-add { min-height: 38px; padding-left: 14px; padding-right: 14px; }
  #mlf-fb-showall { width: 24px; height: 24px; margin: 8px; }
}