/* Artisan demonstration, a van tablet. The shared kit gives the
   components; this file gives the trade its own look (work blue,
   high-visibility amber, square corners, tabs
   across the top) and what the kit does not carry: the job being
   billed, the paper sheet of a quote or an invoice, the signature. */

/* IDENTITY: type, corners, weights in both themes; colours in the light one. */
:root{--gm-font:Inter,system-ui,sans-serif;--gm-radius-sm:3px;--gm-radius-md:5px;--gm-radius-lg:6px;--gm-radius-xl:8px;--gm-radius-pill:4px;
  --gm-weight-regular:400;--gm-weight-medium:600;--gm-weight-bold:600;--gm-weight-black:800;--gm-weight-heading:800;--gm-content-max:1320px;
  --ar-top:#12203f;--ar-top-2:#22345f;--ar-amber:#ffb300;--ar-on-top:#fff;--ar-on-top-2:#b7c2dc}
:root[data-theme="light"]{--gm-bg:#e9edf3;--gm-surface:#fff;--gm-surface-sunken:#eef1f6;--gm-line:#cfd6e2;--gm-line-strong:#aab4c6;--gm-edge:#7c879c;
  --gm-ink:#12203f;--gm-ink-2:#33415f;--gm-ink-3:#5d6a85;--gm-brand:#1b47b8;--gm-brand-strong:#153a99;--gm-brand-soft:#e3eafb;--gm-brand-text:#153a99;--gm-highlight:#ffb300;
  --gm-nav:#12203f;--gm-nav-line:#12203f;--gm-on-nav:#fff;--gm-on-nav-2:#b7c2dc;--gm-shadow-1:none}
body{font-family:var(--gm-font)}
.gm-num{font-variant-numeric:tabular-nums;font-weight:600}
.gm-metric__value{font-weight:800;letter-spacing:-.03em}
.gm-panel,.gm-metric,.ax-card,.ar-doc{border-color:var(--gm-line-strong)}
.gm-page-header__title{font-weight:800;letter-spacing:-.02em}
.gm-metric--primary{box-shadow:inset 0 5px 0 var(--ar-amber)}
.gm-metric--primary .gm-metric__meaning,.gm-metric--primary .gm-metric__note{color:var(--gm-on-nav-2)}
.gm-metric--primary .gm-metric__note{border-color:var(--ar-top-2)}
.gm-btn{border-radius:var(--gm-radius-md);font-weight:800}

/* SHELL: one dark bar, firm at left, large tabs, the van and the hour at right. */
.ar-shell{min-height:100dvh;background:var(--gm-bg);color:var(--gm-ink)}
.ar-top{position:sticky;top:0;z-index:10;display:flex;align-items:stretch;gap:20px;height:64px;padding:0 24px;background:var(--ar-top);color:var(--ar-on-top)}
.ar-brand{display:grid;align-content:center;color:inherit;text-decoration:none;line-height:1.15;padding-right:20px;border-right:1px solid var(--ar-top-2)}
.ar-brand b{font-size:1.125rem;font-weight:800;letter-spacing:-.01em}
.ar-brand span{font-size:.75rem;color:var(--ar-on-top-2)}
.ar-nav{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0}
.ar-tab{display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--ar-on-top-2);font-weight:600;font-size:.9375rem;text-decoration:none;box-shadow:inset 0 -4px 0 transparent}
.ar-tab .gm-icon{width:18px;height:18px}
.ar-tab:hover{color:var(--ar-on-top);background:var(--ar-top-2)}
.ar-tab[aria-current="page"]{color:var(--ar-on-top);box-shadow:inset 0 -4px 0 var(--ar-amber)}
.ar-demo,.ar-van{align-self:center;font-size:.8125rem;white-space:nowrap}
.ar-demo{padding:3px 8px;border:1px solid var(--ar-on-top-2);border-radius:3px;color:var(--ar-on-top-2)}
.ar-van{font-family:"Plex Mono",monospace;color:var(--ar-on-top)}
.ar-theme{align-self:center;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:5px;background:var(--ar-top-2);color:var(--ar-on-top);cursor:pointer}
.ar-theme .gm-icon{width:18px;height:18px}
.ar-main{max-width:calc(var(--gm-content-max) + 48px);margin-inline:auto;padding:22px 24px 40px}

/* A whole list line is one link. */
.ar-line{display:flex;align-items:flex-start;gap:var(--gm-space-3);flex:1;min-width:0;color:inherit;text-decoration:none}
.gm-line:has(.ar-line):hover{background:color-mix(in srgb,var(--gm-surface-sunken) 60%,transparent)}
.gm-line.ar-on{background:var(--gm-brand-soft);box-shadow:inset 4px 0 0 var(--gm-brand)}
.gm-lines>.gm-line:first-child{border-top:0}
.ar-empty{display:flex;align-items:center;gap:var(--gm-space-2);padding:var(--gm-space-4) var(--gm-space-6);color:var(--gm-ink-3);font-size:var(--gm-text-sm)}
.ar-empty .gm-icon{width:18px;height:18px;color:var(--gm-brand)}
.ar-end{text-align:right}
.ar-none{color:var(--gm-ink-3)}

/* LIST LEFT, OPEN ITEM RIGHT */
.ar-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--gm-space-5);align-items:start}
.ar-two--doc{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.ax:has(.ar-two),.ax:has(.ar-table){height:auto;min-height:0}
.ax-card:has(.ar-table){background:var(--gm-surface);border:1px solid var(--gm-line-strong);border-radius:var(--gm-radius-lg);overflow:hidden}
.ar-table th:first-child{width:44%}
.ar-table .ax-cell{white-space:normal;height:auto;padding-block:var(--gm-space-3)}
.ar-table .ax-open{height:auto;padding:0;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;cursor:pointer}
.ar-table span.ax-open{cursor:default}
.ar-table .ax-name{max-width:none;font-weight:var(--gm-weight-bold);white-space:normal}
.ar-table .ax-sub{white-space:normal}
.ar-table .ax-th:not(:first-child){text-align:left;padding-inline:10px}
.ar-table .ax-th.ax-th--end{text-align:right}
.ar-table .ax-cell.ar-end{text-align:right;white-space:nowrap}
.ar-table .ax-row{cursor:default}
.ar-table tr[hidden]{display:none}
.ar-slot{color:var(--gm-info-text);font-weight:var(--gm-weight-bold);font-size:var(--gm-text-sm)}

/* THE JOB BEING BILLED */
.ar-job .gm-panel__body{display:grid;gap:var(--gm-space-3)}
.ar-why{font-size:var(--gm-text-lg);font-weight:var(--gm-weight-bold);color:var(--gm-ink)}
.ar-known{display:flex;gap:var(--gm-space-2);padding:var(--gm-space-3) var(--gm-space-4);background:var(--gm-surface-sunken);border-radius:var(--gm-radius-md);color:var(--gm-ink-2);font-size:var(--gm-text-sm);line-height:1.45}
.ar-known .gm-icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gm-ink-3)}
.ar-lines{width:100%;border-collapse:collapse;font-size:var(--gm-text-md)}
.ar-lines th{padding:0 0 var(--gm-space-2);border-bottom:1px solid var(--gm-line-strong);color:var(--gm-ink-3);font-size:var(--gm-text-xs);font-weight:var(--gm-weight-bold);text-align:left}
.ar-lines th.ar-end{text-align:right}
.ar-lines td{padding:5px 0;border-bottom:1px solid var(--gm-line);vertical-align:middle}
.ar-name{display:block;font-weight:var(--gm-weight-bold);color:var(--gm-ink)}
.ar-sub{display:block;color:var(--gm-ink-3);font-size:var(--gm-text-xs)}
.ar-step{display:inline-flex;align-items:center;gap:var(--gm-space-2)}
.ar-step button{width:34px;height:34px;border:0;border-radius:var(--gm-radius-sm);background:var(--gm-surface);box-shadow:inset 0 0 0 1px var(--gm-line-strong);color:var(--gm-ink);font:inherit;font-size:1.25rem;font-weight:var(--gm-weight-bold);cursor:pointer}
.ar-step button:hover{box-shadow:inset 0 0 0 1px var(--gm-ink-3)}
.ar-step b{min-width:2.5ch;text-align:center}
.ar-add{display:flex;align-items:center;gap:var(--gm-space-3);font-size:var(--gm-text-sm);font-weight:var(--gm-weight-bold);color:var(--gm-ink-2)}
.ar-add select{flex:1;min-width:0;height:40px;padding:0 var(--gm-space-3);border:0;border-radius:var(--gm-radius-md);background:var(--gm-surface);box-shadow:inset 0 0 0 1px var(--gm-line-strong);color:var(--gm-ink);font:inherit}
.ar-rate{display:grid;grid-template-columns:1fr 1fr;gap:var(--gm-space-2)}
.ar-rate button{height:40px;border:0;border-radius:var(--gm-radius-md);background:var(--gm-surface);box-shadow:inset 0 0 0 1px var(--gm-line-strong);color:var(--gm-ink-2);font:inherit;font-size:var(--gm-text-sm);font-weight:var(--gm-weight-bold);cursor:pointer}
.ar-rate button[aria-pressed="true"]{background:var(--gm-brand-soft);box-shadow:inset 0 0 0 1.5px var(--gm-brand);color:var(--gm-brand-text)}
.ar-sign__k{display:flex;align-items:center;justify-content:space-between;color:var(--gm-ink-2);font-size:var(--gm-text-sm);font-weight:var(--gm-weight-bold)}
.ar-sign canvas{display:block;width:100%;height:84px;margin-top:var(--gm-space-1);border:1.5px dashed var(--gm-edge);border-radius:var(--gm-radius-md);background:#fff;touch-action:none;cursor:crosshair}
.ar-job .gm-btn[disabled]{opacity:.55;cursor:not-allowed}
.ar-done{display:flex;gap:var(--gm-space-2);padding:var(--gm-space-3) var(--gm-space-4);border-radius:var(--gm-radius-md);background:var(--gm-brand-soft);color:var(--gm-brand-text);font-size:var(--gm-text-sm);font-weight:var(--gm-weight-bold);line-height:1.45}
.ar-done .gm-icon{flex:none;width:18px;height:18px;margin-top:2px}
.ar-done a{color:inherit}
.ar-done--mute{background:var(--gm-surface-sunken);color:var(--gm-ink-2)}

/* THE PAPER: quote or invoice */
.ar-doc{display:grid;gap:var(--gm-space-4);padding:var(--gm-space-6);background:var(--gm-surface);border:1px solid var(--gm-line);border-radius:var(--gm-radius-lg);box-shadow:var(--gm-shadow-1)}
.ar-doc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gm-space-3)}
.ar-doc__kind{font-size:var(--gm-text-xl);font-weight:var(--gm-weight-black);letter-spacing:-.01em;color:var(--gm-ink)}
.ar-doc__date{color:var(--gm-ink-3);font-size:var(--gm-text-sm)}
.ar-doc__parties{display:grid;grid-template-columns:1fr 1fr;gap:var(--gm-space-4);padding-block:var(--gm-space-3);border-block:1px solid var(--gm-line);color:var(--gm-ink-2);font-size:var(--gm-text-sm);line-height:1.5}
.ar-doc__parties b{color:var(--gm-ink)}
.ar-doc__what{font-weight:var(--gm-weight-bold);color:var(--gm-ink)}
.ar-doc__lines{width:100%;border-collapse:collapse;font-size:var(--gm-text-sm)}
.ar-doc__lines th{padding-bottom:var(--gm-space-2);border-bottom:1px solid var(--gm-line-strong);color:var(--gm-ink-3);font-size:var(--gm-text-xs);text-align:right}
.ar-doc__lines td{padding:var(--gm-space-2) 0;border-bottom:1px solid var(--gm-line);color:var(--gm-ink-2);text-align:right;white-space:nowrap}
.ar-doc__lines th:first-child,.ar-doc__lines td:first-child{text-align:left;white-space:normal;color:var(--gm-ink)}
.ar-doc__lines th:not(:first-child),.ar-doc__lines td:not(:first-child){padding-left:var(--gm-space-3)}
.ar-doc__totals{display:grid;gap:var(--gm-space-1);justify-content:end;margin:0;font-size:var(--gm-text-sm)}
.ar-doc__totals div{display:grid;grid-template-columns:8rem 7rem;color:var(--gm-ink-2)}
.ar-doc__totals dd{margin:0;text-align:right}
.ar-doc__totals .ar-doc__due{padding-top:var(--gm-space-1);border-top:1px solid var(--gm-line-strong);color:var(--gm-ink);font-size:var(--gm-text-lg);font-weight:var(--gm-weight-black)}
.ar-doc__legal{color:var(--gm-ink-3);font-size:var(--gm-text-xs);line-height:1.5}
.ar-doc__acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gm-space-2)}
.ar-doc__acts .gm-btn[disabled]{opacity:.55;cursor:default}
.ar-sent{padding:var(--gm-space-3) var(--gm-space-4);border-radius:var(--gm-radius-md);background:var(--gm-info-soft);color:var(--gm-ink-2);font-size:var(--gm-text-sm);line-height:1.5}
.ar-sent__k{display:flex;align-items:center;gap:var(--gm-space-2);margin-bottom:var(--gm-space-1);color:var(--gm-info-text);font-weight:var(--gm-weight-bold)}
.ar-sent__k .gm-icon{width:16px;height:16px}

