/* One stylesheet. Themes are CSS variable blocks, not a theming engine (D40).
 *
 * The visual pass (decision B111) is built on four things and nothing more: a
 * card with a soft radius and one shadow, a single accent per theme, tabular
 * figures, and space. No gradients, no animation beyond a hover, and no image
 * assets, so the whole look costs one stylesheet and paints in one frame.
 */
:root, [data-theme="light"] {
  --bg: #f2f3f5; --panel: #ffffff; --surface: #f7f8fa; --ink: #17181b; --muted: #6b6f76;
  --line: #e2e4e9; --accent: #1f6f5c; --accent-soft: rgba(31, 111, 92, .12);
  --warn: #b3261e; --up: #1a7f37; --down: #c62828;
  --radius: 14px; --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 18, 22, .05), 0 6px 18px rgba(16, 18, 22, .07);
  --shadow-lift: 0 2px 6px rgba(16, 18, 22, .08), 0 14px 32px rgba(16, 18, 22, .12);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] {
  --bg: #0e1014; --panel: #171a20; --surface: #1e222a; --ink: #e8e9ec; --muted: #9aa0a9;
  --line: #272b34; --accent: #35c48f; --accent-soft: rgba(53, 196, 143, .14);
  --warn: #ef6f6c; --up: #35c48f; --down: #ef6f6c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .55);
}
[data-theme="sepia"] {
  --bg: #f2e9d8; --panel: #fbf5e7; --surface: #f6efdd; --ink: #3b2f22; --muted: #7a6a55;
  --line: #e2d5ba; --accent: #97591f; --accent-soft: rgba(151, 89, 31, .12);
  --warn: #9e3218; --up: #4f7a2b; --down: #9e3218;
}
[data-theme="natural_gray"] {
  --bg: #eceeed; --panel: #f8f9f9; --surface: #f1f3f2; --ink: #22262a; --muted: #6e7477;
  --line: #d7dbda; --accent: #3f6b60; --accent-soft: rgba(63, 107, 96, .12);
  --warn: #8a3a34; --up: #35704e; --down: #8a3a34;
}
[data-theme="cyberpunk"] {
  --bg: #0a0818; --panel: #14102b; --surface: #1b1638; --ink: #e8e4ff; --muted: #9c94c9;
  --line: #2c2456; --accent: #2ce6bd; --accent-soft: rgba(44, 230, 189, .14);
  --warn: #ff5c8a; --up: #2ce6bd; --down: #ff5c8a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px rgba(76, 32, 160, .35);
  --shadow-lift: 0 2px 10px rgba(0, 0, 0, .6), 0 20px 44px rgba(76, 32, 160, .45);
}
[data-theme="monochrome"] {
  --bg: #ffffff; --panel: #ffffff; --surface: #f5f5f5; --ink: #101010; --muted: #666666;
  --line: #d8d8d8; --accent: #101010; --accent-soft: rgba(16, 16, 16, .08);
  --warn: #444444; --up: #101010; --down: #555555;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
       font-size: .90625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 64px; }
main.with-rail { margin-left: var(--rail-width, 208px); padding: 20px 26px 64px; max-width: none;
                 transition: margin-left .16s ease; }
h1 { font-size: 1.42rem; margin: 0 0 2px; letter-spacing: -.01em; }
h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
     margin: 24px 0 8px; font-weight: 600; }
h3 { font-size: .92rem; margin: 12px 0 6px; }
a { color: var(--accent); }
code { background: var(--surface); padding: 1px 5px; border-radius: 4px; }

/* ------------------------------------------------------------------- the shell
   Decision B6: navigation is a left panel with the environment selector inside
   it. It collapses to a strip of initials (B111), because a rail that cannot be
   got out of the way is a rail that costs width on every screen for ever. The
   choice is remembered in the browser, not on the server: it is a preference
   about this screen, not a fact about the journal. */
.shell { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-width, 208px);
         display: flex; flex-direction: column; gap: 14px; padding: 14px 12px;
         background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto;
         transition: width .16s ease; z-index: 20; }
.shell-top { display: flex; align-items: center; gap: 8px; }
.brand { font-weight: 650; text-decoration: none; color: var(--ink); font-size: 1rem;
         line-height: 1.2; flex: 1; overflow: hidden; }
