/* The real product's look (owner, 2026-10-09: "renk kullanımı iyi değil … 1990'lardan kalma gibi … bilgilerin önemini anlamakta
   zorlanıyorum"). Loaded after prototype.css and app.css, it keeps the prototype's markup and changes how it reads:
   - calm: a light page, white cards, thin lines, no dark band on every page; the dark colour is the menu alone;
   - colour means something: amber is the one action to take, green done, amber waiting, red late or owed; everything else is grey;
   - hierarchy: the page's figure is the biggest thing on it, a name is bold, what explains it is grey and smaller;
   - the system's own font (San Francisco, Segoe UI, Roboto): crisp on every device and nothing to download. */

:root{
  --bg:#f5f6f8;--surface:#fff;--tint:#f7f8fa;--field:#fff;--soft:#f3f4f6;
  --ink:#111827;--ink2:#374151;--muted:#6b7280;--line:#e5e7eb;--line2:#eef0f3;--line-strong:#d1d5db;
  --navy:#1f2937;--navy2:#374151;--navy-soft:#eef2f7;--link:#1d4ed8;
  --amber:#b45309;--amber-soft:#fef3c7;--amber-ink:#92400e;--amber-on:#fff;
  --green:#15803d;--green-soft:#dcfce7;--red:#b91c1c;--red-soft:#fee2e2;
  --grey:#6b7280;--grey-soft:#f3f4f6;--grey-ink:#4b5563;
  --brand:var(--link);--accent:var(--amber);
  --nav:#111827;--nav-line:#1f2937;--nav-ink:#d1d5db;--nav-muted:#9ca3af;
  --radius-s:6px;--radius:8px;--radius-l:12px;--control:38px;
  --shadow:0 1px 2px rgba(17,24,39,.04);--shadow-pop:0 16px 40px rgba(17,24,39,.16);
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  --f-num:var(--f-ui);
  font-family:var(--f-ui);font-size:14px;color:var(--ink);background:var(--bg);
}
body{background:var(--bg)}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
h2{font-size:16px;font-weight:650;letter-spacing:-.01em}
h3{font-size:15px;font-weight:650}
.num,.money,.lr-amt,td.n,td.r,.band-tiles b,.tile b,.kv strong{font-variant-numeric:tabular-nums}

/* Links read as links by colour, not by an underline on every one. */
a{color:var(--link)}
:is(p,td,dd,li,.kv,.help-list) a:not(.button):not(.badge){text-decoration:none}
:is(p,td,dd,li,.kv,.help-list) a:not(.button):not(.badge):hover{text-decoration:underline}

