/* One shared vocabulary for the whole application. A page never brings its own
   block of CSS: if a page needs something new, it is named here and every other
   page may use it. That is the house rule, and it is what keeps the invoice
   editor looking like the client list. */

/* The two families the interface is set in, served from this application and
   from nowhere else. **They were fetched from Google's font host until now**,
   which put a request to a third party on the load of every page — for a Swiss
   business billing European clients that is a data-protection question and not
   a performance one, so the files live here instead.

   Both are variable: one file carries every weight between 400 and 700, so the
   whole of the interface's range costs two downloads per family and not seven.

   They are split latin / latin-ext on the `unicode-range` below, and the split
   falls in a useful place: **ü, è, ö, é and à are all inside the latin file**
   — Latin-1 ends at U+00FF and the four interface languages never leave it —
   so German, French and Italian cost exactly what English costs. In practice
   the application loads two files and 80 kB. The extended pair is fetched only
   for a letter past U+0100: a client in Łódź, Timișoara or Rīga. Nobody pays
   for that until such a client exists.

   Subsetted by Google Fonts, licensed under the SIL Open Font License 1.1;
   both licences sit beside the files in `fonts/`.

   `swap`: the page is readable in the fallback face from the first paint, and
   re-sets itself when the real one lands. Never invisible text. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/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:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/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:'Outfit';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(/fonts/outfit-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:'Outfit';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(/fonts/outfit-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;
}

:root{
  /* The palette is moneybird's: their blue, and their dark-blue stepped down
     over white for every grey. That is what keeps the greys from reading
     neutral — a border here carries a trace of the accent in it. */
  --ink:#0C0A09;         /* body text */
  --head:#081245;        /* headings, nav, the colour a figure is set in */
  --ink-soft:#6B718F;    /* secondary text — dark-blue at 60% */
  --ink-faint:#8388A2;   /* labels, hints — dark-blue at 50% */
  --line:#CED0DA;        /* borders — dark-blue at 20% */
  --line-soft:#E6E7EC;   /* row separators — dark-blue at 10% */
  --wash:#F5F5F4;        /* hover, inset panels */
  --accent:#0073E6;      /* primary action */
  --accent-deep:#0060C4; /* and what it does under the pointer */
  --accent-wash:#E6F1FD; /* the focus ring */
  --head-deep:#0C1A5E;   /* and what the navy does under the pointer */
  /* Owed, and paid. **Neither of these is moneybird's** — they use no red and
     no green anywhere we could read one off — so both are placed at the blue's
     own lightness and chroma and only the hue is turned. They are the two
     values here with no source outside this file. */
  --warn:#D23B26;        /* money owed, destructive */
  --warn-wash:#FBEAE7;
  --ok:#00893D;          /* money in */
  --ok-wash:#E4F3EA;
  --radius:12px;
  --radius-sm:8px;
  /* One duration and one curve, for everything on the screen that moves. */
  --ease:.15s cubic-bezier(.4,0,.2,1);
  /* The arrow a button wears when it moves you on. Carried as a mask rather
     than a picture, so it takes the colour of whatever button it is in and
     there is no second file to keep for the hover. */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11'/%3E%3Cpath d='M9.5 4l4 4-4 4'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Two families, and they do different jobs: Inter for anything read as a
   sentence, Outfit for the things that are read as a value — headings, a
   total, the figure on a card. */
body{font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:Outfit,Inter,ui-sans-serif,system-ui,sans-serif;
  font-weight:600;color:var(--head);letter-spacing:-.02em}
h1{font-size:24px}
h2{font-size:18px}
h3{font-size:16px}
/* Still inherit: a link is coloured by the thing it sits in, and the few that
   are meant to read as links say so where they are defined. */
a{color:inherit}

/* --- the shell ---------------------------------------------------------- */

.topbar{display:flex;align-items:center;gap:26px;padding:0 26px;height:56px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5}
/* The wordmark carried over from the previous system. It is an image, so the
   height is set here and the width follows the picture's own proportions. */
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:26px;width:auto;display:block}
.nav{display:flex;gap:20px;font-size:14px}
.nav a{text-decoration:none;color:var(--ink-soft);padding:18px 0;font-weight:500;
  border-bottom:2px solid transparent;transition:color var(--ease)}
