/* TillPenny: colours, font and logo from the brand handoff (October 2026; the values of its
   tillpenny-tokens.css, light mode). Structure and class names follow the Thrive app.
   An account can choose its own colour (Settings, Account): public/brand-css.php then replaces the
   --brand and --accent colours below (app/branding.php works out the shades). The logo never
   takes an account's colour. */

/* Geist, served from this site (the security policy allows no outside fonts). SIL Open Font
   License: public/fonts/OFL.txt. Latin covers English and French; Latin Extended the rest. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/geist-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: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/geist-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FAF8F4;         /* page background */
  --paper: #FFFFFF;      /* cards and tables */
  --ink: #1B1A17;        /* text */
  --muted: #5D5A53;      /* secondary text */
  --line: #E6E2D9;       /* borders, dividers */
  --brand: #E0A21B;      /* TillPenny gold, or the account's colour: lines and marks only, never text */
  --accent: #0F7A82;     /* buttons, links, focus: white text is readable on it */
  --accent-dark: #0B5F66;
  --accent-soft: #DDF1F2;
  --accent-tint: #EFF8F8;
  --accent-text: var(--accent);   /* link text */
  --green: #1D7A45;      /* money in, all good */
  --green-soft: #E2F3E8;
  --amber: #965F00;      /* taxes and tips */
  --amber-soft: #FCEFD6;
  --red: #B42318;        /* needs a check, errors */
  --red-soft: #FDE7E4;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-family: var(--font); margin: 0; color: var(--ink); background: var(--bg); }
/* Amounts, dates and totals line up in columns. */
table, .stat-value, .num { font-variant-numeric: tabular-nums; }

/* Top bar: name, links, who is signed in. */
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
         padding: 10px 16px; background: var(--paper); border-bottom: 3px solid var(--brand); }
header .brand { display: flex; align-items: center; text-decoration: none; margin-right: 12px; }
header .brand img { height: 30px; width: auto; display: block; }   /* the TillPenny wordmark */
/* With the account's logo: the logo, and the app's name small and widely spaced underneath. */
header .brand.with-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
header .brand.with-logo img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }
header .brand.with-logo img.by-app { height: 11px; margin-top: 5px; opacity: .75; }   /* "TillPenny" under the account's logo */
header .brand.with-logo span { font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
                               color: var(--muted); margin: 4px 0 0 .3em; }
header nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1; }
header nav a { color: var(--ink); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
header nav a:hover, header nav a[aria-current="page"] { border-bottom-color: var(--brand); }
header nav a[aria-current="page"] { font-weight: 600; }
header form { margin: 0; }
@media (max-width: 480px) {
  header nav { order: 3; flex-basis: 100%; }
  header form .muted { display: none; }
}

main { max-width: 720px; margin: 32px auto; padding: 0 16px; }

h1, h2 { line-height: 1.15; }
h1 { font-size: 28px; margin: 0 0 16px; }
h2 { font-size: 20px; margin: 28px 0 12px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 24px; }

/* Forms */
label { display: block; margin: 16px 0 4px; font-weight: 600; }
input[type=email], input[type=password], input[type=text], input[type=date], select, textarea {
  width: 100%; box-sizing: border-box; padding: 10px; font-size: 16px; font-family: inherit; color: var(--ink);
  border: 1px solid #C5CBD5; border-radius: 4px; background: var(--paper); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px; }

/* Buttons */
button, a.button { display: inline-block; margin-top: 20px; padding: 11px 22px; font-size: 16px; font-weight: 600;
  border: 0; border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none;
  font-family: inherit; }
button:hover, a.button:hover { background: var(--accent-dark); color: #fff; }
a.button { margin-top: 0; }
button.link { margin: 0; padding: 6px 10px; font-size: 14px; font-weight: 400; background: none; color: var(--accent);
  text-decoration: underline; }
button.link:hover { background: none; color: var(--accent-dark); }
button:disabled { opacity: .6; cursor: wait; }
a.cancel { margin-left: 14px; }
/* Deleting: a red link next to Change, and a red button on the confirm page */
a.delete { color: #9B1C1C; }
button.danger { background: #B42318; }
button.danger:hover { background: #8F1C13; }

/* Messages */
.error { color: #9B1C1C; background: #FDF2F2; border: 1px solid #F5C2C2; border-radius: 4px; padding: 10px; }
.notice { color: #14532D; background: #F0F9F1; border: 1px solid #BFE3C6; border-radius: 4px; padding: 10px; }
.muted { color: var(--muted); font-size: 14px; }

/* Two-step sign-in */
ol.steps { padding-left: 20px; }
ol.steps li { margin: 10px 0; }
.qr { margin: 12px 0; }
.qr svg { width: 220px; height: 220px; display: block; border: 1px solid var(--line); }
.secret-key { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .05em; }
details summary { cursor: pointer; color: var(--muted); font-size: 14px; }
ul.recovery-codes { columns: 2; padding-left: 20px; font-family: ui-monospace, Consolas, monospace; font-size: 18px; }
ul.recovery-codes li { margin: 4px 0; }

/* Page title with its main button beside it */
.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.page-title h1 { margin: 0; }
/* The receipts list: the menu already says where you are, so its heading is only for screen readers. */
.page-title.buttons-only { justify-content: flex-end; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Forms: hints, errors, choices, money boxes side by side */
.field-hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.field-error { color: #9B1C1C; font-size: 14px; margin: 4px 0 0; }
fieldset { border: 0; padding: 0; margin: 16px 0 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
label.choice { font-weight: 400; margin: 16px 0 6px; }
input[type=checkbox] { accent-color: var(--accent); }
.money-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (min-width: 560px) { .money-row { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.tax-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 8px; }
button.secondary { margin-top: 0; background: var(--paper); color: var(--accent); border: 2px solid var(--accent); padding: 9px 20px; }
button.secondary:hover { background: var(--accent-soft); color: var(--accent-dark); }
a.button.secondary { background: var(--paper); color: var(--accent); border: 2px solid var(--accent); padding: 9px 20px; }
a.button.secondary:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* Receipt scan */
.scan-box { margin-top: 8px; padding: 14px; border: 2px dashed var(--accent); border-radius: 6px; background: var(--accent-soft); }
.scan-box .muted { display: block; margin-top: 6px; }
.scan-status:empty { display: none; }
.scan-status { margin-top: 10px; padding: 10px; border-radius: 4px; font-size: 15px; }
.scan-status ul { margin: 6px 0 0; padding-left: 20px; }
.scan-status.busy { background: #EEF0F3; color: var(--ink); }
.scan-status.ok { background: #F0F9F1; color: #14532D; }
.scan-status.warn { background: #FFF6E0; color: #6B4405; }
input.scanned, select.scanned { background: #FFF6E0; border-color: #D9A21B; }

/* While a receipt is read (scan.js): the receipt, dimmed, in green corner marks, with a glowing line
   sweeping up and down over it. Still, not moving, for people who ask for less motion. */
.scan-visual { position: relative; margin-top: 12px; width: 100%; max-width: 300px; height: 240px; overflow: hidden;
  background: #070a07; border-radius: 6px; }
.scan-visual[hidden] { display: none; }
.scan-visual img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .35; }
.scan-visual .scan-doc { display: flex; align-items: center; justify-content: center; height: 100%;
  color: #3d6b35; font-size: 28px; font-weight: 700; letter-spacing: .2em; }
.scan-corner { position: absolute; width: 24px; height: 24px; border: 2px solid #4CFF3A; opacity: .8; }
.scan-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.scan-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.scan-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.scan-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.scan-line { position: absolute; left: 16px; right: 16px; top: 18px; height: 3px; border-radius: 2px; background: #B6FF8F;
  box-shadow: 0 0 6px 2px #4CFF3A, 0 0 22px 8px rgba(76, 255, 58, .45);
  animation: scan-sweep 1.8s ease-in-out infinite alternate; }
/* The soft green glow on both sides of the line */
.scan-line::before, .scan-line::after { content: ''; position: absolute; left: 0; right: 0; height: 40px; }
.scan-line::before { bottom: 3px; background: linear-gradient(to top, rgba(76, 255, 58, .22), transparent); }
.scan-line::after { top: 3px; background: linear-gradient(to bottom, rgba(76, 255, 58, .22), transparent); }
@keyframes scan-sweep { from { top: 18px; } to { top: calc(100% - 21px); } }
@media (prefers-reduced-motion: reduce) { .scan-line { animation: none; top: 50%; } }

/* Receipt details */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dt { color: var(--muted); } dd { margin: 0; }
.badge-review { display: inline-block; margin: 0; padding: 1px 8px; border-radius: 10px; background: #FFF6E0; color: #6B4405;
  font-size: 13px; font-weight: 600; }
.card.file { margin-bottom: 16px; padding: 12px; }
.card.file img { max-width: 100%; height: auto; display: block; }
.card.file a { display: inline-block; cursor: zoom-in; }
.card.file .pdf-page { display: block; width: 280px; max-width: 100%; padding: 60px 0; text-align: center; background: var(--accent-soft); }
.card.file .pdf-page.drawn { padding: 0; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* Receipts list */
table.list { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); }
table.list th, table.list td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.list th { font-size: 13px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft);
                white-space: nowrap; vertical-align: bottom; }
table.list tbody tr:hover { background: var(--accent-tint); }
/* The receipts list: one line per receipt; only the long text columns may wrap. */
table.receipts-table td { white-space: nowrap; font-size: 15px; }
table.receipts-table td.wrap { white-space: normal; min-width: 140px; }
.num { text-align: right !important; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
main.wide { max-width: 1320px; }
/* Filters: dates, search and Show on one line; the rest under "More filters". Smaller boxes than forms. */
.filters { padding: 12px 16px; margin-bottom: 16px; }
.filters label { font-size: 13px; margin: 0 0 2px; }
.filters input[type=text], .filters input[type=date], .filters select { padding: 6px 8px; font-size: 14px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.filter-row label { flex: 0 1 140px; }
.filter-row label.filter-search { flex: 1 1 220px; }
.filters .filter-buttons { display: flex; align-items: center; }
.filters .filter-buttons button { margin: 0; padding: 7px 18px; font-size: 14px; }
.filters .filter-buttons .cancel { margin-left: 10px; font-size: 14px; }
.more-filters { margin-top: 8px; }
.more-filters summary { font-size: 14px; color: var(--accent); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin-top: 8px; }

/* Totals above the receipts list: small tiles with a coloured edge. */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.stat { flex: 0 1 auto; min-width: 110px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand);
        border-radius: 6px; padding: 8px 14px; }
.stat-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat-value { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.stat-out { background: var(--accent-tint); }
.stat-in { border-top-color: var(--green); background: var(--green-soft); }
.stat-in .stat-value { color: var(--green); }
.stat-tax { border-top-color: var(--amber); }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; }
a.button.small { padding: 6px 14px; font-size: 14px; }
.logo-preview img { max-height: 60px; max-width: 240px; display: block; }

/* Settings, Account: the optional receipt fields */
fieldset.extra-fields { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); }
fieldset.extra-fields label.choice { margin: 10px 0; }

/* Settings tabs */
nav.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
nav.tabs a { padding: 8px 0; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
nav.tabs a:hover, nav.tabs a[aria-current="page"] { border-bottom-color: var(--accent); }
nav.tabs a[aria-current="page"] { font-weight: 600; }

/* Lists (Categories, Cards and accounts) */
section.card { margin-bottom: 24px; }
section.card h2 { margin-top: 0; }
ul.list-items { list-style: none; padding: 0; margin: 0 0 12px; }
ul.list-items li { border-bottom: 1px solid var(--line); padding: 6px 0; }
li.archived input { color: var(--muted); text-decoration: line-through; }
form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
form.inline input[type=text] { width: auto; flex: 1 1 180px; }
form.inline input.last4 { flex: 0 0 90px; }
form.inline input[type=password] { width: auto; flex: 1 1 150px; }
form.inline select { width: auto; }
form.inline button { margin: 0; }

/* The floating receipt window (receipt-viewer.js) */
.pdf-preview { display: block; }
.receipt-viewer { position: fixed; top: 80px; right: 24px; width: min(560px, 46vw); height: min(80vh, 900px); z-index: 50;
  display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); resize: both; overflow: hidden; min-width: 260px; min-height: 200px; }
.receipt-viewer[hidden] { display: none; }
.rv-bar { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 12px; background: var(--ink); color: #fff;
  cursor: move; user-select: none; touch-action: none; }
.rv-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-bar a { color: #9FDDE2; font-size: 14px; }
.rv-close { margin: 0; padding: 0 8px; background: none; color: #fff; font-size: 26px; line-height: 1; }
.rv-close:hover { background: none; color: #9FDDE2; }
.rv-body { flex: 1; overflow: auto; padding: 12px; background: #E4E7EC; cursor: grab; }
.rv-body img, .rv-body canvas { display: block; max-width: 100%; margin: 0 auto 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.rv-body.zoomed img, .rv-body.zoomed canvas { max-width: none; }
.rv-body.dragging { cursor: grabbing; user-select: none; }
.rv-zoom { display: flex; gap: 2px; }
.rv-zoom button { margin: 0; padding: 2px 8px; min-width: 30px; background: #3a3a3a; color: #fff; font-size: 15px; line-height: 1.3; border-radius: 4px; }
.rv-zoom button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.rv-zoom button:disabled { opacity: .4; cursor: default; }
.rv-zoom .rv-fit { min-width: 50px; font-size: 13px; }
@media (max-width: 640px) { .receipt-viewer { top: 0; right: 0; left: 0 !important; width: 100%; height: 100%; border-radius: 0; resize: none; } }

/* People page */
ul.people { list-style: none; padding: 0; margin: 0; }
ul.people li.person { border-bottom: 1px solid var(--line); padding: 12px 0; }
ul.people li.person:last-child { border-bottom: 0; }
.person-name { margin-bottom: 8px; }
ul.people details { margin-top: 8px; }
ul.people details form { margin-top: 8px; }
li.person.off .person-name strong { color: var(--muted); }

/* Front page for visitors (public/index.php): full-width bands, screenshots in a window frame. */
main.landing { max-width: none; margin: 0; padding: 0; }
.band { padding: 64px 16px; }
.band-inner { max-width: 1180px; margin: 0 auto; }
.band.tinted { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-band { background: linear-gradient(135deg, #0B4C52 0%, #0F7A82 60%, #158C93 100%); color: #fff; padding: 72px 16px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 4fr 7fr; } }
.hero-band .band-inner { max-width: 1280px; }
.eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #DDF1F2; }
.hero-text h1 { font-size: 44px; line-height: 1.1; margin: 0 0 20px; color: #fff; }
.hero-text .lead { font-size: 19px; line-height: 1.55; color: #DDF1F2; margin: 0; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
a.button.big { padding: 14px 28px; font-size: 17px; border-radius: 6px; }
.hero-band a.button { background: #fff; color: #0B5F66; }
.hero-band a.button:hover { background: #DDF1F2; color: #0B5F66; }
.hero-band a.button.ghost, a.button.ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); padding: 12px 26px; }
.hero-band a.button.ghost:hover, a.button.ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; font-size: 14px; color: #DDF1F2; }
.icon { flex: none; }

/* A screenshot in a browser-like frame */
.shot { margin: 0; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(8, 24, 56, .35), 0 2px 6px rgba(8, 24, 56, .2); }
.shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: #E8ECF3; border-bottom: 1px solid #D5DBE6; }
.shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: #C4CBD8; }
.shot img { display: block; width: 100%; height: auto; }
.tinted .shot { box-shadow: 0 16px 40px rgba(8, 24, 56, .16), 0 1px 4px rgba(8, 24, 56, .12); }

.section-title { font-size: 30px; margin: 0 0 28px; text-align: center; }
.split .section-title { text-align: left; margin-bottom: 20px; }
.steps-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.steps-row li { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.steps-row h3, .feature h3 { margin: 14px 0 6px; font-size: 18px; }
.steps-row p, .feature p { margin: 0; line-height: 1.55; color: var(--muted); }
.step-icon, .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
                            background: var(--accent-soft); color: var(--accent); }
.steps-row li:nth-child(2) .step-icon { background: var(--green-soft); color: var(--green); }
.steps-row li:nth-child(3) .step-icon { background: var(--amber-soft); color: var(--amber); }

.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 7fr 5fr; } }
ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 17px; line-height: 1.5; }
ul.ticks .icon { color: var(--green); margin-top: 2px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.feature:nth-child(3n+2) .feature-icon { background: var(--green-soft); color: var(--green); }
.feature:nth-child(3n) .feature-icon { background: var(--amber-soft); color: var(--amber); }

.cta-band { background: linear-gradient(135deg, #0F7A82 0%, #0B4C52 100%); color: #fff; text-align: center; }
.cta h2 { font-size: 32px; margin: 0 0 10px; color: #fff; }
.cta p { color: #DDF1F2; font-size: 18px; margin: 0; }
.cta .hero-buttons { justify-content: center; }
a.button.light { background: #fff; color: #0B5F66; }
a.button.light:hover { background: #DDF1F2; color: #0B5F66; }
.site-footer { padding: 24px 16px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 600px) {
  .band { padding: 44px 16px; }
  .hero-text h1 { font-size: 32px; }
  .section-title { font-size: 25px; }
}

/* Bulk upload (import.js) */
.title-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.import-pick { margin-bottom: 16px; border: 2px dashed var(--accent); background: var(--accent-soft); }
.import-pick.dragging { background: var(--accent-soft); }
.import-pick p { margin-top: 0; }
.set-all { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; padding: 12px 16px; margin-bottom: 12px; }
.set-all label { margin: 0; font-size: 14px; }
.set-all select { width: auto; min-width: 170px; padding: 6px 8px; font-size: 14px; }
.import-table td { vertical-align: top; padding: 6px; }
.import-table input[type=text], .import-table input[type=date], .import-table select { padding: 6px; font-size: 14px; min-width: 90px; }
.import-table td.f-vendor input, .import-table td.f-notes input, .import-table td.f-project input { min-width: 160px; }
.set-all input[type=text] { width: auto; min-width: 170px; padding: 6px 8px; font-size: 14px; }
.import-table td.f-category_id select, .import-table td.f-payment_method_id select { min-width: 150px; }
.import-table td.f-total input, .import-table td.f-tax input, .import-table td.f-tip input { min-width: 0; width: 84px; text-align: right; }
.import-table td.f-currency input { min-width: 0; width: 56px; text-transform: uppercase; }
.import-table td.f-to_review { text-align: center; }
.import-table td.thumb img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 3px; display: block; }
.import-table .pdf-chip { display: inline-block; width: 64px; padding: 20px 0; text-align: center; background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: 3px; font-weight: 600; text-decoration: none; }
.import-table .file-name { max-width: 120px; overflow-wrap: anywhere; font-size: 12px; margin-top: 4px; }
.import-table td.status { min-width: 170px; max-width: 260px; font-size: 13px; }
.import-table td.status strong { display: block; font-size: 14px; }
.import-table td.status div { margin-top: 4px; }
.s-waiting strong, .s-busy strong { color: var(--muted); }
.s-ok strong, .s-saved, .s-saved a { color: #15803D; }
.s-check strong { color: #6B4405; }
.s-check { background: #FFF6E0; }
.s-failed strong { color: #9B1C1C; }
.s-failed { background: #FDF2F2; }
.import-table td.has-error input, .import-table td.has-error select { border-color: #C53030; background: #FFF7F7; }
.import-table .field-error:empty { display: none; }
.import-table tr.saved-row td { opacity: .6; }
.import-table tr.saved-row td.status { opacity: 1; }
.import-actions { margin-top: 12px; }
.import-actions button { margin-top: 0; margin-right: 12px; }

/* Duplicates: the side-by-side page, and the warning on the new receipt form */
.dup-pair { margin-bottom: 16px; }
.dup-reasons { margin: 0 0 12px; padding-left: 20px; font-weight: 600; }
.dup-sides { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .dup-sides { grid-template-columns: 1fr 1fr; } }
.dup-side { border: 1px solid var(--line); border-radius: 4px; padding: 12px; }
.dup-entry { margin: 0 0 12px; font-size: 15px; }
.dup-pair form { margin-top: 12px; }
main:has(.dup-pair) { max-width: 1000px; }
.dup-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dup-files img { width: 120px; height: 160px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 3px; display: block; }
.dup-files .pdf-chip { display: inline-block; width: 120px; padding: 70px 0; text-align: center; background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: 3px; font-weight: 600; }
.dup-files a { text-decoration: none; }
.dup-files .pdf-chip.drawn { padding: 0; height: 160px; overflow: hidden; background: #fff; }
.dup-warning { margin-top: 20px; padding: 12px 14px; background: #FFF6E0; border: 2px solid #D9A21B; border-radius: 4px; }
.dup-warning[hidden] { display: none; }
.dup-warning .dup-text { margin: 0 0 6px; font-weight: 600; color: #6B4405; }
.dup-warning .dup-matches p { margin: 4px 0; }
.dup-file-link { white-space: nowrap; }

/* Receipts list: totals above the table, money received set apart */
.list-summary p, .list-downloads p { margin: 6px 0; }
.list-downloads { margin: 12px 0; }
.list-summary { margin-bottom: 12px; }
tr.money-in td { background: var(--green-soft); }

/* Checks on a receipt (receipt_checks()): totals that don't add up, tax credits at risk */
.badge-check { display: inline-block; margin: 0; padding: 1px 8px; border-radius: 10px; background: #FDECEA; color: #9B1C1C;
  font-size: 13px; font-weight: 600; cursor: help; }
.receipt-checks { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; background: #FEF3E2; border: 1px solid #F3C98B; }
.receipt-checks p { margin: 4px 0; }
.check-item { color: #7A2E0E; font-weight: 600; }
.check-reminder { color: var(--muted); font-size: 14px; }
a.stat { text-decoration: none; color: inherit; }
.stat-check { border-top-color: #B42318; background: #FDECEA; }
.stat-check .stat-value { color: #9B1C1C; }
a.stat-check:hover { background: #FBDAD5; }
.filter-check { align-self: end; font-size: 14px; }
.tax-id-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .tax-id-row { grid-template-columns: 1fr 1fr; } }

/* Site admin page (public/admin.php) */
.admin-warn { margin: 16px 0; border-left: 4px solid #B42318; }
.bad { color: #9B1C1C; }
table.admin-days td { padding: 3px 8px; font-size: 14px; }
table.admin-days tr.quiet td { color: var(--muted); }
.bar-col { width: 45%; }
.bar-col meter { width: 100%; height: 14px; }

/* Record keeping: a photo's original, the receipt's history, the keeping-period warning on delete. */
.card.file a.download-original { cursor: pointer; }
ul.history { list-style: none; padding: 12px 16px; margin: 0 0 24px; }
ul.history li { margin: 6px 0; overflow-wrap: anywhere; }
.keep-warning { margin: 0 0 16px; padding: 12px 14px; background: #FFF6E0; border: 2px solid #D9A21B; border-radius: 4px; }
.keep-warning .keep-text { margin: 0 0 6px; font-weight: 600; color: #6B4405; }

/* Clearing a receipt's checks (public/receipt-checks.php) */
.clear-checks { margin-top: 8px; }
.clear-checks summary { color: var(--accent); }
.clear-checks label.choice { margin: 8px 0; }
.clear-checks input[type=text] { margin-top: 4px; }
.clear-checks button { margin-top: 10px; }
.checks-ok { margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; background: var(--green-soft); color: #14532D; font-size: 14px; }

/* Bulk upload: receipts saved from the table (import.js) */
.import-saved { margin-top: 20px; }
.import-saved h2 { margin-top: 0; }
.import-saved ul { margin: 0; padding-left: 20px; }
.import-saved li { margin: 4px 0; }

/* Two-step sign-in: forgetting trusted devices */
.forget-devices { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.forget-devices button.link { padding-left: 0; }

/* Income (money received): a mark on its page */
.badge-income { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border-radius: 10px; background: var(--green-soft);
  color: var(--green); font-size: 13px; font-weight: 600; }

/* Receipts list: All / Expenses / Income, and the sales tax estimate */
nav.list-tabs { margin-bottom: 12px; }
td .badge-income { margin: 0 0 0 4px; padding: 1px 8px; }
.gst-estimate { margin: 6px 0; padding: 8px 12px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); }

/* Settings, Activity: who did what */
.activity-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
table.activity td { vertical-align: top; font-size: 14px; }
table.activity td:last-child { min-width: 260px; }

/* Entry form on a phone: Scan is the first, big button; the two Save buttons stack */
@media (max-width: 640px) {
  .scan-box #scan-button { display: block; box-sizing: border-box; width: 100%; padding: 16px; font-size: 18px; }
  .save-buttons button { display: block; box-sizing: border-box; width: 100%; }
}
.save-buttons button.secondary { margin-left: 8px; }
@media (max-width: 640px) { .save-buttons button.secondary { margin-left: 0; margin-top: 10px; } }

/* Receipts list: quick date choices, the year-end hint, downloads for accounting software */
.accounting-downloads { margin: 4px 0 10px; }
.accounting-downloads summary { cursor: pointer; color: var(--accent-dark); }
.quick-dates { flex-basis: 100%; order: 5; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.quick-dates a[aria-current] { font-weight: 600; color: var(--ink); text-decoration: none; }
.downloads-hint { margin-top: 0; font-size: 14px; }

/* "Install Receipts on this phone" (install.js): a bar along the bottom, above everything */
.install-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center;
                  gap: 8px 16px; padding: 12px 16px; background: var(--paper); border-top: 3px solid var(--accent);
                  box-shadow: 0 -4px 16px rgba(0,0,0,.12); font-size: 15px; }
.install-banner[hidden], .install-banner [hidden] { display: none; }
.install-banner .install-text { flex: 1 1 220px; }
.install-banner button { margin-top: 0; }

/* Settings, Cards and accounts: who sees a card */
.shown-to { margin: 2px 0 6px; font-size: 14px; }
.shown-to summary { cursor: pointer; color: var(--muted); }
.shown-to form { flex-wrap: wrap; gap: 4px 14px; }
.shown-to label.choice { display: inline-flex; margin: 0; font-weight: normal; }

/* Settings, Categories: Expenses / Income under the one tab */
nav.sub-tabs { margin: -4px 0 12px; font-size: 15px; }

/* Settings, Receipt fields */
table.fields-table td { vertical-align: top; }
table.fields-table input[type=text] { margin-top: 6px; max-width: 280px; }
table.fields-table th:nth-child(n+2), table.fields-table td:nth-child(n+2) { text-align: center; width: 90px; }
table.fields-table input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; }

/* Entry form: splitting a receipt across categories */
.split-box { margin-top: 12px; }
.split-box summary { cursor: pointer; color: var(--accent-dark); }
.split-line { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.split-line input[name="split_amount[]"] { flex: 0 0 110px; width: 110px; }
.split-line select, .split-line input[name="split_project[]"] { flex: 1 1 160px; width: auto; }
.split-box button.link { margin-top: 0; }
ul.split-list { margin: 0; padding-left: 18px; }

/* Possibly missing (missing.php) */
ul.missing-list { list-style: none; margin: 0; padding: 0; }
ul.missing-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.missing-actions { display: flex; align-items: center; gap: 12px; }

/* Settings, Accounting names */
table.names-table td:first-child { width: 45%; }
table.names-table input[type=text] { width: 100%; }
.accounting-downloads h3 { font-size: 15px; margin: 14px 0 4px; }
p.accounting-name { margin: 2px 0 0; font-size: 13px; }
.card > h2.first { margin-top: 0; }
.accounting-link { margin: 14px 0 0; }

/* Pills: the account's own list on the form (one to choose) and above the receipts list (one to show) */
fieldset.pill-choice { border: 0; padding: 0; margin: 16px 0 0; }
fieldset.pill-choice legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.pill-choice label.pill { display: inline-block; margin: 0 6px 6px 0; font-weight: normal; }
.pill-choice label.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-choice label.pill span, .pill-nav a.pill {
  display: inline-block; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; }
.pill-choice label.pill input:checked + span, .pill-nav a.pill[aria-current] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pill-choice label.pill input:focus-visible + span { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.pill-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
table.fields-table label.sub { font-weight: 600; font-size: 14px; margin: 10px 0 2px; }
p.custom-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pill-static { display: inline-block; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--accent-soft); font-size: 14px; }
.custom-item { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.custom-item input[type=text] { max-width: 240px; }
.custom-item.archived input[type=text] { color: var(--muted); }
p.sub-label { font-weight: 600; font-size: 14px; margin: 10px 0 2px; }

/* ==== TillPenny components (brand handoff, step 2). These come last, so they replace the older
   rules above for the same elements. Sizes, radii and colours as in the handoff's README. ==== */
:root {
  --radius-sm: 8px;      /* badges, small buttons */
  --radius: 12px;        /* buttons, inputs, stat tiles */
  --radius-lg: 16px;     /* cards, tables */
  --shadow-pop: 0 1px 2px rgba(27, 26, 23, .06), 0 8px 24px rgba(27, 26, 23, .08);
  --focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Type */
body { font-size: 16px; line-height: 1.55; }
h1 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
a { color: var(--accent-text); }
.muted { color: var(--muted); font-size: 14px; }

/* Top bar: 64 px, the page colour, a hairline under it */
header { min-height: 64px; box-sizing: border-box; padding: 12px clamp(16px, 4vw, 32px); background: var(--bg);
         border-bottom: 1px solid var(--line); }
header nav a { font-size: 15px; font-weight: 500; }
header nav a[aria-current="page"] { font-weight: 600; }

/* Focus ring on everything people can use */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--focus); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* Cards: white, a hairline border, rounded, no shadow */
.card { border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 24px); }

/* Form fields: 44 px, label above */
label { font-size: 14px; font-weight: 500; margin: 16px 0 6px; }
legend { font-size: 14px; font-weight: 500; }
label.choice { font-size: 15px; font-weight: 400; }
input[type=email], input[type=password], input[type=text], input[type=date], input[type=number], select, textarea {
  min-height: 44px; padding: 0 12px; font-size: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); }
textarea { padding: 10px 12px; }
input[type=number] { width: 100%; box-sizing: border-box; font-family: inherit; }
.field-hint { font-size: 13px; color: var(--muted); }
.field-error { font-size: 13px; font-weight: 500; color: var(--red); }

/* Buttons: primary (one per screen), outline, text, small */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; line-height: 1.2; border: 0;
  border-radius: var(--radius); background: var(--accent); color: #fff; transition: background-color .12s, color .12s; }
button:hover, a.button:hover { background: var(--accent-dark); color: #fff; }
button.secondary, a.button.secondary { padding: 0 20px; background: transparent; color: var(--accent-text);
  border: 1.5px solid var(--accent); }
button.secondary:hover, a.button.secondary:hover { background: var(--accent-tint); color: var(--accent-text); }
button.link { min-height: 0; padding: 6px 10px; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm);
  background: none; color: var(--accent-text); text-decoration: none; }
button.link:hover { background: var(--accent-tint); color: var(--accent-text); }
a.button.small, button.small { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: var(--radius-sm); }
a.button.big { min-height: 48px; padding: 0 24px; font-size: 16px; border-radius: var(--radius); }
button:disabled, a.button[aria-disabled="true"] { background: var(--line); color: var(--muted); cursor: default; opacity: 1; }
button.secondary:disabled { background: transparent; border-color: var(--line); }
button.danger { background: var(--red); }
button.danger:hover { background: #8F1C13; }
a.delete { color: var(--red); }

/* Messages */
.error { color: var(--red); background: var(--red-soft); border: 0; border-radius: var(--radius); padding: 12px 14px; }
.notice { color: var(--green); background: var(--green-soft); border: 0; border-radius: var(--radius); padding: 12px 14px; font-weight: 500; }

/* Status badges: a soft colour and a small shape, so the status doesn't rest on colour alone.
   Dot: income or good (green); dot: tax (amber); diamond: needs a check (red); ring: to review (accent). */
.badge-income, .badge-review, .badge-check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; line-height: 1.2; vertical-align: middle; }
.badge-income::before, .badge-review::before, .badge-check::before { content: ''; flex: none; width: 7px; height: 7px; box-sizing: border-box; }
.badge-income { background: var(--green-soft); color: var(--green); }
.badge-income::before { border-radius: 50%; background: var(--green); }
.badge-review { background: var(--accent-soft); color: var(--accent-dark); }
.badge-review::before { border-radius: 50%; border: 1.5px solid var(--accent); }
.badge-check { background: var(--red-soft); color: var(--red); cursor: help; }
.badge-check::before { background: var(--red); transform: rotate(45deg); width: 6px; height: 6px; }
td .badge-income, td .badge-review, td .badge-check { margin: 2px 0 2px 6px; }
.badge-income { margin-bottom: 12px; }          /* on its own above a receipt's details */
td .badge-income { margin-bottom: 2px; }

/* Stat tiles: coloured label, big number, soft background */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border: 1px solid var(--line);
        border-top: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.stat-label { font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.stat-value { font-size: clamp(19px, 1.5vw, 26px); font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.stat-in { background: var(--green-soft); border-color: transparent; }
.stat-in .stat-label { color: var(--green); }
.stat-in .stat-value { color: var(--ink); }
.stat-out { background: var(--paper); }
.stat-tax { background: var(--amber-soft); border-color: transparent; }
.stat-tax .stat-label { color: var(--amber); }
.stat-check { background: var(--red-soft); border-color: transparent; }
.stat-check .stat-label { color: var(--red); }
.stat-check .stat-value { color: var(--ink); }
a.stat-check:hover { background: color-mix(in oklab, var(--red-soft) 80%, var(--red)); }
.gst-estimate { border-radius: var(--radius); padding: 12px 16px; }

/* Pills (filters, choices): off white with a hairline, on in the accent's soft colour */
.pill-choice label.pill span, .pill-nav a.pill {
  display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 0 14px; font-size: 14px;
  font-weight: 500; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); }
.pill-choice label.pill input:checked + span, .pill-nav a.pill[aria-current] {
  background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); font-weight: 600; }
.pill-choice label.pill input:focus-visible + span { outline: none; box-shadow: var(--focus); }
.pill-static { border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); border: 0; padding: 4px 12px; }

/* Tables: in a rounded white card, a quiet header, roomy rows */
.table-scroll { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.table-scroll table.list { border: 0; }
table.list { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
table.list th { padding: 12px 16px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--paper);
                border-bottom: 1px solid var(--line); }
table.list td { padding: 12px 16px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover td { background: var(--accent-tint); }
table.receipts-table td { font-size: 14.5px; }
table.receipts-table td.c-total { font-weight: 600; }
table.receipts-table td.tax { color: var(--amber); }
tr.money-in td { background: var(--green-soft); }

/* The receipts list on a phone: each receipt a small card. Paid to and total on the first line, the date under it. */
@media (max-width: 640px) {
  table.receipts-table thead { display: none; }
  table.receipts-table, table.receipts-table tbody { display: block; }
  table.receipts-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.receipts-table tbody tr:last-child { border-bottom: 0; }
  table.receipts-table td { display: none; padding: 0; border: 0; background: none !important; }
  table.receipts-table td.c-vendor { display: block; grid-column: 1; grid-row: 1; white-space: normal; min-width: 0; font-size: 15px; }
  table.receipts-table td.c-total { display: block; grid-column: 2; grid-row: 1; font-size: 15px; }
  table.receipts-table td.c-date { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; color: var(--muted); }
  table.receipts-table tr.money-in { background: var(--green-soft); }
}

/* Tabs and the small bits around the lists */
nav.tabs a { font-size: 15px; }
nav.tabs a[aria-current="page"] { border-bottom-color: var(--accent); }
.scan-box { border-radius: var(--radius); }
.scan-status { border-radius: var(--radius); }
.import-pick { border-radius: var(--radius-lg); }
.receipt-checks, .checks-ok, .dup-warning, .keep-warning { border-radius: var(--radius); }
.dup-side { border-radius: var(--radius); }
.receipt-viewer { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.install-banner { box-shadow: var(--shadow-pop); border-top: 1px solid var(--line); }
.filters input[type=text], .filters input[type=date], .filters select { min-height: 40px; padding: 0 10px; font-size: 15px; }
.filters .filter-buttons button { min-height: 40px; padding: 0 18px; }
.filters label { font-size: 13px; font-weight: 500; }

/* Phones: touch targets of at least 44 px in the menu */
@media (max-width: 640px) {
  header nav a { padding: 10px 0; }
}
/* Small buttons that keep their own size: the receipt window's controls */
.rv-close, .rv-zoom button { min-height: 0; }
.rv-zoom button { border-radius: var(--radius-sm); }
/* Settings, Account: month and day of the business year end side by side */
.year-end { display: flex; gap: 8px; max-width: 320px; }
.year-end select { flex: 1; }
.year-end input[type=number] { width: 90px; flex: none; }
/* A receipt's checks: the "needs a check" red, like its tile and badge */
.receipt-checks { background: var(--red-soft); border: 0; padding: 12px 16px; }
.check-item { color: var(--red); font-weight: 600; }
.checks-ok { color: var(--green); }