.navtoggle { background: transparent; border: 1px solid var(--line); border-radius: 8px;
             width: 28px; height: 28px; color: var(--muted); cursor: pointer; font-size: .9rem;
             line-height: 1; flex: none;
             /* The button's own padding pushed its mark off centre (item 111). */
             padding: 0; display: inline-grid; place-items: center; }
.navtoggle:hover { color: var(--accent); border-color: var(--accent); }
.rail { display: flex; flex-direction: column; gap: 1px; }
.rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 7px 10px;
          border-radius: var(--radius-sm); color: var(--ink); font-size: .9rem; }
.rail a:hover { background: var(--surface); }
.rail-group { margin: 10px 10px 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); }
body.nav-collapsed .rail-group, html[data-nav="collapsed"] .rail-group { display: none; }
.rail-rule { border: 0; border-top: 1px solid var(--line); margin: 8px 10px; }
.rail a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail .initial { display: inline-flex; align-items: center; justify-content: center;
                 width: 22px; height: 22px; border-radius: 7px; background: var(--surface);
                 font-size: .72rem; font-weight: 700; flex: none; }
.rail a.current .initial { background: var(--accent); color: var(--panel); }
.switcher { display: flex; flex-direction: column; gap: 4px; }
.switcher select { font: inherit; padding: 6px 8px; background: var(--surface); color: var(--ink);
                   border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; }
