/* Podklady — hand-written CSS, no build step. Every colour, size and radius is a :root token. */

@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* colour */
  --paper:#F3F5F8;
  --line:#E2E7EE;
  --line-strong:#C6CFDB;
  --ink:#16202B;
  --muted:#5A6675;
  --primary:#31629B;
  --primary-light:#3B72B0;
  --primary-dark:#264F80;
  --danger:#A02E33;
  --amber:#C9902A;
  --amber-ink:#7A5610;
  --ok:#2E7D4F;
  --ok-ink:#1F5E3A;
  --white:#fff;
  /* one tint per meaning, shared by every badge and notice */
  --tint-ok:color-mix(in srgb,var(--ok) 14%,transparent);
  --tint-warn:color-mix(in srgb,var(--amber) 16%,transparent);
  --tint-bad:color-mix(in srgb,var(--danger) 10%,transparent);
  --tint-neutral:var(--paper);
  --ink-ok:var(--ok-ink);
  --ink-warn:var(--amber-ink);
  --ink-bad:var(--danger);
  /* category palette; CategoryColor.CssClass picks the slot from the category name */
  --cat-0:#2E6B4F;
  --cat-1:#4F46B8;
  --cat-2:var(--amber-ink);
  --cat-3:#A02E68;
  --cat-4:#0F6B76;
  --cat-5:#9C4A22;
  --cat-6:#4E5A6E;
  --cat-7:#57641E;
  --cat-none-ink:#5D646D;
  /* shape */
  --r:8px;
  --r-lg:14px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),
              0 1px 8px color-mix(in srgb,var(--ink) 5%,transparent);
  --shadow-md:0 2px 6px color-mix(in srgb,var(--ink) 6%,transparent),
              0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent);
  --transition:.15s ease;
  /* spacing scale */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  /* type scale */
  --fs-xs:.72rem;
  --fs-sm:.82rem;
  --fs-md:.88rem;
  --fs-base:.95rem;
  --fs-lg:1.05rem;
  --fs-xl:1.15rem;
  --fs-glyph:1.25rem;
  --fs-2xl:1.55rem;
  --fs-h1:1.75rem;
}

*{box-sizing:border-box;margin:0;padding:0}
/* .btn sets display, which beats the user-agent rule for hidden elements. */
[hidden]{display:none!important}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
body.public{display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-5) var(--sp-4) 60px}

h1{font-size:var(--fs-h1);line-height:1.15;letter-spacing:-.02em;font-weight:650}
h2{font-size:var(--fs-lg);font-weight:650;margin:var(--sp-5) 0 var(--sp-2);letter-spacing:.01em}
h3{font-size:var(--fs-base);font-weight:600;margin:var(--sp-4) 0 var(--sp-2)}
a{color:var(--primary)}
a:hover{color:var(--primary-dark)}
.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace}
.small{font-size:var(--fs-sm)}
.muted{color:var(--muted)}
.inline{display:inline}

.container{width:min(1280px,94vw);margin-inline:auto}
.container-narrow{width:min(560px,100%)}
.container-wide{width:min(1280px,100%)}
.content{padding:var(--sp-6) 0 60px}

/* header */
.header{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);
        background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) 0;
              flex-wrap:wrap;row-gap:var(--sp-1)}
.logo{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--fs-xl);
      text-decoration:none;color:var(--ink)}
.logo-mark{width:18px;height:22px;background:var(--primary);border-radius:3px 5px 5px 3px;position:relative}
.logo-mark::after{content:"";position:absolute;right:-3px;top:5px;width:7px;height:8px;
                  background:var(--amber);border-radius:0 3px 3px 0}
.menu{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-base);flex-wrap:wrap;row-gap:2px}
.menu a{text-decoration:none;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r);
        transition:background var(--transition)}
.menu a:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.menu form{display:inline}
.menu > a.active{color:var(--primary);font-weight:600;
                 background:color-mix(in srgb,var(--primary) 9%,transparent)}
.footer{display:flex;justify-content:space-between;padding:var(--sp-5) 0;border-top:1px solid var(--line);
        flex-wrap:wrap;gap:var(--sp-1);
        font-size:var(--fs-sm);color:var(--muted)}

/* language switcher */
.lang-switch{font-family:ui-monospace,monospace;font-size:var(--fs-xs);letter-spacing:.06em}
.lang-switch a{color:var(--muted);text-decoration:none;padding:var(--sp-1) var(--sp-2);border:1px solid transparent;
               border-radius:var(--r-pill);transition:color var(--transition),border-color var(--transition)}
