/**
 * Surf Shack — owner console skin.
 *
 * GENERATED by tools/genowner.py. Do not hand-edit: regenerate.
 *
 * WHY THIS IS A SEPARATE FILE. Another agent owns
 * `includes/modules/owner-console/owner-console.php`. Nothing here touches it. This
 * reads their CSS and emits overrides keyed to THEIR selectors, so if they rename or
 * delete a rule ours simply stops matching — it cannot break their markup. Worst case
 * is a dead rule. Regenerate after they land changes.
 *
 * FIRST, THE GOOD NEWS. The console is in good shape. It declares the Product tokens
 * on `.ssr-own` with the correct values and uses them throughout — `var(--muted)`,
 * `var(--hairline)`, `var(--brand)`, `var(--recessed)`. Whoever built it followed the
 * spec. There is no colour sweep here of the kind the staff portal needed; 126 rules
 * produced 13 overrides.
 *
 * ---------------------------------------------------------------------------
 * TYPE — 10 fixes. Product scale is 12 · 14 · 17 · 20 · 24. The file ran 11, 12, 13,
 * 14, 17, 20 and 24; only 13px (x7) and 11px (x3) were off it, and they move to 14
 * and 12. Everything else was already on the scale.
 *
 * RADIUS — 5 fixes, all to 4px, the same rule the staff portal and /order/ now use:
 * above 4px and below 100px becomes 4px. 999px pills stay, and so does the 3px on the
 * progress-bar fill — that is a join inside a 4px container, not a corner of its own.
 * `0 0 14px 14px` on the top bar becomes `0 0 4px 4px`, keeping its two-corner shape.
 *
 * ---------------------------------------------------------------------------
 * COLOUR — 10 fixes, and this is the part that could have gone wrong.
 *
 * Every hardcoded pair in the console ALREADY PASSES AA. So this is a vocabulary fix,
 * not a contrast fix, and a vocabulary fix that breaks contrast is strictly worse than
 * the drift it removes. Each candidate was measured both ways before it moved:
 *
 *   .ssr-own-tag.device    #8A4A05 on #FDF0E4  6.13  ->  #8A5A22 on #FDF3E7  5.37  MOVED
 *   .ssr-own-tag.cash      #2E6B33 on #EAF3EA  5.66  ->  #0E6B55 on #E7F4F0  5.72  MOVED
 *   .ssr-own-st.completed  #2E6B33 on #FFFFFF  6.43  ->  #0E6B55 on #FFFFFF  6.46  MOVED
 *   .ssr-own-tag.online    #2C6E71 on #E7F1F1  5.10  ->  #357B7D on #E7F4F0  4.34  HELD
 *
 * Ink and tint always move together, in the same rule, so there is no state in which a
 * moved ink sits on an unmoved ground.
 *
 * ---------------------------------------------------------------------------
 * FLAGGED, NOT FIXED — a real gap in the system, not in this console.
 *
 * #2C6E71 is a fourth teal and does not belong. But the system's readable teal on the
 * system's mint tint — #357B7D on #E7F4F0 — measures 4.34:1, which FAILS at the 12px
 * this tag uses. There is currently no on-system teal-on-mint pair that passes, so the
 * console's own values stay and the system needs one. That is a design decision, not
 * something a generator should make.
 *
 * The two on-dark values in the top bar, #CFE0E0 (11.05:1) and #9FB8B8 (7.2:1), are
 * also off-token and also left alone: the Product system declares no "text on dark"
 * values at all, so there is nothing on-system to move them to. Same gap, other end.
 *
 * ---------------------------------------------------------------------------
 * The hand-authored layer at the foot of this file adds keyboard focus (the console
 * has zero `:focus` rules), a 40px tap target, and native-control styling that matches
 * nothing yet — v1 is read-only by design, and those rules are there so the first date
 * picker to land is already in the system instead of arriving as a browser default.
 *
 * @package SurfShack\Core
 */

