:root{
  /* Palette. The names are the ones every stylesheet already uses, so changing a value here restyles the whole app.
     Light is the default; `html.dark` (set by the theme switch, remembered in localStorage) swaps the set below. */
  --navy:#0f172a; --navy-2:#1e293b; --blue-500:#1c75bc; --blue-50:#eff6ff;
  --ink:#0f172a; --wave:#75bae6;
  --slate-50:#f1f5f9; --slate-100:#eef2f7; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --stone:#64748b; --stone-light:#94a3b8;

  /* Surfaces and text */
  --bg:#f8fafc; --surface:#ffffff; --panel:#f1f5f9; --line:#e2e8f0;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --on-accent:#ffffff;

  /* Accent and actions */
  --accent:#1c75bc; --accent-soft:#eff6ff;
  --primary:var(--accent); --primary-hover:var(--accent-strong);
  --accent-line:#bfdbfe; --accent-strong:#165b93;
  --focus-ring:rgba(28,117,188,.22);
  --overlay:rgba(15,23,42,.45);
  --brand-dark:var(--navy-2);
  --tooltip-bg:#0f172a; --tooltip-text:#f8fafc;

  /* Status colors (semantic, keep distinct from the accent) */
  --red:#e11d48; --red-bg:#fff1f2; --orange:#c2410c; --orange-bg:#fff1ea;
  --blue:#2563eb; --blue-bg:#eff6ff;
  --green:#059669; --green-bg:#ecfdf5; --purple:#7c3aed; --purple-bg:#f5f3ff;
  --gray:#64748b; --gray-bg:#f1f5f9;

  --bf-primary:#2563eb; --bf-ring:#3b82f6; --bf-border:#e2e8f0; --bf-muted:#f8fafc; --bf-muted-fg:#64748b;
  --bf-destructive:#e11d48; --bf-destructive-bg:#fff1f2; --bf-radius:.5rem;

  /* Spacing (4px base) and type scale. design.md says where each step is used. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px;

  /* Motion: one curve, three speeds. design-system.md says where each is used. */
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;

  /* Shape and depth: 8px corners, hairline borders, very soft shadows. */
  --radius:.5rem; --radius-lg:.75rem;
  --shadow-sm:0 1px 2px rgb(15 23 42 / .04); --shadow-md:0 6px 20px rgb(15 23 42 / .08);

  /* Charts */
  --chart-error-a:#fb7185; --chart-error-b:#e11d48;
  --chart-burn-a:#93c5fd; --chart-burn-b:#1c75bc;

  color-scheme:light;
}

html.dark{
  --navy:#0b1220; --navy-2:#111a2b; --blue-500:#3b94dc; --blue-50:#14253d;
  --ink:#e6edf6; --wave:#3b94dc;
  --slate-50:#1a2538; --slate-100:#162033; --slate-200:#223049; --slate-300:#2a3a56;
  --stone:#8d9bb0; --stone-light:#6b7a90;

  --bg:#0b1220; --surface:#111a2b; --panel:#1a2538; --line:#223049;
  --border:#223049; --border-strong:#2a3a56;
  --text:#e6edf6; --muted:#8d9bb0; --muted-2:#6b7a90;
  --on-accent:#06121f;

  --accent:#3b94dc; --accent-soft:#14253d;
  --accent-line:#24425f; --accent-strong:#8cc4f0;
  --focus-ring:rgba(59,148,220,.3);
  --overlay:rgba(0,0,0,.6);
  --tooltip-bg:#e6edf6; --tooltip-text:#0b1220;

  --red:#f4607f; --red-bg:rgba(244,96,127,.12); --orange:#fb923c; --orange-bg:rgba(251,146,60,.13);
  --blue:#60a5fa; --blue-bg:rgba(96,165,250,.12);
  --green:#34d399; --green-bg:rgba(52,211,153,.12); --purple:#a78bfa; --purple-bg:rgba(167,139,250,.14);
  --gray:#8d9bb0; --gray-bg:#1a2538;

  --bf-primary:#3b94dc; --bf-ring:#3b94dc; --bf-border:#223049; --bf-muted:#0e1626; --bf-muted-fg:#8d9bb0;
  --bf-destructive:#f4607f; --bf-destructive-bg:rgba(244,96,127,.12);

  --shadow-sm:0 1px 2px rgb(0 0 0 / .3); --shadow-md:0 8px 24px rgb(0 0 0 / .45);
  --chart-error-a:#f4607f; --chart-error-b:#be123c;
  --chart-burn-a:#3b94dc; --chart-burn-b:#8cc4f0;

  color-scheme:dark;
}