.lang-switch a.active{color:var(--primary);border-color:var(--primary);font-weight:700}
.lang-switch a:hover{color:var(--primary)}
.lang-switch-public{text-align:right;margin-bottom:var(--sp-2)}
.brand-public{display:flex;justify-content:center;margin:2px 0 var(--sp-4)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
           flex-wrap:wrap;margin-bottom:var(--sp-4)}
/* The small uppercase line above a heading; the client page's group headings share it. */
.eyebrow,.upload-group{font-size:var(--fs-xs);font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{color:var(--primary)}

/* buttons and forms */
.btn{display:inline-block;padding:10px var(--sp-4);border-radius:var(--r);font:inherit;font-weight:600;
     font-size:var(--fs-base);border:1px solid transparent;cursor:pointer;text-decoration:none;
     transition:background var(--transition),box-shadow var(--transition),transform var(--transition)}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 15%,transparent)}
.btn-primary:hover{background:var(--primary-light);box-shadow:0 3px 8px color-mix(in srgb,var(--primary) 25%,transparent);
                   transform:translateY(-1px)}
.btn-primary:active{background:var(--primary-dark);transform:none}
.btn-quiet{border-color:var(--line-strong);color:var(--ink);background:var(--white)}
.btn-quiet:hover{border-color:var(--muted);background:var(--paper)}
/* Destructive or irreversible: delete, close, switch off. Last in its card. */
.btn-danger{background:var(--danger);color:var(--white)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 85%,var(--ink))}
.btn-small{padding:6px var(--sp-3);font-size:var(--fs-md)}
.btn-wide{width:100%;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* A text link inside prose that has to be a button (sign out, changed your mind). */
.link-button{background:none;border:none;padding:0;font:inherit;color:var(--primary);
             cursor:pointer;text-decoration:underline}
/* The action of one table or list row: quiet text, coloured on hover. */
.row-action{font:inherit;font-size:var(--fs-md);color:var(--muted);background:none;border:0;padding:0;
            cursor:pointer;text-decoration:none;white-space:nowrap}
.row-action:hover{color:var(--primary);text-decoration:underline}
.row-action-danger:hover{color:var(--danger)}
label{display:block;margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-md);font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=search],select,input[readonly],
input:not([type]),textarea,.import-area{
  width:100%;padding:10px var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r);
  font:inherit;font-size:var(--fs-base);background:var(--white);
  transition:border-color var(--transition),box-shadow var(--transition)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,
select:focus,input:not([type]):focus,textarea:focus,.import-area:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);outline:none}
input[type=file]{margin-top:var(--sp-2);font-size:var(--fs-md)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
hr{border:none;border-top:1px solid var(--line);margin:var(--sp-5) 0}
.check-label{display:flex;align-items:center;gap:var(--sp-2);font-weight:400;margin:var(--sp-4) 0}
/* A compact control inside a toolbar or an inline form. */
.filter-bar select,.filter-bar input[type=search],.item-describe input,.file-move select{
  width:auto;padding:6px var(--sp-2);font-size:var(--fs-md)}
.import-area{font-size:var(--fs-md);resize:vertical;margin-bottom:var(--sp-2)}

/* cards and grid */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.card-narrow{border-top:3px solid var(--primary);box-shadow:var(--shadow-md)}
.grid-2{display:grid;grid-template-columns:1fr 340px;gap:var(--sp-5);align-items:start}
/* The right column: short cards only, one per job, stacked. */
.side{display:grid;gap:var(--sp-4);align-content:start}
/* Cards side by side on a wide screen, stacked on a phone: the settings block of a single-column page. */
.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-4);align-items:start}
#settings{margin-top:var(--sp-6)}
/* Short fields in pairs; a wide field takes the whole row. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));column-gap:var(--sp-4)}
.field-wide{grid-column:1/-1}
/* The one-line summary under a page title, dots between the facts. */
.facts{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);margin:var(--sp-1) 0 0;font-size:var(--fs-md)}
.facts > * + *::before{content:"·";margin-right:var(--sp-2);color:var(--line-strong)}
/* A heading with something on its right: a count, a filter, a badge. */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
/* The line under a heading that explains the section. */
.hint{margin:calc(-1 * var(--sp-1)) 0 var(--sp-3)}
/* A one-time secret shown in a readonly field: the client link, the invitation link. */
.secret{font-size:var(--fs-md);background:var(--paper)}
.empty{padding:48px var(--sp-4);text-align:center;background:var(--white);
       border:1px dashed var(--line-strong);border-radius:var(--r-lg)}

