/* The new look (10 Nov 2026): calm white "Clarity" screens with one indigo accent, and a dark mode each user can switch on.
   Every rule is scoped to html.clarity (always set by app.js) and html.clarity.dark (the user's choice). Colours come from
   the tokens below, so dark mode only redefines them. The long tail of colours written into the module stylesheets is
   converted by erp/look_css.py (/look-auto.css, loaded just before this file). */

html.clarity{
  --c-bg:#f6f7f9;--c-surface:#ffffff;--c-side:#f7f7f8;--c-raised:#f9fafb;--c-hover:#f0f1f4;--c-press:#e9eaee;
  --c-line:#e3e5e9;--c-line-soft:#eef0f2;--c-input:#d5d9df;
  --c-text:#1f2328;--c-soft:#3f4450;--c-muted:#5f6673;
  --c-accent:#4f46e5;--c-accent-hover:#4338ca;--c-on-accent:#ffffff;--c-accent-soft:#eeeffe;--c-accent-line:#c9cbf6;--c-accent-text:#4338ca;
  --c-row-selected:#eeeffe;--c-backdrop:rgba(16,20,30,.42);--c-shadow:0 1px 2px rgba(16,24,40,.05);--c-pop:0 12px 40px rgba(16,24,40,.16);
  --s-g-bg:#eff0f3;--s-g-fg:#3f4450;--s-a-bg:#fff3d6;--s-a-fg:#7a4a00;--s-b-bg:#e6eeff;--s-b-fg:#1e4fd1;--s-n-bg:#e2f5e9;--s-n-fg:#17663a;--s-r-bg:#fde9e7;--s-r-fg:#b42318;
  /* the ERP's own tokens */
  --ink:var(--c-text);--muted:var(--c-muted);--line:var(--c-line);--surface:var(--c-surface);--canvas:var(--c-bg);--sidebar:var(--c-side);
  --accent:var(--c-accent);--accent-hover:var(--c-accent-hover);--accent-soft:var(--c-accent-soft);--red:var(--c-accent);--red-dark:var(--c-accent-hover);
  --blue:var(--s-b-fg);--blue-soft:var(--s-b-bg);--success:var(--s-n-fg);--success-soft:var(--s-n-bg);--warning:var(--s-a-fg);--warning-soft:var(--s-a-bg);--danger:var(--s-r-fg);--danger-soft:var(--s-r-bg);
  --erp-bar:var(--c-surface);--erp-bar-dark:var(--c-line);--erp-grid-head:var(--c-raised);--erp-grid-selected:var(--c-row-selected);--erp-edit:var(--c-surface);--erp-border:var(--c-input);
  --radius:8px;--shadow:var(--c-shadow);
  color-scheme:light;
}
html.clarity.dark{
  --c-bg:#0e1116;--c-surface:#151a21;--c-side:#0b0e12;--c-raised:#1a2029;--c-hover:#1e2530;--c-press:#252d39;
  --c-line:#2a313c;--c-line-soft:#1f252e;--c-input:#363e4a;
  --c-text:#e6eaf0;--c-soft:#c9d1dc;--c-muted:#9aa4b2;
  --c-accent:#6366f1;--c-accent-hover:#7c7ff5;--c-on-accent:#ffffff;--c-accent-soft:#1f2147;--c-accent-line:#3c3f86;--c-accent-text:#a5a8ff;
  --c-row-selected:#22264d;--c-backdrop:rgba(0,0,0,.6);--c-shadow:none;--c-pop:0 16px 48px rgba(0,0,0,.55);
  --s-g-bg:#2a313c;--s-g-fg:#c9d1dc;--s-a-bg:#3a2a0c;--s-a-fg:#f5c26b;--s-b-bg:#13284d;--s-b-fg:#9dbeff;--s-n-bg:#0f3020;--s-n-fg:#6fd69a;--s-r-bg:#3d1517;--s-r-fg:#ff9a94;
  color-scheme:dark;
}
html.clarity :is(.ow-root,.ow-dialog){--ink:var(--c-text);--muted:var(--c-muted);--line:var(--c-input);--canvas:var(--c-bg);--accent:var(--c-accent);--accent-hover:var(--c-accent-hover);--accent-soft:var(--c-accent-soft);
  --ow-bar:var(--c-surface);--ow-bar-dark:var(--c-line);--ow-head:var(--c-raised);--ow-selected:var(--c-row-selected);--ow-edit:var(--c-surface);--ow-border:var(--c-input)}

