/* catalog page styles: Products & Services, Recurring Invoices and Tags (ui/items.js, ui/recurring.js, ui/tags.js). Page-specific rules only: the tokens and the
   shared parts (buttons, tables, tabs, menus, status badges) live in app.css. Every class here is either a shared one used as it is or carries the cg-, cat-, rec-,
   cp- or ti- prefix, so another page's stylesheet never meets it. Wave's look (V, 11 Oct 2026): 12px cards, pill buttons, 40px fields in #B2CFEB, 56px table rows,
   a bold blue link and a 32px circle caret for row actions, segmented tabs with a count bubble, left-labelled plain forms for the older Wave pages.
   Motion: press feedback .97 in 140ms, hover only where a pointer can hover, nothing animates on a keyboard action, reduced motion is handled in app.css.
   The row menus and dialogs are the shell's (app.css: .act-cell, .circle-btn, .menu, dialog.dlg), so this file draws none of them. */

/* ---- Values this page family repeats, named once so no rule below carries a one-off colour or shadow. They belong in app.css with the other tokens (shared needs
   in the report); until then they live here under the cg- prefix. ---- */
:root{--cg-purple:#5b2fc9;--cg-shadow-card:0 1px 4px rgba(24,33,39,.12);--cg-shadow-pop:0 8px 24px rgba(24,33,39,.16)}

/* ---- Page frame: lists are about 1040px wide, forms about 960px (Wave) ---- */
.cat-w{width:100%;max-width:1040px}
.cat-f{width:100%;max-width:960px}
.cat-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.cat-tabs{display:flex;justify-content:center;padding-top:16px;border-top:1px solid var(--divider)}
.cat-tabs .seg button{display:inline-flex;align-items:center}
.cg-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--bg-panel);color:var(--text-primary);font-size:var(--type-2xs);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.seg button[aria-selected=true] .cg-count{background:var(--accent-soft);color:var(--accent)}
.cat-tabs .seg{max-width:100%}
@media (max-width:520px){
  .cat-tabs .seg{flex-wrap:nowrap}
  .cat-tabs .seg button{padding:0 10px;white-space:nowrap}
  .cg-count{margin-left:4px}
}
.cat-filterline{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:var(--type-s)}
.cat-filterline .cg-count{margin-left:0;background:var(--accent-soft);color:var(--accent)}
.cat-filters{display:grid;grid-template-columns:minmax(0,320px)}

/* ---- Row actions of the plain Wave lists (Products & Services, Tags): a pencil and an archive icon. The recurring list uses the shell's link and circle caret. ---- */
.cg-ias{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px}
.cg-ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:transparent;color:var(--accent);text-decoration:none;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.cg-ib:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){
  .cg-ib:hover{background:var(--accent-soft)}
}

/* ---- The three lists ---- */
.table.cg-rl td.t-sched .sub{margin-top:2px}
@media (min-width:960px){
  .table.cg-rl th.state,.table.cg-rl td.state{text-align:left;padding:0 18px 0 0}
  .table.cg-rl th.state{padding:0 18px 10px 0}
  .table.cg-rl th.num,.table.cg-rl td.num{padding-right:18px}
  .table.cg-ps th.num,.table.cg-ps td.num{padding-right:18px}
  .table.cg-ps td.num .sub{text-align:right}
  .table.cg-tg td.text{max-width:420px}
}
@media (max-width:959px){
  .table.cg-ps tr{grid-template-columns:minmax(0,1fr) auto}
  .table.cg-ps td.name{grid-column:1;grid-row:1;align-self:center}
  .table.cg-ps td.act{grid-column:2;grid-row:1;width:auto;align-self:center}
  .table.cg-ps td.act .cg-ias{margin-right:-10px}
  .table.cg-ps td.num{grid-column:1 / -1;grid-row:2;text-align:left}
  .table.cg-ps td.num[data-label]::before{display:none}
  .table.cg-ps td.num:empty{display:none}
  .table.cg-tg tr{grid-template-columns:minmax(0,1fr) auto}
  .table.cg-tg td.name{grid-column:1;grid-row:1;align-self:center}
  .table.cg-tg td.act{grid-column:2;grid-row:1;width:auto;align-self:center}
  .table.cg-tg td.act .cg-ias{margin-right:-10px}
  .table.cg-tg td.text{grid-column:1 / -1}
  .table.cg-tg td.text:empty{display:none}
  .table.cg-tg td.text[data-label]::before{display:none}
  .table.cg-rl tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .table.cg-rl td.name{grid-column:1;grid-row:1}
  .table.cg-rl td.state{grid-column:2;grid-row:1;text-align:right}
  .table.cg-rl td.t-title{grid-column:1 / -1;grid-row:2}
  .table.cg-rl td.t-title:empty{display:none}
  .table.cg-rl td.t-title[data-label]::before{display:none}
  .table.cg-rl td.t-sched{grid-column:1;grid-row:3}
  .table.cg-rl td.t-next{grid-column:2;grid-row:3}
  .table.cg-rl td.num{grid-column:1;grid-row:4;align-self:center}
  .table.cg-rl td.act{grid-column:2;grid-row:4;text-align:right;width:auto}
}

