/* AssetSafety shared stylesheet.
   The brand-token block and the base rules below were moved here verbatim (same meaning,
   only the indentation changed) from the inline <style> in core/templates/base.html as part
   of UX foundation slice F1. Nothing third-party: no CDN, no web font, no icon pack. */
/* Brand palette (AssetSafety lockup, 2026-10-02). Everything is a token here, so the next
   brand change is this one block. No external fonts, no CDN, no icon pack: nothing third-party. */
:root {
  --bg: #070b12;             /* brand navy: matches the logo artwork's own background */
  --surface: #0e1624;
  --surface-2: #16223a;
  --btn-secondary: #1c2942;
  --border: #24334d;
  --border-soft: #18233a;
  --text: #e6edf5;
  --heading: #f2f6fb;
  --muted: #93a1b5;
  --faint: #78889f;
  --link: #7fd1e8;           /* brand cyan */
  --link-hover: #a8e4f4;
  --accent: #e8a33d;         /* brand amber: primary actions */
  --accent-hover: #f0b455;
  --accent-soft: #e8a33d26;
  --on-accent: #0a0f19;      /* text on amber */
  --warn: #e0763a;           /* orange-red, deliberately clear of the amber accent */
  --warn-border: #a4522a;
  --warn-soft: #a4522a26;
  --error: #f85149;
  --error-border: #da3633;
  --error-soft: #241318;
  --ok: #3fb950;
  --ok-border: #238636;
}
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.layout { display: flex; align-items: flex-start; min-height: 100vh; }
main { flex: 1; min-width: 0; max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
/* Table pages opt into the whole window: their own pane scrolls, the page never does. */
main.wide { max-width: none; }
h1 { margin: 0 0 .25rem; font-size: 1.75rem; color: var(--heading); }
h2 { margin: 1.75rem 0 .5rem; font-size: 1.125rem; color: var(--heading); }
a { color: var(--link); } a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Following the skip link focuses <main tabindex=-1>; a ring round the whole content
   column is noise, so main alone opts out (review item 3, the shared ring stays for controls). */
main:focus-visible { outline: none; }
nav { margin-bottom: 1rem; font-size: .9375rem; }  /* the two webhook-edit breadcrumbs */
.muted { color: var(--muted); } .small { font-size: .875rem; }
input[type=search] { padding: .4rem .6rem; width: min(26rem, 100%); background: var(--surface);
                     color: var(--text); border: 1px solid var(--border); border-radius: .35rem; }
button { padding: .4rem .8rem; background: var(--accent); color: var(--on-accent); border: 0; border-radius: .35rem;
         cursor: pointer; font: inherit; font-weight: 600; }
button:hover { background: var(--accent-hover); }
button.secondary { background: var(--btn-secondary); color: var(--text); font-weight: 400; }
button.secondary:hover { background: var(--surface-2); color: var(--heading); }
button.ok { background: var(--ok-border); color: #fff; font-weight: 400; }
/* Destructive actions (delete, switch off, remove access): red outlined at rest, filled red on
   hover/focus. Text #f85149 on the page background #070b12 is 5.9:1; the filled state is white
   on #da3633 at 4.6:1. The shared focus ring (button:focus-visible, above) is unchanged. */
button.danger { background: transparent; color: var(--error); border: 1px solid var(--error-border); font-weight: 400; }
button.danger:hover, button.danger:focus-visible { background: var(--error-border); color: #fff; }
details { margin: .15rem 0; }
details > summary { cursor: pointer; }
details.loc { border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .75rem; margin: .5rem 0; background: var(--surface); }
details.loc > summary { font-weight: 600; color: var(--heading); }
.section { margin: .35rem 0 .35rem .25rem; }
.section-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
ul.items { list-style: none; margin: .1rem 0; padding-left: 1rem; border-left: 1px solid var(--border); }
ul.items li { margin: .1rem 0; }
.qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.custom { color: var(--accent); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

/* Sidebar (left). Phones: folds behind the ☰ button; no JavaScript needed for that. */
.sidebar { position: sticky; top: 0; flex: 0 0 14.5rem; height: 100vh; overflow-y: auto; box-sizing: border-box;
           padding: 1.25rem .9rem 2rem; background: var(--bg); border-right: 1px solid var(--border-soft); font-size: .9375rem; }
.sidebar .brand { display: block; margin: 0 0 .9rem; }
.sidebar .brand img { display: block; width: 100%; height: auto; }
/* EVE time (UTC) + the visitor's local time. EVE time is server-rendered; local needs the browser. */
.sidebar .clock { margin: -.4rem .5rem .6rem; font-size: .8125rem; color: var(--muted);
                  font-variant-numeric: tabular-nums; }
/* The date strip must not overflow the 14.5rem sidebar: the row is a flex line and the
   date (white-space: nowrap) could not shrink, so its box ran ~3px past the sidebar edge.
   Letting the row wrap drops the date onto a second line when it does not fit, and it
   still sits on one line when there is room. */
.sidebar .clock > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.sidebar .clock > div[hidden] { display: none; }
.sidebar .clock-label { color: var(--faint); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.sidebar .clock time { color: var(--heading); }
.sidebar .clock-date { margin-left: auto; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.sidebar .group { margin: 1.1rem .5rem .3rem; font-size: .75rem; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .06em; color: var(--faint); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a, .sidebar li button.link { display: block; width: 100%; box-sizing: border-box; padding: .3rem .5rem;
                  border-radius: .35rem; color: var(--text); text-decoration: none; text-align: left; background: none;
                  font: inherit; }
.sidebar li a:hover, .sidebar li button.link:hover { background: var(--surface); color: var(--heading); }
.sidebar li a[aria-current=page] { background: var(--accent-soft); color: var(--heading); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar li.sub a { padding-left: 1.25rem; font-size: .875rem; }
/* One collapsible block per corp (F2): the name is the <summary> styled like a sidebar link, its
   pages nested beneath; collapsed unless this page belongs to that corp. The marker is drawn
   (▸ closed / ▾ open) so the block reads the same in every browser. */
.sidebar details.nav-corp { margin: .15rem 0 .35rem; }
.sidebar details.nav-corp > summary { display: block; padding: .3rem .5rem; border-radius: .35rem;
                  color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
.sidebar details.nav-corp > summary::-webkit-details-marker { display: none; }
.sidebar details.nav-corp > summary::before { content: "\25B8"; display: inline-block; width: 1rem;
                  color: var(--faint); font-size: .8rem; }
.sidebar details.nav-corp[open] > summary::before { content: "\25BE"; }
.sidebar details.nav-corp > summary:hover { background: var(--surface); color: var(--heading); }
.sidebar details.nav-corp > ul { margin: .1rem 0 0 .5rem; }
.sidebar .danger { color: var(--error) !important; }
.switcher { margin: 0 .5rem .5rem; }
.switcher label { display: block; margin-bottom: .2rem; font-size: .75rem; color: var(--faint); }
.switcher select { width: 100%; padding: .3rem .4rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: .35rem; }
.switcher button { margin-top: .35rem; padding: .25rem .6rem; font-size: .8125rem; }
#nav-toggle, .nav-button { display: none; }
/* Phones: the checkbox stays a real, focusable control (Tab, then Space), only visually
   hidden; its label is the visible button and shows the focus ring. */
@media (max-width: 52rem) {
  .layout { display: block; }
  #nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  #nav-toggle:focus-visible + .nav-button { outline: 2px solid var(--link); outline-offset: 2px; }
  .nav-button { display: inline-block; margin: .75rem 1.25rem 0; padding: .35rem .7rem; border: 1px solid var(--border);
                border-radius: .35rem; background: var(--surface); color: var(--text); cursor: pointer; }
  .sidebar { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  #nav-toggle:checked ~ .layout .sidebar { display: block; }
  main { padding-top: 1rem; }
}

/* =========================================================================
   UX F1 component layer (2026-10-21, plan 2026-10-20-ux-foundation.md).
   Names below are fixed: later slices and new tools use them. Shapes are taken
   from concept A (as-concepts/concept-a/style.css); every value is a token above.
   ========================================================================= */

/* Skip link: first element in <body>, visually hidden until focused, then shown
   top-left above everything (base.html pushes <main> ~33 Tab presses away). */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: .5rem; top: .5rem; z-index: 30; background: var(--surface); color: var(--heading);
                   padding: .4rem .8rem; border-radius: .35rem; outline: 2px solid var(--link); outline-offset: 2px; }

/* Buttons: one filled amber `primary` per section; `secondary` is the outlined-on-dark look
   the app already uses (link selectors use a:where(...) so a page's own .button styles still win); `danger` (red, added in F0) is unchanged. `a.button` lets a link that
   is really an action look like a button. */
a:where(.button) { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 0;
           border-radius: .35rem; background: none; color: var(--text); font: inherit; font-weight: 400;
           line-height: 1.2; cursor: pointer; text-decoration: none; }
button.primary, a:where(.button.primary) { background: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover, a:where(.button.primary):hover { background: var(--accent-hover); color: var(--on-accent); }
a:where(.button.secondary) { background: var(--btn-secondary); color: var(--text); }
a:where(.button.secondary):hover { background: var(--surface-2); color: var(--heading); }

/* Page header: title + one line of help + a right-aligned actions slot. Stacks on phones. */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
               gap: .75rem 1rem; margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.page-header h1 { margin: 0 0 .2rem; font-size: 1.75rem; color: var(--heading); }
.page-header .help { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 46rem; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 52rem) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .actions { justify-content: flex-start; }
}

/* Chips: short states ("On"/"Off", "Running"/"Stopped"). Outline ring keeps them legible.
   Text contrast: --ok #3fb950 on the page background #070b12 = 7.76:1 (7.13:1 on --surface),
   --warn #e0763a = 6.40:1 (5.89:1), --error #f85149 = 5.88:1 (5.41:1). All >= 4.5:1. */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border-radius: .3rem;
        font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.chip.ok { color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-border); }
.chip.warn { color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-border); }
.chip.error { color: var(--error); box-shadow: inset 0 0 0 1px var(--error-border); }

/* Empty state: a muted box that says what is missing and names the next step.
   Body text --muted #93a1b5 on --surface #0e1624 = 6.91:1; title --heading #f2f6fb on
   --surface = 16.70:1 (both >= 4.5:1). */
.empty { border: 1px dashed var(--border); border-radius: .4rem; padding: .9rem 1rem; background: var(--surface); }
.empty .title { margin: 0 0 .25rem; color: var(--heading); font-weight: 600; }
.empty p { margin: 0 0 .5rem; color: var(--muted); font-size: .9375rem; }
.empty p:last-child { margin-bottom: 0; }
.empty .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* Cards / cards grid. Pages that already define these keep their own (their <style> comes
   after this file, so their values win); this is the shared default for new tools. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: .75rem 0; }
.card { border: 1px solid var(--border); border-radius: .4rem; padding: .75rem 1rem; background: var(--surface); }

/* A wide table scrolls inside its own pane, so the page itself never scrolls sideways. */
.table-wrap { overflow-x: auto; max-width: 100%; }

/* Available to assistive tech, out of the visual layout. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   UX F3 "pages" (2026-10-26, plan 2026-10-20-ux-foundation.md).
   Phone reflow for wide tables: under 52rem each row becomes a card and every
   cell is labelled from its own data-label attribute (the header row is hidden
   to assistive tech only, so the labels are still announced). Shared: F4 reuses
   it. The header row and every cell carry the markup on the page itself.
   ========================================================================= */
@media (max-width: 52rem) {
  table.reflow thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                       clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  table.reflow, table.reflow tbody, table.reflow tr, table.reflow td { display: block; width: 100%; }
  table.reflow tr { border: 1px solid var(--border); border-radius: .4rem; padding: .5rem .75rem; margin: .5rem 0; background: var(--surface); }
  table.reflow td { border: 0; padding: .2rem 0; }
  table.reflow td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); }
  /* The row carries horizontal padding and width:100%; border-box keeps it inside
     the viewport (content-box would push ~1.5rem past it at 390px). */
  table.reflow tr { box-sizing: border-box; }
}

/* =========================================================================
   UX F4 "tables" (2026-10-26, plan 2026-10-20-ux-foundation.md).
   A dense table that scrolls inside its own pane, so the page never scrolls
   sideways: the header row sticks to the top of the pane and the first column
   (the item name) sticks to its left edge while panning. The sort control is
   still a link (the sort is a GET navigation) but reads as a button. Shared:
   later pages reuse all of this.
   ========================================================================= */

/* The scroll pane: a long list scrolls here, not the page. */
.table-pane { overflow: auto; max-height: 70vh; }

/* Dense rows: tighter padding, the text sizes stay as they are. Desktop only (in the media
   block below): on phones the F3 reflow padding must win, or each card cell is 1rem wider
   than its card and the pane scrolls sideways (F4 review finding 2). */

/* Sort control: the label plus a space and the direction arrow, dashed at rest
   (a link you can click), solid on hover. The arrow lives in its own span. */
th a.sort { display: inline-flex; gap: .25rem; color: inherit; text-decoration: none;
            border-bottom: 1px dashed var(--border); }
th a.sort:hover { border-bottom-style: solid; }

/* Wider than a phone: the header sticks to the top of the pane and the first
   cell of every row sticks to the left, so the item name stays in view. */
@media (min-width: 52.01rem) {
  table.dense th, table.dense td { padding: .3rem .4rem; }   /* .4 (was .5): the orders table fits 1440 px */
  div.table-pane > table > thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
  div.table-pane > table td:first-child, div.table-pane > table th:first-child {
    position: sticky; left: 0; background: var(--bg); }
  div.table-pane > table > thead th:first-child { background: var(--surface); z-index: 3; }   /* corner cell */
}

/* Copy-price buttons are filled cyan (option D): they are the table's own action,
   not the page's primary one. This rule is last, so a `secondary` class on the
   stock page's multibuy button cannot override it. Contrast: --bg (#070b12) on
   --link (#7fd1e8) is 11.44:1, so the label stays legible. */
button.copyprice { background: var(--link); color: var(--bg);
                   border: 1px solid var(--link); font-weight: 600; }
button.copyprice:hover, button.copyprice:focus-visible {
  background: var(--link-hover); border-color: var(--link-hover); }

/* The History disclosure opens in the cell it belongs to, never wider than it
   (a phone reflow card is 390px at most). */
details.hist { margin-top: .15rem; max-width: 100%; }
details.hist summary { cursor: pointer; }

/* K5b: calendar app link */
.feed input[type="text"] { width: 100%; max-width: 48rem; font-family: monospace; }