/* Buttons: one amber action per screen; the rest quiet. */
button,a.button,summary.button{min-height:var(--control);padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
button:hover,a.button:hover,summary.button:hover{background:var(--soft);border-color:#c4c8cf}
button.primary,a.button.primary,.summary-panel button.primary,.next-box :is(button.primary,a.button.primary),
.record-band .band-actions :is(button,a.button).primary,.fp-bar .primary{background:var(--amber);border-color:var(--amber);color:#fff;font-weight:650}
button.primary:hover,a.button.primary:hover,.summary-panel button.primary:hover,.next-box :is(button.primary,a.button.primary):hover,
.record-band .band-actions :is(button,a.button).primary:hover,.fp-bar .primary:hover{background:#92400e;border-color:#92400e}
button.text,a.button.text{border-color:transparent;background:transparent;box-shadow:none;color:var(--link)}
:focus-visible{outline:2px solid #f59e0b;outline-offset:2px}

/* Fields: white boxes with a clear edge. */
input,select,textarea{background-color:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);min-height:40px;padding:8px 11px}
/* A plain select keeps the prototype's chevron (prototype.css), with room for it. */
select{padding-right:30px}
input:focus,select:focus,textarea:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18);outline:none}
label{color:var(--ink2);font-weight:600;font-size:13px}

/* The menu is the one dark surface. */
.sidebar{background:var(--nav)}
.sidebar nav a{color:var(--nav-ink);font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 3px 0 0 #f59e0b}
@media(min-width:701px){.topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}}

/* The page band: the page's title and its figures on the page itself, not in a dark box. */
.record-band{background:transparent;color:var(--ink);border-radius:0;padding:4px 0 6px;margin-bottom:14px;gap:10px}
.record-band h1{color:var(--ink);font-size:28px;letter-spacing:-.02em}
.record-band .back-link{color:var(--muted);font-weight:500;font-size:13.5px}
.record-band .band-lede,.record-band .band-meta{color:var(--muted)}
.record-band .band-row b{color:var(--ink)}
.record-band :is(.band-lede,.band-meta,.band-row) a:not(.button):not(.badge):not(.back-link){color:var(--link);text-decoration:none}
.record-band .band-actions :is(button,a.button,summary.button){background:#fff;border-color:var(--line-strong);color:var(--ink)}
.record-band .band-actions :is(button,a.button,summary.button):hover{background:var(--soft)}
/* A ⋯ menu's items are actions, not links: ink like the menu's buttons, the soft background under the pointer (prototype.css); a danger item stays red. */
.record-band .band-row .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink)}
.record-band .band-tiles{gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.record-band .band-tiles>*{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:14px 16px;color:var(--ink);box-shadow:var(--shadow);gap:2px}
.record-band .band-tiles b{color:var(--ink);font:700 26px/1.15 var(--f-num);letter-spacing:-.02em}
.record-band .band-tiles span{color:var(--muted);font-size:13px;order:-1}
.record-band .band-tiles .red b{color:var(--red)}.record-band .band-tiles .green b{color:var(--green)}.record-band .band-tiles .amber b{color:var(--amber)}
.record-band .band-tiles a:hover{background:#fff;border-color:var(--line-strong)}
.record-band .band-tiles>.is-on{box-shadow:inset 0 0 0 2px #f59e0b}
.record-band .stepper>div{color:var(--muted)}
.record-band .stepper>div::before{background:var(--line)}
.record-band .stepper>.done{color:var(--muted)}.record-band .stepper>.done::before{background:#86efac}
.record-band .stepper>.now{color:var(--ink);font-weight:650}.record-band .stepper>.now::before{background:#f59e0b}
/* A record (a job card, a customer, an invoice) keeps its band as a white card, so its facts read as one block. */
.record-band:has(.stepper,.plate,.avatar){background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px 18px;box-shadow:var(--shadow)}

/* Cards and lists. */
.panel,.lrows,.tile,.tabs{border-color:var(--line);box-shadow:var(--shadow)}
.panel{border-radius:var(--radius-l);padding:16px 18px}
.quiet-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l)}
/* A quiet list of lines (the job's work done in GaragePlug): the line in ink, its note small and on one line at the right. */
.quiet-panel .r>strong{font-weight:500}.quiet-panel .r>small{flex:none;white-space:nowrap}
.lrow{border-top-color:var(--line2);padding:10px 18px;min-height:60px}
.lr-age{white-space:nowrap}
.lrow:hover{background:#fafafa}
.lr-title{font-weight:650;font-size:14.5px;color:var(--ink)}
.lr-title .lr-link{color:var(--ink)}
.lr-sub{font-size:13px}
.lr-amt{font:650 15px var(--f-num)}
.lr-group{background:var(--tint);color:var(--muted);font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none}

/* A status is a soft word, not a filled block; red, amber and green only where they mean something. */
.badge,.chip{padding:3px 9px;font:600 12px/1.25 var(--f-ui);box-shadow:none;background:var(--grey-soft);color:var(--grey-ink)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.amber{background:var(--amber-soft);color:var(--amber-ink)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.navy{background:var(--navy-soft);color:#334155}
.badge.grey{background:var(--grey-soft);color:var(--grey-ink)}

/* Tabs: a line under the words, no box around them. */
.tabs{background:transparent;box-shadow:inset 0 -1px 0 var(--line);border-radius:0;padding:0;margin-bottom:16px}
.tabs a{min-height:42px;padding:6px 12px;font-weight:550;border-bottom-width:2px}
.tabs a:hover{background:transparent;color:var(--ink)}
.tabs a.active{border-bottom-color:#f59e0b;font-weight:650}

/* Filter chips: outline pills; the chosen one is dark. */
.filters a{border-radius:999px;background:#fff;border:1px solid var(--line-strong);color:var(--ink2);font-weight:550;box-shadow:none}
.filters a.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* Tables: quiet headings in sentence case; figures line up. */
th{background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line)}
td{border-bottom-color:var(--line2);font-size:14px}
tr:hover>td{background:#fafafa}
.table-wrap{border-color:var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);background:#fff}

/* A label and its value. */
.kv{border-bottom-color:var(--line2);font-size:14px}
.kv>:first-child{color:var(--muted)}
.home-card .kv strong{font:650 15px var(--f-num)}

/* Tiles of figures: the label above, the figure big. */
.tile{border-radius:var(--radius-l);padding:14px 16px}

/* The next step: amber only around the one thing to do now. */
.next-box{background:#fffbeb;border-color:#fcd34d}

/* Management's Home: what waits for you and the money first, the month's figures across, then the workshop's queues side by side. */
.home{gap:16px}
.home .inbox-card{border:1px solid var(--line);border-left:3px solid #f59e0b;border-radius:var(--radius-l);box-shadow:var(--shadow);padding:16px 18px}
.home .tiles{gap:12px}
.home .tiles .tile{display:grid;align-content:start;gap:2px}
@media(min-width:1100px){
  .home{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;grid-template-areas:"inbox inbox money" "fin fin money" "perf perf perf" "lpo next people"}
  .home>*>.panel,.home>*>.inbox-card{height:100%}
  .home .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home .tiles>a.tile:last-child{grid-column:auto}
}

/* What the dark band wrote in white now reads on white. */
.record-band .band-eyebrow{color:var(--muted);letter-spacing:.02em}
.record-band .band-tiles small{color:var(--muted);opacity:1}
.record-band .band-tiles small a{color:var(--link)}
.band-tiles .red{color:inherit}
.record-band .payer-tag.is-business,.record-band .payer-tag.is-customer{color:var(--ink2);border-color:var(--line-strong)}
.record-band .payer-tag.is-insurance{box-shadow:none}
.record-band .payer-claim{color:var(--ink2)}
.record-band .badge.imported-tag{color:var(--muted);border-color:var(--line-strong)}
.record-band .doc-icon{border-color:var(--line-strong);background:#fff;color:var(--ink)}
.record-band .doc-icon b{color:var(--ink)}.record-band .doc-icon small{color:var(--muted)}
.record-band a.doc-icon:hover{background:var(--soft)}
.record-band .doc-icon.is-off{border-color:var(--line)}
.record-band .band-initials{background:var(--soft);color:var(--ink2)}
.record-band.job-band .band-meta .job-no{color:var(--ink)}
/* The band's people line: its links already stand 44 px tall (inline-flex), so the phone's padding that lifts inline links to 44 px only
   spaces the lines apart; the rows sit close and centred. */
.record-band .band-row{align-items:center;row-gap:4px}
@media(max-width:700px),(pointer:coarse){.record-band .band-row a:not(.button):not(.badge){padding-block:0!important}}
@media(max-width:700px){
  .record-band h1{font-size:21px}
  /* A band figure fits its tile on a phone: it shrinks with the tile and a long amount puts AED on its own line. */
  .record-band:not(.today-band) .band-tiles>*{container-type:inline-size}
  .record-band:not(.today-band) .band-tiles b{white-space:normal;font-size:min(26px,15cqi)}
  .record-band:has(.stepper,.plate,.avatar){padding:14px 14px 16px;border-radius:14px}
}
@media(max-width:700px){.labels-fold>.text{background:#fff;border:1px solid var(--line-strong);color:var(--ink)}}
/* The board's payer pills: outline pills like every chip; an insurer keeps its own colour. */
.band-labels .filters>:is(a,button),.band-labels .filters>a:hover{background:#fff;border:1px solid var(--line-strong);color:var(--ink2);box-shadow:none}
.band-labels .filters>:is(a,button) .n{background:var(--soft);color:var(--muted)}
.band-labels .filters>:is(a,button).is-insurance,.band-labels .filters>a.is-insurance:hover{background:var(--ins);color:var(--ins-ink);border-color:transparent}
.band-labels .filters>:is(a,button).is-insurance .n{background:rgba(255,255,255,.25);color:inherit}
.band-labels .filters>:is(a,button).active,.band-labels .filters>a.active:hover{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b}
.band-labels .filters>:is(a,button).active:not(.is-insurance){background:var(--ink);border-color:var(--ink);color:#fff}
/* Strips of figures: white cards, the figure big, its label grey. */
.stats,.summary-strip{background:transparent;padding:0;gap:12px;color:var(--ink)}
.stats>.stat,.summary-strip>.summary-figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);color:var(--ink)}
.stats .stat strong,.summary-figure .figure{color:var(--ink)}
.stats .stat span,.stats .stat>span:first-child,.summary-figure .label,.summary-figure .note{color:var(--muted)}
.stats .stat a,.summary-figure a{color:var(--link)}
a.stat:hover,.stats a.stat:hover{background:#fff;border-color:var(--line-strong)}
.stat.tone-wait{background:#fffbeb;border-color:#fcd34d}.stat.tone-wait strong{color:var(--amber-ink)}
.record-band .band-tiles .neg,.stats .neg{color:var(--red)}

.payroll-headline .summary-figure{background:#fff;border:1px solid var(--line)}
.payroll-headline .figure,.payroll-headline .summary-figure .figure{color:var(--ink)}.payroll-headline :is(.label,.note){color:var(--muted)}
.record-band .badge.navy{background:var(--navy-soft);color:#334155}
.record-band.job-band .stepper>div small{color:var(--muted)}

/* ---------- Forms (owner, 2026-10-09: "formları 1990'lar gibi yapıyoruz") ----------
   A label over its box, a hint under it in grey; a box as wide as what goes in it (a date, an amount, a phone are short); a form's
   sections read as sections (on a desktop the section's name on the left, its fields on the right); the buttons stay in view at the
   foot of a long form. Every form built from field(), selectField(), checkbox() and h3 + .grid takes it, with no change to its markup. */
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
label .hint,.grid .hint{font-size:12.5px;font-weight:400;color:var(--muted);margin-top:0;line-height:1.45}
.grid{gap:20px 24px}
.grid input:is([inputmode=decimal],[inputmode=numeric]),.grid .num-field{max-width:240px}
.grid input[inputmode=decimal]{text-align:right;font-variant-numeric:tabular-nums}
.grid .date-field{max-width:240px}
.grid select{max-width:380px}
.grid input[type=tel]{max-width:280px}
.grid input[type=email]{max-width:400px}
label.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius);background:#fff;font-weight:500;color:var(--ink);line-height:1.4}
label.check+label.check{margin-top:8px}
label.check input{margin-top:2px}
form h3{font-size:15px;font-weight:650;color:var(--ink);margin:4px 0 14px}
form h3~h3{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.panel>form>.actions:last-child,.panel>form>.grid+.actions{position:sticky;bottom:0;z-index:5;margin:24px -18px -16px;padding:12px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-radius:0 0 var(--radius-l) var(--radius-l)}
/* A form page's foot bar (sheetPage): the same light sticky bar as every other form, what saving does in muted text beside the one button. */
.fp-bar{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);color:var(--ink2);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow)}
.fp-bar .fp-what{color:var(--muted)}
.fp-bar .error:not(:empty){border:1px solid var(--line)}
/* A phone field (platform/ui.ts phoneField): the country code as a short select before the number. */
.phone-row>select{flex:0 0 128px;min-width:0}
/* A refused save's message at the top of its form (public/app.js `formMessage`), when it is about no one field. */
.form-error{margin:0 0 14px;padding:10px 14px;border-radius:var(--radius);background:var(--red-soft);color:var(--red);font-weight:500}
.actions>a:not(.button){display:inline-flex;align-items:center;min-height:var(--control);padding:0 12px;color:var(--ink2);font-weight:600}
@media(min-width:1000px){
  /* A long form: each section's name on the left, its fields on the right. */
  form:has(>h3+.grid){display:grid;grid-template-columns:200px minmax(0,760px);column-gap:48px;align-items:start}
  form:has(>h3+.grid)>*{grid-column:2}
  form:has(>h3+.grid)>h3{grid-column:1;margin:0;padding-top:2px}
  form:has(>h3+.grid)>h3~h3,form:has(>h3+.grid)>h3~h3+*{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
  form:has(>h3+.grid)>.actions{grid-column:1/-1}
}

/* On touch every control a finger hits is at least 44 px (notes/design-system.md, Phone and tablet). */
@media(pointer:coarse){
  :root{--control:44px}
  button,a.button,summary.button,input,select,textarea,.tabs a,.filters a,.filters>button,.actions>a:not(.button){min-height:44px}
}
/* A narrow row with a plate, a status and an age: the status takes the line under the plate, so nothing covers anything. */
@container (max-width:559px){
  .lrows:not(.sel) .lrow:has(>.lr-lead):has(>.lr-status):has(>.lr-age){grid-template-areas:"select lead . . age menu" "select status status status status status" "main main main main amount amount" "meta meta meta meta meta meta" "action action action action action action"}
  .lrows:not(.sel) .lrow:has(>.lr-lead):has(>.lr-status):has(>.lr-age)>.lr-status{margin:6px 0 0;justify-self:start}
}
/* Finance's Home: a queue without a context column takes the whole width. */
@media(min-width:1101px){.desk-layout:not(:has(>.desk-context)){grid-template-columns:228px minmax(0,1fr)}}

/* Amounts (platform/ui.ts `field`, money): "AED" before the box, the figure right-aligned and grouped while the box is not being typed in. */
.money-box{display:flex;align-items:stretch;max-width:240px;min-width:0}
.money-box>.cur{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-strong);border-right:0;border-radius:var(--radius) 0 0 var(--radius);background:var(--soft);color:var(--muted);font-size:13px;font-weight:600}
.money-box>.num-field{flex:1;min-width:0}
.money-box>.cur+.num-field>input{border-top-left-radius:0;border-bottom-left-radius:0}
.money-box input,.lines-table .lc-money input{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.num-field>.num-view{justify-content:flex-end;padding:0 12px;font-variant-numeric:tabular-nums}
label>.money-box{font-weight:400}

/* The picker over a long list (public/app.js `pickers`): the box looks like any other box. */
label>.picker,td>.picker{display:block;position:relative;min-width:0}
.picker>.picker-input{box-sizing:border-box;width:100%;max-width:none;padding-right:30px}
.picker::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.grid>label:has(>.picker){max-width:480px}
.picker-list{font-weight:400}
.picker-option{min-height:40px}
.picker-option[aria-selected="true"]{background:var(--amber-soft)}
@media(pointer:coarse){.picker-option{min-height:44px}}

/* Lines (platform/ui.ts `linesTable`): one header, boxes without their own labels, Remove at the row's end, the totals under the figures. */
.lines{display:grid;gap:10px;min-width:0}
.lines-table{width:100%;border-collapse:separate;border-spacing:0}
.lines-table th{text-align:left;padding:0 6px 6px;font-size:12.5px;white-space:nowrap}
.lines-table thead th:first-child,.lines-table tbody td:first-child{padding-left:0}
.lines-table td{white-space:normal;padding:4px 6px;border:0;vertical-align:top;background:transparent}
.lines-table tr:hover>td{background:transparent}
.lines-table :is(input,select){width:100%;max-width:none}
.lines-table .lc-money,.lines-table .lc-out{width:150px;text-align:right}
.lines-table .lc-qty{width:76px}
.lines-table .lc-qty input{text-align:right}
.lines-table .lc-select{width:215px}
.lines-table .wide{width:auto;min-width:220px}
.lines-table .line-x{width:44px;padding-right:0;text-align:right}
.lines-table .line-remove{min-height:40px;width:40px;padding:0;font-size:22px;font-weight:400;line-height:1;color:var(--muted)}
.lines-table .line-remove:hover{color:var(--red);background:var(--red-soft)}
.line-out{display:flex;align-items:center;justify-content:flex-end;min-height:var(--control);padding:0 12px 0 0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.line-more>td{padding:2px 0 14px}
.line-more .grid{padding:12px 14px;border-radius:var(--radius);background:var(--tint);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.line-more .grid>.span2{grid-column:1/-1}
.line-more[hidden],.line-extra[hidden]{display:none!important}
.lines-table tbody+tbody>tr:first-child>td{border-top:1px solid var(--line2);padding-top:8px}
.lines-table tfoot th{background:transparent;text-align:right;padding:10px 6px 2px;color:var(--muted);font-weight:600;font-size:13px;border:0}
.lines-table tfoot td{padding:10px 18px 2px 6px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums;border:0}
.lines-table tfoot tr:first-child>*{border-top:1px solid var(--line)}
.lines-table tfoot tr:last-child output[data-total="gross"]{font-size:16px}
.lines-diff{margin:0;text-align:right;font-weight:600}
.lines-diff.ok{color:var(--green)}.lines-diff.bad{color:var(--red)}
.lines-diff:empty{display:none}
.lines-add{margin:0}
.lines-add[hidden]{display:none}
@media(max-width:760px){
  /* A phone: each line is a card, each box with its column's name over it. */
  .lines-table,.lines-table tbody,.lines-table tfoot{display:block}
  .lines-table thead{display:none}
  .lines-table tbody{position:relative;padding:12px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius-l);background:#fff}
  .lines-table tbody>tr:first-child{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-right:40px}
  .lines-table tbody+tbody>tr:first-child>td{border-top:0;padding-top:0}
  .lines-table tbody td{display:grid;gap:4px;padding:0;width:auto!important;min-width:0}
  .lines-table tbody td[data-label]::before{content:attr(data-label);font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left}
  .lines-table tbody td.wide,.lines-table tbody td.lc-text,.lines-table tbody td.lc-select{grid-column:1/-1}
  .lines-table tbody td.line-x{position:absolute;top:4px;right:4px}
  .lines-table .line-more{display:block}.line-more>td{display:block;padding:10px 0 0}
  .line-more .grid{padding:10px;grid-template-columns:1fr}
  .line-out{justify-content:flex-start;padding:0}
  .lines-diff{text-align:left}
  .lines-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline}
  .lines-table tfoot :is(th,td){display:block;padding:6px 0;border:0}
  .lines-table tfoot td:empty{display:none}
  .lines-table tfoot td[data-label]::before{content:attr(data-label) "  ";color:var(--muted);font-weight:600;font-size:12.5px}
  .lines-table tfoot tr:first-child>*{border-top:0}
}
.grid input[type=month]{max-width:240px}
.grid .short-field>input{max-width:200px}