.nav a:hover{color:var(--accent)}
.nav a.on{color:var(--head);border-bottom-color:var(--accent);font-weight:600}

/* The company picker appears only when there is a choice to make — one company
   and it is not a control, it is just a name. */
.acting{margin-left:auto;position:relative;font-size:14px}
.acting .single{color:var(--ink-soft)}
.acting summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--head);font-weight:500}
.acting summary::-webkit-details-marker{display:none}
.acting .mark{width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700}
.acting .menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.10);min-width:280px;padding:6px}
.acting .menu a{display:block;padding:9px 12px;border-radius:7px;text-decoration:none}
.acting .menu a:hover{background:var(--wash)}
.acting .menu a.on{background:var(--wash);font-weight:600}
.acting .menu .sub{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px}
.acting .menu hr{border:0;border-top:1px solid var(--line-soft);margin:6px 0}
.acting .caret{color:var(--ink-faint)}

.page{max-width:1080px;margin:0 auto;padding:30px 26px 70px}
.page.narrow{max-width:720px}
/* The invoice draft. Wider than a form and narrower than a list: the line
   editor has six columns and every one of them is read across. */
.page.wide{max-width:1180px}

.head{display:flex;align-items:baseline;gap:13px;margin-bottom:20px}
.head .count{color:var(--ink-faint);font-size:14px}

/* A count set beside a name rather than written into a sentence with it — the
   cannot-delete list and the language-in-use list (T29). Same faint number the
   page heads use, so it reads as a count wherever it appears. */
li > .count{color:var(--ink-faint);font-size:13px;font-variant-numeric:tabular-nums}
.head .right{margin-left:auto;display:flex;gap:9px;align-items:center}

/* A second thing on a page, under a rule: the bank accounts below a company.
   Its own .head, so the count and the button on the right are the same words
   they are at the top of a page. */
.section{margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.section .empty{padding:26px}

/* A list that is a list of facts rather than of bullets — what an account
   carries, in a table cell. */
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{margin:0}

/* --- controls ----------------------------------------------------------- */

/* Moneybird's shape: fifteen on six hundred, twelve by twenty, a twelve-pixel
   corner, and the same hundred-and-fifty milliseconds on everything. */
.btn{display:inline-flex;align-items:center;background:var(--accent);color:#fff;
  text-decoration:none;font:inherit;font-size:15px;font-weight:600;line-height:14px;
  padding:12px 20px;border-radius:var(--radius);border:1px solid var(--accent);
  cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* The quiet one fills rather than darkening its edge, and drops the edge as it
   does — so the two states are one shape changing weight, not two outlines. */
.btn.quiet{background:transparent;color:var(--head);border-color:var(--line)}
.btn.quiet:hover{background:var(--line-soft);border-color:transparent;color:var(--head)}
.btn.danger{background:transparent;color:var(--warn);border-color:var(--warn-wash)}
.btn.danger:hover{background:var(--warn-wash);border-color:transparent;color:var(--warn)}
/* The button that does the thing the page exists for — issuing. Distinct from
   Save, which is on the same row and is the ordinary, undoable one: Save wears
   the accent and this wears the deeper navy, so of the two filled buttons the
   heavier is the one that cannot be taken back. */
.btn.go{background:var(--head);border-color:var(--head)}
.btn.go:hover{background:var(--head-deep);border-color:var(--head-deep)}
/* A button that opens another screen. The arrow slides four pixels under the
   pointer, which is moneybird's `ml-2` becoming `ml-3`, and the right padding
   is trimmed to pay for it. Nothing is needed in the view but the class.

   **It goes on the link that takes you somewhere, never on the act itself.**
   The invoice screens hold both and the words already tell them apart: `Issue…`
   is an anchor that opens the issue screen and wears the arrow, `Issue` is the
   button on that screen that does it and does not. The ellipsis and the arrow
   are saying the same thing.

   Not on Cancel, Back or Done, which return you rather than move you on; not on
   a delete, where an arrow would read as encouragement; not on Download, which
   opens no screen at all. And not on Preview, which sits beside `Issue…` in the
   same row — two arrows in one row and neither of them is the way on. */
.btn.arrowed{padding-right:12px}
.btn.arrowed::after{content:"";width:16px;height:16px;flex:0 0 16px;margin-left:8px;
  background:currentColor;transition:margin-left var(--ease);
  -webkit-mask:var(--arrow) center/16px 16px no-repeat;
  mask:var(--arrow) center/16px 16px no-repeat}
.btn.arrowed:hover::after{margin-left:12px}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--ink-faint);margin-bottom:5px;font-weight:500}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=date],
.field select,.field textarea{
  width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color var(--ease),box-shadow var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
/* The focus ring is the accent at a tenth, laid outside the border rather than
   drawn as an outline — so a focused box grows a halo instead of a second edge
   a pixel inside its first one. */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.field .hint{font-size:12.5px;color:var(--ink-faint);margin-top:5px}
/* A hint that belongs to the control above it but sits outside its .field —
   what a select with an explanation too long to read as a caption looks like.
   Without the gap it reads as the caption of the field BELOW it instead. */
.hint.after-field{margin-top:-9px;margin-bottom:16px}
.field textarea{min-height:76px;resize:vertical}
/* A tick box's label is the sentence itself, not a caption above a field, so it
   reads as body text and sits beside the box. */
.field.check label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);margin-bottom:0}
.field.check input{margin:0}
.field.check .hint{margin-left:24px}
/* The stored picture, above the box that replaces it. Drawn on a chequerboard
   because a logo is usually transparent, and a transparent logo on the page
   background is a logo you cannot see the edges of — and the edges are what
   tell you whether the file has the whitespace baked into it.
   The height matches `document.css`'s 18 mm band so that what is shown here is
   the size it comes out on the paper. */