/* The presentation currency (B261): four buttons, the one in force filled. */
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { font: inherit; font-size: .75rem; padding: 5px 0; background: var(--surface);
  color: var(--muted); border: 0; border-radius: 0; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.current { background: var(--accent); color: var(--panel); font-weight: 600; }
body.nav-collapsed .segmented, html[data-nav="collapsed"] .segmented { grid-template-columns: 1fr; }
body.nav-collapsed .segmented button + button, html[data-nav="collapsed"] .segmented button + button {
  border-left: 0; border-top: 1px solid var(--line); }
/* A figure with no rate for its day, named where it is always seen (B261). */
.rate-gaps { position: sticky; bottom: 0; margin: 18px 0 0; padding: 8px 12px; background: var(--panel);
  border: 1px solid var(--warn); border-radius: 8px; font-size: .85rem; color: var(--muted); }
.rate-gaps strong { color: var(--warn); }
.rate-gaps.filling strong { color: var(--accent); }
.held { color: var(--muted); font-size: .8em; font-weight: 400; white-space: nowrap; }
.no-rate { color: var(--warn); font-size: .85em; }
/* The quick review (B262): a row the page refused says why, under the trade. */
table.quick-review td { vertical-align: top; }
table.quick-review td:nth-child(2), table.quick-review td:first-child a { white-space: nowrap; }
table.quick-review select { width: 8.5rem; }
table.quick-review input { width: 7.5rem; }
table.quick-review td:last-child input { width: 9rem; }
table.quick-review tr.refused td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
td.go { white-space: nowrap; }
table.quick-review .error { display: block; color: var(--warn); font-size: .85em; }
/* One market read alone (B222): a single strip above the page, not a form to fill in. */
main form.inline.market-banner { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px; margin: 0 0 14px; padding: 8px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; color: var(--muted); }
main form.inline.market-banner strong { color: var(--ink); }
main form.inline.market-banner button { background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
/* The test copy says so on every page (issues after 7.8.0, item 7). */
.test-copy-mark { margin: 0 0 14px; padding: 8px 12px; border: 2px dashed var(--warn);
  border-radius: 8px; color: var(--warn); font-size: .9rem; }
.switcher-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.logout { margin-top: auto; }
.logout button { width: 100%; }

/* Collapsed: initials only, everything else out of the way. */
body.nav-collapsed, html[data-nav="collapsed"] body.has-rail { --rail-width: 62px; }
body.nav-collapsed .shell, html[data-nav="collapsed"] .shell { padding: 14px 8px; align-items: stretch; }
body.nav-collapsed .brand, html[data-nav="collapsed"] .brand,
body.nav-collapsed .switcher-label, html[data-nav="collapsed"] .switcher-label,
body.nav-collapsed .rail .label, html[data-nav="collapsed"] .rail .label,
body.nav-collapsed .logout .label, html[data-nav="collapsed"] .logout .label { display: none; }
body.nav-collapsed .rail a, html[data-nav="collapsed"] .rail a { justify-content: center; padding: 7px 4px; }
body.nav-collapsed .switcher select, html[data-nav="collapsed"] .switcher select { padding: 6px 2px; font-size: .7rem; }

/* ------------------------------------------------------------------- surfaces */
.card, .cards .card, .panelbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 14px; align-items: stretch; margin: 14px 0; }
.cards.week-month { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr); }
.cards.week-month > :only-child { grid-column: 1 / -1; }
.cards.week-month.week-empty { grid-template-columns: minmax(0, 1fr); }
.card.week-slim { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 14px; }
.card.week-slim > h2 { margin: 0; }
.card.week-slim > p.empty { background: none; border: 0; padding: 0; margin: 0; }
@media (max-width: 1100px) { .cards.week-month { grid-template-columns: minmax(0, 1fr); } }
.cards .card { margin: 0; max-width: none; display: block; overflow-x: auto; }
.cards .card h2 { margin: 0 0 10px; }
.cards .card h3 { margin: 10px 0 4px; font-size: .82rem; }
.cards .card.wide { grid-column: 1 / -1; }
.cards .card .note { font-size: .78rem; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

/* Every top-level section in every module gets the same card, so Accounts,
   Trades, Planning, Discipline and Settings read as one application rather than
   as five screens that grew separately (decision B111). The KPI strip opts out:
   it is a row of cards already. */
/* A form folded under "+ New" is a section like any other once open (B238). */
main > section, main > details.new-record > section {
                 background: var(--panel); border: 1px solid var(--line);
                 border-radius: var(--radius); box-shadow: var(--shadow);
                 padding: 14px 16px; margin: 14px 0; }
main > section#kpis, main > section.plain { background: none; border: 0; box-shadow: none; padding: 0; }
main > section > h2:first-child, .cards .card > h2:first-child,
main > details.new-record > section > h2:first-child { margin-top: 0; }
main > section > table:last-child { margin-bottom: 0; }
main > form.row-form { background: var(--panel); border: 1px solid var(--line);
                       border-radius: var(--radius); box-shadow: var(--shadow);
                       padding: 12px 14px; }

/* The sign-in and first-run card keeps its old shape: centred and narrow. */
.card.auth { max-width: 400px; margin: 12vh auto; display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ the header
   The title on the left and at most three shortcuts on the right (B111). A
   page's filters sit in a bar of their own under it (B159): wedged beside the
   title they read as part of the heading and wrapped into it. */
.pagehead { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
            justify-content: space-between; margin-bottom: 14px; }
.pagehead .scope { margin: 2px 0 0; }
.headright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shortcuts { display: flex; gap: 8px; flex-wrap: wrap; }
.shortcut { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
            background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
            padding: 6px 14px; font-size: .84rem; color: var(--ink); box-shadow: var(--shadow); }
.shortcut:hover { border-color: var(--accent); color: var(--accent); }
.shortcut.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end;
           margin: 0; }
.filters label { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem;
                 color: var(--muted); }
.filterbar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
             box-shadow: var(--shadow); padding: 10px 14px; margin: 0 0 14px; }
.filterbar .filters { justify-content: flex-start; align-items: flex-end; gap: 8px 12px; }
.filterbar .filters label { flex-direction: column; align-items: stretch; gap: 3px; }

/* --------------------------------------------------------------- the KPI strip
   One horizontal plane per currency, at the user's instruction: equity, net,
   expectancy, profit factor, win rate and the planned reward to risk read across
   rather than down, and scroll sideways rather than wrapping into a block. */
#kpis { margin: 0 0 16px; }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
        gap: 10px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 2px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
       box-shadow: var(--shadow); padding: 11px 13px; min-width: 0; }
.kpi .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
              color: var(--muted); display: block; line-height: 1.35; }
.kpi .figure { font-size: 1.24rem; font-weight: 650; margin: 3px 0 0;
               font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi.lead { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.kpi.lead .figure { color: var(--accent); }
/* A gain or a loss keeps its own colour on the lead card: colour means a state
   before it means emphasis (7.15.0, item 93). */
.kpi.lead .figure.won, .kpi.lead .figure.pos { color: var(--up); }
.kpi.lead .figure.lost, .kpi.lead .figure.neg { color: var(--down); }
.kpi .sub { font-size: .72rem; color: var(--muted); display: block; margin-top: 2px; }

/* ------------------------------------------------------------------- controls */
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface);
                          border: 1px solid var(--line); border-radius: var(--radius-sm);
                          padding: 7px 9px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft);
                                            border-color: var(--accent); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); padding: 0; }