/* A short cross-fade when the theme changes. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease, stroke .35s ease !important;
}

  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{background:var(--bg);color:var(--text);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;font-size:13.5px;}

  :root{--sidebar-w:238px;--sidebar-w-min:60px;}
  .shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);height:100vh;overflow:hidden;transition:grid-template-columns .3s cubic-bezier(.22,1,.36,1);}
  html.sidebar-collapsed .shell{grid-template-columns:var(--sidebar-w-min) minmax(0,1fr);}

  .sidebar{position:relative;z-index:80;border-right:1px solid var(--border);padding:14px 10px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;height:100vh;background:var(--surface);}
  .sidebar::-webkit-scrollbar{width:8px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;border:2px solid var(--surface);}
  .sidebar-backdrop{display:none;}

  .nav-section{display:flex;flex-direction:column;gap:1px;}
  /* A hairline between sections in *both* states: expanded, the "Operations"
     and "Admin" labels are not enough to group 5 and 8 items; collapsed, the
     labels are display:none and the rule is the only thing left. */
  .nav-section + .nav-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
  .nav-section + .nav-section > .nav-label{padding-top:5px;}
  .nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.055em;color:var(--muted-2);font-weight:600;padding:15px 10px 5px;white-space:nowrap;overflow:hidden;}

  .side-brand{display:flex;align-items:center;gap:10px;padding:2px 10px 12px;color:var(--text);font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
  .side-brand-mark{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;color:var(--accent);}
  .side-brand-mark .ic{width:24px;height:24px;stroke-width:2.1;}
  .side-brand:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:7px;}
  html.sidebar-collapsed .side-brand{justify-content:center;padding-inline:0;}
  .side-item{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:var(--muted);font-size:13.5px;line-height:1.1;white-space:nowrap;transition:background .12s,color .12s;}
  .side-item:hover{background:var(--panel);color:var(--text);}
  .side-item:focus-visible,.side-collapse:focus-visible,.switch-btn:focus-visible,
  .side-user-btn:focus-visible,.switch-item:focus-visible,.side-user-menu a:focus-visible,
  .side-user-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:7px;}
  .side-item.active{background:var(--accent-soft);color:var(--accent);font-weight:500;}
  .side-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2.5px;border-radius:0 3px 3px 0;background:var(--accent);}
  .side-item .ic{width:17px;height:17px;flex-shrink:0;stroke-width:1.75;}
  .side-item .side-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .side-badge{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:1px 6px;min-width:19px;text-align:center;flex-shrink:0;}
  .side-item.active .side-badge{color:var(--accent);background:var(--surface);border-color:transparent;}

  .side-context{margin:9px 2px 3px;padding:7px;background:var(--panel);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:1px;}
  .side-context .side-item:hover{background:var(--surface);}

  .switch{position:relative;margin-bottom:6px;}
  .switch-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--border);background:var(--surface);border-radius:8px;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;}
  .switch-btn:hover{background:var(--panel);}
  .switch-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
  .switch-glyph{display:none;width:20px;height:20px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;align-items:center;justify-content:center;flex-shrink:0;}
  .switch-name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .switch-caret{width:12px;height:12px;stroke-width:2;color:var(--muted);flex-shrink:0;}
  .switch-tick{width:14px;height:14px;stroke-width:2.5;}
  .switch-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(13,17,23,.13);z-index:70;padding:4px;}
  .switch-list{max-height:min(320px,50vh);overflow-y:auto;}
  .switch-find{width:100%;margin:2px 0 4px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;}
  .side-context .switch{margin-bottom:4px;}
  .switch-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:none;background:none;border-radius:6px;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;}
  .switch-item:hover{background:var(--panel);}
  .switch-ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .switch-pic{display:inline-flex;color:var(--muted);}.switch-item.current .switch-pic{color:var(--accent);}
  .switch-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .switch-item.current{color:var(--accent);font-weight:500;cursor:default;}
  .switch-item svg{flex-shrink:0;color:var(--muted);}
  .switch-item.current svg{color:var(--accent);}
  .switch-item-all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--muted);}
  .switch-role{font-size:11px;color:var(--muted);flex-shrink:0;}

  .side-foot{margin-top:auto;padding-top:6px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px;}
  .side-collapse{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:var(--muted);font-size:12.5px;border:none;background:none;cursor:pointer;font:inherit;width:100%;white-space:nowrap;overflow:hidden;}
  .side-collapse:hover{background:var(--panel);color:var(--text);}
  .side-collapse .ic{width:16px;height:16px;flex-shrink:0;stroke-width:1.75;transition:transform .18s ease;}

  .side-user{position:relative;}
  .side-user-btn{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:none;background:none;border-radius:8px;cursor:pointer;font:inherit;text-align:left;color:var(--text);}
  .side-user-btn:hover{background:var(--panel);}
  .side-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .side-user-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
  .side-user-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .side-user-role{font-size:11px;color:var(--muted);text-transform:capitalize;}
  .side-user-menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(13,17,23,.13);padding:4px;z-index:70;}
  .side-user-menu a,.side-user-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:none;background:none;border-radius:6px;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;}
  .side-user-menu a:hover,.side-user-menu button:hover{background:var(--panel);}
  .side-user-menu form{margin:0;}
  .side-user-menu svg{width:15px;height:15px;stroke-width:1.75;color:var(--muted);flex-shrink:0;}
  .side-menu-ic{width:15px;height:15px;flex-shrink:0;}
  .switch-icon{width:14px;height:14px;stroke-width:2;flex-shrink:0;}
  .switch-item svg{width:14px;height:14px;stroke-width:2;}

  @media(min-width:861px){
    html.sidebar-collapsed .sidebar{padding-left:8px;padding-right:8px;}
    html.sidebar-collapsed .side-badge,
    html.sidebar-collapsed .nav-label,
    html.sidebar-collapsed .switch-name,
    html.sidebar-collapsed .switch-caret,
    html.sidebar-collapsed .switch-dot,
    html.sidebar-collapsed .side-user-meta{display:none;}
    /* Clipped, not display:none -- the label must stay readable to a screen
       reader and to `content:attr(data-label)` tooltips. */
    html.sidebar-collapsed .side-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
    html.sidebar-collapsed .switch-glyph{display:flex;}
    html.sidebar-collapsed .side-item,
    html.sidebar-collapsed .side-collapse,
    html.sidebar-collapsed .switch-btn,
    html.sidebar-collapsed .side-user-btn{justify-content:center;padding-left:0;padding-right:0;gap:0;}
    html.sidebar-collapsed .side-context{background:none;border:none;padding:0;margin:4px 0;}
    html.sidebar-collapsed .side-item.active::before{left:-8px;}
    html.sidebar-collapsed .side-collapse .ic{transform:rotate(180deg);}
    html.sidebar-collapsed .switch-menu,
    html.sidebar-collapsed .side-user-menu{left:0;width:216px;}
  }

  .topbar-burger{display:none;}
  @media(max-width:860px){
    .shell,html.sidebar-collapsed .shell{grid-template-columns:1fr;}
    .sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1);box-shadow:0 0 44px rgba(13,17,23,.16);}
    html.sidebar-open .sidebar{transform:translateX(0);}
    .sidebar-backdrop{display:block;position:fixed;inset:0;background:var(--overlay);z-index:75;opacity:0;pointer-events:none;transition:opacity .3s ease;}
    html.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
    .side-collapse{display:none;}
    .topbar-burger{display:flex;border:none;background:none;padding:5px;cursor:pointer;color:var(--text);display:flex;border-radius:6px;}
    .topbar-burger:hover{background:var(--panel);}
    .topbar-burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;}
    .topbar-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .main{padding:16px 16px 44px;}
    .kanban-board{height:auto;max-height:none;}
    .head{flex-wrap:wrap;gap:10px 12px;}
    .head h1{font-size:17px;}
    .head-actions{margin-left:0;flex-wrap:wrap;}
    .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .toolbar{gap:10px;}
  }

  .main{padding:28px 36px;width:100%;min-width:0;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;height:100vh;}
  /* An overflow:hidden card has no automatic minimum height, so in this flex column it was squashed to ~0 once the page outgrew the window. */
  .main > .card{flex-shrink:0;}
  .head{display:flex;align-items:center;margin-bottom:20px;}
  .head h1{font-size:19px;font-weight:600;margin:0;}
  .head .count{color:var(--muted);font-weight:400;font-size:14px;margin-left:8px;}
  .head-actions{margin-left:auto;display:flex;gap:8px;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;border:1px solid var(--border);background:var(--surface);padding:6px 14px;border-radius:var(--radius);font-size:13.5px;font-weight:500;line-height:1.2;color:var(--text);white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;}
  .btn:hover{background:var(--panel);border-color:var(--border-strong);}
  .btn:active{transform:scale(.98);}
  .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);border-color:var(--accent);}
  .btn .ic,.btn svg{width:15px;height:15px;flex:none;stroke-width:1.9;}
  .btn-primary{background:var(--primary);color:var(--on-accent);border-color:var(--primary);}
  .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
  .btn-danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--border));}
  .btn-danger:hover{background:var(--red-bg);border-color:var(--red);}
  .btn-ghost{background:transparent;border-color:transparent;box-shadow:none;}
  .btn-sm{min-height:28px;padding:3px 10px;font-size:12.5px;}
  .btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none;}

  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;}
  .tab{padding:8px 4px;margin-right:18px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;position:relative;top:1px;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--text);font-weight:500;border-color:var(--text);}

  table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);}
  thead th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--panel);padding:9px 12px;border-bottom:1px solid var(--border);}
  thead th:first-child{border-top-left-radius:calc(var(--radius-lg) - 1px);}
  thead th:last-child{border-top-right-radius:calc(var(--radius-lg) - 1px);}
  tbody td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13.5px;}
  tbody tr:last-child td{border-bottom:0;}
  tbody tr:last-child td:first-child{border-bottom-left-radius:calc(var(--radius-lg) - 1px);}
  tbody tr:last-child td:last-child{border-bottom-right-radius:calc(var(--radius-lg) - 1px);}
  tbody tr:hover{background:color-mix(in srgb,var(--panel) 55%,transparent);}
  tbody tr{cursor:pointer;}
  .card table,.card-flush table,.pd-card table,.hm-card table,.tbl,dialog table{border:0;border-radius:0;background:transparent;}
  .card thead th:first-child,.card-flush thead th:first-child{border-top-left-radius:0;}

  .id{color:var(--muted);font-size:13px;white-space:nowrap;}
  .title{font-weight:500;}
  .sub{color:var(--muted);font-size:12.5px;margin-top:1px;}

  .pill{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border-radius:5px;white-space:nowrap;}
  .pill.open{background:var(--blue-bg);color:var(--blue);}
  .pill.progress{background:var(--orange-bg);color:var(--orange);}
  .pill.resolved{background:var(--green-bg);color:var(--green);}
  .pill.closed{background:var(--gray-bg);color:var(--gray);}
  .pill.critical{background:var(--red-bg);color:var(--red);}
  .pill.high{background:var(--orange-bg);color:var(--orange);}
  .pill.medium{background:var(--blue-bg);color:var(--blue);}
  .pill.low{background:var(--gray-bg);color:var(--gray);}
  .pill.info{background:var(--gray-bg);color:var(--gray);}
  .pill.testing{background:var(--purple-bg);color:var(--purple);}
  .pill.assigned{background:var(--blue-bg);color:var(--blue);}
  .pill.draft{background:var(--gray-bg);color:var(--gray);}
  .pill.active{background:var(--green-bg);color:var(--green);}
  .pill.closed-survey{background:var(--gray-bg);color:var(--gray);}
  .pill.bug{background:var(--red-bg);color:var(--red);}
  .pill.feature{background:var(--blue-bg);color:var(--blue);}
  .pill.question{background:var(--green-bg);color:var(--green);}
  .pill.nps{background:var(--purple-bg);color:var(--purple);}
  .pill.csat{background:var(--blue-bg);color:var(--blue);}
  .pill.ces{background:var(--green-bg);color:var(--green);}

  .prio{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);}
  .prio .bar{width:3px;height:13px;border-radius:2px;display:inline-block;}
  .prio.critical .bar,.prio.high .bar{background:var(--red);}
  .prio.medium .bar{background:var(--orange);}
  .prio.low .bar,.prio.info .bar{background:var(--gray);}

  .avatar{width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--border);font-size:10px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;justify-content:center;margin-right:6px;vertical-align:middle;}
  .assignee{display:flex;align-items:center;font-size:13px;color:var(--text);}
  .unassigned{color:var(--muted);}
  .date{color:var(--muted);font-size:13px;}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;}
  .stat{text-align:center;}
  .stat .val{font-size:24px;font-weight:600;}
  .stat .label{font-size:12px;color:var(--muted);margin-top:2px;}

  .form-group{margin-bottom:16px;}
  .form-group label,.form-group .dd-label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;}
  .form-input{width:100%;min-height:36px;padding:7px 11px;border:1px solid var(--border-strong);border-radius:var(--radius);font-size:13.5px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s;}
  .form-input::placeholder{color:var(--muted-2);}
  .form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
  select.form-input{appearance:auto;}
  textarea.form-input{resize:vertical;min-height:80px;}

  .pw-wrap{position:relative;}
  .pw-wrap .form-input{padding-right:38px;}
  .pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;font:inherit;padding:0;}
  .pw-toggle:hover{color:var(--text);background:var(--panel);}
  .pw-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}

  .empty{text-align:center;padding:48px 20px;color:var(--muted);}
  .empty svg{margin:0 auto 12px;display:block;}
  .empty h3{font-size:15px;font-weight:500;color:var(--text);margin-bottom:4px;}
  .empty p{font-size:13px;}

  /* ---- Sign-in -----------------------------------------------------------
     Two panels on desktop, stacked on narrow screens. The brand panel is
     decoration, so it is hidden rather than reflowed on small screens -- it
     would push the form below the fold for no gain. */
  /* Dot grid rather than the usual two coloured blobs: this is an
     observability tool, and a flat ruled field reads as one. One layer over
     --panel, so the card still has something quiet to sit on. */
  .auth-shell{min-height:100vh;display:grid;place-items:center;padding:32px 20px;
    background-color:var(--panel);
    background-image:radial-gradient(circle at center,var(--border) 1px,transparent 1.2px);
    background-size:22px 22px;}
  .auth-wrap{width:100%;max-width:940px;display:grid;grid-template-columns:1.05fr 1fr;
    background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
    box-shadow:0 1px 2px rgba(13,17,23,.04),0 14px 34px -18px rgba(13,17,23,.18);}

  /* The narrow single-column card, kept for /accounts/oauth_authorize/ (the
     Serop loopback flow). It is deliberately *not* the login page's layout --
     that one is .auth-wrap. Restored here after being dropped by mistake: the
     OAuth page is the only remaining user of .auth-card, and no test renders
     it, so nothing failed when its rules went missing. */
  .auth-card{width:100%;max-width:380px;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
  .auth-card h1,.auth-card h2{font-size:18px;font-weight:600;margin-bottom:4px;}
  .auth-card p{font-size:13px;color:var(--muted);margin-bottom:24px;}
  .auth-card .footer{text-align:center;margin-top:20px;font-size:13px;color:var(--muted);}
  .auth-card .footer a{color:var(--blue);font-weight:500;}

  .auth-brand{padding:44px 42px;color:var(--on-accent);display:flex;flex-direction:column;gap:26px;
    background:var(--brand-dark);}
  .auth-brand .brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:-.01em;}
  .auth-brand .brand .mark{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;}
  .auth-brand .brand .mark svg{width:32px;height:32px;stroke:var(--on-accent);}
  .auth-brand .brand-line{font-size:15px;font-weight:500;line-height:1.6;
    color:rgba(255,255,255,.86);max-width:32ch;letter-spacing:-.005em;}
  .auth-points{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:auto;}
  .auth-points li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5;color:rgba(255,255,255,.9);}
  .auth-points svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;stroke:rgba(255,255,255,.95);}
  .auth-points b{display:block;font-weight:600;color:var(--on-accent);}
  .auth-points span{color:rgba(255,255,255,.72);}

  .auth-form{padding:44px 42px;display:flex;flex-direction:column;justify-content:center;}
  .auth-form h1{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:5px;}
  .auth-form .auth-sub{font-size:13.5px;color:var(--muted);margin-bottom:26px;}

  .auth-alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin-bottom:20px;
    background:var(--red-bg);border:1px solid var(--red);border-radius:8px;font-size:13px;color:var(--red);}
  .auth-alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;stroke:currentColor;}
  .auth-alert div{min-width:0;}
  .auth-alert ul{list-style:none;}
  .auth-alert li + li{margin-top:4px;}

  /* One rule for the label, so the field name, its error and its hint all hang
     off the same <label for>. */
  .auth-field{margin-bottom:17px;}
  .auth-label{display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;}
  .auth-label .req{color:var(--red);font-weight:600;}
  /* aria-invalid drives this rather than an error class, so the visual state
     and the announced state cannot come from two different places. */
  .auth-input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;
    font-size:14px;color:var(--text);background:var(--surface);transition:border-color .12s,box-shadow .12s;}
  .auth-input::placeholder{color:var(--muted-2);}
  .auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .auth-input[aria-invalid="true"]{border-color:var(--red);}
  .auth-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--red-bg);}
  .auth-field .pw-wrap .auth-input{padding-right:40px;}
  .pw-toggle:hover{color:var(--text);background:var(--panel);}
  .pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  /* render_icon emits a viewBox and no width/height, so every glyph is sized
     by CSS. Without this the eye renders at the SVG default -- 300x150 -- and
     bursts straight out of a 30px button. */
  .pw-toggle .ic{width:16px;height:16px;flex-shrink:0;}

  .auth-err{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:12.5px;color:var(--red);}
  .auth-err svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;stroke:currentColor;}
  .auth-hint{margin-top:6px;font-size:12.5px;color:var(--muted);}

  .auth-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:10px;margin-top:4px;font-size:14px;font-weight:500;}
  .auth-submit .spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
    border-top-color:var(--on-accent);border-radius:50%;animation:authSpin .6s linear infinite;}
  @keyframes authSpin{to{transform:rotate(360deg);}}

  .auth-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
    font-size:12.5px;color:var(--muted);text-align:center;}

  @media (max-width:860px){
    .auth-wrap{grid-template-columns:1fr;max-width:430px;border-radius:14px;}
    .auth-brand{display:none;}
    .auth-form{padding:32px 26px;}
  }
  @media (prefers-reduced-motion:reduce){
    .auth-submit .spinner{animation:none;}
  }

  #toast-container{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:calc(100vw - 24px);}
  .toast{--tc:var(--accent);--tc-bg:var(--accent-soft);position:relative;overflow:hidden;pointer-events:auto;display:flex;align-items:center;gap:var(--space-3);width:max-content;max-width:min(380px,100%);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-3);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:var(--fs-sm);font-weight:500;line-height:1.4;box-shadow:var(--shadow-md);animation:toastIn .22s ease-out;}
  @keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .toast.success{--tc:var(--green);--tc-bg:var(--green-bg);}
  .toast.error{--tc:var(--red);--tc-bg:var(--red-bg);}
  .toast.warning{--tc:var(--orange);--tc-bg:var(--orange-bg);}
  .toast.info{--tc:var(--blue);--tc-bg:var(--blue-bg);}
  .toast-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:99px;background:var(--tc-bg);color:var(--tc);}
  .toast-ic .ic,.toast-ic svg{width:16px;height:16px;}
  .toast-text{flex:1;min-width:0;overflow-wrap:anywhere;}
  .toast-x{flex:none;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer;}
  .toast-x:hover{background:var(--panel);color:var(--text);}
  .toast-x .ic,.toast-x svg{width:14px;height:14px;}
  .toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--tc);transform-origin:left;animation:toastBar 4s linear forwards;}
  @keyframes toastBar{to{transform:scaleX(0);}}
  @media (prefers-reduced-motion:reduce){.toast{animation:none;}.toast::after{display:none;}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .flex-between{display:flex;align-items:center;justify-content:space-between;}
  .mb-4{margin-bottom:16px;}
  .mb-6{margin-bottom:24px;}
  .mt-4{margin-top:16px;}
  .mt-6{margin-top:24px;}
  .gap-3{gap:12px;}
  .text-sm{font-size:13px;}
  .text-muted{color:var(--muted);}
  .font-medium{font-weight:500;}
  .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .space-y > * + *{margin-top:12px;}

  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .search-wrap{position:relative;flex:1;min-width:200px;max-width:320px;}
  .search-wrap input{width:100%;padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:6px;font-size:13.5px;color:var(--text);background:var(--surface);}
  .search-wrap input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg);}
  .search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
  .filter-select,.sort-select{padding:7px 28px 7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);background:var(--surface);appearance:none;background-image: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='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer;}
  .filter-select:focus,.sort-select:focus{outline:none;border-color:var(--blue);}

  .pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;}
  .pagination .btn{min-width:32px;text-align:center;padding:5px 10px;}
  .pagination .btn[disabled]{opacity:.4;pointer-events:none;}
  .pagebar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;}
  .pagebar .pagination{margin-top:0;}
  .pagebar-size{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
  .pagination .page-info{font-size:13px;color:var(--muted);padding:0 8px;}

  .row-actions{display:flex;gap:4px;}
  .row-actions .btn{padding:3px 8px;font-size:12px;}
  .row-actions{flex-wrap:nowrap;white-space:nowrap;}
  .row-actions .btn svg{flex:none;width:14px;height:14px;}
  .clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}

  .icon-btn{border:1px solid var(--border);background:var(--surface);border-radius:6px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;font-family:inherit;}
  .icon-btn:hover{background:var(--panel);color:var(--text);}
  .icon-btn-danger:hover{background:var(--red-bg);color:var(--red);border-color:var(--red);}
  .icon-btn svg{display:block;}

  .modal-backdrop{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000;}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px;width:90%;max-width:400px;box-shadow:0 8px 30px rgba(13,17,23,.15);}
  .modal h3{font-size:16px;font-weight:600;margin-bottom:8px;}
  .modal p{font-size:13.5px;color:var(--muted);margin-bottom:20px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;}
  /* The leave approver's dialog carries two date boxes, a split mode and two
     day boxes; 400px stacks them into unreadable slivers. */
  .modal-wide{max-width:520px;}
  /* Alpine has not run yet when the DOM first paints, so anything driven by
     x-show would flash on screen for a frame. Applied to every element whose
     visibility is state, including the toasts. */
  [x-cloak]{display:none !important;}

  /* Version + changelog. The trigger sits in the sidebar footer; the dialog is
     a sibling of .shell because .sidebar is overflow-x:hidden and would clip it. */
  .side-version{width:100%;text-align:left;border:none;background:none;font:inherit;cursor:pointer;}
  .side-version .ic{width:16px;height:16px;flex-shrink:0;stroke-width:1.75;}
  .side-version .side-label{font-variant-numeric:tabular-nums;}
  .side-version:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:7px;}
  .changelog{width:92%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;padding:0;}
  .changelog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
  .changelog-head h3{margin:0 0 2px;}
  .changelog-ver{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .changelog-sub{font-size:12px;color:var(--muted);}
  .changelog-close{border:none;background:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:0 2px;}
  .changelog-close:hover{color:var(--text);}
  /* Type chips. The point is to answer "what's fixed?" without scrolling past
     24 items, so they sit between the header and the list where they stay put
     while the body scrolls under them. */
  .changelog-filters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px;border-bottom:1px solid var(--line);}
  .changelog-filters[hidden]{display:none;}
  .changelog-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;}
  .changelog-chip:hover{color:var(--text);border-color:var(--muted);}
  .changelog-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .changelog-chip-n{font-variant-numeric:tabular-nums;opacity:.7;font-size:11px;}
  .changelog-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .changelog-body{overflow-y:auto;padding:4px 20px 20px;}
  .changelog-body section{padding:16px 0;border-bottom:1px solid var(--line);}
  .changelog-body section:last-child{border-bottom:none;}
  .changelog-rel-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
  .changelog-rel-head h4{margin:0;font-size:14px;font-weight:600;}
  .changelog-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:9px;background:var(--panel);border:1px solid var(--border);color:var(--muted);}
  .changelog-tag.is-unreleased{font-style:italic;font-weight:500;}
  .changelog-date{font-size:11.5px;color:var(--muted);}
  .changelog h5{display:flex;align-items:center;gap:6px;margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;}
  .changelog-count{font-size:10px;letter-spacing:0;padding:0 5px;border-radius:8px;background:var(--panel);border:1px solid var(--border);color:var(--muted);}
  /* Older blocks are one click away rather than prepended to the answer. */
  .changelog-older{width:100%;margin:14px 0 4px;font:inherit;font-size:12.5px;padding:9px 12px;border-radius:8px;border:1px dashed var(--border);background:none;color:var(--muted);cursor:pointer;}
  .changelog-older:hover{color:var(--text);border-color:var(--muted);}
  .changelog-older:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .changelog ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
  .changelog li{font-size:13px;line-height:1.5;color:var(--text);}
  .changelog li::marker{color:var(--muted-2);}
  /* Detail written as an indented sub-bullet in CHANGELOG.md. Rendered as a real
     nested list: flattened into the parent it became a 2,600-character
     paragraph with literal dashes, which is the wall this dialog exists to
     avoid. */
  .changelog .changelog-sub{margin:6px 0 2px;padding-left:16px;gap:5px;}
  .changelog .changelog-sub li{font-size:12.5px;color:var(--muted);}
  .changelog code{font-size:12px;background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:0 4px;}
  .changelog a{color:var(--accent);}
  .changelog-note{font-size:12.5px;color:var(--muted);padding:16px 0;}

  .kanban-board{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;align-items:stretch;height:calc(100vh - 188px);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-snap-type:x proximity;}
  .kanban-board::-webkit-scrollbar{height:10px;}
  .kanban-board::-webkit-scrollbar-track{background:var(--line);border-radius:6px;}
  .kanban-board::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:2px solid var(--line);}
  .kanban-board::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}
  .kanban-col{min-width:244px;flex:1;scroll-snap-align:start;background:var(--panel);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;max-height:100%;transition:background .15s,border-color .15s;}
  .kanban-col.drag-over{background:var(--accent-soft);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg);}
  .kanban-header{padding:14px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-radius:10px 10px 0 0;}
  .kanban-header .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;}
  .kanban-header .dot.open{background:var(--blue);}
  .kanban-header .dot.progress{background:var(--orange);}
  .kanban-header .dot.resolved{background:var(--green);}
  .kanban-header .dot.closed{background:var(--gray);}
  .kanban-count{font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-weight:500;}
  .kanban-cards{padding:8px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;min-height:60px;}
  .kanban-card{animation:cardDrop .35s cubic-bezier(.22,1,.36,1);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;transition:box-shadow .15s,transform .15s,opacity .15s;cursor:grab;position:relative;}
  .kanban-card:hover{box-shadow:0 4px 12px rgba(13,17,23,.08);transform:translateY(-1px);}
  .kanban-card:active{cursor:grabbing;}
  .kanban-card.dragging{opacity:.4;transform:rotate(2deg) scale(.98);box-shadow:none;}
  .kanban-card .card-id{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;}
  .kanban-delete-btn{background:none;border:none;padding:2px;cursor:pointer;color:var(--muted);border-radius:3px;line-height:1;display:inline-flex;}
  .kanban-delete-btn:hover{color:var(--red);background:var(--red-bg);}
  .kanban-card-actions{display:inline-flex;align-items:center;gap:2px;}
  .kanban-move-btn{background:none;border:none;padding:2px;cursor:pointer;color:var(--muted);border-radius:3px;line-height:1;display:inline-flex;}
  .kanban-move-btn:hover{color:var(--accent);background:var(--accent-soft);}
  .kanban-move-menu{position:fixed;z-index:60;min-width:170px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(13,17,23,.16);padding:4px;}
  .kanban-move-menu[hidden]{display:none;}
  .kanban-move-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-radius:5px;padding:6px 10px;font:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:left;}
  .kanban-move-item:hover{background:var(--accent-soft);}
  .kanban-move-item.is-current{color:var(--muted);font-weight:600;}
  .ticket-select{display:none;}
  .selection-mode .ticket-select{display:inline-block;}
  .selection-mode .clickable-row{cursor:default;}
  .selection-mode .kanban-card{cursor:default;}
  .ticket-select-th,.ticket-select-td{display:none;}
  .selection-mode .ticket-select-th,.selection-mode .ticket-select-td{display:table-cell;}
  .kanban-card .card-title{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .kanban-card .card-title a{color:inherit;text-decoration:none;}
  .kanban-card .card-title a:hover{color:var(--blue);}
  .kanban-card .card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .kanban-card .card-type{font-size:11.5px;padding:2px 7px;border-radius:4px;font-weight:500;}
  .kanban-card .card-type.bug{background:var(--red-bg);color:var(--red);}
  .kanban-card .card-type.feature{background:var(--blue-bg);color:var(--blue);}
  .kanban-card .card-type.question{background:var(--green-bg);color:var(--green);}
  .kanban-card .card-priority{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);}
  .kanban-card .card-priority .dot{width:6px;height:6px;border-radius:50%;}
  .kanban-card .card-priority.critical .dot,.kanban-card .card-priority.high .dot{background:var(--red);}
  .kanban-card .card-priority.medium .dot{background:var(--orange);}
  .kanban-card .card-priority.low .dot,.kanban-card .card-priority.info .dot{background:var(--gray);}
  .kanban-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
  .kanban-card .card-assignee{display:flex;align-items:center;font-size:12px;color:var(--text);}
  .kanban-card .card-assignee .avatar{width:20px;height:20px;font-size:9px;margin-right:5px;}
  .kanban-card .card-assignees{display:flex;align-items:center;gap:3px;}
  .kanban-card .card-assignees .avatar{margin-right:0;}
  .kanban-card .card-deadline{font-size:11px;color:var(--muted);}
  .kanban-card .card-deadline.overdue{color:var(--red);font-weight:500;}
  .kanban-card.overdue{border-color:var(--border);box-shadow:none;}
  .kanban-card .card-date{font-size:11px;color:var(--muted);}
  .kanban-card .overdue-badge{font-size:11px;font-weight:500;color:var(--red);background:var(--red-bg);border-radius:4px;padding:2px 7px;}
  .avatar-sm{width:20px;height:20px;font-size:9px;}
  .filter-check{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;}
  .filter-check input{accent-color:var(--blue);}
  .overdue-text{color:var(--red);font-weight:600;}
  .pill.overdue{background:var(--red);color:var(--on-accent);}
  .kanban-empty{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--muted);font-size:13px;border:2px dashed var(--border);border-radius:8px;margin:4px 8px;}
  #ticket-results.htmx-request,#kanban-board.htmx-request{opacity:.5;transition:opacity .12s ease;pointer-events:none;}
  .kanban-card-select{display:none;}

  /* ===== dashboard ===== */
  .stat-card{display:flex;flex-direction:column;}
  .stat-card .stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
  .stat-card .stat-label{font-size:12px;font-weight:500;color:var(--muted);}
  .stat-card .stat-icon{width:32px;height:32px;border-radius:8px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;}
  .stat-card .stat-icon.red{color:var(--red);background:var(--red-bg);}
  .stat-card .stat-icon.orange{color:var(--orange);background:var(--orange-bg);}
  .stat-card .stat-icon.green{color:var(--green);background:var(--green-bg);}
  .stat-card .stat-icon.blue{color:var(--blue);background:var(--blue-bg);}
  .stat-card .stat-icon.purple{color:var(--purple);background:var(--purple-bg);}
  .stat-card .stat-val{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;}
  .stat-card .stat-val small{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px;}
  .stat-card .stat-foot{font-size:12px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
  .stat-card .stat-foot b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;}

  .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .section-head h2{font-size:13px;font-weight:600;}
  .section-head .muted{font-size:12px;color:var(--muted);font-weight:400;}
  .section-head .link{font-size:12.5px;color:var(--blue);font-weight:500;white-space:nowrap;}
  .section-head .link:hover{text-decoration:underline;}
  .count-badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1px 8px;}
  .text-xs{font-size:11px;}

  /* ===== home dashboard ===== */
  .dash{max-width:1400px;}
  .dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
  .dash-head h1{font-size:23px;font-weight:600;letter-spacing:-.02em;}
  .dash-head p{margin-top:4px;font-size:13px;}

  .dash-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
  .dash-strip a{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 18px 15px;color:inherit;background:var(--bg);border:1px solid var(--border);border-radius:12px;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;}
  .dash-strip a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--border);}
  .dash-strip a.k-err::before{background:var(--red);}
  .dash-strip a.k-tkt::before{background:var(--orange);}
  .dash-strip a.k-res::before{background:var(--green);}
  .dash-strip a.k-mine::before{background:var(--accent);}
  .dash-strip a:hover{box-shadow:0 4px 14px rgba(13,17,23,.06);transform:translateY(-1px);border-color:var(--border-strong);}
  .dash-strip .v{font-size:28px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.025em;}
  .dash-strip a.k-err .v{color:var(--red);}
  .dash-strip a.k-res .v{color:var(--green);}
  .dash-strip a.k-mine .v{color:var(--accent);}
  .dash-strip a.zero .v{color:var(--text);}
  .dash-strip .l{font-size:12.5px;color:var(--muted);font-weight:500;}
  .dash-strip .d{font-size:11.5px;font-weight:500;display:inline-flex;align-items:center;gap:3px;}
  .dash-strip .d.good{color:var(--green);}
  .dash-strip .d.bad{color:var(--red);}
  @media(max-width:760px){.dash-strip{grid-template-columns:repeat(2,1fr);}}

  .dash-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2px 18px 12px;margin-bottom:16px;box-shadow:0 1px 2px rgba(13,17,23,.03);}
  .dash-panel > header{display:flex;align-items:center;gap:8px;padding:14px 0 6px;}
  .dash-panel > header .ico{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
  .dash-panel > header .ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}
  .dash-panel > header h2{font-size:14px;font-weight:600;letter-spacing:-.01em;}
  .dash-panel > header .n{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:0 7px;}
  .dash-panel > header a{margin-left:auto;font-size:12px;font-weight:500;color:var(--blue);}
  .dash-panel > header a:hover{text-decoration:underline;}
  .dash-panel .empty-line{color:var(--muted);font-size:13px;padding:16px 4px;text-align:center;}

  /* Personal dashboard. `pd-` = personal dashboard; cards are one-per-module so
     each employee's own month reads top-to-bottom before anything company-wide. */
  .pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
  .pd-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2px 18px 14px;box-shadow:0 1px 3px rgba(28,117,188,.08);min-width:0;}
  .pd-card > header{display:flex;align-items:center;gap:8px;padding:14px 0 10px;}
  .pd-card > header .pd-ico{width:16px;height:16px;color:var(--accent);flex-shrink:0;}
  .pd-card > header .pd-ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}
  .pd-card > header h2{font-size:14px;font-weight:600;letter-spacing:-.01em;}
  .pd-card > header .pd-sub{margin-left:auto;font-size:11.5px;color:var(--muted);}
  .pd-card > header .n{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:0 7px;}
  @media(max-width:820px){.pd-grid{grid-template-columns:minmax(0,1fr);}}

  .pd-banner{margin:0 0 18px;padding:11px 15px;border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:9px;background:var(--blue-bg);font-size:13px;line-height:1.45;}
  .pd-banner strong{font-weight:600;}

  /* Today -- the one card with a live action in it. */
  .pd-today{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
  .pd-today .pd-today-row{padding:0;flex:1;min-width:260px;}
  .pd-today .pd-state{min-width:0;}
  .pd-today .pd-state .lead{font-size:22px;color:#fff;}
  .pd-today .pd-state .meta{color:var(--wave);font-size:12.5px;}
  .pd-today .pd-state.open .lead{color:var(--wave);}
  .pd-today .pd-state.done .lead,.pd-today .pd-state.leave .lead{color:#fff;}
  .pd-today .pd-state.todo .lead,.pd-today .pd-state.rest .lead{color:#fff;font-weight:600;}
  .pd-today .pd-mini{border:none;padding:0;gap:26px;}
  .pd-today .pd-mini .v{color:#fff;}
  .pd-today .pd-mini .l{color:#fff;}
  .pd-today .pd-mini .m{color:var(--wave);}
  .pd-today .pd-more{border:none;margin:0;padding:0;color:var(--wave);}
  .pd-today .btn-primary{background:var(--wave);border-color:var(--wave);color:var(--ink);font-weight:600;padding:10px 22px !important;font-size:14px;}
  .pd-today .btn-primary:hover{background:#fff;border-color:#fff;}
  .pd-attn{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;}
  .pd-attn a{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;background:var(--surface);border:1px solid var(--border);border-radius:99px;font-size:13px;font-weight:500;}
  .pd-attn a:hover{background:var(--blue-bg);}
  .pd-attn .n{min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-strong);font-weight:700;font-size:12.5px;line-height:24px;text-align:center;font-variant-numeric:tabular-nums;}
  .pd-today-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:4px 0 12px;}
  .pd-state{display:flex;flex-direction:column;gap:2px;min-width:150px;}
  .pd-state .lead{font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
  .pd-state .meta{font-size:12px;color:var(--muted);}
  .pd-state.open .lead{color:var(--green);}
  .pd-state.done .lead{color:var(--blue);}
  .pd-state.todo .lead,.pd-state.rest .lead{color:var(--muted);font-weight:500;}
  .pd-state.leave .lead{color:var(--orange);font-size:15px;}
  .pd-today-row form{margin-left:auto;}

  .pd-mini{display:flex;gap:22px;padding:10px 0 2px;border-top:1px solid var(--line);}
  .pd-mini > div{display:flex;flex-direction:column;gap:1px;}
  .pd-mini.three{gap:28px;}
  .pd-mini .v{font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;}
  .pd-mini .l{font-size:12.5px;color:inherit;}
  .pd-mini .m{font-size:11.5px;color:var(--muted);}

  .pd-net{display:flex;flex-direction:column;gap:2px;padding:4px 0 12px;}
  .pd-net .l{font-size:12px;color:var(--muted);}
  .pd-net .v{font-size:28px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--accent);}

  .pd-kv{margin:0;padding:0;}
  .pd-kv > dt{float:left;clear:left;width:38%;padding:5px 0;font-size:12.5px;color:var(--muted);}
  .pd-kv > dd{margin:0 0 0 38%;padding:5px 0;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;}
  .pd-kv .m{color:var(--muted);font-size:11.5px;}
  .pd-kv .m.bad{color:var(--red);}
  .pd-kv::after{content:"";display:block;clear:both;}

  .pd-bars{list-style:none;margin:0;padding:2px 0 8px;}
  .pd-bars li{display:grid;grid-template-columns:1fr 76px auto;align-items:center;gap:10px;padding:6px 0;font-size:13px;}
  .pd-bars .lead{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pd-bars .track{height:6px;border-radius:3px;background:var(--panel);border:1px solid var(--border);overflow:hidden;}
  .pd-bars .fill{display:block;height:100%;background:var(--blue);}
  .pd-bars .fill.unlimited{background:var(--green);}
  .pd-bars .fill.pending{background:repeating-linear-gradient(45deg,var(--blue) 0 4px,var(--blue-bg) 4px 8px);}
  .pd-bars .val{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .pd-bars .val strong{color:inherit;font-weight:600;}
  .pd-bars .pill{grid-column:2 / -1;justify-self:end;}

  .pd-list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line);}
  .pd-list li{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
  .pd-list li:last-child{border-bottom:none;}
  .pd-list .lead{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:450;}
  .pd-list .meta{color:var(--muted);font-size:11.5px;white-space:nowrap;flex-shrink:0;}

  .pd-empty{padding:10px 0 4px;}
  .pd-empty p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;}
  .pd-empty-line{grid-column:1 / -1;font-size:12.5px;color:var(--muted);}

  .pd-more{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:500;color:var(--blue);}
  .pd-more:hover{text-decoration:underline;}

  .pill{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.01em;padding:1px 7px;border-radius:9px;white-space:nowrap;}
  .pill.approved{color:var(--green);background:var(--green-bg);}
  .pill.pending{color:var(--orange);background:var(--orange-bg);}
  .pill.rejected{color:var(--red);background:var(--red-bg);}
  .pill.cancelled{color:var(--gray);background:var(--gray-bg);}
  .pill.warn{color:var(--orange);background:var(--orange-bg);}

  .dash-head-actions{display:flex;gap:8px;}

  /* Leave policy editor: one labelled row per type. The <label>s are the
     point of this block — the old <table> header could not label inputs that
     lived in their own grid. */
  .lp-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);transition:background .12s ease;}
  .lp-row:last-child{border-bottom:none;}
  .lp-row:hover{background:var(--panel);}
  .lp-field{display:flex;flex-direction:column;gap:5px;}
  .lp-grow{flex:1;min-width:0;}
  .lp-narrow{width:104px;flex-shrink:0;}
  .lp-row label{font-size:11.5px;font-weight:600;color:var(--muted);}
  .lp-row .form-input{width:100%;}
  .lp-days{width:92px;}
  .lp-named{display:flex;align-items:center;gap:8px;}
  .lp-named .form-input{flex:1;min-width:0;}
  .lp-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--border);}
  .lp-dot-lg{width:11px;height:11px;}
  .lp-dot-green{background:var(--green);} .lp-dot-amber{background:var(--orange);}
  .lp-dot-red{background:var(--red);}     .lp-dot-blue{background:var(--blue);}
  .lp-dot-purple{background:var(--purple);} .lp-dot-grey{background:var(--gray);}
  .lp-dot-none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border);}

  /* Paid is a switch, not a bare checkbox: it changes someone's salary, so it
     should not look like a filter tick. */
  .lp-paid{align-items:flex-start;}
  .lp-switch{display:flex;align-items:center;height:32px;cursor:pointer;}
  .lp-switch input{position:absolute;opacity:0;width:0;height:0;}
  .lp-switch .lp-track{position:relative;display:block;width:38px;height:21px;border-radius:11px;background:var(--gray-bg);border:1px solid var(--border);transition:background .15s ease,border-color .15s ease;}
  .lp-switch .lp-track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--bg);box-shadow:0 1px 2px rgba(13,17,23,.2);transition:transform .15s ease;}
  .lp-switch input:checked + .lp-track{background:var(--green);border-color:var(--green);}
  .lp-switch input:checked + .lp-track::after{transform:translateX(17px);}
  .lp-switch input:focus-visible + .lp-track{outline:2px solid var(--blue);outline-offset:2px;}

  .lp-inline{display:flex;align-items:center;gap:7px;}
  .lp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

  /* Icon picker: a native <details> collapsed to one glyph, so a 20-icon grid
     costs no row height until it is opened. */
  .lp-pick{position:relative;flex-shrink:0;}
  .lp-pick summary{list-style:none;cursor:pointer;}
  .lp-pick summary::-webkit-details-marker{display:none;}
  .lp-pick-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--muted);transition:border-color .12s,color .12s,background .12s;}
  .lp-pick-btn:hover{border-color:var(--accent);color:var(--accent);}
  .lp-pick[open] .lp-pick-btn{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .lp-icon-glyph{width:17px;height:17px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lp-icon-blank{font-size:15px;line-height:1;color:var(--muted);}
  .lp-pick-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(5,34px);gap:2px;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(13,17,23,.13);}
  .pi-grid{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
  .lp-icon-opt{display:flex;align-items:center;justify-content:center;width:34px;height:30px;border-radius:7px;cursor:pointer;color:var(--muted);transition:background .1s,color .1s;}
  .lp-icon-opt:hover{background:var(--panel);color:var(--text);}
  .lp-icon-opt input{position:absolute;opacity:0;width:0;height:0;}
  .lp-icon-opt:has(input:checked){background:var(--accent-soft);color:var(--accent);}
  .lp-icon-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px;}
  .lp-icon-cell{display:flex;align-items:center;justify-content:center;}

  /* The app-wide choice control (core/templatetags/dropdown_tags.py). Same
     idiom as .lp-pick above: a <details> trigger, a popover menu, radios whose
     checked state is styled through :has(). The radio itself stays in the DOM
     and keeps its native semantics, so this styles a select rather than
     replacing it. */
  .dd{position:relative;display:inline-flex;}
  .dd-wrap summary{list-style:none;cursor:pointer;}
  .dd-wrap summary::-webkit-details-marker{display:none;}
  .dd-btn{display:flex;align-items:center;gap:8px;max-width:230px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:13px;transition:border-color .12s,background .12s;}
  .dd-btn:hover{border-color:var(--accent);}
  .dd-wrap[open] .dd-btn{border-color:var(--accent);background:var(--accent-soft);}
  .dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dd-caret{display:flex;align-items:center;color:var(--muted);transition:transform .15s ease;}
  .dd-caret svg{width:14px;height:14px;}
  .dd-wrap[open] .dd-caret{transform:rotate(180deg);color:var(--accent);}
  .dd-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;max-height:280px;overflow-y:auto;padding:5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(13,17,23,.13);}
  .dd-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:13px;color:var(--text);cursor:pointer;transition:background .1s;}
  .dd-opt:hover{background:var(--panel);}
  .dd-opt input{position:absolute;opacity:0;width:0;height:0;}
  .dd-tick{display:flex;align-items:center;color:var(--accent);opacity:0;}
  .dd-tick svg{width:14px;height:14px;}
  .dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dd-opt:has(input:checked){background:var(--accent-soft);color:var(--accent);font-weight:500;}
  .dd-opt:has(input:checked) .dd-tick{opacity:1;}
  .dd-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px;}

  .lp-save{white-space:nowrap;}
  .lp-add{border:1px dashed var(--border);border-radius:12px;margin-top:12px;background:transparent;}
  .lp-add:hover{background:var(--panel);}
  .lp-none{padding:14px 16px;font-size:12.5px;color:var(--muted);}
  @media(max-width:720px){
    .lp-row{flex-wrap:wrap;align-items:flex-end;}
    .lp-grow{flex:1 1 100%;}
    .lp-days,.lp-narrow{width:calc(50% - 6px);flex:1 1 auto;}
  }

  .dash-group{padding-top:10px;}
  .dash-group:first-of-type{padding-top:4px;}
  .dash-group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:2px;}

  .dash-row{display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;border-radius:7px;border-bottom:1px solid var(--line);font-size:13.5px;transition:background .1s ease;}
  .dash-row:last-child{border-bottom:none;}
  .dash-row:hover{background:var(--panel);}
  .dash-row .lead{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-weight:450;}
  .dash-row a.lead:hover{color:var(--blue);}
  .dash-row .lead .prod{color:var(--muted);font-weight:400;}
  .dash-row .meta{color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;}
  .dash-row .sev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .dash-row .sev-dot.critical,.dash-row .sev-dot.high{background:var(--red);box-shadow:0 0 0 3px var(--red-bg);}
  .dash-row .sev-dot.stale{background:var(--orange);box-shadow:0 0 0 3px var(--orange-bg);}
  .dash-row .sev-dot.unassigned{background:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
  .dash-acts{flex-shrink:0;display:inline-flex;gap:4px;align-items:center;}
  .dash-act{font-size:11.5px;font-weight:600;color:var(--blue);background:none;border:none;padding:4px 7px;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:inherit;}
  .dash-act:hover{background:var(--blue-bg);}
  .dash-act.muted{color:var(--muted);font-weight:500;}
  .dash-act.muted:hover{background:var(--border);}
  .dash-act.htmx-request{opacity:.4;pointer-events:none;}
  @media(max-width:560px){
    .dash-row{flex-wrap:wrap;}
    .dash-row .lead{flex-basis:100%;}
    .dash-row .meta{margin-left:19px;}
    .dash-acts{margin-left:auto;}
  }

  table.dash-table{width:100%;border-collapse:collapse;}
  table.dash-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);padding:4px 10px 9px;border-bottom:1px solid var(--line);}
  table.dash-table th:first-child,table.dash-table td:first-child{padding-left:2px;}
  table.dash-table th:last-child,table.dash-table td:last-child{padding-right:2px;}
  table.dash-table th.num,table.dash-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
  table.dash-table td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:13.5px;}
  table.dash-table tbody tr:last-child td{border-bottom:none;}
  table.dash-table tbody tr:hover td{background:var(--panel);}
  table.dash-table td.num a{color:inherit;}
  table.dash-table td.num.warn a,table.dash-table td.num.warn{color:var(--red);font-weight:600;}
  table.dash-table td a:hover{color:var(--blue);}
  .health-tag{font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:20px;}
  .health-tag::before{content:"";width:6px;height:6px;border-radius:50%;}
  .health-tag.healthy{color:var(--green);background:var(--green-bg);}
  .health-tag.healthy::before{background:var(--green);}
  .health-tag.warning{color:var(--orange);background:var(--orange-bg);}
  .health-tag.warning::before{background:var(--orange);}
  .health-tag.critical{color:var(--red);background:var(--red-bg);}
  .health-tag.critical::before{background:var(--red);}

  .dash-main{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);gap:16px;align-items:start;}
  .dash-main > div{min-width:0;}
  .dash-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media(max-width:900px){.dash-main{grid-template-columns:1fr;}}
  @media(max-width:720px){.dash-split{grid-template-columns:1fr;}}

  .product-card{position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s;}
  .product-card:hover{box-shadow:0 6px 18px rgba(13,17,23,.08);transform:translateY(-1px);border-color:var(--border-strong);}
  .product-card .product-name{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .health-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .health-dot.healthy{background:var(--green);}
  .health-dot.warning{background:var(--orange);}
  .health-dot.critical{background:var(--red);}

  .product-item-card{display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;text-decoration:none;color:inherit;position:relative;}
  .product-item-card:hover{box-shadow:0 6px 18px rgba(13,17,23,.06);transform:translateY(-1px);border-color:var(--border-strong);}
  .product-item-card .card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
  .product-item-card .card-title{font-size:15px;font-weight:600;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .product-item-card .card-title:hover{color:var(--blue);}
  .product-item-card .card-slug{font-size:11px;font-family:monospace;color:var(--muted);background:var(--panel);border:1px solid var(--border);padding:2px 6px;border-radius:4px;flex-shrink:0;}
  .product-item-card .card-desc{font-size:13px;color:var(--muted);line-height:1.4;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;}
  .product-item-card .stat-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 6px;margin-bottom:14px;}
  .product-item-card .stat-mini-grid .stat-cell .v{font-size:15px;font-weight:600;color:var(--text);line-height:1.2;}
  .product-item-card .stat-mini-grid .stat-cell .l{font-size:10px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.02em;margin-top:2px;}
  .product-item-card .card-actions{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);gap:8px;}

  .view-toggle{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:2px;}
  .view-toggle button,.view-toggle a{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border:none;background:transparent;border-radius:4px;color:var(--muted);cursor:pointer;text-decoration:none;transition:background .15s,color .15s;}
  .view-toggle button.active,.view-toggle a.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(13,17,23,.1);}

  .team-grid-card{display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;position:relative;}
  .team-grid-card:hover{box-shadow:0 6px 18px rgba(13,17,23,.06);transform:translateY(-1px);border-color:var(--border-strong);}
  .team-grid-card .avatar-lg{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--border);font-size:16px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}

  /* Custom Datepicker Input & Popover Component */
  input[type="date"]{position:relative;font-family:inherit;font-size:13px;color:var(--text);background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px 14px;border:1px solid var(--border);border-radius:6px;padding:6px 30px 6px 10px;transition:border-color .15s ease,box-shadow .15s ease;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
  input[type="date"]:hover{border-color:var(--border-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A5BFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");}
  input[type="date"]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus-ring);}
  input[type="date"]::-webkit-calendar-picker-indicator{background:transparent !important;color:transparent !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;opacity:0 !important;cursor:pointer !important;-webkit-appearance:none !important;}
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-clear-button{display:none !important;-webkit-appearance:none !important;}
  input[type="date"]::-ms-clear,
  input[type="date"]::-ms-reveal{display:none !important;}

  .pq-datepicker-popover{position:absolute;z-index:1100;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 25px -5px rgba(13,17,23,.1),0 8px 10px -6px rgba(13,17,23,.08);padding:14px;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;display:none;animation:datepickerFadeIn .15s ease;}
  @keyframes datepickerFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
  .pq-datepicker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .pq-datepicker-title{font-size:13.5px;font-weight:600;color:var(--text);}
  .pq-datepicker-nav{display:flex;gap:4px;}
  .pq-datepicker-nav button{border:1px solid var(--border);background:var(--surface);border-radius:5px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:12px;transition:background .15s;}
  .pq-datepicker-nav button:hover{background:var(--panel);color:var(--text);}
  .pq-datepicker-presets{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px;}
  .pq-datepicker-preset{font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:var(--panel);border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
  .pq-datepicker-preset:hover{background:var(--blue-bg);color:var(--blue);border-color:var(--blue);}
  .pq-datepicker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
  .pq-datepicker-day-name{font-size:11px;font-weight:600;color:var(--muted);padding:4px 0;}
  .pq-datepicker-day{font-size:12px;padding:6px 0;border-radius:5px;cursor:pointer;color:var(--text);transition:background .12s,color .12s;}
  .pq-datepicker-day:hover{background:var(--blue-bg);color:var(--blue);}
  .pq-datepicker-day.muted{color:var(--border);cursor:default;}
  .pq-datepicker-day.muted:hover{background:transparent;}
  .pq-datepicker-day.today{font-weight:700;color:var(--blue);}
  .pq-datepicker-day.selected{background:var(--blue) !important;color:var(--on-accent) !important;font-weight:600;}

  /* Custom Select Dropdown Component */
  select.form-input, select.filter-select, select.sort-select, select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--surface);
    background-image: 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='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 28px !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  select.filter-select, select.sort-select {
    padding: 6px 28px 6px 10px;
  }
  select:hover {
    border-color: var(--border-strong);
    background-image: 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='%231A5BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
  select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  .pq-select-popover {
    position: absolute;
    z-index: 1050;
    min-width: 180px;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(13,17,23,.1), 0 8px 10px -6px rgba(13,17,23,.08);
    padding: 4px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    animation: popoverFadeIn .12s ease;
  }
  .pq-select-search {
    padding: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .pq-select-search input {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    outline: none;
  }
  .pq-select-search input:focus {
    border-color: var(--blue);
  }
  .pq-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text);
    border-radius: 5px;
    cursor: pointer;
    transition: background .1s, color .1s;
    user-select: none;
  }
  .pq-select-item:hover, .pq-select-item.focused {
    background: var(--blue-bg);
    color: var(--blue);
  }
  .pq-select-item.selected {
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-bg);
  }
  .pq-select-item.selected::after {
    content: "✓";
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    margin-left: 8px;
  }

  /* Custom Sleek Tooltip Component */
  .pq-tooltip {
    position: absolute;
    z-index: 2000;
    pointer-events: none;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    padding: 5px 9px;
    border-radius: 6px;
    box-shadow: 0 8px 20px -3px rgba(13,17,23,.2), 0 4px 6px -4px rgba(13,17,23,.1);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.95) translateY(2px);
    transition: opacity .12s cubic-bezier(0.16,1,0.3,1), transform .12s cubic-bezier(0.16,1,0.3,1);
    display: none;
  }
  .pq-tooltip.show {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .pq-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }
  .pq-tooltip-arrow.top {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0 4px;
    border-color: var(--tooltip-bg) transparent transparent transparent;
  }
  .pq-tooltip-arrow.bottom {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent var(--tooltip-bg) transparent;
  }

  /* Enhanced Dashboard Chart System */
  .chart-container{position:relative;padding-top:4px;padding-bottom:4px;}
  .chart{position:relative;height:140px;display:flex;align-items:flex-end;gap:4px;padding:8px 0 0 0;border-bottom:1px solid var(--border);}
  .chart-lines{position:absolute;top:8px;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
  .chart-lines div{border-bottom:1px dashed color-mix(in srgb,var(--border) 60%,transparent);width:100%;height:0;}
  .chart .bar{flex:1;min-width:3px;min-height:3px;border-radius:3px 3px 0 0;position:relative;cursor:pointer;transition:transform .15s cubic-bezier(0.16,1,0.3,1),filter .15s ease,opacity .15s ease;transform-origin:bottom;}
  .chart .bar.errors{background:linear-gradient(180deg, var(--chart-error-a) 0%, var(--chart-error-b) 100%);}
  .chart .bar.burn{background:linear-gradient(180deg, var(--chart-burn-a) 0%, var(--chart-burn-b) 100%);}
  .chart .bar:hover{transform:scaleY(1.08);filter:drop-shadow(0 4px 6px rgba(13,17,23,.15));z-index:2;opacity:1;}
  .chart-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;font-weight:500;}
  .chart-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:500;}
  .chart-meta .dot{width:9px;height:9px;border-radius:3px;display:inline-block;}

  .meter{height:6px;border-radius:3px;background:var(--panel);overflow:hidden;}
  .meter>i{display:block;height:100%;border-radius:3px;background:var(--blue);}
  .meter.critical>i{background:var(--red);}
  .meter.high>i{background:var(--orange);}
  .meter.medium>i{background:var(--blue);}
  .meter.low>i{background:var(--gray);}
  .meter.open>i,.meter.assigned>i{background:var(--blue);}
  .meter.in_progress>i{background:var(--orange);}
  .meter.testing>i{background:var(--purple);}
  .meter.resolved>i{background:var(--green);}
  .meter.closed>i{background:var(--gray);}

  .dot-sev{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px;}
  .dot-sev.critical{background:var(--red);}
  .dot-sev.stale{background:var(--orange);}
  .dot-sev.unassigned{background:var(--blue);}

  /* Breadcrumbs Navigation System */
  .breadcrumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap;}
  .breadcrumbs a{color:var(--muted);text-decoration:none;transition:color .15s ease;display:inline-flex;align-items:center;gap:4px;}
  .breadcrumbs a:hover{color:var(--blue);}
  .breadcrumbs .sep{color:var(--border-strong);font-size:11px;user-select:none;}
  .breadcrumbs .current{color:var(--text);font-weight:500;}

  .form-card{max-width:880px;margin:0 auto;width:100%;}
  .form-card-head{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line);}
  .form-card-head h2{font-size:16px;font-weight:600;margin-bottom:2px;}
  .form-card-head p{font-size:13px;color:var(--muted);}
  .form-section{margin-bottom:22px;}
  .form-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid var(--line);}
  .field-hint{font-size:11px;color:var(--muted);margin-top:4px;}
  .field-error{font-size:12px;color:var(--red);margin-top:4px;}
  .form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);}
  .form-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .form-aside{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:16px;position:sticky;top:20px;}
  .form-aside-title{font-size:12px;font-weight:600;margin-bottom:12px;}
  .form-aside ul{list-style:none;}
  .form-aside li{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;color:var(--text);}
  .form-aside li svg{color:var(--blue);flex-shrink:0;}
  .form-aside-note{font-size:12px;color:var(--muted);border-top:1px solid var(--border);margin-top:12px;padding-top:12px;}
  @media(max-width:900px){.form-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .form-aside{position:static;}}

  .overview-hero{padding:22px 24px;}
  .overview-name{font-size:19px;font-weight:600;line-height:1.2;}
  .overview-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px;}
  .overview-meta .sep{color:var(--border);}
  .stat-foot a{color:var(--blue);font-weight:500;}
  .stat-foot a:hover{text-decoration:underline;}

  @media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:1100px){.grid-3{grid-template-columns:1fr 1fr;}}