/* table */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);
       border:1px solid var(--line);border-radius:var(--r-lg);font-size:var(--fs-base);
       box-shadow:var(--shadow-sm)}
.table th{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
          font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;
          text-transform:uppercase;color:var(--muted)}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);vertical-align:top;
          transition:background var(--transition)}
.table tbody tr:hover td{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.table tr:last-child td{border-bottom:none}
.table tr:first-child th:first-child{border-top-left-radius:var(--r-lg)}
.table tr:first-child th:last-child{border-top-right-radius:var(--r-lg)}
.table tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)}
.table tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)}
.remind-cell{white-space:nowrap}
.missing-list{display:inline-block;max-width:32ch;overflow:hidden;text-overflow:ellipsis;
              white-space:nowrap;vertical-align:bottom}
.deadline-soon{color:var(--amber-ink);font-weight:600}
.deadline-over{color:var(--danger);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}

/* badges: a pill for the status of a thing, a state for one row inside a list */
.pill,.state,.tag,.send-progress,.msg-badge{display:inline-block;font-size:var(--fs-xs);font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.pill{letter-spacing:.04em;text-transform:uppercase}
.pill-ok{background:var(--tint-ok);color:var(--ink-ok)}
.pill-partial{background:var(--tint-warn);color:var(--ink-warn)}
.pill-missing{background:var(--tint-bad);color:var(--ink-bad)}
.pill-closed,.pill-neutral{background:var(--tint-neutral);color:var(--muted)}
a.pill{text-decoration:none;transition:opacity var(--transition)}
a.pill:hover{opacity:.75}
.pill-active{box-shadow:0 0 0 2px currentColor}
.state{letter-spacing:.03em;flex:none}
.state-sent,.state-done{background:var(--tint-ok);color:var(--ink-ok)}
.state-skip{background:var(--tint-neutral);color:var(--muted)}
.state-missing,.state-staged{background:var(--tint-warn);color:var(--ink-warn)}
.state-optional{background:transparent;color:var(--muted);
                box-shadow:inset 0 0 0 1px var(--line-strong)}
.tag{font-weight:500;color:var(--cat,var(--primary));background:var(--cat-soft,var(--tint-ok))}
.send-progress{background:var(--tint-warn);color:var(--ink-warn)}
.send-progress-done{background:var(--tint-ok);color:var(--ink-ok)}
.msg-badge{margin-left:var(--sp-1);background:var(--tint-warn);color:var(--ink-warn)}
.item-count{font-size:var(--fs-xs);color:var(--muted);flex:none}

/* overview */
.summary{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap;align-items:center}
.summary-actions{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.filter-bar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.filter-bar select{min-width:5.5rem}
.filter-bar input[type=search]{min-width:11rem;max-width:100%}
.month-nav{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.month-arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
             text-decoration:none;color:var(--muted);border-radius:var(--r-pill);font-size:var(--fs-glyph);
             transition:background var(--transition),color var(--transition)}
.month-arrow:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
.month-today{margin-left:var(--sp-1);font-weight:400}

/* checklist on the period page: the shared document grid, the toggle in the mark cell */
.check-toggle{display:inline-flex;padding:var(--sp-1);margin-left:calc(-1 * var(--sp-1));background:none;border:none;
              cursor:pointer;border-radius:var(--r);transition:background var(--transition)}
.check-toggle:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.item.pending .rowmark{border-color:var(--amber)}
.item.pending.optional .rowmark{border-color:var(--line-strong)}
.item.delivered .rowmark{background:var(--ok);border:2px solid var(--ok)}
.item.skip .rowmark{background:var(--line-strong);border:2px solid var(--line-strong)}
.item.skip .name{color:var(--muted)}
.item-note{margin:0 0 6px}

/* One mark per row, the fastest way to scan what is settled; shared by both audiences. */
.rowmark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
         flex:none;border-radius:50%;border:2px dashed var(--line-strong);
         font-size:var(--fs-sm);font-weight:700;color:var(--white)}

/* files */
.files,.selected-files{list-style:none;font-size:var(--fs-base)}
.files li{padding:var(--sp-2) 0;border-bottom:1px solid var(--line);
          display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.files li:last-child{border-bottom:none}
/* A filename never wraps: cut with an ellipsis, the full name in title. */
.file-name{display:inline-block;max-width:min(36ch,100%);overflow:hidden;text-overflow:ellipsis;
           white-space:nowrap;vertical-align:bottom}
/* The duplicate note sits on its own line under the file it belongs to. */
.same-as{flex-basis:100%;margin-top:calc(-1 * var(--sp-1))}
/* The move form sits on its own line under an unsorted file. */
.file-move{flex-basis:100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.file-move select{min-width:9rem}
.files li .mono{margin-left:auto}
.file-block{margin:var(--sp-4) 0}
.file-group{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 2px;flex-wrap:wrap;
            font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.file-group .count{margin-left:auto;font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.file-block .files{margin-left:var(--sp-1);padding-left:var(--sp-3);
                   border-left:3px solid var(--cat,var(--line))}
.file-block .files li{border-bottom:none;padding:6px 0}

/* Category colours: each slot sets --cat and its soft tint from the :root palette. */
.cat-0{--cat:var(--cat-0);--cat-soft:color-mix(in srgb,var(--cat-0) 12%,transparent)}
.cat-1{--cat:var(--cat-1);--cat-soft:color-mix(in srgb,var(--cat-1) 10%,transparent)}
.cat-2{--cat:var(--cat-2);--cat-soft:color-mix(in srgb,var(--amber) 16%,transparent)}
.cat-3{--cat:var(--cat-3);--cat-soft:color-mix(in srgb,var(--cat-3) 10%,transparent)}
.cat-4{--cat:var(--cat-4);--cat-soft:color-mix(in srgb,var(--cat-4) 11%,transparent)}
.cat-5{--cat:var(--cat-5);--cat-soft:color-mix(in srgb,var(--cat-5) 11%,transparent)}
.cat-6{--cat:var(--cat-6);--cat-soft:color-mix(in srgb,var(--cat-6) 11%,transparent)}
.cat-7{--cat:var(--cat-7);--cat-soft:color-mix(in srgb,var(--cat-7) 12%,transparent)}
.cat-none{--cat:var(--cat-none-ink);--cat-soft:color-mix(in srgb,var(--cat-none-ink) 10%,transparent)}
.cat-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;
         background:var(--cat,var(--muted))}

/* document grid: one row per item under aligned column headers, shared by the client page and the period page */
.doc-grid{display:grid;grid-template-columns:32px minmax(10rem,1fr) 8rem minmax(12rem,2fr) auto;column-gap:var(--sp-3);
          background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
          margin:var(--sp-2) 0 var(--sp-4)}
.doc-head,.doc-row{display:contents}
.doc-head > span{padding:var(--sp-2) 0;border-bottom:1px solid var(--line);font-size:var(--fs-xs);font-weight:600;
                 letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.doc-mark,.doc-item,.doc-state,.doc-files,.doc-actions{padding:var(--sp-2) 0;border-bottom:1px solid var(--line);
                                                        align-self:center;min-width:0}
.doc-row:last-child > *{border-bottom:none}
.doc-mark,.doc-head > span:first-child{padding-left:var(--sp-3)}
.doc-actions,.doc-head > span:last-child{padding-right:var(--sp-3)}
.doc-mark{display:flex;align-items:center}
.doc-item .name{font-weight:600}
.doc-item .state{margin-left:var(--sp-1)}
.doc-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap}
.doc-actions .btn{margin:0}
/* An amber tint and rail mark a required row still waiting. */
.doc-row.todo:not(.optional) > *,.doc-row.pending:not(.optional) > *{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.doc-row.todo:not(.optional) > .doc-mark,.doc-row.pending:not(.optional) > .doc-mark{box-shadow:inset 3px 0 var(--amber)}
/* Files are chips that wrap inside their column; a dropped file lands in the row's input. */
.doc-files{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-content:center}
.doc-files.dragover{outline:2px dashed var(--primary);outline-offset:-2px}
.doc-files .selected-files{flex-basis:100%;margin:0}
.file-chip{display:inline-flex;align-items:center;gap:var(--sp-1);max-width:100%;padding:2px var(--sp-2);
           border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:var(--fs-sm);
           color:var(--ink);text-decoration:none}
a.file-chip:hover{border-color:var(--primary);color:var(--primary)}
.file-chip .file-name{max-width:min(24ch,100%)}
.file-dup{font-size:var(--fs-xs);color:var(--muted)}
/* One line per file inside the files cell: the chip, where it is filed, and its removal. */
.file-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;flex-basis:100%}
.file-row .file-move{flex-basis:auto}
.file-remove{border:0;background:none;padding:0 2px;margin-left:2px;color:var(--muted);cursor:pointer;
             font:inherit;font-size:var(--fs-md);line-height:1}
.file-remove:hover{color:var(--danger)}
.upload-item.skip .name{color:var(--muted)}
.upload-item.todo .rowmark{border-color:var(--amber)}
.upload-item.sent .rowmark{background:var(--ok);border:2px solid var(--ok)}
.upload-item.skip .rowmark{background:var(--line-strong);border:2px solid var(--line-strong)}
.upload-item.staged .rowmark{border:2px solid var(--primary)}
/* The counters over the list: one chip per state. */
.state-summary{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:calc(-1 * var(--sp-1)) 0 var(--sp-3)}
.upload-group{margin:var(--sp-4) 0 var(--sp-1);color:var(--amber-ink)}
.upload-group .count{margin-left:var(--sp-1);color:var(--muted);font-weight:600}
.upload-group-quiet{color:var(--muted)}
.all-done{display:flex;flex-direction:column;gap:var(--sp-1)}
.all-done strong{color:var(--ok-ink)}
/* The client's own file lists: indented, without the accountant's category rail. */
.loose-block{margin:var(--sp-4) 0}
.upload-input{margin:2px 0 var(--sp-2)}
/* The client's add-files button: the shared button base with a pill radius. */
.btn-add{border:1px solid var(--line-strong);background:var(--white);color:var(--primary);
         font:inherit;font-size:var(--fs-md);font-weight:600;padding:6px 14px;
         border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
         transition:border-color var(--transition),background var(--transition)}
.btn-add:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)}
.btn-none{color:var(--muted)}
/* The camera button exists only on a touch screen; a desktop shows the file button alone. */
.btn-photo{display:none}
@media(hover:none) and (pointer:coarse){.btn-photo{display:inline-block}}
.photo-line{margin:6px 0 0;text-align:center}
.nojs-label{font-size:var(--fs-sm);margin:6px 0 2px}
form.js .nojs-label{display:none}
/* Hidden with clip rather than display:none, so <label for> stays clickable on iOS. */
form.js input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
                         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dropzone{display:flex;flex-direction:column;gap:var(--sp-1);align-items:center;text-align:center;
          padding:var(--sp-5) var(--sp-4);margin-top:var(--sp-4);border:1.5px dashed var(--line-strong);
          border-radius:var(--r-lg);background:color-mix(in srgb,var(--line) 30%,transparent);cursor:pointer;
          transition:border-color var(--transition),background var(--transition)}
.dropzone:hover{border-color:var(--primary)}
.dropzone.dragover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
/* The send button stays on screen while the form above it is being filled. */
.send-bar{position:sticky;bottom:0;margin:var(--sp-4) calc(-1 * var(--sp-5)) 0;padding:var(--sp-3) var(--sp-5);
          background:var(--white);border-top:1px solid var(--line)}
.send-bar .btn-wide{margin-top:0}
.progress{height:6px;background:var(--line);border-radius:var(--r-pill);margin-top:var(--sp-3);overflow:hidden}
#progress-bar{height:100%;width:0;background:var(--primary);border-radius:var(--r-pill);
              transition:width .15s linear}
/* files selected before sending */
.selected-files{margin:0 0 var(--sp-2)}
.chip{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 6px var(--sp-2) var(--sp-3);margin:6px 0;
      background:var(--white);border:1px solid var(--line);
      border-radius:var(--r);font-size:var(--fs-md);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent)}