/* ---------------------------------------------------------------- base */
html.clarity body{background:var(--c-bg);color:var(--c-text);font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
html.clarity ::selection{background:var(--c-accent-line)}
html.clarity :is(button,a,summary,input,select,textarea):focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
html.clarity.dark{scrollbar-color:#3a4250 var(--c-bg)}
html.clarity a{color:var(--c-accent-text)}
html.clarity :is(input,select,textarea){background-color:var(--c-surface);color:var(--c-text);border-color:var(--c-input);border-radius:6px}
html.clarity :is(input,select,textarea):focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft);outline:none}
html.clarity :is(input,select,textarea):disabled,html.clarity :is(input,textarea)[readonly]{background-color:var(--c-raised);color:var(--c-soft)}
html.clarity input::placeholder,html.clarity textarea::placeholder{color:var(--c-muted)}
html.clarity kbd{font:inherit;font-size:11px;padding:1px 5px;border:1px solid var(--c-line);border-radius:4px;background:var(--c-surface);color:var(--c-soft);box-shadow:none}

/* ---------------------------------------------------------------- side menu */
html.clarity .sidebar,html.clarity body.orders-mode .sidebar{background:var(--c-side);border-right:1px solid var(--c-line);color:var(--c-soft);box-shadow:none}
html.clarity .brand img{border-radius:6px;box-shadow:none;background:#fff}
html.clarity .brand>span,html.clarity .workspace-label{color:var(--c-muted)}
html.clarity .nav-item,html.clarity .nav-group-toggle{color:var(--c-soft);background:transparent;border-radius:7px;box-shadow:none;font-weight:500}
html.clarity .nav-item:hover,html.clarity .nav-group-toggle:hover{background:var(--c-hover);color:var(--c-text)}
html.clarity .nav-item.active{background:var(--c-accent-soft);color:var(--c-accent-text);box-shadow:none;font-weight:600}
html.clarity .nav-item.active>span>svg,html.clarity .nav-item.active [data-icon] svg{color:var(--c-accent-text)}
html.clarity .nav-group-toggle,html.clarity .nav-section{color:var(--c-text);letter-spacing:0;text-transform:none}
html.clarity .nav-group.has-active>.nav-group-toggle{color:var(--c-accent-text);font-weight:600}
html.clarity .nav-sub::before{display:none}
html.clarity .nav-count{background:var(--c-press);color:var(--c-soft);border-radius:999px;font-weight:600}
html.clarity .nav-count.red{background:#dc2626;color:#fff}
html.clarity .nav-item.active .nav-count{background:var(--c-accent);color:var(--c-on-accent)}
html.clarity .nav-divider{background:var(--c-line);border-color:var(--c-line)}
html.clarity .future-nav summary,html.clarity .nav-item.future{color:var(--c-muted)}
html.clarity .sidebar-bottom{border-color:var(--c-line);color:var(--c-muted)}
html.clarity .sidebar-bottom strong{color:var(--c-soft)}
html.clarity .local-mark{color:var(--c-muted);background:transparent}
html.clarity .nav-customise{color:var(--c-muted);border-color:var(--c-line);background:transparent}
html.clarity .nav-customise:hover{color:var(--c-text);background:var(--c-hover)}
html.clarity body.nav-flyouts .flyout-open>.nav-group-toggle{background:var(--c-hover);color:var(--c-text)}
html.clarity body.nav-flyouts .nav-group-toggle.has-active{box-shadow:none;color:var(--c-accent-text);font-weight:600}
html.clarity body.nav-flyouts .nav-group-items{background:var(--c-surface);border-color:var(--c-line);box-shadow:var(--c-pop)}
html.clarity body.nav-flyouts .nav-group-items::before{background:var(--c-surface);border-color:var(--c-line)}
html.clarity body.nav-flyouts .nav-flyout-title{color:var(--c-muted);border-color:var(--c-line-soft)}
html.clarity body.nav-flyouts .nav-group-items>.nav-item.nav-sub>.nav-icon{background:var(--c-hover)}
html.clarity body.nav-flyouts .nav-group-items>.nav-item.active>.nav-icon{background:var(--c-accent);color:var(--c-on-accent)}
html.clarity .nav-search{display:flex;align-items:center;gap:8px;width:100%;height:36px;margin:2px 0 12px;padding:0 10px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-surface);color:var(--c-muted);font:inherit;font-size:13px;cursor:pointer;text-align:left}
html.clarity .nav-search:hover{border-color:var(--c-input);color:var(--c-soft)}
html.clarity .nav-search>span:first-child{display:flex}
html.clarity .nav-search svg{width:16px;height:16px}
html.clarity .nav-search .grow{flex:1}

/* ---------------------------------------------------------------- top bar */
html.clarity .topbar,html.clarity body.orders-mode .topbar{background:var(--c-surface);border-bottom:1px solid var(--c-line-soft);color:var(--c-text);box-shadow:none}
html.clarity .breadcrumb,html.clarity .breadcrumb span{color:var(--c-muted)}
html.clarity .breadcrumb strong{color:var(--c-text);font-weight:500}
html.clarity .fy-label{color:var(--c-muted);background:transparent;border:1px solid var(--c-line);border-radius:6px;padding:3px 8px}
html.clarity .top-divider{background:var(--c-line)}
html.clarity .session-user{color:var(--c-soft)}
html.clarity .topbar .text-button{color:var(--c-soft)}
html.clarity .topbar .text-button:hover{color:var(--c-text);background:var(--c-hover)}
html.clarity .company-avatar{background:var(--c-press);color:var(--c-soft);border-radius:50%}
html.clarity .look-switch{display:inline-flex;padding:3px;gap:2px;border-radius:8px;background:var(--c-hover);border:0}
html.clarity .look-switch button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--c-muted);font:inherit;font-size:12.5px;cursor:pointer}
html.clarity .look-switch button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
html.clarity.dark .look-switch button[aria-pressed="true"]{background:var(--c-press)}
html.clarity .look-switch svg{width:14px;height:14px}
html.clarity .top-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--c-soft);cursor:pointer}
html.clarity .top-icon:hover{background:var(--c-hover);color:var(--c-text)}
html.clarity .top-icon svg{width:18px;height:18px}