/* Firefox draws its own calendar button inside a date field; drop our drawn one so there is only one icon. */
@supports (-moz-appearance:none){input[type="date"]{background-image:none;padding-right:10px;}}


/* Components added after the base stylesheet: presence, the punch panel, team
 * attendance and the DSR composer. Everything reads the tokens in _tokens.css.
 * Attribute selectors are written without quotes on purpose: this file is
 * inlined into every page, and tests search the raw HTML for quoted forms. */

/* ---------- Shared bits ---------- */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid var(--border);}
.alert-warn{background:var(--orange-bg);border-color:var(--orange);color:var(--orange);}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.chip:hover{color:var(--text);border-color:var(--border-strong);}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.chip-check{display:inline-flex;align-items:center;gap:var(--space-1);}
.chip-check input{accent-color:var(--accent);margin:0;}
.chip-check:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.chip-check:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.chip:focus-visible,.kpi:focus-visible,.dc-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--border);}
.dot.is-worked{background:var(--green);}
.dot.is-leave{background:var(--orange);}
.dot.is-open{background:var(--red);}
.dot.is-none{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--border-strong);}
.dot.is-weekend{background:var(--line);}

/* ---------- Presence ---------- */
.presence-panel{padding:0;overflow:hidden;}
.presence-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);}
.presence-head h2{font-size:15px;font-weight:600;margin:0;}
.presence-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.presence-live i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);}
.presence-live.is-live i{background:var(--green);box-shadow:0 0 0 0 rgba(23,122,76,.5);animation:presencePulse 2s infinite;}
.presence-list{list-style:none;margin:0;padding:6px;max-height:420px;overflow-y:auto;}
.presence-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:9px 10px;border-radius:8px;}
.presence-row:hover{background:var(--panel);}
.presence-avatar{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;grid-row:span 2;}
.presence-avatar i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface);background:var(--border-strong);}
.presence-avatar.is-online i{background:var(--green);}
.presence-avatar.is-away i{background:var(--orange);}
.presence-who{display:flex;flex-direction:column;min-width:0;}
.presence-who strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.presence-who em{font-style:normal;font-weight:400;color:var(--muted);}
.presence-doing{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.presence-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;}
.presence-meta:empty{display:none;}
.presence-tag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;}
.tag-green{background:var(--green-bg);color:var(--green);}
.tag-blue{background:var(--accent-soft);color:var(--accent-strong);}
.presence-empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;margin:0;}
@keyframes presencePulse{0%{box-shadow:0 0 0 0 rgba(23,122,76,.45);}70%{box-shadow:0 0 0 7px rgba(23,122,76,0);}100%{box-shadow:0 0 0 0 rgba(23,122,76,0);}}

.side-presence{position:relative;}
.presence-dot{width:9px;height:9px;border-radius:50%;margin:0 4px;flex-shrink:0;background:var(--border-strong);}
.presence-dot.is-live{background:var(--green);animation:presencePulse 2s infinite;}
.presence-pop{position:fixed;z-index:90;width:320px;max-width:calc(100vw - 24px);box-shadow:0 18px 44px rgba(13,17,23,.2);border-radius:12px;background:var(--surface);}
.presence-pop .presence-panel{border:1px solid var(--border);border-radius:12px;}
html.sidebar-collapsed .side-presence .side-badge{display:none;}

/* ---------- API docs and keys ---------- */
.key-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.key-actions form{display:flex;gap:6px;align-items:center;}
.key-grace{width:auto;min-height:28px;padding:3px 8px;font-size:12px;}
.api-docs{display:flex;flex-direction:column;gap:16px;max-width:900px;}
.api-card h2{font-size:16px;margin:0 0 6px;}
.api-card p{margin:0 0 12px;font-size:13.5px;}
.api-steps{margin:8px 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;}
.api-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:0;font-size:13px;}
.api-meta dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.api-meta dd{margin:2px 0 0;word-break:break-all;}
.api-langs{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:10px;width:fit-content;position:sticky;top:0;z-index:5;}
.api-langs button{border:0;background:transparent;padding:6px 14px;border-radius:7px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;}
.api-langs button.is-on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(13,17,23,.1);}
.api-endpoint{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.api-endpoint code{font-size:13px;word-break:break-all;}
.api-method{font-size:11px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:6px;}
.api-method.m-post{background:var(--accent-soft);color:var(--accent-strong);}
.api-method.m-get{background:var(--green-bg);color:var(--green);}
.api-fields{width:100%;font-size:13px;margin:6px 0 14px;}
.api-fields td,.api-fields th{vertical-align:top;}
.api-code{position:relative;margin:12px 0;}
.api-code pre,.api-resp pre{margin:0;padding:14px 16px;background:var(--navy);color:#E6EDF7;border-radius:10px;overflow-x:auto;font-size:12.5px;line-height:1.55;}
.api-resp pre{background:var(--panel);color:var(--text);border:1px solid var(--border);}
.api-copy{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#E6EDF7;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;z-index:1;}
.api-note{margin:10px 0 0 !important;padding:8px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;}
.api-key{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
@media (max-width:640px){.api-meta{grid-template-columns:minmax(0,1fr);}.api-langs{width:100%;overflow-x:auto;}}

/* ---------- DSR suggestions ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.dsr-sugg{padding:14px 18px;background:var(--accent-soft);border-bottom:1px solid var(--accent-line);}
.dsr-sugg-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px;font-size:13.5px;}
.dsr-sugg-row{display:flex;gap:12px;align-items:center;padding:8px 10px;margin-top:6px;background:var(--surface);border:1px solid var(--accent-line);border-radius:10px;}
.dsr-sugg-what{display:flex;flex-direction:column;min-width:0;flex:1;}
.dsr-sugg-title{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsr-sugg-did{font-size:12px;color:var(--muted);}
.dsr-sugg-hours{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);}
.dsr-sugg-hours .form-input{width:74px;min-height:34px;padding:5px 8px;}
@media (max-width:640px){.dsr-sugg-row{flex-wrap:wrap;}.dsr-sugg-what{flex-basis:100%;}}

/* ---------- Leave calendar ---------- */
.lc-legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.lc-key{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:4px;}
.lc-key.is-approved{background:var(--accent);}
.lc-key.is-pending{border:1.5px dashed var(--accent);}
.lc-key.is-holiday{background:var(--orange-bg);border:1px solid var(--orange);}
.lc{padding:0;overflow:hidden;}
.lc-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--panel);border-bottom:1px solid var(--border);}
.lc-head span{padding:8px 10px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.lc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.lc-day{min-height:104px;padding:6px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0;}
.lc-day:nth-child(7n){border-right:0;}
.lc-day.is-other{background:var(--panel);opacity:.55;}
.lc-day.is-weekend{background:var(--panel);}
.lc-day.is-holiday{background:var(--orange-bg);}
.lc-day.is-today .lc-num span{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:0 7px;}
.lc-num{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;}
.lc-busy{font-style:normal;font-size:10.5px;font-weight:700;color:var(--red);}
.lc-hol{font-size:11px;font-weight:600;color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-chip{display:flex;align-items:center;gap:5px;padding:2px 6px;border-radius:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.lc-chip.is-approved{background:var(--accent-soft);color:var(--accent-strong);}
.lc-chip.is-pending{border:1.5px dashed var(--accent);color:var(--accent-strong);}
.lc-chip.is-me{font-weight:700;box-shadow:inset 3px 0 0 var(--accent);}
.lc-av{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;flex-shrink:0;}
.lc-more{font-size:11px;color:var(--muted);}
.lc-agenda{display:none;padding:0;}
.lc-agenda-day{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);}
.lc-agenda-day:last-child{border-bottom:0;}
.lc-agenda-day.is-today{background:var(--accent-soft);}
.lc-agenda-date{display:flex;flex-direction:column;min-width:48px;font-size:12px;color:var(--muted);}
.lc-agenda-date b{font-size:14px;color:var(--text);}
.lc-agenda-body{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.lc-clash{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--orange-bg);border:1px solid var(--orange);color:var(--orange);font-size:13px;}
.lc-clash-hint{color:var(--orange);}
@media (max-width:760px){.lc,.lc-legend{display:none;}.lc-agenda{display:block;}}

/* ---------- Attendance corrections ---------- */
.punch-warn-link{color:var(--orange);font-weight:600;text-decoration:underline;}
.corr-list{padding:0;overflow:hidden;margin-bottom:20px;}
.corr-list header{padding:12px 18px;border-bottom:1px solid var(--border);}
.corr-list h2,.corr-recent h2{font-size:15px;font-weight:600;margin:0 0 4px;}
.corr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px;}
.corr-row:last-child{border-bottom:0;}
.corr-day{font-weight:600;min-width:84px;}
.corr-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
.corr-form{display:flex;flex-direction:column;gap:14px;max-width:560px;}
.corr-times{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.corr-now{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;background:var(--panel);font-size:13px;}
.corr-check{display:flex;gap:8px;align-items:center;font-size:13px;}
.corr-recent .corr-row{padding:8px 0;}
.corr-card{margin-bottom:14px;max-width:760px;}
.corr-card header{margin-bottom:12px;}
.corr-diff{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px;}
.corr-diff>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;}
.corr-diff .dc-label{width:100%;margin:0;}
.corr-arrow{color:var(--muted);}
.corr-reason{margin:12px 0;padding:10px 12px;border-left:3px solid var(--border-strong);background:var(--panel);border-radius:0 8px 8px 0;font-size:13.5px;}
.corr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.corr-actions .form-input{flex:1 1 220px;}
@media (max-width:860px){.corr-grid{grid-template-columns:minmax(0,1fr);}.corr-times,.corr-diff{grid-template-columns:minmax(0,1fr);}}

/* ---------- Error trends ---------- */
.count-cell{display:flex;align-items:center;gap:10px;}
.spark{display:block;overflow:visible;}
.spark-area{fill:var(--accent-soft);}
.spark-line{stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.spark.is-rising .spark-area{fill:var(--red-bg);}
.spark.is-rising .spark-line{stroke:var(--red);}
.spark-flat{stroke:var(--border-strong);stroke-width:1.5;}
.flags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.flags:empty{display:none;}
.flag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:1px 8px;}
.flag-red{background:var(--red-bg);color:var(--red);}
.flag-blue{background:var(--accent-soft);color:var(--accent-strong);}
.flag-orange{background:var(--orange-bg);color:var(--orange);}
.trend-bars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;align-items:end;height:84px;}
.trend-col{height:100%;display:flex;align-items:flex-end;background:var(--line);border-radius:3px;overflow:hidden;}
.trend-col i{display:block;width:100%;background:var(--accent);border-radius:3px;min-height:0;}
.trend-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;}
.trend-note{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:var(--gray-bg);color:var(--muted);font-size:13px;}
.trend-note.is-red{background:var(--red-bg);color:var(--red);}
.trend-versions{margin-top:16px;width:100%;font-size:13px;}

/* ---------- Search palette ---------- */
.side-search{display:flex;align-items:center;gap:9px;width:100%;margin:8px 0 4px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;}
.side-search:hover{border-color:var(--border-strong);color:var(--text);}
.side-search svg{width:15px;height:15px;flex-shrink:0;}
.side-search .side-label{flex:1;text-align:left;}
kbd{font:inherit;font-size:11px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--surface);color:var(--muted);}
html.sidebar-collapsed .side-search{justify-content:center;padding:7px 0;}
html.sidebar-collapsed .side-search .side-kbd{display:none;}
.palette-backdrop{position:fixed;inset:0;z-index:2000;background:var(--overlay);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;}
.palette{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 80px rgba(13,17,23,.35);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;}
.palette-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.palette-input svg{width:18px;height:18px;color:var(--muted);flex-shrink:0;}
.palette-input input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--text);min-width:0;}
.palette-results{overflow-y:auto;padding:6px;flex:1;}
.palette-group{padding:10px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.palette-item{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:8px;color:inherit;}
.palette-item.is-active{background:var(--accent-soft);}
.palette-title{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.palette-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.palette-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;margin:0;}
.palette-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);}
@media (max-width:640px){.palette-backdrop{padding-top:8vh;}.palette-foot{display:none;}}