.chip-name{flex:1;word-break:break-all}
.chip-remove{border:none;background:none;color:var(--danger);font-size:var(--fs-glyph);line-height:1;
             cursor:pointer;padding:var(--sp-1) var(--sp-2);flex:none;border-radius:var(--r);
             transition:background var(--transition)}
.chip-remove:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}

/* messages: the accountant's latest note at the top, the thread below the form */
.notice-msg strong{margin-right:var(--sp-2)}
.notice-msg p{color:var(--ink)}
.notice-msg p,.msg p{margin:var(--sp-1) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.thread{margin-top:var(--sp-5);max-width:640px}
.thread-list{list-style:none;margin:var(--sp-2) 0}
.msg{padding:var(--sp-2) var(--sp-3);margin:6px 0;border-radius:var(--r);background:var(--paper)}
.msg-accountant{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.msg-who{font-weight:600;font-size:var(--fs-md);margin-right:6px}

/* history: one line per event, newest first */
.history{margin-top:var(--sp-5);max-width:640px}
.history-list{list-style:none}
.history-list li{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:baseline;padding:var(--sp-1) 0;
                 border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.history-list li:last-child{border-bottom:none}

/* One notice box; the modifier sets the meaning. */
.notice{padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0;border-radius:var(--r);
        border-left:3px solid var(--primary);background:var(--tint-ok)}
.notice-error{border-left-color:var(--danger);background:var(--tint-bad);color:var(--ink-bad)}
.notice-warn{border-left-color:var(--amber);background:var(--tint-warn);color:var(--ink-warn)}
.notice-subscription{font-size:var(--fs-md)}

/* The confirmation dialog: one box, the question, Cancel and the action's own label in red. */
.confirm{width:min(420px,92vw);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);
         background:var(--white);color:var(--ink);box-shadow:var(--shadow-md)}
.confirm::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.confirm p{margin:0 0 var(--sp-4);font-size:var(--fs-base)}
.confirm-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}

/* htmx indicator rules, normally injected inline by htmx (disabled via the htmx-config meta). */
.htmx-indicator{opacity:0;transition:opacity .2s ease-in}
.htmx-request .htmx-indicator{opacity:1}
.htmx-request.htmx-indicator{opacity:1}

/* checklist editor */
.template-items{list-style:none;padding:0;margin:0 0 var(--sp-3)}
.template-items li{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;border-bottom:1px solid var(--line);
                   padding:6px 0}
.template-items li:last-child{border-bottom:none}
.template-items .name{flex:1}
.item-actions{display:flex;gap:var(--sp-2);white-space:nowrap;flex-wrap:wrap}
.add-item{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.add-item input[name=name]{flex:1}
.add-item input[name=description]{flex:2;min-width:min(14rem,100%)}
.add-item .check-label{margin:0;white-space:nowrap}
/* The description form takes its own line under the item it belongs to. */
.item-describe{flex-basis:100%;display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-1)}
.item-describe input{flex:1;min-width:0}

/* admin area — the operator's own tool, dark so it is never mistaken for the accountant app */
.admin-header{background:var(--ink);border-bottom-color:var(--ink);
              -webkit-backdrop-filter:none;backdrop-filter:none}
.admin-header .logo{color:var(--white)}
.admin-header .logo-mark{background:var(--white)}
.admin-header .menu a,.admin-header .link-button{color:var(--white)}
.admin-header .menu a:hover{background:color-mix(in srgb,var(--white) 14%,transparent)}
.admin-header .menu > a.active{color:var(--white);
                               background:color-mix(in srgb,var(--white) 20%,transparent)}
.admin-tag{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
           padding:3px var(--sp-2);border-radius:var(--r);background:var(--amber);color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4)}