.field.picture .current{display:block;width:fit-content;padding:10px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:var(--radius);
  background-color:var(--wash);
  background-image:linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.06) 75%),
                   linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.06) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
.field.picture .current img{display:block;max-height:68px;max-width:227px}
.field.picture input[type=file]{font-size:13px;color:var(--ink)}
.field.picture .field.check{margin-top:10px}

.row{display:flex;gap:14px}
.row .field{flex:1}
.row .field.narrow{flex:0 0 132px}

/* The boxed tick — a checkbox with a title and an explanation beside it, laid
   out as one panel. Scoped to `label.check` on purpose: `form/check` renders
   `div.field.check`, which matched this rule as well as its own and came out
   with the label squeezed into a narrow column beside the hint. Two rules for
   two controls that only happened to share a word. */
label.check{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--wash)}
label.check input{margin-top:3px}
label.check .hint{font-size:12.5px;color:var(--ink-faint);margin-top:3px}

fieldset{border:0;padding:0;margin:0 0 26px}
/* A section title. **The shape stays and only the colour moves** (nando,
   2026-09-02): small, capitalised and spaced is right for a label that names
   the block under it, but in the hint grey it was not being found on a page
   that stacks Client, Account and Payments. The deeper blue makes the three of
   them the landmarks somebody navigates by, without turning a label into a
   second heading competing with the page's own. */
fieldset legend{font-size:12px;color:var(--accent-deep);text-transform:uppercase;
  letter-spacing:.05em;padding:0 0 12px;font-weight:600}

.actions{display:flex;gap:9px;align-items:center;padding-top:20px;border-top:1px solid var(--line-soft)}
.actions .spacer{margin-left:auto}