/* ---------- Notifications ---------- */
.link-btn{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;padding:0;}
.link-btn:hover{text-decoration:underline;}
.side-bell{position:relative;}
.bell-badge{background:var(--accent);color:var(--on-accent);border-color:transparent;}
.bell-pop{position:fixed;z-index:90;width:360px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px rgba(13,17,23,.2);overflow:hidden;}
.bell-head,.bell-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;}
.bell-head{border-bottom:1px solid var(--border);}
.bell-head h2{font-size:15px;font-weight:600;margin:0;}
.bell-foot{border-top:1px solid var(--border);font-size:12.5px;}
.bell-foot a{color:var(--accent);font-weight:500;}
.bell-list{list-style:none;margin:0;padding:4px;max-height:380px;overflow-y:auto;}
.bell-row,.notice-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;color:inherit;}
.bell-row:hover,.notice-row:hover{background:var(--panel);}
.bell-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:transparent;}
.is-unread .bell-dot{background:var(--accent);}
.bell-text,.notice-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;flex:1;}
.bell-text strong,.notice-text strong{font-weight:600;}
.bell-text span,.notice-text span{color:var(--muted);}
.bell-text em{font-style:normal;font-size:11.5px;color:var(--muted-2);}
.bell-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px;margin:0;}
.notice-row{border-bottom:1px solid var(--line);padding:14px 18px;border-radius:0;align-items:center;}
.notice-row.is-unread{background:var(--accent-soft);}
.notice-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--muted);flex-shrink:0;}
.topbar-bell{position:relative;display:flex;align-items:center;margin-left:auto;padding:6px;border-radius:6px;color:var(--text);}
.topbar-bell svg{width:20px;height:20px;}
.topbar-bell i{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);}

/* ---------- Ticket comments ---------- */
.mention-wrap{position:relative;}
.mention-list{position:absolute;left:0;right:0;bottom:100%;z-index:20;margin:0 0 4px;max-height:240px;overflow-y:auto;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(13,17,23,.14);}
.mention-list li{padding:7px 10px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;gap:8px;align-items:baseline;}
.mention-list li span{color:var(--muted);font-size:12px;}
.mention-list li.is-active,.mention-list li:hover{background:var(--accent-soft);}
.mention{background:var(--accent-soft);color:var(--accent-strong);border-radius:4px;padding:0 4px;font-weight:500;}
.ticket-viewers{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent-strong);background:var(--accent-soft);border-radius:999px;padding:3px 10px;margin-left:12px;font-weight:500;}
.ticket-viewers svg{width:14px;height:14px;display:block;}

/* ---------- Punch panel ---------- */
.punch{display:flex;flex-direction:column;gap:14px;}
.punch-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--surface);}
.punch-state-open{background:linear-gradient(135deg,var(--green-bg),var(--surface) 70%);border-color:var(--green);}
.punch-state-ready{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border-color:var(--accent-line);}
.punch-state-done{background:linear-gradient(135deg,var(--green-bg),var(--surface) 70%);}
.punch-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 240px;}
.punch-label{font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--text);}
.punch-state-open .punch-label{color:var(--green);}
.punch-state-ready .punch-label{color:var(--accent-strong);}
.punch-sub{font-size:13px;color:var(--muted);}
.punch-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin-top:2px;}
.punch-facts b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums;}
.punch-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.punch-ontime{color:var(--green);font-weight:500;}
.punch-late{color:var(--orange);font-weight:600;}
.punch-late-hard{color:var(--red);}

/* The two buttons are different on purpose: check-out ends the day. */
.punch-btn{padding:13px 26px;font-size:15px;font-weight:650;gap:9px;display:inline-flex;align-items:center;border-radius:10px;min-height:48px;}
.punch-btn .ic{width:16px;height:16px;}
.punch-btn-in{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px -6px rgba(26,91,255,.6);}
.punch-btn-in:hover{background:var(--accent-strong);}
.punch-btn-out{background:var(--surface);border-color:var(--green);color:var(--green);}
.punch-btn-out:hover{background:var(--green-bg);}
.punch-btn[disabled]{opacity:.6;cursor:progress;}

.punch-week{border:1px solid var(--border);border-radius:12px;padding:14px 18px;background:var(--surface);}
.week-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;}
.week-head b{font-size:14px;color:var(--text);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;}
.week-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;}
.week-day{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);}
.week-bar{width:100%;max-width:38px;height:56px;border-radius:8px;background:var(--line);display:flex;align-items:flex-end;overflow:hidden;}
.week-bar i{display:block;width:100%;border-radius:8px;background:var(--accent);min-height:0;}
.week-day.is-today{color:var(--accent);font-weight:650;}
.week-day.is-today .week-bar{box-shadow:0 0 0 2px var(--accent-line);}
.week-day.is-leave .week-bar{background:repeating-linear-gradient(45deg,var(--orange-bg),var(--orange-bg) 4px,var(--surface) 4px,var(--surface) 8px);}
.week-day.is-weekend .week-bar,.week-day.is-future .week-bar{opacity:.55;}

.punch-warn{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--orange-bg);border:1px solid var(--orange);}
.punch-warn-icon{flex-shrink:0;color:var(--orange);display:flex;padding-top:1px;}
.punch-warn-icon .ic{width:17px;height:17px;}
.punch-warn-copy{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--orange);}
.punch-warn-copy strong{font-weight:600;}
.punch-message{margin:0;font-size:13px;color:var(--muted);}
.att-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px;}

/* ---------- Team attendance ---------- */
.team-att .att-stats{grid-template-columns:repeat(5,minmax(0,1fr));}
.me-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;border-left:4px solid var(--border-strong);}
.me-card.me-clock{border-left-color:var(--green);}
.me-card.me-done{border-left-color:var(--accent);}
.me-card.me-leave{border-left-color:var(--orange);}
.me-card.me-stale{border-left-color:var(--red);}
.me-who{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:0;}
.me-who>div{display:flex;flex-direction:column;}
.me-avatar{width:38px;height:38px;font-size:14px;}
.me-week{display:flex;gap:5px;}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;cursor:pointer;position:relative;padding:14px 16px;transition:box-shadow .15s,transform .15s,border-color .15s;}
div.kpi{cursor:default;}
button.kpi:hover{box-shadow:0 6px 18px rgba(13,17,23,.08);transform:translateY(-1px);}
.kpi.is-on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.kpi-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;margin-bottom:6px;background:var(--gray-bg);color:var(--muted);}
.kpi-icon .ic{width:16px;height:16px;}
.kpi-num{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.kpi-num small{font-size:14px;font-weight:500;color:var(--muted);}
.kpi-label{font-size:12.5px;color:var(--muted);}
.kpi-green .kpi-icon{background:var(--green-bg);color:var(--green);} .kpi-green .kpi-num{color:var(--green);}
.kpi-blue .kpi-icon{background:var(--accent-soft);color:var(--accent);}
.kpi-orange .kpi-icon{background:var(--orange-bg);color:var(--orange);} .kpi-orange .kpi-num{color:var(--orange);}
.kpi-red .kpi-icon{background:var(--red-bg);color:var(--red);} .kpi-red .kpi-num{color:var(--red);}
.team-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;}
.roster{padding:0;overflow:hidden;}
.stale-card{margin-bottom:16px;border-color:var(--orange);}
.roster-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border);}
.roster-head h2{font-size:15px;font-weight:600;margin:0;}
.roster-table td{vertical-align:middle;white-space:nowrap;}
.roster-table td:first-child{white-space:normal;}
.roster-table tr.is-me td{background:var(--accent-soft);}
.roster-table tr.is-me:hover td{background:var(--accent-soft);}
.person{display:flex;align-items:center;gap:10px;color:inherit;}
.person>span:last-child{display:flex;flex-direction:column;line-height:1.3;}
.person:hover .title{color:var(--accent);}
.person .title{white-space:nowrap;}
.you{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:1px 6px;border-radius:999px;margin-left:4px;vertical-align:1px;}
.worked{white-space:nowrap;}
.mini-bar{display:block;width:72px;height:4px;border-radius:2px;background:var(--line);margin-top:5px;overflow:hidden;}
.mini-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;}
.mini-bar.is-live i{background:var(--green);}
.week-dots{display:inline-flex;gap:4px;}

/* ---------- DSR composer ---------- */
.dc-wrap{padding:16px 18px;background:var(--panel);border-bottom:1px solid var(--border);}
.dsr-composer{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) 110px minmax(0,1fr) auto;gap:8px 10px;align-items:start;text-align:left;}
.dsr-composer .dc-notes{grid-column:1/4;}
.dsr-composer .dc-quick{grid-column:4/-1;}
.dsr-composer .dc-chips{grid-column:1/-1;margin-top:0;}
.dsr-composer .dc-error{grid-column:1/-1;}
.dc-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;}
.dsr-composer .form-input{width:100%;min-height:36px;padding:6px 9px;}
.dc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
.dc-chips-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px;}
.dc-chip{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dc-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.dc-chip-sm{padding:2px 9px;font-weight:600;}
.dc-quick{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.dc-hint{font-size:12.5px;color:var(--muted);}
.dc-submit{min-height:36px;font-weight:600;white-space:nowrap;}
.dc-error{color:var(--red);font-size:12px;margin:4px 0 0;}
.dc-time-row{display:flex;gap:6px;}
.dc-time-select{width:100%;min-width:0;}

@media (max-width:1100px){
  .team-att .att-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .team-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .punch-hero{padding:16px;gap:16px;}
  .punch-actions{width:100%;}
  .punch-actions form,.punch-actions .punch-btn{width:100%;justify-content:center;}
  .att-stats,.team-att .att-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dsr-composer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .dsr-composer .dc-task,.dsr-composer .dc-notes,.dsr-composer .dc-quick,.dsr-composer .dc-go{grid-column:1/-1;}
  .me-card .btn{width:100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .presence-live.is-live i,.presence-dot.is-live{animation:none;}
}

/* ---------- Top bar ---------- */
.main-col{display:flex;flex-direction:column;height:100vh;min-width:0;overflow:hidden;}
.main-col > .main{height:auto;flex:1;min-height:0;}
/* .main is a flex column; a boxed block (overflow:hidden) would otherwise shrink to the screen height and clip its rows with no way to scroll. */
.main > .card-flush,.main > .ledger{flex-shrink:0;}
.topbar{display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:56px;padding:8px 36px;background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:60;}
.topbar-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;}
.tb-search{display:flex;align-items:center;gap:9px;flex:1;max-width:460px;margin-left:8px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:left;min-width:0;}
.tb-search:hover{border-color:var(--border-strong);color:var(--text);}
.tb-search svg{width:15px;height:15px;flex-shrink:0;}
.tb-search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-search kbd{font:inherit;font-size:11px;padding:1px 6px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--muted);}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.tb-wrap{position:relative;}
.tb-btn{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:500;cursor:pointer;}
.tb-btn:hover{background:var(--panel);}
.tb-btn .ic{width:16px;height:16px;}
.tb-icon{padding:7px 9px;}
.tb-count{font-variant-numeric:tabular-nums;font-weight:600;}
.tb-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:600;line-height:17px;text-align:center;}
.tb-user{display:flex;align-items:center;gap:9px;padding:3px 8px 3px 4px;border:none;background:none;border-radius:99px;cursor:pointer;font:inherit;color:var(--text);text-align:left;}
.tb-user:hover{background:var(--panel);}
.tb-user .side-avatar{width:30px;height:30px;font-size:12px;}
html .topbar .side-user-meta{display:flex;flex:none;}
.topbar .tb-wrap .bell-pop,.topbar .tb-wrap .presence-pop,.topbar .tb-wrap .side-user-menu{position:absolute;top:calc(100% + 8px);bottom:auto;left:auto;right:0;}
.topbar .tb-wrap .side-user-menu{width:200px;}
.tb-btn:focus-visible,.tb-user:focus-visible,.tb-search:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media(max-width:1100px){.topbar{padding-left:24px;padding-right:24px;}}
@media(max-width:860px){
  .topbar{padding:8px 12px;gap:8px;}
  .tb-search{flex:0 0 auto;max-width:none;margin-left:auto;padding:8px 10px;}
  .tb-search span,.tb-search kbd,.tb-text,.topbar .side-user-meta,.tb-user .switch-caret{display:none !important;}
  .tb-actions{margin-left:0;gap:6px;}
  .topbar .tb-wrap .bell-pop,.topbar .tb-wrap .presence-pop{position:fixed;top:58px;left:12px;right:12px;width:auto;max-width:none;}
}

/* ---------- Attendance corrections ---------- */
.corr-form{gap:16px;max-width:600px;padding:22px;}
.corr-now{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1px dashed var(--border-strong);background:var(--bg);}
.corr-times{gap:16px;}
.corr-times .form-input{font-size:15px;font-variant-numeric:tabular-nums;}
.corr-preview{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;background:var(--accent-soft);}
.corr-chips{display:flex;flex-wrap:wrap;gap:8px;}
.corr-chip{display:inline-flex;align-items:baseline;gap:7px;padding:5px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-variant-numeric:tabular-nums;}
.corr-chip i{font-style:normal;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.corr-chip b{font-weight:650;color:var(--accent-strong);}
.corr-chip s{color:var(--muted-2);font-size:12px;}
.corr-chip small{font-size:11px;color:var(--orange);}
.corr-chip.is-same{background:transparent;border-style:dashed;}
.corr-chip em{font-style:normal;color:var(--muted);font-size:12px;}
.corr-items{display:flex;flex-direction:column;}
.corr-recent .corr-item{padding:14px 0;}
.corr-item{display:flex;flex-direction:column;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line);}
.corr-item:last-child{border-bottom:0;}
.corr-item header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.corr-item .corr-day{min-width:0;font-size:14px;}
.corr-sent{margin-left:auto;font-size:11.5px;color:var(--muted);}
.corr-why{margin:0;font-size:13px;color:var(--muted);}
.corr-note-line{margin:0;font-size:12.5px;}
.corr-item form{margin:0;}
.corr-list .corr-item header{padding:0;border:0;}

.tb-new{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.tb-new:hover{background:var(--accent-strong);}
.tb-menu a svg{width:15px;height:15px;}
.topbar .tb-wrap .tb-menu{position:absolute;top:calc(100% + 8px);bottom:auto;left:auto;right:0;width:210px;}
.tb-stack{display:inline-flex;align-items:center;}
.tb-face{width:22px;height:22px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface);background:var(--accent-soft);color:var(--accent-strong);font-size:10px;font-weight:700;display:grid;place-items:center;}
.tb-face:first-child{margin-left:0;}

.punch-latenote{margin:8px 0 0;padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:500;display:inline-block;}
.punch-latenote.ok{background:var(--green-bg);color:var(--green);}
.punch-latenote.warn{background:var(--orange-bg);color:var(--orange);}
.punch-latenote.bad{background:var(--red-bg);color:var(--red);}

/* ---------- Team week grid ---------- */
.view-toggle a{display:inline-flex;align-items:center;padding:6px 14px;font-size:13px;font-weight:500;color:var(--muted);}
.view-toggle a.active{background:var(--accent-soft);color:var(--accent-strong);}
.tw-card{padding:0;overflow:hidden;}
.tw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.tw-head h2{font-size:15px;font-weight:600;margin:0;}
.tw-nav{display:flex;gap:6px;}
.tw-scroll{overflow-x:auto;}
.tw-table{width:100%;border-collapse:collapse;min-width:860px;table-layout:fixed;}
.tw-table th{padding:10px 8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center;border-bottom:1px solid var(--border);background:var(--bg);}
.tw-table th span{display:block;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums;}
.tw-table th.is-today{color:var(--accent);}
.tw-table th.is-today span{color:var(--accent);}
.tw-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle;}
.tw-who{width:210px;text-align:left !important;padding-left:16px !important;}
.tw-total{width:110px;text-align:center;}
.tw-total b{display:block;font-variant-numeric:tabular-nums;}
.tw-cell{text-align:center;height:76px;font-size:12px;}
.tw-cell.is-weekend,.tw-cell.is-future{background:var(--bg);}
.tw-cell.is-today{box-shadow:inset 0 0 0 2px var(--accent-line);}
.tw-cell.is-none .tw-dash{color:var(--red);opacity:.7;}
.tw-cell.is-weekend .tw-dash,.tw-cell.is-future .tw-dash{color:var(--muted-2);}
.tw-time{display:block;font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px;}
.tw-time small{font-size:9.5px;font-weight:600;color:var(--muted);margin-left:2px;}
.tw-time.tw-out{color:var(--muted);font-weight:500;}
.tw-time em{font-style:normal;color:var(--orange);font-size:11px;}
.tw-tag{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:99px;font-size:10.5px;font-weight:650;background:var(--gray-bg);color:var(--muted);}
.tw-tag.warn{background:var(--orange-bg);color:var(--orange);}
.tw-tag.bad{background:var(--red-bg);color:var(--red);}
.tw-tag.leave{background:var(--accent-soft);color:var(--accent-strong);}
.tw-table tr.is-me .tw-who{box-shadow:inset 3px 0 0 var(--accent);}
.tw-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:12px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);}
.tw-key{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--gray-bg);}
.tw-key.warn{background:var(--orange);}.tw-key.bad{background:var(--red);}.tw-key.leave{background:var(--accent);}
.btn.is-following{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong);}

.kbd-active{outline:2px solid var(--accent);outline-offset:-2px;}
tr.kbd-active{background:var(--accent-soft);}
.kbd-list{list-style:none;margin:12px 0 16px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.kbd-list li{display:flex;align-items:center;gap:6px;}
.kbd-list li span{margin-left:auto;color:var(--muted);}
.kbd-list kbd,.kbd-help kbd{font:inherit;font-size:11.5px;padding:2px 7px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);}

.linked-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px;}
.linked-row:first-of-type{border-top:0;}
.linked-row:hover .linked-title{color:var(--accent);}
.linked-key{font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent-strong);}
.linked-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.palette-snip{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;}
.palette-title mark,.palette-snip mark{background:var(--accent-soft);color:var(--accent-strong);border-radius:3px;padding:0 1px;}
.palette-clear{float:right;border:0;background:none;color:var(--accent);font:inherit;font-size:11px;cursor:pointer;}
.palette-recent{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer;}
.palette-tip{margin:0;padding:10px 16px;font-size:12px;color:var(--muted);}
.palette-tip code{font-size:11.5px;background:var(--panel);padding:1px 6px;border-radius:5px;}
.tw-cell.is-none .tw-dash.is-pending{color:var(--muted);opacity:1;}

/* Theme switch in the account menu: three icon buttons, the current one raised. */
.theme-switch{display:flex;gap:2px;margin:4px 6px 6px;padding:3px;background:var(--panel);border-radius:var(--radius);}
.theme-switch button{flex:1;display:grid;place-items:center;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;}
.theme-switch button:hover{color:var(--text);}
.theme-switch button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.theme-switch .side-menu-ic{width:15px;height:15px;margin:0;}

