/* ============================================================================
     SMI Technical Tracker — visual theme (redesign 2026-10-26, "Data-Dense Dashboard")
     Light, calm, information-first: blue primary + amber accent, slate neutrals, white surfaces, hairline borders,
     compact tables, line icons (SVG sprite in index.html) instead of emoji, visible focus, reduced-motion safe.
     Old token names (--teal, --navy …) are kept as aliases so every existing class and inline style follows the new palette.
     Print / certificate / gantt layouts are kept intact.
     ========================================================================= */
  :root{
    /* brand */
    --primary:#1d4ed8;  --primary-600:#2563eb;  --primary-700:#1e40af;
    --primary-50:#eff6ff;  --primary-100:#dbeafe;
    --accent:#d97706;
    /* legacy names -> new palette */
    --navy:#0f172a;  --navy-2:#1e293b;  --navy-3:#334155;
    --teal:var(--primary);  --teal-2:var(--primary-600);  --teal-dark:var(--primary-700);  --teal-light:var(--primary-50);

    /* surfaces */
    --bg:#f4f6fa;
    --bg-2:#f8fafc;
    --card:#ffffff;
    --line:#e2e8f0;
    --line-strong:#cbd5e1;

    /* text (all pass 4.5:1 on white) */
    --text:#0f172a;
    --muted:#475569;
    --muted-2:#5a6a80;

    /* semantic */
    --red:#b91c1c;      --red-bg:#fdeeed;
    --amber:#a15a0c;    --amber-bg:#fdf4e3;
    --green:#1d6b43;    --green-bg:#e9f6ee;
    --purple:#5b3fa0;   --purple-bg:#f1edfb;
    --blue:#1e40af;     --blue-bg:#e9f0fd;

    /* KPI accent rotation */
    --k1:#86a8ec; --k2:#78c4d2; --k3:#ac9ae6; --k4:#ecb470; --k5:#82c9a3; --k6:#ee97a8;

    /* elevation */
    --sh-1:0 1px 2px rgba(15,23,42,.05);
    --sh-2:0 4px 12px -2px rgba(15,23,42,.10), 0 2px 4px -2px rgba(15,23,42,.06);
    --sh-3:0 18px 48px -12px rgba(15,23,42,.28);
    --sh-teal:0 6px 20px -8px rgba(37,99,235,.5);
    --ring:0 0 0 3px rgba(37,99,235,.18);
    /* soft family used by buttons, avatars, bars and the table tints */
    --soft-blue:#e4ecfc; --soft-blue-hover:#d3e0fa; --soft-blue-line:#c5d5f7; --soft-blue-ink:#1e3a8a;
    --fill-blue:#86a8ec; --fill-green:#82c9a3;
    --row-alt:#f3f6fb; --row-hover:#e9f0fc;

    --radius:8px;
    --radius-lg:12px;
    --radius-sm:6px;
    --ease:cubic-bezier(.4,0,.2,1);
    --sidebar-w:240px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--text); background:var(--bg);
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-variant-numeric:tabular-nums;
  }
  ::selection{background:rgba(37,99,235,.22);}
  img{max-width:100%;}
  /* One visible focus style for everything keyboard-reachable (never removed, only restyled) */
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--primary-600); outline-offset:2px;}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  /* line icons from the sprite in index.html: <svg class="ico"><use href="#i-name"/></svg> */
  .ico{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em;}

  @keyframes modalIn{from{opacity:0; transform:translateY(8px) scale(.985);} to{opacity:1; transform:none;}}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}

  /* ===== App shell: left module sidebar + module content area ===== */
  .app-shell{display:flex; min-height:100vh; align-items:stretch;}
  .module-sidebar{
    flex:none; width:var(--sidebar-w); position:sticky; top:0; align-self:flex-start;
    height:100vh; overflow-y:auto;
    background:var(--card); border-right:1px solid var(--line);
    display:flex; flex-direction:column; padding:14px 12px 14px; gap:0;
    scrollbar-width:thin;
  }
  .module-sidebar-title{padding:2px 6px 14px; margin-bottom:4px; border-bottom:1px solid var(--line); display:flex; align-items:center;}
  .module-sidebar-title img{width:auto; height:auto; max-width:132px; max-height:44px; background:none; padding:0; border-radius:0; box-shadow:none;}
  .nav-group{display:flex; flex-direction:column; gap:2px; margin-top:12px;}
  .nav-group.nav-bottom{margin-top:auto; padding-top:12px; border-top:1px solid var(--line);}
  .nav-group-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); padding:0 10px 4px;}
  .module-btn{
    position:relative; width:100%; background:none; border:none; color:var(--muted); cursor:pointer;
    padding:8px 10px; min-height:38px; border-radius:8px;
    display:flex; align-items:center; gap:11px; text-align:left;
    font-family:inherit; font-size:13px; font-weight:500;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .module-btn-icon{display:inline-flex; width:20px; height:20px; flex:none; align-items:center; justify-content:center; color:var(--muted-2); transition:color .15s var(--ease);}
  .module-btn-icon .ico{width:20px; height:20px;}
  .module-btn-label{line-height:1.2;}
  .module-btn:hover{background:#f1f5f9; color:var(--text);}
  .module-btn:hover .module-btn-icon{color:var(--text);}
  .module-btn.active{background:var(--primary-50); color:var(--primary-700); font-weight:600;}
  .module-btn.active .module-btn-icon{color:var(--primary-600);}
  .module-btn.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--fill-blue);}
  /* The whole content area fades in once on load. .module-content is never display-toggled, so switching modules does not replay it. */
  .module-content{flex:1; min-width:0; animation:fadeIn .2s var(--ease) both;}
  .module-pane{min-height:100vh;}

  /* Icon rail: automatic on narrow screens, or chosen with the toggle (html.sidebar-min). Labels stay available to screen readers and as tooltips. */
  .sidebar-foot{padding-top:4px;}
  .sidebar-toggle{position:relative; width:100%; background:none; border:none; color:var(--muted); cursor:pointer; padding:8px 10px; min-height:38px; border-radius:8px; display:flex; align-items:center; gap:11px; text-align:left; font-family:inherit; font-size:13.5px; font-weight:500; transition:background .15s var(--ease), color .15s var(--ease);}
  .sidebar-toggle .module-btn-icon{color:var(--muted-2);}
  .sidebar-toggle:hover{background:#f1f5f9; color:var(--text);}
  .sidebar-toggle:hover .module-btn-icon{color:var(--text);}
  .sidebar-toggle .ico-open{display:none;}
  .module-sidebar, .module-sidebar-title{transition:width .18s var(--ease), padding .18s var(--ease);}
  @media(max-width:1100px){ .sidebar-foot{display:none;} }
  @media(max-width:1100px){
    :root{--sidebar-w:64px;}
    .module-sidebar{padding:12px 8px;}
    .module-sidebar-title{justify-content:center; padding:2px 0 12px;}
    .module-sidebar-title img{max-width:44px;}
    .nav-group-label{display:none;}
    .nav-group + .nav-group{border-top:1px solid var(--line); padding-top:8px; margin-top:8px;}
    .module-btn{justify-content:center; padding:9px 0; min-height:42px;}
    .module-btn-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
  }
  html.sidebar-min{--sidebar-w:64px;}
  html.sidebar-min .module-sidebar{padding:12px 8px; scrollbar-width:none;}
  html.sidebar-min .module-sidebar::-webkit-scrollbar{display:none;}
  html.sidebar-min .module-sidebar-title{justify-content:center; padding:2px 0 12px;}
  html.sidebar-min .module-sidebar-title img{max-width:44px;}
  html.sidebar-min .sidebar-toggle{justify-content:center; padding:9px 0; min-height:42px;}
  html.sidebar-min .sidebar-toggle .ico-close{display:none;}
  html.sidebar-min .sidebar-toggle .ico-open{display:block;}
  html.sidebar-min .nav-group-label{display:none;}
  html.sidebar-min .nav-group + .nav-group{border-top:1px solid var(--line); padding-top:8px; margin-top:8px;}
  html.sidebar-min .module-btn{justify-content:center; padding:9px 0; min-height:42px;}
  html.sidebar-min .module-btn-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
  @media(max-width:1100px){ .module-sidebar{scrollbar-width:none;} .module-sidebar::-webkit-scrollbar{display:none;} }
  @media(max-width:640px){
    :root{--sidebar-w:52px;}
    .module-sidebar{padding:10px 5px;}
    .module-sidebar-title img{max-width:36px;}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
    .card{padding:12px 12px 10px;}
    .card .num{font-size:20px;}
  }

  /* ===== Header ===== */
  header{
    position:relative; background:var(--card); color:var(--text);
    padding:18px 28px 14px; border-bottom:1px solid var(--line);
  }
  header h1{margin:0; display:flex; align-items:center; gap:11px; font-size:20px; font-weight:700; letter-spacing:-.015em; color:var(--navy);}
  header h1 .hdr-ico{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none;
    border-radius:8px; background:var(--primary-50); color:var(--primary-600); border:1px solid var(--primary-100);
  }
  header h1 .hdr-ico .ico{width:20px; height:20px;}
  header p{margin:5px 0 0 47px; font-size:13px; color:var(--muted);}
  .role-switcher-slot{position:absolute; top:16px; right:24px; display:flex; align-items:center; gap:10px; z-index:1;}
  .user-chip{display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 5px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2); font-size:12px; color:var(--muted);}
  .user-chip .user-avatar{width:26px; height:26px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); box-shadow:inset 0 0 0 1px var(--soft-blue-line); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase;}
  .user-chip strong{color:var(--text); font-weight:600;}
  .role-switcher-slot select{
    -webkit-appearance:none; appearance:none; background:#fff; color:var(--text);
    border:1px solid var(--line-strong); border-radius:8px; padding:7px 30px 7px 12px; font-size:12px; font-weight:600; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
  }
  .role-switcher-slot select:hover{border-color:var(--muted-2);}
  .role-switcher-slot select option{color:var(--text);}
  @media(max-width:760px){
    header{padding:14px 16px 12px;}
    .role-switcher-slot{position:static; margin:10px 0 0 47px; justify-content:flex-start; flex-wrap:wrap;}
    header p{margin-left:0;}
  }

  /* ===== Auth ===== */
  .auth-screen{
    position:fixed; inset:0; z-index:100; padding:20px;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(700px 420px at 12% 6%, rgba(37,99,235,.10), transparent 62%),
      radial-gradient(700px 420px at 94% 96%, rgba(217,119,6,.08), transparent 62%),
      var(--bg);
  }
  .auth-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:30px 28px; width:100%; max-width:400px; box-shadow:var(--sh-3);
    animation:modalIn .3s var(--ease) both;
  }
  .auth-card h2{margin:0 0 4px; font-size:20px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px;}
  .auth-card h2 .hdr-ico{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:8px; background:var(--primary-50); color:var(--primary-600);}
  .auth-error{
    background:var(--red-bg); color:var(--red); border:1px solid #fecaca; border-radius:var(--radius-sm);
    padding:9px 12px; font-size:12px; margin-bottom:12px;
  }
  .auth-actions{display:flex; flex-direction:column; gap:9px; margin-top:8px;}

  /* ===== Tab nav ===== */
  nav{
    display:flex; gap:2px; background:var(--card); border-bottom:1px solid var(--line);
    padding:0 20px; overflow-x:auto; position:sticky; top:0; z-index:20; scrollbar-width:thin;
  }
  nav button{
    position:relative; border:none; background:none; padding:12px 14px 11px; margin-bottom:-1px;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  }
  nav button:hover{color:var(--text); background:var(--bg-2);}
  nav button.active{color:var(--primary-700); border-bottom-color:#6f93e0;}

  main{padding:22px 28px 48px; max-width:1400px; margin:0 auto;}
  /* Some tabs' tables need the full content width instead of the shared cap — the POCs tab (js/poc.js), the Projects tab (js/implementation.js),
     the Calendar tab (js/activity.js) and Requests each toggle this class on their #main element only while that tab is active. */
  #pocMain.wide, #implMain.wide, #activityMain.wide, #requesttechMain.wide{max-width:none;}
  @media(max-width:760px){ main{padding:16px 14px 40px;} }

  /* ===== KPI / stat cards ===== */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px;}
  .card{
    position:relative; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:15px 16px 13px; overflow:hidden; box-shadow:var(--sh-1);
    transition:box-shadow .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
  }
  .card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--kacc,var(--primary-600));}
  .cards .card:nth-child(6n+1){--kacc:var(--k1);}
  .cards .card:nth-child(6n+2){--kacc:var(--k2);}
  .cards .card:nth-child(6n+3){--kacc:var(--k3);}
  .cards .card:nth-child(6n+4){--kacc:var(--k4);}
  .cards .card:nth-child(6n+5){--kacc:var(--k5);}
  .cards .card:nth-child(6n){--kacc:var(--k6);}
  .card .num{font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums;}
  .card .lbl{font-size:12px; color:var(--muted); margin-top:4px; font-weight:500; line-height:1.35;}
  .card.warn{background:var(--card); border-color:#f4d0cc;}
  .card.warn::before{background:#ee97a8;}
  .card.warn .num{color:var(--red);}
  .card.clickable{cursor:pointer;}
  .card.clickable:hover{box-shadow:var(--sh-2); transform:translateY(-1px); border-color:var(--kacc,var(--primary-600));}
  .card.clickable:active{transform:none;}
  .card.clickable:focus-visible{outline-offset:1px;}

  tr.clickable-row{cursor:pointer; transition:background .12s var(--ease);}
  tr.clickable-row:hover{background:var(--primary-50);}

  .section-title{
    font-size:16px; font-weight:600; margin:28px 0 12px; color:var(--navy);
    display:flex; align-items:center; gap:9px; letter-spacing:-.005em;
  }
  .section-title::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--fill-blue);}
  .toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap;}

  /* ===== Buttons ===== */
  .btn{
    background:var(--soft-blue); color:var(--soft-blue-ink); border:1px solid var(--soft-blue-line); border-radius:8px;
    padding:7px 14px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; line-height:1.25;
    transition:background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .btn:hover{background:var(--soft-blue-hover); border-color:#aec3f2;}
  .btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;}
  .btn.secondary{background:#fff; color:var(--navy-2); border:1px solid var(--line-strong); box-shadow:var(--sh-1);}
  .btn.secondary:hover{background:var(--bg-2); border-color:var(--muted-2);}
  .btn.danger{background:var(--red); border-color:var(--red); color:#fff;}
  .btn.danger:hover{background:#991b1b; border-color:#991b1b; color:#fff;}
  .btn.small{padding:4px 10px; min-height:30px; font-size:12px; border-radius:6px;}
  @media(pointer:coarse){ .btn{min-height:44px;} .btn.small{min-height:40px;} nav button{padding:14px 16px 13px;} .module-btn{min-height:44px;} }

  /* ===== Tables ===== */
  .table-scroll-wrap{overflow-x:auto; border-radius:var(--radius); margin-bottom:0; box-shadow:var(--sh-1); border:1px solid var(--line);}
  table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border-radius:var(--radius); overflow:hidden;}
  .table-scroll-wrap table{border:none; border-radius:0; box-shadow:none;}
  th,td{padding:9px 12px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); vertical-align:top;}
  th{
    background:var(--bg-2); color:var(--muted); font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:.045em; position:relative; white-space:nowrap;
    border-bottom:1px solid var(--line-strong);
  }
  tbody tr{transition:background .1s var(--ease);}
  @media screen{
    table:not(.kv):not(.no-zebra):not(.week-grid) tbody tr:nth-child(even) > td{background:var(--row-alt);}
  }
  table:not(.kv):not(.no-zebra):not(.week-grid) tbody tr:hover > td{background:var(--row-hover);}
  tr:last-child td{border-bottom:none;}
  td .muted-small{color:var(--muted-2);}

  .pagination-bar{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 4px;}
  .pagination-bar[hidden]{display:none;} /* the plain [hidden] UA rule alone loses to .pagination-bar{display:flex} above */
  .pagination-bar .btn.small{min-width:34px;}

  /* ===== Implementation module: RAG, Kanban, Timeline ===== */
  .rag-green{background:var(--green);}
  .rag-amber{background:var(--amber);}
  .rag-red{background:var(--red);}
  .progress-track{background:#e9edf2; border-radius:999px; height:8px; width:100%; overflow:hidden;}
  .progress-fill{height:100%; border-radius:999px; background:var(--fill-blue);}
  .kc-who{display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:var(--text);}
  .kc-avatar{flex:none; width:22px; height:22px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .kc-avatar-none{background:var(--line-strong);}
  .kc-due{flex:none; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--muted); white-space:nowrap;}
  .kc-due-late{background:var(--red-bg); color:var(--red);} .kc-due-soon{background:var(--amber-bg); color:var(--amber);}
  .pa-task{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; margin-bottom:10px; background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:8px; transition:box-shadow .15s var(--ease);}
  .pa-task:hover{box-shadow:var(--sh-1);}
  .pa-task.is-late{border-left-color:var(--red);} .pa-task.is-soon{border-left-color:var(--amber);} .pa-task.is-done{border-left-color:var(--green);}
  .pa-task.is-done .pa-task-title > a, .pa-task.is-done .pa-task-title{color:var(--muted);}
  .pa-task-main{flex:1 1 280px; min-width:0;}
  .pa-task-title{font-weight:700; font-size:13px; color:var(--navy-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .pa-task-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}
  .gantt-row{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
  .gantt-label{width:190px; flex:none; font-size:12px;}
  .gantt-label .proj-name{font-weight:700; color:var(--navy-2); display:block;}
  .gantt-label .phase-name{color:var(--muted); font-size:11px;}
  .gantt-track{flex:1; background:#e9edf2; border-radius:6px; height:24px; position:relative; min-width:120px;}
  .gantt-bar{
    position:absolute; top:0; height:100%; border-radius:6px; display:flex; align-items:center;
    padding:0 8px; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden;
  }
  .gantt-bar.done, .gantt-bar.st-done{background:linear-gradient(180deg,#2f9463,var(--green));}
  .gantt-bar.active, .gantt-bar.st-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
  .gantt-bar.upcoming, .gantt-bar.st-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
  .gantt-bar.st-review{background:linear-gradient(180deg,#7b57c4,var(--purple));}

  /* ── Weekly Schedule (24-week grid, shiftable) ── */
  .week-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}
  .week-nav .btn{padding:3px 10px; font-size:11px;}
  .week-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; scrollbar-width:thin; box-shadow:var(--sh-1);}
  .week-grid{border-collapse:separate; border-spacing:0; font-size:11px; width:100%; table-layout:fixed;}
  .week-grid col.wk-c{width:42px;}
  .week-grid col.wk-c0{width:184px;}
  .week-grid th, .week-grid td{padding:0; text-align:center; vertical-align:middle;}
  .week-grid thead .wk-month th{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
    padding:6px 0 4px; border-bottom:1px solid var(--line); background:#f7f9fb;
  }
  .week-grid thead .wk-month th.wk-m-sep{border-left:1px solid var(--line);}
  .week-grid thead .wk-head th{
    background:#f7f9fb; font-weight:700; padding:5px 2px 6px; font-size:11px; line-height:1.2;
    border-bottom:2px solid var(--line); color:var(--navy-2);
  }
  .week-grid thead .wk-head th .wk-date{display:block; font-weight:500; font-size:8.5px; color:var(--muted); margin-top:2px;}
  .week-grid .wk-c0h, .week-grid td.wk-phase{
    text-align:left; padding:8px 12px; white-space:nowrap; position:sticky; left:0; z-index:1;
    box-shadow:1px 0 0 var(--line);
  }
  .week-grid .wk-c0h{background:#f7f9fb; z-index:3; font-weight:800; color:var(--navy-2); font-size:10px; text-transform:uppercase; letter-spacing:.4px;}
  .week-grid td.wk-phase{background:#fff; font-weight:700; color:var(--navy-2); font-size:11.5px;}
  .week-grid td.wk-phase .wk-sub{display:block; font-weight:500; font-size:9.5px; color:var(--muted); margin-top:1px;}
  .week-grid tbody tr:nth-child(even) td.wk-phase{background:#fbfcfd;}
  .week-grid tbody tr:hover td{background:#eef4f5;}
  .week-grid tbody tr:hover td.wk-phase{background:#e7eff0;}
  .week-grid tbody td.wk-cell{height:34px; border-bottom:1px solid var(--line); position:relative;}
  .week-grid tbody td.wk-cell .wk-seg{position:absolute; top:8px; bottom:8px; left:-1px; right:-1px;}
  .week-grid tbody td.wk-s0 .wk-seg{left:4px; border-top-left-radius:7px; border-bottom-left-radius:7px;}
  .week-grid tbody td.wk-s1 .wk-seg{right:4px; border-top-right-radius:7px; border-bottom-right-radius:7px;}
  .week-grid .wk-seg.tone-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
  .week-grid .wk-seg.tone-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
  .week-grid .wk-seg.tone-review{background:linear-gradient(180deg,#7b57c4,#5b3a9c);}
  .week-grid .wk-seg.tone-done{background:linear-gradient(180deg,#2f9463,#1c7a4d);}
  .week-grid tbody td.wk-cell.wk-now, .week-grid thead th.wk-now{background:rgba(15,107,114,.07);}
  .week-grid thead th.wk-now{box-shadow:inset 0 -3px 0 var(--teal);}
  .week-grid td.wk-cell.wk-now::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--teal); opacity:.55;}
  .week-legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; font-size:11px; color:var(--muted);}
  .week-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
  .week-legend i.tone-todo{background:#9aa6b5;}
  .week-legend i.tone-inprogress{background:#c9791f;}
  .week-legend i.tone-review{background:#5b3a9c;}
  .week-legend i.tone-done{background:#1c7a4d;}
  .week-legend i.tone-now{background:transparent; box-shadow:inset 0 0 0 2px var(--teal);}

  /* ── Timeline: all projects (today line, progress, past-plan, target diamond) and the actual line in the weekly grid ── */
  .tl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:8px 10px 6px; scrollbar-width:thin;}
  .tl-inner{position:relative;}
  .tl-head{display:flex; gap:10px; margin-bottom:6px;}
  .tl-head-label{width:190px; flex:none;}
  .tl-axis{position:relative; flex:1; height:34px; border-bottom:1px solid var(--line);}
  .tl-tick{position:absolute; top:0; transform:translateX(3px); font-size:10px; font-weight:700; color:var(--muted); white-space:nowrap;}
  .tl-tick.strong{color:var(--navy-2);}
  .tl-today-tag{position:absolute; top:15px; transform:translateX(-50%); font-size:9px; font-weight:800; background:#a5281c; color:#fff; padding:1px 5px; border-radius:8px; z-index:4; white-space:nowrap;}
  .tl-body{position:relative;}
  .tl-overlay{position:absolute; left:200px; right:0; top:0; bottom:0; pointer-events:none; z-index:1;}
  .tl-vline{position:absolute; top:0; bottom:0; width:1px; background:var(--line); opacity:.7;}
  .tl-vline.strong{opacity:1; background:var(--muted);}
  .tl-today{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--red); z-index:2;}
  .tl-body .gantt-label{position:sticky; left:0; z-index:3; background:var(--card);}
  .tl-body .gantt-track{z-index:2;}
  .tl-bar{padding:0; overflow:hidden;}
  .tl-fill{position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.28);}
  .tl-bar-text{position:relative; padding:0 6px; font-size:10px;}
  .tl-late{position:absolute; top:5px; bottom:5px; border:1px solid var(--red); border-left:none; border-radius:0 5px 5px 0; background:repeating-linear-gradient(45deg, rgba(200,50,50,.55) 0 5px, rgba(200,50,50,.2) 5px 10px);}
  .tl-ms{position:absolute; top:50%; width:11px; height:11px; margin:-6px 0 0 -6px; transform:rotate(45deg); background:var(--navy-2); border:2px solid var(--card); box-shadow:0 0 0 1px var(--navy-2); z-index:3;}
  .tl-ms.bad{background:var(--red); box-shadow:0 0 0 1px var(--red);} .tl-ms.ok{background:var(--green); box-shadow:0 0 0 1px var(--green);}
  .tl-flag{font-size:10px; font-weight:800; margin-left:4px;} .tl-flag.bad{color:var(--red);} .tl-flag.warn{color:var(--amber);}
  .week-legend i.tl-key-fill{background:rgba(0,0,0,.35);}
  .week-legend i.tl-key-late{background:repeating-linear-gradient(45deg, rgba(200,50,50,.7) 0 3px, rgba(200,50,50,.25) 3px 6px);}
  .week-legend i.tl-key-ms{width:9px; height:9px; transform:rotate(45deg); border-radius:1px; background:var(--navy-2);}
  .week-legend i.tone-act{background:var(--navy-2); height:4px; vertical-align:2px;} .week-legend i.tone-act.late{background:var(--red);}
  .week-grid tbody td.wk-cell .wk-act{position:absolute; left:-1px; right:-1px; bottom:3px; height:4px; background:var(--navy-2); border-radius:2px;}
  .week-grid tbody td.wk-cell .wk-act.late{background:var(--red);}

  /* ── Knowledge Base (forum) ── */
  .kb-search{flex:1; min-width:220px; max-width:520px;}
  .kb-search input, .kb-composer textarea, .kb-compose textarea, .kb-edit-reply{width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .kb-search input:focus, .kb-composer textarea:focus, .kb-compose textarea:focus, .kb-edit-reply:focus{outline:none; border-color:#25406f; box-shadow:0 0 0 3px rgba(37,99,235,.18);}
  .kb-cats{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px;}
  .kb-cat{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer;}
  .kb-cat span{color:var(--muted); font-weight:500; margin-left:3px;}
  .kb-cat.on{background:#25406f; color:#fff; border-color:#25406f;} .kb-cat.on span{color:#dbe3ee;}
  .kb-tagbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:2px 0 12px;}
  .kb-tag{border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:5px; padding:1px 7px; font-size:11px; cursor:pointer;}
  .kb-tag span{opacity:.7; margin-left:2px;} .kb-tag.on, .kb-tag:hover{border-color:var(--navy-2); color:var(--navy-2);}
  .kb-feed{display:flex; flex-direction:column; gap:8px;}
  .kb-card{display:flex; gap:12px; align-items:stretch; border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:12px 14px; cursor:pointer; box-shadow:var(--sh-1);}
  .kb-card:hover{border-color:var(--line-strong);}
  .kb-card.pinned{border-left:3px solid var(--amber);}
  .kb-stat{width:62px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; padding:4px 2px; color:var(--muted);}
  .kb-stat strong{font-size:17px; color:var(--text); line-height:1.1;} .kb-stat span{font-size:10px; text-transform:uppercase; letter-spacing:.3px; font-weight:700;}
  .kb-stat.replied{border-color:var(--green); color:var(--green);} .kb-stat.replied strong{color:var(--green);}
  .kb-stat.solved{background:#1d6b43; border-color:#1d6b43; color:#fff;} .kb-stat.solved strong{color:#fff;}
  .kb-card-main{flex:1; min-width:0;}
  .kb-card-title{font-size:14px; font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .kb-card-title a{color:var(--navy-2); text-decoration:none;} .kb-card-title a:hover{text-decoration:underline;}
  .kb-excerpt{color:var(--muted); font-size:12.5px; margin:3px 0 6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .kb-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px;}
  .kb-product{font-size:11px; font-weight:700; color:var(--navy-2); border:1px solid var(--line); border-radius:5px; padding:1px 7px; background:var(--card);}
  .kb-by{display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; margin-left:auto;}
  .kb-avatar{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#25406f; color:#fff; font-size:11px; font-weight:800; flex:none;}
  .kb-avatar.sm{width:22px; height:22px; font-size:9px;}
  .kb-pager{display:flex; gap:12px; align-items:center; justify-content:center; margin-top:12px;}
  .kb-post, .kb-reply{display:flex; gap:14px; border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:10px; box-shadow:var(--sh-1);}
  .kb-reply.accepted{border-color:var(--green); box-shadow:0 0 0 1px var(--green);}
  .kb-accepted-tag{color:var(--green); font-weight:800; font-size:12px; margin-bottom:6px;}
  .kb-post-main{flex:1; min-width:0;}
  .kb-title{font-size:20px; line-height:1.3; margin:0 0 8px; color:var(--navy-2);}
  .kb-byline{display:flex; gap:8px; align-items:center; margin:10px 0;}
  .kb-vote{width:54px; flex:none; align-self:flex-start; display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:8px; padding:6px 2px; cursor:pointer;}
  .kb-vote strong{font-size:16px; color:var(--text);} .kb-vote span:last-child{font-size:9px; text-transform:uppercase; font-weight:700;} .kb-vote-ico{font-size:12px;}
  .kb-vote:hover:not(:disabled){border-color:var(--navy-2);} .kb-vote.on{background:#25406f; border-color:#25406f; color:#fff;} .kb-vote.on strong{color:#fff;}
  .kb-vote:disabled{cursor:default; opacity:.65;}
  .kb-body{font-size:13.5px; line-height:1.65; color:var(--text); overflow-wrap:anywhere;}
  .kb-body p{margin:0 0 10px;} .kb-body ul, .kb-body ol{margin:0 0 10px; padding-left:22px;} .kb-body h5{font-size:14px; margin:14px 0 6px; color:var(--navy-2);}
  .kb-body blockquote{margin:0 0 10px; padding:4px 12px; border-left:3px solid var(--line-strong); color:var(--muted);}
  .kb-body code{background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:0 4px; font-size:12px;}
  .kb-code{border:1px solid var(--line); border-radius:6px; margin:0 0 12px; overflow:hidden;}
  .kb-code-head{display:flex; justify-content:space-between; align-items:center; background:var(--bg-2); padding:3px 8px; font-size:11px; color:var(--muted); border-bottom:1px solid var(--line);}
  .kb-code pre{margin:0; padding:10px 12px; overflow-x:auto; background:var(--card);} .kb-code pre code{background:none; border:0; padding:0; font-size:12px; line-height:1.5; white-space:pre;}
  .kb-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px;}
  .kb-mod{margin-left:auto; display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px;}
  .kb-composer, .kb-compose{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:14px; margin-top:12px;}
  .kb-composer textarea, .kb-compose textarea{width:100%; font-family:inherit;}
  .kb-hint{font-size:11.5px; color:var(--muted); margin-top:5px;}
  .kb-editor-tabs{display:flex; gap:4px; margin-bottom:4px;}
  .kb-editor-tabs button{border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:6px 6px 0 0; padding:3px 12px; font-size:12px; cursor:pointer;}
  .kb-editor-tabs button.on{background:var(--card); color:var(--text); font-weight:700;}
  .kb-preview{border:1px solid var(--line); border-radius:6px; padding:10px 12px; min-height:160px;}
  .kb-flash{border-color:var(--green); color:var(--green); font-weight:600;}
  .kb-board th.num, .kb-board td.num{text-align:right;} .kb-rank{font-size:16px; font-weight:800; width:46px;}
  .kb-board tr.kb-me td{background:var(--blue-bg);}
  .kb-level{display:inline-block; border-radius:999px; padding:1px 10px; font-size:11px; font-weight:800; border:1px solid var(--line); background:var(--bg-2); color:var(--muted);}
  .kb-level.lv-contributor{background:var(--blue-bg); color:var(--blue); border-color:var(--blue);} .kb-level.lv-expert{background:var(--purple-bg); color:var(--purple); border-color:var(--purple);}
  .kb-level.lv-guru{background:var(--amber-bg); color:var(--amber); border-color:var(--amber);}
  .kb-badge{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; margin-right:3px; background:var(--amber-bg); color:var(--amber); font-size:12px; font-weight:800; border:1px solid var(--amber);}
  .kb-badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; margin-bottom:16px;}
  .kb-badge-card{display:flex; gap:10px; align-items:center; border:1px solid var(--line); background:var(--card); border-radius:8px; padding:8px 10px; opacity:.55; filter:grayscale(1);}
  .kb-badge-card.on{opacity:1; filter:none; border-color:var(--amber);}
  .kb-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .kb-tile{border:1px solid var(--line); background:var(--card); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; box-shadow:var(--sh-1);}
  .kb-tile span{font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:.3px;} .kb-tile strong{font-size:24px; color:var(--navy-2);} .kb-tile small{color:var(--muted); font-size:11px;}
  .kb-rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:18px;} .kb-rules ul{margin:6px 0; padding-left:18px; font-size:12.5px; line-height:1.7;}
  @media (max-width:700px){ .kb-card{flex-wrap:wrap;} .kb-by{margin-left:0;} .kb-post, .kb-reply{flex-direction:column;} .kb-vote{flex-direction:row; width:auto; gap:8px; padding:4px 10px;} .kb-mod{margin-left:0; border-left:0; padding-left:0;} }

  .cap-scroll{overflow-x:auto; max-width:100%;}   /* Capacity week detail: wide tables scroll inside the modal on a phone */
  /* ---- Notes: a private notebook (js/notes.js). List on the left, the open note on the right; on a phone one at a time. ---- */
  .nt-wrap{display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:16px; align-items:start;}
  .nt-side, .nt-pane{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:var(--sh-1);}
  .nt-side{display:flex; flex-direction:column; gap:10px; position:sticky; top:8px; max-height:calc(100vh - 24px);}
  .nt-side-head{display:flex; gap:8px;} .nt-side-head input{flex:1; min-width:0; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .nt-views{display:flex; gap:4px; flex-wrap:wrap;}
  .nt-view{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; cursor:pointer;}
  .nt-view span{color:var(--muted); font-weight:500; margin-left:3px;} .nt-view.on{background:#25406f; color:#fff; border-color:#25406f;} .nt-view.on span{color:#dbe3ee;}
  .nt-tags{margin:0;}
  .nt-list{display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:80px;}
  .nt-card{display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--line); background:var(--bg-2); color:var(--text); border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit;}
  .nt-card:hover{border-color:var(--navy-2);} .nt-card.on{border-color:#25406f; box-shadow:0 0 0 2px rgba(37,99,235,.18); background:var(--card);}
  .nt-card-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline;} .nt-card-top strong{font-size:13px; overflow-wrap:anywhere;}
  .nt-pin{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--amber); white-space:nowrap;}
  .nt-card-snip{font-size:12px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
  .nt-card-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
  .nt-chip{display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:5px; padding:0 6px; font-size:11px;}
  .nt-count{font-size:11px; font-weight:700; color:var(--blue);} .nt-count.all{color:var(--green);}
  .nt-side-foot{display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap;}
  .nt-pane{min-height:320px;} .nt-empty{padding:60px 20px; text-align:center;}
  .nt-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px;} .nt-bar-actions{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap;}
  .nt-back{display:none;}
  .nt-status{font-size:12px; color:var(--muted);} .nt-status.ok{color:var(--green);} .nt-status.warn{color:var(--red); font-weight:600;}
  .nt-title{margin:4px 0 2px; font-size:20px; overflow-wrap:anywhere;} .nt-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .nt-title-in, .nt-body-in, .nt-tags-in{width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:14px;}
  .nt-title-in{font-weight:700; font-size:16px; margin-bottom:8px;}
  .nt-body-in{min-height:220px; resize:vertical; line-height:1.55; margin:8px 0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;}
  .nt-tags-in{margin-bottom:8px; font-size:13px;}
  .nt-title-in:focus, .nt-body-in:focus, .nt-tags-in:focus, .nt-side-head input:focus{outline:none; border-color:#25406f; box-shadow:0 0 0 3px rgba(37,99,235,.18);}
  .nt-tools{display:flex; gap:6px; flex-wrap:wrap;}
  .nt-task{display:flex; gap:8px; align-items:flex-start; margin:0 0 4px; cursor:pointer;} .nt-task input{margin-top:4px; width:auto;}
  .nt-task.done span{text-decoration:line-through; color:var(--muted);}
  .nt-conflict{border-color:var(--amber); margin-bottom:10px;}
  @media (max-width:860px){
    .nt-wrap{grid-template-columns:1fr;} .nt-side{position:static; max-height:none;}
    .nt-wrap.nt-has-note .nt-side{display:none;} .nt-wrap:not(.nt-has-note) .nt-pane{display:none;}
    .nt-back{display:inline-flex;}
  }

  .col-resizer{
    position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize;
    user-select:none; touch-action:none; z-index:2;
  }
  .col-resizer:hover, .col-resizer.resizing{background:var(--teal);}
  th.sortable{cursor:pointer; padding-right:18px;}
  th.sortable:hover{background:#dcecec;}
  .th-sort-indicator{font-size:11px; color:var(--navy-2); margin-left:3px;}
  a.cell-link{color:var(--navy-2); font-weight:700; text-decoration:none;}
  a.cell-link:hover{text-decoration:underline; color:var(--teal);}

  /* ===== Badges ===== */
  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
    font-size:12px; font-weight:600; white-space:nowrap; letter-spacing:.01em; line-height:1.5;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.07);
  }
  .b-red{background:var(--red-bg); color:var(--red); box-shadow:inset 0 0 0 1px #f4d0cc;}
  .b-amber{background:var(--amber-bg); color:var(--amber); box-shadow:inset 0 0 0 1px #f1deb4;}
  .b-green{background:var(--green-bg); color:var(--green); box-shadow:inset 0 0 0 1px #cbe8d7;}
  .b-gray{background:#f1f5f9; color:var(--muted);}
  .b-purple{background:var(--purple-bg); color:var(--purple); box-shadow:inset 0 0 0 1px #ddd5f3;}
  .b-blue{background:var(--blue-bg); color:var(--blue); box-shadow:inset 0 0 0 1px #cddcf8;}
  .b-gold{background:#fdf1cf; color:#7c5311; box-shadow:inset 0 0 0 1px #f1deb4;}

  /* ===== Modal + forms ===== */
  .modal-bg{
    position:fixed; inset:0; background:rgba(15,23,42,.46); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; padding:16px; z-index:50; overflow-y:auto;
  }
  .modal-bg.open{display:flex; animation:fadeIn .15s var(--ease);}
  .modal{
    background:#fff; border-radius:var(--radius-lg); padding:22px; width:100%; max-width:480px;
    max-height:88vh; overflow-y:auto; margin:auto;
    box-shadow:var(--sh-3); border:1px solid var(--line);
    animation:modalIn .22s var(--ease) both;
  }
  /* ----- Wide detail modal (Implementation project detail) ----- */
  .modal.modal-wide{max-width:1060px; padding:0; overflow-x:hidden;}
  .modal.modal-form{max-width:900px; padding:0; overflow-x:hidden;}
  .modal.modal-mid{max-width:760px; padding:0; overflow-x:hidden;}
  .pd-hero{
    position:relative; color:var(--text); padding:22px 28px 18px;
    background:#f6f9ff; border-bottom:1px solid var(--primary-100);
  }
  .modal .pd-hero h3{margin:2px 40px 4px 0; padding:0; border:none; color:var(--navy); font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3;}
  .pd-eyebrow{display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:12px; font-weight:600; color:#3f64c4;}
  .pd-sub{font-size:13px; color:var(--muted);}
  .pd-eyebrow .ico, .pd-sub .ico{width:14px; height:14px;}
  .pd-hero-badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
  .pd-chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:#fff; color:var(--navy-2); box-shadow:inset 0 0 0 1px var(--line-strong);}
  .pd-chip-red{background:var(--red-bg); color:var(--red); box-shadow:inset 0 0 0 1px #fecaca;}
  .pd-close{position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; background:transparent; color:var(--muted-2); font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s var(--ease), color .15s var(--ease);}
  .pd-close:hover{background:rgba(15,23,42,.07); color:var(--text);}
  .pd-progress{height:6px; border-radius:99px; background:#e7eefb; margin-top:16px; overflow:hidden;}
  .pd-progress-fill{height:100%; border-radius:99px; background:var(--fill-blue); transition:width .4s var(--ease);}
  .pd-progress-label{font-size:12px; margin-top:6px; color:var(--muted); font-weight:600;}
  .pd-body{padding:20px 28px 24px;}
  /* tabs of the project popup (Overview / Scope of Work / Out of Scope / Budget) — between the hero's progress bar and the cards */
  .pd-tabs{display:flex; gap:2px; padding:0 28px; border-bottom:1px solid var(--line); background:var(--card); overflow-x:auto; position:sticky; top:0; z-index:2;}
  .pd-tabs button{appearance:none; border:none; background:none; cursor:pointer; padding:12px 16px 11px; font:inherit; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;}
  .pd-tabs button:hover{color:var(--text); background:var(--bg-2);}
  .pd-tabs button.active{color:var(--primary-700); border-bottom-color:#6f93e0;}
  .pd-pane[hidden]{display:none;}
  .pd-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px;}
  .pd-kpi{position:relative; display:flex; flex-direction:column; justify-content:flex-start; background:#fff; border:1px solid var(--line); border-top:3px solid var(--ac,var(--primary-600)); border-radius:var(--radius); padding:11px 14px 10px;}
  .pd-kpi-v{order:1;} .pd-kpi-l{order:2;} .pd-kpi > :not(.pd-kpi-l):not(.pd-kpi-v){order:3;}
  .pd-kpi-l{font-size:12px; font-weight:500; color:var(--muted); margin-top:2px; line-height:1.35;}
  .pd-kpi-v{font-size:16px; font-weight:600; color:var(--navy); word-break:break-word; line-height:1.3;}
  .pd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-bottom:16px;}
  .pd-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--sh-1); min-width:0;}
  .pd-card h4{margin:0 0 12px; font-size:13px; font-weight:700; color:var(--navy-2); padding-bottom:8px; border-bottom:1px solid var(--line);}
  .pd-kvgrid{display:grid; grid-template-columns:120px 1fr; gap:9px 12px; align-items:center;}
  .pd-k{font-size:12px; font-weight:700; color:var(--muted);}
  .pd-v{font-size:13px; color:var(--text); word-break:break-word;}
  .pd-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .pd-eng{display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:999px; background:var(--teal-light); font-size:12px; font-weight:600; color:var(--navy-2);}
  .pd-avatar{width:24px; height:24px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-phases{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto;}
  .pd-phase{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; background:var(--bg-2);}
  .pd-phase.is-active{border-color:var(--soft-blue-line); background:var(--soft-blue);}
  .pd-phase.is-done{background:var(--green-bg); border-color:#cbe8d7;}
  .pd-phase-dot{flex:none; width:24px; height:24px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-phase.is-active .pd-phase-dot{background:var(--fill-blue); color:var(--soft-blue-ink);}
  .pd-phase.is-done .pd-phase-dot{background:var(--fill-green); color:#14532d;}
  .pd-item{border:1px solid var(--line); border-radius:8px; padding:8px 11px; margin-bottom:8px; font-size:12px; background:var(--bg-2);}
  .modal-mid .pd-kpis{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));}
  /* Scope of Work: a table of Product + Solution (click a row for the popup with the two texts side by side — line breaks kept, text never HTML) */
  .sow-row{cursor:pointer;}
  .sow-row:hover td, .sow-row:focus td{background:var(--bg-2);}
  .sow-cols{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;}
  .sow-label{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green); margin-bottom:3px;}
  .sow-label.out{color:var(--red);}
  .sow-text{white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5;}
  .sow-foot{margin-top:10px;}
  .sow-sol{border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; margin:10px 0; background:var(--card);}
  .sow-sol summary{cursor:pointer; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .sow-sol[open] summary{margin-bottom:8px;}
  .sow-sol-actions{margin-top:10px;}
  @media (max-width:700px){ .sow-cols{grid-template-columns:1fr;} }
  /* Event: list rows, the month calendar (a phone gets the agenda list instead), the checkbox groups of the request form */
  .ev-row{cursor:pointer;}
  .ev-row:hover td, .ev-row:focus td{background:var(--bg-2);}
  .ev-calbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 8px;}
  .ev-month{font-size:16px; font-weight:700; min-width:150px; text-align:center;}
  .ev-legend{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .ev-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card);}
  .ev-dow{padding:6px 8px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--bg-2); border-bottom:1px solid var(--line);}
  .ev-cell{min-height:104px; padding:4px 0 6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; min-width:0;}
  .ev-cell:nth-child(7n){border-right:0;}
  .ev-cell.is-other{background:var(--bg-2); opacity:.6;}
  .ev-cell.is-weekend:not(.is-other){background:var(--bg-2);}
  .ev-daynum{font-size:12px; font-weight:600; color:var(--muted); padding:0 8px;}
  .ev-cell.is-today .ev-daynum{color:var(--blue); font-weight:800;}
  .ev-cell.is-today .ev-daynum::after{content:" •";}
  .ev-chip{display:block; width:100%; text-align:left; font:inherit; font-size:11.5px; font-weight:600; line-height:1.3; padding:2px 6px; margin:0; border:0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:20px; border-radius:0;}
  .ev-chip.is-first{border-top-left-radius:6px; border-bottom-left-radius:6px; margin-left:4px; width:calc(100% - 4px);}
  .ev-chip.is-last{border-top-right-radius:6px; border-bottom-right-radius:6px; margin-right:4px; width:calc(100% - 4px);}
  .ev-chip.is-first.is-last{width:calc(100% - 8px);}
  .ev-chip:hover, .ev-chip:focus-visible{filter:brightness(.95); outline:2px solid var(--blue); outline-offset:-2px;}
  .ev-more{font:inherit; font-size:11px; font-weight:600; color:var(--blue); background:none; border:0; cursor:pointer; text-align:left; padding:0 8px;}
  .ev-agenda{display:none; margin-top:10px;}
  .ev-agenda-item{border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; margin-bottom:8px; background:var(--card); cursor:pointer;}
  .ev-agenda-item:hover, .ev-agenda-item:focus{background:var(--bg-2);}
  .ev-agenda-date{font-size:12px; font-weight:700; color:var(--muted);}
  .ev-checks{display:flex; flex-wrap:wrap; gap:6px 18px; margin:2px 0;}
  .ev-check{display:inline-flex; align-items:center; gap:7px; font-weight:600; margin:0; cursor:pointer;}
  .ev-check input{width:auto; margin:0;}
  @media (max-width:760px){ .ev-cal{display:none;} .ev-agenda{display:block;} .ev-legend{display:none;} }
  /* Request Sizing: filter chips, the queue table, the result lines, the (switched-off) upload zone, the conversation */
  .sz-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .sz-chip{appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; padding:5px 12px; border-radius:99px; border:1px solid var(--line-strong); background:var(--card); color:var(--muted);}
  .sz-chip:hover{color:var(--text); background:var(--bg-2);}
  .sz-chip.on{background:var(--navy-2); color:#fff; border-color:var(--navy-2);}
  html[data-theme="dark"] .sz-chip.on{background:#3f64c4; border-color:#3f64c4;}
  .sz-n{display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:99px; font-size:11px; line-height:18px; text-align:center; background:rgba(127,127,127,.2);}
  .sz-row{cursor:pointer;}
  .sz-row:hover td, .sz-row:focus td{background:var(--bg-2);}
  .sz-lines{width:100%; table-layout:fixed;}
  .sz-lines th:first-child, .sz-lines td:first-child{width:34px;}
  .sz-lines th.r, .sz-lines td.r{text-align:right; width:96px;}
  .sz-lines th:last-child:not(.r){width:48px;}
  .sz-lines input{width:100%; box-sizing:border-box;}
  .sz-lines input.sz-qty{text-align:right;}
  .sz-line-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .sz-paste{margin-top:10px; padding:10px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2);}
  .sz-paste textarea{width:100%; min-height:90px; box-sizing:border-box; margin-top:6px; font-family:ui-monospace,Menlo,monospace; font-size:12px;}
  .sz-lbl{display:block; margin:12px 0 4px; font-size:12px; font-weight:700; color:var(--muted);}
  #szResultNote, #szMsgBox{width:100%; box-sizing:border-box; min-height:64px;}
  .sz-note{margin-top:12px; padding:9px 11px; border-radius:8px; background:var(--bg-2); font-size:13px;}
  .sz-note .sz-lbl{margin-top:0;}
  .sz-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px;}
  .sz-lines input, #szResultNote, #szMsgBox, .sz-paste textarea, .sz-assign select{padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .sz-lines input:focus, #szResultNote:focus, #szMsgBox:focus, .sz-paste textarea:focus, .sz-assign select:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .sz-paste textarea{font-family:ui-monospace,Menlo,monospace; font-size:12px;}
  .sz-drop{display:flex; align-items:center; gap:12px; padding:14px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2); position:relative;}
  .sz-drop.is-off{opacity:.6; cursor:not-allowed;}
  .sz-drop .ico{width:22px; height:22px; flex:none;}
  .sz-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:not-allowed;}
  .sz-thread{display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:280px; overflow-y:auto;}
  .sz-msg{padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); font-size:13px;}
  .sz-msg.is-question{border-color:#f3c9c1; background:var(--red-bg);}
  html[data-theme="dark"] .sz-msg.is-question{border-color:#6a3238;}
  .sz-msg-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:2px;}
  .sz-assign{display:flex; gap:8px; flex-wrap:wrap;}
  .sz-assign select{flex:1; min-width:200px;}
  /* Asset detail popup (Maintenance > Assets): tab counts, PM timeline, clickable CM cards, empty states */
  .pd-tab-count{display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:99px; font-size:11px; font-weight:700; line-height:18px; text-align:center; background:var(--bg-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);}
  .pd-tabs button.active .pd-tab-count{background:var(--soft-blue); color:var(--soft-blue-ink);}
  .pd-empty{padding:18px 12px; text-align:center; font-size:13px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2);}
  .pd-item-click{cursor:pointer; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
  .pd-item-click:hover{border-color:var(--soft-blue-line); box-shadow:var(--sh-1);}
  .pd-tl{position:relative; margin-left:7px; padding-left:20px; border-left:2px solid var(--line);}
  .pd-tl-item{position:relative; padding:0 0 16px; font-size:12.5px;}
  .pd-tl-item:last-child{padding-bottom:2px;}
  .pd-tl-dot{position:absolute; left:-27px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--fill-green,#82c9a3); box-shadow:0 0 0 3px var(--card);}
  .pd-tl-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
  .pd-tl-note{margin-top:4px; padding:6px 9px; border-radius:8px; background:var(--bg-2); white-space:pre-wrap; color:var(--text);}

  /* Activity Dashboard — Top 10 / Bottom 10 Performance leaderboards */
  .lb-section{--lb-ac:var(--teal); margin-top:26px;}
  .lb-section.bottom{--lb-ac:#8a95a4;}
  .lb-banner{padding:2px 0 10px 12px; margin-bottom:12px; border-left:4px solid var(--lb-ac); border-bottom:1px solid var(--line);
    border-bottom-left-radius:0;}
  .lb-banner-t{font-size:16px; font-weight:700; color:var(--navy-2); letter-spacing:.1px;}
  .lb-banner-s{font-size:12px; color:var(--muted); margin-top:2px;}
  .lb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; align-items:start;}
  .lb-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px 6px;
    box-shadow:var(--sh-1); min-width:0;}
  .lb-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px;}
  .lb-title{font-size:13px; font-weight:700; color:var(--navy-2);}
  .lb-sub{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
  .lb-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);}
  .lb-rank{font-size:12px; font-weight:600; color:var(--muted-2); font-variant-numeric:tabular-nums; text-align:left;}
  .lb-rank.lead{font-weight:700; color:var(--navy-2);}
  .lb-name{display:block; font-size:13px; font-weight:600; color:var(--navy-2); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lb-name:hover{color:var(--teal); text-decoration:underline;}
  .lb-track{height:5px; border-radius:99px; background:#eef0f3; margin-top:6px; overflow:hidden;}
  .lb-fill{height:100%; border-radius:99px; background:var(--lb-ac); min-width:3px;}
  .lb-val{text-align:right; font-size:13px; font-weight:700; color:var(--navy-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .lb-val small{display:block; font-size:11px; font-weight:500; color:var(--muted);}
  .pd-act{display:flex; gap:14px; align-items:flex-start; padding:11px 13px; margin-bottom:9px; border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:8px; background:var(--bg-2);}
  .pd-act-h{font-size:16px; font-weight:700; color:var(--navy-2);}
  .modal.modal-form.fm-sm{max-width:540px;}
  .modal.modal-form.fm-md{max-width:740px;}
  .fm-hero-danger{background:#fef6f5; border-bottom-color:#fecaca;}
  .fm-hero-danger h3, .fm-hero-danger .pd-eyebrow{color:var(--red) !important;}
  .fm-body{background:var(--bg-2);}
  .fm-section > .notice:first-child{margin-top:0;}
  .fm-section > h4:first-child{margin-top:0;}
  .fm-section > .field:last-child, .fm-section > .field-row:last-child{margin-bottom:0;}
  .fm-hero{padding:20px 28px 18px;}
  .fm-body{padding:20px 28px 0;}
  .fm-section{margin-bottom:16px;}
  .fm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 16px;}
  .fm-grid .field{margin-bottom:0; min-width:0;}
  .fm-grid .fm-full{grid-column:1/-1;}
  .fm-grid.fm-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  @media (max-width:560px){ .fm-grid.fm-2{grid-template-columns:1fr;} }
  .poc-unit-row{margin-bottom:14px;}
  .poc-unit-type{display:flex; gap:18px; margin-bottom:8px;}
  .field .poc-unit-type label{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--navy-2); cursor:pointer; margin:0;}
  .field .poc-unit-type input[type="checkbox"]{width:16px; height:16px; padding:0; margin:0; flex:none; accent-color:var(--teal); box-shadow:none;}
  .poc-unit-row .poc-unit-hint:empty{display:none;}
  .poc-unit-row .poc-unit-hint{margin-top:4px;}
  .fm-subbox{margin:4px 0 14px; padding:14px 16px; border:1px dashed var(--teal-2); border-radius:12px; background:rgba(230,243,244,.55);}
  .fm-subtitle{font-size:12px; font-weight:700; color:var(--navy-2); margin-bottom:10px;}
  .fm-req{color:var(--red); font-weight:700;}
  .fm-money{display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-2); overflow:hidden; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
  .fm-money span{display:flex; align-items:center; padding:0 12px; font-weight:700; font-size:12px; color:var(--teal); background:var(--teal-light); border-right:1px solid var(--line);}
  .fm-money input{border:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important;}
  .fm-money:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px rgba(37,99,235,.16); background:#fff;}
  .fm-actions{position:sticky; bottom:0; z-index:2; margin:0 -28px; padding:14px 28px; background:rgba(255,255,255,.97); backdrop-filter:blur(4px); border-top:1px solid var(--line);}
  .fm-body > #modalErrorMsg{margin-bottom:14px;}
  /* Compact icon-only "remove row" button used in repeatable form rows (engineers, units, licenses, devices, PICs) */
  .btn.row-remove{width:34px; height:34px; min-width:34px; padding:0; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; border-radius:8px;}
  .field-row:has(> .row-remove){grid-template-columns:1fr 1fr 34px; align-items:end;}
  .field-row:has(> .row-remove):has(> .field:only-of-type){grid-template-columns:1fr 34px;}
  .field-row:has(> .row-remove):has(> .field:nth-of-type(3)){grid-template-columns:1fr 1fr 1fr 34px;}
  .field-row > .row-remove{margin-bottom:8px; align-self:end;}
  .pic-remove.row-remove{width:26px; height:26px; min-width:26px; top:-11px; right:12px; font-size:11px;}
  .pic-row{position:relative; border:1px solid var(--line); border-radius:8px; padding:12px 14px 4px; margin-bottom:10px; background:var(--bg-2);}
  .pic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:4px 12px; padding-right:0;}
  .pic-remove{position:absolute; top:-9px; right:10px;}
  .pic-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;}
  .pic-card{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); font-size:13px;}
  .pic-line{font-size:12px; margin-top:3px; word-break:break-all;}
  .pic-line a{color:var(--teal); text-decoration:none;} .pic-line a:hover{text-decoration:underline;}
  .pa-picker{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:16px; box-shadow:var(--sh-1);}
  .pa-picker select{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:var(--bg-2); color:var(--text);}
  .pa-picker select:focus{outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.16);}
  .pa-label{display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .pa-timeline{position:relative; margin-left:8px; padding-left:22px; border-left:2px solid var(--line);}
  .pa-note{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin-bottom:10px; font-size:12px;}
  .pa-dot{position:absolute; left:-30px; top:13px; width:12px; height:12px; border-radius:50%; background:var(--teal-2); border:3px solid #fff; box-shadow:0 0 0 2px var(--teal-light);}
  .pa-note.is-status{background:var(--blue-bg); border-color:transparent;}
  .pa-note.is-status .pa-dot{background:var(--blue); box-shadow:0 0 0 2px var(--blue-bg);}
  /* ---- Activity log notes (POC Activity / Project Activity) ---- */
  .pa-note-v2{padding:12px 14px; background:#fff; box-shadow:var(--sh-1); border-left:3px solid var(--teal-2);}
  .pa-note-v2.is-status{background:var(--blue-bg); border-left-color:var(--blue); box-shadow:none; padding:9px 12px;}
  .pa-note-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .pa-note-titlewrap{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; min-width:0;}
  .pa-note-by{font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap;} /* date · engineer, plain text beside the title */
  .pa-note-title{font-size:13px; font-weight:700; line-height:1.5; color:var(--navy-2); overflow-wrap:anywhere;} /* same size as the notes text, bold */
  .pa-note-v2.is-status .pa-note-title{font-size:13px; font-weight:700; color:var(--blue);}
  .pa-note-v2.is-weekly{border-left-color:var(--purple); background:var(--purple-bg);} /* the Technical Lead's weekly note inside a POC's log */
  .pa-note-v2.is-weekly .pa-dot{background:var(--purple); box-shadow:0 0 0 2px var(--purple-bg);}
  .pa-note-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
  .pa-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px;}
  .pa-chip.is-blue{background:#fff; color:var(--blue); border-color:transparent;}
  .pa-note-body{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; line-height:1.5; white-space:pre-wrap; color:var(--text);}
  .pa-composer-v2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; padding:14px; margin:14px 0 0; background:linear-gradient(180deg,var(--bg-2),#fff); border:1px solid var(--line-strong); border-radius:12px;}
  .pa-composer-v2 .pa-cmp-full{grid-column:1/-1;}
  .pa-composer-v2 label{display:block; font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--muted); margin-bottom:5px;} /* same as the other form labels */
  .pa-composer-v2 input,.pa-composer-v2 select,.pa-composer-v2 textarea{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:#fff;}
  .pa-composer-v2 textarea{resize:vertical; min-height:74px;}
  .pa-composer-v2 input:focus,.pa-composer-v2 select:focus,.pa-composer-v2 textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(37,99,235,.16);}
  .pa-composer-v2 .pa-cmp-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}

  .pd-steps{display:flex; flex-wrap:wrap; gap:8px;}
  .pd-step{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bg-2); border:1px solid var(--line); color:var(--muted);}
  .pd-step-n{width:20px; height:20px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-step.is-done{background:var(--green-bg); border-color:#cbe8d7; color:var(--green);}
  .pd-step.is-done .pd-step-n{background:var(--fill-green); color:#14532d;}
  .pd-step.is-active{background:var(--soft-blue); border-color:var(--soft-blue-line); color:var(--soft-blue-ink);}
  .pd-step.is-active .pd-step-n{background:var(--fill-blue); color:var(--soft-blue-ink);}
  .pd-step.is-drop{background:var(--red-bg); border-color:#f4d0cc; color:var(--red);}
  .pd-step.is-drop .pd-step-n{background:#ee97a8; color:#7f1d1d;}
  .pd-card + .pd-card{margin-top:0;}
  /* Request Technical detail popups: cards stacked with an even gap (cards sit directly in .pd-body there) */
  .rq-stack{display:flex; flex-direction:column; gap:16px; margin-bottom:16px;}
  @media (max-width:560px){
    .fm-body{padding:16px 16px 0;} .fm-hero{padding:18px;} .fm-actions{margin:0 -16px; padding:12px 16px;}
    .pd-hero{padding:20px 18px 16px;} .pd-body{padding:16px 16px 20px;} .pd-kvgrid{grid-template-columns:1fr; gap:2px 0;} .pd-k{margin-top:6px;}
  }

  .modal h3{
    margin:0 0 16px; font-size:16px; font-weight:600; color:var(--navy);
    padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .field{margin-bottom:13px;}
  .field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px;}
  .field input, .field select, .field textarea{
    width:100%; padding:8px 11px; border:1px solid var(--line-strong); border-radius:8px;
    font-size:13px; font-family:inherit; background:#fff; color:var(--text);
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .field input::placeholder, .field textarea::placeholder{color:var(--muted-2); opacity:1;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--primary-600); box-shadow:var(--ring);
  }
  .field textarea{resize:vertical; min-height:58px;}
  input[type="checkbox"], input[type="radio"]{accent-color:var(--primary-600);}
  .rt-toolbar{display:flex; flex-wrap:wrap; gap:4px; align-items:center; border:1px solid var(--line-strong); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:5px; background:#f4f6f8;}
  .rt-toolbar button, .rt-toolbar select{width:auto; padding:3px 7px; font-size:12px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--navy-2); cursor:pointer;}
  .rt-toolbar button:hover{border-color:var(--teal);}
  .rich-editor{width:100%; min-height:120px; max-height:320px; overflow-y:auto; padding:9px 11px; border:1px solid var(--line-strong); border-radius:0 0 var(--radius-sm) var(--radius-sm); font-size:13px; background:#fff; color:var(--text);}
  .rich-editor:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
  .rich-render{font-size:13px; color:var(--text);}
  .rich-render p, .rich-render div{margin:0 0 4px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line);}

  /* ===== Notices, empty, misc ===== */
  .empty{
    text-align:center; padding:34px 16px; color:var(--muted); font-size:13px;
    background:var(--card); border:1px dashed var(--line-strong); border-radius:var(--radius);
  }
  .empty::before{
    content:""; display:block; width:36px; height:36px; margin:0 auto 10px; border-radius:50%;
    background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>") center/20px no-repeat;
  }
  .muted-small{font-size:12px; color:var(--muted);}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap;}
  /* An action cell inside a table must stay a real table-cell — as display:flex it stops stretching to the row, so the row line, the zebra /
     hover background and the vertical alignment of its buttons no longer match the other cells. Buttons wrap on their own when narrow. */
  td.row-actions, th.row-actions{display:table-cell;}
  td.row-actions > .btn, td.row-actions > button{margin:0 4px 4px 0; vertical-align:top;}
  .notice{
    position:relative; background:var(--primary-50); border:1px solid var(--primary-100); color:var(--navy-2);
    padding:10px 12px 10px 15px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:16px;
  }
  .notice::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; background:var(--fill-blue);}
  details.techbox{border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:12px; background:var(--bg-2);}
  details.techbox summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--teal); padding:2px 0;}
  details.techbox .field{margin-top:10px;}
  details.collapse-group{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--card); overflow:hidden; box-shadow:var(--sh-1);}
  details.collapse-group>summary{cursor:pointer; list-style:none; padding:11px 14px; font-size:14px; font-weight:700; color:var(--navy-2); background:linear-gradient(180deg,#f5f7f9,#eef1f4); display:flex; align-items:center; gap:8px;}
  details.collapse-group>summary::-webkit-details-marker{display:none;}
  details.collapse-group>summary:before{content:"\25B8"; color:var(--muted); font-size:11px; transition:transform .15s var(--ease);}
  details.collapse-group[open]>summary:before{transform:rotate(90deg);}
  details.collapse-group>summary .cg-count{font-weight:500; font-size:12px; color:var(--muted);}
  details.collapse-group>.cg-body{padding:12px 14px;}
  /* Compact variant for a project's folded tasks inside a narrow Kanban
     column — same collapse mechanics, smaller type, cards keep their own
     spacing so .cg-body doesn't double up the padding. Every project gets
     its own collapsed-by-default group per column (not just Completed ones). */
  .filter-bar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
  .filter-bar select{
    -webkit-appearance:none; appearance:none;
    padding:6px 28px 6px 11px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px;
    font-size:13px; font-weight:500; color:var(--navy-2); background:#fff; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23697585' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .filter-bar select:hover{border-color:var(--muted-2);}
  .filter-bar select:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .filter-bar input[type="text"], .filter-bar input[type="date"]{
    padding:6px 12px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px; font-size:13px;
    background:#fff; min-width:180px; flex:1;
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .filter-bar input[type="text"]:focus, .filter-bar input[type="date"]:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .filter-bar label.muted-small{display:inline-flex; align-items:center; gap:5px;}
  .export-bar{display:flex; gap:8px; flex-wrap:wrap;}

  /* ===== Calendar ===== */
  .cal-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--sh-1);}
  .cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
  .cal-head .cal-title{font-weight:700; color:var(--navy-2); font-size:16px;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;}
  .cal-dow{font-size:11px; font-weight:700; color:var(--muted); text-align:center; padding:4px 0; text-transform:uppercase; letter-spacing:.4px;}
  .cal-cell{min-width:0; overflow:hidden; min-height:66px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px; background:var(--bg-2); font-size:11px; transition:background .12s var(--ease);}
  .cal-cell:hover{background:#fff;}
  .cal-cell.other-month{opacity:.4;}
  .cal-cell.today{border-color:var(--teal); border-width:2px; background:var(--teal-light);}
  .cal-daynum{font-weight:700; color:var(--navy-2); margin-bottom:3px;}
  .cal-item{display:block; background:var(--teal-light); color:var(--navy-2); border-radius:5px; padding:2px 5px; margin-bottom:2px; font-size:11px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cal-item.overdue{background:var(--red-bg); color:var(--red);}
  .cal-item.soon{background:var(--amber-bg); color:var(--amber);}
  @media(max-width:640px){ .cal-cell{min-height:46px; font-size:11px;} .cal-item{font-size:11px;} }

  /* ===== Scrollbars ===== */
  ::-webkit-scrollbar{height:9px; width:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#c4ccd6; border-radius:999px; border:2px solid transparent; background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:#a9b3bf; background-clip:content-box;}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* ===== Consistency layer (2026-10-27) =====
     One scale for type (11 / 12 / 13 / 14 / 16 / 20 / 24 px), weight (400 / 500 / 600 / 700) and radius (6 / 8 / 12 px + pills),
     one look for every dropdown / date field, one heading style, and quiet destructive row actions. :where() keeps the generic
     rules at zero specificity so a component's own rule (or an inline style) still wins where it needs to. */
  :where(select:not([multiple]):not([size])){
    -webkit-appearance:none; appearance:none; padding:6px 28px 6px 11px;
    border:1px solid var(--line-strong); border-radius:8px; background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center;
    font-family:inherit; font-size:13px; font-weight:500; color:var(--text); cursor:pointer;
  }
  :where(input[type="date"], input[type="month"], input[type="time"]){
    padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; background:#fff;
    font-family:inherit; font-size:13px; color:var(--text);
  }
  :where(.filter-bar select, .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar input[type="month"]){min-height:36px;}
  :where(strong, b){font-weight:600;}
  /* components that set their own select box get the same chevron + white fill */
  .pa-picker select, .pa-composer-v2 select, .field select, .pagination-bar select, .role-select, .inline-select{
    -webkit-appearance:none; appearance:none; padding-right:28px; background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 10px center;
  }
  /* file pickers, the key/value status table */
  input[type="file"]{font-family:inherit; font-size:13px; color:var(--muted);}
  input[type="file"]::file-selector-button{margin-right:10px; padding:6px 12px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--navy-2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;}
  input[type="file"]::file-selector-button:hover{background:var(--bg-2); border-color:var(--muted-2);}
  table.kv{background:transparent; width:auto; margin-bottom:10px;}
  table.kv td{border:0; padding:4px 24px 4px 0; vertical-align:baseline;}
  table.kv td:first-child{color:var(--muted); min-width:150px;}
  .section-title .ico{display:none;}
  .btn.danger.small{background:#fff; color:var(--red); border-color:#fca5a5; box-shadow:none;}
  .btn.danger.small:hover{background:var(--red-bg); border-color:var(--red); color:#991b1b; filter:none;}
  .pagination-bar select{min-width:66px;}
  .empty{padding:28px 16px;}

  /* ===== My Work / Action Queue (js/mywork.js) ===== */
  .mw-week{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:6px;}
  .mw-day{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
  .mw-day.is-today{border-color:var(--soft-blue-line); background:var(--soft-blue);}
  .mw-day-n{font-size:12px; color:var(--muted);}
  .mw-day-d{font-size:20px; font-weight:600; color:var(--navy); line-height:1.2;}
  @media(max-width:640px){ .mw-week{grid-template-columns:repeat(2,minmax(0,1fr));} }

  /* ===== Capacity (js/capacity.js) ===== */
  .cap-table th.cap-now{background:var(--soft-blue); color:var(--soft-blue-ink);}
  .cap-cell{cursor:pointer; text-align:center; min-width:104px; vertical-align:middle;}
  .cap-cell .cap-main{display:block; font-weight:600; font-size:14px;}
  .cap-cell .cap-sub{display:block; font-size:11px; color:var(--muted);}
  .cap-cell .cap-bar{display:block; height:4px; border-radius:2px; background:rgba(15,23,42,.08); margin:5px auto 0; max-width:80px; overflow:hidden;}
  .cap-cell .cap-bar i{display:block; height:100%; background:currentColor; opacity:.55;}
  .cap-free{background:color-mix(in srgb, var(--blue-bg) 45%, transparent); color:var(--blue);}
  .cap-ok{background:var(--green-bg); color:var(--green);}
  .cap-busy{background:var(--amber-bg); color:var(--amber);}
  .cap-over{background:var(--red-bg); color:var(--red);}
  .cap-off{background:var(--bg-2); color:var(--muted);}
  .cap-total{background:var(--bg-2); color:var(--text); cursor:default;}
  .cap-table tfoot td{border-top:2px solid var(--line-strong);}
  .cap-key{display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-3px; margin-right:5px; box-shadow:inset 0 0 0 1px var(--line);}
  /* Capacity week detail (Activity > Capacity > click a week): summary tiles, a card per day, share bars per Job Type, activity grouped by date */
  .cap-tone-free{color:var(--blue);} .cap-tone-ok{color:var(--green);} .cap-tone-busy{color:var(--amber);} .cap-tone-over{color:var(--red);} .cap-tone-off{color:var(--muted);}
  .cap-util{height:8px; border-radius:4px; background:var(--bg-2); overflow:hidden; margin:4px 0 2px;}
  .cap-util i{display:block; height:100%; border-radius:4px; background:currentColor;}
  .cap-util-note{font-size:12px; color:var(--muted); margin:0 0 6px;}
  .cap-sec{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:20px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);}
  .cap-sec h4{margin:0; font-size:13px; font-weight:700; color:var(--navy-2);}
  .cap-sec .muted-small{font-size:12px;}
  .cap-days{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;}
  .cap-day{display:flex; flex-direction:column; gap:7px; min-width:0; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--sh-1);}
  .cap-day.is-off{background:var(--bg-2);}
  .cap-day.is-booked{border-color:#e8912d;}
  .cap-day-h{display:flex; flex-direction:column; line-height:1.25;}
  .cap-day-h b{font-size:13px; color:var(--navy-2);} .cap-day-h span{font-size:11px; color:var(--muted);}
  .cap-day-hours{font-size:19px; font-weight:700; color:var(--navy); line-height:1.1;}
  .cap-day-hours small{font-size:11px; font-weight:500; color:var(--muted);}
  .cap-day-bar{height:5px; border-radius:3px; background:var(--bg-2); overflow:hidden;}
  .cap-day.is-off .cap-day-bar{background:var(--line);}
  .cap-day-bar i{display:block; height:100%; border-radius:3px; background:var(--blue);}
  .cap-chips{display:flex; flex-wrap:wrap; gap:4px;}
  .cap-chips .badge{max-width:100%; white-space:normal; overflow-wrap:break-word; line-height:1.3; font-size:10.5px; padding-left:7px; padding-right:7px;}
  .cap-jt{display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(90px,2fr) auto; align-items:center; gap:6px 12px; padding:8px 0; border-bottom:1px solid var(--line);}
  .cap-jt:last-of-type{border-bottom:0;}
  .cap-jt-bar{height:8px; border-radius:4px; background:var(--bg-2); overflow:hidden;}
  .cap-jt-bar i{display:block; height:100%; border-radius:4px; background:var(--blue);}
  .cap-jt-num{font-size:12px; color:var(--muted); text-align:right; white-space:nowrap;}
  .cap-jt-num b{color:var(--navy); font-size:13px;}
  .cap-jt-total{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 12px; margin-top:6px; background:var(--bg-2); border-radius:8px; font-size:13px;}
  .cap-date{margin:14px 0 6px; font-size:12px; font-weight:700; color:var(--navy-2); text-transform:none;}
  .cap-date:first-child{margin-top:0;}
  .cap-act{display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:9px 12px; margin-bottom:6px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; background:var(--card);}
  .cap-act.is-booked{border-left-color:#e8912d; background:#fdf6ea;}
  .cap-act-top{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0;}
  .cap-act-rel{font-size:12px; font-weight:600; min-width:0; overflow-wrap:anywhere;}
  .cap-act-text{grid-column:1; font-size:13px; color:var(--text); overflow-wrap:anywhere;}
  .cap-act-h{grid-column:2; grid-row:1 / span 2; align-self:center; font-size:15px; font-weight:700; color:var(--navy); white-space:nowrap;}
  .cap-foot{font-size:12px; color:var(--muted); margin-top:8px;}
  @media (max-width:760px){ .cap-days{grid-template-columns:repeat(2,minmax(0,1fr));} .cap-jt{grid-template-columns:1fr auto;} .cap-jt-bar{grid-column:1 / -1; order:3;} }
  @media (max-width:420px){ .cap-days{grid-template-columns:1fr;} }
  html[data-theme="dark"] .cap-act.is-booked{background:rgba(232,145,45,.12);}


  /* ===== Global search (js/search.js) ===== */
  .gs-overlay{position:fixed; inset:0; z-index:1200; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 16px;}
  .gs-overlay[hidden]{display:none;}
  .gs-box{width:100%; max-width:640px; max-height:76vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-3); overflow:hidden;}
  .gs-input-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted);}
  .gs-input-row .ico{width:20px; height:20px; flex:none;}
  .gs-input-row input{flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); font:inherit; font-size:16px; padding:6px 0;}
  .gs-close{border:1px solid var(--line-strong); background:var(--bg-2); color:var(--muted); border-radius:6px; font:inherit; font-size:11px; padding:3px 8px; cursor:pointer;}
  .gs-list{overflow-y:auto; padding:6px; flex:1;}
  .gs-group{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:10px 10px 4px;}
  .gs-item{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; cursor:pointer;}
  .gs-item.active{background:var(--gs-active, var(--soft-blue));}
  .gs-ico{display:inline-flex; width:32px; height:32px; flex:none; align-items:center; justify-content:center; border-radius:8px; background:var(--bg-2); color:var(--muted);}
  .gs-item.active .gs-ico{background:var(--card); color:var(--primary);}
  .gs-text{display:flex; flex-direction:column; min-width:0; flex:1;}
  .gs-title{font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gs-sub{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gs-kind{font-size:11px; color:var(--muted); flex:none;}
  .gs-empty{padding:26px 16px; text-align:center; color:var(--muted);}
  .gs-foot{display:flex; gap:16px; justify-content:flex-end; padding:8px 14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted-2); background:var(--bg-2);}
  .gs-btn{display:inline-flex; align-items:center; gap:6px;}
  .gs-kbd{font:inherit; font-size:10px; padding:1px 5px; border:1px solid var(--line-strong); border-radius:4px; color:var(--muted); background:var(--bg-2);}
  html.gs-open{overflow:hidden;}
  .gs-input-row input::-webkit-search-cancel-button{display:none;}
  .gs-done{display:none;}
  @media (hover:none){ .gs-esc{display:none;} .gs-done{display:inline;} .gs-close{font-size:13px; padding:7px 12px;} }
  @media (hover:none){ .gs-kbd, .gs-foot{display:none;} }
  @media (max-width:640px){
    .gs-overlay{padding:0;}
    .gs-box{max-width:none; max-height:none; height:100%; border-radius:0; border:none;}
    .gs-btn-label{display:none;}
    .gs-input-row{padding-top:max(12px, env(safe-area-inset-top));}
  }


  /* ===== The bell: in-app notifications (js/bell.js) ===== */
  .bell-btn{position:relative; display:inline-flex; align-items:center; justify-content:center;}
  .bell-badge{position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; border:2px solid var(--card);}
  .bell-badge[hidden]{display:none;}
  .bell-btn.bell-ping .ico{animation:bell-ring .7s ease-in-out 1;}
  @keyframes bell-ring{0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)}}
  @media (prefers-reduced-motion:reduce){ .bell-btn.bell-ping .ico{animation:none;} }
  .bell-panel{position:fixed; right:16px; top:56px; z-index:1100; width:min(420px, calc(100vw - 24px)); max-height:min(72vh, 600px); display:flex; flex-direction:column; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-3); overflow:hidden;}
  .bell-panel[hidden]{display:none;}
  .bell-head{display:flex; align-items:center; gap:8px; padding:12px 14px 8px;}
  .bell-count{font-size:12px; color:var(--muted);}
  .bell-actions{margin-left:auto; display:inline-flex; align-items:center; gap:10px;}
  .bell-link{border:none; background:none; color:var(--primary); font:inherit; font-size:12px; cursor:pointer; padding:2px 0;}
  .bell-link:hover{text-decoration:underline;}
  .bell-close{border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:0 2px;}
  .bell-tabs{display:flex; gap:4px; padding:0 10px 8px; border-bottom:1px solid var(--line);}
  .bell-tabs button{border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-size:12px; padding:4px 10px; border-radius:999px; cursor:pointer;}
  .bell-tabs button.on{background:var(--soft-blue); color:var(--primary); font-weight:600;}
  .bell-list{overflow-y:auto; flex:1; padding:6px;}
  .bell-empty{padding:28px 16px; text-align:center; color:var(--muted);}
  .bell-item{display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:8px; cursor:pointer; position:relative;}
  .bell-item:hover, .bell-item:focus-visible{background:var(--bg-2); outline:none;}
  .bell-item.unread{background:var(--soft-blue);}
  .bell-item[aria-disabled="true"]{cursor:default;}
  .bell-ico{display:inline-flex; width:30px; height:30px; flex:none; align-items:center; justify-content:center; border-radius:8px; background:var(--bg-2); color:var(--muted);}
  .bell-item.unread .bell-ico{background:var(--card); color:var(--primary);}
  .bell-item.kind-reminder .bell-ico{background:var(--amber-bg, #fff4d6); color:var(--amber);}
  .bell-main{min-width:0; flex:1;}
  .bell-title{font-weight:600; font-size:13px; line-height:1.35; overflow-wrap:anywhere;}
  .bell-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary); margin-right:6px; vertical-align:middle;}
  .bell-lines{font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere;}
  .bell-lines div{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .bell-meta{font-size:11px; color:var(--muted-2); margin-top:3px;}
  .bell-x{border:none; background:none; color:var(--muted-2); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; opacity:0;}
  .bell-item:hover .bell-x, .bell-item:focus-within .bell-x{opacity:1;}
  @media (hover:none){ .bell-x{opacity:.7;} }
  @media (max-width:640px){
    .bell-panel{left:8px; right:8px; width:auto; max-height:calc(100vh - 72px);}
    .bell-btn .ico{margin:0;}
  }

  /* ===== Phones: tables as cards (js/core.js markTableForCards) ===== */
  .cm-v{display:contents;}
  @media (max-width:640px){
    .table-scroll-wrap:has(> table.cards-m){overflow:visible; border:none; box-shadow:none; background:none;}
    table.cards-m, table.cards-m tbody{display:block; width:auto !important; table-layout:auto !important; background:none; box-shadow:none; border:none;}
    table.cards-m colgroup, table.cards-m thead{display:none;}
    table.cards-m tbody tr{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin:0 0 10px; box-shadow:var(--sh-1);}
    table.cards-m tbody tr > td, table.cards-m tbody tr:nth-child(even) > td, table.cards-m tbody tr:hover > td{background:transparent !important;}
    table.cards-m .cm-v{display:block; min-width:0; text-align:right;}
    table.cards-m tbody tr > td{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:6px 0; border:none; text-align:right; width:auto !important; max-width:none; white-space:normal; word-break:break-word;}
    table.cards-m tbody tr > td::before{content:attr(data-label); flex:none; max-width:42%; text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); padding-top:2px;}
    table.cards-m tbody tr > td:first-child{display:block; text-align:left; font-size:15px; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line);}
    table.cards-m tbody tr > td:first-child::before{display:none;}
    table.cards-m tbody tr > td:empty{display:none;}
    table.cards-m tbody tr > td.row-actions{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:8px; padding-top:10px; margin-top:4px; border-top:1px solid var(--line);}
    table.cards-m tbody tr > td.row-actions::before{display:none;}
    table.cards-m tbody tr > td.row-actions > .btn, table.cards-m tbody tr > td.row-actions > button{margin:0;}
    table.cards-m .badge{max-width:100%; white-space:normal;}
  }


  /* ===== Quick Log (js/quicklog.js) ===== */
  .ql-list{max-height:34vh; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); padding:4px;}
  .ql-group{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:8px 8px 2px;}
  .ql-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; cursor:pointer; min-height:44px;}
  .ql-item:has(input:checked){background:var(--ql-on, var(--soft-blue));}
  .ql-item input{flex:none; width:18px; height:18px; margin:0;}
  .ql-text{display:flex; flex-direction:column; min-width:0;}
  .ql-title{font-weight:600; color:var(--text);}
  .ql-sub{font-size:12px; color:var(--muted);}
  .ql-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
  .ql-chip{min-width:48px; min-height:40px; padding:6px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--card); color:var(--text); font:inherit; font-weight:600; cursor:pointer;}
  .ql-chip.active{background:var(--ql-on, var(--soft-blue)); border-color:var(--ql-on-line, var(--soft-blue-line)); color:var(--ql-on-ink, var(--soft-blue-ink));}
  .ql-fab{display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:56px; height:56px; border-radius:50%; border:none; background:var(--primary); color:#fff; box-shadow:var(--sh-3); cursor:pointer; align-items:center; justify-content:center;}
  .ql-fab .ico{width:26px; height:26px;}
  html.gs-open .ql-fab, body:has(.modal-bg.open) .ql-fab{display:none !important;}
  @media (max-width:760px){ .ql-fab{display:inline-flex;} }
  .ql-toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:1300; max-width:90vw; padding:10px 16px; border-radius:999px; background:var(--navy-2); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--sh-3); transition:opacity .2s, transform .2s;}
  .ql-toast.show{opacity:1; transform:translate(-50%, 0);}

  /* ============================================================================
     DARK THEME — html[data-theme="dark"] (js/theme.js). Same tokens, dark values; then the few rules that hard-code a light colour.
     Screen only: printing always uses the light palette (the A4 print / certificate styles below are untouched).
     ========================================================================= */
  @media screen{
  html[data-theme="dark"]{
    color-scheme:dark;
    --primary:#7aa2ff; --primary-600:#6c98f7; --primary-700:#9db9ff; --primary-50:#1a2742; --primary-100:#26395f;
    --accent:#f0a64a;
    --navy:#e8edf5; --navy-2:#d6deea; --navy-3:#b9c4d6;
    --teal:var(--primary); --teal-2:var(--primary-600); --teal-dark:var(--primary-700); --teal-light:var(--primary-50);
    --bg:#0d131e; --bg-2:#121a28; --card:#172131; --line:#25324a; --line-strong:#344461;
    --text:#e4e9f2; --muted:#a8b4c8; --muted-2:#8e9cb3;
    --red:#f4a5a0; --red-bg:#3b2125; --amber:#f1c47e; --amber-bg:#382d19; --green:#91d8b0; --green-bg:#17342b; --purple:#c3abf2; --purple-bg:#2d2545; --blue:#a3bdf6; --blue-bg:#1c2d4d;
    --k1:#6f94e6; --k2:#62b3c2; --k3:#9985d9; --k4:#d8a05a; --k5:#6cb48c; --k6:#d9809a;
    --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 4px 14px -2px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.4); --sh-3:0 18px 48px -12px rgba(0,0,0,.75);
    --sh-teal:0 6px 20px -8px rgba(122,162,255,.35);
    --ring:0 0 0 3px rgba(122,162,255,.28);
    --soft-blue:#243a68; --soft-blue-hover:#2d4880; --soft-blue-line:#38579a; --soft-blue-ink:#d6e3ff;
    --fill-blue:#5b84d8; --fill-green:#3f9c72;
    --row-alt:#1a2538; --row-hover:#212f4b;
  }
  html[data-theme="dark"] body{
    background:
      radial-gradient(700px 420px at 12% 6%, rgba(122,162,255,.07), transparent 62%),
      radial-gradient(700px 420px at 94% 96%, rgba(240,166,74,.04), transparent 62%),
      var(--bg);
    background-attachment:fixed;
  }
  /* surfaces that hard-code white */
  html[data-theme="dark"] .role-switcher-slot select, html[data-theme="dark"] .theme-select,
  html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .week-wrap, html[data-theme="dark"] .week-grid td.wk-phase,
  html[data-theme="dark"] .modal, html[data-theme="dark"] .pd-chip, html[data-theme="dark"] .pd-kpi, html[data-theme="dark"] .pd-card,
  html[data-theme="dark"] .fm-money:focus-within, html[data-theme="dark"] .pa-picker, html[data-theme="dark"] .pa-picker select:focus,
  html[data-theme="dark"] .pa-note-v2, html[data-theme="dark"] .pa-chip.is-blue, html[data-theme="dark"] .pa-composer-v2 input,
  html[data-theme="dark"] .pa-composer-v2 select, html[data-theme="dark"] .pa-composer-v2 textarea, html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .rt-toolbar button,
  html[data-theme="dark"] .rt-toolbar select, html[data-theme="dark"] .rich-editor, html[data-theme="dark"] .filter-bar select,
  html[data-theme="dark"] .filter-bar input[type="text"], html[data-theme="dark"] .filter-bar input[type="date"],
  html[data-theme="dark"] .cal-cell:hover, html[data-theme="dark"] select:not([multiple]):not([size]),
  html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="time"],
  html[data-theme="dark"] .pa-picker select, html[data-theme="dark"] .field select, html[data-theme="dark"] .pagination-bar select, html[data-theme="dark"] .role-select, html[data-theme="dark"] .inline-select,
  html[data-theme="dark"] input[type="file"]::file-selector-button, html[data-theme="dark"] .btn.danger.small{background-color:var(--card);}
  html[data-theme="dark"] .btn.danger.small{border-color:#7a3a3d;}
  html[data-theme="dark"] .btn.danger:not(.small){color:#2b0f10;}      /* the dark theme's red is a light red: dark text on it */
  html[data-theme="dark"] .btn.secondary:hover{background-color:var(--soft-blue);}
  html[data-theme="dark"] .fm-actions{background:rgba(23,33,49,.97);}
  html[data-theme="dark"] .pa-composer-v2{background:linear-gradient(180deg,var(--bg-2),var(--card));}
  html[data-theme="dark"] .rq-rate-box{background:linear-gradient(180deg,#2a2415,var(--card)); border-color:#4a3d1f;}
  /* near-white tints -> the second surface */
  html[data-theme="dark"] .week-grid thead .wk-month th, html[data-theme="dark"] .week-grid .wk-c0h, html[data-theme="dark"] .week-grid thead th,
  html[data-theme="dark"] .week-grid tbody tr:nth-child(even) td.wk-phase, html[data-theme="dark"] .pd-hero, html[data-theme="dark"] .fm-hero-danger,
  html[data-theme="dark"] .rt-toolbar, html[data-theme="dark"] .module-btn:hover, html[data-theme="dark"] .sidebar-toggle:hover,
  html[data-theme="dark"] .b-gray{background:var(--bg-2);}
  html[data-theme="dark"] .pd-hero{border-bottom-color:var(--line);}
  html[data-theme="dark"] details.collapse-group>summary{background:linear-gradient(180deg,var(--bg-2),var(--card));}
  html[data-theme="dark"] .week-grid tbody tr:hover td, html[data-theme="dark"] .week-grid tbody tr:hover td.wk-phase, html[data-theme="dark"] th.sortable:hover{background:var(--row-hover);}
  html[data-theme="dark"] .gantt-track{background:var(--line);}
  html[data-theme="dark"] .module-sidebar-title img, html[data-theme="dark"] .auth-card img{background:#fff; border-radius:8px; padding:4px 6px;}
  html[data-theme="dark"] .lb-track, html[data-theme="dark"] .pd-progress, html[data-theme="dark"] .progress-track{background:var(--line);}
  html[data-theme="dark"] .dl-bar-none{background:repeating-linear-gradient(45deg,#1b2638,#1b2638 6px,#222f45 6px,#222f45 12px);}
  html[data-theme="dark"] .b-gold{background:var(--amber-bg); color:var(--amber); box-shadow:inset 0 0 0 1px #5a4a26;}
  /* semantic rings / borders that were pastel */
  html[data-theme="dark"] .b-green{box-shadow:inset 0 0 0 1px #24503f;}
  html[data-theme="dark"] .b-amber{box-shadow:inset 0 0 0 1px #5a4a26;}
  html[data-theme="dark"] .b-blue{box-shadow:inset 0 0 0 1px #2c4676;}
  html[data-theme="dark"] .b-purple{box-shadow:inset 0 0 0 1px #46386c;}
  html[data-theme="dark"] .b-red, html[data-theme="dark"] .pd-chip-red{box-shadow:inset 0 0 0 1px #6a3238;}
  html[data-theme="dark"] .card.warn, html[data-theme="dark"] .pd-step.is-drop{border-color:#6a3238;}
  html[data-theme="dark"] .auth-error, html[data-theme="dark"] .fm-hero-danger{border-color:#6a3238;}
  html[data-theme="dark"] .pd-phase.is-done{border-color:#24503f;}
  html[data-theme="dark"] .btn:hover{border-color:var(--soft-blue-line);}
  html[data-theme="dark"] .pd-eyebrow{color:var(--primary-700);}
  html[data-theme="dark"] .pd-phase.is-done .pd-phase-dot{color:#0d2a1d;}
  html[data-theme="dark"] .pd-step.is-drop .pd-step-n{color:#3b2125;}
  html[data-theme="dark"] .pa-dot{border-color:var(--card);}
  html[data-theme="dark"] .btn.danger.small:hover{color:#fff;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4a66;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4a5c7c;}
  html[data-theme="dark"] .cap-cell .cap-bar{background:rgba(255,255,255,.12);}
  html[data-theme="dark"] .cap-free{background:rgba(122,162,255,.10);}
  html[data-theme="dark"] .gantt-bar.upcoming, html[data-theme="dark"] .gantt-bar.st-todo, html[data-theme="dark"] .week-grid .wk-seg.tone-todo{background:linear-gradient(180deg,#5d6b82,#4c586d);}
  /* custom chevron on selects: the stroke colour is baked into the data-URI, so repaint it light */
  html[data-theme="dark"] select:not([multiple]):not([size]), html[data-theme="dark"] .pa-picker select, html[data-theme="dark"] .pa-composer-v2 select, html[data-theme="dark"] .field select, html[data-theme="dark"] .pagination-bar select, html[data-theme="dark"] .role-select, html[data-theme="dark"] .inline-select, html[data-theme="dark"] .theme-select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23a8b4c8' stroke-width='1.5' stroke-linecap='round'/></svg>");
  }
  html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:var(--muted-2);}
  }

  /* ============================================================================
     PRINT + CERTIFICATE — unchanged (tuned for A4)
     ========================================================================= */
  #printArea{display:none;}
  @media print{
    @page{ size: A4; margin: 0; }
    html, body{ width:210mm; margin:0; padding:0; }
    body *{visibility:hidden;}
    #printArea, #printArea *{visibility:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    #printArea{display:block; position:absolute; top:0; left:0; width:210mm; padding:0; margin:0;}
    .no-print{display:none !important;}
    /* A4 landscape print (Implementation timeline) — see printLandscape() */
    html.print-landscape, html.print-landscape body{ width:297mm; }
    html.print-landscape #printArea{ width:297mm; }
  }
  #printArea{box-sizing:border-box; padding:24px; font-family:-apple-system,Segoe UI,Roboto,sans-serif; color:#1c2531;}
  #printArea .print-page-break{break-before:page; page-break-before:always;} /* starts on a new printed page (Weekly Schedule) */
  #printArea h1{font-size:19px; color:#1f3864; margin-bottom:2px;}
  #printArea .sub{font-size:12px; color:#6b7686; margin-bottom:18px;}
  #printArea h2{font-size:14px; color:#0f6b72; border-bottom:1px solid #ccc; padding-bottom:4px; margin-top:22px;}
  #printArea table{width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px;}
  #printArea th, #printArea td{border:1px solid #ccc; padding:6px 8px; text-align:left;}
  #printArea th{background:#eaf1f1;}
  #printArea .sumgrid{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
  #printArea .sumbox{border:1px solid #ccc; border-radius:6px; padding:8px 14px;}
  #printArea .sumbox b{display:block; font-size:18px; color:#1f3864;}
  #printArea .section-title{font-size:13px; font-weight:700; color:#1f3864; margin:18px 0 4px;}
  #printArea .week-wrap{overflow:visible; border:1px solid #bbb; border-radius:6px;}
  #printArea table.week-grid{width:100%; table-layout:fixed; font-size:7.5px; margin-top:0; border-collapse:collapse;}
  #printArea table.week-grid col.wk-c0{width:auto;}
  #printArea table.week-grid th, #printArea table.week-grid td{border:1px solid #cbd2d9; padding:1px 2px; text-align:center; overflow:hidden;}
  #printArea table.week-grid .wk-c0h, #printArea table.week-grid td.wk-phase{width:auto; white-space:nowrap; text-align:left; padding:2px 6px; box-shadow:none;}
  #printArea table.week-grid thead .wk-month th{background:#eef1f4; font-size:6.5px;}
  #printArea table.week-grid thead .wk-head th{background:#eef1f4;}
  #printArea table.week-grid th .wk-date{display:block; font-weight:400; font-size:6px; color:#6b7686;}
  #printArea table.week-grid td.wk-cell{height:16px; position:relative;}
  #printArea table.week-grid td.wk-cell .wk-seg{position:absolute; top:2px; bottom:2px; left:0; right:0;}
  #printArea table.week-grid .wk-seg.tone-todo{background:#a9b3c1;}
  #printArea table.week-grid .wk-seg.tone-inprogress{background:#c9791f;}
  #printArea table.week-grid .wk-seg.tone-review{background:#5b3a9c;}
  #printArea table.week-grid .wk-seg.tone-done{background:#1c7a4d;}
  #printArea table.week-grid .wk-sub{display:block; font-size:6px; font-weight:400; color:#6b7686;}
  #printArea .week-legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:7px; color:#6b7686;}
  #printArea .week-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px;}
  #printArea .week-legend i.tone-todo{background:#9aa6b5;}
  #printArea .week-legend i.tone-inprogress{background:#c9791f;}
  #printArea .week-legend i.tone-review{background:#5b3a9c;}
  #printArea .week-legend i.tone-done{background:#1c7a4d;}
  #printArea .week-legend i.tone-now{background:#fff; box-shadow:inset 0 0 0 1.5px #0f6b72;}

  /* Certificate of Maintenance print layout */
  #printArea.cert-mode{box-sizing:border-box; width:210mm; padding:8mm 15mm 13mm 15mm; border:2.5px solid #1f3864; position:relative;}
  #printArea.cert-mode::before{
    content:""; position:absolute; inset:5mm; border:1px solid #b8892b; pointer-events:none;
  }
  #printArea.cert-mode .cert-header{width:100%; border-collapse:collapse; border-bottom:1.5px solid #1f3864; margin-bottom:10px;}
  #printArea.cert-mode .cert-header td{border:none; padding:0 0 8px 0; vertical-align:baseline;}
  #printArea.cert-mode .cert-header .vendor{font-size:14px; font-weight:800; color:#1f3864; text-align:left;}
  #printArea.cert-mode .cert-header .tagline{font-size:10px; color:#5b6b7d; text-align:right;}
  #printArea.cert-mode .cert-title{text-align:center; font-size:22px; font-weight:800; color:#1f3864; line-height:1.2; letter-spacing:.5px; margin:2px 0 1px;}
  #printArea.cert-mode .cert-number{text-align:center; font-style:italic; color:#0f6b72; font-size:11px; margin-bottom:10px;}
  #printArea.cert-mode .cert-intro{text-align:center; font-size:10.5px; line-height:1.5; margin:0 auto 12px; max-width:600px; color:#1c2531;}
  #printArea.cert-mode table.cert-details{width:100%; border-collapse:collapse; background:#eaf1f1; border:1px solid #d8dee5; margin-bottom:12px;}
  #printArea.cert-mode table.cert-details td{width:50%; padding:6px 14px; border:1px solid #d8dee5; vertical-align:top;}
  #printArea.cert-mode .cert-label{font-size:8.5px; text-transform:uppercase; letter-spacing:.3px; color:#5b6b7d; display:block;}
  #printArea.cert-mode .cert-value{font-size:12px; font-weight:700; color:#1f3864; margin-top:2px; display:block;}
  #printArea.cert-mode .cert-section-title{font-size:11px; font-weight:800; color:#1f3864; margin:0 0 6px;}
  #printArea.cert-mode table.cert-assets{width:100%; border-collapse:collapse; font-size:10px; margin-bottom:6px;}
  #printArea.cert-mode table.cert-assets th{background:#1f3864; color:#fff; padding:6px 8px; text-align:left; font-size:9px;}
  #printArea.cert-mode table.cert-assets td{border:1px solid #d8dee5; padding:6px 8px;}
  #printArea.cert-mode table.cert-assets tr:nth-child(even) td{background:#eaf1f1;}
  #printArea.cert-mode .cert-total{font-size:9.5px; color:#5b6b7d; margin-bottom:12px;}
  #printArea.cert-mode table.cert-seal-row{width:100%; border-collapse:collapse; margin-bottom:16px;}
  #printArea.cert-mode table.cert-seal-row td{border:none; padding:0; vertical-align:middle;}
  #printArea.cert-mode table.cert-seal-row .seal-cell{width:70px; padding-right:16px;}
  #printArea.cert-mode .cert-seal{
    width:54px; height:54px; border-radius:50%; border:2px solid #b8892b; box-shadow:0 0 0 4px #fff, 0 0 0 5px #b8892b;
    display:table-cell; text-align:center; vertical-align:middle;
  }
  #printArea.cert-mode .cert-seal span{display:block; font-weight:800; color:#1f3864; line-height:1.15;}
  #printArea.cert-mode .cert-seal .s1{font-size:6px;}
  #printArea.cert-mode .cert-seal .s2{font-size:9px; color:#b8892b; margin-top:2px;}
  #printArea.cert-mode .cert-disclaimer{font-size:9px; font-style:italic; color:#5b6b7d; line-height:1.5;}
  #printArea.cert-mode table.cert-sig-row{width:100%; border-collapse:collapse;}
  #printArea.cert-mode table.cert-sig-row td{border:none; width:50%; text-align:center; padding:0 15px; vertical-align:top;}
  #printArea.cert-mode .cert-sig-line{border-top:1px solid #333; margin-bottom:6px; padding-top:6px;}
  #printArea.cert-mode .cert-sig-name{font-weight:700; font-size:11px; color:#1c2531;}
  #printArea.cert-mode .cert-sig-role{font-size:9px; color:#5b6b7d;}
  #printArea.cert-mode .cert-footer{text-align:center; font-size:8px; color:#5b6b7d; margin-top:12px; border-top:1px solid #d8dee5; padding-top:5px;}

  /* Request Technical — dashboard panels, star rating */
  /* Request ratings: SVG stars (see requestStarSvg in js/requesttech.js; the gradient #rqStarGrad lives in a hidden <svg> on the page) */
  .rq-svg-star{width:1.05em; height:1.05em; display:inline-block; vertical-align:-.18em; overflow:visible;}
  .rq-svg-star path{fill:url(#rqStarGrad); stroke:#d68f00; stroke-width:1; stroke-linejoin:round;}
  .rq-svg-star.off path{fill:#eef1f5; stroke:#cdd5df;}
  .rq-stars-static{display:inline-flex; gap:1px; align-items:center; white-space:nowrap; line-height:1;}
  .rq-rate-box{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 12px 12px; margin:4px 0 6px; background:linear-gradient(180deg,#fffaf0,#fff); border:1px solid #f1e3bf; border-radius:12px;}
  .rq-stars{display:flex; gap:8px;}
  .rq-star{border:0; background:none; cursor:pointer; padding:2px; width:48px; height:48px; border-radius:12px; transition:transform .14s var(--ease);}
  .rq-star svg{width:100%; height:100%; overflow:visible;}
  .rq-star path{fill:#eef1f5; stroke:#cdd5df; stroke-width:1; stroke-linejoin:round; transition:fill .14s var(--ease), stroke .14s var(--ease), filter .14s var(--ease);}
  .rq-star.on path{fill:url(#rqStarGrad); stroke:#d68f00; filter:drop-shadow(0 3px 5px rgba(232,160,0,.45));}
  .rq-star:hover{transform:translateY(-2px) scale(1.12);}
  .rq-star:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
  .rq-rate-readout{font-size:13px; color:var(--muted); min-height:20px; text-align:center;}
  .rq-rate-readout strong{font-size:16px; color:#c98100;}
  /* Request Technical status cards */
  .cards .card.rq-c-waiting{--kacc:#7c56d6;}
  .cards .card.rq-c-assigned{--kacc:#4fb3ec;}
  .cards .card.rq-c-progress{--kacc:#f08a24;}
  .cards .card.rq-c-rating{--kacc:#f2c200;}
  .cards .card.rq-c-done{--kacc:#1f9d63;}
  .cards .card.rq-c-rejected{--kacc:#d63b3b;}
  .cards .card.rq-c-cancelled{--kacc:#8a97a5;}
  /* ---- Searchable select (enhanceSearchableSelect in js/core.js) ---- */
  .ss-wrap{position:relative; width:100%;}
  .ss-native{display:none !important;}
  .ss-input{width:100%; padding:9px 30px 9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color:var(--text);}
  .ss-input:focus{outline:none; border-color:var(--teal); background-color:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.16);}
  /* Inside a .field the generic ".field input" rule would win — keep the searchable select looking exactly like the other dropdowns. */
  .field .ss-input{padding:9px 30px 9px 11px; height:37px; box-sizing:border-box; cursor:pointer; text-overflow:ellipsis; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;}
  .field .ss-input:focus{background-color:#fff; cursor:text;}
  .ss-input::placeholder{color:var(--text); opacity:1;}
  .ss-input:disabled{opacity:.6; cursor:not-allowed;}
  .ss-list{position:fixed; z-index:10000; background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 10px 30px rgba(10,30,50,.22); overflow-y:auto; padding:4px;}
  .ss-opt{padding:7px 10px; border-radius:6px; cursor:pointer; font-size:13px; line-height:1.3;}
  .ss-opt:hover,.ss-opt.is-active{background:var(--teal-light);}
  .ss-opt.is-sel{font-weight:700; color:var(--teal);}
  .ss-opt.is-off{opacity:.5; cursor:not-allowed;}
  .ss-none{padding:9px 10px; font-size:12px; color:var(--muted);}
  .ss-sep{padding:8px 10px 3px; margin-top:4px; border-top:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);}
  .ss-hint{font-size:11px; font-weight:600; color:var(--muted); margin-left:6px;}
  .ss-opt.ss-rem{border-left:3px solid var(--teal-2);}

  /* ---- Demo Lab > Resources ---- */
  .dl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; margin-top:10px;}
  .dl-card{display:flex; flex-direction:column; gap:10px;}
  .dl-card-h{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
  .dl-name{font-weight:700; font-size:16px; color:var(--ink,#16202a); overflow-wrap:anywhere;}
  .dl-row-h{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:4px; font-size:13px; flex-wrap:wrap;}
  .dl-bar{height:12px; border-radius:6px; background:#e8edf1; overflow:hidden; display:flex;}
  .dl-bar.over{box-shadow:0 0 0 2px var(--red) inset;}
  .dl-bar-none{background:repeating-linear-gradient(45deg,#eef1f4,#eef1f4 6px,#e4e8ec 6px,#e4e8ec 12px);}
  .dl-seg{display:block; height:100%;}
  .dl-seg-perm{background:var(--k1);} .dl-seg-temp{background:var(--k4);} .dl-seg-free{background:#e8edf1;}
  .dl-legend{display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 0;}
  .dl-legend i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px;}
  .dl-vms summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--teal);}
  .dl-vms table{margin-top:6px; font-size:12px;}


/* Pilar picker (Product form) and the per-user Pilar select (Master Data > User Accounts) */
.check-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight:400; cursor: pointer; }
.check-inline input { width: 16px; height: 16px; margin: 0; }
.inline-select { padding: 4px 8px; font-size:13px; max-width: 190px; }

/* ---- BOD Dashboard (js/bod.js): KPI cards with period deltas, bar rows, compact boxes ---- */
.bod-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px;}
.bod-ctl{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600;}
.bod-note{margin:2px 0 14px;}
.bod-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.bod-kpi .bod-kpi-lbl{margin:0 0 6px; color:var(--text-2,var(--muted)); font-weight:600; text-transform:none;}
.bod-kpi.bad{border-color:#f4d0cc;} .bod-kpi.bad::before{background:#e5484d;}
.bod-kpi.warn::before{background:#e5a13a;}
.bod-delta{font-size:11.5px; font-weight:700; margin-top:6px; min-height:16px;}
.bod-delta span{font-weight:500; color:var(--muted);}
.bod-delta.good,.bod-delta-inline.good{color:var(--green);} .bod-delta.bad,.bod-delta-inline.bad{color:var(--red);} .bod-delta.flat,.bod-delta-inline.flat{color:var(--muted);}
.bod-delta-inline{font-size:11.5px; font-weight:700; margin-left:4px;}
.bod-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; margin-bottom:22px; align-items:start;}
.bod-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--sh-1); min-width:0;}
.bod-box-title{font-size:13px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.bod-bar-row{display:grid; grid-template-columns:minmax(90px,38%) 1fr auto; gap:8px; align-items:center; padding:3px 0; font-size:12.5px;}
.bod-bar-lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2,inherit);}
.bod-bar-track{height:9px; background:var(--line); border-radius:5px; overflow:hidden;}
.bod-bar-fill{height:100%; background:var(--primary-600,#1f6f78); border-radius:5px;}
.bod-bar-fill.good{background:var(--green);} .bod-bar-fill.warn{background:#e5a13a;} .bod-bar-fill.bad{background:var(--red);}
.bod-bar-val{font-variant-numeric:tabular-nums; font-weight:600; font-size:12px; white-space:nowrap;}
.bod-stat{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.bod-stat:last-child{border-bottom:0;} .bod-stat b{font-variant-numeric:tabular-nums;}
.bod-table{overflow-x:auto;} .bod-table table{font-size:12.5px;}
@media (max-width:640px){ .bod-grid{grid-template-columns:minmax(0,1fr);} .bod-bar-row{grid-template-columns:minmax(70px,34%) 1fr auto;} }