/* ---------------------------------------------------------------- page heading, cards, register */
html.clarity #main{background:var(--c-bg)}
html.clarity .page-heading{background:transparent;border:0;box-shadow:none;color:var(--c-text);padding-left:2px;padding-right:2px}
html.clarity .page-heading .eyebrow{color:var(--c-muted);letter-spacing:.06em}
html.clarity .page-heading h1{color:var(--c-text);font-weight:600;letter-spacing:-.01em}
html.clarity .page-heading p{color:var(--c-muted)}
html.clarity :is(.stat-card,.stats-grid>*,.dash-card){background:var(--c-surface);border:1px solid var(--c-line);border-radius:10px;box-shadow:var(--c-shadow);color:var(--c-text)}
html.clarity .stats-grid>* :is(span,small,p){color:var(--c-muted)}
html.clarity .stats-grid>* strong{color:var(--c-text)}
html.clarity .register-panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:10px;box-shadow:var(--c-shadow);overflow:hidden}
html.clarity .panel-heading{background:var(--c-surface);color:var(--c-text);border-bottom:1px solid var(--c-line-soft)}
html.clarity .panel-heading h2{color:var(--c-text);font-weight:600}
html.clarity .panel-caption{color:var(--c-muted)}
html.clarity .record-pill{background:var(--c-hover);color:var(--c-soft);border:0;border-radius:999px}
html.clarity .scope-tabs{background:transparent;border-bottom:1px solid var(--c-line-soft);gap:4px}
html.clarity .scope-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--c-muted);box-shadow:none}
html.clarity .scope-tabs button:hover{color:var(--c-text);background:transparent}
html.clarity .scope-tabs button.active,html.clarity .scope-tabs button[aria-pressed="true"]{color:var(--c-text);font-weight:600;border-bottom-color:var(--c-accent);background:transparent}
html.clarity .scope-tabs button :is(span,small,em){background:transparent;color:var(--c-muted)}
html.clarity .filter-toolbar,html.clarity .register-downloads,html.clarity .table-footer{background:var(--c-surface);color:var(--c-muted);border-color:var(--c-line-soft)}
html.clarity .search-box{background:var(--c-surface);border:1px solid var(--c-input);border-radius:8px;color:var(--c-muted)}
html.clarity .search-box:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}
html.clarity .search-box input{background:transparent;border:0;box-shadow:none}
html.clarity .filter-hint{color:var(--c-muted)}
html.clarity .workspace-footer{color:var(--c-muted);background:transparent;border:0}