/* ───────── Shared building blocks of the new look ───────── */
.pg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pg-head h1{font-size:24px;font-weight:650;letter-spacing:-.02em;}
.pg-head .sub{margin-top:2px;font-size:13.5px;color:var(--muted);}
.pg-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--panel);border-radius:var(--radius);}
.seg a,.seg button{border:0;background:transparent;padding:5px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap;}
.seg a:hover,.seg button:hover{color:var(--text);}
.seg .is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.toolbar .grow{margin-left:auto;font-size:13px;color:var(--muted);}
.toolbar .grow b{color:var(--text);}
.input-icon{position:relative;}
.input-icon .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted-2);pointer-events:none;}
.input-icon .form-input{padding-left:32px;}
.card-flush{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.tbl th{position:sticky;top:0;text-align:left;padding:9px 12px;background:var(--panel);color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--border);}
.tbl td{padding:10px 12px;border:1px solid var(--border);vertical-align:middle;}
.tbl tr:first-child th{border-top:0}.tbl th:first-child,.tbl td:first-child{border-left:0}.tbl th:last-child,.tbl td:last-child{border-right:0}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--panel) 55%,transparent);}
.tbl .c{text-align:center;}
.tbl .daycell{background:color-mix(in srgb,var(--panel) 60%,transparent);text-align:center;vertical-align:middle;min-width:100px;}
.tbl .daycell b{display:block;font-weight:600;}
.tbl .daycell small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);}
.tbl .task{font-weight:500;}
.tbl .task a:hover{text-decoration:underline;}
.tbl .task-clamp{display:flex;align-items:flex-start;gap:var(--space-2);}
.tbl .task-clamp .clamp-2{min-width:0;}
.tbl .task-clamp .bdg{flex-shrink:0;}
.tbl .sub{margin-top:2px;font-size:12px;font-weight:400;color:var(--muted);}
.bdg{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;background:var(--gray-bg);color:var(--gray);}
.bdg-green{background:var(--green-bg);color:var(--green);}
.bdg-blue{background:var(--blue-bg);color:var(--blue);}
.bdg-red{background:var(--red-bg);color:var(--red);}
.bdg-orange{background:var(--orange-bg);color:var(--orange);}
.bdg-outline{background:transparent;border-color:var(--border);color:var(--muted);}
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);transition:background .15s,color .15s;}
.icon-btn:hover{background:var(--panel);color:var(--text);}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red);}
.icon-btn .ic{width:15px;height:15px;}
.empty-state{display:grid;justify-items:center;gap:6px;padding:44px 20px;text-align:center;color:var(--muted);font-size:13.5px;}
.empty-state strong{color:var(--text);font-size:14px;}
.alert-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-radius:var(--radius-lg);font-size:13.5px;}

/* Dialogs: native <dialog>, centred, with a soft backdrop. */
dialog.dlg{margin:auto;border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);max-width:min(560px,calc(100vw - 32px));width:100%;}
dialog.dlg::backdrop{background:var(--overlay);backdrop-filter:blur(2px);}
dialog.dlg[open]{animation:dlgIn .22s cubic-bezier(.22,1,.36,1);}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.dlg-head{padding:20px 22px 0;}
.dlg-head h2,.dlg-head h3{font-size:16px;font-weight:600;}
.dlg-head p{margin-top:4px;font-size:13px;color:var(--muted);}
.dlg-body{padding:16px 22px;display:grid;gap:14px;}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:0 22px 20px;}
.field{display:grid;gap:5px;}
.field label{font-size:13px;font-weight:500;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dlg-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:10px;background:var(--accent-soft);color:var(--accent);}
.dlg-icon.danger{background:var(--red-bg);color:var(--red);}
.dlg-icon .ic{width:20px;height:20px;}
@media (prefers-reduced-motion:reduce){dialog.dlg[open]{animation:none}}

/* ───────── Ledger: one full-width strip per item instead of a card ───────── */
.ledger{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;}
.lrow{--tone:var(--border-strong);position:relative;display:grid;grid-template-columns:auto minmax(0,1.5fr) auto auto auto;align-items:center;gap:18px;padding:14px 18px 14px 22px;border-bottom:1px solid var(--line);transition:background .15s;}
.lrow:last-child{border-bottom:0;}
.lrow:hover{background:color-mix(in srgb,var(--panel) 50%,transparent);}
.lrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone);}
.lrow.t-green{--tone:var(--green)}.lrow.t-orange{--tone:var(--orange)}.lrow.t-red{--tone:var(--red)}.lrow.t-blue{--tone:var(--blue)}.lrow.t-off{--tone:var(--border-strong)}
.lmark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--navy-2);color:#fff;font-weight:650;font-size:15px;}
.lmark-ic{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
html.dark .lmark{background:var(--panel);color:var(--text);}
.lmain{min-width:0;}
.lt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:600;}
.lt a:hover{text-decoration:underline;}
.ls{margin-top:2px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lmetrics{display:flex;gap:22px;}
.lmetrics>div{display:grid;justify-items:center;min-width:44px;}
.lmetrics .v{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;}
.lmetrics .v.is-zero{color:var(--muted-2);font-weight:500;}
.lmetrics .l,.lspark .l{font-size:11.5px;color:var(--muted);}
.lspark{display:grid;gap:3px;justify-items:end;min-width:96px;}
.lspark-bars{display:flex;align-items:flex-end;gap:2px;height:26px;width:84px;}
.lspark-bars i{flex:1;min-height:3px;border-radius:2px;background:var(--border-strong);}
.lactions{display:flex;align-items:center;gap:6px;}
.lrow.lr-nomark{grid-template-columns:minmax(0,1.6fr) auto auto auto;}
.lrow.lr-avatar{grid-template-columns:auto minmax(0,1.6fr) auto auto;}
.lrow.lr-edit{grid-template-columns:1fr;}
@media (max-width:1100px){
  .lrow{grid-template-columns:auto minmax(0,1fr);}
  .lrow.lr-nomark{grid-template-columns:minmax(0,1fr);}
  .lrow.lr-avatar{grid-template-columns:auto minmax(0,1fr);}
  .lrow>.lmetrics,.lrow>.lspark,.lrow>.lactions,.lrow>form{grid-column:1 / -1;justify-self:start;}
  .lrow:not(.lr-nomark)>.lmetrics,.lrow:not(.lr-nomark)>.lspark,.lrow:not(.lr-nomark)>.lactions{grid-column:2;}
}
.alert-bar.is-warn{border-color:color-mix(in srgb,var(--orange) 40%,transparent);background:var(--orange-bg);}

/* ───────── What's new ───────── */
dialog.cl{overflow:hidden;max-height:min(88vh,760px);display:none;flex-direction:column;}
dialog.cl[open]{display:flex;animation:clIn .45s cubic-bezier(.22,1,.36,1);}
dialog.cl.is-closing{animation:clOut .2s ease-in forwards;}
@keyframes clIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes clOut{from{opacity:1}to{opacity:0;transform:translateY(10px) scale(.98)}}
.cl-head{position:relative;padding:22px 52px 18px 24px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),var(--accent-soft) 50%,transparent);}
.cl-head h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:650;}
.cl-spark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--accent);box-shadow:var(--shadow-sm);}
.cl-spark .ic{width:18px;height:18px;}
.cl-ver{color:var(--accent);}
.cl-head p{margin-top:6px;font-size:13.5px;color:var(--muted);}
.icon-btn.cl-x{position:absolute;right:14px;top:14px;}
.cl-body{padding:18px 24px 22px;overflow-y:auto;display:grid;gap:14px;align-content:start;}
.cl-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cl-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cl-chip{border:1px solid var(--border);background:transparent;border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:500;color:var(--muted);transition:all .2s;}
.cl-chip i{font-style:normal;opacity:.7;margin-left:3px;}
.cl-chip:hover{color:var(--text);border-color:var(--border-strong);}
.cl-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.cl-note{text-align:center;padding:24px 0;font-size:13.5px;color:var(--muted);}
.cl-list{list-style:none;display:grid;gap:12px;position:relative;padding-left:24px;}
.cl-list::before{content:"";position:absolute;left:4.5px;top:14px;bottom:8px;width:1px;background:var(--border);}
.cl-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);animation:clCard .4s cubic-bezier(.22,1,.36,1) both;transition:box-shadow .3s,border-color .3s;}
.cl-card::before{content:"";position:absolute;left:-24px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--border-strong);box-shadow:0 0 0 4px var(--surface);transition:background .3s;}
.cl-card:first-child::before,.cl-card.is-open::before{background:var(--accent);}
.cl-card.is-open{border-color:color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:var(--shadow-sm);}
@keyframes clCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cl-card-head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer;border-radius:var(--radius-lg);}
.cl-card-main{flex:1;min-width:0;display:grid;gap:2px;}
.cl-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;}
.cl-date{font-size:12px;color:var(--muted);}
.cl-title{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-count{font-size:12px;color:var(--muted);white-space:nowrap;}
.cl-chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .3s;margin:0 4px 3px 0;}
.cl-card.is-open .cl-chev{transform:rotate(-135deg);margin-bottom:-3px;}
.cl-card-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out;}
.cl-card.is-open .cl-card-body{grid-template-rows:1fr;}
.cl-card-body>div{overflow:hidden;}
.cl-card-inner{padding:2px 16px 16px;border-top:1px solid transparent;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;}
.cl-card.is-open .cl-card-inner{opacity:1;transform:none;border-top-color:var(--line);padding-top:14px;transition-delay:.07s;}
.cl-summary{font-size:13.5px;color:var(--muted);margin-bottom:12px;}
.cl-sec{display:flex;align-items:center;gap:7px;margin:14px 0 8px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.cl-sec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted-2);}
.cl-sec.cl-k-new::before{background:var(--green)}.cl-sec.cl-k-better::before{background:var(--blue)}.cl-sec.cl-k-fixed::before{background:var(--orange)}.cl-sec.cl-k-sec::before{background:var(--red)}
.cl-card ul{list-style:none;display:grid;gap:9px;font-size:13px;line-height:1.55;color:var(--muted);}
.cl-card li strong{color:var(--text);font-weight:600;}
.cl-card li code{padding:1px 5px;border-radius:4px;background:var(--panel);font-size:12px;}
.cl-card li a{color:var(--accent);text-decoration:underline;}
@media (prefers-reduced-motion:reduce){dialog.cl[open],dialog.cl.is-closing,.cl-card{animation:none}.cl-card-body,.cl-card-inner,.cl-chev{transition:none}}

/* Tooltips on icon-only controls are drawn by the tooltip script in base.html (a CSS ::before is clipped by overflow:hidden parents). */
[data-tip]{position:relative;}

/* ───────── Motion ─────────
   Short and quiet. Everything animated lives inside no-preference, so reduced motion gets the plain page. */
@media (prefers-reduced-motion:no-preference){
  /* Moving between pages cross-fades the content; the sidebar and top bar stay put. */
  @view-transition{navigation:auto;}
  .sidebar{view-transition-name:pq-sidebar;}
  .topbar{view-transition-name:pq-topbar;}
  ::view-transition-old(root){animation:pqFadeOut var(--dur-2) ease both;}
  ::view-transition-new(root){animation:pqRiseIn var(--dur-3) var(--ease-out) both;}
  @keyframes pqFadeOut{to{opacity:0}}
  @keyframes pqRiseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pqPop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes pqGrowX{from{width:0}}
  @keyframes pqGrowY{from{height:0}}

  /* Cards and rows rise in one after another (the first twelve), so a page assembles instead of appearing. */
  :is(.hm-bento>*,.hm-bento .hm-card,.ledger>.lrow,.pj-cards>.pj-card,.pj-journey>.pj-row,.pj-formwrap>*,.pj-sections>*,.pj-feed .pj-entry,.pj-side>*,.dsr-notices,.dsr-today,.acc){
    animation:pqRiseIn .45s var(--ease-out) both;
  }
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(2){animation-delay:40ms;}
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(3){animation-delay:80ms;}
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(4){animation-delay:120ms;}
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(5){animation-delay:160ms;}
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(6){animation-delay:200ms;}
  :is(.hm-bento,.ledger,.pj-cards,.pj-journey,.pj-formwrap,.pj-sections,.pj-feed,.pj-side)>:nth-child(n+7){animation-delay:240ms;}

  /* Things you can press respond. */
  .btn,.icon-btn,.seg a,.seg button,.side-item,.switch-btn,.chip{transition:background var(--dur-1) ease,border-color var(--dur-1) ease,color var(--dur-1) ease,box-shadow var(--dur-2) ease,transform var(--dur-1) ease;}
  .btn:active,.icon-btn:active{transform:scale(.97);}
  .btn-primary:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);}
  .side-item .ic{transition:transform var(--dur-2) var(--ease-out);}
  .side-item:hover .ic{transform:scale(1.12);}
  .pj-card,.hm-kpi,.lrow,.pj-person,.pj-phase span{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease,border-color var(--dur-2) ease,background var(--dur-2) ease;}
  .pj-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
  .pj-card.is-dragging{transform:rotate(1.5deg) scale(1.02);}
  .hm-card,.acc{transition:box-shadow var(--dur-2) ease,border-color var(--dur-2) ease;}
  .hm-card:hover{box-shadow:var(--shadow-md);}

  /* Menus and popovers open with a short pop. */
  .dd-menu,.switch-menu,.side-user-menu,.pq-select-popover,.pq-datepicker-popover,.mention-list,.pj-suggest,.kt-pop-body{transform-origin:top;animation:pqPop .16s var(--ease-out) both;}
  .mention-list{transform-origin:bottom;}

  /* Bars grow to their value when they appear. */
  :is(.hm-meter,.dsr-today-bar) i{animation:pqGrowX .9s var(--ease-out) .15s both;}
  .hm-bar-track i{animation:pqGrowY .8s var(--ease-out) .15s both;}

  /* Content swapped in by htmx fades in instead of snapping. */
  .htmx-added{animation:pqRiseIn .3s var(--ease-out) both;}
  .htmx-request{opacity:.7;transition:opacity var(--dur-2) ease;}
}
/* Brand fonts: DM Sans is the body font (set on html,body); Manrope is for headings and big figures. */
h1,h2,h3,h4,.pg-head h1,.co-v,.ex-v,.brand-name{font-family:'Manrope','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}


/* Page-level layouts: reports, dashboard bento, DSR, attendance, products.
   Colors come from _tokens.css only. */

/* ---- KPI tiles ---- */
.rk-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.rk{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;min-width:0;}
.rk-label{font-size:12px;color:var(--muted);font-weight:500;}
.rk-value{font-size:28px;font-weight:650;letter-spacing:-.02em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;}
.rk.tone-blue .rk-value{color:var(--blue);}
.rk.tone-green .rk-value{color:var(--green);}
.rk.tone-red .rk-value{color:var(--red);}
.rk-delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;margin-top:8px;color:var(--muted);}
.rk-delta.up{color:var(--green);}
.rk-delta.down{color:var(--red);}
.rk-delta small{font-weight:500;color:var(--muted);}

/* ---- Bento grid ---- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.bento > .tile{grid-column:span 4;min-width:0;}
.bento > .tile.w-3{grid-column:span 3;}
.bento > .tile.w-5{grid-column:span 5;}
.bento > .tile.w-6{grid-column:span 6;}
.bento > .tile.w-7{grid-column:span 7;}
.bento > .tile.w-8{grid-column:span 8;}
.bento > .tile.w-12{grid-column:span 12;}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;}
.tile h2{font-size:14px;font-weight:650;margin:0 0 2px;}
.tile .tile-sub{font-size:12px;color:var(--muted);margin:0 0 14px;}
.tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tile-head h2{margin:0;}

/* ---- Bars ---- */
.hbar{display:grid;grid-template-columns:minmax(80px,170px) 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:13px;}
.hbar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar-track{height:8px;border-radius:99px;background:var(--panel);overflow:hidden;}
.hbar-fill{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .4s ease;}
.hbar-fill.green{background:var(--green);}
.hbar-fill.red{background:var(--red);}
.hbar-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;color:var(--muted);min-width:28px;text-align:right;}

/* ---- Column chart ---- */
.cols{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:8px;border-bottom:1px solid var(--border);}
.cols-day{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:1px;}
.cols-bar{flex:1;max-width:14px;border-radius:3px 3px 0 0;min-height:2px;background:var(--panel);}
.cols-bar.created{background:var(--blue);}
.cols-bar.resolved{background:var(--green);}
.cols-bar.captured{background:var(--red);opacity:.75;}
.cols-bar.fixed{background:var(--purple);opacity:.8;}
.cols-bar.zero{background:var(--line);}
.cols-axis{display:flex;gap:3px;margin-top:6px;font-size:10.5px;color:var(--muted);}
.cols-axis span{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:visible;}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:6px;}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px;}

/* ---- Ring (completion rate) ---- */
.ring{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p) * 1%), var(--panel) 0);display:grid;place-items:center;flex:none;}
.ring::before{content:"";width:68px;height:68px;border-radius:50%;background:var(--surface);grid-area:1/1;}
.ring b{grid-area:1/1;font-size:18px;font-variant-numeric:tabular-nums;}
.ring-row{display:flex;align-items:center;gap:16px;}
.ring-row + .ring-row{margin-top:14px;}
.ring-copy{font-size:12.5px;color:var(--muted);line-height:1.5;}
.ring-copy strong{display:block;color:var(--text);font-size:13.5px;}

/* ---- Range chips ---- */
.rchips{display:flex;gap:6px;flex-wrap:wrap;}
.rchip{font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;}
.rchip:hover{background:var(--panel);}
.rchip.active{background:var(--primary);color:var(--on-accent);border-color:var(--primary);}

@media (max-width:1100px){
  .rk-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bento > .tile,.bento > .tile.w-3,.bento > .tile.w-5,.bento > .tile.w-7{grid-column:span 6;}
  .bento > .tile.w-8,.bento > .tile.w-12{grid-column:span 12;}
}
@media (max-width:700px){
  .rk-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bento > .tile,.bento > .tile.w-3,.bento > .tile.w-5,.bento > .tile.w-6,.bento > .tile.w-7,.bento > .tile.w-8{grid-column:span 12;}
  .hbar{grid-template-columns:minmax(70px,110px) 1fr auto;}
}

/* ---- DSR work log ---- */
.dsr-big{display:flex;align-items:baseline;gap:6px;}
.dsr-big b{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.dsr-big span{font-size:13px;color:var(--muted);}
.dsr-goal{margin-top:12px;}
.dsr-line{display:flex;align-items:center;gap:8px;min-width:0;}
.dsr-title{font-weight:600;font-size:14px;color:var(--text);text-decoration:none;overflow-wrap:anywhere;}
.dsr-title-input{font-weight:600;font-size:14px;}
.dsr-note{flex:1;min-width:160px;font-size:12.5px;}
.dsr-note-text{font-size:12.5px;color:var(--muted);}
.dsr-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--panel);color:var(--muted);flex:none;}
.dsr-tag.auto{background:var(--accent-soft);color:var(--accent-strong);}
.dsr-empty{padding:34px 18px;text-align:center;}
.dsr-empty-title{font-size:15px;font-weight:600;margin:0 0 4px;}
.dsr-empty .dsr-composer{margin:18px auto 0;max-width:980px;}

/* ---- One strip of numbers instead of a box per number ---- */
.att-stats:has(> .stat-strip){display:block;margin:0;}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:18px;overflow:hidden;}
.stat-strip-item{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-left:1px solid var(--line);min-width:0;}
.stat-strip-item:first-child{border-left:none;}
.stat-strip-label{font-size:12px;color:var(--muted);font-weight:500;}
.stat-strip-value{font-size:22px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;min-height:30px;display:flex;align-items:center;}
.stat-strip-value .pill{font-size:12px;}
.stat-strip-note{font-size:11.5px;color:var(--muted);}
@media (max-width:640px){.stat-strip-item{border-left:none;border-top:1px solid var(--line);}.stat-strip-item:first-child{border-top:none;}}

/* ---- Product cards: numbers sit on the card, not in a second box ---- */
.product-item-card{border-radius:14px;}
.product-item-card .stat-mini-grid{background:none;border:none;border-radius:0;padding:0;margin:0 0 14px;gap:0;}
.product-item-card .stat-mini-grid .stat-cell{padding:2px 4px;border-left:1px solid var(--line);}
.product-item-card .stat-mini-grid .stat-cell:first-child{border-left:none;}
.product-item-card .stat-mini-grid .stat-cell .v{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;}
.product-item-card .stat-mini-grid .stat-cell:nth-child(1) .v{color:var(--red);}
.product-item-card .stat-mini-grid .stat-cell:nth-child(2) .v{color:var(--blue);}
.product-item-card .stat-mini-grid .stat-cell .v.is-zero{color:var(--muted-2);}
.product-item-card .stat-mini-grid .stat-cell .l{text-transform:none;letter-spacing:0;font-size:11px;}
.product-item-card .card-actions{border-top:none;padding-top:0;}

/* ---- Collapsed sidebar ---- */
.side-tip{position:fixed;z-index:120;background:var(--tooltip-bg);color:var(--tooltip-text);font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;white-space:pre;pointer-events:none;box-shadow:0 6px 16px rgba(13,17,23,.25);}
.side-tip[hidden]{display:none;}
@media (min-width:861px){
  /* An unread count becomes a dot on the icon, so the rail still says something is waiting. */
  html.sidebar-collapsed .side-item .side-badge{display:block;position:absolute;top:4px;right:calc(50% - 15px);width:8px;height:8px;min-width:0;padding:0;font-size:0;line-height:0;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-sizing:content-box;}
  html.sidebar-collapsed .side-version .side-badge,
  html.sidebar-collapsed .side-presence .side-item .side-badge{display:none;}
  html.sidebar-collapsed .nav-label,
  html.sidebar-collapsed .nav-section + .nav-section > .nav-label{display:block;height:1px;min-height:0;margin:8px 8px;padding:0;font-size:0;line-height:0;background:var(--line);}
}

/* ---- Home: hero and bento ---- */
.hero{display:flex;align-items:stretch;justify-content:space-between;gap:24px;padding:26px 28px;margin-bottom:16px;border-radius:18px;color:var(--on-accent);background:radial-gradient(120% 140% at 100% 0%,var(--blue-500) 0%,transparent 55%),linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);overflow:hidden;position:relative;}
.hero-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px;}
.hero-date{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin:0;}
.hero h1{font-size:28px;font-weight:650;letter-spacing:-.02em;margin:0;color:inherit;}
.hero-quote{display:flex;align-items:center;gap:8px;max-width:560px;margin:4px 0 12px;font-size:14.5px;line-height:1.5;opacity:.88;}
.hero-quote-next{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:inherit;cursor:pointer;}
.hero-quote-next:hover{background:rgba(255,255,255,.14);}
.hero-quote-next.htmx-request svg{animation:heroSpin .6s linear infinite;}
@keyframes heroSpin{to{transform:rotate(360deg);}}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
.hero .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:inherit;}
.hero .btn:hover{background:rgba(255,255,255,.2);}
.hero .btn-primary{background:var(--on-accent);color:var(--navy);border-color:var(--on-accent);}
.hero .btn-primary:hover{background:var(--slate-100);}
.hero-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;flex:none;}
.hero-time{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;}
.hero-time b{font-size:54px;font-weight:650;letter-spacing:-.03em;line-height:1;}
.hero-time i{font-style:normal;font-size:22px;opacity:.6;min-width:30px;}
.hero-time em{font-style:normal;font-size:14px;font-weight:600;opacity:.8;}
.hero-zone{font-size:12.5px;opacity:.65;}
@media (max-width:700px){
  .hero{flex-direction:column;padding:20px;gap:14px;}
  .hero-clock{align-items:flex-start;order:-1;}
  .hero-time b{font-size:40px;}
  .hero h1{font-size:23px;}
}
@media (prefers-reduced-motion:reduce){.hero-quote-next.htmx-request svg{animation:none;}}

/* The old two-column card grid becomes a bento: a wide tile next to a narrow one. */
.pd-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense;align-items:stretch;}
.pd-grid > .pd-card{grid-column:span 4;border-radius:16px;padding-top:4px;}
.pd-grid > .pd-dsr{grid-column:span 5;}
.pd-grid > .pd-tickets{grid-column:span 7;}
.pd-grid > .pd-queue,.pd-grid > .pd-company{grid-column:span 6;}
@media (max-width:1100px){.pd-grid > .pd-card,.pd-grid > .pd-dsr,.pd-grid > .pd-tickets{grid-column:span 6;}}
@media (max-width:700px){.pd-grid > .pd-card,.pd-grid > .pd-dsr,.pd-grid > .pd-tickets,.pd-grid > .pd-queue,.pd-grid > .pd-company{grid-column:span 12;}}
.pd-grid > .pd-today,.pd-grid > .pd-attn{grid-column:1 / -1;}

.count-cell{white-space:nowrap;}
.overdue-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--red);background:var(--red-bg);border-radius:4px;padding:1px 7px;}