.stat b{display:block;font-size:var(--fs-2xl);line-height:1.15;letter-spacing:-.02em}
.invite-card{border-left:3px solid var(--amber);margin-bottom:var(--sp-5)}
.email-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-sm);margin-top:6px;
            background:var(--paper);border-radius:var(--r);padding:var(--sp-2) var(--sp-2)}
/* impersonation — deliberately loud; it sits above the header on every accountant page */
.impersonation-bar{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;
                   background:var(--danger);color:var(--white);padding:var(--sp-2) var(--sp-4);
                   font-size:var(--fs-md);font-weight:600;text-align:center}
.impersonation-bar a{color:var(--white);text-decoration:underline}

@media(max-width:820px){
  .grid-2{grid-template-columns:1fr}
  .card{padding:var(--sp-4)}
  .menu{font-size:var(--fs-md)}
  .menu a{padding:6px 7px}
  .missing-list{max-width:16ch}
  .table{font-size:var(--fs-md)}
  .hide-phone{display:none}
  .send-bar{margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4)}
  .doc-grid{grid-template-columns:32px 1fr}
  .doc-head{display:none}
  .doc-state,.doc-files,.doc-actions{grid-column:2;padding-top:0}
  .doc-mark,.doc-item,.doc-state,.doc-files{border-bottom:none}
  .doc-mark{align-self:start;padding-top:var(--sp-3)}
  .doc-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}