button, .button-link { font: inherit; cursor: pointer; border-radius: var(--radius-sm);
                       padding: 7px 15px; border: 1px solid transparent;
                       background: var(--accent); color: var(--panel); text-decoration: none;
                       display: inline-block; }
button:hover, .button-link:hover { filter: brightness(1.06); }
button.secondary, .button-link { background: var(--panel); color: var(--ink); border-color: var(--line); }
button.secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }
button.danger, .button-link.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
/* An action that cannot be taken back reads as one before it is pressed (B159). */
button.secondary.danger { background: var(--panel); color: var(--warn); border-color: var(--warn); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
form.inline { display: inline; }
button.link:hover { filter: none; opacity: .8; }
label { font-size: .82rem; color: var(--muted); }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.row-form label, .card label { display: flex; flex-direction: column; gap: 4px; }
.card fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm);
                 display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.card legend { color: var(--muted); font-size: .76rem; padding: 0 6px; }
/* Hidden means hidden, whatever a class says about display: the bulk bar's
   display: flex had kept it on screen at nothing ticked (decision B238). */
[hidden] { display: none !important; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Forms are one grid everywhere (decision B112). Fields sit in even columns
   that reflow with the width, the notes and the buttons span the row, and every
   form in the application therefore has the same rhythm without forty templates
   each choosing their own. The filter row, the inline row actions and the
   sign-in card opt out: they are a line of controls, not a form to fill in. */
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px; align-items: end; }
/* A form's own button closes the form on a row of its own, at its natural
   width, rather than taking a field's place in the grid (B159). */
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > button {
  grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) {
  /* A file name and a paragraph need more than one field's width. */
  main form:not(.entry-form) > label:has(input[type="file"]),
  main form:not(.entry-form) > label:has(textarea) { grid-column: span 2; }
}
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > p,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > h3,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > table,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > details,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > fieldset,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > .actions,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > .row-form,
main form:not(.filters):not(.inline):not(.row-form):not(.auth):not(.bulk-form) > input[type="hidden"] {
  grid-column: 1 / -1; }
main form label { display: flex; flex-direction: column; gap: 4px; }
main form label input, main form label select, main form label textarea { width: 100%; }
/* Anything written in prose is a text area that can be dragged taller, and one
   holding a draft opens tall enough to read without dragging (decision B129).
   A field that has to be read through a single line is a field nobody checks. */
main form label textarea { resize: vertical; min-height: 2.4rem; line-height: 1.45; }
main form label.wide { grid-column: 1 / -1; }
main form fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
                     gap: 10px 14px; align-items: end; border: 1px solid var(--line);
                     border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
main form fieldset > p, main form fieldset > legend, main form fieldset > .row-form,
main form fieldset > .actions { grid-column: 1 / -1; }
main form .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* A form of any length is sections: boxes side by side, each holding the fields
   that belong together, their labels over their fields (decision B159). The
   buttons close it on a row of their own. */
main .form-sections { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px;
                      align-items: stretch; }
main .form-sections > * { flex: 1 1 340px; min-width: 0; box-sizing: border-box; }
main .form-sections > .span { flex-basis: 100%; }
main .form-sections > [hidden], main form [data-kinds][hidden] { display: none; }
main .form-sections > fieldset { display: grid; align-content: start; gap: 10px 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0;
    padding: 12px 16px 14px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); }
main .form-sections > fieldset > legend { font-size: .76rem; font-weight: 600; color: var(--ink);
                                          padding: 0 6px; }