.ssr-own-card{border-radius:4px !important}
.ssr-own-note{border-radius:4px !important}
.ssr-own-note-b strong{font-size:14px !important}
.ssr-own-note-b p{font-size:14px !important}
.ssr-own-note-x{font-size:24px !important}
.ssr-own-quiet-line{border-radius:4px !important}
.ssr-own-attgo{font-size:14px !important}
.ssr-own-btn{border-radius:4px !important}
.ssr-own-flabel{font-size:12px !important}
.ssr-own-sumbar strong{font-size:14px !important}
.ssr-own-field>span{font-size:12px !important}
.ssr-own-sel,.ssr-own-input{border-radius:4px !important}
.ssr-own-when{font-size:14px !important}
.ssr-own-step{border-radius:4px !important;font-size:14px !important}
.ssr-own-fbtn{border-radius:4px !important;font-size:14px !important}
.ssr-own-book>summary{border-radius:4px !important;font-size:14px !important}
.ssr-own-sop{font-size:14px !important}
.ssr-own-sval{font-size:14px !important}
.ssr-own-sval small{font-size:12px !important}
.ssr-own-fcount{font-size:12px !important}
.ssr-own-fg legend{font-size:12px !important}
.ssr-own-fo{font-size:14px !important}
.ssr-own-go{border-radius:4px !important;font-size:14px !important}
.ssr-own-clear{font-size:14px !important}
.ssr-own-bl{font-size:14px !important}
.ssr-own-bv{font-size:14px !important}
.ssr-own-rank li{font-size:14px !important}
.ssr-own-table{font-size:14px !important}
.ssr-own-tag{font-size:12px !important}
.ssr-own-tag.device{background:#FDF3E7 !important;color:#8A5A22 !important}
.ssr-own-tag.cash{background:#E7F4F0 !important;color:#0E6B55 !important}
.ssr-own-st{font-size:12px !important}
.ssr-own-st.completed{color:#0E6B55 !important}
.ssr-own-pgbtns a{border-radius:4px !important}

/* ===========================================================================
 * HAND-AUTHORED LAYER — things the console has no rule for at all.
 * Scoped by enqueue: this stylesheet loads on /owner/* only.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * KEYBOARD FOCUS. The console has zero `:focus` rules — same gap the staff
 * portal had. This one matters differently: the owner console is the only Surf
 * Shack surface whose primary device is a desktop computer with a keyboard,
 * which is exactly where invisible focus is worst.
 *
 * #3D8D90 at 3px is 3.88:1 on white, past the 3:1 bar for a non-text indicator.
 * On the dark header bar the teal ring would disappear, so the top bar gets a
 * white ring instead — 17.6:1 on #16292F.
 *
 * `:focus-visible` keeps it off mouse clicks.
 * ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #3D8D90 !important;
  outline-offset: 2px !important;
}
.ssr-own-top a:focus-visible, .ssr-own-top button:focus-visible {
  outline-color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * NATIVE CONTROLS. The console currently renders none — no <select>, <input>
 * or <textarea> anywhere in owner-console.php, because v1 is read-only by
 * design (the spec put settings explicitly out of scope).
 *
 * These rules are here for the date-range picker and the search field that the
 * Business and People screens will need, so the first one that lands is already
 * in the system rather than arriving as a browser default the way the staff
 * portal's did. They cost nothing until an element exists to match them.
 * ------------------------------------------------------------------------- */
.ssr-own select,
.ssr-own input[type="text"], .ssr-own input[type="search"],
.ssr-own input[type="number"], .ssr-own input[type="date"],
.ssr-own input[type="email"], .ssr-own textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #1F3E4A);
  background: var(--ground, #fff);
  border: 1px solid var(--hairline, #D8E6E6);
  border-radius: 4px;
  padding: 9px 12px;
  min-height: 40px;
  box-sizing: border-box;
  transition: border-color .16s cubic-bezier(.22,.61,.36,1);
}
.ssr-own select {
  padding-right: 34px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A7482' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ssr-own input::placeholder, .ssr-own textarea::placeholder {
  color: var(--muted, #5A7482); opacity: 1;
}
.ssr-own input[type="checkbox"], .ssr-own input[type="radio"] {
  accent-color: #3D8D90; width: 18px; height: 18px; cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * TAP TARGET. `.ssr-own-btn` is the console's only button and it sits at
 * `padding:7px 14px` on 14px type — about 31px tall. 40px matches the control
 * floor above so a field and its button line up, and it is the same value used
 * in the staff portal.
 *
 * Desktop-first is not an excuse: the spec says this has to work on his phone,
 * "because owners check numbers in bed."
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-btn, .ssr-own .ssr-own-pgbtns a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
 * THE CONSOLE WAS BEING SQUEEZED INTO A BLOG COLUMN.
 *
 * `.ssr-own` declares `max-width:1180px`. Measured on the live Orders screen it was
 * rendering at 800px in a 1041px window, so the orders table had ~722px to fit six
 * columns including an email address and a payment-method tag. That is the single
 * biggest reason this screen reads as cramped.
 *
 * The cap is Hello Elementor's, in theme.css:
 *     body:not([class*="elementor-page-"]) .site-main { max-width: 500/600/800px }
 * a reading measure for a blog post. `/owner/` is not built in Elementor, so it
 * inherits a constraint meant for prose and applies it to a data console.
 *
 * Releasing it here rather than converting the page to an Elementor template: the
 * console is PHP-rendered by owner-console.php and should stay that way, and this
 * stylesheet is enqueued on /owner/* only, so `.site-main` unqualified cannot reach
 * any other page. `!important` because theme.css and the migrated Customizer CSS both
 * print after enqueued styles.
 *
 * The console keeps its own 1180px, so this releases a cap rather than setting a width.
 * ------------------------------------------------------------------------- */
/* `max-width: none` was the first fix and it was too blunt: with no cap at all,
 * .site-main grows to whatever a child demands, so at 390px the KPI grid pushed it
 * 20px past the viewport and took .page-content and .ssr-own with it. 100% releases
 * the 800px reading measure — which is the whole point — while still keeping the
 * container inside the window. The console's own 1180px cap does the rest. */
.site-main { max-width: 100% !important; }
.page-content { max-width: 100%; }
.ssr-own.ssr-own { max-width: min(1180px, 100%); }


/* ---------------------------------------------------------------------------
 * NAV — the underline was the ugly.
 *
 * `.ssr-own-tab` carries `text-decoration:underline` from the browser default for
 * <a>, and it was never turned off. So the inactive tabs are underlined text AND the
 * ACTIVE tab is underlined text inside a filled teal pill, which reads as a mistake
 * rather than a state. A pill and an underline are two ways of saying the same thing.
 *
 * The pill stays as the selected state; the underline goes. Inactive tabs get a quiet
 * hover fill instead of nothing, so the row reads as controls rather than prose.
 * ------------------------------------------------------------------------- */
/* One class deep, not !important. The underline comes from Hello Elementor's
 * `.page-content a { text-decoration: underline }` — (0,1,1), which outranks both the
 * console's own `.ssr-own-tab` and a first attempt here at (0,1,0). Both were correct
 * declarations quietly losing. `.ssr-own .ssr-own-tab` is (0,2,0) and wins on the
 * cascade's own terms, which is better than !important because the next person can
 * still override it normally. */
.ssr-own .ssr-own-tab,
.ssr-own .ssr-own-out,
.ssr-own .ssr-own-pill,
.ssr-own .ssr-own-per,
.ssr-own .ssr-own-btn,
.ssr-own .ssr-own-pgbtns a { text-decoration: none; }
.ssr-own-tab { transition: background-color .16s cubic-bezier(.22,.61,.36,1); }
.ssr-own-tab:hover:not(.on) { background: rgba(255,255,255,.10); }
.ssr-own-out:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Sign out sat 12px against the 14px tabs and baseline-floated above the row.
   Same height as a tab so the bar has one horizontal line through it. */
.ssr-own-out { display: inline-flex; align-items: center; min-height: 27px; }


/* ---------------------------------------------------------------------------
 * THE TABLE. Three things, and the first is why it looked like loose text.
 *
 * 1. The row rule was `1px solid #F4F9F8` — the SAME value as the page ground, so
 *    there was effectively no rule at all and 25 rows of six columns had nothing
 *    holding them in line. One hairline, #D8E6E6, the value the rest of the console
 *    already uses.
 *
 * 2. No hover. On a table this long the eye loses its row between the date on the
 *    left and the amount on the right; a hover tint is the cheapest possible fix.
 *
 * 3. Proportional figures. Money in a right-aligned column has to line up digit
 *    under digit — `$150.00` above `$3.25` above `$43.28` was ragged because the
 *    font's default figures are proportional. `tabular-nums` is what that column is
 *    for, and the same applies to the timestamps and the reference codes.
 * ONE CLASS DEEPER, for the same reason the nav underline needed it: their rules are
 * `.ssr-own-table td` at (0,1,1) and print inline, after this file. A matching (0,1,1)
 * here loses on source order — the first deploy of this block measured as unchanged,
 * still #F4F9F8. `.ssr-own .ssr-own-table td` is (0,2,1) and wins honestly.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-table td { border-bottom: 1px solid var(--hairline, #D8E6E6); }
.ssr-own .ssr-own-table tbody tr { transition: background-color .12s linear; }
.ssr-own .ssr-own-table tbody tr:hover { background: var(--recessed, #F4F9F8); }
.ssr-own .ssr-own-table tbody tr:last-child td { border-bottom: 0; }

/* Figures align; reference codes get the tabular treatment too, because a column of
   codes is read by comparing them to each other, not by reading them as words. */
.ssr-own-table td:first-child,
.ssr-own-table td:nth-child(2),
.ssr-own-table td:last-child,
.ssr-own-table th:last-child { font-variant-numeric: tabular-nums; }
.ssr-own-table td:nth-child(2) { letter-spacing: .02em; color: var(--muted, #5A7482); }


/* ---------------------------------------------------------------------------
 * TAGS. `padding:2px 8px` on 12px/700 rendered a 15px-tall pill — shorter than its
 * own text box, so the fill clipped tight to the letters and read as highlighter pen
 * rather than a label. A pill needs to look deliberate at a glance in a column of
 * twenty-five of them.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-tag {
  display: inline-block;
  padding: 4px 10px;
  line-height: 1.25;
  white-space: nowrap;
}
/* The status column is read as one column, so it gets one weight. Only .completed
   and .cancelled carry a modifier; everything else stays on --ink deliberately -
   an unremarkable status should look unremarkable. */
.ssr-own .ssr-own-st { font-weight: 700; }


/* ---------------------------------------------------------------------------
 * THE THEME'S PAGE TITLE. Hello Elementor renders `.page-header > h1.entry-title`
 * from the WordPress page title, so the console had a stray black "Owner" heading
 * floating above its own nav bar, in the theme's type rather than the system's, and
 * followed immediately by the console's real "Orders" heading. Two titles, one screen.
 *
 * Hidden rather than restyled: the console names its own screens, and a page title
 * that duplicates the H1 below it is not information.
 * ------------------------------------------------------------------------- */
.page-header { display: none; }

/* ---------------------------------------------------------------------------
 * THE PUBLIC SITE CHROME. This is a judgement call and it is one line to revert.
 *
 * The console was rendering inside the marketing header and footer — FLOWRIDER / SPA
 * / EVENTS / FOOD & DRINKS and an orange BOOK NOW, sitting above a page of payment
 * totals. The owner-console spec (docs/owner-console-spec.md §0 and §3.4) is explicit
 * that the console must read as *the Surf Shack app* and not as a website with a
 * login, and it lists the site chrome among the tells. A "Book Now" button is also
 * simply wrong here: the owner is not a customer.
 *
 * The console carries its own nav — Today / Business / Orders / Bookings / Sign out —
 * so nothing is lost by hiding these, and it stays a CSS change rather than a routing
 * one, which is the other agent's ground.
 *
 * Delete this block if you would rather keep the site header while the console is
 * still being built.
 * ------------------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer { display: none; }


/* ---------------------------------------------------------------------------
 * THE SELECTED STATES FAILED AA, IN BOTH NAVS.
 *
 *   .ssr-own-tab.on  { background: var(--brand); color:#fff }   14px/600
 *   .ssr-own-per.on  { background: var(--brand); color:#fff }   12px/600
 *
 * `--brand` is #3D8D90 and white on it measures 3.88:1. Neither size is "large
 * text", so 4.5 is the bar and both miss it — on the two controls that tell the
 * owner where he is.
 *
 * The console already declares the answer: `--brand-ink: #357B7D`, the same hue at a
 * value white can be read on, 4.91:1. So this is not a new colour, it is the one
 * beside it in their own token block. `--brand` keeps every other role — borders,
 * the progress fill, the focus ring — where 3:1 is the bar and it passes.
 *
 * Not catchable by the generator: these are `var(--brand)`, not a literal hex, so
 * there is nothing for a value map to match on. Found by measuring the rendered page.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-tab.on,
.ssr-own .ssr-own-per.on {
  background: var(--brand-ink, #357B7D);
  border-color: var(--brand-ink, #357B7D);
}

/* ---------------------------------------------------------------------------
 * `.ssr-own-tag.staff` — markup with no rule.
 *
 * The WHERE column tags every channel: `.device` is sand, `.online` is mint, `.cash`
 * is green. `<span class="ssr-own-tag staff">Staff sale</span>` is in the markup but
 * no `.staff` rule was ever written, so it fell through to the base `.ssr-own-tag`
 * with no fill and rendered as bare text in a column of pills — the one row type that
 * looked broken.
 *
 * Neutral on purpose. Device, online and cash are payment channels and carry hue; a
 * staff sale is a channel of a different kind and reads better as the quiet one.
 * #1F3E4A on #E7EFED is 9.73:1, and #E7EFED is the control fill the rest of the
 * system uses.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-tag.staff {
  background: #E7EFED;
  color: var(--ink, #1F3E4A);
}

/* Filter chips were 25px tall. 32 is still compact for a dense filter row and stops
   them reading as text that happens to have a border. */
.ssr-own .ssr-own-per {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}


/* ===========================================================================
 * BUSINESS SCREEN — Nick, 15 Aug: "i dont like the page width and surfaces.
 * also, the spacing is a little off. stop making headings eyebrows. they
 * disappear."
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. HEADINGS ARE HEADINGS.
 *
 * `.ssr-own-h2` is a real <h2> with sentence-case source text — "Reconciliation —
 * Clover against this site", "Where the money came from" — styled down to 14px/700
 * UPPERCASE at 0.84px letter-spacing in --muted. That is the eyebrow treatment, and
 * an eyebrow is a label ABOVE a heading, not a heading. Applied to the only thing
 * dividing a long scrolling page into sections, it makes the structure vanish: the
 * section titles were quieter than the body text underneath them.
 *
 * Product scale, one step below the screen title: 20px, --ink, no uppercase, no
 * tracking. The source text is already sentence case, so turning the transform off
 * is all it takes to read as written.
 *
 * Second time this has come up — same note as the /order/ menu categories. Worth
 * stating as a rule: in the Product system an eyebrow is 12px/700 uppercase in
 * --muted and only ever sits above something bigger. Nothing that divides a page
 * gets that treatment.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink, #1F3E4A);
  margin: 40px 0 14px;
}
.ssr-own .ssr-own-h1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink, #1F3E4A);
  /* Was `margin:0 0 16px` here, which pulled the screen title up against the nav bar
, the console's own rule had a top margin and this replaced it wholesale. The bar
     is chrome and the title is content; they need a gap between them. */
  margin: 24px 0 16px;
}

/* ---------------------------------------------------------------------------
 * 2. PAGE WIDTH — one gutter, on the root.
 *
 * Releasing the theme's 800px cap left the console running to the window edges: the
 * root measured x0, w959 with the text starting hard against the frame. The 20px
 * inset that did exist was set per grid (`.ssr-own-grid{padding:0 20px}`), so the
 * cards were indented but the headings and the top bar were not, and nothing shared
 * an edge down the left.
 *
 * One gutter on the root instead, scaling with the viewport, and the per-grid
 * padding removed so nothing double-indents. Everything on the page now lines up
 * on a single left edge.
 * ------------------------------------------------------------------------- */
/* Doubled class: their `.ssr-own{padding:0 0 48px}` is (0,1,0) and prints later, so a
 * matching (0,1,0) here loses on order — the first deploy measured x0, unchanged.
 * `.ssr-own.ssr-own` is (0,2,0), selects exactly the same element, and wins. */
.ssr-own.ssr-own {
  box-sizing: border-box;
  padding-left: clamp(20px, 3vw, 34px);
  padding-right: clamp(20px, 3vw, 34px);
  /* NO padding-top. There was 16px here, added when the bar was an inset panel and a
     gutter on all four sides was the right instinct. It is wrong now: the console
     made its header `position:sticky; top:0`, so a gap above it means the bar starts
     16px down the page and then jumps flush the moment you scroll. A sticky header
     belongs against the top edge from the start. */
  padding-top: 0;
}
.ssr-own .ssr-own-grid { padding-left: 0; padding-right: 0; }
/* NO RADIUS ON THE HEADER. It shipped as `border-radius:0 0 14px 14px` — rounded
   bottom corners on a full-width chrome bar, which nobody asked for and which reads
   as a floating panel rather than a header. The Stage 3 radius pass reduced it to 4px
   and an earlier version of this file then ADDED 4px on all four corners, which made
   it worse. A bar that spans the measure has no corners to round. */
/* Header radius: nothing here any more either. It shipped as `0 0 14px 14px`, this
 * file forced it to 0, and the console now sets `border-radius:0` itself. Removed for
 * the same reason as the bleed above. */

/* ---------------------------------------------------------------------------
 * 2b. FOUR LEFT EDGES ON ONE PAGE — this is the "weird grid".
 *
 * Measured, all on the Business screen at the same moment:
 *
 *     .ssr-own-h2      x29  w883      headings
 *     .ssr-own-grid    x29  w883      the 3-up card rows
 *     .ssr-own-card    x49  w843      standalone cards — `margin:0 20px`
 *     .ssr-own-periods x29  w883      but `padding:0 20px`, so its chips start at 49
 *
 * So a heading, the card row under it, and the full-width card under THAT each began
 * at a different x, and the filter chips at a fourth. Nothing on the page shared a
 * vertical line, which is what makes it read as an arbitrary arrangement of boxes
 * rather than a layout.
 *
 * The cause is that the 20px inset was expressed three different ways on three
 * different elements — none of which is wrong on its own, and which was invisible
 * while the theme's 800px cap was squeezing everything anyway. Moving the gutter to
 * the root made it obvious.
 *
 * One gutter, on the root, and every per-element inset removed. One left edge.
 * ------------------------------------------------------------------------- */
/* Was `.ssr-own > .ssr-own-card`, and the child combinator was the bug. On the Today
 * screen the takings card is wrapped in a `<section class="ssr-own-sec">`, so it is a
 * GRANDchild and the rule never matched it: measured x295..1367 against x275..1387 for
 * every heading, notice and grid on the same page. It is folded into the doubled-class
 * group below, which does not care how deep the card sits. */
.ssr-own .ssr-own-periods { padding-left: 0; padding-right: 0; }

/* The same 20px, on the blocks that arrived after the pass above. The console has
 * grown a lot since (owner-console.php went 33,314 -> 61,650 bytes) and the new
 * blocks each brought their own copy of the page gutter:
 *
 *     .ssr-own-card    { margin: 0 20px }   @media(max-width:640px) -> 0 12px
 *     .ssr-own-panel   { margin: 0 20px }   @media(max-width:560px) -> 0 12px
 *     .ssr-own-notices { margin: 0 20px }   @media(max-width:560px) -> 0 12px
 *     .ssr-own-book    { margin: 0 20px }   @media(max-width:560px) -> 0 12px
 *     .ssr-own-barwrap { margin: 0 20px 4px } @media(max-width:640px) -> 0 12px 4px
 *     .ssr-own-filters { margin: 0 20px }
 *     .ssr-own-two     { margin: 0 20px }   @media(max-width:560px) -> 0 12px
 *     .ssr-own-three   { margin: 0 20px }   @media(max-width:560px) -> 0 12px
 *
 * Measured on the live Business screen: every heading, notice, KPI grid and the calendar
 * run x275..1387. `.ssr-own-two` — the whole two-column block, which is most of the
 * page — runs x295..1367. That 20px is the misaligned edge in Nick's screenshots, and
 * it is why the "Best sellers" card and the card above it do not share a right edge.
 *
 * Only the horizontal margin goes. `.ssr-own-barwrap` keeps its 4px bottom, which is
 * spacing between it and the table, not a gutter.
 *
 * WHY THIS KEEPS COMING BACK. The console is now TWO inline stylesheets from two
 * different files — `ssr_owner_css()` in owner-console.php (14,115 chars) and a second
 * 15,994-char block that owns the Business screen (`.ssr-own-two`, `.ssr-own-panel`,
 * `.ssr-own-bars`, `.ssr-own-tablewrap`). Reading only the first is how `.ssr-own-two`
 * was missed last pass. The list above is now taken from the rendered page's CSSOM
 * rather than from either source file, so it covers both.
 *
 * DOUBLED CLASS rather than `.ssr-own > .x`: two reasons. Theirs is (0,1,0) and prints
 * later, so a (0,1,0) match here loses on source order — the same trap as the root
 * padding above. And doubling does not assume the block is a direct child of `.ssr-own`
 * — which is exactly what broke the card rule, since the Today screen wraps its cards
 * in a `<section>`. (0,2,0) also beats the ≤560/≤640 overrides, because a media query
 * adds no specificity — one rule covers every width.
 *
 * `.ssr-own-two .ssr-own-card{margin:0}` in their sheet is also (0,2,0) and prints
 * later, so it still wins inside the two-column block. Same value, so they agree.
 * ------------------------------------------------------------------------- */
.ssr-own-card.ssr-own-card,
.ssr-own-panel.ssr-own-panel,
.ssr-own-notices.ssr-own-notices,
.ssr-own-book.ssr-own-book,
.ssr-own-barwrap.ssr-own-barwrap,
.ssr-own-filters.ssr-own-filters,
.ssr-own-two.ssr-own-two,
.ssr-own-three.ssr-own-three {
  margin-left: 0;
  margin-right: 0;
}

/* The summary bar, same edge and a real gap around it. Theirs is
 * `margin:14px 20px 0` (→ `14px 12px 0` under 560px): the 20px is the page gutter
 * again, and the 14/0 leaves it tight to whatever is above and touching whatever is
 * below. Nick asked for 20 top and bottom, sides off.
 *
 * The shorthand rather than four longhands, deliberately — it is one decision about
 * one box, and writing it long invites the next edit to change three sides and forget
 * the fourth. It also flattens their ≤560px override, which only ever restated the
 * gutter this rule removes.
 *
 * 20/20 is on the spacing scale the rest of the console uses (16px grid gap, 20px
 * gutter), so the bar now sits in the same rhythm as the blocks around it instead of
 * being pinned to the one below.
 * ------------------------------------------------------------------------- */
.ssr-own-sumbar.ssr-own-sumbar {
  margin: 20px 0;
}

/* One gap value too. The grid gutter was 12px while the space between blocks was
   16px, close enough to look like a mistake rather than a distinction.
 *
 * And the columns can now actually shrink. `repeat(3,1fr)` looks responsive but is
 * not: a bare `1fr` has a min-content floor, so at 390px three cards holding
 * "$18,949.43" could not fit and pushed 10px of horizontal overflow out through
 * .page-content and .site-main. `auto-fit` with `minmax(min(260px,100%),1fr)` gives
 * three columns on a desktop, two on a tablet and one on a phone, and cannot overflow
 * at any width because the min collapses to 100% before it collapses to nothing.
 *
 * The spec is explicit that this has to work on his phone — "owners check numbers in
 * bed" — so a desktop-first console still owes a phone layout. */
.ssr-own .ssr-own-grid {
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ---------------------------------------------------------------------------
 * 3. SURFACES — the bar tracks were invisible.
 *
 * `.ssr-own-bt` (the unfilled remainder of every bar) is #F4F9F8 — the PAGE ground,
 * sitting on a WHITE card. So the only thing you could see was the filled portion,
 * floating with nothing to read it against, and a 4%-of-capacity bar looked identical
 * to a 40% one until you read the number. A bar chart with no track is a coloured
 * dash.
 *
 * #E7EFED is the control fill the rest of the system uses, one step darker than the
 * card and clearly a container. Exactly the same mistake as the orders table's row
 * rule, which was also set to the page-ground value.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-bt { background: #E7EFED; }

/* ---------------------------------------------------------------------------
 * 4. SPACING — blocks were touching.
 *
 * Section heading margins were 26px above / 8px below, so a heading sat almost as
 * close to the block it followed as to the block it introduced, and consecutive
 * cards had no separation at all. The rhythm is now: 40 above a section heading,
 * 14 below it, 16 between blocks — so vertical space says what belongs together.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-grid,
.ssr-own .ssr-own-card { margin-bottom: 16px; }
.ssr-own .ssr-own-h2 + .ssr-own-grid,
.ssr-own .ssr-own-h2 + .ssr-own-card { margin-top: 0; }
.ssr-own .ssr-own-periods { margin-bottom: 20px; }


/* ---------------------------------------------------------------------------
 * 5. FULL WIDTH MEANS FULL WIDTH — Nick, 15 Aug.
 *
 * "dark bar is header. should be 100% vw. light blue surface is bg, but is getting
 *  cut off before the edge of the page. keep the content in a grid"
 *
 * What was wrong: `.ssr-own` is a centred 1180px block that paints the mint ground on
 * ITSELF. So the mint was a rectangle floating in the middle of the page with the
 * theme's white showing down both sides, and the dark bar was a rectangle inside that
 * rectangle. Two surfaces that are supposed to BE the page were behaving like cards.
 *
 * The correct structure is three layers, not one:
 *
 *     ground   full-bleed mint          — the page itself
 *     header   full-bleed dark          — chrome spans the window
 *     content  centred column, gutters  — the grid, unchanged
 *
 * So the mint moves to <body>, where a page background belongs, and the theme's own
 * white wrappers are made transparent so nothing paints over it.
 *
 * The header breaks out with `margin-inline: calc(50% - 50vw)` — the exact distance
 * from the centred content box to each viewport edge — and then pays it straight back
 * as padding, so the bar spans the window while "Surf Shack" stays on the same left
 * edge as everything below it. That is the whole trick: full-bleed surface, contained
 * content, one alignment.
 *
 * ------------------------------------------------------------------------- */
body { background: var(--recessed, #F4F9F8) !important; }
.site-main, .page-content, .site-content, .site, #content, .entry-content {
  background: transparent !important;
}
/* The ground is the body's job now; the console stops painting its own. */
.ssr-own.ssr-own { background: transparent; }

/* HEADER BLEED — REMOVED 15 Aug, and deliberately.
 *
 * This file used to full-bleed the bar itself with a spread box-shadow. It no longer
 * does, because the console now does it properly in its own CSS:
 *
 *     .ssr-own-top{position:sticky;top:0;z-index:60;width:100vw;
 *                  margin-left:calc(50% - 50vw);
 *                  padding:14px max(20px,calc(50vw - 590px));}
 *
 * That is better than what was here: it is sticky, so the nav stays put on a long
 * Orders page, and it pays the bleed back as padding so the brand still lands on the
 * content column's left edge. Two mechanisms fighting over the same bar is how you get
 * a header that is full-bleed on one screen and not the next, so mine goes.
 *
 * The lesson for the skin generally: when the owning file solves something, the
 * override comes OUT. An override kept past its usefulness is indistinguishable from
 * a bug the next time someone reads the cascade.
 */

/* At 390px the remaining overflow was not the console at all: a 1034px logo <img>
 * and an Elementor icon list, from the site chrome. Those are hidden on /owner/ by
 * the block above, but a hidden ancestor is not a guarantee — the chrome renders in
 * more than one wrapper depending on the auth state, and if the header block is ever
 * reverted the overflow comes back with it. A width guard costs nothing and holds
 * either way. Scoped to /owner/* by enqueue. */
img { max-width: 100%; height: auto; }
.elementor-icon-list-items { max-width: 100%; }

/* The 390px logged-out view renders two different ways depending on which chrome the
 * theme prints, and one of them still pushed 10px out through the wrappers. Rather
 * than chase a variant that only appears signed out on a phone, the wrappers are told
 * they may not scroll sideways at all. `clip`, not `hidden`: it creates no scroll
 * container, so sticky and absolutely-positioned children behave exactly as before —
 * the same reasoning the staff portal's own `.ssr-tl` uses. */
/* CORRECTED. This was `.site-main, .page-content, .ssr-own` — and putting it on those
 * wrappers CLIPPED the console's own full-bleed header, because their bar reaches the
 * window by overflowing its container with `width:100vw; margin-left:calc(50% - 50vw)`.
 * An overflow-clip ancestor is exactly what stops that working. The bar rendered
 * contained again and it took a screenshot to notice.
 *
 * At the document root instead: the scrollbar-width overflow still cannot produce a
 * horizontal scrollbar, and a child that deliberately spans the viewport is not
 * clipped by it, because 100vw is not wider than the root. */
html { overflow-x: clip; }


/* ---------------------------------------------------------------------------
 * 6. THE FILTER ROWS — four rows of loose pills became four segmented controls.
 *
 * Nick, 15 Aug: "this is messy can you fix it like we did the calendar chips? or maybe
 * drop downs, i'm not sure it just very confusing visually."
 *
 * The Orders screen now stacks FOUR rows of `.ssr-own-periods` — period, channel,
 * given-away, sort — twenty pills in total, every one the same size, shape and weight,
 * separated by 6px gaps that read exactly like the gaps between rows. Nothing said
 * which pills belonged to which question, so it scanned as one field of twenty
 * options rather than four choices of one-from-five.
 *
 * NOT dropdowns, and it is worth saying why since Nick offered them. A dropdown hides
 * its options and costs two taps; on a dashboard the current filter state IS
 * information the owner wants visible — "last 30 days, everything, all, newest" should
 * be readable without opening anything. Segmented controls keep every option one tap
 * away and, more to the point here, they draw a box around each QUESTION. That is the
 * actual problem: not too many controls, no grouping.
 *
 * The trick that makes this possible without touching their markup: all four rows use
 * the same classes, and the "Sort" label / date range is a `<span class=ssr-own-per-range>`
 * while the options are `<a class=ssr-own-per>`. So `a.ssr-own-per:first-of-type`
 * finds the first OPTION in a row whether or not a label precedes it, and the label
 * stays outside the group where it belongs.
 *
 * Gap goes to zero and each option pulls back 1px so neighbours share a border —
 * one continuous control instead of five islands. The selected option is raised on
 * z-index so its filled edge sits above its neighbours' hairlines rather than under
 * them.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-periods {
  gap: 0;
  align-items: center;
  /* Four of these stack. Tightened so they read as one filter block rather than four
     unrelated bands, the 20px they shipped with is section spacing, not row spacing. */
  margin: 0 0 8px;
}
.ssr-own .ssr-own-periods:last-of-type { margin-bottom: 20px; }

.ssr-own .ssr-own-per {
  border-radius: 0;
  margin-left: -1px;
  position: relative;
}
.ssr-own a.ssr-own-per:first-of-type {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.ssr-own a.ssr-own-per:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* The selected segment owns the border it shares with both neighbours. */
.ssr-own .ssr-own-per.on { z-index: 1; }
/* An idle segment lifts on hover so the group reads as pressable, not as a legend. */
.ssr-own .ssr-own-per:hover:not(.on) { background: var(--recessed, #F4F9F8); z-index: 1; }

/* The row label sits outside the control and needs air between the two. */
.ssr-own .ssr-own-per-range {
  margin-left: 0;
  margin-right: 10px;
}
/* ...except where it TRAILS the options (the Business screen puts the date range at
   the end), in which case the air goes on the other side. */
.ssr-own a.ssr-own-per + .ssr-own-per-range { margin-left: 12px; margin-right: 0; }


/* ---------------------------------------------------------------------------
 * 9. A CARD CAPTION SITTING ON TOP OF A TABLE HEADER.
 *
 * "Best sellers, kitchen and bar" and the ITEM / SOLD / TAKINGS header row were
 * touching — measured on the live Business screen: the caption's bottom edge and the
 * table's top edge are both at y1115. Zero pixels. It reads as one run-together line,
 * which is what Nick's screenshot shows.
 *
 * `.ssr-own-k` is `margin:0` and is used for two different jobs. Before a
 * `.ssr-own-big` number the 0 is right — the number's own line-height carries the
 * space, and every KPI card looks fine. Before a block that starts with text at its
 * very top edge, it collides. Their own rules already give 8px before `.ssr-own-bars`
 * and 10px before `.ssr-own-sum`; the table wrapper is the one that was missed.
 *
 * 8px, matching the bars list rather than inventing a third value.
 *
 * Scoped to the adjacency, not to `.ssr-own-k` itself, so the seven captions that sit
 * above a big number keep their current spacing.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-k + .ssr-own-tablewrap { margin-top: 8px; }


/* ---------------------------------------------------------------------------
 * 10. UNSTYLED <small> — 66 elements at a size nobody chose.
 *
 * The counts beside every figure ("$7,450.00 110", "$8,144.28 92") are bare `<small>`
 * tags. `.ssr-own-sval small` is styled at 11px, but the ones inside `.ssr-own-bv` and
 * friends have no rule at all, so they inherit the browser's `small` default of 0.8333em
 * and land on 11.6667px. Fifty-nine of them, at a size that exists nowhere in the
 * system and cannot be typed into a spec.
 *
 * The generated layer above fixes every `small` that HAS a rule (11 -> 12). This
 * catches the ones that never had one.
 *
 * `.ssr-own.ssr-own small` is (0,2,1), which outranks every `.ssr-own-x small` in
 * their sheet at (0,2,0) — one rule instead of chasing each parent. The generated
 * overrides carry !important and still win where they apply, and they set the same
 * 12px, so the two agree.
 * ------------------------------------------------------------------------- */
.ssr-own.ssr-own small { font-size: 12px; }


/* ---------------------------------------------------------------------------
 * 11. THE CHART PALETTE — three fills you cannot see, and five values off-system.
 *
 * Bar colour is set inline, per bar, as `style="width:73%;--c:#E8902A"`, and their
 * rule is `.ssr-own-bt i{background:var(--c,#3D8D90)}`. Measured against the bar
 * track (#E7EFED), WCAG 1.4.11 wants 3:1 for a graphical object that carries meaning:
 *
 *     #E8902A  2.34   FAIL   kitchen / Open Flow — and this is the RETIRED brand
 *                            orange; the system moved to #C25700 for this exact reason
 *     #E3B818  1.77   FAIL   Volleyball. Effectively invisible: a yellow bar on a
 *                            near-white track at under 2:1
 *     #9AA9B1  2.27   FAIL   Tax & tips
 *     #C2185B  5.52   pass   but a Material pink, from no system
 *     #8B72B8  3.80   pass   off-system
 *     #2F5FA8  5.94   pass   off-system
 *     #B42318  6.18   pass   the DANGER token, used as a category colour
 *     #3D8D90  3.65   pass   brand
 *
 * So: three bars fail contrast outright, and the palette is eight ad-hoc values that
 * appear nowhere else in the codebase (checked — none of them are in ss-staff.css,
 * ss-tokens-compat.css or the layout sheet, so this is not a shared activity
 * vocabulary that other screens depend on).
 *
 * WHY NOT JUST DARKEN THE THREE. Because darkening the orange to #C25700 walks it into
 * the crimson beside it. Run through the categorical checks (OKLab ΔE, Machado 2009
 * protan/deutan at severity 1.0, against the #E7EFED track), the naive three-value fix
 * scores worst-adjacent 14.7 at normal vision — under the 15 floor, which means two
 * neighbouring bars a full-colour reader struggles to separate. That is trading a
 * contrast failure for a legibility one.
 *
 * So the palette was re-stepped as a set, holding each category's HUE and moving only
 * its step, and re-run until every check cleared:
 *
 *     seven slots, adjacent pairs, on #E7EFED
 *       lightness band      PASS  all 7 inside L 0.43-0.77
 *       CVD separation      PASS  worst #8C3A2E<->#7A6E00  8.3 deutan
 *       normal vision       PASS  worst #8C3A2E<->#7A6E00  15.2
 *       contrast vs track   PASS  all 7 >= 3:1
 *     the three departments in the menu chart, ALL pairs (any two can touch)
 *       CVD separation      PASS  worst #8B72B8<->#1D4E9E  14.1 protan
 *       normal vision       PASS  worst 18.8
 *       contrast            PASS
 *
 * The two chroma warnings that remain are deliberate: the brand teal (0.078) is the
 * brand, and the neutral (0.026) is a neutral — "Tax & tips" is a residual bucket and
 * is supposed to recede rather than claim an identity hue.
 *
 * #B42318 -> #8C3A2E also gets the reserved danger token out of the category set. It
 * stays in the same red family, so "Other" still reads the same; it just no longer
 * borrows the colour that means something went wrong.
 *
 * THE SELECTOR is an attribute-substring match on the inline value. That is unusual and
 * it is the only hook there is: the value is inline, so no ordinary selector reaches it,
 * and a stylesheet cannot match on a custom property. It fails the right way — if they
 * change a value, the override stops matching and their value is used, which is the
 * same contract as every other rule in this file. The `i` flag makes it independent of
 * how the hex is cased in the PHP.
 *
 * WHAT IS STILL WRONG AND IS NOT CSS: the menu chart colours by department — kitchen,
 * bar, shop — with no legend, so that grouping is carried by colour alone. It needs a
 * key, or the department named on each row. That is markup.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-bt i[style*="--c:#E8902A" i] { background: #C25700; }   /* retired orange -> system accent   2.34 -> 4.61 */
.ssr-own .ssr-own-bt i[style*="--c:#E3B818" i] { background: #7A6E00; }   /* invisible yellow -> olive         1.77 -> 4.92 */
.ssr-own .ssr-own-bt i[style*="--c:#9AA9B1" i] { background: #63757E; }   /* pale grey -> readable neutral     2.27 -> 4.20 */
.ssr-own .ssr-own-bt i[style*="--c:#C2185B" i] { background: #A81E64; }   /* Material pink -> stepped for CVD  */
.ssr-own .ssr-own-bt i[style*="--c:#B42318" i] { background: #8C3A2E; }   /* danger token -> category brick    */
.ssr-own .ssr-own-bt i[style*="--c:#2F5FA8" i] { background: #1D4E9E; }   /* off-system blue -> stepped        */
/* #3D8D90 (brand) and #8B72B8 (purple) already clear every check and are left alone. */


/* ---------------------------------------------------------------------------
 * 12. THE BEST-SELLERS TABLE PAINTING OUTSIDE ITS CARD.
 *
 * Measured on the live Business screen at 1440px:
 *
 *     .ssr-own-card       742..1367   the card the table sits in
 *     .ssr-own-tablewrap  761..1348   width 587, scrollWidth 640
 *     .ssr-own-table      761..1401   width 640  <- 53px out through the card's right edge
 *
 * Two of their rules combine into it. `.ssr-own-table{min-width:640px}` is sized for the
 * Orders screen, which is six columns wide and full-bleed. `.ssr-own-tablewrap` carries
 * `overflow-x:auto`, which would have contained it — but `.ssr-own-card .ssr-own-tablewrap
 * {overflow:visible}` is more specific and turns the scroller off inside a card. So a
 * 640px minimum lands in a 587px box with nothing to stop it.
 *
 * Nick: "table overflowing. reduce width." — so the fix is the width, not a scrollbar.
 *
 *     min-width: min(640px, 100%)
 *
 * reads as "640 if there is room for 640, otherwise the container." In the narrow column
 * that resolves to 587 and the three columns — item, sold, takings — fit comfortably at
 * 14px. On Orders, where the wrapper is ~1072px, min() returns 640 and nothing changes,
 * so the six-column table keeps the floor it was given.
 *
 * One rule instead of scoping to `.ssr-own-col`: the column class comes from the second
 * stylesheet and the Orders table's ancestry is not something I can check without being
 * signed in as an owner. `min(…, 100%)` needs no ancestor to be true.
 *
 * Their `overflow:visible` is left alone. It is presumably there so something can escape
 * the card, and with the table no longer wider than its wrapper there is nothing left to
 * clip anyway.
 * ------------------------------------------------------------------------- */
.ssr-own .ssr-own-card .ssr-own-table { min-width: min(640px, 100%); }