/* The base platform's own skin: four screens, the house tokens, nothing else.
   The reader's stylesheet is not used here — it lays the page out as a grid
   with a sidebar, and this is a simpler thing. */
@import url("/static/tokens.css");

:root {
  /* IBM Plex Sans — Christine's choice, 18 October 2026. Designed for dense
     business screens, and it has proper tabular figures, so a column of
     amounts and registration numbers lines up and a mistyped digit shows as a
     ragged column instead of hiding. The fallbacks are the system faces, so a
     screen still reads if the font does not load. */
  /* One step up from 15px, 18 October 2026 — a screen read all day.
     Everything else moved with it so the hierarchy is unchanged. */
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Its own monospace, for an id or a reference that must be read character by
     character. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sb: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  /* White, not grey. The page is paper; the blue is the practice. */
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--xll-700); }

/* ---- the bar across the top ------------------------------------------- */
header.top {
  /* The bar carries the brand: the practice's blue, white type on it. */
  background: var(--xll); color: #fff; padding: 0 32px;
  display: flex; align-items: center; gap: 22px; height: 60px;
}
header.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 600;
                    letter-spacing: .02em; color: #fff; text-decoration: none;
                    font-size: 17px; }
header.top .brand img { height: 26px; width: auto; display: block;
                        background: #fff; border-radius: 5px; padding: 2px; }
header.top .env {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 3px 10px; font-weight: 500;
}
header.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
header.top nav a { color: rgba(255,255,255,.84); text-decoration: none; font-size: 15px;
                   font-weight: 500; padding: 20px 0; border-bottom: 2px solid transparent; }
header.top nav a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
header.top nav a.on { color: #fff; border-bottom-color: #fff; }
header.top .who { color: rgba(255,255,255,.74); font-size: var(--sb); }
header.top button.quiet, header.top .btn.quiet {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.5); padding: 7px 15px; }
header.top button.quiet:hover { background: rgba(255,255,255,.14); color: #fff;
  border-color: #fff; }

/* The width of the page is decided by what is ON it. A list of clients uses the
   screen somebody bought; a form whose fields are 100% wide does not, or the
   boxes end up a foot long and the eye travels the whole way back for the next
   label. */
main { max-width: none; margin: 26px auto; padding: 0 32px 72px; }
main.narrow { max-width: 820px; }

/* ---- type ------------------------------------------------------------- */
h1 { font-size: 25px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 4px;
     font-weight: 600; }
h2 { font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
     color: var(--xll); font-weight: 600; margin: 26px 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.none { color: var(--ink-4); font-style: normal; }

/* ---- surfaces --------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        padding: 20px 22px; margin: 0 0 18px; box-shadow: none; }
.card > h2:first-child { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 18px; align-items: start; }
/* Inside a card the two-up pairs stay two-up; they are short fields. */
.card .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid, .card .grid { grid-template-columns: 1fr; } }

/* ---- tables ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: var(--card);
        border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line-2);
         vertical-align: top; font-size: 15px; }
thead th, tr:first-child th { background: var(--xll-050); font-size: 12px; font-weight: 600;
       letter-spacing: .06em; text-transform: uppercase; color: var(--xll);
       border-bottom: 1px solid var(--xll-200); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
tbody tr:hover td { background: var(--xll-050); }
.card table { border: 0; border-radius: 0; }
.card th { background: none; width: 42%; color: var(--muted); font-weight: 500;
           text-transform: none; letter-spacing: 0; font-size: 15px; }

/* ---- messages --------------------------------------------------------- */
.msg { padding: 12px 16px; border-radius: var(--r-sm); margin: 0 0 18px; font-size: 15px;
       border: 1px solid transparent; }
.msg.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.msg.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.msg.stop { background: var(--stop-bg); color: var(--stop); border-color: var(--stop-line); }

/* ---- forms ------------------------------------------------------------ */
label { display: block; font-size: var(--sb); color: var(--ink-2); margin: 14px 0 4px;
        font-weight: 500; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; background: var(--card); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--xll); box-shadow: 0 0 0 3px var(--xll-100);
}
input::placeholder { color: var(--ink-4); }

button, .btn {
  font: inherit; font-size: 15px; font-weight: 500; padding: 10px 18px;
  border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--xll);
  background: var(--xll); color: #fff; text-decoration: none; display: inline-block;
  line-height: 1.3;
}
button:hover, .btn:hover { background: var(--xll-700); border-color: var(--xll-700); color: #fff; }
button.quiet, .btn.quiet { background: var(--card); color: var(--xll); }
button.quiet:hover, .btn.quiet:hover { background: var(--xll-050); color: var(--xll-700); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- pager ------------------------------------------------------------ */
.pager { display: flex; gap: 6px; align-items: center; margin-top: 16px; flex-wrap: wrap;
         font-size: var(--sb); }
.pager a, .pager span { padding: 5px 10px; border: 1px solid var(--line);
         border-radius: var(--r-sm); background: var(--card); text-decoration: none;
         color: var(--ink-2); }
.pager a:hover { border-color: var(--xll-200); background: var(--xll-050); color: var(--xll); }
.pager .current { background: var(--xll); color: #fff; border-color: var(--xll); }
.pager .label { border: 0; background: none; color: var(--muted); padding-left: 10px; }

/* ---- permission checkboxes -------------------------------------------- */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; margin: 8px 0 0; }
@media (max-width: 760px) { .checks { grid-template-columns: 1fr; } }
.checks label { display: flex; gap: 9px; align-items: center; color: var(--ink);
                font-size: 15px; margin: 6px 0; font-weight: 400; }
.checks input { width: auto; accent-color: var(--xll); }

footer { color: var(--ink-4); font-size: 13px; text-align: center; padding: 0 0 36px; }

/* ---- sign in ---------------------------------------------------------- */
body.signin { display: grid; place-items: center; min-height: 100vh;
  background: linear-gradient(170deg, var(--xll) 0%, var(--xll-700) 58%, #120863 100%); }
body.signin main, body.signin main.narrow { max-width: 410px; margin: 0; padding: 0 24px; }
body.signin .mark { text-align: center; margin: 0 0 20px; }
body.signin .mark img { height: 46px; background: #fff; border-radius: 10px; padding: 7px; }
body.signin h1 { color: #fff; text-align: center; }
body.signin .sub { color: rgba(255,255,255,.72); text-align: center; }
body.signin .card { box-shadow: 0 18px 44px rgba(10,6,54,.28); border: 0; padding: 26px 26px 22px; }
body.signin footer { color: rgba(255,255,255,.55); }
body.signin .msg { background: #fff; }

/* A permanent id is read character by character when somebody checks one
   against the control sheet, so it is set in the monospace of the same family. */
.id { font-family: var(--mono); font-size: 13px; color: var(--muted);
      background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
      padding: 1px 6px; }

/* ---- tables that fit whatever screen they are on ----------------------- */
/* Three things, in order of how much they matter:
   1. the table uses the full width it is given;
   2. when the screen is narrower than the columns need, the TABLE scrolls
      sideways on its own, so the page never does and nothing is cut off;
   3. below the widths named here, the columns that are nice to have step out
      and the ones somebody came for — the client, its number, who has it —
      stay. Nothing is lost: the company page still has all of it. */
.scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
          border: 1px solid var(--line); border-radius: var(--r); }
.scroll > table { border: 0; border-radius: 0; width: 100%; }
table { table-layout: auto; }
th, td { white-space: nowrap; }
th.wrap, td.wrap { white-space: normal; min-width: 220px; }

@media (max-width: 1280px) { .col-xl { display: none; } }
@media (max-width: 1040px) { .col-lg { display: none; } }
@media (max-width: 820px)  { .col-md { display: none; } }
/* ---- on a phone, a table stops being a table --------------------------- */
/* A table that scrolls sideways on a phone is a table nobody reads: the column
   you want is always the one off the edge. Below this width each row becomes a
   card — the client's name at the top, then its fields as label-and-value
   lines, with the label coming from the heading the row would have had. The
   columns hidden on a narrow DESKTOP come back here, because a card has room
   downwards even when a screen has none across. */
@media (max-width: 640px) {
  main { padding: 0 16px 56px; }
  header.top { padding: 0 14px; gap: 12px; height: 54px; }
  header.top nav { gap: 14px; }
  header.top .env, header.top .who { display: none; }
  header.top .brand { font-size: 16px; }
  header.top nav a { font-size: 14px; padding: 17px 0; }
  header.top button.quiet { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
  /* Six links and a button do not fit 375px. The word "XLL" goes (the logo
     stays), the gaps tighten, and if it is still too wide the bar scrolls
     inside itself rather than pushing the whole page wider than the phone. */
  header.top .brand .word { display: none; }
  header.top nav.areas { gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto;
                         justify-content: flex-end; scrollbar-width: none; }
  header.top nav.areas a { white-space: nowrap; }
  h1 { font-size: 22px; }

  .col-md, .col-lg, .col-xl { display: revert; }

  .scroll { border: 0; overflow: visible; }
  .scroll > table, .scroll tbody, .scroll tr, .scroll td { display: block; width: auto; }
  .scroll thead { display: none; }
  .scroll tr {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px 16px; margin: 0 0 12px;
  }
  .scroll tbody tr:hover td { background: none; }
  .scroll td {
    border: 0; padding: 5px 0; white-space: normal;
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    text-align: right; font-size: 15px;
  }
  .scroll td::before {
    content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 500;
    text-align: left; flex: 0 0 auto;
  }
  /* the client's own name is the card's heading, not a labelled line */
  .scroll td:first-child {
    display: block; text-align: left; font-size: 17px; padding: 0 0 9px;
    margin: 0 0 8px; border-bottom: 1px solid var(--line-2); min-width: 0;
  }
  .scroll td:first-child::before { content: none; }
  .scroll td:empty { display: none; }
}

/* ---- choosing companies for a person, at two hundred clients ----------- */
.picker { border: 1px solid var(--line); border-radius: var(--r); margin: 10px 0 0;
          background: var(--card); }
.picker.dimmed { opacity: .45; pointer-events: none; }
.picker-top { display: flex; gap: 10px; align-items: center; padding: 10px 12px;
              border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.picker-top input[type=search] { flex: 1 1 260px; width: auto; padding: 8px 11px;
              border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit;
              font-size: 15px; }
.picker-count { font-size: var(--sb); color: var(--xll); font-weight: 600;
                white-space: nowrap; }
.picker-top button.quiet { padding: 6px 12px; font-size: 14px; }
/* Tall enough to show that it is a list and short enough not to own the page;
   two hundred rows scroll inside it, not down the screen. */
.picker-list { max-height: 330px; overflow-y: auto; }
.picker-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
              grid-auto-flow: column;
              align-items: center; padding: 8px 12px; margin: 0; font-weight: 400;
              border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: 15px; }
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--xll-050); }
.picker-row input { width: auto; accent-color: var(--xll); }
.picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-reg { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---- switching client, at two hundred of them -------------------------- */
.switcher { position: relative; min-width: 260px; }
.switcher label { margin: 0 0 3px; }
.switcher input { width: 100%; }
.switch-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0;
  padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-2);
  /* ten rows, then it scrolls */
  max-height: calc(10 * 36px); overflow-y: auto;
}
.switch-list li { padding: 8px 12px; cursor: pointer; font-size: 15px; line-height: 20px;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-list li:hover, .switch-list li.on { background: var(--xll-050); color: var(--xll); }
.switch-list li[aria-selected="true"] { font-weight: 600; }

/* ---- what a client owes LHDN, and when --------------------------------
   The dates are worked out, never typed, so this panel is read-only.

   It is a list and not a table on purpose. The responsive table rules above
   turn every row into its own card below 640px, which is right for the client
   list and far too heavy for four short lines — a phone ended up scrolling
   through one card per deadline. A list of flexible rows wraps instead.

   The colouring follows the five fixed meanings in tokens.css, with one
   deliberate restraint: a date that has gone by is AMBER, somebody must look,
   and never red. Red means blocked, and the system does not yet know whether
   the return was filed. Telling the practice a client is late when they filed
   on time is worse than showing nothing. */
.due { list-style: none; margin: 0; padding: 0; }
.due li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
          padding: 11px 0; border-top: 1px solid var(--line-2); }
.due li:first-child { border-top: 0; padding-top: 0; }
.due .when { flex: 0 0 auto; min-width: 104px; font-weight: 600;
             font-variant-numeric: tabular-nums; }
.due .what { flex: 1 1 200px; color: var(--ink-2); }
.due .what strong { color: var(--ink); font-weight: 600; }
.due .days { color: var(--muted); font-size: 14px; }
.due .chip { margin-left: auto; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px;
        font-size: 13px; font-weight: 500; white-space: nowrap;
        border: 1px solid transparent; }
.chip.passed { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.chip.soon   { background: var(--xll-050); color: var(--xll); border-color: var(--xll-200); }
.chip.ahead  { background: var(--bg); color: var(--muted); border-color: var(--line); }

/* A client with no year end recorded has no deadlines to show, and that
   absence is the finding — not an empty panel. */
.gap { background: var(--warn-bg); border: 1px solid var(--warn-line);
       color: var(--warn); border-radius: var(--r-sm); padding: 10px 12px;
       margin: 0 0 12px; font-size: 15px; }
.gap:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .due .when { min-width: 0; }
  .due .chip { margin-left: 0; }
}

/* A month heading inside the due list: four hundred dates read as a wall,
   "October 2026" then "November 2026" reads as a plan. */
tr.month td { background: var(--bg); color: var(--xll); font-weight: 600;
              font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
              padding: 9px 12px; }
tbody tr.month:hover td { background: var(--bg); }
.when { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .scroll tr.month { padding: 0; border: 0; background: none; margin: 14px 0 6px; }
  .scroll tr.month td { display: block; text-align: left; background: none;
                        padding: 0; border-radius: 0; }
  .scroll tr.month td::before { content: none; }
}


/* ---- the state a person recorded, beside the date that was worked out ----
   Two chips can sit on one line and they answer different questions: the
   filing chip is what somebody said, the date chip is arithmetic. Once a
   filing is finished with — submitted, or declared not applicable — the date
   chip goes, because a settled filing does not need chasing and a row that
   keeps its amber after the work is done is how a list loses its meaning. */
.chip.filing.not_started  { background: var(--bg); color: var(--muted); border-color: var(--line); }
.chip.filing.in_progress  { background: var(--xll-050); color: var(--xll); border-color: var(--xll-200); }
.chip.filing.submitted    { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.chip.filing.not_applicable { background: var(--bg); color: var(--ink-4); border-color: var(--line); }
.due li.done .when, .due li.done .what strong { color: var(--muted); font-weight: 500; }

.due .chip.filing { margin-left: auto; }
.due .chip.filing ~ .chip { margin-left: 0; }

/* Recording a submission is a form, and a form on every row would bury the
   list it belongs to. It opens where it is needed and nowhere else. */
.rec { flex: 1 1 100%; margin: 8px 0 2px; }
.rec > summary { cursor: pointer; color: var(--xll); font-size: 14px;
                 font-weight: 500; list-style: none; display: inline-block;
                 padding: 2px 9px; border: 1px solid var(--xll-200);
                 border-radius: 999px; background: var(--xll-050); }
.rec > summary::-webkit-details-marker { display: none; }
.rec[open] > summary { margin-bottom: 10px; }
.rec form { background: var(--bg); border: 1px solid var(--line);
            border-radius: var(--r); padding: 14px 16px; }
.rec .row { gap: 14px; flex-wrap: wrap; }
.rec .row > div { flex: 1 1 160px; }
.rec input, .rec select { width: 100%; }

/* ---- the figures that open into the list behind them --------------------
   Christine's test of the dashboard is "Form C — which company haven't
   submit", so the figure and the answer are the same control: every tile is
   a link into the list it counts. A tile that is only a number is a number
   nobody can act on, and eventually one nobody believes. */
.tally { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 10px; }
.tally .tile { display: flex; flex-direction: column; gap: 2px; min-width: 116px;
               padding: 12px 16px; border: 1px solid var(--line);
               border-radius: var(--r); background: var(--card);
               text-decoration: none; box-shadow: var(--sh-1); }
.tally .tile strong { font-size: 26px; line-height: 1.1; color: var(--ink);
                      font-variant-numeric: tabular-nums; }
.tally .tile span { color: var(--muted); font-size: 14px; }
.tally .tile:hover { border-color: var(--xll-200); background: var(--xll-050); }
.tally .tile.on { border-color: var(--xll); background: var(--xll-050); }
.tally .tile.on strong, .tally .tile.on span { color: var(--xll); }
tr.done .when, tr.done td a { color: var(--muted); }


/* ---- marking several clients at once -----------------------------------
   The controls sit BELOW the list, where the ticks are, rather than above it
   where somebody would set them and then scroll away from what they apply to. */
.batch { margin: 14px 0 0; padding: 14px 16px; background: var(--xll-050);
         border: 1px solid var(--xll-200); border-radius: var(--r); }
.batch > strong { display: block; margin-bottom: 8px; }
.batch .row { gap: 14px; flex-wrap: wrap; align-items: flex-end; }
td.pick, th.pick { width: 34px; }
td.pick input { margin: 0; }
@media (max-width: 640px) {
  .scroll td.pick { justify-content: flex-start; gap: 10px; }
}

/* A batch whose contents disagree says so rather than picking a winner. */
.chip.filing.uploaded { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }

/* ---- two bars, because the practice works in three places ---------------
   One flat list made "Archived" look like a peer of "Documents". The top bar
   is where you are working; the second is what you can do there. */
header.top nav.areas a { font-weight: 600; }
header.top nav.areas a.on { background: rgba(255,255,255,.18); border-radius: var(--r-sm); }
header.top nav.areas a.small { font-weight: 400; opacity: .85; }

nav.sub { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center;
          padding: 0 24px; background: var(--card);
          border-bottom: 1px solid var(--line); }
nav.sub a { display: inline-block; padding: 11px 14px; color: var(--muted);
            text-decoration: none; font-size: 15px; font-weight: 500;
            border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.sub a:hover { color: var(--ink); }
nav.sub a.on { color: var(--xll); border-bottom-color: var(--xll); }
@media (max-width: 640px) {
  nav.sub { padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
  nav.sub a { white-space: nowrap; padding: 11px 10px; }
}

/* Overdue is the one place red is right: the date has gone and nobody has
   said it was done. Everything still only amber is waiting, not failing. */
.chip.overdue { background: var(--stop-bg); color: var(--stop); border-color: var(--stop-line); }
.tally .tile.alarm strong { color: var(--stop); }
.tally .tile.alarm:hover, .tally .tile.alarm.on { border-color: var(--stop); background: var(--stop-bg); }
.tally .tile.alarm.on span { color: var(--stop); }


/* ---- the first screen after signing in ---------------------------------
   Two hundred and seven clients in alphabetical order answers no question
   anybody has. These do, and each one opens the list it counts. */
.tally.home { gap: 14px; }
.tally.home .tile { min-width: 190px; flex: 1 1 190px; padding: 16px 18px; gap: 3px; }
.tally.home .tile strong { font-size: 34px; }
.tally.home .tile span { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.tally.home .tile em { color: var(--ink-4); font-size: 13px; font-style: normal;
                       line-height: 1.35; }
.tally.home .tile.alarm { border-color: var(--stop-line); background: var(--stop-bg); }
.tally.home .tile.alarm strong, .tally.home .tile.alarm span { color: var(--stop); }

/* A remark is somebody's note to the next person, not a field off the paper. */
.remark { flex: 1 1 100%; color: var(--ink-2); font-size: 14px;
          border-left: 2px solid var(--line); padding-left: 10px; margin: 4px 0 0; }

/* ---- paper ---------------------------------------------------------------
   Everything here was printing with the blue bar, the sub-bar, sixteen
   buttons and a Sign out across the top. What goes on paper is the record,
   not the controls somebody used to reach it.

   What survives: who it is, what is due, what came in, and the date it was
   printed — because a page about deadlines with no date on it is a page
   nobody can file. */
.printhead { display: none; }

@media print {
  header.top, nav.sub, form.row, .batch, .rec, .pager, .switcher,
  button, .btn, td.pick, th.pick, .msg, noscript { display: none !important; }

  /* The filter form wraps the due table; hiding every form would take the
     table with it, so only the filter rows above go. */
  .printhead { display: block; margin: 0 0 14pt; }
  .printhead h1 { margin: 0; font-size: 16pt; }
  .printhead p { margin: 2pt 0 0; font-size: 9pt; color: #555; }

  body { background: #fff; font-size: 10pt; }
  main { max-width: none; padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0 0 12pt; break-inside: avoid; }
  .grid { display: block; }
  .scroll { border: 0; overflow: visible; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 4pt 6pt; border-bottom: 1px solid #ddd; white-space: normal; }
  thead { display: table-header-group; }       /* repeat on every page */
  tr { break-inside: avoid; }

  /* Chips carry meaning, so they print — as text with a rule, not as colour
     somebody's printer may not have. */
  .chip { border: 1px solid #999; background: none !important; color: #000 !important;
          padding: 0 4pt; border-radius: 3pt; font-size: 8.5pt; }
  .tally { gap: 8pt; }
  .tally .tile { border: 1px solid #999; box-shadow: none; padding: 6pt 10pt; }
  .tally .tile em { display: none; }
  a { color: #000; text-decoration: none; }
  .gap { border: 1px solid #999; background: none; color: #000; }
  .due li { break-inside: avoid; }
  h1, h2 { break-after: avoid; }
}

/* ---- a tag, not a sentence ----------------------------------------------
   Every row used to carry seven clauses of explanation: what was assumed,
   how many boxes came, which date the rule would have given, that a service
   date is not a statutory one. All true, all written for a reason, and
   together unreadable. The facts are tags now and the reasons are in the
   title, where somebody who wants them can find them and nobody else has to
   read past them. */
.mark { display: inline-block; padding: 1px 7px; margin-left: 6px;
        border: 1px solid var(--line); border-radius: 999px;
        font-size: 12px; color: var(--muted); background: var(--card);
        white-space: nowrap; cursor: help; }
.mark.warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
.mark.ok { border-color: var(--ok-line); color: var(--ok); background: var(--ok-bg); }
@media print { .mark { cursor: auto; } }

/* The permanent id sits beside the name wherever a company is listed. It is
   what two systems agree on, so it belongs on screen and in every export —
   not only on the company's own page. */
td .id { margin-left: 8px; }
@media (max-width: 640px) { td .id { margin-left: 0; } }

/* The five fee states, in her sheet's own order. Only one of them is a
   problem, so only one of them is loud. */
.chip.fee { background: var(--bg); color: var(--muted); border-color: var(--line); }
.chip.fee.queries-sent { background: var(--xll-050); color: var(--xll); border-color: var(--xll-200); }
.chip.fee.billed-pending-payment { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.chip.fee.paid-accounts-not-sent { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.chip.fee.settled { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.due .when { font-variant-numeric: tabular-nums; }

/* ---- the monthly fee grid ------------------------------------------------
   Her sheet colours each cell by hand. Here the colour is worked out, so a
   cell can never say something the client's own page disagrees with. */
.grid-fees td.cell { text-align: right; font-variant-numeric: tabular-nums;
                     white-space: nowrap; }
.grid-fees td.s-doc-in { background: var(--bg); }
.grid-fees td.s-queries-sent { background: var(--xll-050); color: var(--xll); }
.grid-fees td.s-billed-pending-payment { background: var(--warn-bg); color: var(--warn); }
.grid-fees td.s-paid-accounts-not-sent { background: var(--warn-bg); color: var(--warn); }
.grid-fees td.s-settled { background: var(--ok-bg); color: var(--ok); }
.grid-fees tr.month td { text-align: right; font-weight: 600; }
.grid-fees tr.month td:first-child { text-align: left; text-transform: none;
                                     letter-spacing: 0; font-size: 14px; }
@media print { .grid-fees td.cell { border: 1px solid #ddd; } }

/* Cells you type into. Narrow, right-aligned, and the suggestion in grey so
   the eye reads "1,500.00 (if you want it)" rather than a recorded fee. */
.grid-fees input.fee { width: 7.5em; text-align: right; padding: 3px 6px;
                       font-variant-numeric: tabular-nums; font-size: 14px;
                       border: 1px solid transparent; background: transparent; }
.grid-fees input.fee:hover, .grid-fees input.fee:focus { border-color: var(--xll-200);
                       background: var(--card); }
.grid-fees input.fee::placeholder { color: var(--ink-4); }
.grid-fees label.paid { display: block; font-size: 11px; color: var(--muted);
                        margin-top: 2px; cursor: pointer; white-space: nowrap; }
.grid-fees label.paid input { margin: 0 3px 0 0; vertical-align: middle; }
@media print { .grid-fees input.fee { border: 0; } .grid-fees label.paid { display: none; } }

/* Papers have not come for a period that has closed. Amber: somebody must
   look, but it is the client who is behind, not the practice. */
.chip.filing.chase { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }

/* ---- the Ask box: one line, bottom right, on every page ------------------
   Christine: 一个 checkbox 小小个这样子罢了，怎样容易怎样来. Not a page. */
.askbar { position: fixed; right: 18px; bottom: 18px; z-index: 20;
          display: flex; gap: 6px; align-items: center;
          background: var(--card); border: 1px solid var(--xll-200);
          border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: var(--sh-2);
          width: min(440px, calc(100vw - 36px)); }
.askbar input[type=text] { flex: 1 1 auto; border: 0; background: transparent;
                           font-size: 15px; padding: 6px 0; min-width: 0; }
.askbar input[type=text]:focus { outline: none; }
.askbar .btn { padding: 6px 14px; border-radius: 999px; }
main { padding-bottom: 80px; }                /* room so the bar covers nothing */
@media (max-width: 640px) { .askbar { right: 10px; bottom: 10px; left: 10px; width: auto; } }
@media print { .askbar { display: none; } }

/* ---- the client page, one column -----------------------------------------
   Four short tables, one line each. "edit" and "fee" are text that opens,
   not pills that shout. */
main.client { max-width: 64rem; }
details.plain > summary { cursor: pointer; color: var(--xll); font-weight: 500;
                          font-size: 15px; list-style: none; }
details.plain > summary::-webkit-details-marker { display: none; }
details.plain > summary::before { content: "\25B8  "; font-size: 12px; }
details.plain[open] > summary::before { content: "\25BE  "; }
h2 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
     color: var(--xll); margin: 22px 0 6px; }
.due .rec > summary { background: none; border: 0; padding: 0 2px; font-size: 13px;
                      color: var(--muted); text-decoration: underline dotted; }
.due .rec > summary:hover { color: var(--xll); }
.due li .rec { flex: 0 0 auto; margin: 0 0 0 4px; }
.due li .rec[open] { flex: 1 1 100%; margin-top: 8px; }
.tally .tile { min-width: 128px; }

/* A folded group on the client page: one quiet line with a count. */
details.fold { margin: 2px 0 10px; }
details.fold > summary { font-size: 13px; color: var(--ink-2); }
details.fold[open] > summary { margin-bottom: 4px; }

/* The agreed-fee line under the client's name: a fact with a quiet edit. */
div.agreed { margin: 4px 0 0; }
div.agreed details.rec { display: inline-block; margin-left: 6px; vertical-align: baseline; }
div.agreed details.rec > summary { font-size: 13px; }
div.agreed details.rec[open] { display: block; margin: 8px 0 0; }
.btn.small { padding: 4px 10px; font-size: 13px; }

/* The due list: counts as one short line of chips, months that fold. */
.tally.small { gap: 8px; margin: 6px 0 14px; }
.tally.small .tile { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0;
  padding: 5px 11px; border-radius: 999px; }
.tally.small .tile strong { font-size: 16px; }
.tally.small .tile span { font-size: 13px; }
.tally.small .tile.alarm strong { color: var(--warn); }
form.filters { gap: 10px 14px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 10px; }
form.filters label { font-size: 12px; }
details.fold.month { margin: 0 0 6px; }
details.fold.month > summary { font-size: 15px; color: var(--ink); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); }
details.fold.month[open] > summary { margin-bottom: 8px; border-color: var(--xll-200); }
details.fold.month > summary .alarm { color: var(--warn); font-weight: 600; }
form.inline { display: inline; margin: 0; }
.tally.small { align-items: flex-start; }
.tally.small details.byform { display: block; }
.tally.small details.byform > summary { display: none; }
.tally.small details.byform .chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  /* A phone: two counts, the forms behind one word, the filters two to a
     row, and no Export or Print — nobody prints from a phone. */
  .tally.small details.byform { display: block; width: 100%; }
  .tally.small details.byform > summary { display: list-item; font-size: 13px; color: var(--xll);
    padding: 4px 2px; cursor: pointer; }
  .tally.small details.byform[open] > summary { margin-bottom: 6px; }
  .tally.small details.byform .chips { gap: 6px; }
  form.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  form.filters > div { min-width: 0; }
  form.filters select, form.filters input { width: 100%; }
  form.filters .desk { display: none; }
}

/* The client's special remark: Christine's words, where everyone sees them. */
p.remark { margin: 6px 0 0; padding: 6px 10px; background: var(--warn-bg); color: var(--ink);
  border-left: 3px solid var(--warn); border-radius: 6px; font-size: 14px; white-space: pre-line; }

/* A one-line hint under a form field: small, grey, never a paragraph. */
span.hint{display:block;font-size:.8rem;color:var(--muted,#666);margin-top:.2rem}

/* ---- phone: lists stay short (Christine: "I don't want a long page view") */
.phone-only { display: none; }
@media (max-width: 640px) {
  .phone-only { display: block; }
  /* Companies: the name, year end, what we do and PIC. The rest is one tap
     away on the client's page. */
  table.companies td.col-md, table.companies td.col-lg, table.companies td.col-xl { display: none; }
  /* Fees: a client card lists only the months that have something in them,
     and the page total is for a wide screen. */
  .grid-fees td.empty, .grid-fees td.blank, .grid-fees td.col-md, .grid-fees td.col-lg { display: none; }
  .grid-fees tr.totals { display: none; }
  /* A tick box is not a heading: when it is the first cell, the card keeps
     it small and puts the real first line under it as the heading. */
  .scroll td.pick:first-child { border: 0; padding: 0; margin: 0 0 4px; font-size: 15px; }
  .scroll td.pick:first-child + td { display: block; text-align: left; font-size: 17px;
                                      padding: 0 0 9px; margin: 0 0 8px;
                                      border-bottom: 1px solid var(--line-2); }
  .scroll td.pick:first-child + td::before { content: none; }
}