/* ActualCost Appearance — per-user looks and layout options.
   Nothing here applies unless appearance.js sets an attribute on <html>, and
   it only does so while the signed-in workspace is visible. The default
   "Classic" look with default options is the untouched current design.

   Structure
   1. Looks: html[data-ac-look=…] sets design tokens; html.ac-skin maps every
      workspace surface onto those tokens.
   2. Independent options (any look): accent, sidebar layout, nav icons,
      density, text size, table style, numbers, corners. */

/* ======================================================================
   1. LOOK TOKENS
   ====================================================================== */
html[data-ac-look="slate"]{
  --ac-bg:#f5f6f8;--ac-panel:#fff;--ac-panel-2:#f9fafb;--ac-hover:#f2f4f6;--ac-input:#fff;
  --ac-line:#e3e5e9;--ac-line-strong:#cfd3da;--ac-ink:#14161a;--ac-muted:#636a76;
  --ac-accent:#0f766e;--ac-accent-ink:#fff;
  --ac-sidebar:#17191e;--ac-sidebar-ink:#a1a7b3;--ac-sidebar-ink-strong:#fff;--ac-sidebar-active:rgba(255,255,255,.08);--ac-sidebar-line:rgba(255,255,255,.08);
  --ac-pos:#047857;--ac-neg:#c2410c;--ac-pos-soft:#e7f6f0;--ac-neg-soft:#fdf0e8;
  --ac-radius:8px;--ac-shadow:0 1px 2px rgba(20,22,26,.05);
}
html[data-ac-look="ledger"]{
  --ac-bg:#f6f8fb;--ac-panel:#fff;--ac-panel-2:#f8fafc;--ac-hover:#f1f5fd;--ac-input:#fff;
  --ac-line:#e4e8ef;--ac-line-strong:#cfd6e1;--ac-ink:#0f1b2d;--ac-muted:#5b6678;
  --ac-accent:#1d5bf0;--ac-accent-ink:#fff;
  --ac-sidebar:#fff;--ac-sidebar-ink:#3d4757;--ac-sidebar-ink-strong:#0f1b2d;--ac-sidebar-active:#eef3fe;--ac-sidebar-line:#e4e8ef;
  --ac-pos:#15803d;--ac-neg:#dc2626;--ac-pos-soft:#ecfdf3;--ac-neg-soft:#fef2f2;
  --ac-radius:8px;--ac-shadow:0 1px 2px rgba(15,27,45,.04);
}
html[data-ac-look="midnight"]{
  color-scheme:dark;
  --ac-bg:#0a0f1c;--ac-panel:#111827;--ac-panel-2:#0d1422;--ac-hover:#172238;--ac-input:#0d1422;
  --ac-line:#1f2a40;--ac-line-strong:#2b3956;--ac-ink:#e7ecf5;--ac-muted:#8d9ab3;
  --ac-accent:#6d9dff;--ac-accent-ink:#06122b;
  --ac-sidebar:#060a14;--ac-sidebar-ink:#8d9ab3;--ac-sidebar-ink-strong:#fff;--ac-sidebar-active:rgba(109,157,255,.14);--ac-sidebar-line:rgba(255,255,255,.07);
  --ac-pos:#3ecf9e;--ac-neg:#ff7b7b;--ac-pos-soft:rgba(62,207,158,.12);--ac-neg-soft:rgba(255,123,123,.12);
  --ac-radius:10px;--ac-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.35);
}
html[data-ac-look="studio"]{
  --ac-bg:#f7f7f8;--ac-panel:#fff;--ac-panel-2:#fafafa;--ac-hover:#f4f4f6;--ac-input:#fff;
  --ac-line:#ebebef;--ac-line-strong:#dcdce2;--ac-ink:#18181b;--ac-muted:#71717a;
  --ac-accent:#5b5bd6;--ac-accent-ink:#fff;
  --ac-sidebar:#f1f1f3;--ac-sidebar-ink:#52525b;--ac-sidebar-ink-strong:#18181b;--ac-sidebar-active:#fff;--ac-sidebar-line:#e4e4e8;
  --ac-pos:#15803d;--ac-neg:#dc2626;--ac-pos-soft:#ecfdf3;--ac-neg-soft:#fef2f2;
  --ac-radius:12px;--ac-shadow:0 1px 2px rgba(24,24,27,.04),0 4px 16px rgba(24,24,27,.05);
}
html[data-ac-look="paper"]{
  --ac-bg:#f5f1e8;--ac-panel:#fffdf8;--ac-panel-2:#f8f4ea;--ac-hover:#f3ecdc;--ac-input:#fffdf8;
  --ac-line:#e5dccb;--ac-line-strong:#d4c7ae;--ac-ink:#2a241c;--ac-muted:#7b705f;
  --ac-accent:#b4532a;--ac-accent-ink:#fff;
  --ac-sidebar:#fffdf8;--ac-sidebar-ink:#6b604f;--ac-sidebar-ink-strong:#2a241c;--ac-sidebar-active:#f1e8d6;--ac-sidebar-line:#e5dccb;
  --ac-pos:#2f6b3a;--ac-neg:#a8321f;--ac-pos-soft:#eaf2e3;--ac-neg-soft:#f8e6df;
  --ac-radius:6px;--ac-shadow:0 1px 0 rgba(42,36,28,.04);
  --ac-head-font:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
html[data-ac-look="blueprint"]{
  --ac-bg:#eaf1fb;--ac-panel:#fff;--ac-panel-2:#f2f7fe;--ac-hover:#e6f0fd;--ac-input:#fff;
  --ac-line:#c4d5ec;--ac-line-strong:#8fb0dc;--ac-ink:#0b2545;--ac-muted:#4d6689;
  --ac-accent:#0a58d0;--ac-accent-ink:#fff;
  --ac-sidebar:#0b2545;--ac-sidebar-ink:#9fb7d9;--ac-sidebar-ink-strong:#fff;--ac-sidebar-active:rgba(255,255,255,.1);--ac-sidebar-line:rgba(255,255,255,.12);
  --ac-pos:#0b7a50;--ac-neg:#c0341d;--ac-pos-soft:#e3f5ec;--ac-neg-soft:#fbe9e5;
  --ac-radius:0px;--ac-shadow:none;
  --ac-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
html[data-ac-look="contrast"]{
  --ac-bg:#fff;--ac-panel:#fff;--ac-panel-2:#f0f0f0;--ac-hover:#fff6c2;--ac-input:#fff;
  --ac-line:#1a1a1a;--ac-line-strong:#000;--ac-ink:#000;--ac-muted:#2e2e2e;
  --ac-accent:#0033cc;--ac-accent-ink:#fff;
  --ac-sidebar:#000;--ac-sidebar-ink:#fff;--ac-sidebar-ink-strong:#000;--ac-sidebar-active:#ffd400;--ac-sidebar-line:#444;
  --ac-pos:#005c2e;--ac-neg:#b00000;--ac-pos-soft:#e0f2e7;--ac-neg-soft:#fde2e2;
  --ac-radius:4px;--ac-shadow:none;
  --ac-base-size:17px;
}

/* ======================================================================
   2. SKIN — maps the existing workspace components onto the tokens.
   Only active for non-Classic looks (appearance.js adds .ac-skin).
   ====================================================================== */
html.ac-skin{--ac-accent-soft:color-mix(in srgb,var(--ac-accent) 13%,transparent);--blue:var(--ac-accent);--blue-deep:var(--ac-accent);--success:var(--ac-pos);--danger:var(--ac-neg);--ink:var(--ac-ink);--muted:var(--ac-muted);--line:var(--ac-line);--table-line:var(--ac-line);--table-head:var(--ac-panel-2);--table-hover:var(--ac-hover)}
html.ac-skin body,html.ac-skin #app{background:var(--ac-bg);color:var(--ac-ink)}
html.ac-skin .muted{color:var(--ac-muted)}

/* Sidebar */
html.ac-skin .topbar{background:var(--ac-sidebar);border-right:1px solid var(--ac-sidebar-line)}
html.ac-skin .nav{color:var(--ac-sidebar-ink)}
html.ac-skin .nav:before{color:currentColor;opacity:.6}
html.ac-skin .nav:hover{background:color-mix(in srgb,var(--ac-sidebar-active) 60%,transparent);color:var(--ac-sidebar-ink-strong)}
html.ac-skin .nav.active{background:var(--ac-sidebar-active);color:var(--ac-sidebar-ink-strong)}
html.ac-skin .account{border-top-color:var(--ac-sidebar-line);color:var(--ac-sidebar-ink)}
html.ac-skin .account .text-button{color:var(--ac-sidebar-ink-strong)}
html.ac-skin .account .text-button:hover{color:var(--ac-accent)}

/* Headings and controls */
html.ac-skin .view-heading h1{color:var(--ac-ink);font-family:var(--ac-head-font,inherit)}
html.ac-skin .view-heading p:not(.eyebrow){color:var(--ac-muted)}
html.ac-skin .eyebrow{color:var(--ac-accent)}
html.ac-skin .primary{background:var(--ac-accent);color:var(--ac-accent-ink);border-radius:var(--ac-radius)}
html.ac-skin .primary:hover{background:color-mix(in srgb,var(--ac-accent) 86%,#000)}
html.ac-skin .text-button{color:var(--ac-accent)}
html.ac-skin .view-switch{background:var(--ac-panel-2);border-color:var(--ac-line)}
html.ac-skin .view-choice{color:var(--ac-muted)}
html.ac-skin .view-choice.active{background:var(--ac-panel);color:var(--ac-accent)}
html.ac-skin input,html.ac-skin select,html.ac-skin .compact-select,html.ac-skin .member-role-select{background-color:var(--ac-input);border-color:var(--ac-line-strong);color:var(--ac-ink)}
html.ac-skin input:focus,html.ac-skin select:focus{border-color:var(--ac-accent);outline:0;box-shadow:0 0 0 3px var(--ac-accent-soft)}
html.ac-skin .entry-form{background:var(--ac-panel);border-color:var(--ac-line);border-radius:var(--ac-radius);box-shadow:var(--ac-shadow)}
html.ac-skin .entry-form label,html.ac-skin .inline-entry-form label,html.ac-skin .inline-job-form label,html.ac-skin .inline-cost-entry-form label{color:var(--ac-muted)}
html.ac-skin #global-status{color:var(--ac-muted)}

/* Panels and tables */
html.ac-skin .project-grid,html.ac-skin .data-list,html.ac-skin .job-groups{background:var(--ac-panel);border-color:var(--ac-line);border-radius:var(--ac-radius);box-shadow:var(--ac-shadow);overflow:hidden;overflow:clip}
html.ac-skin .dense-table{background:var(--ac-panel)}
html.ac-skin .dense-table th{background:var(--ac-panel-2);color:var(--ac-muted);border-color:var(--ac-line)}
html.ac-skin .dense-table td{color:var(--ac-ink);border-color:var(--ac-line);background:var(--ac-panel)}
html.ac-skin .dense-table tr:hover td,html.ac-skin .job-group-content>.dense-table tbody tr:hover td{background:var(--ac-hover)}
html.ac-skin .job-table-scroll .dense-table tbody tr.job-has-expenses>td{background:var(--ac-panel-2)}
html.ac-skin .job-table-scroll .dense-table tbody tr.job-no-expenses>td{background:var(--ac-panel)}
html.ac-skin .job-table-scroll .dense-table tbody tr:hover>td{background:var(--ac-hover)}
html.ac-skin .job-table-scroll .dense-table th:first-child{background:var(--ac-panel-2)}
html.ac-skin .job-group{background:var(--ac-panel);border-color:var(--ac-line)}
html.ac-skin .job-group>summary,html.ac-skin .job-group[open]>summary{background:var(--ac-panel-2);color:var(--ac-ink);border-color:var(--ac-line)}
html.ac-skin .job-group>summary:hover{background:var(--ac-hover)}
html.ac-skin .job-group[open]>summary:before{background:var(--ac-accent)}
html.ac-skin .register-group-name,html.ac-skin .register-total{border-color:var(--ac-line)}
html.ac-skin .register-group-name b{color:var(--ac-ink)}
html.ac-skin .register-total{color:var(--ac-muted)}
html.ac-skin .register-group-name small,html.ac-skin .register-total small{color:var(--ac-muted);opacity:.85}
html.ac-skin .register-total.positive,html.ac-skin .dense-table td.positive,html.ac-skin .positive{color:var(--ac-pos)!important}
html.ac-skin .register-total.negative,html.ac-skin .dense-table td.negative,html.ac-skin .negative{color:var(--ac-neg)!important}
html.ac-skin .group-add-entry-row,html.ac-skin .group-add-job-row,html.ac-skin .inline-job-form,html.ac-skin .inline-entry-form,html.ac-skin .inline-cost-entry-form,html.ac-skin .job-group-editor,html.ac-skin .billing-document-content{background:var(--ac-panel-2)!important;border-color:var(--ac-line)!important}
html.ac-skin .empty-entry-message{color:var(--ac-muted)!important;border-left-color:var(--ac-line)!important}
html.ac-skin .sub-job-chevron{background:transparent;color:var(--ac-muted)}html.ac-skin .sub-job-toggle:hover .sub-job-chevron,html.ac-skin .est-toggle:hover .sub-job-chevron{color:var(--ac-accent)}
html.ac-skin .sub-job-count{background:var(--ac-panel-2);color:var(--ac-muted)}
html.ac-skin .sub-job-label{color:var(--ac-muted)}

/* Estimates and the job library: the editor, library bar, library screen and panels use the look's own
   surfaces (they were written with Classic's fixed light colours, which left white boxes in Midnight). */
html.ac-skin #estimates-root .est-scroll,html.ac-skin #estimates-root .est-collapsed .est-job-row td{background:var(--ac-panel);border-color:var(--ac-line)}
html.ac-skin #estimates-root .est-job-row td{background:var(--ac-panel-2);border-top-color:var(--ac-line-strong)}
html.ac-skin #estimates-root .est-adds-summary td{background:var(--ac-panel-2)}
html.ac-skin #estimates-root .est-table input,html.ac-skin #estimates-root .est-table select,html.ac-skin #estimates-root .est-totals input{background-color:transparent;color:var(--ac-ink);border-color:transparent}
html.ac-skin #estimates-root .est-table input:hover,html.ac-skin #estimates-root .est-table select:hover,html.ac-skin #estimates-root .est-totals input:hover{border-color:var(--ac-line-strong)!important}
html.ac-skin #estimates-root .est-table input:focus,html.ac-skin #estimates-root .est-table select:focus,html.ac-skin #estimates-root .est-totals input:focus{background:var(--ac-input)!important;border-color:var(--ac-accent)!important;box-shadow:0 0 0 2px var(--ac-accent-soft)!important}
html.ac-skin #estimates-root .est-table input.est-invalid,html.ac-skin #estimates-root .est-totals input.est-invalid{background:var(--ac-neg-soft)!important;border-color:var(--ac-neg)!important}
html.ac-skin #estimates-root .est-nr,html.ac-skin #estimates-root .est-toggle,html.ac-skin #estimates-root .est-job-row td:nth-child(3),html.ac-skin #estimates-root .est-details small,html.ac-skin #estimates-root .est-totals small,html.ac-skin #estimates-root .est-lib-cat,html.ac-skin #estimates-root .est-lib-item small,html.ac-skin #estimates-root .est-lib-option small,html.ac-skin #estimates-root .est-print-version small{color:var(--ac-muted)}
html.ac-skin #estimates-root .est-toggle:hover{color:var(--ac-accent)}
html.ac-skin #estimates-root .est-grand td{border-top-color:var(--ac-line-strong)}
html.ac-skin #estimates-root .est-details,html.ac-skin #estimates-root .est-danger-zone{border-color:var(--ac-line)}
html.ac-skin #estimates-root .est-lib-tag{border-color:color-mix(in srgb,var(--ac-accent) 35%,transparent);background:var(--ac-accent-soft);color:var(--ac-accent)}
html.ac-skin #estimates-root .est-star-on,html.ac-skin #estimates-root .est-change{color:var(--ac-accent)}
html.ac-skin #estimates-root .est-change-new{color:var(--ac-pos)}
html.ac-skin #estimates-root .est-approve-blocked td{background:var(--ac-neg-soft);color:var(--ac-neg)}
html.ac-skin #estimates-root .est-approve-warning{color:var(--ac-neg)}
html.ac-skin #estimates-root .est-panel,html.ac-skin #estimates-root .est-lib-target{background:var(--ac-panel-2);border-color:var(--ac-line-strong);color:var(--ac-ink)}
html.ac-skin #estimates-root .est-lib-bar,html.ac-skin #estimates-root .est-lib-list,html.ac-skin #estimates-root .est-lib-item,html.ac-skin #estimates-root .est-print-version{background:var(--ac-panel);border-color:var(--ac-line);color:var(--ac-ink)}
html.ac-skin #estimates-root .est-lib-cat{background:var(--ac-panel-2)}
html.ac-skin #estimates-root .est-lib-item:hover{background:var(--ac-hover)}
html.ac-skin #estimates-root .est-lib-item.est-picked,html.ac-skin #estimates-root .est-print-version:has(input:checked){background:var(--ac-accent-soft);border-color:var(--ac-accent)}
html.ac-skin #estimates-root .est-lib-bar-label,html.ac-skin #estimates-root .est-lib-qty-label{color:var(--ac-muted)}
html.ac-skin #estimates-root .est-panel input,html.ac-skin #estimates-root .est-lib-search,html.ac-skin #estimates-root .est-lib-input,html.ac-skin #estimates-root .est-lib-qty-input,html.ac-skin #estimates-root .est-print-panel textarea{background:var(--ac-input)!important;border-color:var(--ac-line-strong)!important;color:var(--ac-ink)}
html.ac-skin #estimates-root .est-lib-view{background:var(--ac-panel-2);border-color:var(--ac-line-strong)}
html.ac-skin #estimates-root .est-lib-view button{color:var(--ac-muted)}
html.ac-skin #estimates-root .est-lib-view button.active{background:var(--ac-accent-soft);color:var(--ac-accent)}
html.ac-skin #estimates-root .est-lib-fold:hover .sub-job-chevron{color:var(--ac-accent)}
/* Wider figures (Blueprint, Monospace numbers) must not wrap a library price onto two lines. */
#estimates-root td:has(>[data-est-c="lib-unit-price"]){white-space:nowrap}
html.ac-skin .est-badge{background:var(--ac-panel-2);color:var(--ac-muted);box-shadow:inset 0 0 0 1px var(--ac-line)}
html.ac-skin .est-badge.est-won,html.ac-skin .est-badge.est-approved{background:var(--ac-pos-soft);color:var(--ac-pos);box-shadow:none}
html.ac-skin .est-badge.est-lost,html.ac-skin .est-badge.est-declined{background:var(--ac-neg-soft);color:var(--ac-neg);box-shadow:none}
html.ac-skin .est-badge.est-sent{background:var(--ac-accent-soft);color:var(--ac-accent);box-shadow:none}
html.ac-skin textarea{background-color:var(--ac-input);border-color:var(--ac-line-strong);color:var(--ac-ink)}

/* Projects cards */
html.ac-skin .project-card{background:var(--ac-panel);border-color:var(--ac-line)}
html.ac-skin .project-card h3{color:var(--ac-ink)}
html.ac-skin .project-card p{color:var(--ac-muted)}
html.ac-skin .project-card .metric,html.ac-skin .project-card>p,html.ac-skin .project-card>h3,html.ac-skin .project-card>.badge{border-color:var(--ac-line)}
html.ac-skin .project-card .metric{background:var(--ac-panel-2)}
html.ac-skin .project-card .metric span{color:var(--ac-muted)}
html.ac-skin .badge,html.ac-skin .active-status{background:var(--ac-pos-soft)!important;color:var(--ac-pos)!important}
html.ac-skin .inactive-status{background:var(--ac-panel-2)!important;color:var(--ac-muted)!important}
html.ac-skin .project-card>.badge{background:transparent!important}

/* Reports, members, menus */
html.ac-skin .report-summary{background:var(--ac-line);border-color:var(--ac-line);border-radius:var(--ac-radius)}
html.ac-skin .report-metric{background:var(--ac-panel)}
html.ac-skin .report-metric small{color:var(--ac-muted)}
html.ac-skin .report-type-picker summary,html.ac-skin .report-job-picker summary{background:var(--ac-input);border-color:var(--ac-line-strong);color:var(--ac-ink)}
html.ac-skin .report-type-options,html.ac-skin .report-job-options,html.ac-skin .column-menu,html.ac-skin .suggestion-list,html.ac-skin .inline-suggestion-list{background:var(--ac-panel);border-color:var(--ac-line-strong);color:var(--ac-ink)}
html.ac-skin .report-type-options label,html.ac-skin .report-job-options label,html.ac-skin .column-menu label,html.ac-skin .column-name-drag{color:var(--ac-ink)}
html.ac-skin .suggestion-option{background:var(--ac-panel);color:var(--ac-ink)}
html.ac-skin .member-plan-summary{background:var(--ac-panel);border-color:var(--ac-line);border-radius:var(--ac-radius)}
html.ac-skin .member-plan-summary>div{border-color:var(--ac-line)}
html.ac-skin .member-plan-summary small{color:var(--ac-muted)}
html.ac-skin .billing-document{background:var(--ac-panel);border-color:var(--ac-line)}
html.ac-skin .billing-document summary{color:var(--ac-ink)}
html.ac-skin .danger-action{color:var(--ac-neg)!important}
html.ac-skin .project-card .metric{border-radius:0}
/* New looks lay each project out on a single aligned row (Classic keeps its
   current grid). Hidden columns from the View menu simply drop out. */
@media(min-width:861px){
  html.ac-skin .project-grid:not(.table-layout) .project-card{display:flex;align-items:stretch}
  html.ac-skin .project-card>*,html.ac-skin .project-card .metric{flex:1 1 0;min-width:0}
  /* Same base width on every card, so columns line up (rem, so it follows the text size); never narrower than its
     amount, whatever font the device uses. */
  html.ac-skin .project-card .metric{flex-basis:8.5rem;min-width:auto}
  html.ac-skin .project-card .metric b{white-space:nowrap}
  html.ac-skin .project-card>h3,html.ac-skin .project-card>p{min-width:5rem}
  html.ac-skin .project-card .metric:last-of-type{flex-grow:.6;flex-basis:4.5rem} /* Jobs: a small count */
  html.ac-skin .project-card>.badge{flex:0 0 6.75rem}
  html.ac-skin .project-card>h3{flex-grow:1.35}
  html.ac-skin .project-card>p{overflow-wrap:anywhere}
  html.ac-skin .project-card .metric{flex-grow:1.3;padding-inline:12px}
  html.ac-skin .project-card>.row-action{flex:0 1 auto;min-width:0;align-self:center;padding:0 14px;white-space:normal;text-align:center}
}

/* When one row does not fit (app.js fitProjectCards measures it: narrower window, larger text, wider device font,
   longer language, wider navigation) the cards become two tidy rows: status, name, address, client and Edit on top,
   all amounts together underneath. */
@media(min-width:861px){
  html.ac-skin .project-grid.cards-two-rows .project-card{flex-wrap:wrap}
  html.ac-skin .project-grid.cards-two-rows .project-card .metrics{display:flex;flex:1 1 100%;order:2;border-top:1px solid var(--ac-line)}
  html.ac-skin .project-grid.cards-two-rows .project-card .metrics>.metric{flex:1 1 0}
  html.ac-skin .project-grid.cards-two-rows .project-card .metrics>.metric:last-of-type{flex-grow:.5} /* Jobs: a small count, more room for amounts */
  html.ac-skin .project-grid.cards-two-rows .project-card>.row-action{margin-left:auto}
}

/* ---------- Look signatures ------------------------------------------- */
/* Studio: calm, product-style. Light sidebar, floating active pill, cards
   separated by space, sentence-case table headers. */
html[data-ac-look="studio"] .nav.active{box-shadow:0 1px 2px rgba(24,24,27,.08),0 0 0 1px #e4e4e8}
html[data-ac-look="studio"] .dense-table th{text-transform:none;letter-spacing:0;font-size:.74rem;font-weight:550}
html[data-ac-look="studio"] .register-group-name small,html[data-ac-look="studio"] .register-total small{text-transform:none;letter-spacing:0;font-size:.68rem}
html[data-ac-look="studio"] .job-groups,html[data-ac-look="studio"] .data-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:transparent;border:0;box-shadow:none;overflow:visible}
html[data-ac-look="studio"] .job-group{border:1px solid var(--ac-line)!important;border-radius:var(--ac-radius);box-shadow:var(--ac-shadow);overflow:hidden;overflow:clip}
@media(min-width:861px){html[data-ac-look="studio"] #report-list>.dense-table{min-width:0}}
html[data-ac-look="studio"] .view-heading h1{font-weight:600;letter-spacing:-.03em}
html[data-ac-look="studio"] .eyebrow{color:var(--ac-muted)}

/* Paper: editorial, warm. Serif titles and project names, ruled tables. */
html[data-ac-look="paper"] .view-heading h1{font-weight:500;letter-spacing:-.02em}
html[data-ac-look="paper"] .register-group-name b,html[data-ac-look="paper"] .project-card h3{font-family:var(--ac-head-font);font-weight:600;font-size:.98rem}
html[data-ac-look="paper"] .dense-table td{border-right-color:transparent}
html[data-ac-look="paper"] .dense-table th{border-right-color:transparent;border-bottom:2px solid var(--ac-line-strong)}
html[data-ac-look="paper"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:0;font-size:.85rem;font-family:var(--ac-head-font)}

/* Blueprint: technical drawing. Grid paper, square corners, mono labels
   and figures, heavier rules. */
html[data-ac-look="blueprint"] body,html[data-ac-look="blueprint"] #app{background-color:var(--ac-bg);background-image:linear-gradient(rgba(10,88,208,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,88,208,.07) 1px,transparent 1px);background-size:24px 24px}
html[data-ac-look="blueprint"] .topbar{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
html[data-ac-look="blueprint"] .eyebrow,html[data-ac-look="blueprint"] .dense-table th,html[data-ac-look="blueprint"] .register-total small,html[data-ac-look="blueprint"] .register-group-name small,html[data-ac-look="blueprint"] .report-metric small,html[data-ac-look="blueprint"] .project-card .metric span,html[data-ac-look="blueprint"] .nav{font-family:var(--ac-mono);letter-spacing:.04em}
html[data-ac-look="blueprint"] .nav{text-transform:uppercase;font-size:.74rem}
html[data-ac-look="blueprint"] .number-cell,html[data-ac-look="blueprint"] .register-total,html[data-ac-look="blueprint"] .report-metric b,html[data-ac-look="blueprint"] .project-card .metric b{font-family:var(--ac-mono);font-size:.82rem}
html[data-ac-look="blueprint"] .view-heading h1{text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
html[data-ac-look="blueprint"] .project-grid,html[data-ac-look="blueprint"] .data-list,html[data-ac-look="blueprint"] .job-groups,html[data-ac-look="blueprint"] .entry-form{border:1.5px solid var(--ac-line-strong)}
html[data-ac-look="blueprint"] .nav.active{box-shadow:inset 3px 0 0 #5fa0ff}

/* Slate: crisp, professional. Charcoal sidebar, neutral greys, deep teal accent, Inter (unless another
   font is chosen), tabular figures, small uppercase table headers and quiet 1px rules. */
html[data-ac-look="slate"] .nav.active{box-shadow:inset 2px 0 0 #2dd4bf}
html[data-ac-look="slate"][data-ac-sidebar="top"] .nav.active{box-shadow:inset 0 -2px 0 #2dd4bf}
html[data-ac-look="slate"] .view-heading h1{font-weight:620;letter-spacing:-.035em}
html[data-ac-look="slate"] .eyebrow{color:var(--ac-muted);letter-spacing:.08em}
html[data-ac-look="slate"] .dense-table th{font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--ac-muted)}
html[data-ac-look="slate"] .dense-table td,html[data-ac-look="slate"] .number-cell,html[data-ac-look="slate"] .register-total,html[data-ac-look="slate"] .report-metric b{font-variant-numeric:tabular-nums}
html[data-ac-look="slate"] .primary{font-weight:600;box-shadow:0 1px 2px rgba(20,22,26,.12)}
html[data-ac-look="slate"] .brand-artwork{border-radius:6px}
/* Ledger: white header, navy text, blue active state, quiet sentence-case table headings, aligned figures */
html[data-ac-look="ledger"] .nav.active{color:var(--ac-accent)}
html[data-ac-look="ledger"][data-ac-sidebar="top"] .topbar{border-right:0;border-bottom:1px solid var(--ac-line)}
html[data-ac-look="ledger"][data-ac-sidebar="top"] .nav{color:#2f3a4b}
html[data-ac-look="ledger"][data-ac-sidebar="top"] .nav.active{background:transparent;color:var(--ac-accent);box-shadow:inset 0 -2px 0 var(--ac-accent);border-radius:0}
html[data-ac-look="ledger"][data-ac-sidebar="top"] .nav:hover:not(.active){background:transparent;color:var(--ac-ink)}
html[data-ac-look="ledger"] .view-heading h1{letter-spacing:-.03em}
html[data-ac-look="ledger"] .eyebrow{color:var(--ac-muted);letter-spacing:.06em}
html[data-ac-look="ledger"] .dense-table th{background:var(--ac-panel);text-transform:none;letter-spacing:0;font-size:.78rem;font-weight:500;color:var(--ac-muted)}
html[data-ac-look="ledger"] .register-group-name small,html[data-ac-look="ledger"] .register-total small{text-transform:none;letter-spacing:0;font-size:.72rem}
html[data-ac-look="ledger"] .dense-table td,html[data-ac-look="ledger"] .number-cell,html[data-ac-look="ledger"] .register-total,html[data-ac-look="ledger"] .report-metric b{font-variant-numeric:tabular-nums}
html[data-ac-look="ledger"] .primary{box-shadow:0 1px 2px rgba(29,91,240,.18)}

/* Midnight: dark workspace for long sessions / evening office work. */
html[data-ac-look="midnight"] .nav.active{box-shadow:inset 2px 0 0 var(--ac-accent)}
html[data-ac-look="midnight"] .brand-artwork{border-radius:6px}
html[data-ac-look="midnight"] ::-webkit-calendar-picker-indicator{filter:invert(.8)}

/* High contrast: strongest legibility — thick rules, underlined links,
   yellow active/focus states, larger base text. */
html[data-ac-look="contrast"] .nav{font-weight:700}
html[data-ac-look="contrast"] .nav.active{color:#000}
html[data-ac-look="contrast"] .text-button{text-decoration:underline;text-underline-offset:3px}
html[data-ac-look="contrast"] .dense-table th,html[data-ac-look="contrast"] .dense-table td{border-width:1px;border-color:#000}
html[data-ac-look="contrast"] .dense-table th{color:#000;font-weight:800}
html[data-ac-look="contrast"] .project-grid,html[data-ac-look="contrast"] .data-list,html[data-ac-look="contrast"] .job-groups,html[data-ac-look="contrast"] .entry-form{border:2px solid #000}
html[data-ac-look="contrast"] :focus-visible{outline:3px solid #ffbf00!important;outline-offset:2px!important}
html[data-ac-look="contrast"] .register-total,html[data-ac-look="contrast"] .register-total small,html[data-ac-look="contrast"] .muted{color:#000}

/* ======================================================================
   3. INDEPENDENT OPTIONS (work with every look, including Classic)
   ====================================================================== */

/* Accent — appearance.js sets --ac-accent-override on <html>. */
html[data-ac-accent]{--blue:var(--ac-accent-override);--blue-deep:color-mix(in srgb,var(--ac-accent-override) 85%,#000)}
html.ac-skin[data-ac-accent]{--ac-accent:var(--ac-accent-override)}

/* Sidebar layouts (desktop only; phones keep their own header). */
@media(min-width:861px){
  /* Icon rail: slim column of icons, labels as tooltips. */
  html[data-ac-sidebar="rail"] #app{grid-template-columns:72px minmax(0,1fr)}
  html[data-ac-sidebar="rail"] .topbar{width:72px;padding:18px 10px;align-items:center}
  html[data-ac-sidebar="rail"] .topbar .brand{width:44px;height:44px;padding:0;overflow:hidden;border-radius:10px}
  html[data-ac-sidebar="rail"] .topbar .brand-artwork{width:150px;max-width:none;height:44px;object-fit:cover;object-position:left center}
  html[data-ac-sidebar="rail"] .nav{justify-content:center;width:44px;height:40px;padding:0;font-size:0;gap:0}
  html[data-ac-sidebar="rail"] .nav:before{content:none}
  html[data-ac-sidebar="rail"] .nav:after{margin:0}
  html[data-ac-sidebar="rail"] .account{align-items:center;padding:12px 0 0;font-size:0}
  html[data-ac-sidebar="rail"] .account>*:not(#sign-out):not(.ac-appearance-button){display:none!important}
  html[data-ac-sidebar="rail"] .account .text-button{font-size:.56rem;letter-spacing:0}
  html[data-ac-sidebar="rail"] .topbar .brand{width:46px}

  /* Top bar: navigation across the top, full width for wide tables. */
  html[data-ac-sidebar="top"] #app{display:block}
  html[data-ac-sidebar="top"] .topbar{position:sticky;flex-direction:row;align-items:center;width:100%!important;height:64px;min-height:0;padding:0 24px;gap:22px}
  html[data-ac-sidebar="top"] .topbar .brand{padding:0;flex:none}
  html[data-ac-sidebar="top"] .topbar .brand-artwork{width:150px}
  html[data-ac-sidebar="top"] .topbar nav{flex-direction:row;flex:1;gap:2px;overflow-x:auto;scrollbar-width:none}
  html[data-ac-sidebar="top"] .nav{width:auto;white-space:nowrap;padding:8px 9px;font-size:.82rem;gap:7px}
  html[data-ac-sidebar="top"] #company-name{display:none}
  html[data-ac-sidebar="top"] .nav:before{content:none}
  html[data-ac-sidebar="top"] .account{flex-direction:row;align-items:center;gap:14px;margin:0;padding:0 0 0 18px;border-top:0;border-left:1px solid rgba(255,255,255,.12);white-space:nowrap}
  html.ac-skin[data-ac-sidebar="top"] .account{border-left-color:var(--ac-sidebar-line)}
  html[data-ac-sidebar="top"] .app-main{max-width:1600px;margin:0 auto}

  /* Floating: the sidebar sits inset as a rounded card. */
  html[data-ac-sidebar="floating"] #app{padding-left:12px}
  html[data-ac-sidebar="floating"] .topbar{top:12px;height:calc(100vh - 24px);min-height:0;margin:12px 0;border-radius:16px;box-shadow:0 10px 30px rgba(8,25,48,.18)}
}

/* Nav icons — mask images injected by appearance.js as --ac-icon on each item. */
html[data-ac-icons="on"] .nav:before{content:none}
html[data-ac-icons="on"] .nav:after{content:'';order:-1;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ac-icon) center/contain no-repeat;mask:var(--ac-icon) center/contain no-repeat;opacity:.9}

/* Font — self-hosted, so no outside font service is used (the CSP allows fonts from this site only).
   Inter and IBM Plex Sans are variable fonts under the SIL Open Font License (assets/fonts/*-OFL.txt).
   The browser downloads a file only when that font is in use, and the latin-ext part only for letters
   such as ą, č, ę, ė, į, š, ų, ū, ž. "Look default" keeps each look's own font: Slate uses Inter. */
@font-face{font-family:"AC Inter";font-style:normal;font-weight:100 660;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AC Inter";font-style:normal;font-weight:100 660;font-display:swap;src:url(assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"AC Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(assets/fonts/plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AC Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(assets/fonts/plex-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html[data-ac-look]{--ac-font-system:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]),html[data-ac-font="inter"]{--ac-font:"AC Inter",var(--ac-font-system)}
html[data-ac-font="plex"]{--ac-font:"AC Plex Sans",var(--ac-font-system)}
/* Inter draws heavier than the system font: the face caps at 660 (so 700–900 stay readable, no faux bold) and the busiest text steps down */
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app,html[data-ac-font="inter"] #app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis-weight:none}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .nav,html[data-ac-font="inter"] #app .nav{font-weight:520}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app label,html[data-ac-font="inter"] #app label,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .text-button,html[data-ac-font="inter"] #app .text-button,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .tab,html[data-ac-font="inter"] #app .tab{font-weight:560}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .primary,html[data-ac-font="inter"] #app .primary{font-weight:600}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .view-heading h1,html[data-ac-font="inter"] #app .view-heading h1{font-weight:620}
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .dense-table th,html[data-ac-font="inter"] #app .dense-table th,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app .eyebrow,html[data-ac-font="inter"] #app .eyebrow{font-weight:600}
html[data-ac-font="system"]{--ac-font:var(--ac-font-system)}
html[data-ac-font] #app,html[data-ac-font] #app input,html[data-ac-font] #app select,html[data-ac-font] #app button,html[data-ac-font] #app textarea,
html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app input,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app select,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app button,html:is([data-ac-look="slate"],[data-ac-look="ledger"]):not([data-ac-font]) #app textarea{font-family:var(--ac-font)}

/* Text size — multiplies with Design mode's own --design-font-scale. */
html[data-ac-look]{font-size:calc(var(--ac-base-size,16px) * var(--design-font-scale,1) * var(--ac-text-scale,1))}
html[data-ac-text="s"]{--ac-text-scale:.93}
html[data-ac-text="l"]{--ac-text-scale:1.07}
html[data-ac-text="xl"]{--ac-text-scale:1.15}

/* Button size (Standard = no attribute, so Design mode's setting still applies). */
html[data-ac-buttons="compact"] #app .primary{min-height:30px;padding:5px 10px;font-size:.76rem}
html[data-ac-buttons="compact"] #app .text-button{font-size:.76rem}
html[data-ac-buttons="large"] #app .primary{min-height:44px;padding:11px 18px;font-size:.95rem}
html[data-ac-buttons="large"] #app .text-button{font-size:.92rem}
html[data-ac-buttons="xl"] #app .primary{min-height:52px;padding:14px 22px;font-size:1.02rem}
html[data-ac-buttons="xl"] #app .text-button{font-size:1rem}
html[data-ac-buttons="xl"] #app .row-action,html[data-ac-buttons="xl"] #app .action-cell .text-button{padding:8px 6px}
html[data-ac-buttons]:not([data-ac-sidebar="rail"]) #app .account .text-button{font-size:.78rem}

/* Density — row height, summary height and field height together. */
html[data-ac-density="compact"] .dense-table th,html[data-ac-density="compact"] .dense-table td{padding-top:6px;padding-bottom:6px}
html[data-ac-density="compact"] .register-group-name,html[data-ac-density="compact"] .register-total,html[data-ac-density="compact"] .job-group>summary,html[data-ac-density="compact"] .job-group>summary>.register-group-summary{min-height:44px}
html[data-ac-density="compact"] .register-group-name,html[data-ac-density="compact"] .register-total{padding-top:6px;padding-bottom:6px}
html[data-ac-density="compact"] .nav{padding-top:7px;padding-bottom:7px}
html[data-ac-density="comfortable"] .dense-table th,html[data-ac-density="comfortable"] .dense-table td{padding-top:13px;padding-bottom:13px}
html[data-ac-density="comfortable"] .register-group-name,html[data-ac-density="comfortable"] .register-total,html[data-ac-density="comfortable"] .job-group>summary,html[data-ac-density="comfortable"] .job-group>summary>.register-group-summary{min-height:66px}
html[data-ac-density="spacious"] .dense-table th,html[data-ac-density="spacious"] .dense-table td{padding-top:17px;padding-bottom:17px}
html[data-ac-density="spacious"] .register-group-name,html[data-ac-density="spacious"] .register-total,html[data-ac-density="spacious"] .job-group>summary,html[data-ac-density="spacious"] .job-group>summary>.register-group-summary{min-height:76px}
html[data-ac-density="spacious"] .app-main{padding-top:40px}
html[data-ac-density="spacious"] .nav{padding-top:13px;padding-bottom:13px}

/* Table style */
/* Stripes are mixed with the solid panel colour (not transparent) so pinned
   columns and headers never show the cells scrolling underneath them. */
html[data-ac-tables="zebra"] .dense-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ac-hover,#f4f7fb) 75%,var(--ac-panel,#fff))!important}
html[data-ac-tables="zebra"] .dense-table tbody tr:hover td{background:var(--ac-hover,#eaf0fa)!important}
/* "Lines" (owner, 2026-10-30): horizontal lines only, so it looks different from Grid. The Jobs table keeps the line
   after its pinned Job column (a shadow, not a border). */
html[data-ac-tables="lines"] .dense-table th,html[data-ac-tables="lines"] .dense-table td{border-left-color:transparent!important;border-right-color:transparent!important}
html[data-ac-tables="grid"] .dense-table th,html[data-ac-tables="grid"] .dense-table td{border:1px solid var(--ac-line-strong,#c9d3e1)!important}

/* Numbers */
html[data-ac-numbers="mono"] .number-cell,html[data-ac-numbers="mono"] .register-total,html[data-ac-numbers="mono"] .report-metric b,html[data-ac-numbers="mono"] .project-card .metric b{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.84em;letter-spacing:-.01em}
html[data-ac-numbers="bold"] .number-cell,html[data-ac-numbers="bold"] .register-total,html[data-ac-numbers="bold"] .project-card .metric b{font-weight:700;color:var(--ac-ink,var(--ink))}
html[data-ac-numbers="bold"] .register-total small{font-weight:600}

/* Corners (overrides the look's own radius) */
html[data-ac-corners="sharp"]{--ac-radius:0px}
html[data-ac-corners="round"]{--ac-radius:14px}
html[data-ac-corners] .project-grid,html[data-ac-corners] .data-list,html[data-ac-corners] .job-groups,html[data-ac-corners] .entry-form,html[data-ac-corners] .report-summary,html[data-ac-corners] .member-plan-summary,html[data-ac-corners] .job-group{border-radius:var(--ac-radius)!important}
html[data-ac-corners] .primary,html[data-ac-corners] input,html[data-ac-corners] select,html[data-ac-corners] .nav{border-radius:calc(var(--ac-radius) * .6)!important}
html[data-ac-look="contrast"] .account .text-button,html[data-ac-look="contrast"] .account{color:#fff}

/* Rounded panels clip their corners with overflow:clip (not hidden): a clipped box is not a scroll
   container, so scrolling a form into view moves the page, not the panel's contents (which used to
   hide a project's header). While a worker/job suggestion list is open, the panels around it let it
   show over whatever is below. */
html.ac-skin .data-list:has(.inline-suggestion-list:not(.hidden)),html.ac-skin .job-groups:has(.inline-suggestion-list:not(.hidden)),html[data-ac-look="studio"] .job-group:has(.inline-suggestion-list:not(.hidden)){overflow:visible}

/* Finished jobs (owner, 2026-10-21/22): the whole row greyed in every look and table style, using each look's own
   muted colour (so Midnight stays dark). Profit and margin keep their red/green. Sub-group rows use the look's
   second panel colour. */
html.ac-skin .job-table-scroll .dense-table tbody tr.job-finished>td,
html.ac-skin .job-table-scroll .dense-table tbody tr.job-finished:hover>td,
html[data-ac-tables] .job-table-scroll .dense-table tbody tr.job-finished>td,
html[data-ac-tables] .job-table-scroll .dense-table tbody tr.job-finished:hover>td{background:color-mix(in srgb,var(--ac-muted,#7b8597) 24%,var(--ac-panel,#fff))!important}
html.ac-skin .job-table-scroll .dense-table tbody tr.job-finished>td:not(.positive):not(.negative),
html.ac-skin .job-table-scroll .dense-table tbody tr.job-finished .sub-job-label,
html.ac-skin .job-table-scroll .dense-table tbody tr.job-finished .job-name-label{color:var(--ac-muted)}
html.ac-skin .job-table-scroll .dense-table tbody tr.sub-group-row>td{background:var(--ac-panel-2)}
html.ac-skin .sub-group-label .sub-job-toggle{color:var(--ac-ink)}
/* A wide table directly inside a rounded list scrolls sideways inside it (owner, 2026-10-29). With overflow:clip
   the right-hand columns (Team, Reports, Projects table) were cut off and unreachable on laptops and iPads.
   Lists holding forms keep clip, so their job and worker suggestion lists can still reach past the edge. */
html.ac-skin .data-list:has(> .dense-table),html.ac-skin .project-grid.table-layout{overflow-x:auto;overflow-y:hidden}