/* ---- My attendance ---- */
@media (min-width:1000px){
  /* Punch card on the left, the week beside it, instead of one tall column. */
  .punch{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;align-items:stretch;}
  .punch > .punch-hero{grid-column:1;}
  .punch > .punch-week{grid-column:2;display:flex;flex-direction:column;}
  .punch > .punch-warn,.punch > .punch-message{grid-column:1 / -1;}
  .punch-week .week-bars{flex:1;align-items:stretch;}
  .punch-week .week-bar{height:100%;min-height:92px;max-width:none;}
}
.punch-hero{border-radius:18px;padding:24px 26px;}
.punch-week{border-radius:18px;padding:16px 18px 14px;}
.week-hrs{font-style:normal;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.week-day.is-today .week-hrs{color:var(--accent);font-weight:650;}

.month-glance{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px 18px 12px;margin-bottom:18px;}
.month-glance-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.month-glance h2{font-size:15px;font-weight:650;margin:0;}
.month-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);}
.month-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.month-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:6px;font-size:10.5px;color:var(--muted);text-align:center;}
.mg{display:grid;place-items:center;aspect-ratio:auto;height:34px;border-radius:8px;font-size:11.5px;font-variant-numeric:tabular-nums;background:var(--panel);color:var(--muted);}
.mg b{font-weight:600;}
.mg-full{background:var(--green);color:var(--on-accent);}
.mg-part{background:color-mix(in srgb,var(--green) 38%,var(--surface));color:var(--text);}
.mg-open{background:var(--accent);color:var(--on-accent);}
.mg-stale{background:var(--orange-bg);color:var(--orange);box-shadow:inset 0 0 0 1.5px var(--orange);}
.mg-none{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);}
.mg-rest,.mg-future{background:var(--panel);color:var(--muted-2);}
.mg.is-today{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);}
.month-legend .mg-full{background:var(--green);}
.month-legend .mg-part{background:color-mix(in srgb,var(--green) 38%,var(--surface));}
.month-legend .mg-open{background:var(--accent);}
.month-legend .mg-stale{background:var(--orange-bg);box-shadow:inset 0 0 0 1.5px var(--orange);}
.month-legend .mg-none{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);}
.month-glance-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;}
@media (min-width:1000px){.month-glance-grid{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:32px;align-items:start;}}
.month-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;align-self:center;}
.month-key li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
.month-key li:last-child{border-bottom:none;}
.month-key i{width:12px;height:12px;border-radius:4px;display:block;}
.month-key b{font-variant-numeric:tabular-nums;font-size:15px;}
.month-key .mg-full{background:var(--green);}
.month-key .mg-part{background:color-mix(in srgb,var(--green) 38%,var(--surface));}
.month-key .mg-open{background:var(--accent);}
.month-key .mg-stale{background:var(--orange-bg);box-shadow:inset 0 0 0 1.5px var(--orange);}
.month-key .mg-none{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);}

.day-bar{display:block;width:84px;height:4px;border-radius:99px;background:var(--line);margin-top:5px;overflow:hidden;}
.day-bar i{display:block;height:100%;border-radius:99px;background:var(--green);}
.history-card table td{padding-top:11px;padding-bottom:11px;}
.history-card table tbody tr:hover td{background:var(--panel);}
@media (max-width:640px){.mg{height:30px;}.month-legend{gap:8px 12px;}}

/* ---- What's new dialog ---- */
.changelog{max-width:740px;border-radius:18px;overflow:hidden;}
.changelog-head{align-items:center;padding:20px 24px;border-bottom:none;color:var(--on-accent);background:radial-gradient(120% 160% at 100% 0%,var(--blue-500) 0%,transparent 60%),linear-gradient(135deg,var(--navy),var(--navy-2));}
.changelog-head h3{font-size:18px;font-weight:650;letter-spacing:-.01em;margin:0 0 3px;color:inherit;}
.changelog-head .changelog-ver{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:99px;font-size:13px;font-weight:650;background:rgba(255,255,255,.16);color:inherit;}
.changelog-head #pq-changelog-sub{font-size:12.5px;color:rgba(255,255,255,.72);margin:0;padding:0;}
.changelog-close{color:rgba(255,255,255,.75);font-size:24px;}
.changelog-close:hover{color:var(--on-accent);}
.changelog-filters{padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--line);}
.changelog-chip{background:var(--surface);}
.changelog-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted-2);}
.changelog-chip[data-filter="all"]::before{display:none;}
.cl-chip-added::before{background:var(--blue);}
.cl-chip-changed::before{background:var(--green);}
.cl-chip-fixed::before{background:var(--orange);}
.cl-chip-security::before{background:var(--red);}
.changelog-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
.changelog-body{padding:6px 24px 24px;}
.changelog-body section.changelog-rel{border-bottom:none;padding:14px 0 6px;}

.changelog-rel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.changelog-rel-head h4{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:0;flex:1 1 220px;}
.changelog-tag{font-size:12px;font-weight:650;padding:2px 10px;border-radius:99px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-strong);font-variant-numeric:tabular-nums;}
.changelog-tag.is-unreleased{background:var(--panel);border-color:var(--border);color:var(--muted);font-style:normal;}
.changelog-date{font-size:12px;color:var(--muted);}
.changelog-summary{margin:0 0 6px;padding:12px 14px;border-radius:12px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:14px;line-height:1.5;color:var(--text);}

.changelog h5.cl-sec{margin:20px 0 8px;font-size:12px;letter-spacing:.04em;}
.cl-sec-label{padding:3px 10px;border-radius:99px;font-weight:650;background:var(--panel);color:var(--muted);}
.cl-sec-added .cl-sec-label{background:var(--blue-bg);color:var(--accent-strong);}
.cl-sec-changed .cl-sec-label,.cl-sec-improved .cl-sec-label{background:var(--green-bg);color:var(--green);}
.cl-sec-fixed .cl-sec-label{background:var(--orange-bg);color:var(--orange);}
.cl-sec-security .cl-sec-label{background:var(--red-bg);color:var(--red);}
.cl-sec-known-issues .cl-sec-label{background:var(--gray-bg);color:var(--muted);}

.changelog ul{padding-left:0;list-style:none;gap:0;}
.changelog-body ul > li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--muted);}
.changelog-body ul > li:last-child{border-bottom:none;}
.changelog-body ul > li::before{content:"";position:absolute;left:3px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--muted-2);}
.cl-sec-added + ul > li::before{background:var(--blue);}
.cl-sec-changed + ul > li::before,.cl-sec-improved + ul > li::before{background:var(--green);}
.cl-sec-fixed + ul > li::before{background:var(--orange);}
.cl-sec-security + ul > li::before{background:var(--red);}
.changelog-body ul > li > strong.cl-lead{display:block;color:var(--text);font-weight:650;font-size:14px;margin-bottom:1px;}
.changelog-body ul.changelog-sub{margin:6px 0 0;}
.changelog-body ul.changelog-sub > li{padding:3px 0 3px 14px;border:none;font-size:12.5px;}
.changelog-body ul.changelog-sub > li::before{top:11px;width:5px;height:5px;}

.changelog-older{margin:18px 0 8px;border-radius:12px;padding:11px 14px;font-weight:600;}
details.changelog-rel{border:1px solid var(--border);border-radius:14px;margin:10px 0;background:var(--surface);}
details.changelog-rel > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;}
details.changelog-rel > summary::-webkit-details-marker{display:none;}
details.changelog-rel > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 3px 6px;flex:none;transition:transform .15s;}
details.changelog-rel[open] > summary::after{transform:rotate(-135deg);margin-bottom:-3px;}
details.changelog-rel .changelog-rel-head{margin:0;flex:1;}
details.changelog-rel .changelog-rel-head h4{font-size:14px;}
details.changelog-rel:hover{border-color:var(--border-strong);}
.changelog-n{font-size:12px;color:var(--muted);white-space:nowrap;}
.changelog-rel-body{padding:2px 16px 14px;}
.changelog-rel-body .changelog-summary{margin-top:2px;}
@media (max-width:560px){
  .changelog-head{padding:16px;}
  .changelog-body,.changelog-filters{padding-left:16px;padding-right:16px;}
  .changelog-n{display:none;}
}


/* ---- Punch panel: plain time, no ring ---- */
.punch-big{display:flex;flex-direction:column;gap:4px;flex:none;min-width:0;padding-right:8px;}
.punch-big-num{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);}
.punch-big-clock{color:var(--accent);}
.punch-state-open .punch-big-num{color:var(--green);}
.punch-big-cap{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.punch-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px;}
.punch-bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width 1s linear;}
.punch-state{gap:28px;}
@media (max-width:640px){.punch-big-num{font-size:36px;}}
.punch-state{flex-wrap:wrap;}
.punch-state .punch-actions{flex:1 1 100%;}
.punch-state .punch-actions form{width:100%;}
.punch-state .punch-btn{width:100%;justify-content:center;}

/* ---------- Home bento ---------- */
.pd-grid > .bn-3{grid-column:span 3;}
.pd-grid > .bn-4{grid-column:span 4;}
.pd-grid > .bn-5{grid-column:span 5;}
.pd-grid > .bn-8{grid-column:span 8;}
.pd-grid > .pd-today,.pd-grid > .pd-attn{grid-column:1 / -1;}
.pd-grid > .bn-6{grid-column:span 6;}
.pd-grid > .pd-today.bn-6{grid-column:span 6;}
@media (max-width:1100px){.pd-grid > .bn-3,.pd-grid > .bn-4,.pd-grid > .bn-5,.pd-grid > .bn-8,.pd-grid > .pd-today.bn-6{grid-column:span 6;}.pd-grid > .pd-today.bn-6{grid-column:1 / -1;}}
@media (max-width:700px){.pd-grid > .bn-3,.pd-grid > .bn-4,.pd-grid > .bn-5,.pd-grid > .bn-6,.pd-grid > .bn-8,.pd-grid > .pd-today.bn-6{grid-column:span 12;}}
.pd-grid > .pd-attn{grid-row:2;}
.pd-pay{align-content:start;}
.ch-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:150px;padding:6px 0 10px;}
.ch-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.ch-val{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ch-track{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;border-radius:8px;background:var(--panel);overflow:hidden;}
.ch-track i{display:block;width:100%;border-radius:8px;background:var(--wave);min-height:0;transition:height .4s ease;}
.ch-track i.met{background:var(--accent);}
.ch-lab{font-size:11.5px;color:var(--muted);}
.ch-col.is-today .ch-lab{color:var(--accent);font-weight:700;}
.ch-col.is-future .ch-track{opacity:.45;}
.ch-donut-wrap{display:flex;align-items:center;gap:18px;padding:6px 0 12px;flex-wrap:wrap;}
.ch-donut{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.ch-donut span{width:70px;height:70px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.ch-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;flex:1;min-width:110px;}
.ch-legend li{display:flex;align-items:center;gap:8px;}
.ch-legend i{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.ch-legend b{margin-left:auto;font-variant-numeric:tabular-nums;}
.ch-spark{display:flex;align-items:flex-end;gap:3px;height:92px;padding:6px 0;}
.ch-spark i{flex:1;border-radius:3px;background:var(--line);min-height:2px;}
.ch-spark i.on{background:var(--red);opacity:.8;}
.ch-big{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:4px 0 8px;font-variant-numeric:tabular-nums;}
.ch-big small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;}

/* ---------- Products ---------- */
.pl-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.pl-tile{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(28,117,188,.06);}
.pl-tile .v{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pl-tile .l{font-size:12.5px;color:var(--muted);}
.pl-tile.warn .v{color:var(--orange);}
.pl-tile.bad .v{color:var(--red);}
.pl-tile.good .v{color:var(--green);}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin-bottom:24px;}
.pl-card{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 3px rgba(28,117,188,.06);transition:box-shadow .15s ease,transform .15s ease;}
.pl-card:hover{box-shadow:0 8px 24px rgba(28,117,188,.12);transform:translateY(-1px);}
.pl-card header{display:flex;align-items:center;gap:12px;}
.pl-mark{width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;flex-shrink:0;}
.pl-name{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3;}
.pl-name a{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-name a:hover{color:var(--accent);}
.pl-name span{font-size:12px;color:var(--muted);}
.pl-name b{font-weight:650;color:var(--accent-strong);}
.pl-health{font-size:11px;font-weight:650;padding:3px 9px;border-radius:99px;background:var(--green-bg);color:var(--green);}
.pl-health.warning,.pl-health.degraded{background:var(--orange-bg);color:var(--orange);}
.pl-health.critical,.pl-health.unhealthy{background:var(--red-bg);color:var(--red);}
.pl-desc{margin:0;font-size:13px;color:var(--muted);min-height:2.6em;}
.pl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pl-stats > div{display:flex;flex-direction:column;align-items:flex-start;}
.pl-stats .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;}
.pl-stats .v.is-zero{color:var(--muted-2);font-weight:600;}
.pl-stats .l{font-size:11px;color:var(--muted);}
.pl-spark{display:flex;align-items:flex-end;gap:12px;}
.pl-spark-bars{display:flex;align-items:flex-end;gap:3px;height:30px;flex:1;max-width:120px;}
.pl-spark-bars i{flex:1;background:var(--wave);border-radius:2px;}
.pl-spark-l{font-size:11.5px;color:var(--muted);}
.pl-card footer{display:flex;align-items:center;gap:8px;margin-top:auto;}
.pl-tools{margin-left:auto;display:flex;gap:2px;align-items:center;}
@media (max-width:760px){.pl-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Errors list: the title column used to shrink to a few letters on a small laptop, so titles broke mid-word.
 * It now keeps a readable width and the table scrolls sideways instead. */
.errors-table{min-width:780px;}
.errors-table td:first-child{min-width:260px;}
.errors-table .clamp-2{overflow-wrap:break-word;word-break:normal;font-size:14px;line-height:1.4;}
.errors-table .sub{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted-2);}
.errors-table tbody td{vertical-align:top;padding:13px 10px;}
@media (max-width:1100px){.errors-table .spark{display:none;}}
.errors-wrap{overflow-x:auto;max-width:100%;}

/* Error detail: main column + 280px side column. minmax(0,1fr) lets wide stack traces scroll instead of pushing the side column off screen. */
.error-detail-grid{grid-template-columns:minmax(0,1fr) 280px;gap:32px;}
.error-detail-grid>*{min-width:0;}
@media (max-width:1100px){.error-detail-grid{grid-template-columns:minmax(0,1fr);gap:20px;}}

/* DSR sheet, simplified: one summary strip instead of three tiles, no time column, and
 * product/category tucked behind "More". */
.dsr-summary{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:16px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.dsr-summary-main{flex:1;min-width:220px;}
.dsr-summary .dsr-goal{margin-top:8px;}
.dsr-summary-text{margin:0;font-size:13px;color:var(--muted);}
.dsr-summary-text b{color:var(--text);}
.dsr-tag.mcp{background:var(--purple-bg);color:var(--purple);}

/* DSR work log: a table laid out with CSS grid so each row can be its own form. */
/* No overflow on a wide screen: a scroll box also clips vertically, which cut off the dropdown menus
 * of the last rows. Only on a narrow screen does the table scroll sideways, and then it keeps room
 * under the last row for a menu to open. */
/* position:relative contains the absolutely placed .sr-only labels; without it one of them sat outside the
 * scroll box and widened the whole page on a phone. */
.dsr-grid-wrap{overflow:visible;position:relative;}
@media (max-width:1100px){.dsr-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-height:340px;}}
.dsr-grid{min-width:880px;font-size:13px;border-top:1px solid var(--border);}
.dsr-row{display:grid;grid-template-columns:minmax(260px,1fr) 150px 170px 96px 130px 42px;align-items:stretch;border-bottom:1px solid var(--border);margin:0;}
.dsr-row .dsr-c{padding:6px 8px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.dsr-row .dsr-c:last-child{border-right:none;}
.dsr-head{background:var(--panel);}
.dsr-head .dsr-c{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px;}
#dsr-table-body .dsr-row:nth-child(even){background:var(--panel);}
#dsr-table-body .dsr-row:hover{background:var(--accent-soft);}
.dsr-c-time{align-items:stretch;}
.dsr-c-act{align-items:center;}
.dsr-row .dd{display:flex;width:100%;}
.dsr-row .dd-wrap{width:100%;}
.dsr-row .dd-btn{max-width:none;width:100%;height:30px;}
.dsr-row .num-input{text-align:left;font-variant-numeric:tabular-nums;}
.dsr-ro{color:var(--text);}
.dsr-hours-ro{font-weight:700;font-variant-numeric:tabular-nums;padding:0 8px;}
.dsr-line .dsr-title,.dsr-line .dsr-title-input{flex:1 1 auto;min-width:0;}
.dsr-note{font-size:12px;color:var(--muted);padding:3px 8px;}
.dsr-note-text{padding:0 8px;}
.dsr-total{background:var(--panel);border-bottom:none;border-top:2px solid var(--border);font-weight:600;}
.dsr-total .dsr-c-time b{padding:0 8px;font-variant-numeric:tabular-nums;}
#dsr-table-body .dsr-empty{display:block;grid-column:1/-1;}
/* The grid is 880px wide and scrolls sideways on a phone; keep the empty message in view. */
@media (max-width:1100px){#dsr-table-body .dsr-empty{position:sticky;left:0;width:min(100vw - 64px,100%);padding:18px 16px;}}
.dsr-composer .dc-go{display:flex;}
a.dsr-title:hover{color:var(--accent);}
.dsr-total .dsr-c:first-child{flex-direction:row;align-items:center;gap:6px;}
.dsr-composer .dc-go{padding-top:21px;}
.dsr-total .dsr-c:first-child{justify-content:flex-start;}

/* What can be edited: a visible box. What cannot: muted text. */
.dsr-row .sheet-input{border:1px solid var(--border);background:var(--surface);}
.dsr-row .sheet-input:hover{border-color:var(--border-strong);}
.dsr-row .sheet-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg);}
.dsr-row .dsr-note.sheet-input{border-style:dashed;background:transparent;}
.dsr-row .dsr-note.sheet-input:focus{border-style:solid;background:var(--surface);}
.dsr-ro,.dsr-note-text{color:var(--muted);}
.dsr-hours-ro{color:var(--text);}
a.dsr-link::after{content:" \2197";font-size:11px;color:var(--muted);}
.dsr-hint{display:flex;align-items:center;gap:6px;margin:0;padding:8px 16px;font-size:12px;color:var(--muted);background:var(--accent-soft);border-bottom:1px solid var(--accent-line);}
.dsr-total{border-radius:0 0 10px 10px;}

/* ---- Home: to-do card (befui look: slate border, blue ring, 8px corners) ---- */
.td-add{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;align-items:center;}
.td-input{height:38px;padding:0 12px;border:1px solid var(--bf-border);border-radius:var(--bf-radius);background:var(--surface);font:inherit;font-size:14px;color:var(--text);outline:none;transition:box-shadow .12s,border-color .12s;}
.td-input:focus{border-color:var(--bf-ring);box-shadow:0 0 0 3px rgba(59,130,246,.18);}
.td-add .td-text{flex:1 1 180px;min-width:0;}
.td-add .td-due{width:150px;flex-shrink:0;}
.td-add .dd-btn{height:38px;border-radius:var(--bf-radius);border-color:var(--bf-border);}
.td-btn{height:38px;padding:0 16px;border:0;border-radius:var(--bf-radius);background:var(--bf-primary);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:filter .12s;}
.td-btn:hover{filter:brightness(1.08);}
.td-progress{height:6px;border-radius:99px;background:var(--bf-border);overflow:hidden;}
.td-progress span{display:block;height:100%;background:var(--bf-primary);border-radius:99px;transition:width .25s ease;}
.td-count{font-size:13px;color:var(--bf-muted-fg);margin:8px 0 6px;}
.td-link{border:0;background:none;padding:0;font:inherit;color:var(--bf-primary);cursor:pointer;}
.td-link:hover{text-decoration:underline;}
.td-note{font-size:12px;color:var(--bf-muted-fg);margin:10px 0 2px;}
.td-list{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto;}
.td-item{display:flex;align-items:center;gap:10px;padding:11px 10px;margin-bottom:6px;border:1px solid var(--bf-border);border-radius:var(--bf-radius);background:var(--surface);font-size:15px;transition:background .12s,border-color .12s;}
.td-item:hover{background:var(--bf-muted);}
.td-item.is-late{border-color:var(--bf-destructive);background:var(--bf-destructive-bg);}
.td-item.is-late .td-label{color:var(--bf-destructive);font-weight:500;}
.td-check{width:20px;height:20px;flex-shrink:0;border-radius:6px;border:1.5px solid var(--bf-border);background:var(--surface);cursor:pointer;padding:0;position:relative;transition:all .12s ease;}
.td-check:hover{border-color:var(--bf-primary);}
.is-late .td-check{border-color:var(--bf-destructive);}
.is-done .td-check{background:var(--bf-primary);border-color:var(--bf-primary);}
.is-done .td-check::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.td-label{flex:1;min-width:0;overflow-wrap:anywhere;}
.is-done .td-label{text-decoration:line-through;color:var(--bf-muted-fg);}
.is-done{opacity:.75;}
.td-badge{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;white-space:nowrap;flex-shrink:0;border:1px solid transparent;}
.td-badge.p3{background:var(--red-bg);color:var(--red);}
.td-badge.p2{background:var(--orange-bg);color:var(--orange);}
.td-badge.p1{background:var(--bf-muted);color:var(--bf-muted-fg);border-color:var(--bf-border);}
.is-done .td-badge{display:none;}
.td-chip{font-size:12px;padding:2px 9px;border-radius:99px;background:var(--bf-muted);color:var(--bf-muted-fg);border:1px solid var(--bf-border);white-space:nowrap;flex-shrink:0;}
.td-chip.is-today{background:var(--blue-bg);color:var(--bf-primary);border-color:transparent;}
.td-chip.is-late{background:var(--bf-destructive);color:#fff;border-color:transparent;font-weight:500;}
.td-del{border:0;background:none;color:var(--bf-muted-fg);font-size:18px;line-height:1;cursor:pointer;opacity:0;padding:0 2px;transition:opacity .12s;}
.td-item:hover .td-del,.td-del:focus-visible{opacity:1;}
.td-del:hover{color:var(--bf-destructive);}
@media (hover:none){.td-del{opacity:1;}}
.td-empty{color:var(--bf-muted-fg);font-size:14px;padding:28px 4px;text-align:center;}
.pd-due-list{list-style:none;margin:0;padding:0;}
.pd-due-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.pd-due-list li:last-child{border-bottom:0;}
.pd-due-list a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;}
.pd-due-list a:hover{color:var(--blue);}

/* ---- Home: at-a-glance numbers ---- */
.pd-kpis{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.pd-kpi{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;color:inherit;text-decoration:none;transition:border-color .12s,transform .12s;}
.pd-kpi:hover{border-color:var(--accent);transform:translateY(-1px);}
.pd-kpi .v{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;}
.pd-kpi .l{font-size:13px;font-weight:600;}
.pd-kpi .m{font-size:12px;color:var(--muted);}
.pd-kpi.is-alert{border-color:var(--red);}
.pd-kpi.is-alert .v{color:var(--red);}
@media (max-width:900px){.pd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.td-item.is-late .td-badge{background:#fff;}

/* ───────── Home (new look) ───────── */
.hm{display:grid;gap:18px;max-width:1280px;margin:0 auto;}
.hm-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 24px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(90deg,#e0f2fe 0%,var(--surface) 55%,#dbeafe 100%);transition:background .6s;}
.hm-hero.is-afternoon{background:linear-gradient(90deg,#dbeafe 0%,var(--surface) 55%,#e0e7ff 100%);}
.hm-hero.is-evening{background:linear-gradient(90deg,#e0e7ff 0%,var(--surface) 50%,#ede9fe 100%);}
.hm-hero.is-night{background:linear-gradient(90deg,#e0e7ff 0%,#e2e8f0 55%,#c7d2fe 100%);}
html.dark .hm-hero{background:linear-gradient(90deg,#0e2a44 0%,var(--surface) 60%,#0e2236 100%);}
html.dark .hm-hero.is-afternoon{background:linear-gradient(90deg,#10233f 0%,var(--surface) 60%,#161f45 100%);}
html.dark .hm-hero.is-evening{background:linear-gradient(90deg,#1c1f4a 0%,var(--surface) 55%,#2a1a4a 100%);}
html.dark .hm-hero.is-night{background:linear-gradient(90deg,#1a1f45 0%,#111a2b 55%,#1e2554 100%);}
.hm-hero-art{position:absolute;right:-14px;top:-18px;opacity:.1;color:var(--text);pointer-events:none;animation:hmFloat 6s ease-in-out infinite;}
.hm-hero-art .ic{width:128px;height:128px;stroke-width:1.5;}
@keyframes hmFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(6px) rotate(4deg)}}
.hm-hero-main{position:relative;min-width:0;}
.hm-hero-date{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.hm-hero h1{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:24px;font-weight:650;letter-spacing:-.02em;color:var(--text);}
.hm-hero-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--accent);box-shadow:var(--shadow-sm);transition:transform .3s;}
.hm-hero-badge:hover{transform:scale(1.1);}
.hm-hero-badge .ic{width:19px;height:19px;}
.hm-hero-line{min-height:20px;margin-top:4px;font-size:13.5px;color:var(--muted);}
.hm-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:middle;background:currentColor;animation:hmBlink 1s steps(2) infinite;}
@keyframes hmBlink{50%{opacity:0}}
.hm-hero-actions{position:relative;display:flex;gap:8px;flex-wrap:wrap;}
.hm-note{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);font-size:13.5px;}
.hm-note.is-info{background:var(--blue-bg);border-color:color-mix(in srgb,var(--blue) 30%,transparent);}
.hm-note.is-warn{background:var(--accent-soft);border-color:var(--accent-line);}
.hm-note a{font-weight:600;margin-left:6px;text-decoration:underline;}
.hm-attn{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:-4px 0 14px;}
.hm-attn a:hover{color:var(--text);}
.hm-attn b{color:var(--text);}
.hm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.hm-kpi{display:block;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:box-shadow .2s,border-color .2s,transform .2s;}
.hm-kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.hm-kpi .v{display:block;font-size:24px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.hm-kpi .l{display:block;font-size:13px;color:var(--muted);}
.hm-kpi.is-alert{border-color:color-mix(in srgb,var(--red) 40%,transparent);}
.hm-kpi.is-alert .v{color:var(--red);}
.hm-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:18px;}
.hm-side{display:grid;gap:16px;}
.hm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;}
.hm-card h2{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text);}
.hm-card h2 .ic{width:15px;height:15px;color:var(--muted);}
.hm-sub{font-size:12.5px;color:var(--muted);}
.hm-sub-inline{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:auto;}
.hm-tabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:12px;background:var(--panel);border-radius:var(--radius);}
.hm-tabs button{border:0;background:transparent;padding:5px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;}
.hm-tabs button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.hm-rows{list-style:none;}
.hm-rows li+li{border-top:1px solid var(--line);}
.hm-rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;font-size:13.5px;}
.hm-rows a:hover .t{text-decoration:underline;}
.hm-rows li.is-plain{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--space-2) 2px;font-size:13.5px;}
.hm-rows .t{font-weight:500;min-width:0;}
.hm-rows .m{font-size:12px;color:var(--muted);white-space:nowrap;}
.chip-d{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;border:1px solid var(--border);color:var(--muted);white-space:nowrap;}
.chip-d.is-late{background:var(--red-bg);color:var(--red);border-color:transparent;}
.hm-empty{padding:26px 0;text-align:center;font-size:13.5px;color:var(--muted);}
.hm-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;color:var(--accent);}
.hm-more:hover{text-decoration:underline;}
.hm-team .hm-rows{margin-top:var(--space-2);}
.hm-today-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hm-today .hm-sub{margin-top:2px;}
.hm-foot{margin-top:12px;font-size:12px;color:var(--muted);}
.hm-foot b{color:var(--text);}
.hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.hm-tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.hm-bars{display:flex;gap:8px;height:110px;align-items:stretch;}
.hm-bar{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;}
.hm-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;border-radius:6px;background:var(--panel);overflow:hidden;}
.hm-bar-track i{display:block;width:100%;min-height:2px;border-radius:6px;background:var(--accent);opacity:.75;transition:height .6s cubic-bezier(.22,1,.36,1);}
.hm-bar.is-met .hm-bar-track i{background:var(--green);opacity:1;}
.hm-bar.is-future{opacity:.45;}
.hm-bar-lab{font-size:11.5px;color:var(--muted);}
.hm-bar.is-today .hm-bar-lab{color:var(--text);font-weight:600;}
.hm-leave{list-style:none;display:grid;gap:12px;}
.hm-leave .r{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;}
.hm-meter{display:block;height:6px;border-radius:99px;background:var(--panel);overflow:hidden;}
.hm-meter i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.hm-meter.is-pending i{background:var(--purple);}
.hm-big{font-size:26px;font-weight:650;letter-spacing:-.02em;}
.hm-big small{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px;}
@media (max-width:960px){.hm-grid{grid-template-columns:1fr;}.hm-tiles{grid-template-columns:1fr;}.hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ───────── Ticket page: one column, properties in a strip ───────── */
.td-page{max-width:1240px;margin:0;display:grid;gap:var(--space-5);}
.td-page .pg-head{margin-bottom:0;}
.td-props{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);}
.td-prop{display:grid;gap:6px;align-content:start;min-width:0;}
.td-prop .k{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.td-prop .dd,.td-prop .assignee-dd{width:100%;}
.td-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.td-sec-head h2{font-size:14px;font-weight:600;}
@media (max-width:820px){.td-props{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.td-props{grid-template-columns:1fr;}}

/* ───────── Notifications page ───────── */
.nt-day{position:sticky;top:0;z-index:1;padding:7px 18px;background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.nt-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);transition:background .15s;}
.nt-row:hover{background:var(--panel);}
.nt-row.is-unread{background:color-mix(in srgb,var(--accent) 6%,var(--surface));}
.nt-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--panel);color:var(--muted);}
.nt-row.is-unread .nt-ic{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);}
.nt-ic .ic{width:15px;height:15px;}
.nt-text{flex:1;min-width:0;display:grid;gap:2px;font-size:13.5px;}
.nt-text strong{font-weight:600;}
.nt-text span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nt-meta{display:grid;justify-items:end;gap:4px;flex:none;font-size:12px;color:var(--muted);}

/* ───────── Profile and team member pages ───────── */
.pf{max-width:960px;margin:0 auto;display:grid;gap:16px;}
.pf-banner{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),var(--accent-soft) 45%,transparent);}
.pf-avatar{width:64px;height:64px;font-size:24px;font-weight:600;}
.pf-who{flex:1;min-width:0;}
.pf-who h1{font-size:22px;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-who p{margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);}
.pf-who .bdg .ic{width:12px;height:12px;}
.pf-dates{display:grid;grid-template-columns:auto auto;gap:3px 18px;font-size:13px;}
.pf-dates dt{color:var(--muted);}.pf-dates dd{text-align:right;font-weight:500;}
.pf-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.pf-stats>div{background:var(--surface);padding:14px 16px;}
.pf-stats .v{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;}
.pf-stats .l{font-size:12px;color:var(--muted);}
.pf-tabs{justify-self:start;}
.pf-pane{display:grid;gap:14px;width:100%;margin-inline:auto;}
.pf-card{padding:18px 20px;}
.pf-card h2{font-size:14.5px;font-weight:600;margin-bottom:8px;}
.pf-mile{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;}
.pf-mile .ic{width:16px;height:16px;color:var(--orange);}
.pf-act{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;}
.pf-act time{color:var(--muted);font-size:12px;white-space:nowrap;}
.pf-form{display:grid;gap:16px;}
.pf-form .sub{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45;}
.pf-save{display:flex;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--line);}
.pf-switches{list-style:none;}
.pf-switches li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;}
.sw{position:relative;display:inline-block;width:38px;height:22px;flex:none;}
.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;}
.sw-track{position:absolute;inset:0;border-radius:99px;background:var(--border-strong);transition:background .2s;pointer-events:none;}
.sw-track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s;}
.sw input:checked+.sw-track{background:var(--accent);}
.sw input:checked+.sw-track::after{transform:translateX(16px);}
.sw input:disabled{cursor:not-allowed}.sw input:disabled+.sw-track{opacity:.5;}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.sc-grid h3{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.sc-grid ul{list-style:none;display:grid;gap:7px;}
.sc-grid li{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;}
.sc-grid .keys{display:flex;align-items:center;gap:4px;}
.sc-grid .keys em{font-size:10px;font-style:normal;color:var(--muted);}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:var(--panel);font:500 10.5px ui-monospace,Menlo,monospace;color:var(--muted);}
@media (max-width:760px){.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.hm-mile{list-style:none;margin-top:8px;display:grid;gap:3px;}
.hm-mile li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;}
.hm-mile .ic{width:15px;height:15px;color:var(--accent);}
.hm-today .bdg .ic{width:12px;height:12px;}