main .form-sections > fieldset > .wide,
main .form-sections > fieldset > p, main .form-sections > fieldset > .note-tip,
main .form-sections > fieldset > details { grid-column: 1 / -1; }
main .form-sections > fieldset.span { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
main .form-sections > details { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px 16px; }
main .form-sections > details > summary { font-size: .8rem; font-weight: 600; cursor: pointer; }
main .form-sections .stack { display: grid; gap: 10px 14px; margin-top: 10px;
                             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.two-up > div { background: var(--panel); border: 1px solid var(--line);
                border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.two-up > div > h2:first-child { margin-top: 0; }
.two-up > section { background: var(--panel); border: 1px solid var(--line); margin: 0;
                    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.two-up > section > h2:first-child { margin-top: 0; }
main > .two-up { margin: 14px 0; align-items: start; }
.period-now { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 4px 0 10px; }
.period-now strong { font-size: 1.15rem; }
main > section.two-up { background: none; border: 0; box-shadow: none; padding: 0; }

/* --------------------------------------------------------------------- tables */
/* The corners are rounded cell by cell rather than by clipping the table, so a
   row action can open a small panel over the row without the table cutting it
   off at its own edge (decision B113). */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel);
        border: 1px solid var(--line); border-radius: var(--radius); }
thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.cards .card table { box-shadow: none; }
th, td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
     background: var(--surface); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; font-size: .72rem; color: var(--muted); }
tr.muted td { color: var(--muted); }
/* The trade whose screenshots are open, so the row and the images below it read
   as one thing (decision B133). */
tr.chosen td { background: var(--surface); font-weight: 600; }
td code { font-size: .74rem; word-break: break-all; }

/* ----------------------------------------------------------------------- tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; padding: 0; border: 0; }
.tabs a { text-decoration: none; font-size: .84rem; color: var(--muted); padding: 6px 13px;
          border-radius: 999px; border: 1px solid transparent; }
.tabs a:hover { background: var(--surface); }
.tabs a.current, .tabs a.tab-active { background: var(--accent-soft); color: var(--accent);
                                      font-weight: 600; border-color: var(--accent); }

/* ---------------------------------------------------------------- notifications
   A server message is a notification, not a block that pushes the page down at
   the user's instruction (B111): it floats over the corner, dismisses itself and
   never moves what is being read. Without scripting it simply stays until the
   next page, which is what it did before. */
.flashes { list-style: none; padding: 0; margin: 0; position: fixed; right: 18px; bottom: 18px;
           width: min(380px, calc(100vw - 36px)); display: grid; gap: 8px; z-index: 60; }
.flashes li { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
              border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); padding: 10px 34px 10px 13px;
              font-size: .86rem; position: relative; animation: toast-in .18s ease-out; }
.flashes li.error { border-left-color: var(--warn); }
.flashes li.ok { border-left-color: var(--up); }
.flashes .dismiss { position: absolute; top: 6px; right: 8px; background: none; border: 0;
                    color: var(--muted); padding: 2px 5px; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A question with one answer is asked where it is pressed (decision B113). The
   panel floats over the row rather than opening a page or sitting open on every
   row of the queue. With no scripting it still opens and closes on the press,
   because it is a details element and nothing more. */
details.popover { position: relative; display: inline-block; }
details.popover > summary { list-style: none; cursor: pointer; display: inline-block;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
    color: var(--ink); padding: 4px 12px; font-size: .8rem; }
details.popover > summary::-webkit-details-marker { display: none; }
details.popover > summary:hover { border-color: var(--accent); color: var(--accent); }
details.popover[open] > summary { border-color: var(--accent); color: var(--accent); }
/* It keeps the one form grid above, which at this width is a single column. */
/* A row's menu: the actions that are not its next step, one under another. */
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px;
    display: grid; gap: 10px; text-align: left; white-space: normal; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
    padding: 12px 13px; }
.menu-panel form.row-form { margin: 0; align-items: flex-end; }
.menu-panel form.row-form + form.row-form { border-top: 1px solid var(--line); padding-top: 10px; }
.menu-panel label { flex: 1 1 140px; }
td.nextstep form.attach { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
td.nextstep input[type="file"] { max-width: 210px; font-size: .78rem; }
td.rowmenu { width: 1%; }
main form.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    width: 262px; text-align: left;
    white-space: normal; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 12px 13px;
    animation: toast-in .14s ease-out; }
main form.pop::before { content: ""; position: absolute; top: -5px; right: 16px; width: 8px;
    height: 8px; background: var(--panel); border-left: 1px solid var(--line);
    border-top: 1px solid var(--line); transform: rotate(45deg); }
