/* What one screen draws and no other does: the strength meter, the planning
   chain, Home's panels, the month calendar and the rings (decision B151).
   `app.css` keeps the shell and everything shared, and loads first, so the
   variables used here are the theme's own. Split out when `app.css` reached
   the 500-line file ceiling. */

/* The strength chart: eight lines on one fixed scale (decision B123). */
.strengthchart { display: block; width: 100%; height: 150px; background: var(--surface);
                 border: 1px solid var(--line); border-radius: var(--radius-sm);
                 margin-bottom: 10px; }
.strengthchart .axis { stroke: var(--line); stroke-width: 1; }
.strengthchart .axis.flag { stroke-dasharray: 3 4; }
.chartkeys { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Currency strength meter. A diverging bar per currency, midpoint at fifty:
   right is strength, left is weakness, strongest first. */
.meter { list-style: none; margin: 0; padding: 0; }
.meter li { display: grid; grid-template-columns: 3.5rem 1fr 6rem; align-items: center;
            gap: .5rem; padding: .15rem 0; }
.meter-code { font-weight: 600; }
.meter-track { position: relative; display: block; height: 1.1rem; background: var(--surface);
               border-radius: 5px; border-left: 2px solid var(--line); }
.meter-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
                       width: 1px; background: var(--line); }
/* Anchored at the centre, always: a bar that floats away from the zero line
   cannot be read against the ones above it (decision B123). */
.meter-bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; min-width: 2px; }
.meter-strong { border-radius: 0 5px 5px 0; }
.meter-weak { border-radius: 5px 0 0 5px; }
.meter-strong { background: var(--up); }
.meter-weak { background: var(--down); }
.meter-score { text-align: right; font-variant-numeric: tabular-nums; }
.meter-score .sub { display: inline; font-size: .72rem; color: var(--muted); }

/* The chain as one row of nine points joined by a line, always in view (B159,
   B213), and each point the tab of its step (B247): the one being read is
   highlighted, the one where work waits carries a badge. A phone scrolls the row
   sideways rather than stacking nine cards. */
.stepper { margin: 0 0 14px; overflow-x: auto; }
/* The steps are the second tier under Analysis (B248), set in under the tabs. */
.tabs + .chain-steps { margin: -6px 0 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
         grid-auto-columns: minmax(96px, 1fr); }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%;
                height: 2px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step.done::before, .step.now::before, .step.ended::before { background: var(--up); }
.step a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
          gap: 3px; height: 100%; box-sizing: border-box; padding: 8px 4px; text-align: center;
          text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); }
