/* Alerts SCR-150..152, header widget alerts, MOD-009 Preferences and SCR-092 e-mail templates
   (stage E7.5b; values from the prototype v2 `alerts`, `alertRules`, `alertRule`, `prefs`,
   `admin/templates` markup). Tokens of cashflow-ui.css only. */

/* ---- shared page parts ---- */
.sp-al { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-al-crumbs { font-size: 11.5px; color: var(--ink-3); }
.sp-al-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sp-al-titles { display: flex; flex-direction: column; gap: 2px; flex: 1 1 300px; }
.sp-al-title { margin: 0; font-size: var(--t-h1); font-weight: 700; line-height: inherit; }
.sp-al-sub { font-size: 12px; color: var(--ink-3); }
.sp-al-cap { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-al-actions { display: flex; gap: 8px; }
.sp-al-actions a { text-decoration: none; }
.sp-al-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--paper); border: 1px solid var(--line); }
.sp-al-search { flex: 1 1 200px; min-width: 180px; }
.sp-al-clear { height: 32px; }
.sp-al-empty { background: var(--paper); border: 1px solid var(--line); padding: 30px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sp-al-empty strong { font-size: 14px; }
.sp-al-empty span { font-size: 12.5px; color: var(--ink-2); }

/* ---- SCR-150 rows ---- */
.sp-al-group { background: var(--paper); border: 1px solid var(--line); }
.sp-al-ghead { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-al-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.sp-al-row.sp-unread { background: var(--paper-2); }
.sp-al-row:last-child { border-bottom: 0; }
.sp-al-dot { width: 8px; height: 8px; background: var(--line-strong); }
.sp-al-dot.sp-neg { background: var(--neg); }
.sp-al-dot.sp-amber { background: var(--amber); }
.sp-al-dot.sp-accent { background: var(--accent); }
.sp-al-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; font-size: 13.3333px; line-height: normal; } /* a div since E10b (no link inside a button); metrics of the former button */
.sp-al-rtitle { font-size: 13px; font-weight: 400; }
.sp-al-row.sp-unread .sp-al-rtitle { font-weight: 700; }
.sp-al-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.sp-al-rowacts { display: flex; gap: 6px; }
.sp-al-mini { background: none; border: 1px solid var(--line-2); padding: 3px 8px; font-size: 11px; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-al-mini.sp-accent { color: var(--accent); }

/* ---- SCR-151 ---- */
.sp-al-warn { padding: 10px 14px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12.5px; }
.sp-al-tcard { background: var(--paper); border: 1px solid var(--line); overflow-x: auto; }
.sp-al-table { width: 100%; border-collapse: collapse; min-width: 1040px; }
.sp-al-th { text-align: left; padding: 8px 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: var(--paper-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sp-al-td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.sp-al-rrow { cursor: pointer; }
.sp-al-rrow:hover { background: var(--paper-2); }
.sp-al-rrow.sp-off { opacity: .55; }
.sp-al-rule { display: flex; flex-direction: column; gap: 3px; }
.sp-al-rname { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; }
.sp-al-rsub { font-size: 11.5px; color: var(--ink-3); }
.sp-al-muted { color: var(--ink-2); }
.sp-al-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-al-last { color: var(--ink-3); white-space: nowrap; }
.sp-al-foot { padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); }

/* ---- SCR-152 wizard ---- */
.sp-al-del { background: none; border: 0; color: var(--neg); font-size: 12.5px; cursor: pointer; font-family: inherit; }
.sp-al-note { padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 12.5px; }
.sp-al-stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); }
.sp-al-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border: 0; border-right: 1px solid var(--line); border-bottom: 2px solid transparent; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; font-family: inherit; }
.sp-al-step:last-child { border-right: 0; }
.sp-al-step.sp-cur { background: var(--paper-2); border-bottom-color: var(--ink); }
.sp-al-stepn { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--paper); color: var(--ink-3); border: 1px solid var(--line-2); }
.sp-al-step.sp-done .sp-al-stepn { background: var(--pos); color: var(--paper); border-color: var(--pos); }
.sp-al-step.sp-cur .sp-al-stepn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-al-step.sp-err .sp-al-stepn { background: var(--neg); color: var(--paper); border-color: var(--neg); }
.sp-al-stept { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-al-stepl { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-al-step.sp-cur .sp-al-stepl { font-weight: 700; }
.sp-al-steps { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-al-step.sp-err .sp-al-steps { color: var(--neg); }
.sp-al-wgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.sp-al-wcard, .sp-al-side { background: var(--paper); border: 1px solid var(--line); }
.sp-al-sbody { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.sp-al-field { display: flex; flex-direction: column; gap: 5px; }
.sp-al-narrow { max-width: 200px; }
.sp-al-capl { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-al-err { font-size: 11.5px; color: var(--neg); }
.sp-al-hint { font-size: 11.5px; color: var(--ink-3); }
.sp-al-span { grid-column: 1 / -1; }
.sp-al-lead { font-size: 12.5px; color: var(--ink-2); }
.sp-al-tgroup { display: flex; flex-direction: column; gap: 6px; }
.sp-al-tarea { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.sp-al-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sp-al-trig { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--paper); border: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-al-trig.sp-on { background: var(--accent-soft); border-color: var(--accent); }
.sp-al-trig:disabled { opacity: .45; cursor: default; }
.sp-al-trigl { font-size: 12.5px; font-weight: 600; }
.sp-al-trigk { font-size: 11px; color: var(--ink-3); }
.sp-al-xrow { display: grid; grid-template-columns: 160px auto; gap: 10px; align-items: center; padding: 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; }
.sp-al-xrow .sp-al-err, .sp-al-xrow .sp-al-hint { grid-column: 1 / -1; }
.sp-al-fblock { display: flex; flex-direction: column; gap: 6px; }
.sp-al-flabel { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-al-chip { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line-2); font-size: 12px; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-al-chip.sp-on { background: var(--accent-soft); border-color: var(--accent); }
.sp-al-chip:disabled { opacity: .5; cursor: default; }
.sp-al-chipm { font-size: 11px; color: var(--accent); }
.sp-al-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); cursor: pointer; }
.sp-al-opt.sp-on { border-color: var(--ink); }
.sp-al-opt.sp-dis { cursor: default; opacity: .7; }
.sp-al-opt input { margin-top: 2px; }
.sp-al-optt { display: flex; flex-direction: column; gap: 2px; }
.sp-al-optl { font-size: 12.5px; font-weight: 600; }
.sp-al-opts { font-size: 11.5px; color: var(--ink-3); }
.sp-al-opts.sp-amber { color: var(--amber); }
.sp-al-check, .sp-al-sw { display: flex; gap: 10px; align-items: center; font-size: 12.5px; cursor: pointer; }
.sp-al-review { gap: 0; padding: 6px 16px 12px; }
.sp-al-rv { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: start; }
.sp-al-rvk { color: var(--ink-3); }
.sp-al-errbox { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--neg); font-size: 12.5px; color: var(--neg); }
.sp-al-wfoot { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper-2); }
.sp-al-wfr { display: flex; gap: 8px; }
.sp-al-sidecol { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 120px; min-width: 0; }
.sp-al-sidehead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-al-sidet { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-al-siden { font-size: 11px; color: var(--ink-3); }
.sp-al-plain { padding: 14px 16px; font-size: 13px; line-height: 1.6; }
.sp-al-dry { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sp-al-dryn { font-size: var(--t-kpi-value); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-al-drys, .sp-al-samplem { font-size: 11.5px; color: var(--ink-3); }
.sp-al-sample { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--paper-2); }
.sp-al-samplet { font-size: 12.5px; font-weight: 600; }

/* ---- header widget alerts ---- */
.sp-drop-mark { background: none; border: 0; padding: 0; color: var(--accent); font-size: 11.5px; cursor: pointer; font-family: inherit; }
.sp-drop-mark:disabled { color: var(--ink-3); cursor: default; }
.sp-drop-alert { background: var(--paper-2); border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; font-family: inherit; align-items: start; }
.sp-drop-alert .sp-drop-row-dot { margin-top: 5px; }
.sp-drop-row-dot.sp-amber { background: var(--amber); }
.sp-wrap { white-space: normal; }

/* ---- MOD-009 Preferences ---- */
.sp-pf { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; min-height: 480px; }
.sp-pf-rail { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding-right: 12px; }
.sp-pf-group { display: flex; flex-direction: column; padding: 6px 0; }
.sp-pf-cap { padding: 4px 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-pf-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-left: 2px solid transparent; text-align: left; cursor: pointer; font-size: 12.5px; color: var(--ink); font-family: inherit; }
.sp-pf-item:hover { background: var(--paper-2); }
.sp-pf-item.sp-on { background: var(--paper-2); border-left-color: var(--ink); font-weight: 700; }
.sp-pf-badge { font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.sp-pf-body { display: block; min-width: 0; height: 62vh; overflow: auto; padding-right: 4px; }
.sp-pf-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.sp-pf-title { font-weight: 700; } /* prototype `var(--t-h2)` is undefined: inherited size */
.sp-pf-sub { font-size: 12px; color: var(--ink-3); }
.sp-pf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sp-pf-rl { display: flex; flex-direction: column; gap: 2px; }
.sp-pf-label { font-size: 12.5px; font-weight: 600; }
.sp-pf-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.sp-pf-ctl { min-width: 0; }
.sp-pf-sw { display: flex; gap: 10px; align-items: center; justify-content: flex-end; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.sp-pf-preview, .sp-pf-links { padding: 10px 12px; margin-top: 6px; background: var(--paper-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.sp-pf-links { background: none; border: 0; padding: 12px 0; }
.sp-pf-who { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sp-pf-avatar { width: 48px; height: 48px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.sp-pf-whot { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.sp-pf-kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sp-pf-k { color: var(--ink-3); }
.sp-pf-sess { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sp-pf-this { margin-left: 8px; font-size: 10.5px; font-weight: 400; color: var(--pos); }
.sp-pf-sessfoot { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.sp-pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 12px 0; }
.sp-pf-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); }
.sp-pf-cardh { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.sp-pf-cardsub { word-break: break-word; }
.sp-pf-cardacts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp-pf-mxedit { display: flex; gap: 8px; align-items: center; }
.sp-pf-mxedit { flex-wrap: wrap; }
.sp-pf-dim { opacity: .55; }
.sp-pf-amber { border-color: var(--amber); }
.sp-pf-neg { border-color: var(--neg); }
.sp-pf-mono .sp-pf-cardsub { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.sp-pf-mxbox { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--amber-soft); border: 1px solid var(--amber); margin-bottom: 10px; font-size: 12.5px; line-height: 1.5; }
.sp-pf-mxrow { display: grid; grid-template-columns: minmax(0, 180px) auto auto auto; gap: 8px; align-items: end; justify-items: start; }
.sp-pf-mxedit { padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--accent); margin-bottom: 10px; }
.sp-muted { color: var(--ink-3); }
.sp-pf-tabs { padding: 4px 0 8px; }
.sp-pf-lead, .sp-pf-foot { display: block; font-size: 11.5px; color: var(--ink-3); padding: 6px 0; line-height: 1.4; }
.sp-pf-tools { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 10px 0; }
.sp-pf-q { flex: 1 1 200px; min-width: 160px; }
.sp-pf-tablewrap { border: 1px solid var(--line); overflow-x: auto; flex-shrink: 0; }
.sp-pf-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sp-pf-events { min-width: 640px; }
.sp-pf-th { text-align: left; padding: 8px 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: var(--paper-2); border-bottom: 1px solid var(--line-2); }
.sp-pf-th.sp-c { text-align: center; width: 74px; }
.sp-pf-th.sp-dim { opacity: .45; }
.sp-pf-scopeh { width: 110px; }
.sp-pf-td { padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-pf-td.sp-c, .sp-pf-gtd.sp-c { text-align: center; }
.sp-pf-gtd { padding: 7px 10px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.sp-pf-gcount { font-weight: 400; color: var(--ink-3); }
.sp-pf-evrow.sp-off { opacity: .5; }
.sp-pf-evl { display: block; font-size: 12.5px; }
.sp-pf-code { font-size: 10.5px; color: var(--ink-3); font-family: ui-monospace, Menlo, monospace; }
.sp-pf-scope { width: 100%; height: 28px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 12px; padding: 0 6px; }
.sp-pf-alhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.sp-pf-alacts { display: flex; gap: 12px; }
.sp-pf-capl { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-pf-quiet { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.sp-pf-time { width: 70px; }
.sp-pf-err { display: block; font-size: 11.5px; color: var(--neg); padding: 6px 0; }

/* ---- SCR-092 e-mail templates ---- */
.sp-tp-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sp-tp-search { width: 260px; max-width: 100%; }
.sp-tp-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-tp-nav { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); max-height: 70vh; overflow: auto; }
.sp-tp-group { display: flex; flex-direction: column; padding: 6px 0; }
.sp-tp-gcap { padding: 8px 14px 4px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-tp-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; background: transparent; border: 0; border-left: 2px solid transparent; text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-tp-item.sp-on { background: var(--paper-2); border-left-color: var(--ink); }
.sp-tp-item.sp-on .sp-tp-name { font-weight: 700; }
.sp-tp-name { font-size: 12.5px; }
.sp-tp-sent { font-size: 11px; color: var(--ink-3); }
.sp-tp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-tp-card { background: var(--paper); border: 1px solid var(--line); }
.sp-tp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.sp-tp-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.sp-tp-namerow { display: flex; gap: 8px; align-items: center; }
.sp-tp-title { font-size: 14px; font-weight: 700; }
.sp-tp-code { font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; border: 1px solid var(--line-2); padding: 1px 6px; color: var(--ink-2); }
.sp-tp-when { font-size: 12.5px; color: var(--ink-2); }
.sp-tp-acts { display: flex; gap: 8px; }
.sp-tp-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-tp-cap { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-tp-lic { width: 240px; }
.sp-tp-env { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 12px; padding: 12px 16px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.sp-tp-k { color: var(--ink-3); }
.sp-tp-v.sp-strong { font-weight: 700; }
.sp-tp-mail { padding: 16px; background: var(--paper-2); display: flex; justify-content: center; }
.sp-tp-frame { width: 640px; max-width: 100%; height: 720px; border: 1px solid var(--line); background: #fff; }
.sp-tp-frame.sp-mobile { width: 375px; }
.sp-tp-text { width: 100%; margin: 0; white-space: pre-wrap; font-size: 12px; background: var(--paper); border: 1px solid var(--line); padding: 12px; }
.sp-tp-info { font-size: 12.5px; color: var(--ink-2); }
.sp-tp-side { display: flex; flex-direction: column; gap: 14px; }
.sp-tp-side .sp-tp-card { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-tp-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: 12px; word-break: break-word; }

.sp-pf-saved { margin-right: auto; align-self: center; font-size: 12px; color: var(--ink-3); }
.sp-pf-alerts .sp-pf-th.sp-c { width: 84px; }
.sp-pf-alerts .sp-pf-code { font-family: inherit; font-size: 11px; }
.sp-pf-tools2 { display: flex; gap: 12px; align-items: center; padding-bottom: 8px; }
.sp-pf-signout { background: none; border: 1px solid var(--line-2); padding: 4px 10px; font-size: 12px; color: var(--neg); cursor: pointer; font-family: inherit; }