/* --- lists -------------------------------------------------------------- */

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--ink-faint);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;padding:0 12px 8px;border-bottom:1px solid var(--line)}
td{padding:13px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover td{background:var(--wash)}
td.name a{font-weight:600;text-decoration:none;color:var(--head)}
td.name a:hover{color:var(--accent);text-decoration:underline}
td .sub{color:var(--ink-faint);font-size:13px;font-weight:400;margin-top:2px}
tr.dormant td.name a{color:var(--ink-soft)}

/* Pills. The button's twelve-pixel corner taken all the way round, which is
   what a thing this short wants — at 12px a tag looks like a small button. */
.tag{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;
  background:var(--line-soft);color:var(--head);font-weight:500}
.tag.off{background:#fff;border:1px solid var(--line);color:var(--ink-faint)}

.filters{display:flex;gap:4px}
.filters a{font-size:13px;text-decoration:none;color:var(--ink-soft);padding:7px 13px;
  border-radius:999px;font-weight:500;transition:background var(--ease),color var(--ease)}
.filters a:hover{background:var(--line-soft)}
.filters a.on{background:var(--head);color:#fff}

.empty{border:1px dashed var(--line);border-radius:16px;padding:44px 26px;text-align:center}
.empty p{color:var(--ink-faint);margin:8px 0 18px}

/* Required, and not-yet-ready, are two different things and look different.
   Required is an error the moment you submit; not-yet-ready is a note about
   later, so it never wears the warning colour. */
.req{color:var(--warn);text-decoration:none;margin-left:4px;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--warn)}
.field.bad input:focus{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-wash)}
.field .error{font-size:12.5px;color:var(--warn);margin-top:5px;font-weight:500}

.note.wanting{border-color:var(--line);background:var(--wash)}
.note.wanting ul{margin:7px 0 0;padding-left:19px}
.note.wanting li{margin-top:2px}
.note.wanting .hint{font-size:12.5px;color:var(--ink-faint);margin-top:10px}

/* Read by a screen reader, not shown. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}

.lede{color:var(--ink-soft);font-size:14.5px;max-width:60ch;margin:10px 0 20px}
.note ul{margin:9px 0 0;padding-left:19px}
.note li{margin-top:3px}

.crumb{font-size:13px;color:var(--ink-faint);margin-bottom:10px}
.crumb a{color:var(--ink-soft)}

.note{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;font-size:13.5px;color:var(--ink-soft);margin-bottom:22px}

/* --- the ledger ----------------------------------------------------------- */
/* Named here rather than on the payments page, like everything else: the band
   and the sortable heading are shapes any list may want, and the day a second
   screen wants a row of figures over a table it uses these. */

.band{display:flex;gap:14px;margin-bottom:26px}
.band .card{flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.band .card h2{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);font-weight:600;margin-bottom:10px}
.band .card .figure{font-family:Outfit,Inter,sans-serif;font-size:24px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--head);margin-top:2px}
.band .card .figure.none{color:var(--ink-faint);font-weight:400}
.band .card p.sub{font-size:12.5px;color:var(--ink-faint);margin:10px 0 0}
/* The overdue card only wears the warning colour when something IS overdue —
   a card that is always red stops meaning anything. */
.band .card.warn{border-color:var(--warn)}
.band .card.warn h2,.band .card.warn .figure{color:var(--warn)}

/* A date, an invoice number and a money figure are each one thing: broken over
   two lines a date is unreadable and a number reads as two. */
td.day{white-space:nowrap}
td.day .sub{white-space:nowrap}
td.day div.late{margin-bottom:6px}
td.day div.late:last-child{margin-bottom:0}
td.day div.late .sub{display:inline-block;margin-left:8px;margin-top:0}

.filters.spaced{margin:28px 0 14px}

/* A structured reference is twenty-seven digits and would otherwise take the
   width every other column needs. It breaks; a client's name does not. */
td.ref{max-width:190px;word-break:break-all;font-size:13px}

/* A column heading that sorts. The caret marks the column being read and which
   way, so the heading says both what it does and what it did. */
th a.sort{text-decoration:none;color:inherit;display:inline-flex;gap:4px;align-items:center}
th a.sort:hover{color:var(--ink)}
th.on a.sort{color:var(--ink)}
th a.sort .caret{font-size:10px}

/* Late, and how late. The number rides inside the tag because it is part of
   what the tag says, not a second fact beside it. */