.step a:hover { background: var(--surface); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem;
               height: 1.3rem; border-radius: 50%; font-size: .7rem; font-weight: 650;
               background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.step-title { font-size: .74rem; font-weight: 600; line-height: 1.25; }
.step-detail { font-size: .68rem; color: var(--muted); }
.step.done .step-number { background: var(--up); border-color: var(--up); color: #fff; }
.step.viewing a { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.next-badge { font-size: .62rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
              padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--panel); }
.step.now .step-number { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.step.now .step-detail, .step.ended .step-detail { color: var(--accent); }
.step.ended .step-number { border-color: var(--accent); color: var(--accent); }
.step.waiting .step-title, .step.waiting .step-detail { opacity: .72; }
.step.skipped .step-number { border-style: dashed; }
.step.skipped .step-title { color: var(--muted); }

/* A stage's form for a new record, one line until it is opened (B213). */
details.new-record { margin: 0 0 14px; }
details.new-record > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: var(--radius-sm); background: var(--accent); color: var(--panel);
  font-weight: 600; list-style: none; }
details.new-record > summary::before { content: "+"; font-weight: 700; }
details.new-record[open] > summary { background: var(--accent-soft); color: var(--accent); }
details.new-record[open] > summary::before { content: "\2212"; }
details.new-record > section { margin-top: 10px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }

details.currency { border-left: 2px solid var(--line); padding-left: 10px; margin: 6px 0; }
details.currency > summary { padding: 3px 0; cursor: pointer; }
details.currency[open] { border-left-color: var(--accent); }

figure.shot { margin: 12px 0; }
figure.shot img { max-width: 100%; max-height: 420px; border: 1px solid var(--line);
                  border-radius: var(--radius-sm); }
figure.shot figcaption { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }

/* Home. A reminder is a line that goes somewhere; a day is a bar drawn from a
   zero line, so a losing Tuesday and a winning one read as opposites. */
.reminders { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reminders li { border-left: 2px solid var(--accent); padding: 4px 0 4px 10px; }
.reminders a { text-decoration: none; }
.daychart { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
.daychart li { display: grid; grid-template-columns: 5.5rem 1fr 7rem; gap: 10px;
               align-items: center; font-size: .82rem; }
.daychart .track { position: relative; display: block; height: .95rem; background: var(--surface);
                   border: 1px solid var(--line); border-radius: 5px; }
.daychart .track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
                           border-left: 1px dashed var(--line); }
.daychart .fill { position: absolute; top: 1px; bottom: 1px; border-radius: 4px; }
.daychart .fill.up { left: 50%; background: var(--up); }
.daychart .fill.down { right: 50%; background: var(--down); }
.curve { display: block; width: 100%; height: 96px; color: var(--accent); background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--radius-sm); }
.curve.underwater { color: var(--down); }

details.picker { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px;
                 background: var(--panel); }
details.picker > summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
details.picker label { display: block; font-size: .85rem; color: var(--ink); padding: 2px 0; }
/* A long list of symbols reads across, not down: columns of six characters beat
   one column of forty rows (decision B123). The tick sits against its symbol,
   not at the far side of a column, and the columns are sized to the symbol so
   the grid cannot push past the card it is in (decision B129). */
.tickgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 1px 10px; }
@media (max-width: 1100px) { .tickgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tickgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Inline, not flex: a flex row lets the symbol shrink below its own width and
   clip to "AUDNZ", and the global form rule would otherwise stack the tick above
   the symbol. Seven fixed columns keep the whole grid inside the card whatever
   the window is doing (decision B131). */
main form .tickgrid label { display: block; white-space: nowrap; font-size: .8rem;
                            padding: 1px 0; overflow: hidden; text-overflow: ellipsis; }
main form .tickgrid label input { display: inline-block; width: auto; margin: 0 5px 0 0;
                                  vertical-align: -1px; }

.reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reports li { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.reports li:hover { border-left-color: var(--accent); }
.reports a { text-decoration: none; font-weight: 550; }
.reports .step-detail { display: block; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.panel h3 { margin: 14px 0 6px; font-size: .9rem; }

/* The month calendar: compact, one cell per day, with the week's own total in
   the last column the way the user's reference does it (B111). */
.calendar-card .monthnav { display: flex; align-items: center; gap: 4px; float: none; }
.monthnav { display: flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 400;
            text-transform: none; letter-spacing: 0; }
.monthnav a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px;
              height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px;
              text-decoration: none; color: var(--muted); }
.monthnav a:hover { border-color: var(--accent); color: var(--accent); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
table.calendar { table-layout: fixed; font-size: .72rem; box-shadow: none; }
table.calendar th { padding: 4px 6px; font-size: .6rem; }
table.calendar td { height: 3rem; vertical-align: top; padding: 4px 5px; }
table.calendar td.blank { background: var(--surface); }
/* A profit day is green and a loss day red, strongly enough to read across the
   room, at the user's instruction (decision B151). */
table.calendar td.up { background: color-mix(in srgb, var(--up) 24%, transparent);
                       box-shadow: inset 3px 0 0 var(--up); }
table.calendar td.down { background: color-mix(in srgb, var(--down) 24%, transparent);
                         box-shadow: inset 3px 0 0 var(--down); }
table.calendar td.outside { background: var(--surface); }
table.calendar td.outside .daynum { opacity: .45; }
table.calendar a.daylink { display: block; color: inherit; text-decoration: none; }
table.calendar a.daylink:hover .daycount { text-decoration: underline; }
table.calendar .weeklabel { display: block; font-size: .6rem; font-weight: 700;
                            color: var(--muted); }
table.calendar tfoot .month-total th, table.calendar tfoot .month-total td {
  background: var(--surface); font-weight: 700; text-align: right; }
table.calendar td.total.up .daymoney { color: var(--up); }
table.calendar td.total.down .daymoney { color: var(--down); }
.calendar-head nav.monthnav h2 { margin: 0 4px; font-size: 1rem; }
.calendar-head .year { font-weight: 600; margin: 0 2px; }
.calendar-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calendar-tools .toggle { display: inline-flex; border: 1px solid var(--line);
                          border-radius: var(--radius-sm); overflow: hidden; }
.calendar-tools .toggle a { padding: 3px 10px; color: var(--muted); text-decoration: none; }
.calendar-tools .toggle a.on { background: var(--accent); color: #fff; }
.calendar-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 14px; }
.month-figures h3 { margin-top: 0; }
@media (max-width: 900px) { .calendar-body { grid-template-columns: 1fr; } }
table.calendar td.total { background: var(--surface); font-weight: 600; }
table.calendar .daynum { display: block; font-size: .7rem; color: var(--muted); }
table.calendar .daymoney { display: block; font-variant-numeric: tabular-nums; font-size: .72rem;
                           font-weight: 600; }
table.calendar .daycount { display: block; font-size: .6rem; color: var(--muted); }
table.calendar td.up .daymoney { color: var(--up); }
table.calendar td.down .daymoney { color: var(--down); }

/* Rings, three across one plane at the user's instruction. */
/* Three rings across one plane, at the user's instruction (B111). */
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 780px) { .rings { grid-template-columns: 1fr; } }
.ring { text-align: center; }
.ring h3 { font-size: .8rem; margin: 0 0 6px; }
.ring svg { width: 132px; height: 132px; }
.ring-hole { stroke: var(--surface); }
.legend { list-style: none; margin: 6px 0 0; padding: 0; font-size: .76rem; text-align: left; }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; }
.won, .pos { color: var(--up); } .lost, .neg { color: var(--down); }
.warn { color: var(--warn); }
.note, .empty, .scope { color: var(--muted); font-size: .84rem; }
.figure { font-size: 1.6rem; font-weight: 650; margin: 0; }
.figures { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0; }
.figures .label { display: block; font-size: .7rem; text-transform: uppercase;
                  letter-spacing: .08em; color: var(--muted); }
.figures .figure { font-size: 1.35rem; }
.options { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-wrap: wrap;
           gap: 6px 22px; }
.chain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
         padding: 12px 14px; font-size: .82rem; overflow-x: auto; }
form.inline { display: inline; }
.report-branding { font-size: .8rem; color: var(--muted); margin: 0 0 2px; letter-spacing: .04em; }
/* Every row action in every table is the same small outlined button, the next
   step first and anything that cannot be taken back in the warning colour
   (decision B162), rather than links on one page and buttons on the next. */
.rowactions { white-space: nowrap; font-size: .8rem; }
.rowactions > a, .rowactions > form, .rowactions > details { margin: 2px 6px 2px 0; }
.rowactions a, .rowactions .button-link, .rowactions button.link,
.rowactions details.popover > summary {
    display: inline-block; padding: 4px 11px; font-size: .78rem; line-height: 1.35;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
    color: var(--ink); text-decoration: none; opacity: 1; }
.rowactions a:hover, .rowactions button.link:hover { border-color: var(--accent); color: var(--accent); }
.rowactions button.link.danger { color: var(--warn); }
.rowactions button.link.danger:hover { border-color: var(--warn); color: var(--warn); }
.rowactions button.arrow { min-width: 30px; padding-left: 0; padding-right: 0; text-align: center; }

/* ------------------------------------------ backtest session (decision B157) */
.button-link.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.tag { display: inline-block; font-size: .72rem; padding: 2px 9px; border-radius: 99px;
       background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.small { font-size: .78rem; }
.session-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px;
                margin: 8px 0 14px; align-items: stretch; }
.session-head .card { margin: 0; }
.session-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.session-title h1 { margin: 0 0 4px; }
/* The session chosen where its name stands (decision B170). */
.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.session-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.session-picker form { margin: 0; display: flex; gap: 8px; align-items: center; }
.session-picker select { font: inherit; font-size: 1.35rem; font-weight: 700; color: var(--ink);
  padding: 4px 34px 4px 10px; max-width: min(100%, 26rem); }
.session-picker a:not(.button-link) { font-size: .86rem; }
.session-title .actions { margin-top: 12px; align-items: center; }
.session-period { font-size: .84rem; margin: 8px 0; }
.session-balance { text-align: right; white-space: nowrap; }
.session-balance .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                          color: var(--muted); }
.session-balance .sub { display: block; font-size: .72rem; color: var(--muted); }
.progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden;
            max-width: 360px; }
