/* Tessera — iPhone first, usable on a desktop. No framework, no build step.
   Restrained on purpose: this is a finance record, and it should read like one. */

:root {
  /* Drawn from the firm's mark: a deep teal that carries the blue of the logo, on cooler
     neutrals than the previous near-white. Brighter where something needs to be noticed -
     the old amber and red were pale enough to be missed. */
  --ink: #0f172a;
  --muted: #5b6b7f;
  --line: #dde5ec;
  --paper: #f4f7fa;
  --card: #ffffff;
  --accent: #0e6b70;      /* the one colour, used for actions and the wordmark */
  --accent-deep: #084f53;
  --band: #ddeef0;        /* a soft tint of the accent, for group headings */
  --good: #0b7a45;
  --bad: #c62828;
  --warn: #a45a06;
  --good-soft: #e3f5ec;
  --bad-soft: #fdeaea;
  --warn-soft: #fdf0dd;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* Selected text. The browser default over a pale background is barely visible, and the point
   of highlighting something is that it stands out. */
::selection { background: #ffd54a; color: var(--ink); }
::-moz-selection { background: #ffd54a; color: var(--ink); }

/* The hidden attribute wins, always.
   Any rule of ours that sets `display` outranks the browser's own rule for [hidden] - which is
   how three hidden file inputs came to sit at the top of the capture form as "Choose file"
   buttons, and how the sheets once covered the page. One rule here, rather than remembering to
   guard every `display` we write. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding-bottom: 6rem;           /* room for the capture button */
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap;
  padding: env(safe-area-inset-top) 1rem 0.75rem;
  padding-top: calc(env(safe-area-inset-top) + 0.75rem);
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
/* The wordmark: the firm's mark, the tool's name, then whose tool it is.
   The application is still called Tessera everywhere that matters - the manifest, the
   home-screen label, the page titles. This is presentation only (DECISIONS D-047). */
.wordmark {
  display: flex; align-items: center; gap: 0.45rem; text-decoration: none;
  color: var(--accent); font-size: 0.95rem; min-width: 0;
}
.wordmark-logo { height: 23px; width: auto; flex: none; }
.wordmark-name { font-weight: 700; letter-spacing: 0.16em; }
.wordmark-divider { color: var(--line); font-weight: 400; }
.wordmark-firm { font-style: italic; font-weight: 400; color: var(--muted); white-space: nowrap; }

.wordmark-large {
  font-weight: 700; letter-spacing: 0.18em; color: var(--accent); font-size: 1.5rem; margin: 0;
}
/* The byline is words, not a wordmark: it keeps normal spacing. */
.wordmark-large .wordmark-firm, .wordmark-large .wordmark-divider { letter-spacing: normal; }
.wordmark-large .wordmark-firm { font-size: 1.05rem; }
.login-logo { display: block; width: 132px; height: auto; margin: 0 0 1rem; }

/* On a narrow phone the nav needs the room more than the byline does. */
@media (max-width: 30rem) {
  .wordmark-divider, .wordmark-firm { display: none; }
}
.bar nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bar nav a, .link { color: var(--muted); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }

/* On a phone the navigation takes its own line. Five links and a wordmark do not fit across
   430 pixels, and squeezed onto one row they overlap each other. */
@media (max-width: 34rem) {
  .bar nav { width: 100%; justify-content: space-between; gap: 0.5rem; }
  .bar nav a, .link { font-size: 0.82rem; }
}
.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Width by what the page is, not one cap for everything.
   A list or a grid uses the room a laptop gives it; a form or a page of prose does not - long
   lines of running text are harder to read, not easier. Phones are below every cap anyway. */
main { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem; }
@media (min-width: 60rem) { main.wide { max-width: 64rem; } }
@media (min-width: 80rem) { main.wide { max-width: 76rem; } }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.optional { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.hint { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; font-weight: 400; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.75rem; }
.list li:last-child { border-bottom: 0; }
.list li > a { flex: 1; display: grid; gap: 0.15rem; padding: 0.7rem 0; text-decoration: none; color: inherit; }
.list.rows li > a { grid-template-columns: 1fr auto; }
.who { font-size: 0.85rem; color: var(--muted); }
.what { font-weight: 600; }
.meta { font-size: 0.85rem; color: var(--muted); }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.copy { font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.more { display: inline-block; margin-top: 0.75rem; color: var(--accent); text-decoration: none; font-size: 0.9rem; }

.state { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.state-approved { color: var(--good); }
.state-rejected { color: var(--bad); }
.state-returned { color: var(--warn); }
.state-paid { color: var(--accent); }
.flag { font-size: 0.75rem; color: var(--warn); }
.reference { font-variant-numeric: tabular-nums; color: var(--muted); display: flex; gap: 0.75rem; align-items: center; }

label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; }
input, select, button { font: inherit; }

/* Safari zooms the page in on any field whose text is under 16px, and the row labels are
   smaller than that - which the fields were inheriting. Sixteen pixels exactly is the
   threshold, so this is what stops a tap from zooming. */
input, select, textarea { font-size: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  font-weight: 400; min-height: 44px;            /* a real tap target on a phone */
}
input[type=file] { display: block; margin-top: 0.5rem; width: 100%; }
label.check { display: flex; align-items: center; gap: 0.6rem; }
label.check input { width: auto; min-height: auto; margin: 0; }
.row { display: flex; gap: 0.75rem; }
.row .grow { flex: 1; }

button {
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  padding: 0.85rem 1.2rem; min-height: 48px; cursor: pointer; font-weight: 600; width: 100%;
}
button.approve { background: var(--good); }
button.reject { background: var(--bad); }
button.return { background: var(--warn); }

.primary-action {
  display: block; text-align: center; background: var(--accent); color: #fff;
  border-radius: var(--radius); padding: 1rem; text-decoration: none; font-weight: 600; margin-bottom: 1.25rem;
}

.capture-button {
  position: fixed; right: 1.1rem; bottom: calc(env(safe-area-inset-bottom) + 1.1rem);
  width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 2rem; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.login { max-width: 22rem; margin: 3rem auto; }
.login p.muted { margin-top: 0.3rem; margin-bottom: 2rem; font-size: 0.9rem; }

.error { background: var(--bad-soft); border: 1px solid var(--bad); color: var(--bad); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.error ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.notice { background: var(--band); border: 1px solid var(--accent); color: var(--accent-deep); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }

.detail { display: grid; grid-template-columns: 9rem 1fr; gap: 0.4rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.detail dt { color: var(--muted); font-size: 0.85rem; }
.detail dd { margin: 0; font-variant-numeric: tabular-nums; }

.receipt-image { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.receipt-field { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 1rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.timeline .comment { margin: 0.3rem 0 0; color: var(--muted); }

.approval a { display: grid; gap: 0.2rem; text-decoration: none; color: inherit; margin-bottom: 0.75rem; }
.approval details { margin-top: 0.75rem; }
.approval summary { color: var(--muted); font-size: 0.9rem; cursor: pointer; }
.approval details form { margin-top: 0.75rem; }

@media (min-width: 40rem) {
  .capture-button { display: none; }
}

/* The receipt block: two clearly separate ways to attach one. */
.receipt-field { display: grid; gap: 0.6rem; }
.field-label { font-weight: 600; font-size: 0.9rem; }
.receipt-option { margin: 0; }
.receipt-option input[type=file] { margin-top: 0.4rem; }
.receipt-action {
  display: block; text-align: center; background: var(--accent); color: #fff;
  border-radius: var(--radius); padding: 0.8rem 1rem; font-weight: 600; font-size: 0.95rem;
}
.receipt-action.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

/* Your expenses — the same card the home screen and the approvals queue use, so the three
   screens read as one application. Two columns: what it was on the left, what it cost on the
   right, so amounts line up down the page instead of trailing off after the merchant name. */
.expense-cards { list-style: none; margin: 0; padding: 0; }
.expense-card { padding: 0.85rem 1rem; }

.expense-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  text-decoration: none;
  color: inherit;
}
.expense-summary .what { min-width: 0; overflow-wrap: anywhere; }
.expense-summary .amount { white-space: nowrap; }
.expense-summary .state { text-align: right; white-space: nowrap; }

.expense-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.expense-footer .coding { color: var(--muted); flex: 1; min-width: 0; }
.expense-footer .copy { margin-left: auto; white-space: nowrap; }

/* Why an expense came back, or why it was refused. Directly under the state line, because on
   a returned expense it is the only thing the submitter actually needs from the page. */
.decision { border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.decision-who { margin: 0 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.decision-comment { margin: 0; font-size: 1rem; }

.decision-returned { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.decision-rejected { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.decision-comment { color: var(--ink); }

button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); margin-top: 0.6rem; }
.copy.amend { font-weight: 600; }
.expense-footer .copy { margin-left: 0; }
.expense-footer .copy:first-of-type { margin-left: auto; }

.receipt-thumb { display: block; max-height: 180px; border-radius: var(--radius); border: 1px solid var(--line); }

.delete-form { margin-top: 1.5rem; }
button.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }

/* Admin and reports */
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.admin-nav a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.55rem 0.9rem; text-decoration: none; color: var(--accent); font-size: 0.9rem; font-weight: 600;
}
.period-form button { width: auto; padding: 0.6rem 1.2rem; }
.run-line { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
            padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.run-line .what { flex: 1; min-width: 8rem; }
.run-line .period { width: 7rem; margin: 0; }
.run-line button { width: auto; padding: 0.5rem 0.9rem; min-height: 40px; }

table.report { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 0.75rem; }
table.report th, table.report td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); }
table.report th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
table.report .num { text-align: right; font-variant-numeric: tabular-nums; }

details.format summary { font-weight: 600; cursor: pointer; }
details.format h3 { font-size: 0.9rem; margin: 1rem 0 0.4rem; }
details.format code { background: var(--paper); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85em; }
details.format ul.hint { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* A way back from any screen you had to click into. */
.back {
  display: inline-block; margin-bottom: 0.75rem; color: var(--muted);
  text-decoration: none; font-size: 0.9rem;
}
.back::before { content: "\2190"; margin-right: 0.4rem; }
.back:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   The capture form. Laid out so the receipt, the amount and the date come first
   and everything rarely changed sits at the bottom. Same palette as the rest.
   --------------------------------------------------------------------------- */

.capture-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: -0.25rem 0 1rem;
}
.capture-title { font-weight: 600; }
.capture-cancel, .capture-done {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.1rem; text-decoration: none; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; padding: 0; min-height: 42px;
}
.capture-done { background: var(--accent); color: #fff; border-color: var(--accent); width: 46px; height: 46px; }
/* Waiting on the last panel: visibly not ready, but still worth tapping - it takes you there. */
.capture-done.is-waiting { background: var(--paper); color: var(--muted); border-color: var(--line); }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 0.9rem;
}
.panel-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem; }
.panel-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
                 color: var(--muted); margin: 0 0 0.6rem; }
.required { color: var(--accent); }

.row-field { display: block; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--line);
             font-weight: 600; font-size: 0.85rem; }
.panel .row-field:last-of-type { border-bottom: 0; padding-bottom: 0; }
.row-field input, .row-field select { margin-top: 0.3rem; }

/* The receipt row: thumbnail, button, and what is attached - all on one line, because every
   line this screen saves is a line the submitter does not scroll past. */
.receipt-panel { display: flex; align-items: center; gap: 0.7rem; }
.add-receipt {
  background: transparent; color: var(--accent); border: 1px dashed var(--accent);
  font-weight: 600; width: auto; flex: none; padding: 0.7rem 1rem;
}
.receipt-panel .receipt-thumb { flex: none; height: 44px; width: auto; margin: 0; }
.receipt-note {
  flex: 1; min-width: 0; margin: 0; font-size: 0.78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The currency and the amount are one control split in two, so they are the same height.
   `stretch` rather than a fixed height on each: the amount's type size sets it, and the
   currency follows whatever that turns out to be. */
.amount-row { display: flex; align-items: stretch; gap: 0.6rem; }
.currency-button {
  background: transparent; color: var(--accent); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0 0.85rem; width: auto; min-height: 0; cursor: pointer; flex: none;
  display: flex; align-items: center;
}
/* Scoped to the row so it outranks the general rule for text inputs - which the amount now
   matches, since it had to stop being a number field to hold an apostrophe (D-058). Left to
   that rule it inherits a border by accident rather than by decision. */
.amount-row .amount-input {
  flex: 1; min-width: 0; width: auto; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1.9rem; font-weight: 700; color: var(--accent);
  padding: 0.3rem 0.6rem; background: var(--card);
  font-variant-numeric: tabular-nums; min-height: 0;
}
.amount-input:focus { outline: none; }

/* Sheets. Plain overlays, not <dialog>: a browser without dialog support leaves the contents
   sitting in the page rather than hiding them, which is exactly how this went wrong. A div that
   is hidden until JavaScript clears `hidden` behaves the same everywhere. */
.sheet {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.35); padding: 1rem;
}
.sheet-panel {
  background: var(--card); color: var(--ink); border-radius: 14px; padding: 0.9rem;
  width: min(26rem, 100%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  max-height: 85vh; display: flex; flex-direction: column;
}
.sheet-title { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }
.sheet-button {
  display: block; width: 100%; margin-bottom: 0.55rem; background: var(--paper);
  color: var(--accent); border: 1px solid var(--line); font-weight: 600;
}
.sheet-cancel { color: var(--muted); margin-bottom: 0; }

.sheet-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; font-weight: 600; }
.sheet-close { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; padding: 0;
               background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
#currency-search { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line);
                   border-radius: var(--radius); margin-bottom: 0.6rem; flex: none; }
.currency-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.currency-group { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
                  color: var(--muted); margin: 0.8rem 0 0.3rem; }
.currency-option {
  display: block; width: 100%; text-align: left; background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.6rem 0.2rem;
  min-height: 44px; font-weight: 400;
}
.currency-option strong { font-weight: 700; margin-right: 0.4rem; }

/* On a wider screen the sheet sits in the middle rather than rising from the bottom. */
@media (min-width: 40rem) {
  .sheet { align-items: center; }
}

/* The approval queue, gathered by person. */
.submitter-group { padding: 0; overflow: hidden; }
.submitter-summary {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
  padding: 0.85rem 1rem; cursor: pointer; align-items: baseline;
  background: var(--band);
}
.submitter-summary::-webkit-details-marker { display: none; }
.submitter-summary { grid-template-rows: auto auto; }
.submitter-summary .what { grid-column: 1; grid-row: 1; font-weight: 700; color: var(--accent); }
.submitter-summary .amount { grid-column: 2; grid-row: 1; color: var(--accent); }
.submitter-summary .meta { grid-column: 1 / -1; grid-row: 2; }
.submitter-group[open] .submitter-summary { border-bottom: 1px solid var(--line); }

.approval-item { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.approval-item:last-child { border-bottom: 0; }
.approval-item > a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
                     gap: 0.15rem 0.75rem; text-decoration: none; color: inherit;
                     margin-bottom: 0.6rem; }
.approval-item .what { grid-column: 1; grid-row: 1; }
.approval-item .amount { grid-column: 2; grid-row: 1; }
.approval-item .meta { grid-column: 1 / -1; grid-row: 2; }
.approval-item details { margin-top: 0.6rem; }
.approval-item summary { color: var(--muted); font-size: 0.85rem; cursor: pointer; }
.approval-item details form { margin-top: 0.6rem; }

/* ---------------------------------------------------------------------------
   The home screen. A dashboard: what needs attention, as numbers.
   --------------------------------------------------------------------------- */

.summary {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
}
.greeting { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.tile {
  display: grid; align-content: start; justify-items: center; gap: 0.1rem;
  padding: 0.7rem 0.4rem; text-decoration: none; color: inherit;
  border-radius: var(--radius); border: 1px solid transparent; text-align: center;
}
.tile:hover { background: var(--paper); border-color: var(--line); }
.tile-number { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
               line-height: 1.1; color: var(--ink); }
.tile-label { font-size: 0.72rem; color: var(--muted); line-height: 1.25; }
.tile-amount { font-size: 0.7rem; color: var(--accent); font-variant-numeric: tabular-nums; }
/* "New" is the only tile that does something rather than reporting something, so it looks
   like a button instead of a number. */
.tile-new { background: var(--accent); border-color: var(--accent); }
.tile-new:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.tile-new .tile-number { color: #fff; font-size: 1.7rem; }
.tile-new .tile-label { color: #fff; font-weight: 600; }
/* Something somebody is waiting on, or something that has come back. */
.tile-attention .tile-number { color: var(--warn); }

.alert {
  display: block; text-decoration: none; padding: 0.7rem 1rem; border-radius: var(--radius);
  margin-bottom: 0.75rem; font-size: 0.9rem; border: 1px solid;
}
.alert-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.alert-bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

.section-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
                   color: var(--muted); margin: 1.25rem 0 0.6rem; }

.task-cards { display: grid; gap: 0.9rem; }
.task-card { padding: 0; }
.task-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem; text-decoration: none; color: inherit;
}
.task-count {
  background: var(--accent); color: #fff; border-radius: 8px; padding: 0.25rem 0.5rem;
  font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: center;
}
.task-count-quiet { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.task-label { font-weight: 600; }
.task-arrow { color: var(--muted); }

.task-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.task-list li { border-bottom: 1px solid var(--line); }
.task-list li:last-child { border-bottom: 0; }
.task-list li > a {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  gap: 0.1rem 0.75rem; padding: 0.55rem 1rem; text-decoration: none; color: inherit;
  font-size: 0.9rem;
}
.task-list .meta { grid-column: 1; grid-row: 1; font-size: 0.78rem; }
.task-list .what { grid-column: 1; grid-row: 2; }
.task-list .amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.task-card .more { display: block; padding: 0.55rem 1rem 0.8rem; margin: 0; }

.task-empty { display: flex; align-items: center; gap: 0.6rem; margin: 0;
              padding: 0.2rem 1rem 1rem; color: var(--muted); font-size: 0.9rem; }
.task-tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
             background: var(--paper); border: 1px solid var(--line); color: var(--good); }

@media (min-width: 34rem) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .task-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .task-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Your expenses: filter, then month groups. */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.filter {
  padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); text-decoration: none; font-size: 0.82rem;
}
.filter-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* The card clips its children, so the heading's tint follows the rounded corners. */
.month-group { padding: 0; overflow: hidden; }
/* The month reads first and the amount follows it on the same line, with the count beneath.
   Every cell is placed explicitly: left to the grid's own auto-placement, the amount can land
   above the month on a narrow screen. */
.month-summary {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  gap: 0.1rem 0.75rem; padding: 0.8rem 1rem; cursor: pointer; align-items: baseline;
  background: var(--band);
}
.month-summary::-webkit-details-marker { display: none; }
.month-summary .what { grid-column: 1; grid-row: 1; font-weight: 700; color: var(--accent); }
.month-summary .amount { grid-column: 2; grid-row: 1; color: var(--accent); }
.month-summary .meta { grid-column: 1 / -1; grid-row: 2; }
.month-group[open] .month-summary { border-bottom: 1px solid var(--line); }

.month-list { list-style: none; margin: 0; padding: 0; }
.month-list li { border-bottom: 1px solid var(--line); padding: 0.7rem 1rem; }
.month-list li:last-child { border-bottom: 0; }
.month-list li > a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem;
                     text-decoration: none; color: inherit; }
.month-list .meta { grid-column: 1; }
.month-list .state { grid-column: 2; text-align: right; }
.month-coding { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
                margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); }
.month-coding .copy { margin-left: auto; }
.month-coding .amend + .copy { margin-left: 0; }


/* ---------------------------------------------------------------------------
   One type scale for every list of expenses, so the line you read first is the
   one that identifies the expense, and everything else recedes.
   --------------------------------------------------------------------------- */

.task-list .what,
.month-list .what,
.approval-item .what { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }

.task-list .amount,
.month-list .amount,
.approval-item .amount { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }

.task-list .meta,
.month-list .meta,
.approval-item .meta,
.month-coding { font-size: 0.76rem; color: var(--muted); line-height: 1.35; }

.task-list .state,
.month-list .state,
.approval-item .state { font-size: 0.68rem; }

/* The group headings sit a step above the rows they contain. */
.month-summary .what,
.submitter-summary .what { font-size: 1.02rem; }
.month-summary .amount,
.submitter-summary .amount { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.month-summary .meta,
.submitter-summary .meta { font-size: 0.76rem; }

/* ---------------------------------------------------------------------------
   The capture form's two panels.
   Scroll-snap rather than a carousel library: it uses the phone's own momentum,
   needs no dependency, and there is nothing to break on a 2 GB box.
   --------------------------------------------------------------------------- */

.pane-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.pane-tab {
  flex: 1; width: auto; min-height: 40px; padding: 0.5rem 0.75rem;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 0.85rem; font-weight: 600;
}
.pane-tab-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.panes {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The panels are edge to edge, so the page's own side padding is cancelled here and put
     back inside each panel. Without this a swipe stops short of the screen edge. */
  margin: 0 -1rem; padding: 0 0;
  scrollbar-width: none;
}
.panes::-webkit-scrollbar { display: none; }

.pane {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  padding: 0 1rem; min-width: 0;
}
.pane > .panel:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   A bolder skin over the same structure.

   The rule kept in mind throughout: this is a record of company money, read by
   an auditor as well as by the five people who file it. Colour is used to say
   what something is - approved, returned, owed - not for decoration. Nothing
   below changes a layout; it changes what the layout is made of.
   --------------------------------------------------------------------------- */

:root {
  --ink: #10242c;
  --muted: #5a7280;
  --line: #d3e1e6;
  --paper: #e9f0f3;            /* the page itself is tinted, not near-white */
  --card: #ffffff;
  --accent: #0e6b70;
  --accent-deep: #08414d;
  --accent-bright: #17999b;
  --band: #d7ecec;
  --shadow: 0 1px 2px rgba(16, 36, 44, 0.05), 0 8px 24px rgba(16, 36, 44, 0.07);
}

body { background: var(--paper); }

/* The masthead carries the mark's own colours instead of sitting on white. */
.bar {
  background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 62%, var(--accent-bright) 100%);
  border-bottom: 0;
  box-shadow: 0 2px 14px rgba(8, 65, 77, 0.22);
}
.wordmark-name { color: #fff; }
.wordmark-firm { color: rgba(255, 255, 255, 0.72); }
.wordmark-divider { color: rgba(255, 255, 255, 0.4); }
.bar nav a, .bar .link { color: rgba(255, 255, 255, 0.85); }
.bar nav a:hover, .bar .link:hover { color: #fff; }

/* Cards lift off the page rather than being drawn onto it. */
.card, .panel, .summary {
  border-color: transparent; border-radius: 14px; box-shadow: var(--shadow);
}

/* The greeting band is the one place the accent runs full width. */
.summary {
  background: linear-gradient(130deg, var(--accent-deep) 0%, var(--accent) 100%);
  color: #fff;
}
.greeting { color: #fff; }
.summary .tile-number { color: #fff; }
.summary .tile-label { color: rgba(255, 255, 255, 0.78); }
.summary .tile:hover { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
.summary .tile-amount { color: #fff; }
/* Against the band, "New" inverts: white box, accent mark. */
.tile-new, .tile-new:hover { background: #fff; border-color: #fff; }
.tile-new .tile-number, .tile-new .tile-label { color: var(--accent-deep); }

/* Anything that acts is filled; anything that reports is not.
   Order matters here and caught me out: the quiet states are declared first, so the filled
   states that follow win. Written the other way round, a selected filter came out white on
   white and vanished. */
button.secondary, button.danger, .add-receipt, .sheet-button, .pane-tab, .filter, .sheet-close,
.capture-cancel, .currency-button, .capture-done.is-waiting {
  background: var(--card);
}
button, .primary-action, .task-count, .filter-on, .pane-tab-on, .capture-done {
  background: linear-gradient(120deg, var(--accent-deep), var(--accent));
  border-color: transparent;
}
.filter-on, .pane-tab-on { color: #fff; }
.capture-done.is-waiting { color: var(--muted); border-color: var(--line); }
button.approve { background: linear-gradient(120deg, #0b5f36, var(--good)); }
button.reject { background: linear-gradient(120deg, #9d1f1f, var(--bad)); }
button.return { background: linear-gradient(120deg, #8a4a05, var(--warn)); }

/* A state is a badge, not a line of small capitals. */
.state {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: #e6edf1; color: var(--muted); font-weight: 700; letter-spacing: 0.04em;
}
.state-approved { background: var(--good-soft); color: var(--good); }
.state-paid { background: var(--band); color: var(--accent-deep); }
.state-pending { background: #e7eef8; color: #2a5fa8; }
.state-returned { background: var(--warn-soft); color: var(--warn); }
.state-rejected { background: var(--bad-soft); color: var(--bad); }
.state-draft { background: #e9edef; color: var(--muted); }

/* Group headings take the accent rather than a wash of it. */
.month-summary, .submitter-summary {
  background: linear-gradient(120deg, var(--band), #e8f4f4);
  border-bottom: 1px solid var(--line);
}
.section-heading, .panel-heading { color: var(--accent-deep); }

.capture-button { background: linear-gradient(120deg, var(--accent-deep), var(--accent-bright)); }

/* The mark is dark teal and blue, which disappears against a dark teal masthead. It keeps its
   own colours on a white chip rather than being flattened to a silhouette - the facets in it
   are white lines, so a silhouette would lose every one of them and leave a blob. */
.wordmark-logo {
  background: #fff; border-radius: 8px; padding: 4px 6px; height: 30px;
  box-shadow: 0 1px 3px rgba(8, 65, 77, 0.25);
}
.login-logo { background: transparent; }

/* ---------------------------------------------------------------------------
   Blue, not blue-green.

   The same skin as above with the teal taken out: one hue, from a deep navy
   through to a brighter mid-blue, and neutrals cooled to match rather than
   sitting green against it.

   The status colours are deliberately NOT blue. Green for approved, amber for
   returned, red for rejected are carrying meaning, not decoration - they are
   the one thing in here that has to be distinguishable at a glance, and three
   shades of blue would take that away.
   --------------------------------------------------------------------------- */

:root {
  --ink: #101f38;
  --muted: #5a6b86;
  --line: #d6e0ee;
  --paper: #eaf0f8;
  --card: #ffffff;
  --accent: #1b4f8a;
  --accent-deep: #0e2c55;
  --accent-bright: #2f7fd1;
  --band: #dce8f7;
  --shadow: 0 1px 2px rgba(16, 31, 56, 0.05), 0 8px 24px rgba(16, 31, 56, 0.08);
}

.bar { box-shadow: 0 2px 14px rgba(14, 44, 85, 0.24); }
.wordmark-logo { box-shadow: 0 1px 3px rgba(14, 44, 85, 0.28); }
.capture-button { box-shadow: 0 4px 14px rgba(14, 44, 85, 0.3); }

/* Paid and awaiting are both blue, so they are told apart by weight rather than hue:
   awaiting is a tint, paid is filled. */
.state-pending { background: var(--band); color: var(--accent); }
.state-paid { background: var(--accent); color: #fff; }

.month-summary, .submitter-summary {
  background: linear-gradient(120deg, var(--band), #e7effa);
}

/* "New" is the one tile that acts, so it is bigger than the ones that report, and it fills on
   hover instead of going translucent.
   Scoped to .summary so it outranks `.summary .tile:hover` - which was winning on specificity
   and turning the box translucent over the dark band while the text stayed navy, so the word
   disappeared. */
.tile-new .tile-number { font-size: 2.1rem; line-height: 1; }
.tile-new .tile-label { font-size: 0.85rem; font-weight: 700; }

.summary .tile-new:hover {
  background: var(--accent-bright); border-color: var(--accent-bright);
}
.summary .tile-new:hover .tile-number,
.summary .tile-new:hover .tile-label { color: #fff; }

.reset-form { margin-top: 0.9rem; }
.reset-form button { width: auto; padding: 0.55rem 1rem; min-height: 40px; }