/* tables everywhere */
html.clarity .table-wrap{background:var(--c-surface);border-color:var(--c-line)}
html.clarity :is(#register-table,.ow-register-table,.pw-lines,.ow-lines-table) thead th,
html.clarity :is(#register-table,.ow-register-table) th{background:var(--c-raised);color:var(--c-muted);border-color:var(--c-line);font-weight:600}
html.clarity :is(#register-table,.ow-register-table) th .sort-button{color:var(--c-muted)}
html.clarity :is(#register-table,.ow-register-table) th :is(input,select){background-color:var(--c-surface);border-color:var(--c-line)}
html.clarity :is(#register-table,.ow-register-table) td{border-color:var(--c-line-soft);color:var(--c-text)}
html.clarity :is(#register-table,.ow-register-table) tbody tr:nth-child(even){background:transparent}
html.clarity :is(#register-table,.ow-register-table) tbody tr:hover,html.clarity :is(#register-table,.ow-register-table) tbody tr:focus-within{background:var(--c-hover)}
html.clarity :is(#register-table,.ow-register-table) tbody tr.selected,html.clarity :is(#register-table,.ow-register-table) tbody tr[aria-selected="true"]{background:var(--c-row-selected)}
html.clarity .ow-pager{background:var(--c-surface);border-color:var(--c-line-soft);color:var(--c-muted)}
html.clarity :is(.ow-panel,.pw-panel,.pw-card){background:var(--c-surface);border-color:var(--c-line)}

/* ---------------------------------------------------------------- buttons */
html.clarity :is(.button,.ow-button,.ow-link){border-radius:8px;border:1px solid var(--c-input);background:var(--c-surface);color:var(--c-soft);font-weight:500;box-shadow:none}
html.clarity :is(.button,.ow-button,.ow-link):hover:not(:disabled){background:var(--c-hover);color:var(--c-text);border-color:var(--c-input)}
html.clarity :is(.button.primary,.ow-primary,.ow-button.ow-primary){background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);font-weight:600}
html.clarity :is(.button.primary,.ow-primary,.ow-button.ow-primary):hover:not(:disabled){background:var(--c-accent-hover);border-color:var(--c-accent-hover);color:var(--c-on-accent)}
html.clarity :is(.button.secondary){background:var(--c-surface)}
html.clarity :is(.ow-danger,.button.danger){color:var(--s-r-fg);border-color:var(--c-input)}
html.clarity .text-button{color:var(--c-accent-text)}
html.clarity .icon-button{color:var(--c-soft)}
html.clarity .icon-button:hover{background:var(--c-hover)}

/* ---------------------------------------------------------------- dialogs: white heads, quiet feet */
html.clarity dialog{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--c-pop)}
html.clarity dialog::backdrop{background:var(--c-backdrop)}
html.clarity :is(.dialog-header,.ow-dialog-head,.ow-order-layout>.ow-dialog-head,.ow-heading){background:var(--c-surface);color:var(--c-text);border-color:var(--c-line);border-width:0 0 1px;border-style:solid}
html.clarity :is(.dialog-header,.ow-dialog-head,.ow-heading) :is(h1,h2,h3,strong,span,p,small){color:inherit}
html.clarity :is(.dialog-header,.ow-dialog-head,.ow-heading) :is(p,small,.ow-secondary){color:var(--c-muted)}
html.clarity :is(.dialog-header,.ow-dialog-head) :is(button.icon-button,.ow-close,button[aria-label^="Close"]){color:var(--c-soft);background:transparent;border-color:transparent}
html.clarity :is(.dialog-header,.ow-dialog-head) :is(button.icon-button,.ow-close,button[aria-label^="Close"]):hover{background:var(--c-hover)}
html.clarity :is(.dialog-footer,.ow-dialog-foot){background:var(--c-surface);border-color:var(--c-line-soft)}
html.clarity #editor-content>.dialog-footer::before{display:none}
html.clarity .section-number{background:var(--c-accent-soft);color:var(--c-accent-text)}
html.clarity #selected-customer{display:flex;align-items:center;gap:8px;align-self:start;padding:8px 10px;border-radius:8px;background:var(--s-n-bg);color:var(--s-n-fg);font-weight:600}
html.clarity #selected-customer[hidden]{display:none}
html.clarity #selected-customer svg{width:16px;height:16px;flex:none}
html.clarity #selected-customer button{margin-left:auto}
html.clarity :is(.ow-rail-title){background:var(--c-raised);color:var(--c-muted)}

/* ---------------------------------------------------------------- one set of status colours */
html.clarity :is(.badge,.ow-status,.pb-status,.pr-grid-status,.pw-chip){border-radius:999px;font-weight:600;background:var(--s-g-bg);color:var(--s-g-fg)}
html.clarity :is(.badge.hold,.ow-status.pending,.ow-status.draft.waiting,
  .pw-st-awaiting_approval,.pw-st-po_awaiting_approval,.pw-st-pending,.pw-st-hold,.pw-st-material_pending,.pw-st-qc_pending,.pw-st-in_qc,.pw-st-qc,.pw-st-deviation,.pw-st-to_order,.pw-st-po_not_generated,.pw-st-under_packing,.pb-status-incomplete){background:var(--s-a-bg);color:var(--s-a-fg)}
html.clarity :is(.badge.open,.ow-status.issued,
  .pw-st-issued,.pw-st-processing,.pw-st-in_production,.pw-st-outsourced,.pw-st-partly_ordered,.pw-st-part_dispatched,.pw-st-ready,.pw-st-packed,.pw-st-partly,.pw-st-excess){background:var(--s-b-bg);color:var(--s-b-fg)}
html.clarity :is(.badge.received,.ow-status.booked,.ow-status.approved,
  .pw-st-approved,.pw-st-accepted,.pw-st-complete,.pw-st-received,.pw-st-qc_passed,.pw-st-qc_done,.pw-st-stock,.pw-st-dispatched,.pw-st-closed,.pb-status-complete){background:var(--s-n-bg);color:var(--s-n-fg)}
html.clarity :is(.badge.lost,.badge.canceled,.badge.wrong,.ow-status.cancelled,.ow-status.rejected,
  .pw-st-rejected,.pw-st-cancelled,.pw-st-po_cancelled,.pw-st-qc_failed,.pw-st-scrapped,.pw-st-partly_rejected){background:var(--s-r-bg);color:var(--s-r-fg)}
html.clarity :is(.badge.unspecified,.ow-status.draft,.ow-status.superseded,.ow-status.historical,.pw-st-draft,.pw-st-not_started,.pw-st-not_required,.pb-status-none){background:var(--s-g-bg);color:var(--s-g-fg)}

/* ---------------------------------------------------------------- the stage bar on records */
.stage-bar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;padding:0;list-style:none}
.stage-bar[hidden]{display:none}
.stage-bar li{flex:1 1 120px;min-height:46px;box-sizing:border-box;padding:5px 12px 5px 24px;display:flex;flex-direction:column;justify-content:center;
  background:var(--c-hover);color:var(--c-muted);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);min-width:0}
.stage-bar li:first-child{padding-left:14px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);border-radius:8px 0 0 8px}
.stage-bar li:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12px 50%);border-radius:0 8px 8px 0}
.stage-bar li:only-child{clip-path:none;border-radius:8px}
.stage-bar b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-bar span{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.stage-bar a,.stage-bar button.stage-link{color:inherit;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.stage-bar .done{background:var(--s-n-bg);color:var(--s-n-fg)}
.stage-bar .now{background:var(--c-accent);color:var(--c-on-accent)}
.stage-bar .stopped{background:var(--s-r-bg);color:var(--s-r-fg)}
.stage-bar .skipped{opacity:.6}
.stage-bar .skipped b{text-decoration:line-through;text-decoration-thickness:1px}
/* in the head of a record window, between its title and its status / close button */
.stage-bar.compact{flex:1 1 auto;flex-wrap:nowrap;align-self:center;min-width:0;max-width:820px;margin:0 auto 0 12px;gap:3px}
.stage-bar.compact li{flex:1 1 0;min-height:36px;padding:3px 9px 3px 19px}
.stage-bar.compact li:first-child{padding-left:11px}
.stage-bar.compact b{font-size:12px}
.stage-bar.compact span{font-size:11px}
html.clarity :is(.ow-dialog-head,.dialog-header):has(>.stage-bar){align-items:center}
@media (max-width:1180px){.stage-bar.compact span{display:none}.stage-bar.compact li{min-height:30px}}
@media (max-width:860px){.stage-bar.compact{display:none}}

/* ---------------------------------------------------------------- page help */
.page-help{position:fixed;z-index:60;top:58px;right:16px;width:min(380px,calc(100vw - 32px));padding:16px 18px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-surface);color:var(--c-text);box-shadow:var(--c-pop);font-size:13px;line-height:1.5}
.page-help[hidden]{display:none}
.page-help h2{margin:0 0 6px;font-size:15px}
.page-help p{margin:0 0 10px;color:var(--c-soft)}
.page-help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0 0}
.page-help dt{white-space:nowrap}
.page-help dd{margin:0;color:var(--c-soft)}
html.clarity .page-help .top-icon.close{position:absolute;top:8px;right:8px;font-size:20px;line-height:1}

/* ---------------------------------------------------------------- Ctrl K: search or jump to */
.cmdk{width:min(660px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 120px));margin:12vh auto auto;padding:0;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface);color:var(--c-text);box-shadow:var(--c-pop);overflow:hidden}
.cmdk[open]{display:flex;flex-direction:column}
.cmdk::backdrop{background:var(--c-backdrop)}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:0 16px;height:54px;border-bottom:1px solid var(--c-line);color:var(--c-muted)}
.cmdk-input svg{width:18px;height:18px;flex:none}
.cmdk-input input{flex:1;min-width:0;height:100%;border:0!important;box-shadow:none!important;outline:none;background:transparent!important;color:var(--c-text);font:inherit;font-size:15px;padding:0}
.cmdk-list{overflow:auto;padding:6px 8px 8px}
.cmdk-group{margin:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.cmdk-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--c-text);font:inherit;text-align:left;cursor:pointer}
.cmdk-item[aria-selected="true"]{background:var(--c-accent-soft)}
.cmdk-item .cmdk-kind{flex:none;min-width:58px;padding:2px 6px;border-radius:5px;background:var(--c-hover);color:var(--c-soft);font-size:10.5px;font-weight:700;text-align:center;letter-spacing:.03em}
.cmdk-item .cmdk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cmdk-item .cmdk-main b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .cmdk-main span{font-size:12.5px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item mark{background:#ffe58a;color:#1f2328;border-radius:2px}
html.clarity.dark .cmdk-item mark{background:#6b5a12;color:#fff4c8}
.cmdk-empty{padding:26px 16px;text-align:center;color:var(--c-muted)}
.cmdk-foot{display:flex;flex-wrap:wrap;gap:14px;padding:9px 16px;border-top:1px solid var(--c-line);color:var(--c-muted);font-size:12px}

/* ---------------------------------------------------------------- My work */
.mywork-panel{display:flex;flex-direction:column;gap:18px;padding-bottom:24px}
.mywork-panel[hidden]{display:none}
.mw-tip{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;border:1px solid var(--c-accent-line);background:var(--c-accent-soft);color:var(--c-soft)}
.mw-tip p{margin:0;flex:1}
.mw-tip svg{width:18px;height:18px;color:var(--c-accent-text);flex:none}
.mw-starts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.mw-start{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-surface);color:var(--c-text);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--c-shadow)}
.mw-start:hover{border-color:var(--c-accent-line);background:var(--c-accent-soft)}
.mw-start .mw-ic{width:36px;height:36px;flex:none;border-radius:9px;background:var(--c-accent-soft);color:var(--c-accent-text);display:flex;align-items:center;justify-content:center}
.mw-start .mw-ic svg{width:18px;height:18px}
.mw-start b{display:block;font-weight:600;margin-bottom:2px}
.mw-start span{font-size:12.5px;color:var(--c-muted);line-height:1.4}
.mw-cols{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.mw-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.mw-col.wide{flex:3 1 520px}
.mw-col.narrow{flex:2 1 340px}
.mw-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;padding:16px 18px;box-shadow:var(--c-shadow)}
.mw-card h2{margin:0;font-size:16px;font-weight:600;color:var(--c-text)}
.mw-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.mw-head .mw-count{margin-left:auto;font-size:13px;color:var(--c-muted)}
.mw-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--c-line-soft)}
.mw-head+.mw-row{border-top:0}
.mw-kind{flex:none;min-width:56px;padding:3px 8px;border-radius:6px;background:var(--c-hover);color:var(--c-soft);font-size:11px;font-weight:700;text-align:center;letter-spacing:.02em}
.mw-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.mw-main b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-main span{font-size:12.5px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-age{flex:none;font-size:12px;font-weight:600;color:var(--s-a-fg);background:var(--s-a-bg);padding:3px 8px;border-radius:6px;white-space:nowrap}
.mw-age.quiet{color:var(--c-muted);background:transparent;font-weight:500}
.mw-age.late{color:var(--s-r-fg);background:var(--s-r-bg)}
.mw-act{flex:none;height:32px;padding:0 12px;border:1px solid var(--c-input);border-radius:8px;background:var(--c-surface);color:var(--c-soft);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.mw-act:hover{background:var(--c-hover);color:var(--c-text)}
.mw-act.accent{border-color:var(--c-accent-line);color:var(--c-accent-text);font-weight:600}
.mw-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 8px 8px;color:var(--c-muted);font-size:13px}
.mw-empty b{color:var(--c-text);font-size:14px}
.mw-empty .mw-ok{width:40px;height:40px;border-radius:50%;background:var(--s-n-bg);color:var(--s-n-fg);display:flex;align-items:center;justify-content:center}
.mw-empty .mw-ok svg{width:20px;height:20px}
.mw-more{margin-top:6px;padding:6px 0 0;border:0;background:none;color:var(--c-accent-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}