/* Bulk selection (decision B173): the bar keeps to the foot of the screen while
   the list scrolls, and its questions open upward, above it. */
th.pick, td.pick { width: 1%; padding-right: 0; }
.bulk-form { display: contents; }
.bulkbar { position: sticky; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; margin-top: 10px; padding: 9px 12px; background: var(--panel);
    border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.bulkbar > strong { margin-right: 6px; font-size: .85rem; }
.bulkbar select { max-width: 13rem; }
.bulkbar .pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 40; width: 280px;
    display: grid; gap: 8px; text-align: left; white-space: normal; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
    padding: 12px 13px; }
.bulkbar .wide-pop .pop { width: min(560px, calc(100vw - 48px)); }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pop-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; border: 0; padding: 0; margin: 0; }
.bulkbar details.popover > summary { font-size: inherit; padding: 7px 15px; }
/* A dropdown of boxes to tick (issues after 7.8.0, item 9). */
.field-label { display: grid; gap: 4px; font-size: .85rem; }
details.picker > summary { min-width: 14rem; padding: 7px 12px; font-size: .9rem; list-style: none; cursor: pointer; }
/* One mark, the picker's own, turning as it opens: the browser's triangle beside
   it read as a stray dot (7.15.0, item 101). */
details.picker > summary::-webkit-details-marker { display: none; }
details.picker > summary::after { content: " \25BE"; color: var(--muted); }
details.picker[open] > summary::after { content: " \25B4"; }
details.picker .pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: 280px;
    display: grid; gap: 6px; max-height: 18rem; overflow-y: auto; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
    padding: 10px 12px; }
.bulkbar button:disabled { opacity: .4; cursor: not-allowed; filter: none; }
/* A button that cannot be pressed yet looks it, everywhere (B226). */
button:disabled { opacity: .45; cursor: not-allowed; }
.bulkbar .pop-tags label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px;
    white-space: nowrap; }
.bulkbar .pop-tags input { width: auto; margin: 0; }
.pick-matching { flex-basis: 100%; margin: 0; font-size: .85rem; }
.flashes form.undo { margin-left: 8px; }
.theme-choice .options li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; }

/* An explanatory note folds behind a small info mark (decision B110). */
details.note-tip { display: inline-block; margin: 4px 0; }
details.note-tip > summary { list-style: none; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; width: 17px; height: 17px;
    border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: .68rem;
    font-style: italic; font-family: Georgia, serif; }
details.note-tip > summary::-webkit-details-marker { display: none; }
details.note-tip > summary:hover { border-color: var(--accent); color: var(--accent); }
details.note-tip[open] > summary { border-color: var(--accent); color: var(--panel);
    background: var(--accent); }
/* One mark per section, beside its heading (B159). It opens as a bubble by the
   mark (B237), placed on the screen by app.js so a card that scrolls its
   overflow cannot clip it; without scripting the note is never folded. */
details.note-tip.in-heading, details.note-tip.in-heading[open] { display: inline; margin: 0 0 0 6px; }
details.note-tip[open] > .note-body { position: fixed; z-index: 45; margin: 0; max-height: 60vh;
    width: max-content;
    overflow-y: auto; background: var(--panel); color: var(--ink); box-sizing: border-box;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
details.note-tip[open] > .note-body .note { color: var(--ink); }
details.note-tip.in-heading > summary { vertical-align: 2px; }
.note-body { display: block; margin: 6px 0 4px; padding: 10px 12px; background: var(--surface);
             border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .82rem;
             font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none;
             color: var(--muted); }
.note-body .note { margin: 0 0 6px; }
.note-body .note:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .shell { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
           border-right: 0; border-bottom: 1px solid var(--line); }
  .rail { flex-direction: row; flex-wrap: wrap; }
  /* The title on a line of its own, then Environment and Markets side by side
     (decision B223), then search: two dropdowns that belong together. */
  .shell-top, .rail-search { flex-basis: 100%; }
  .switcher { flex: 1 1 140px; }
  .logout { margin-top: 0; }
  /* On a phone the panel folds behind the menu button, so a page starts with
     the page rather than with the panel (decision B237). The desktop's
     collapsed strip does not apply here: the menu shows names, not initials. */
  body:not(.nav-open) .shell > :not(.shell-top) { display: none; }
  .rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); flex-basis: 100%; }
  body.nav-collapsed, html[data-nav="collapsed"] body.has-rail { --rail-width: auto; }
  body.nav-collapsed .brand, html[data-nav="collapsed"] .brand,
  body.nav-collapsed .switcher-label, html[data-nav="collapsed"] .switcher-label,
  body.nav-collapsed .rail .label, html[data-nav="collapsed"] .rail .label,
  body.nav-collapsed .logout .label, html[data-nav="collapsed"] .logout .label { display: revert; }
  body.nav-collapsed .rail a, html[data-nav="collapsed"] .rail a { justify-content: flex-start; padding: 7px 10px; }
  main.with-rail { margin-left: 0; padding: 16px 14px 48px; }
  .pagehead { flex-direction: column; }
  .headright { align-items: flex-start; }
  .filters { justify-content: flex-start; }
}
/* Back (a real link, so it works without scripting), the line saying what was
   restored, a report strip that wraps rather than scrolling, and the charts a
   finished setup shows in place of an upload (decisions B136 and B137). */