/* ---- The Due now strip (kept from before, in Wave's pale blue) ---- */
.panel.due{background:var(--bar-bg);border-color:var(--bar-line)}

/* ---- The empty Recurring Invoices page: a label, a headline, a paragraph, one button, two short blocks ---- */
.rec-hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0 8px}
.rec-kicker{font-size:var(--type-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-purple)}
.rec-hero h1{max-width:640px;font-family:Georgia,'Times New Roman',serif;font-size:var(--type-xl);font-weight:700;line-height:1.15;color:var(--text-primary)}
.rec-lede{max-width:560px;color:var(--text-secondary);font-size:var(--type-m)}
.rec-feats{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;width:100%;margin-top:24px;padding-top:24px;border-top:1px solid var(--divider)}
.rec-feat h2{font-size:var(--type-m);font-weight:700;margin-bottom:4px}
.rec-feat p{color:var(--text-secondary)}
@media (min-width:960px){.rec-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}}

/* ---- A plain Wave form (Products & Services, Tags): the label at the left, grey and small, a red star for what is required ---- */
.cg-form{gap:18px;padding:24px 20px}
.cg-intro{max-width:640px;color:var(--text-secondary)}
.cg-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}
.cg-row[hidden]{display:none}
.cg-lbl{font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.cg-req{color:var(--flag);margin-left:3px}
.cg-ctl{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:420px}
.cg-ctl input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent)}
.cg-help{font-size:var(--type-xs);color:var(--text-secondary);line-height:1.4}
/* an account select with Wave's plus button beside it (Products & Services, once the business has a chart of accounts) */
.cg-pick{display:flex;align-items:center;gap:8px;min-width:0}
.cg-pick select{flex:1 1 auto;min-width:0}
.cg-form .cg-actions{justify-content:flex-start;margin-top:4px}
@media (min-width:960px){
  .cg-row{grid-template-columns:180px minmax(0,1fr);gap:16px}
  .cg-lbl{padding-top:12px}
  .cg-row:has(input[type=checkbox]) .cg-lbl{padding-top:2px}
  .cg-form .cg-actions{padding-left:196px}
}

/* ---- The recurring invoice form: Wave's invoice card ---- */
.rec-form{gap:18px;padding:24px 20px;box-shadow:var(--cg-shadow-card)}
.rec-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 16px;border:1px solid var(--divider);border-radius:var(--radius-sm);background:var(--bg-panel-2);color:var(--text-primary);font-size:var(--type-s);font-weight:700;text-align:left;transition:background 120ms var(--ease)}
.rec-bar .icon{flex:none}
.rec-bar[aria-expanded=true] .icon{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.rec-bar:hover{background:var(--accent-soft)}}
.rec-bar-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:4px 4px 8px}
.rec-biz{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.rec-biz .rowlink{margin-top:6px;font-size:var(--type-s)}
.rec-doc{display:flex;flex-direction:column;gap:10px;min-width:0}
input.rec-title{min-height:52px;font-size:var(--type-l);font-weight:400;text-align:right}
.rec-form .top{gap:24px}
.rec-mrow{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:center}
.rec-mlbl{font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.rec-cols{display:flex;justify-content:flex-start}
.rec-cols .btn.quiet{display:inline-flex;align-items:center;gap:6px}
.rec-totals{align-items:flex-end;gap:10px}
.rec-trow{display:flex;align-items:center;justify-content:flex-end;gap:16px;width:100%;max-width:520px}
.rec-trow>span:first-child{color:var(--text-secondary)}
.rec-trow.total>span:first-child{font-weight:700;color:var(--text-primary)}
.rec-trow .amt{min-width:120px;text-align:right}
.rec-trow.total .amt{font-weight:700}
.rec-trow select{flex:0 1 280px;width:280px;max-width:100%;min-width:0}
.rec-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--divider);border-radius:var(--radius)}
.rec-card-h{display:flex;align-items:center;gap:10px}
.rec-card-h h2{font-size:var(--type-m);font-weight:700}
.cg-new{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:var(--ok-bg);color:var(--ok-ink);font-size:var(--type-2xs);font-weight:700;line-height:1}
.rec-over{background:var(--bg-panel-2)}
@media (max-width:520px){
  .rec-trow{flex-wrap:wrap}
  .rec-trow.total select{order:3;flex:1 1 100%;width:100%}
}
@media (min-width:960px){
  input.rec-title{font-size:var(--type-xxl)}
  .rec-bar-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rec-form .top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .rec-mrow{grid-template-columns:150px minmax(0,1fr);gap:12px}
  .rec-mlbl{text-align:right}
}

