/* Emotio Billing — teal #24bbb6 on a cool neutral, light and dark. */

:root {
  --paper:#f2f6f6; --surface:#fff; --surface-2:#e8eeee; --line:#d5e0e0; --line-soft:#e6eded;
  --ink:#15222a; --ink-2:#3d525c; --muted:#65797f;
  --brand:#24bbb6; --brand-ink:#0c7a76; --brand-wash:#dff3f2;
  --good:#2c7a51; --good-wash:#e2f0e8;
  --warn:#a35618; --warn-wash:#f8ebdf;
  --bad:#a3323f;  --bad-wash:#f8e5e7;
  --shadow:0 1px 2px rgba(21,34,42,.05), 0 10px 26px -18px rgba(21,34,42,.3);
  --radius:8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper:#0d1519; --surface:#152128; --surface-2:#1c2c34; --line:#2a3c45; --line-soft:#213038;
    --ink:#dde8e9; --ink-2:#b0c2c6; --muted:#7f969d;
    --brand:#3fd0c9; --brand-ink:#7ce3dd; --brand-wash:#10302f;
    --good:#63c48d; --good-wash:#16301f;
    --warn:#e0964f; --warn-wash:#33261a;
    --bad:#e2808c;  --bad-wash:#331b1f;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme=dark] {
  --paper:#0d1519; --surface:#152128; --surface-2:#1c2c34; --line:#2a3c45; --line-soft:#213038;
  --ink:#dde8e9; --ink-2:#b0c2c6; --muted:#7f969d;
  --brand:#3fd0c9; --brand-ink:#7ce3dd; --brand-wash:#10302f;
  --good:#63c48d; --good-wash:#16301f;
  --warn:#e0964f; --warn-wash:#33261a;
  --bad:#e2808c;  --bad-wash:#331b1f;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -18px rgba(0,0,0,.8);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.num, .mono, code { font-variant-numeric:tabular-nums;
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
a { color:var(--brand-ink); }
h1,h2,h3 { line-height:1.2; margin:0; }
h1 { font-size:1.5rem; letter-spacing:-.02em; }
h2 { font-size:1.03rem; letter-spacing:-.01em; }

/* ---------------------------------------------------------- chrome */

.topbar {
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:.65rem 1.4rem; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand { font-weight:700; letter-spacing:-.02em; text-decoration:none; color:var(--ink); font-size:1.02rem; }
.brand span { color:var(--brand-ink); font-weight:500; }
.topbar nav { display:flex; gap:.15rem; flex-wrap:wrap; flex:1; }
.topbar nav a {
  padding:.4rem .7rem; border-radius:6px; text-decoration:none;
  color:var(--ink-2); font-size:.92rem; display:flex; align-items:center; gap:.4rem;
}
.topbar nav a:hover { background:var(--surface-2); }
.topbar nav a.on { background:var(--brand-wash); color:var(--brand-ink); font-weight:600; }
.badge {
  background:var(--brand); color:#04211f; border-radius:99px; font-size:.7rem;
  font-weight:700; padding:.05rem .4rem; min-width:1.2em; text-align:center;
}
.me { display:flex; align-items:center; gap:.8rem; font-size:.85rem; color:var(--muted); }
.me span { display:flex; flex-direction:column; line-height:1.25; }
.me em { font-style:normal; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--brand-ink); }
button.link { background:none; border:0; color:var(--muted); cursor:pointer; text-decoration:underline; font:inherit; }

main { max-width:1280px; margin:0 auto; padding:1.4rem 1.4rem 5rem; }

.pagehead { display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.pagehead h1 { flex:1; }
.pagehead .sub { color:var(--muted); font-weight:400; font-size:.9rem; }
.dek { color:var(--muted); margin:.3rem 0 0; max-width:70ch; font-size:.93rem; }
.pagehead .dek { flex-basis:100%; }

/* ---------------------------------------------------------- cards */

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin-bottom:1.1rem;
}
.card > h2 { margin-bottom:.2rem; }
.card > .dek { margin-bottom:.7rem; }
.card.attention { border-color:var(--warn); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:900px) { .two { grid-template-columns:1fr; } }

.empty-state { text-align:center; padding:2.4rem 1.2rem; }
.empty-state h2 { color:var(--good); }
.empty { color:var(--muted); padding:1rem 0; }
.foot { color:var(--muted); font-size:.85rem; margin:.7rem 0 0; }
.foot.warn, .warn { color:var(--warn); }
.notice { background:var(--brand-wash); border:1px solid var(--brand); color:var(--ink);
  padding:.6rem .85rem; border-radius:6px; font-size:.9rem; margin:0 0 1rem; }
.notice.warn { background:var(--warn-wash); border-color:var(--warn); }
.quiet { color:var(--muted); }

/* ---------------------------------------------------------- kpis */

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.8rem; margin-bottom:1.1rem; }
.kpi {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.28rem;
}
a.kpi:hover { border-color:var(--brand); }
.kpi.warn { border-left:3px solid var(--warn); }
.kpi.bad  { border-left:3px solid var(--bad); }
.kpi.good { border-left:3px solid var(--good); }
.k-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.k-value { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.k-sub { font-size:.8rem; color:var(--muted); }
.up { color:var(--good); } .down { color:var(--bad); }

/* ---------------------------------------------------------- tables */

.tablewrap { overflow-x:auto; margin:.6rem -.3rem 0; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th, td { text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
thead th {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0;
  background:var(--surface);
}
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
td.small, .small { font-size:.82rem; }
td.wrap { max-width:34rem; }
tbody tr:hover { background:var(--surface-2); }
tr.passthrough { opacity:.62; }

.tag { display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.08rem .35rem; border-radius:3px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); margin-left:.3rem; white-space:nowrap; }
.tag.warn { background:var(--warn-wash); color:var(--warn); border-color:var(--warn); }

.pill { display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  padding:.12rem .45rem; border-radius:3px; border:1px solid; white-space:nowrap; }
.s-invoiced { background:var(--good-wash); color:var(--good); border-color:var(--good); }
.s-approved, .s-sent_to_accounts, .s-contracted { background:var(--brand-wash); color:var(--brand-ink); border-color:var(--brand); }
.s-proposed, .s-rolling, .s-paused { background:var(--surface-2); color:var(--muted); border-color:var(--line); }
.s-disputed, .s-cancelled, .s-void, .s-ended { background:var(--bad-wash); color:var(--bad); border-color:var(--bad); }

.bar { display:block; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; min-width:60px; }
.bar span { display:block; height:100%; background:var(--brand); }
.bar.warn span { background:var(--warn); }
.barcell { width:120px; vertical-align:middle; }

/* ---------------------------------------------------------- trend */

.cols { display:flex; align-items:flex-end; gap:2px; height:calc(var(--h) + 20px); margin-top:.7rem; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.col .stack { width:100%; height:var(--h); display:flex; flex-direction:column; justify-content:flex-end; }
.col .c { background:var(--brand); border-radius:2px 2px 0 0; }
.col .p { background:var(--brand); opacity:.32; border-radius:2px 2px 0 0; }
.col .lbl { font-size:.6rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.col:hover .c { background:var(--brand-ink); }

.splitbar { display:inline-flex; width:80px; height:6px; border-radius:99px; overflow:hidden; background:var(--surface-2); }
.splitbar .c { background:var(--brand); } .splitbar .p { background:var(--brand); opacity:.35; }

/* ---------------------------------------------------------- forms */

button, .btn {
  font:inherit; padding:.42rem .8rem; border-radius:6px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none;
  display:inline-block; white-space:nowrap;
}
button:hover, .btn:hover { border-color:var(--brand); }
button.primary, .btn.primary { background:var(--brand); border-color:var(--brand); color:#04211f; font-weight:600; }
button.ok { background:var(--good-wash); border-color:var(--good); color:var(--good); font-weight:600; }
button.warn { background:var(--warn-wash); border-color:var(--warn); color:var(--warn); }
button.quiet { background:transparent; color:var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--brand); outline-offset:2px;
}

input, select { font:inherit; padding:.38rem .5rem; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); color:var(--ink); max-width:100%; }
label { display:inline-flex; flex-direction:column; gap:.2rem; font-size:.8rem; color:var(--muted); }
label.check { flex-direction:row; align-items:center; gap:.35rem; }

.filters { display:flex; gap:.7rem; align-items:flex-end; flex-wrap:wrap; padding:.85rem 1rem; }
.filters button, .filters a { align-self:flex-end; }
.range { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
.resultline { color:var(--muted); font-size:.86rem; margin:.2rem 0 .5rem; }
.inline-new { display:flex; gap:.4rem; }

.centred { display:grid; place-items:center; min-height:100vh; }
.login { width:min(23rem,92vw); display:flex; flex-direction:column; gap:.85rem; }
.login h1 { font-size:1.3rem; } .login h1 span { color:var(--brand-ink); font-weight:500; }
.login label { color:var(--ink-2); }
.login input { padding:.5rem .6rem; }
.error { background:var(--bad-wash); color:var(--bad); padding:.5rem .7rem; border-radius:6px;
  font-size:.88rem; border:1px solid var(--bad); margin:0; }

.setting { display:grid; grid-template-columns:15rem 20rem 1fr; align-items:center;
  gap:.8rem; padding:.45rem 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; color:var(--ink); }
.setting span { color:var(--ink-2); }
.setting em { font-style:normal; color:var(--muted); font-size:.8rem; }
@media (max-width:760px) { .setting { grid-template-columns:1fr; } }

/* ---------------------------------------------------------- approvals */

.approve-all { margin-bottom:1rem; }
.approve-all button { font-size:1rem; padding:.6rem 1.2rem; }
.daygroup h2 .sub { font-weight:400; color:var(--muted); font-size:.85rem; }
.prop {
  display:grid; grid-template-columns:1fr auto auto; gap:.9rem; align-items:center;
  padding:.7rem 0; border-top:1px solid var(--line-soft);
}
.prop.changed { background:var(--warn-wash); margin:0 -.6rem; padding:.7rem .6rem; border-radius:6px; }
.prop-main .desc { color:var(--ink-2); font-size:.9rem; margin-top:.15rem; }
.prop-main .ref { color:var(--muted); font-size:.76rem; }
.prop-amount { font-size:1.1rem; font-weight:600; font-variant-numeric:tabular-nums; }
.prop-actions { display:flex; gap:.35rem; }
.prop-actions form { display:inline; }
/* A class-based display rule beats the UA's [hidden] rule, so say it explicitly. */
.amend[hidden] { display:none; }
.amend { grid-column:1/-1; display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end;
  background:var(--surface-2); padding:.8rem; border-radius:6px; margin-top:.5rem; }
.amend label.wide { flex:1; min-width:16rem; }
.amend fieldset { border:0; margin:0; padding:0; display:flex; gap:.9rem; }
.amend fieldset label { flex-direction:row; align-items:center; gap:.3rem; }
@media (max-width:720px) { .prop { grid-template-columns:1fr; } }

/* ---------------------------------------------------------- invoices */

.recon.overdue { border-left:3px solid var(--warn); }
.recon-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.recon-head .desc { color:var(--ink-2); font-size:.92rem; margin-top:.2rem; }
.recon-head .ref { color:var(--muted); font-size:.78rem; }
.recon-amount { text-align:right; display:flex; flex-direction:column; }
.recon-form { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap;
  margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-soft); }
.recon-form.alt { border-top-style:dashed; }
.recon-form label.wide { flex:1; min-width:18rem; }

/* ---------------------------------------------------------- review */

.chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.chip { padding:.3rem .6rem; border:1px solid var(--line); border-radius:99px;
  text-decoration:none; color:var(--ink-2); font-size:.84rem; background:var(--surface); }
.chip.on { background:var(--brand-wash); border-color:var(--brand); color:var(--brand-ink); font-weight:600; }
.chip .n { color:var(--muted); font-variant-numeric:tabular-nums; }

.pager { display:flex; justify-content:space-between; align-items:center;
  margin-top:1rem; color:var(--muted); font-size:.88rem; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------------------------------------------------------- forms, revised */

/* Selects were cramped next to text inputs — give them real height. */
input, select, textarea {
  font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); max-width:100%; min-height:2.4rem;
}
select {
  min-height:2.4rem; padding-right:2rem; cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
textarea { min-height:5rem; resize:vertical; line-height:1.5; width:100%; }

/* ---------------------------------------------------------- search bar */

.searchbar { display:flex; gap:.5rem; margin:0 0 .6rem; max-width:44rem; }
.searchbar input {
  flex:1; padding:.6rem .85rem; font-size:.98rem; border-radius:7px;
  box-shadow:var(--shadow);
}
.searchbar input:focus { border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px var(--brand-wash); }
.searchbar button, .searchbar .btn { padding:.6rem 1.1rem; }

/* ---------------------------------------------------------- detail forms */

.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem; }
.field { display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; color:var(--muted); }
.field span { color:var(--ink-2); font-weight:500; }
.field em { font-style:normal; font-size:.78rem; color:var(--muted); }
.field.wide { grid-column:1/-1; margin-top:.9rem; }
.field.check { flex-direction:row; align-items:flex-start; gap:.5rem; grid-column:1/-1; }
.field.check span { font-weight:400; color:var(--muted); font-size:.85rem; }
.field.check input { min-height:auto; width:auto; margin-top:.15rem; }

.rowbtns { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.rowbtns.spaced, .inline-new.spaced { margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--line-soft); }
form.inline { display:inline; }
form.inline select { min-height:2rem; padding:.2rem 1.6rem .2rem .4rem; font-size:.85rem;
  background-position:calc(100% - 12px) 50%, calc(100% - 7px) 50%; }

.card.danger { border-color:var(--warn); }
.card.danger h2 { color:var(--warn); }

.ref { color:var(--muted); }
tr.clickable td a { text-decoration:none; }
tr.clickable:hover { background:var(--brand-wash); }

/* ---------------------------------------------------------- 2fa */

.totp { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; }
.totp img { border:1px solid var(--line); border-radius:6px; background:#fff; padding:.4rem; }
.totp .key { font-size:1.05rem; letter-spacing:.08em; background:var(--surface-2);
  padding:.5rem .7rem; border-radius:6px; display:inline-block; }
.totp form { display:flex; gap:.6rem; align-items:flex-end; margin-top:.8rem; }

/* The range picker hides its date inputs unless "Custom" is chosen. */
.range { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
[data-hide-custom] .custom-only { display:none; }

/* ---------------------------------------------------------- spacing fixes */

/* Buttons were sitting flush against the bottom edge of their card. */
.card > form:last-child, form.card { padding-bottom:.2rem; }
.card .rowbtns:last-child, form.card .rowbtns:last-child { margin-bottom:.9rem; }
.rowbtns.spaced { margin-top:1.4rem; padding-top:1.1rem; margin-bottom:.9rem; }
.recon-form:last-child { padding-bottom:.5rem; }
.card.danger button { margin-bottom:.5rem; }
.empty-state form { margin-top:1rem; }
h2.spaced-h { margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line-soft); }
.approve-all { margin-bottom:1.2rem; }
.ignore-all { margin:0 0 .9rem; }

/* Keep a billing date and its provisional tag on one line. */
td.nowrap { white-space:nowrap; }
.tag.tight { margin-left:.3rem; }

/* ---------------------------------------------------------- sortable headings */

.sortlink { text-decoration:none; color:var(--muted); display:inline-flex; gap:.25rem;
  align-items:center; white-space:nowrap; }
.sortlink:hover { color:var(--brand-ink); }
.sortlink.on { color:var(--brand-ink); font-weight:700; }
.sortlink .arrow { font-size:.6em; }

/* ---------------------------------------------------------- split parts */

.part {
  border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:6px;
  padding:.9rem 1.1rem 1rem; margin:.8rem 0; background:var(--surface-2);
}
.part legend {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-ink);
  font-weight:700; padding:0 .4rem;
}
.part .fields { grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }
.part-amount {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;
  font-size:1.05rem; font-weight:600; padding:.5rem .1rem; display:block; color:var(--ink);
}
.split-summary { color:var(--muted); font-size:.9rem; margin:.4rem 0 0; }
.split-summary.warn { color:var(--warn); font-weight:600; }
.field.check em { display:block; width:100%; margin-top:.15rem; }

/* Buttons need clearance from the edges they sit near. */
button, .btn { margin-top:4px; }
.rowbtns { margin-top:.5rem; }
form.card, .card > form { padding-bottom:.6rem; }
.card > form:last-child { margin-bottom:0; }
.filters { padding-bottom:1rem; }

/* Billing filter bar: a deeper search box, actions on their own line. */
.filters .grow { flex:1 1 22rem; }
.filters input.deep { padding:.62rem .85rem; font-size:.98rem; }
.filters > label { margin-bottom:.45rem; }
.filter-actions { display:flex; gap:.5rem; flex-basis:100%; margin-top:.5rem;
  padding-top:.85rem; border-top:1px solid var(--line-soft); }

/* Categories: one editable row each. */
td.editrow { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.catrow { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; flex:1; }
.catrow .ord { width:4.5rem; }
.catrow .nm { flex:1; min-width:11rem; }
.catrow .check, .inline-new .check { flex-direction:row; align-items:center; gap:.35rem;
  white-space:nowrap; font-size:.85rem; }
.catrow .used { color:var(--muted); font-size:.82rem; white-space:nowrap; }

/* ---------------------------------------------------------- send queue */

.sendbar {
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--brand); border-radius:var(--radius);
  padding:.85rem 1.1rem; margin-bottom:1.1rem; box-shadow:var(--shadow);
  position:sticky; top:3.2rem; z-index:10;
}
.sendbar .check { flex-direction:row; align-items:center; gap:.4rem; color:var(--ink-2); }
.sendbar button[disabled] { opacity:.5; cursor:not-allowed; }
.sendbar button[disabled]:hover { border-color:var(--brand); }
tr.held { opacity:.55; }
tr.held td { background:var(--surface-2); }
.kpis.inner { margin-bottom:0; }
.card h2 .sub .pill { margin-left:.4rem; vertical-align:middle; }

/* ---------------------------------------------------------- flash bar */

.flash {
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:.7rem 1.4rem; font-size:.94rem; font-weight:500;
  border-bottom:1px solid; animation:flash-in .18s ease-out;
}
.flash.ok   { background:var(--good-wash); color:var(--good); border-color:var(--good); }
.flash.warn { background:var(--warn-wash); color:var(--warn); border-color:var(--warn); }
.flash.bad  { background:var(--bad-wash);  color:var(--bad);  border-color:var(--bad); }
.flash-x { background:none; border:0; font-size:1.3rem; line-height:1; cursor:pointer;
  color:inherit; opacity:.6; margin:0; padding:0 .3rem; }
.flash-x:hover { opacity:1; }
@keyframes flash-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation:none; } }

.queried { background:var(--bad-wash); border:1px solid var(--bad); border-radius:6px;
  padding:.8rem 1rem; margin-top:.8rem; }
.queried p { margin:0 0 .4rem; font-size:.92rem; }
.forgot { display:block; text-align:center; font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.ok-text { color:var(--good); }
tr.clickable[data-href] { cursor:pointer; }
tr.clickable[data-href] td a { color:inherit; text-decoration:none; }
tr.clickable[data-href]:hover td a { color:var(--brand-ink); }