.back { display: inline-block; margin-bottom: 10px; font-size: .85rem; color: var(--muted);
        text-decoration: none; }
.back:hover { color: var(--text); }
.restored { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius);
            background: var(--surface); font-size: .85rem; }
.kpis.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.printonly { display: none; }
tr.shots td { padding-top: 4px; }
.shot.small { display: inline-block; margin: 0 10px 4px 0; max-width: 240px; }
.shot.small img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.shot.small figcaption { font-size: .7rem; color: var(--muted); }

/* A list longer than a page says so and links to the next (decision B151). */
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; }
/* What a filtered list is showing, in one line above it. */
.scope-banner { padding: 8px 12px; border-left: 3px solid var(--accent);
                background: var(--surface); border-radius: var(--radius-sm); }
table.compact { width: auto; min-width: 100%; font-size: .8rem; box-shadow: none; }
.rail-search { padding: 0 12px 10px; }
.rail-search input { width: 100%; }
body.nav-collapsed .rail-search, [data-nav="collapsed"] .rail-search { display: none; }

/* The UI pass (decision B237). A row's own label reads as a label, not as a
   column heading; a total row is set apart; a dark theme asks the browser for
   dark controls, so a date picker's icon is not dark on dark; and an instrument
   list's narrowing box sits beside the list on one row. */
tbody th, tfoot th { font-size: inherit; text-transform: none; letter-spacing: normal;
                     color: var(--ink); background: transparent; font-weight: 500; }
tfoot th, tfoot td { font-weight: 700; }
tbody th[colspan] { font-weight: 700; }
tr.total th, tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
[data-theme="dark"], [data-theme="cyberpunk"] { color-scheme: dark; }
.type-filter-pair { display: flex; gap: 4px; align-items: stretch; }
.type-filter-pair .type-filter { width: 6.5em; flex: 0 0 auto; }
/* The list keeps room for a symbol wherever the pair is put (B250): with no
   floor, a narrow cell gave the box its width and cut the list to "Choo". */
.type-filter-pair select { flex: 1 1 auto; min-width: 8em; }
.form-sections label:has(.type-filter-pair) { grid-column: span 2; }
/* In a filter bar the list reads All until it is used, so it needs less. */
.filters .type-filter-pair select { min-width: 5em; }
/* The account form's market table (B237): one row a market, inputs in cells. */
main .form-sections > fieldset > .terms { grid-column: 1 / -1; overflow-x: auto; }
.terms-table td { padding: 4px 6px; }
.terms-table td input { width: 100%; min-width: 5.5em; box-sizing: border-box; }
.terms-table tbody th { white-space: nowrap; }
.terms-table tbody th .muted { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
.terms-table tbody th select { min-width: 12em; }
/* Planning's stages and its tools, one strip, two groups (B237). */
.tabs .tab-set { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs .tab-set.tools { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.tabs .tabs-group { display: inline-flex; align-items: center; margin-right: 4px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); }
.terms-table td > .muted { white-space: nowrap; font-size: .76rem; }
/* An update installed while a page was open, said once at the top (B238). */
.update-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
  font-size: .86rem; max-width: calc(100vw - 32px); }
/* A button that opens another view, under the overview's part it summarises (B251). */
.inline-switch { margin-top: 10px; }