.tag.warn{background:var(--warn);color:#fff}
.tag.warn .count{margin-left:5px;opacity:.75;font-variant-numeric:tabular-nums}

/* --- the status mark (T47) -------------------------------------------------- */
/* **Words in this column clutter an overview that exists to be scanned**, so the
   word moves to the hover and to the screen reader and the column becomes a
   shape the eye runs down. The mark is a fixed circle so that eight hundred rows
   make eight hundred marks in one vertical line rather than a ragged edge of
   different-width glyphs. */
.mark{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:12px;line-height:1;
  background:var(--line-soft);color:var(--ink-soft);cursor:default}
.mark .glyph{position:relative;top:-.5px}
/* Only the two that ask the reader to do something are coloured. A column where
   everything is marked is a column where nothing is. */
.mark.done{background:var(--ok-wash);color:var(--ok)}
.mark.part{background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.mark.waiting{background:#fff;border:1px solid var(--line);color:var(--ink-faint)}
.mark.late{background:var(--warn);color:#fff;font-weight:700}
.mark.void{background:var(--line-soft);color:var(--ink-faint)}
/* A payment attached to nothing is work to do, but it is not a debt to chase.
   Red is kept for the one mark that says somebody must be written to, or a
   column with two reds in it says neither. */
.mark.loose{background:var(--head);color:#fff;font-weight:700}

/* The mark is the whole of this cell. **Settle was here and is not any more**
   (nando, T47): a button on the few short rows broke the line of marks the
   column exists to be scanned down, so it moved to the invoice's own page. */
td.state{white-space:nowrap}

/* **The Due column answers the question the reader was asking in their head.**
   Today they compare the date against the one they are carrying; red says the
   invoice went past its day and still wants money. */
td.day.late{color:var(--warn);font-weight:600}

/* **One signal in place of the Clients-to-remind table** (T47): the Overdue
   filter goes red when a client is due a reminder. The list is one click away
   and does not need a second table above the first to announce itself. */
.filters a.alert{color:var(--warn);font-weight:600}
.filters a.alert.on{background:var(--warn);color:#fff}

/* A date that is also the way to the payment it belongs to. It is a link that
   does not look like one until it is wanted: a column of eight hundred blue
   dates is a column nobody can read a date out of. */
a.quiet{color:inherit;text-decoration:none}
a.quiet:hover{text-decoration:underline}

/* The money columns line up on the decimal point, because the whole reason
   Amount and Paid sit beside each other is that the reader subtracts them. */
table.ledger td.num{font-variant-numeric:tabular-nums;text-align:right}
table.ledger th:nth-child(5),table.ledger th:nth-child(6){text-align:right}

/* Settling an invoice, under its payments. The sentence sits beside the button
   rather than above it: it says what the button will do, and a person reads it
   at the moment they are deciding. */
.settle{display:flex;align-items:center;gap:12px;margin:30px 0 4px;padding-top:24px;
  border-top:1px solid var(--line)}
.settle form{margin:0}
.settle p.sub{color:var(--ink-faint);font-size:12.5px;margin:0;max-width:52ch}

/* --- the add-payment overlay ----------------------------------------------- */
/* T46. A panel directly under the page title, not a modal: the list stays on
   the screen behind it, because the reader is checking the line just saved
   against the paper in front of them and the next statement line is the next
   thing that happens. */

.overlay{display:flex;gap:26px;align-items:flex-start;margin-bottom:26px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--wash);padding:20px 22px}
.overlay .panel{flex:1 1 440px;min-width:0}
.overlay .panel .actions{border-top-color:var(--line)}
.overlay .panel .actions .sub{color:var(--ink-faint);font-size:12.5px;margin-left:auto}
.overlay .field input,.overlay .field select{background:#fff}
/* The three lookup keys are one block: any of them changing asks the server
   the same question, so they read as one control with one explanation. */
.overlay .keys{margin-bottom:4px}

/* What the invoice asks for and what it has already had, beside the amount box
   — so an amount that is not the total explains itself. It is a caption and
   never a field: nothing here is typed. */
.overlay .beside{flex:0 0 auto;align-self:center;padding-top:4px;font-size:13px}
.overlay .beside div{display:flex;gap:8px;white-space:nowrap}
.overlay .beside .k{color:var(--ink-faint)}
.overlay .beside .v{font-variant-numeric:tabular-nums}

/* The chosen client's open invoices, to the right of the form. Date, number,
   amount and nothing more: the reader is matching one figure against one line
   of a statement, and every other column is in the way. */
.overlay .choices{flex:1 1 340px;min-width:0;max-height:340px;overflow-y:auto}
.overlay .choices h2{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);font-weight:600;margin-bottom:6px}
.overlay .choices p.sub{color:var(--ink-faint);font-size:13px;margin:6px 0 0}
.overlay .choices td{padding:8px 8px;border-bottom:1px solid var(--line-soft)}
.overlay .choices th{padding-top:0}
.overlay .choices tr.on td{background:#fff;font-weight:600}
.overlay .choices td:last-child{text-align:right}

.btn.small{padding:8px 14px;font-size:13.5px;border-radius:var(--radius-sm)}

/* --- translation mode ----------------------------------------------------- */
/* The panel sits under the page it describes, so a term is written with its
   meaning still on screen. It is visibly a tool and not part of the page. */

.translating{border-top:3px solid var(--head);background:#fff;margin-top:50px;
  padding:22px 26px 60px}
.translating .head{max-width:1080px;margin:0 auto 6px;display:flex;
  align-items:baseline;gap:13px}
.translating h2{font-size:16px;font-weight:600}
.translating .head .right{margin-left:auto;display:flex;gap:9px;align-items:center}
.translating .lede{max-width:1080px;margin:0 auto 18px}
.translating table{max-width:1080px;margin:0 auto}
.translating td{vertical-align:middle}
.translating .term code{font-size:12px;color:var(--ink-faint);font-family:ui-monospace,monospace}
.translating .source{color:var(--ink-soft);max-width:38ch}
.translating tr.untranslated .source{color:var(--ink)}
.translating tr.untranslated td.term code{color:var(--warn)}
.translating form{display:flex;gap:7px}
.translating input.grow{flex:1;font:inherit;font-size:14px;padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}
.translating input.grow:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}

.topbar .lang{font-size:12px;text-decoration:none;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.topbar .lang:hover{color:var(--ink)}
.topbar .langs{display:flex;gap:2px}
.topbar .langs a{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;color:var(--ink-faint);padding:3px 6px;border-radius:5px}
.topbar .langs a.on{background:var(--accent);color:#fff;font-weight:600}

/* The line editor — a table of boxes rather than a stack of labelled fields,
   because four captions repeated down six rows say the same four words
   twenty-four times. The column headings carry the words instead, and each box
   keeps its own label in the accessibility tree at `.sr`. Shared by the
   recurring schedule's template lines and the invoice draft. */
.lines td{padding:6px 6px;border-bottom:0;vertical-align:top}
.lines th{padding:0 6px 8px}
.lines tbody tr:hover td{background:transparent}
.lines td.num{width:118px}
.lines td.unit{width:140px}
.lines input,.lines select{width:100%;font:inherit;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color var(--ease),box-shadow var(--ease)}
.lines input:focus,.lines select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
.lines input.bad{border-color:var(--warn)}
.lines .error{font-size:12.5px;color:var(--warn);margin-top:5px;font-weight:500}
/* A cell the invoice draft adds after the four boxes: what one line comes to.
   Set on the baseline of the boxes beside it rather than at the top of the
   cell, so a column of amounts reads against the prices that made them. */
.lines td.num .sub,.lines td.num{white-space:nowrap}
.lines tbody td.num:last-child{padding-top:18px;text-align:right;font-variant-numeric:tabular-nums}
.lines td.unit .sub{margin-top:5px}

/* What the document comes to. Right-aligned under the lines, because a total is
   read against the column of amounts above it and not against the page. */
.totals{display:flex;justify-content:flex-end;margin-top:6px}
.sums{width:340px;border-collapse:collapse}
.sums th{text-align:left;font-weight:500;color:var(--ink-soft);padding:7px 0;
  border-bottom:1px solid var(--line-soft)}
.sums td{text-align:right;padding:7px 0;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line-soft)}
.sums tr.total th,.sums tr.total td{font-family:Outfit,Inter,sans-serif;font-weight:700;
  color:var(--head);font-size:18px;border-bottom:0;border-top:2px solid var(--head);
  padding-top:11px}
.totals .note{width:340px}

/* One fact that is the whole answer of the section above it — the number about
   to be taken, the account chosen. Big because on the issue page these are the
   things being checked, not fields being filled in. */
.big{font-family:Outfit,Inter,sans-serif;font-size:24px;font-weight:600;
  letter-spacing:-.02em;color:var(--head)}

/* Moving a row up or down its list. A one-button form rather than a link,
   because it changes what is stored — so the button is dressed to read as the
   arrow it is, and the two sit side by side in a narrow first column. */
td.order{white-space:nowrap;width:1%;padding-right:14px}
form.inline{display:inline}
.link{background:none;border:0;padding:2px 4px;font-size:15px;line-height:1;
      color:var(--ink-faint);cursor:pointer;border-radius:5px}
.link:hover{color:var(--ink);background:var(--wash)}
.spacer-cell{display:inline-block;width:19px}

/* --- countries ------------------------------------------------------------ */
/* The picker (T38): two hundred and fifty tick boxes, grouped by region. A
   grid rather than a list, because the reader is scanning for one name and a
   single column of that many is a page nobody reaches the bottom of. The
   columns are sized by the longest country name that has to fit on one line. */
.ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:4px 18px}
label.tick{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 6px;
  border-radius:var(--radius);cursor:pointer}
label.tick:hover{background:var(--wash)}
label.tick input{margin:0}
/* A country a client is already in. Marked and not disabled: a disabled box
   sends nothing, which is the very state the save refuses to make. */
label.tick.in-use{color:var(--ink)}
/* The mark sits against the name, not at the far edge of the column: pushed
   right it reads as a label on whatever is in the next column. */
label.tick .tag{margin-left:2px}
/* The region headings are sections of one form, so they carry no button and
   want less air above them than a section at the foot of a page. */
.section.region{margin-top:28px;padding-top:18px}
.section.region .head{margin-bottom:12px}

/* The countries a company bills into, listed on its page as a sentence of
   names rather than a table: there is nothing to click on one of them. */
.countries-list{font-size:14px;color:var(--ink);margin:0 0 12px}

/* The Country box is two controls in one column — the select and the way to
   add to what it offers — so the wrapper is what the row stretches, not the
   field inside it. */
.row > .country-field{flex:1;min-width:0}

/* Adding a country from the client form, so that nobody typing an address is
   sent to another screen to be allowed to finish it. Shut until asked for —
   the ordinary case is that the country is already in the box above it. */
.add-country{margin:-9px 0 16px}
.add-country summary{font-size:13px;color:var(--accent);cursor:pointer}
.add-country .add{display:flex;gap:9px;align-items:center;margin-top:9px}
.add-country select{flex:1;font:inherit;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink)}

/* The document preview (T42): the invoice sheet, shown on a page of the
   application. It keeps a frame of its own because the sheet carries a
   stylesheet written for paper — @page margins, millimetre measures — and
   sharing this one would have the two reaching for the same tags. The frame
   holds the A4 sheet at its printed size — 21 by 29.7 cm, the sheet's own
   screen geometry (T42 follow-up) — so what is on screen is the paper's
   proportion exactly, band and margins included; taller sheets scroll inside
   it. */
.doc-frame{display:block;width:21cm;max-width:100%;height:29.7cm;margin:0 auto 18px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}

/* The sign-in page (T28). The one screen with no top bar — see views/auth.clj
   for why — so it carries the centring the shell would otherwise do, and
   nothing else: the fields, the error and the button are the same .field,
   .error and .btn as everywhere. */
.signin{max-width:340px;margin:14vh auto 0;padding:0 20px}
.signin .brand{justify-content:center;margin-bottom:26px}
.signin .brand img{height:32px}
.signin .error{font-size:13px;color:var(--warn);font-weight:500;margin-bottom:16px}
.signin .notice{font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.signin .btn{width:100%;text-align:center;box-sizing:border-box}
/* The second way in, held apart from the first by a rule with a word on it. */
/* The second way in, held apart from the first by a rule with a word on it. */
.signin .or{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
/* The two ways on from this page — the forgotten password under the form, and
   whatever the rule below carries. They are among the few anchors in the
   application meant to read as links, so this is where the accent is spent on
   text rather than on a button. */
/* Held off the Sign in button so it reads as a way out rather than a second
   thing to do on the form (nando, 2026-09-04). */
.signin .hint{margin-top:14px}
.signin .hint a,.signin .or a{color:var(--accent);font-weight:500;text-decoration:none}
.signin .hint a:hover,.signin .or a:hover{color:var(--accent-deep);text-decoration:underline}
/* Sign out sits in the company menu and has to read as one of its rows, but it
   is a form button and not an anchor — see views/layout.clj. */
.acting .menu .sign-out button{display:block;width:100%;text-align:left;background:none;
  border:0;padding:7px 12px;font:inherit;color:var(--ink-soft);cursor:pointer;border-radius:6px}
.acting .menu .sign-out button:hover{background:var(--line-soft);color:var(--ink)}