.progress span { display: block; height: 100%; background: var(--accent); }
.session-charts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.session-kpis { margin: 14px 0 6px; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-end;
                  gap: 18px; flex-wrap: wrap; margin: 8px 0 14px; }
.workspace-head h1 { margin: 0 0 4px; }
.workspace-figures { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; align-items: flex-end; }
.workspace-figures dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                        color: var(--muted); }
.workspace-figures dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 650; }

/* The trade entry: each section a balanced box, its fields side by side and no
   wider than they need, rather than one column stretched across the page. */
main .entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
                   grid-column: 1 / -1; }
main .entry-grid fieldset { display: grid; gap: 10px 14px; align-content: start;
                            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                            border: 1px solid var(--line); border-radius: var(--radius-sm);
                            padding: 12px 16px 14px; margin: 0; background: var(--surface); }
main .entry-grid legend { font-size: .76rem; font-weight: 600; color: var(--ink); padding: 0 6px; }
main .entry-grid fieldset > p, main .entry-grid fieldset > .note-tip,
main .entry-grid fieldset > .level-head, main .entry-grid fieldset > .level-row,
main .entry-grid .entry-levels, main .entry-grid .entry-review { grid-column: 1 / -1; }
main .entry-grid .entry-legs { grid-template-columns: minmax(190px, 1.5fr) repeat(auto-fit, minmax(100px, 1fr)); }
main .entry-grid .entry-setup, main .entry-grid .entry-evidence {
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
main .entry-grid .note-tip { justify-self: end; }
.level-head, .level-row { display: grid; gap: 8px 10px;
  grid-template-columns: 110px minmax(150px, 1.4fr) repeat(3, minmax(80px, 1fr)) minmax(120px, 1.6fr); }
.level-head span { font-size: .74rem; color: var(--muted); }
.level-row .sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; }
main .entry-grid .entry-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main .entry-grid .entry-review details { align-self: end; }
main label.check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
main label.check input { width: auto; flex: none; margin: 0; }
/* The diary's tags and a strategy's checklist (decisions B181 and B182). */
.checks { display: flex; flex-wrap: wrap; gap: 4px 18px; grid-column: 1 / -1; }
.checklist { display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; }
.checklist[hidden] { display: none; }
.checklist-head { font-weight: 600; font-size: .85rem; }
ul.checklist-record { list-style: none; padding: 0; margin: 0 0 8px; }
@media (max-width: 900px) {
  .session-head, main .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .level-head { display: none; }
  .level-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-row .sr { position: static; width: auto; height: auto; clip: auto; }
  main .entry-grid .entry-review { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ settings sections (B159) */
main:has(> .settings-nav) { display: grid; grid-template-columns: 210px minmax(0, 1fr);
                            column-gap: 20px; align-items: start; }
main:has(> .settings-nav) > * { grid-column: 2; }
main:has(> .settings-nav) > h1, main:has(> .settings-nav) > .back { grid-column: 1 / -1; }
main:has(> .settings-nav) > .settings-nav { grid-column: 1; grid-row: 3 / span 60;
    position: sticky; top: calc(14px + env(safe-area-inset-top, 0px)); }
.settings-nav { display: flex; flex-direction: column; gap: 2px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.settings-nav a { text-decoration: none; color: var(--ink); font-size: .86rem;
                  padding: 6px 10px; border-radius: var(--radius-sm); }
.settings-nav a:hover { background: var(--surface); }
.settings-nav a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
                  color: var(--muted); margin: 8px 10px 2px; }
.settings-group:first-child { margin-top: 0; }
@media (max-width: 900px) {
  main:has(> .settings-nav) { display: block; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 12px; }
  .settings-group { display: none; }
}

/* ----------------------------------- choice tiles: themes, modules (B161) */
main form .tile-grid, main form .fixed-modules { grid-column: 1 / -1; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
             gap: 14px; margin: 4px 0 6px; }
main form label.tile { display: flex; flex-direction: column; gap: 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
main form label.tile:hover { border-color: var(--accent); }
main form label.tile:has(input:checked) { border-color: var(--accent); background: var(--panel);
    box-shadow: 0 0 0 3px var(--accent-soft); }
main form label.tile input { width: auto; margin: 0; }
.tile-foot { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.tile-foot .tag { margin-left: auto; font-weight: 500; }
.tile-text { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.fixed-modules { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
/* The swatch carries data-theme, so these variables are that palette's own. */
.swatch { display: grid; grid-template-columns: 24% 1fr; height: 96px; overflow: hidden;
          border-radius: 7px; border: 1px solid var(--line); background: var(--bg); }
.swatch-rail { background: var(--panel); border-right: 1px solid var(--line); }
.swatch-body { display: flex; flex-direction: column; gap: 7px; padding: 9px; }
.swatch-card { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;
               padding: 0 9px; background: var(--panel); border-radius: 5px;
               border: 1px solid var(--line); }
.swatch-card i { display: block; height: 4px; border-radius: 2px; }
.swatch .ink { width: 72%; background: var(--ink); }
.swatch .muted-line { width: 48%; background: var(--muted); }
.swatch .accent { width: 34%; background: var(--accent); }
.swatch .up { width: 44%; background: var(--up); }
.swatch .down { width: 26%; background: var(--down); }

/* ------------------------------------ tables that scroll, one save (B162) */
.table-scroll { overflow-x: auto; margin: 0 0 12px; border-radius: var(--radius-sm); }
.table-scroll > table { margin: 0; }
main form.table-form > * { grid-column: 1 / -1; }
table.edit-table td { padding-top: 5px; padding-bottom: 5px; }
table.edit-table input:not([type=checkbox]), table.edit-table select { width: auto; min-width: 0; }
main .form-sections .options.wide { grid-column: 1 / -1; margin: 2px 0 4px; }
/* On a narrow screen a wide table scrolls inside its card rather than pushing
   the page sideways. On a wide one the card stays open so a long table's
   headings can stick, which a scrolling box would prevent; a card holding a row
   menu stays open at every width so the menu is not clipped. */
@media (max-width: 900px) {
  main > section { overflow-x: auto; }
  main table:not(.calendar):not(:has(details.popover)) { display: block; overflow-x: auto; }
  main > section:has(details.popover), main > section:has(.menu-panel) { overflow: visible; }
}
/* A long edit table keeps its one Save in reach while scrolling. */
.sticky-actions { position: sticky; bottom: 0; z-index: 2; background: var(--panel);
                  padding: 10px 0 2px; border-top: 1px solid var(--line); }
th .zone { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; }

/* ------------------------------------------ empty states, labels (B162) */
p.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm);
          padding: 12px 14px; margin: 8px 0; }
.cards .card p.empty, .kpi p.empty { background: none; border: 0; padding: 0; }
/* Long tables keep their headings in view while scrolling. */
main > section > table thead th, main > table thead th, main form > table thead th {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1; background: var(--surface); }
button.show-all { margin: 10px 0 2px; padding: 5px 14px; font-size: .8rem; }
td.when { white-space: nowrap; }
.correct-row { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink); font-weight: 600; }

/* ------------------------------------- a page over the page (B167) */
dialog.overlay { width: min(1180px, calc(100vw - 32px)); max-width: none;
    max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--bg); color: var(--ink);
    box-shadow: var(--shadow-lift); overflow: hidden; }
dialog.overlay::backdrop { background: rgba(10, 12, 16, .5); }
.overlay-body { max-height: calc(100vh - 40px); overflow-y: auto; padding: 18px 22px 22px; }
.overlay-body[aria-busy="true"] { opacity: .55; }
.overlay-body > section { background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin: 14px 0; }
.overlay-head { padding-right: 48px; }
.overlay-head h1 { margin: 0 0 2px; font-size: 1.35rem; }
.overlay-close { position: absolute; top: 12px; right: 14px; z-index: 3; width: 36px; height: 36px;
    padding: 0; border-radius: 50%; font-size: 1.35rem; line-height: 1; background: var(--panel);
    color: var(--ink); border: 1px solid var(--line); }
.overlay-close:hover { border-color: var(--accent); color: var(--accent); filter: none; }
html.overlay-open { overflow: hidden; }
.overlay-body > section > h2:first-child, .overlay-body > .card > h2:first-child { margin-top: 0; }
.readonly-line { margin: 6px 0 12px; font-size: .88rem; color: var(--muted); }
.readonly-line .tag { margin-right: 6px; }

/* On a phone a row of figures wraps two to a line rather than scrolling
   sideways, where the third figure onwards was out of sight (decision B168). */
@media (max-width: 600px) {
  .kpis, .kpis.wrap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
                      overflow: visible; }
  .kpi .figure { font-size: 1.1rem; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  /* The calendar's buttons go under the month rather than squeezing beside it. */
  .calendar-head { flex-wrap: wrap; }
  .calendar-tools { width: 100%; }
  .calendar-tools .button-link { white-space: nowrap; }
}

/* The monthly review's charts and lessons (decision B174). */
.review-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.review-charts h3 { margin-top: 0; }
.lessons { list-style: none; padding: 0; margin: 0; }
.lessons li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lessons li p { margin: 3px 0 0; white-space: pre-line; }
.lesson-text { white-space: pre-line; }
/* A reading's drivers and narrative, read back under its row (decision B185). */
tr.reading td { padding-top: 0; border-top: 0; }
dl.reading-list { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 4px 14px; margin: 8px 0; }
dl.reading-list dt { font-weight: 600; }
dl.reading-list dd { margin: 0; white-space: pre-line; }
/* Keyboard entry (decision B189). */
dialog.shortcut-help { border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; max-width: 30rem; }
dialog.shortcut-help::backdrop { background: rgba(0, 0, 0, .3); }
kbd { font: inherit; font-size: .8rem; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--card, #fff); }
input.type-filter { margin-bottom: 4px; }
/* An account has no description card beside its title (decision B186). */
.session-head.account-head { grid-template-columns: minmax(0, 1fr); }
/* On a phone the balance goes under the name rather than off the card's edge. */
@media (max-width: 640px) {
  .session-balance { text-align: left; white-space: normal; }
}
/* A trade on its chart (B240): candles, its levels dashed, its fills marked. */
.trade-chart { margin: 0 0 12px; }
.trade-chart svg { width: 100%; height: 240px; display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.trade-chart .wick { stroke-width: 1; }
.trade-chart .up { stroke: var(--up); fill: var(--up); }
.trade-chart .down { stroke: var(--down); fill: var(--down); }
.trade-chart .level { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.trade-chart .level-stop { stroke: var(--down); }
.trade-chart .level-target { stroke: var(--up); }
.trade-chart .mark { stroke: var(--panel); stroke-width: 1.5; }
.trade-chart .mark-entry { fill: var(--accent); }
.trade-chart .mark-exit { fill: var(--ink); }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted);
  margin-top: 6px; }
.chart-key .key-item::before { content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 5px; border-radius: 50%; vertical-align: -1px; background: var(--muted); }
.chart-key .level-stop::before { background: var(--down); border-radius: 2px; height: 3px; }
.chart-key .level-target::before { background: var(--up); border-radius: 2px; height: 3px; }
.chart-key .level-entry::before { border-radius: 2px; height: 3px; }
.chart-key .mark-entry::before { background: var(--accent); }
.chart-key .mark-exit::before { background: var(--ink); }
ul.plain-list { margin: 0; padding-left: 18px; }
/* The reports' account filter: every account, one, or any set ticked (B243). It
   reads as a field of the filter bar and opens over the report below it. */
.filterbar .pick-field { display: flex; flex-direction: column; gap: 3px; font-size: .74rem;
    color: var(--muted); }
details.account-pick > summary { padding: 6px 12px; font-size: .84rem; min-width: 180px;
    max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.account-pick > .menu-panel { left: 0; right: auto; width: 320px; gap: 4px;
    max-height: 320px; overflow-y: auto; }
.filterbar details.account-pick .menu-panel label.check { flex-direction: row;
    align-items: center; gap: 8px; font-size: .86rem; color: var(--ink); }
details.account-pick .menu-panel .hint { margin: 6px 0 0; font-size: .74rem; color: var(--muted); }
details.account-pick .menu-panel .env { margin-left: auto; font-size: .72rem; color: var(--muted); }
/* Small multiples, one running line a group (decision B244): each on its own
   scale, so the figures at either end are printed under it. */
.small-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px; }
.small-multiples figure { margin: 0; }
.small-multiples figcaption { font-size: .82rem; display: flex; justify-content: space-between; }
.small-multiples .curve { width: 100%; height: 64px; color: var(--accent); }
.small-multiples .ends { display: flex; justify-content: space-between; margin: 2px 0 0;
    font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.filterbar .second-set { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 8px 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.filterbar .second-set .set-name { font-size: .74rem; font-weight: 600; color: var(--ink);
    align-self: center; }
/* Strengths beside leaks in the reviews (decision B245); one under the other on a phone. */
.edges { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 20px; }
.edges h3 { margin: 0 0 6px; font-size: .9rem; }
/* The money trends (decision B246): profit up in green and loss down in red, the
   month's expenses beside them in amber, on one scale with a zero line. */
.trend-card .curve { width: 100%; height: 90px; color: var(--accent); }
.trend-card .ends { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.month-columns { width: 100%; height: auto; max-height: 230px; }
.month-columns rect.up { fill: var(--up); }
.month-columns rect.down { fill: var(--down); }
.month-columns rect.spent { fill: #e0a020; }
.month-columns line.zero { stroke: var(--line); stroke-width: 1; }
.month-columns text { font-size: 10px; fill: var(--muted); }
.chart-key .key-item.up::before { background: var(--up); }
.chart-key .key-item.down::before { background: var(--down); }
.chart-key .key-item.spent::before { background: #e0a020; }

/* The tilt warning (B249): a band above the figures, plain enough to be read
   before the next trade and quiet enough not to be mistaken for an error. */
.tilt-warning { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
                border: 1px solid var(--down); border-left-width: 4px;
                background: var(--surface); color: var(--ink); font-size: .9rem; }
.tilt-warning strong { color: var(--down); margin-right: 4px; }
.tilt-warning a { margin-left: 6px; }
/* The trader score with its parts beside it, never alone (B249). */
.trader-score .score-figure { font-size: 2rem; font-weight: 650; margin: 0 0 6px; }
.trader-score .score-figure .sub { font-size: .8rem; font-weight: 400; color: var(--muted); }
/* A statement row's values as read, folded under the row in words (B250). */
details.as-read { margin-top: 2px; font-size: .74rem; }
details.as-read summary { color: var(--muted); cursor: pointer; }
details.as-read code { display: block; white-space: pre-wrap; word-break: break-all; }

/* Net worth as a balance sheet (B252): sides, groups and the month grid. */
.balance-sheet tr.side th, .month-grid tr.side th { padding-top: 12px; text-transform: uppercase;
  font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.balance-sheet tr.group th, .month-grid tr.group th { font-weight: 600; }
.balance-sheet tr.grand th, .balance-sheet tr.grand td,
.month-grid tr.grand th, .month-grid tr.grand td { border-top: 2px solid var(--ink); }
.month-grid td.indent { padding-left: 18px; }
.month-grid th, .month-grid td { white-space: nowrap; }
.grid-scroll { overflow-x: auto; }
.curve .line-net { stroke: var(--accent); }
.curve .line-assets { stroke: var(--up); }
.curve .line-liabilities { stroke: var(--down); }
.chart-key .key-item.net::before { background: var(--accent); }
.chart-key .key-item.assets::before { background: var(--up); }
.chart-key .key-item.liabilities::before { background: var(--down); }

/* The personal ledger (decision B253): an indented category, the parts of a
   split entry, and the calendar of bills. */
span.indent { display: inline-block; width: 1.2em; }
details.parts { margin: 12px 0; }
details.parts select { max-width: 22rem; }
.bill-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bill-calendar th { font-size: .72rem; color: var(--muted); text-align: left; padding: 4px; }
.bill-calendar td { vertical-align: top; height: 74px; padding: 4px; border: 1px solid var(--line); }
.bill-calendar td.empty { background: var(--surface); }
.bill-calendar td.today { box-shadow: inset 0 0 0 2px var(--accent); }
.bill-calendar .day { display: block; font-size: .72rem; color: var(--muted); }
.bill-calendar .bill { display: block; margin-top: 2px; padding: 1px 4px; font-size: .7rem;
                       border-radius: 4px; background: var(--accent-soft); overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }
.bill-calendar .bill.in { border-left: 2px solid var(--up); }
.bill-calendar .bill.out { border-left: 2px solid var(--down); }
@media (max-width: 640px) { .bill-calendar td { height: 48px; } .bill-calendar .bill { font-size: .6rem; } }
/* The personal ledger's month: each day's net (issues after 7.8.0, item 10). */
.net-calendar th:last-child, .net-calendar td.week { width: 11%; text-align: right; }
.net-calendar a.day { text-decoration: none; }
.net-calendar a.net { display: block; margin-top: 10px; text-align: right; font-size: .85rem;
                      font-variant-numeric: tabular-nums; text-decoration: none; }
.net-calendar td.week { vertical-align: middle; font-size: .85rem; background: var(--surface); }
@media (max-width: 640px) { .net-calendar a.net, .net-calendar td.week { font-size: .62rem; } }

/* Assets and debts (issues after 7.8.0, items 2 and 5): the form's steps, and
   one register table with its groups as rows. */
form.item-steps > fieldset { margin-bottom: 14px; }
form.item-steps legend { display: flex; align-items: center; gap: 8px; }
.group-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.group-choice label.check { display: block; margin: 4px 0; }
.group-choice label.check .muted { display: block; margin-left: 1.6rem; font-size: .78rem; }
table.register { width: 100%; }
table.register tr.group-row th { padding-top: 14px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
table.register tr.group-row a { margin-left: 8px; text-transform: none; letter-spacing: 0; }
table.register tr.subtotal td { color: var(--muted); font-size: .85rem; }
/* Budgets (B255): the bar fills with what is used; over is red, ahead amber. */
.budget-bar { min-width: 90px; margin-bottom: 2px; }
.budget-bar.ahead span { background: var(--warn); opacity: .7; }
.budget-bar.over span { background: var(--down); }
table.budget-table tr.over td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.goal-bar { max-width: none; height: 8px; margin: 4px 0 10px; }
.goal-bar.behind span { background: var(--warn); }
.overview-figures { margin-bottom: 14px; }
/* Mapping a statement's columns (B257): each column's choice above it, in the
   file's own table; the columns used stand out and the rest recede. */
table.map-columns { table-layout: fixed; width: 100%; min-width: calc(var(--columns, 6) * 6.6rem); }
table.map-columns td { font-size: .8rem; overflow-wrap: anywhere; vertical-align: top; }
table.map-columns tr.roles th { padding: 0 4px 6px; text-transform: none; letter-spacing: 0; }
table.map-columns tr.roles select { width: 100%; min-width: 0; font-size: .78rem; padding-left: 6px; padding-right: 16px; }
table.map-columns .mapped { background: color-mix(in srgb, var(--accent) 7%, transparent); }
form.map-bar { align-items: end; margin-top: 14px; }
form.map-bar label { min-width: 14rem; }
ul.problems { margin: 6px 0 10px; padding-left: 1.2rem; color: var(--warn); }
/* A statement's rows (B257): the description has the room, the filing and the
   payee a set width, the reason for the filing under it; rows already recorded
   or not readable recede. */
table.statement-rows td { vertical-align: top; }
table.statement-rows td.day, table.statement-rows td.num { white-space: nowrap; }
table.statement-rows td.what { min-width: 15rem; }
table.statement-rows td.filing { width: 15rem; }
table.statement-rows td.filing select { width: 100%; }
table.statement-rows td.payee { width: 11rem; }
table.statement-rows td.payee input { width: 100%; }
table.statement-rows td.keep { width: 7.5rem; }
table.statement-rows .why { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted); }
table.statement-rows tr.duplicate td, table.statement-rows tr.rejected td { color: var(--muted); }
table.statement-rows th { white-space: nowrap; }

/* ------------------------------------------------------------ the 7.14.0 pass
   Measured against the best ledgers and journals (BACKLOG, 7.14.0): colour is a
   state, money reads as money, a wide grid keeps its labels, and anything can be
   found by name. */
/* Find or do, and hide figures (items 66 and 68): two quiet buttons in the panel. */
.shell-tools { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.shell-tools button { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .82rem; }
.shell-tools .palette-open { justify-content: space-between; color: var(--muted); }
.shell-tools .palette-open kbd { font-size: .68rem; padding: 0 5px; }
.shell-tools .privacy .label { display: none; }
.shell-tools .privacy .initial-only, .shell-tools .palette-open .initial-only { display: none; }
.shell-tools .privacy::before { content: "\25C9"; }
.shell-tools .privacy[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
body.nav-collapsed .shell-tools, html[data-nav="collapsed"] .shell-tools { grid-template-columns: 1fr; }
body.nav-collapsed .shell-tools .palette-open .initial-only,
html[data-nav="collapsed"] .shell-tools .palette-open .initial-only { display: inline; }
body.nav-collapsed .shell-tools kbd, html[data-nav="collapsed"] .shell-tools kbd { display: none; }
body.nav-collapsed .shell-tools button, html[data-nav="collapsed"] .shell-tools button { justify-content: center; }
dialog.palette { width: min(620px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 12vh auto auto;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  color: var(--ink); box-shadow: var(--shadow-lift); overflow: hidden; }
dialog.palette[open] { display: flex; flex-direction: column; }
dialog.palette::backdrop { background: rgba(10, 12, 16, .35); }
dialog.palette input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px;
  font-size: 1rem; background: var(--panel); outline: none; }
dialog.palette ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
dialog.palette li[role="option"] { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px;
  border-radius: var(--radius-sm); cursor: pointer; }
dialog.palette li.chosen { background: var(--accent-soft); color: var(--accent); }
.palette-group { padding: 8px 10px 3px; font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.palette-hint { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.palette-none { padding: 14px 10px; color: var(--muted); }
.palette-foot { margin: 0; padding: 7px 14px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); }

/* Hidden figures (item 68): blurred until pointed at. */
html[data-private] :is(td.num, th.num, .figure, .amt, .held, .money, .kpi .sub, .calendar .net, svg text) {
  filter: blur(6px); transition: filter .12s ease; }
html[data-private] :is(td.num, th.num, .figure, .amt, .held, .money, .kpi .sub, .calendar .net):hover { filter: none; }
html[data-private] thead th.num { filter: none; }

/* Money reads as money (item 62): its sign kept, money in its colour, a move
   between the user's own accounts quiet, nought quieter still. */
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.in { color: var(--up); }
.amt.out { color: var(--ink); }
.amt.move, .amt.zero { color: var(--muted); }
tr.move td { color: var(--muted); }
.arrow { color: var(--muted); padding: 0 3px; }

/* A grid wider than its card keeps its first column (item 63). */
.grid-scroll { overflow-x: auto; }
table.grid :is(thead th, tbody th, tbody td, tfoot th, tfoot td):first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
table.grid thead th:first-child { background: var(--surface); }
table.grid th, table.grid td { white-space: nowrap; }
/* A long register keeps its heading row in view. */
table.register thead th { position: sticky; top: 0; z-index: 2; }

/* The register by day (item 70): a heading for the day carrying its net. */
table.register tr.day th { background: var(--surface); font-size: .74rem; font-weight: 600;
  color: var(--muted); padding: 6px 11px; letter-spacing: .02em; }
table.register tr.day th .amt { float: right; font-weight: 600; }
table.register td.parts { color: var(--muted); font-size: .84rem; }
table.register td.balance { color: var(--muted); }

/* One currency, said once (item 61): a heading's code is quieter than its words. */
.code { color: var(--muted); font-weight: 500; }

/* A warning about the figures, set as a note bar rather than a red sentence (item 75). */
.notebar { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm); background: var(--panel); font-size: .85rem; color: var(--muted); }
.notebar strong { color: var(--ink); }

/* A budget's pace (item 72): where the period's even spending would stand today. */
.budget-bar { position: relative; }
.budget-bar .pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink);
  opacity: .45; border-radius: 1px; }
.budget-bar { overflow: visible; }
.budget-bar > span { border-radius: 99px; }

/* Control's Home (item 69): figures that open their screens, the month's pace,
   and a part of the money with nothing in it kept to one line. */
a.kpi.link { display: block; text-decoration: none; color: inherit; }
a.kpi.link:hover { border-color: var(--accent); }
.kpi .sub .won, .kpi .sub .lost { font-weight: 600; }
.pace-chart { display: block; width: 100%; height: 110px; background: var(--surface);
  border-radius: var(--radius-sm); }
.pace-chart .pace-now { stroke: var(--accent); }
.pace-chart .pace-last { stroke: var(--muted); stroke-dasharray: 4 3; opacity: .7; }
.pace-chart .pace-today { stroke: var(--line); stroke-width: 1; }
.chart-key .key-item.now::before { background: var(--accent); }
.chart-key .key-item.last::before { background: var(--muted); }
.cards .card.slim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 16px; }
.cards .card.slim > h2 { margin: 0; }
.cards .card.slim > p.empty { margin: 0; flex: 1 1 10rem; }
.cards .card.slim > .inline-switch { margin: 0; }
.worth-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .worth-row { grid-template-columns: 1fr; } }
table.coming td { vertical-align: top; }
table.coming td.when { white-space: nowrap; color: var(--muted); width: 1%; }
table.budgets-brief td.bar-cell { width: 45%; }
table.budgets-brief td.bar-cell .progress { max-width: none; margin-top: 6px; }
.goal-line { margin: 6px 0 0; font-size: .86rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px;
  align-items: start; margin: 14px 0; }
.home-grid > .cards.stack { grid-template-columns: minmax(0, 1fr); margin: 0; align-items: start; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.two-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
/* A group and its members (item 74): the group a heading row, its members indented. */
table.grouped tr.group th, table.grouped tr.group td { background: var(--surface); font-weight: 600; }
table.grouped tr.member td:first-child { padding-left: 24px; }
table.grouped tr.member td { color: var(--muted); }
table.grouped tr.member td a { color: var(--ink); text-decoration: none; }
table.grouped tr.member td a:hover { text-decoration: underline; }
table.grouped caption { text-align: left; font-size: .74rem; color: var(--muted); padding: 4px 0; }
/* A choice of a few, each option with its line under it (item 72). */
main form label.option { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: flex-start;
  gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); cursor: pointer; }
main form label.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
main form label.option input { width: auto; margin-top: 3px; }
main form label.option > span { display: flex; flex-direction: column; gap: 1px; }
main form label.option strong { font-weight: 600; font-size: .86rem; }
main form label.option .muted { font-size: .78rem; }
/* The entry form (item 71): fields that hold names wide enough to read them. */
main form.entry .form-sections > fieldset { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
main form.entry .form-sections > * { flex-basis: 400px; }
/* On a phone the register keeps what was spent, where, and how much (7.14.0):
   the payee, labels and note are on the entry's own page. */
@media (max-width: 700px) {
  table.register :is(th, td):is(.payee, .labels, .note-col) { display: none; }
  table.register td, table.register th { padding: 7px 8px; }
}

/* The application's icon beside its credit in Settings (7.14.1). */
.app-icon { display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
.app-icon img { border-radius: 11px; flex: none; }

/* Home's first cards (7.15.0, items 18 and 101): the trader score spans two rows
   on a wide screen, so Today and Reminders above Goals and Events fill the
   columns beside it, none stretched to its height and no column left bare. */
@media (min-width: 1100px) {
  .cards.home-top.with-score { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .cards.home-top.with-score > .trader-score { grid-column: 3; grid-row: 1 / span 2; }
}
.cards.home-top { align-items: start; }
td.nowrap, .nowrap { white-space: nowrap; }

/* The trades list on a phone (7.15.0, item 22): the secondary columns fold away,
   leaving the instrument with its day, its side, R and net, net last and bold. */
table.trade-list .phone-only { display: none; }
@media (max-width: 640px) {
  table.trade-list .opt { display: none; }
  table.trade-list .phone-only { display: block; }
  table.trade-list td.num:last-of-type { font-weight: 600; }
  table.trade-list td, table.trade-list th { padding-left: 6px; padding-right: 6px; }
}

/* On a phone (7.15.0, items 23 and 110): the tabs are one row that scrolls, and
   a filter bar folds behind its button. */
@media (max-width: 640px) {
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.tabs a { flex: none; white-space: nowrap; }
  .filterbar.folded { display: none; }
  .filter-toggle { margin: 4px 0 10px; }
}

/* The score's parts on a phone (item 24): each part's name and points on a line,
   its reading under them, rather than three columns squeezed to a word each. */
@media (max-width: 640px) {
  table.score-parts thead { display: none; }
  table.score-parts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0;
      border-bottom: 1px solid var(--line); }
  table.score-parts th, table.score-parts td { border: 0; padding: 0 4px; }
  table.score-parts td.muted { grid-column: 1 / -1; font-size: .8rem; }
}

/* Tables that ran off a phone's screen (item 109): a trade's legs lose their
   secondary columns, and a long memo or reference breaks rather than pushing
   the table wider than the screen. */
@media (max-width: 640px) {
  table.legs .opt { display: none; }
  table.legs td, table.legs th { padding-left: 5px; padding-right: 5px; }
  main td:not(.num), main th:not(.num) { overflow-wrap: anywhere; }
}
@media (max-width: 640px) { td.row-actions { white-space: normal; } }
/* Each group of reports as tall as its list (item 16). */
.cards.report-index { align-items: start; }