/* ───────── The older class names, brought up to the new look ───────── */
.head{align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.head h1{font-size:24px;font-weight:650;letter-spacing:-.02em;}
.head .count{font-size:14px;font-weight:400;color:var(--muted);margin-left:10px;letter-spacing:0;}
.card{border-radius:var(--radius-lg);padding:20px;}
.pill{border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:500;}
.main{padding:24px 32px 40px;}
.breadcrumbs{font-size:12.5px;}
.tabs{max-width:100%;overflow-x:auto;display:inline-flex;gap:2px;padding:3px;margin-bottom:16px;border:0;background:var(--panel);border-radius:var(--radius);flex-wrap:wrap;}
.tab{margin:0;padding:5px 12px;top:0;border:0;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;}
.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);border:0;}
.search-wrap input{min-height:36px;padding:7px 11px 7px 34px;border:1px solid var(--border-strong);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s;}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
.filter-select,.sort-select{min-height:36px;border:1px solid var(--border-strong);border-radius:var(--radius);}
.filter-select:focus,.sort-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent);}

/* ───────── Board: a card settles in, shows a peek on hover, and can shrink to the essentials ───────── */
@keyframes cardDrop{0%{opacity:0;transform:scale(.94) translateY(-6px)}60%{transform:scale(1.02)}100%{opacity:1;transform:none}}
.kanban-card.dragging{box-shadow:var(--shadow-md);transform:rotate(1.5deg) scale(.97);opacity:.5;}
.kanban-card .card-title a[data-peek]{position:relative;}
.kanban-card .card-title a[data-peek]::after{content:attr(data-peek);position:absolute;left:100%;top:-6px;margin-left:12px;z-index:40;width:210px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);font-size:12px;font-weight:400;line-height:1.55;white-space:pre-line;opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity .15s .35s,transform .15s .35s;}
.kanban-card .card-title a[data-peek]:hover::after{opacity:1;transform:none;}
@media (hover:none){.kanban-card .card-title a[data-peek]::after{display:none;}}
body.board-compact .kanban-card .card-meta,body.board-compact .kanban-card .card-footer .card-deadline{display:none;}
body.board-compact .kanban-card{padding:10px 12px;}
body.board-compact .kanban-card .card-title{margin-bottom:4px;}
@media (prefers-reduced-motion:reduce){.kanban-card{animation:none}}
.btn.is-on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong);}

/* Long forms keep Save and Cancel in reach. */
.form-actions{position:sticky;bottom:0;z-index:5;margin-inline:-10px;padding:12px 10px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);}

.td-timeline{list-style:none;position:relative;display:grid;gap:10px;padding-left:20px;margin:0 0 6px;}
.td-timeline::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--border);}
.td-timeline li{position:relative;font-size:13px;color:var(--muted);}
.td-timeline .dot{position:absolute;left:-20px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--border-strong);box-shadow:0 0 0 3px var(--bg);}
.td-timeline b{font-weight:500;color:var(--text);}
.td-timeline time{margin-left:8px;font-size:11.5px;}

/* Rows of stat cards become one divided sheet: less box, same numbers. */
.grid-4:has(> .stat-card),.grid-3:has(> .stat-card),.pay-stats:has(> .stat),.att-stats{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.grid-4 > .stat-card,.grid-3 > .stat-card,.pay-stats > .stat{border:0;border-radius:0;box-shadow:none;}
.stat-card .stat-icon{display:none;}
.stat-card .flex-between.mb-4{margin-bottom:6px;}
.stat-card .stat-label{font-size:12.5px;color:var(--muted);}

/* Reports: the numbers as one divided sheet, the tiles below as divided sections of one sheet. */
.rk-row{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;}
.rk-row>.rk{border:0;border-radius:0;box-shadow:none;}
.bento{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.bento>.tile{border:0;border-radius:0;box-shadow:none;}

/* befui's hover redraw: each stroke draws itself in turn */
@keyframes iconDraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.icon-hover:hover .icon-draw :is(path,circle,rect){animation:iconDraw var(--icon-ms,.7s) ease both;animation-delay:calc(var(--i,0) * 90ms);}
@media (prefers-reduced-motion:reduce){.icon-hover:hover .icon-draw :is(path,circle,rect){animation:none}}


/* ───────── Home as a bento grid ─────────
   One 12-column grid; the wrappers from the markup dissolve so every card is a cell. Cards stretch to the row,
   so an empty card still fills its cell instead of leaving a hole, and the to-do list scrolls inside its card. */
.hm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense;}
.hm-bento .hm-kpis,.hm-bento .hm-grid,.hm-bento .hm-side,.hm-bento .hm-tiles{display:contents;}
.hm-bento .hm-kpi{grid-column:span 3;}
.hm-bento .hm-work{grid-column:span 8;grid-row:span 2;}
.hm-bento .hm-today,.hm-bento .hm-team,.hm-bento #todo-card{grid-column:span 4;}
.hm-bento .hm-tiles>.hm-card{grid-column:span 4;}
.hm-bento .hm-card{display:flex;flex-direction:column;min-width:0;}
.hm-bento .hm-work>div:not(.hm-tabs){flex:1;display:flex;flex-direction:column;}
.hm-bento .hm-empty{flex:1;display:grid;place-content:center;gap:4px;padding:30px 0;}
.hm-bento #todo-list{flex:1;display:flex;flex-direction:column;min-height:0;}
.hm-bento .td-list{flex:1;max-height:280px;}
.hm-bento .td-add{margin-top:10px;}
.hm-bento .td-add .td-text{flex:1 1 100%;}
.hm-bento .td-add .td-due{flex:1 1 130px;width:auto;min-width:0;}
.hm-bento .td-add .td-btn{margin-left:auto;}
.hm-bento .td-empty{flex:1;display:grid;place-content:center;padding:20px 8px;}
@media (max-width:1180px){.hm-bento .hm-work{grid-column:span 12;grid-row:auto;}.hm-bento .hm-today,.hm-bento #todo-card{grid-column:span 6;}.hm-bento .hm-tiles>.hm-card{grid-column:span 6;}.hm-bento .hm-tiles>.hm-card:last-child{grid-column:span 12;}}
@media (max-width:720px){.hm-bento .hm-kpi{grid-column:span 6;}.hm-bento .hm-today,.hm-bento #todo-card,.hm-bento .hm-tiles>.hm-card{grid-column:span 12;}}

/* ───────── Attendance stat tiles: separate cards, icon beside the number ───────── */
.att-stats{gap:12px;background:none;border:0;border-radius:0;overflow:visible;}
.att-stats>.kpi{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i n" "i l";column-gap:12px;row-gap:0;align-items:center;padding:14px 16px;}
.att-stats .kpi-icon{grid-area:i;width:38px;height:38px;margin:0;}
.att-stats .kpi-num{grid-area:n;font-size:24px;}
.att-stats .kpi-label{grid-area:l;line-height:1.25;font-size:12px;}
@media (max-width:1100px){.team-att .att-stats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.team-att .att-stats,.att-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* No yellow or amber: leave is violet, warnings are red or blue. */
.kpi-orange .kpi-icon{background:var(--purple-bg);color:var(--purple);}
.kpi-orange .kpi-num{color:var(--text);}
.me-card.me-leave{border-left-color:var(--purple);}
.dot.is-leave{background:var(--purple);}
.stale-card{border-color:var(--red);}


/* ───────── Projects: board, journey, lifecycle page, plan form ───────── */
.pj-board{display:grid;grid-template-columns:repeat(9,minmax(240px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start;}
.pj-col{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);min-height:160px;transition:opacity .15s,border-color .15s,background .15s;position:relative;}
.pj-col header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px;font-size:13px;font-weight:600;}
.pj-count{font-size:12px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:0 8px;}
.pj-cards{display:grid;gap:8px;}
.pj-card{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:grab;box-shadow:var(--shadow-sm);display:grid;gap:7px;}
.pj-card.is-dragging{opacity:.4;}
.pj-title{font-weight:600;font-size:14px;color:var(--text);}
.pj-title:hover{color:var(--accent);}
.pj-meta{display:flex;gap:12px;font-size:12px;color:var(--muted);}
.pj-meta span{display:inline-flex;align-items:center;gap:4px;}.pj-meta .ic{width:13px;height:13px;}
.pj-badges{display:flex;gap:6px;flex-wrap:wrap;}.pj-badges:empty{display:none;}
.pj-pod{display:flex;}.pj-pod .kt-av+.kt-av{margin-left:-6px;}
.kt-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;border:2px solid var(--surface);flex:none;}
.kt-av.more{background:var(--panel);color:var(--muted);}
.pj-empty{margin:0;padding:12px 4px;font-size:12.5px;color:var(--muted);text-align:center;}
.pj-add .form-input{height:34px;font-size:13px;background:transparent;border-style:dashed;}
.pj-col.is-over{border-color:var(--accent);background:var(--accent-soft);}
.pj-col.is-off{opacity:.45;background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--border) 60%,transparent) 8px 9px);}
.pj-col.is-off::after{content:attr(data-off-text);position:absolute;inset:44px 10px auto;text-align:center;font-size:12px;color:var(--muted);padding:8px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface);}
.pj-journey{display:grid;gap:12px;}
.pj-row{padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);}
.pj-row-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.pj-sub{font-size:12.5px;color:var(--muted);}
.pj-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));}
.pj-track li{position:relative;display:grid;justify-items:center;gap:3px;text-align:center;}
.pj-track li+li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border);}
.pj-track li.is-done+li::before,.pj-track li.is-now::before{background:var(--accent);}
.pj-node{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);color:#fff;cursor:pointer;}
.pj-node .ic{width:13px;height:13px;stroke-width:3;}
.pj-track li.is-done .pj-node{background:var(--accent);border-color:var(--accent);}
.pj-track li.is-now .pj-node{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.pj-track li.is-now .pj-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);}
.pj-track li.is-off{opacity:.4;}.pj-track li.is-off .pj-node{border-style:dashed;cursor:not-allowed;}
.pj-node:disabled{cursor:default;}
.pj-lab{font-size:12px;font-weight:500;}.pj-date{font-size:11px;color:var(--muted);}
.pj-track-lg{margin:16px 0 20px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);}
.pj-tabs{margin:14px 0 4px;}
.pj-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;}
.pj-main{display:grid;gap:14px;min-width:0;}.pj-side{display:grid;gap:14px;}
.pj-compose{padding:14px;position:relative;display:grid;gap:10px;}
.pj-compose-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.seg label{position:relative;cursor:pointer;}.seg label input{position:absolute;opacity:0;pointer-events:none;}
.seg label span{display:inline-block;padding:5px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);}
.seg label input:checked+span{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.pj-suggest{position:absolute;z-index:20;left:14px;top:64px;margin:0;padding:4px;list-style:none;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);}
.pj-suggest li{padding:6px 8px;border-radius:6px;font-size:13px;cursor:pointer;}.pj-suggest li span{color:var(--muted);margin-left:6px;}.pj-suggest li.on,.pj-suggest li:hover{background:var(--accent-soft);}
.pj-filters{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.pj-feed{display:grid;gap:2px;}
.pj-day{margin:14px 0 6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.pj-entry{position:relative;display:flex;gap:12px;padding:10px 12px 10px 0;margin-left:7px;border-left:2px solid var(--border);}
.pj-dot{position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--muted-2);}
.pj-entry.k-stage .pj-dot{border-color:var(--accent);background:var(--accent);}
.pj-entry.k-blocker .pj-dot{border-color:var(--red);}.pj-entry.k-decision .pj-dot{border-color:var(--purple);}
.pj-entry.k-crunch .pj-dot{border-color:var(--orange);}.pj-entry.k-schedule .pj-dot,.pj-entry.k-setup .pj-dot{border-color:var(--blue);}
.pj-entry-main{margin-left:16px;min-width:0;flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
.pj-entry-main header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.pj-entry-main time{margin-left:auto;font-size:12px;color:var(--muted);}
.pj-kind{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.pj-text{margin:6px 0 0;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;}
.pj-mention{font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:0 3px;}
.pj-move{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0;font-size:13.5px;font-weight:600;}
.pj-move .ic{width:14px;height:14px;color:var(--muted);}.pj-move small{font-weight:400;color:var(--muted);}
.pj-box{padding:16px;}.pj-box h2{font-size:13.5px;font-weight:600;margin:0 0 10px;}
.pj-people{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.pj-people li{display:flex;align-items:center;gap:10px;font-size:13.5px;}.pj-people small{display:block;color:var(--muted);font-size:12px;}
.pj-times{width:100%;font-size:12.5px;border-collapse:collapse;}.pj-times th{text-align:left;font-weight:600;color:var(--muted);padding:4px 0;}
.pj-times td{padding:5px 0;border-top:1px solid var(--line);}.pj-times tr.is-now td{font-weight:600;color:var(--accent);}.pj-faint{color:var(--muted-2);}
.pj-crunch{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px;}
.pj-crunch li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);}
.pj-crunch small{display:block;color:var(--muted);font-size:12px;}
.pj-crunch li.is-late{border-color:var(--red);}.pj-crunch li.is-soon{border-color:var(--orange);}.pj-crunch li.is-done{opacity:.6;}.pj-crunch li.is-done b{text-decoration:line-through;}
.pj-add-crunch form{display:grid;gap:8px;margin-top:10px;}
.pj-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;}
.pj-formwrap{display:grid;gap:14px;max-width:860px;}
.pj-form{padding:18px;}.pj-pickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 14px;margin-top:8px;}
.pj-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.pj-sched{width:100%;margin-top:10px;border-collapse:collapse;}.pj-sched th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:4px 6px;}.pj-sched td{padding:4px 6px;}
.pj-sched .form-input{height:34px;}
.pj-crunch-row{display:grid;grid-template-columns:2fr 1fr 2fr;gap:8px;margin-bottom:8px;}
.pj-formbar{display:flex;gap:8px;}
@media (max-width:980px){.pj-cols{grid-template-columns:1fr;}.pj-track{grid-template-columns:repeat(9,minmax(62px,1fr));overflow-x:auto;}.pj-crunch-row{grid-template-columns:1fr;}}
.kt-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;}
.kt-check small{color:var(--muted);}
.kt-check input{appearance:none;flex:none;width:17px;height:17px;margin:0;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:background .12s,border-color .12s;}
.kt-check input:checked{background:var(--accent);border-color:var(--accent);}
.kt-check input:checked::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);}
.kt-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pj-main>*{min-width:0;max-width:100%;}
.pj-compose textarea{width:100%;resize:vertical;}
.pj-filters .seg,.pj-compose-bar .seg{flex-wrap:wrap;max-width:100%;}