/* ---- The customer box: an outlined box, "Add a customer", a search list, the chosen customer as a card ---- */
.cp-box{display:flex;flex-direction:column;gap:8px;min-height:150px;min-width:0;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-inset)}
.cp-box.cp-empty{align-items:center;justify-content:center;padding:0}
.cp-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;flex:1 1 auto;min-height:148px;border-radius:var(--radius-sm);color:var(--accent);font-size:var(--type-m);font-weight:700;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.cp-add:active{transform:matrix(.97,0,0,.97,0,0)}
.cp-none{color:var(--text-secondary)}
.cp-box.cp-set{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px}
.cp-card{display:flex;flex-direction:column;min-width:0;line-height:1.45;overflow-wrap:anywhere}
.cp-list{list-style:none;display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
.cp-opt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-xs);cursor:pointer}
.cp-opt.on{background:var(--accent-soft)}
.cp-opt .sub{font-size:var(--type-xs);color:var(--text-secondary)}
.cp-create{display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);padding:0 12px;border-top:1px solid var(--divider);color:var(--accent);font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){.cp-add:hover{background:var(--accent-soft)}.cp-opt:hover{background:var(--bg-panel-2)}.cp-opt.on:hover{background:var(--accent-soft)}}

/* ---- Wave's tag field: chips and a search box in one outlined field, the counter, the help line ---- */
.taginput{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:640px}
.ti-box{position:relative}
.ti-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:var(--hit);padding:4px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-inset);transition:border-color 120ms var(--ease)}
.ti-field:focus-within{border-color:var(--accent);outline:2px solid var(--accent)}
.ti-chips{display:contents}
.ti-chip{display:inline-flex;align-items:center;gap:2px;min-height:28px;padding:0 4px 0 10px;border-radius:var(--pill);background:var(--accent-soft);color:var(--text-primary);font-size:var(--type-s);font-weight:600}
.ti-chip.off{color:var(--text-tertiary)}
.ti-x{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--accent)}
.ti-x::after{content:"";position:absolute;inset:-9px}
.ti-input{flex:1 1 140px;min-width:120px;min-height:32px;padding:0 4px;border:0;border-radius:0;background:transparent}
.ti-input:focus-visible{outline:none;border-color:transparent}
.ti-count{margin-left:auto;font-size:var(--type-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ti-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;list-style:none;max-height:240px;overflow-y:auto;padding:6px;background:var(--bg-panel);border:1px solid var(--divider);border-radius:var(--radius);box-shadow:var(--cg-shadow-pop)}
.ti-opt{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:var(--radius-xs);cursor:pointer}
.ti-opt.on{background:var(--accent-soft)}
.ti-opt.off{color:var(--text-tertiary)}
.ti-opt.new{color:var(--accent);font-weight:700}
.ti-info{display:flex;align-items:center;min-height:40px;padding:0 10px;color:var(--text-secondary)}   /* a line of words in the list, not a choice */
.ti-help{display:flex;align-items:center;gap:6px;font-size:var(--type-xs);color:var(--text-secondary)}
@media (hover:hover) and (pointer:fine){.ti-opt:hover{background:var(--bg-panel-2)}.ti-opt.on:hover{background:var(--accent-soft)}}

/* ---- The template page (Wave's /view): the steps, the facts in a step, the schedule fields, the printed invoice below ---- */
.rec-tl{list-style:none;display:flex;flex-direction:column;gap:12px}
.rec-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.rec-step:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:-12px;width:2px;background:var(--divider)}   /* the line that joins one circle to the next */
.rec-step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid var(--line-strong);border-radius:50%;background:var(--bg-panel);color:var(--text-secondary);font-size:var(--type-s);font-weight:700}
.rec-step.done .rec-step-n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rec-step.open .rec-step-n{border-color:var(--accent);color:var(--accent)}
.rec-step-b{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:16px 20px;border:1px solid var(--divider);border-radius:var(--radius);background:var(--bg-panel);box-shadow:var(--cg-shadow-card)}
.rec-step.later .rec-step-b{background:var(--bg-panel-2);color:var(--text-secondary);box-shadow:none}
.rec-step-b h2{font-size:var(--type-m);font-weight:700;color:var(--text-primary)}
.rec-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px}
.rec-facts:empty{display:none}
.rec-facts dt{font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.rec-facts dd{overflow-wrap:anywhere}
.rec-prev{display:grid;min-width:0}   /* the printed invoice sits in the middle, as Wave's preview does */
.rec-sched{display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}
.rec-sched .cg-ctl{max-width:none}
.rec-sched .cg-ctl>input[type=date]{max-width:240px}
.rec-inline,.rec-inl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.rec-inl{display:inline-flex}
.rec-inline select,.rec-inline input{width:auto;min-width:0}
.rec-inline select{min-width:140px}
.rec-inline input.n{width:80px}
.rec-w{color:var(--text-secondary)}
.rec-next{min-height:22px;font-weight:700}
.rec-acts{display:flex;flex-wrap:wrap;gap:10px}