/* Narrow screens: one column, the open item under its list. */
@media (max-width:900px){
  .ar-two,.ar-two--doc{grid-template-columns:minmax(0,1fr)}
  .ar-top{height:auto;flex-wrap:wrap;gap:0 12px;padding:8px 12px 0}
  .ar-brand{border:0;padding:0;flex:1}
  .ar-van{display:none}
  .ar-nav{order:5;flex:0 0 100%;overflow-x:auto;height:44px}
  .ar-tab{padding:0 10px;white-space:nowrap}
  .ar-main{padding:14px 12px 32px}
}

/* Dark theme keeps the work blue instead of the kit's green. */
:root[data-theme="dark"]{--gm-brand:#6d93ff;--gm-brand-strong:#8aa8ff;--gm-on-brand:#0b1020;--gm-brand-soft:#17254a;--gm-brand-text:#a9c0ff;--gm-highlight:#ffb300}

/* Cells of a table in its card keep a gutter; grid children may shrink. */
.ar-table .ax-th:first-child,.ar-table .ax-cell:first-child{padding-left:var(--gm-space-5)}
.ar-job,.ar-job .gm-panel__body>*,.ar-two>*{min-width:0}
.ar-rate button{height:auto;min-height:40px;padding:6px 8px;line-height:1.25}
@media (max-width:600px){
  .ar-add{flex-direction:column;align-items:stretch;gap:var(--gm-space-1)}
  .ar-lines td:first-child{padding-right:var(--gm-space-2)}
}
.ax-bar nav{max-width:100%;overflow-x:auto}