/* ───────── Spacing rhythm for project pages (design.md: gap between cards is --space-5, inside a card --space-5, between fields --space-4) ───────── */
.pj-sections,.pj-formwrap{display:grid;gap:var(--space-6);}
.pj-form{padding:var(--space-6);}
.pj-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);}
.pj-sec-head h2{margin:0 0 var(--space-1);font-size:var(--fs-md);font-weight:600;}
.pj-sec-head p{margin:0;max-width:62ch;font-size:var(--fs-sm);line-height:1.5;color:var(--muted);}
.pj-req{flex:none;padding:2px var(--space-3);border-radius:99px;font-size:var(--fs-xs);font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);white-space:nowrap;}
.pj-req.is-opt{background:var(--panel);color:var(--muted);border-color:var(--border);}
.pj-opt{margin-left:var(--space-1);font-size:var(--fs-xs);font-weight:400;color:var(--muted);}
.pj-pod-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0 var(--space-3);font-size:var(--fs-base);}
.pj-people-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-3);}
.pj-person{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;}
.pj-person:hover{border-color:var(--border-strong);}
.pj-person input{position:absolute;opacity:0;pointer-events:none;}
.pj-person:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.pj-person:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.pj-person-name{display:grid;min-width:0;font-size:var(--fs-base);}.pj-person-name small{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-tick{margin-left:auto;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);color:transparent;flex:none;}
.pj-tick .ic{width:12px;height:12px;stroke-width:3;}
.pj-person:has(input:checked) .pj-tick{background:var(--accent);border-color:var(--accent);color:#fff;}
.kt-av.lg{width:34px;height:34px;font-size:var(--fs-sm);}
.pj-phasepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);}
.pj-phase{display:block;cursor:pointer;}.pj-phase input{position:absolute;opacity:0;pointer-events:none;}
.pj-phase span{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-size:var(--fs-base);transition:border-color .15s,background .15s,opacity .15s;}
.pj-phase span b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel);font-size:var(--fs-xs);color:var(--muted);}
.pj-phase input:checked+span{border-color:var(--accent);background:var(--accent-soft);font-weight:500;}
.pj-phase input:checked+span b{background:var(--accent);color:#fff;}
.pj-phase input:not(:checked)+span{opacity:.55;border-style:dashed;}
.pj-phase input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;}
.pj-presets{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);}
.pj-sched{width:100%;margin-top:var(--space-4);border-collapse:separate;border-spacing:0 var(--space-2);}
.pj-sched th{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-align:left;padding:0 var(--space-2);}.pj-sched td{padding:0 var(--space-2);}
.pj-crunch-head,.pj-crunch-row{display:grid;grid-template-columns:2fr 1fr 2fr;gap:var(--space-3);}
.pj-crunch-head{font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-bottom:var(--space-2);}
.pj-crunch-row{margin-bottom:var(--space-3);}
.pj-cols{gap:var(--space-6);}.pj-main,.pj-side{gap:var(--space-5);}
.pj-box{padding:var(--space-5);}.pj-box h2{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);}.pj-box h2 .ic{width:15px;height:15px;color:var(--orange);}
.pj-box h2 small{font-weight:400;font-size:var(--fs-xs);}
.pj-compose{padding:var(--space-5);gap:var(--space-4);}
.pj-track-lg{margin:var(--space-5) 0 var(--space-6);padding:var(--space-5) var(--space-6);}
.pj-tabs{margin:var(--space-4) 0 var(--space-5);}
.pj-board{gap:var(--space-4);}.pj-col{padding:var(--space-3);gap:var(--space-3);}.pj-cards{gap:var(--space-3);}.pj-card{padding:var(--space-4);gap:var(--space-3);}
.pj-journey{gap:var(--space-4);}.pj-row{padding:var(--space-5) var(--space-6);}.pj-row-head{margin-bottom:var(--space-4);}
.pj-add-crunch form{gap:var(--space-2);}.pj-add-crunch .dd-label{margin:var(--space-2) 0 0;}
.hm-bento{gap:var(--space-5);}
.pg-head{margin-bottom:var(--space-6);}
@media (max-width:760px){.pj-crunch-head{display:none}.pj-sec-head{flex-direction:column}}

/* ───────── DSR: date span and today's work ───────── */
.dsr-span{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.dsr-span label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);color:var(--muted);}
.dsr-span .form-input{height:34px;width:150px;}
.dsr-today{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,260px) auto;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);margin:0 0 var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);}
.dsr-today-text{font-size:var(--fs-base);}.dsr-today-text b{font-weight:650;}
.dsr-today-sub{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted);}
.dsr-today-bar{height:8px;border-radius:99px;background:var(--panel);overflow:hidden;}
.dsr-today-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1);}
.dsr-today.is-ok .dsr-today-bar i{background:var(--green);}.dsr-today.is-low .dsr-today-bar i{background:var(--purple);}
.dsr-today-pct{font-size:var(--fs-md);font-weight:650;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right;}
@media (max-width:760px){.dsr-today{grid-template-columns:1fr auto;}.dsr-today-bar{grid-column:1 / -1;order:3;}}

/* ───────── Sidebar: a fold for the Admin group, and the My work tabs ───────── */
.mywork-tabs{margin:0 0 var(--space-5);}
.nav-fold .fold-head{width:100%;justify-content:flex-start;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.nav-fold .fold-head .side-label{flex:1;text-align:left;}
.nav-fold .fold-caret{margin-left:auto;width:14px;height:14px;transition:transform .25s cubic-bezier(.22,1,.36,1);}
.nav-fold.is-open .fold-caret{transform:rotate(180deg);}
.nav-fold .fold-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1);}
.nav-fold.is-open .fold-body{grid-template-rows:1fr;}
.nav-fold .fold-inner{overflow:hidden;min-height:0;}
html.sidebar-collapsed .nav-fold .fold-caret{display:none;}

/* ───────── Accordion sections (project settings) ───────── */
.acc{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:var(--space-4);transition:border-color .2s,box-shadow .2s;}
.acc[open]{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.acc>summary{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-4) var(--space-5);cursor:pointer;list-style:none;font-size:var(--fs-md);font-weight:600;border-radius:var(--radius-lg);transition:background .15s;}
.acc>summary::-webkit-details-marker{display:none;}
.acc>summary:hover{background:var(--panel);}
.acc>summary small{font-size:var(--fs-sm);font-weight:400;color:var(--muted);}
.acc>summary::after{content:"";margin-left:auto;align-self:center;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s cubic-bezier(.22,1,.36,1);}
.acc[open]>summary::after{transform:rotate(-135deg);}
.acc>.acc-body{padding:var(--space-2) var(--space-5) var(--space-5);}
.acc[open]>.acc-body{animation:accIn .3s cubic-bezier(.22,1,.36,1);}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pj-settings #overview{margin-bottom:var(--space-6);}

/* ───────── Simpler Home: Today carries the DSR bar, This week is one wide card, the rest sits under More ───────── */
.hm-bento .hm-tiles>.hm-card{grid-column:1 / -1;}
.hm-bento .hm-bars{height:96px;}
.hm-dsr{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);color:inherit;}
.hm-dsr-text{font-size:var(--fs-sm);color:var(--muted);}.hm-dsr-text b{color:var(--text);font-weight:600;}
.hm-dsr:hover .hm-dsr-text{color:var(--text);}
.hm-meter.is-low i{background:var(--purple);}
.hm-more-acc{margin-top:var(--space-5);}
@media (max-width:1180px){.hm-bento .hm-tiles>.hm-card:last-child{grid-column:1 / -1;}}

/* ───────── Expense discussion ───────── */
.cm-card{max-width:860px;margin-top:var(--space-5);}
.cm-h{font-size:var(--fs-md);font-weight:600;margin-bottom:var(--space-1);}
.cm-card>.text-sm{margin-bottom:var(--space-4);}
.cm-list{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-5);}
.cm{display:flex;gap:var(--space-3);}
.cm-main{flex:1;min-width:0;}
.cm-head{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);}
.cm-head time{color:var(--muted);font-size:var(--fs-xs);}
.cm-head form{margin-left:auto;}
.cm-body{margin:var(--space-1) 0 0;font-size:var(--fs-base);white-space:pre-wrap;overflow-wrap:anywhere;}
.cm-form{display:flex;flex-direction:column;gap:var(--space-2);}

/* ───────── Home layout: Today, Assigned and This week stack on the left; the to-do runs the full height on the right and scrolls inside ───────── */
.hm-bento .hm-today,.hm-bento .hm-work,.hm-bento .hm-tiles>.hm-card{grid-column:1 / span 7;grid-row:auto;}
.hm-bento .hm-today{grid-row:1;}.hm-bento .hm-work{grid-row:2;}.hm-bento .hm-tiles>.hm-card{grid-row:3;}.hm-bento .hm-tiles>.hm-leave-card{grid-row:4;}
.hm{width:100%;}
.hm-bento #todo-card{grid-column:8 / span 5;grid-row:1 / span 4;contain:size;min-height:480px;}
.hm-bento .hm-work>div:not(.hm-tabs){flex:none;display:block;}
.hm-bento .hm-empty{flex:none;display:grid;gap:var(--space-1);padding:var(--space-5) 0;text-align:center;}
.hm-bento .td-list{flex:1 1 0;max-height:none;min-height:120px;overflow-y:auto;overscroll-behavior:contain;padding-right:var(--space-1);}
@media (max-width:1180px){
  .hm-bento .hm-today,.hm-bento .hm-work,.hm-bento .hm-tiles>.hm-card,.hm-bento #todo-card{grid-column:1 / -1;grid-row:auto;}
  .hm-bento #todo-card{contain:none;min-height:0;max-height:520px;}
}
@media (max-width:720px){.hm-bento #todo-card{max-height:none;}.hm-bento .td-list{max-height:360px;}}

/* ───────── Pintu, the Home mascot: 18 x 16 pixels, scaled by a whole number (6x) and never smoothed ───────── */
.pt{flex:none;display:block;width:108px;height:96px;image-rendering:pixelated;align-self:flex-end;margin:0 var(--space-2) calc(-1 * var(--space-4)) 0;}
.hm-hero .pt+.hm-hero-main{flex:1 1 280px;}
@media (max-width:640px){.pt{width:72px;height:64px;}}

/* ───────── One notices card on the DSR instead of stacked bars ───────── */
.dsr-notices{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);}
.dsr-notices h2{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:var(--fs-sm);font-weight:600;color:var(--muted);}
.dsr-notices h2 .ic{width:15px;height:15px;}
.dsr-notices ul{list-style:none;margin:0;padding:0;}
.dsr-notices li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;font-size:var(--fs-base);}
.dsr-notices li+li{border-top:1px solid var(--line);}
.dsr-notices li p{margin:0;flex:1;min-width:0;line-height:1.5;}
.dsr-n-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.dsr-n-dot.is-warn{background:var(--orange);}.dsr-n-dot.is-info{background:var(--blue);}
.dsr-n-actions{display:flex;gap:var(--space-2);flex:none;}.dsr-n-actions form{margin:0;}
@media (max-width:720px){.dsr-notices li{flex-wrap:wrap;}}
.pj-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}

/* Project costing: owner/admin estimate page */
.co-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-6);align-items:start}
.co-main{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.co-side{position:sticky;top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.co-h{font-size:var(--fs-md);font-weight:600;margin:0 0 var(--space-1);display:flex;gap:var(--space-2);align-items:center}
.co-help{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--space-4)}
.co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4)}
.co-wide{grid-column:1/-1}
.co-rows{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.co-row{display:grid;gap:var(--space-2);align-items:center}
.co-people{grid-template-columns:1.3fr 1fr 1fr .8fr .9fr 64px 32px}
.co-others{grid-template-columns:1.6fr 1fr 32px}
.co-row-head{color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}
.co-check{display:flex;gap:var(--space-1);align-items:center;font-size:var(--fs-sm)}
.co-none{color:var(--muted);font-size:var(--fs-sm);margin:0}
.co-actions{display:flex;gap:var(--space-2)}
.co-sum{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5)}
.co-dl{margin:var(--space-3) 0 0;display:flex;flex-direction:column;gap:var(--space-2)}
.co-dl>div{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-sm)}
.co-dl dt{color:var(--muted)}
.co-dl dt small{color:var(--muted-2)}
.co-dl dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.co-total{border-top:1px solid var(--line);padding-top:var(--space-2)}
.co-total dt{color:var(--text)}
.co-total dd{font-size:var(--fs-lg);font-weight:600}
.co-neg{color:var(--red)}
.co-pair{display:flex;flex-direction:column;align-items:flex-end;min-width:96px}
.co-k{color:var(--muted);font-size:var(--fs-xs)}
.co-n{font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:1180px){.co-page{grid-template-columns:1fr}.co-side{position:static}}
@media (max-width:640px){.co-people,.co-others{grid-template-columns:1fr 1fr}.co-row-head{display:none}}
.co-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-5);margin-bottom:var(--space-6)}
.co-stats .card{display:flex;flex-direction:column;gap:var(--space-1)}
.co-v{font-size:var(--fs-lg);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.co-gap{margin-top:var(--space-8)}
/* Project costing */
.co-scope .pg-head h1{font-weight:700;letter-spacing:-.03em;}
.co-eyebrow{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-2);color:var(--muted);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.co-eyebrow::before{content:"";width:20px;height:2px;background:var(--accent);border-radius:2px;}
.co-stats,.co-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-5);margin-bottom:var(--space-6);}
.co-stat{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.co-stat .co-v{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.co-note{color:var(--muted);font-size:var(--fs-xs);}
.co-pos{color:var(--green);}
.co-bar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap;}
.co-search{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:220px;max-width:420px;padding:0 var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);}
.co-search:focus-within{border-color:var(--accent);}
.co-search input{flex:1;border:0;background:transparent;padding:var(--space-3) 0;font:inherit;color:var(--text);outline:0;min-width:0;}
.co-tbl th{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.co-tbl td{vertical-align:middle;}
.co-tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.co-click{cursor:pointer;}
.co-click:hover td{background:var(--panel);}
.co-mute{color:var(--muted);}
.co-proj{display:flex;align-items:center;gap:var(--space-3);}
.co-proj small{display:block;color:var(--muted);font-size:var(--fs-xs);}
.co-ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);}
.co-name{font-weight:600;color:var(--text);text-decoration:none;}
.co-name:hover{color:var(--accent);}
.co-acts{display:flex;gap:var(--space-1);justify-content:flex-end;}
.co-acts form{display:inline;}
.co-hint{display:flex;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--fs-sm);margin:var(--space-4) 0 0;}
@media (max-width:640px){.co-stats,.co-kpis{grid-template-columns:1fr 1fr;gap:var(--space-3);}.co-stat{padding:var(--space-4);}.co-stat .co-v{font-size:var(--fs-lg);}}
.co-search svg,.co-hint svg,.co-ico svg{width:16px;height:16px;flex:none;}
.co-ico svg{width:18px;height:18px;}

.kanban-more{display:block;text-align:center;padding:var(--space-2);color:var(--accent);font-size:var(--fs-sm);font-weight:500;text-decoration:none;border-radius:var(--radius);}
.kanban-more:hover{background:var(--accent-soft);}

/* Expenses */
.ex-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);}
.ex-filters .form-input{width:auto;min-width:150px;}
.ex-filters input[type=search]{flex:1;min-width:200px;max-width:360px;}
.ex-filters .btn:last-child{margin-left:auto;}
.ex-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5);margin-bottom:var(--space-5);}
.ex-stats .card{display:flex;flex-direction:column;gap:var(--space-1);}
.ex-l{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.ex-v{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.ex-s{font-size:var(--fs-sm);color:var(--muted);}
.ex-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-5);align-items:start;}
.ex-ledger{margin-bottom:0;}
.ex-side{display:flex;flex-direction:column;gap:var(--space-5);min-width:0;}
.ex-h{font-size:var(--fs-md);font-weight:600;margin:0 0 var(--space-2);}
.ex-pay{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);}
.ex-pay:last-child{border-bottom:0;}
.ex-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ex-limit{margin:0;padding:var(--space-3) var(--space-5);color:var(--muted);font-size:var(--fs-sm);}
.ex-form{display:flex;flex-direction:column;gap:var(--space-4);}
.ex-form .field{margin:0;}
.ex-form .field>label{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);}
.ex-form input[type=date]{height:38px;width:100%;box-sizing:border-box;}
.ex-form .field-row{display:grid;grid-template-columns:minmax(0,220px);gap:var(--space-4);}
.ex-num{font-variant-numeric:tabular-nums;}
.ex-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2);}
.ex-who{display:inline-flex;align-items:center;gap:var(--space-2);}
.ex-who input{accent-color:var(--accent);margin:0;}
.ex-who:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.ex-dlg{width:min(560px,calc(100vw - 32px));}
.ex-empty-ic{width:40px;height:40px;color:var(--muted-2);}
@media (max-width:980px){.ex-grid{grid-template-columns:minmax(0,1fr);}.ex-side{order:-1;}}
@media (max-width:640px){.ex-filters .form-input,.ex-filters input[type=search]{flex:1 1 100%;max-width:none;}.ex-filters .btn:last-child{margin-left:0;}}

/* Sidebar. Groups are cards: closed they are one row, open they sit in a soft panel and the current page lifts out of it. */
.sidebar > *{flex-shrink:0;}
.nav-label{font-size:var(--fs-xs);letter-spacing:.08em;padding:var(--space-4) var(--space-3) var(--space-1);}
.nav-fold .fold-head > .ic:first-child{box-sizing:border-box;width:26px;height:26px;padding:5px;border-radius:8px;background:var(--panel);color:var(--muted);transition:background var(--dur-2) ease,color var(--dur-2) ease;}
.nav-fold:hover .fold-head > .ic:first-child{color:var(--text);}
.nav-fold.is-open .fold-head > .ic:first-child{background:var(--accent-soft);color:var(--accent);}
.nav-fold:has(.fold-inner .side-item.active) .fold-head > .ic:first-child{background:var(--accent);color:var(--on-accent);}
.nav-fold:has(.fold-inner .side-item.active) .fold-head{color:var(--text);font-weight:500;}
.nav-fold .fold-count{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--muted-2);}
.nav-fold.is-open{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-1);margin:var(--space-1) 0 var(--space-2);}
.nav-fold .fold-inner{margin:2px 0 0;padding:0;border:0;}
.nav-fold .fold-inner .side-item{font-size:var(--fs-sm);padding:7px 10px 7px 14px;}
.nav-fold .fold-inner .side-item .ic{width:15px;height:15px;}
.nav-fold .fold-inner .side-item::before{display:none;}
.nav-fold .fold-inner .side-item:hover{background:var(--surface);}
.nav-fold.is-open .fold-inner .side-item.active{background:var(--surface);box-shadow:var(--shadow-sm);color:var(--accent);}
.nav-section.nav-admin,.nav-section + .nav-section.nav-admin{margin-top:2px;padding-top:0;border-top:0;}
.nav-label + .nav-admin{margin-top:0;}
html.sidebar-collapsed .nav-fold .fold-count{display:none;}
html.sidebar-collapsed .nav-fold.is-open{background:transparent;border:0;padding:0;margin:0;}
html.sidebar-collapsed .nav-fold .fold-inner .side-item{padding:7px 10px;}
html.sidebar-collapsed .nav-fold .fold-head > .ic:first-child{width:17px;height:17px;padding:0;background:transparent;color:inherit;}
html.sidebar-collapsed .nav-fold.is-open .fold-head > .ic:first-child,html.sidebar-collapsed .nav-fold:has(.fold-inner .side-item.active) .fold-head > .ic:first-child{background:transparent;color:inherit;}

/* Responsive layer. Loaded after _app.css so it wins on equal specificity.
 * Breakpoints: 1100 (small laptop), 860 (sidebar becomes a drawer, the app's
 * existing switch point), 640 (phone), 380 (small phone).
 * Rules that fix something in _app.css say what, so they can be folded back later. */

[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;}
img,svg,video{max-width:100%;}

/* The shell is a fixed-height column that scrolls inside .main. 100vh on a phone
 * includes the area behind the URL bar, which pushed the bottom of every page
 * off screen. dvh tracks the visible height. */
@supports (height:100dvh){
  .shell,.sidebar,.main-col,.main{height:100dvh;}
  .kanban-board{height:calc(100dvh - 188px);}
}

/* Wide screens: keep line lengths and card rows readable instead of stretching
 * to the full width of a 4K monitor. Boards and tables still scroll inside. */
@media (min-width:1700px){
  .main{padding-left:max(36px,calc((100% - 1560px) / 2));padding-right:max(36px,calc((100% - 1560px) / 2));}
}

/* Four-up stat rows get cramped below ~1000px. */
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Small laptops and tablets in landscape. */
@media (max-width:1100px) and (min-width:861px){
  .main{padding:24px 24px 40px;}
}

/* Drawer layout (<= 860px). */
@media (max-width:860px){
  /* _app.css sets .main padding inside this breakpoint, then sets it again
   * later with the same specificity, so phones got the 36px desktop gutters. */
  .main{
    padding:14px max(16px,env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  .topbar{padding-top:calc(9px + env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));}
  .sidebar{padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));width:min(300px,86vw);}
  .topbar-burger{min-width:40px;min-height:40px;align-items:center;justify-content:center;}

  /* iOS Safari zooms the page when a focused field is under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px !important;}

  /* _app.css keeps three columns down to 1100px and two below that, which
   * overflowed the DSR stat cards on a phone. */
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr);}
  .grid-4,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Grid items default to min-width:auto, so long content stretched a column
   * past the screen. */
  .grid-2>*,.grid-3>*,.grid-4>*,.stat-grid>*{min-width:0;}

  .modal{width:min(92vw,440px);max-height:calc(100dvh - 32px);overflow-y:auto;}
  #toast-container{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));align-items:stretch;}
  .toast{width:auto;max-width:none;}

  .head h1{overflow-wrap:anywhere;}
  .filter-select,.sort-select,input[type=date]{max-width:100%;min-width:0;}
  input[type=date]{flex:1 1 130px;}
  .filters,.toolbar{flex-wrap:wrap;}
  .search-wrap{flex:1 1 100%;min-width:0;}

  /* Tables stay tables. A script wraps each one in .table-scroll, which scrolls
   * sideways instead of the page. */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .table-scroll>table{min-width:520px;}
}

/* Phones. */
@media (max-width:640px){
  .grid-3{grid-template-columns:minmax(0,1fr);}
  .card{padding:16px;}
  .kanban-col{min-width:min(84vw,300px);}
  .kanban-board{scroll-snap-type:x mandatory;scroll-padding-inline:16px;}
  .pq-datepicker-popover{left:50% !important;transform:translateX(-50%);max-width:calc(100vw - 24px);}
  .pq-select-popover{max-width:calc(100vw - 24px);}
}

@media (max-width:380px){
  .main{padding-left:12px;padding-right:12px;}
  .grid-4,.stat-grid{grid-template-columns:minmax(0,1fr);}
  .head h1{font-size:16px;}
}

/* Touch screens: 44px targets, and no hover-only states. */
@media (pointer:coarse){
  .btn,.icon-btn,.filter-select,.sort-select,.switch-btn,.tab{min-height:40px;}
  .icon-btn{min-width:40px;}
  .side-item,.side-collapse,.side-user-btn,.switch-item,.side-user-menu a,.side-user-menu button{min-height:44px;}
  .form-input,.search-wrap input,.auth-input{min-height:44px;}
  .pq-select-item,.dd-menu label,.pq-datepicker-day{min-height:40px;}
  .kanban-card:hover{transform:none;}
}

/* Short landscape phones: the login card should scroll, not clip. */
@media (max-height:520px){
  .auth-shell{align-items:flex-start;}
}

/* Installed app: no browser chrome, so keep content clear of the notch. */
@media (display-mode:standalone){
  .topbar{position:sticky;top:0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

@media print{
  .sidebar,.topbar,#toast-container,.sidebar-backdrop{display:none !important;}
  .shell{display:block;}
  .main-col{height:auto;overflow:visible;}
  .main{height:auto;overflow:visible;padding:0;}
}

/* Phones and the installed app: an open dropdown is a bottom sheet. An absolutely placed menu is clipped
 * by any scrolling ancestor (the DSR table, cards), so on a small screen it looked like it never opened. */
@media (max-width:640px){
  .dd-wrap[open]::before{content:"";position:fixed;inset:0;z-index:69;background:rgba(13,17,23,.35);}
  .dd-wrap[open] .dd-menu{position:fixed;z-index:70;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;max-height:60vh;min-width:0;padding:8px;border-radius:14px;box-shadow:0 12px 40px rgba(13,17,23,.3);}
  .dd-wrap[open] .dd-opt{min-height:44px;font-size:15px;padding:10px 12px;}
}