/* ============================================================
   PRODUCTION STYLESHEET — page-body uniformity layer.

   Board is the reference: board.css:95-131 gives every
   tile `1px solid var(--rhair)` on `var(--paper-2)`, with a 41px
   uppercase head rule. Every other page still draws containers
   with themes.css's older `1.5px solid var(--line)` on
   `var(--panel)` (themes.css:344) — a heavier, darker outline that
   reads as a different design language on the same shell.

   This sheet retunes the CONTAINER outline desk-wide and, below,
   thins the per-page tile counts that make those pages harder to
   scan than Board.

   Scope note: only container-level boxes are retuned. Buttons,
   chips, inputs and avatars keep their 1.5px --line outline — they
   are controls, not containers, and Board's own controls
   (.mini-select, board.css:133) are the thin-outline
   exception rather than the rule.

   Linked from dashboard/index.html after board.css, so it wins on
   source order against themes.css's identically-specific rules —
   no !important. This is a production stylesheet, not a prototype.
   ============================================================ */

/* ------------------------------------------------------------
   1. The container outline — Board's treatment, desk-wide
   ------------------------------------------------------------ */
body[data-theme=gemini] #view .card {
  border: 1px solid var(--rhair);
  background: var(--paper-2);
}
/* Board's tiles lift on hover (board.css:101-105); cards that are
   actually clickable get the same affordance instead of themes.css's
   background-only swap, so "this row opens something" reads identically
   on every page. */
body[data-theme=gemini] #view .card.clickable:hover {
  border-color: var(--focus);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
/* the clickable card is the desk-wide "this opens something" affordance and
   it renders on the signed-out routes, so it is the one surface in this
   sheet that must acknowledge a press as well as a hover. Press and focus
   only — the static tiles below stay inert, controls are not containers,
   and the transition itself is owned by motion.css. */
body[data-theme=gemini] #view .card.clickable:active {
  transform: translateY(1px);
}
body[data-theme=gemini] #view .card.clickable:focus-visible {
  border-color: var(--focus);
  box-shadow: var(--shadow);
}

/* the outline above uses the `border` SHORTHAND, which resets all four
   sides — so every card variant whose border carries MEANING has to be
   re-asserted here, at a weight that clears (1,2,1). Two of them:

   · Sectors' for/against tiles (themes.css:913-915) say which side of a
     sector case a tile argues with a 2px coloured top edge — the only
     signal there is. pages-research.css deferred this to "the layer that
     owns outlines"; this is that layer.
   · the astro reading block (themes.css:1394) is marked off from the
     ordinary cards stacked around it on Astro and Your Chart by a 3px
     inline-start rule. It takes --rink rather than themes.css's --ink1 so
     the accent stays inside the Stage-A palette. */
body[data-theme=gemini] #view .card.sec-tile { border-top-width: 2px; }
body[data-theme=gemini] #view .card.sec-tile.t-for { border-top-color: var(--up); }
body[data-theme=gemini] #view .card.sec-tile.t-against { border-top-color: var(--dn); }
body[data-theme=gemini] #view .card.ar-card {
  border-inline-start: 3px solid var(--rink);
}

/* the card header rule: themes.css:346 draws it in --line, one weight
   heavier than the box it sits in. Board draws head and box in the same
   --rhair, which is why its tiles read as one object. */
body[data-theme=gemini] #view .card > h2 {
  border-bottom: 1px solid var(--rhair);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* secondary containers that share the card's job on non-Board pages */
body[data-theme=gemini] #view .tpanel,
body[data-theme=gemini] #view .gtile,
body[data-theme=gemini] #view .room-house,
body[data-theme=gemini] #view .sumstrip,
body[data-theme=gemini] #view .trackclock,
body[data-theme=gemini] #view .av-nums,
body[data-theme=gemini] #view .bd-grid,
body[data-theme=gemini] #view .cast-stats,
body[data-theme=gemini] #view .dt-ribbon,
body[data-theme=gemini] #view .legal-tabs,
body[data-theme=gemini] #view .sc-presets,
body[data-theme=gemini] #view .ttabs,
body[data-theme=gemini] #view .plan-card,
body[data-theme=gemini] #view .seg-opts {
  border-width: 1px;
  border-color: var(--rhair);
}
/* the disclaimer banner keeps its 4px accent stripe — only the three
   hairline sides move, or the stripe that carries its meaning is lost. */
body[data-theme=gemini] #view .disclaimer {
  border-block-width: 1px;
  border-inline-end-width: 1px;
  border-block-color: var(--rhair);
  border-inline-end-color: var(--rhair);
}
/* the commentary tile is the same shape of exception. themes.css:805-807
   gives it a 4px border-inline-start recoloured to --up or --dn, and that
   stripe is the only thing separating a bullish reading from a bearish one
   on MyChart and Cast. A blanket `border-color` here would beat
   `.comm-card.up` on the id and flatten all four sides to grey, so only the
   three hairline sides move and the stripe is left alone — pages-workspace
   already does exactly this for .goch-tile. */
body[data-theme=gemini] #view .comm-card {
  border-block-width: 1px;
  border-inline-end-width: 1px;
  border-block-color: var(--rhair);
  border-inline-end-color: var(--rhair);
}
/* the 1px-gap "grid of cells over a --hair ground" pattern (sumstrip,
   trackclock, av-nums, bd-grid, cast-stats) draws its internal dividers
   from the background colour, so that has to move with the border or the
   cells stay outlined in the old heavier tone. */
body[data-theme=gemini] #view .sumstrip,
body[data-theme=gemini] #view .trackclock,
body[data-theme=gemini] #view .av-nums,
body[data-theme=gemini] #view .bd-grid,
body[data-theme=gemini] #view .cast-stats,
body[data-theme=gemini] #view .legal-tabs,
body[data-theme=gemini] #view .sc-presets,
body[data-theme=gemini] #view .ttabs,
body[data-theme=gemini] #view .seg-opts { background: var(--rhair); }

body[data-theme=gemini] #view .gtile { background: var(--paper-2); }

/* the legal page's intro rail (themes.css:556) is a 4px --line bar. It
   carries emphasis, not state — unlike .disclaimer's red stripe there is
   no meaning in the colour — so it keeps its width and moves to the same
   hairline tone as everything else rather than staying the last piece of
   the old --line treatment on the page. */
body[data-theme=gemini] #view .legal-intro { border-inline-start-color: var(--rhair); }

/* The legal documents are the only long-form prose on the desk — every other
   page is tiles, tables and pills. Left-flush against a 1000px+ centre pane the
   lines run past 140 characters and the block sits off to one side of an
   otherwise empty column. Cap the measure and centre the BLOCK; the prose stays
   left-aligned inside it, because centred body copy has a ragged left edge the
   eye has to re-find on every line. */
body[data-theme=gemini] #view .card.legal-doc {
  max-width: 76ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   2. The tile inset — one number, all four sides, every page
   ------------------------------------------------------------
   The reference the desk is being tuned against is the Desk Setup
   tile: themes.css:465 `.onboard-prompt{padding:20px}`. 30% less
   is 20 × 0.7 = 14px, and that is the single inset every tile in
   the centre workspace now uses on all four sides.

   Why it is not simply `.card{padding:14px}`: themes.css:344 sets
   `.card{padding:0}` on purpose, because the card's `h2` head rule
   and its bottom border must run the FULL width of the box —
   padding on the card would inset the rule and the head would stop
   reading as a band. So the inset is pushed onto the children
   instead, exactly the way themes.css already does it (345-348),
   only at 14 instead of 12:

     · h2 / .sub carry it as padding-inline (they paint a background
       or a border edge-to-edge, so the box must stay full-bleed)
     · every other child carries it as margin-inline
     · the first and last children carry the top and bottom halves

   That is what makes the alignment claim true: title, body copy and
   the button row all resolve to the same 14px left edge instead of
   the three different edges they inherit today.

   Scope: `#view` only. The sidebar and the context rail are
   deliberately untouched — their density is already correct.
   ------------------------------------------------------------ */

:root { --tile-pad: 14px; }

/* horizontal — the two mechanisms themes.css uses, retuned in step */
body[data-theme=gemini] #view .card > h2,
body[data-theme=gemini] #view .card > .sub {
  padding-inline-start: var(--tile-pad);
  padding-inline-end: var(--tile-pad);
}
body[data-theme=gemini] #view .card > *:not(h2):not(.sub) {
  margin-inline-start: var(--tile-pad);
  margin-inline-end: var(--tile-pad);
}

/* vertical — a head rule owns its own band (11px, set in section 1
   above, giving Board's 41px head), so the top inset applies only
   when the card opens with content rather than a header. */
body[data-theme=gemini] #view .card > *:first-child:not(h2) {
  margin-top: var(--tile-pad);
}
body[data-theme=gemini] #view .card > h2:first-child + * {
  margin-top: var(--tile-pad);
}
body[data-theme=gemini] #view .card > *:last-child {
  margin-bottom: var(--tile-pad);
}
/* themes.css:347 gives `.card>.sub` a padding-top of 8px, which was
   meant to be the ONLY top gap a .sub gets. Where the .sub also opens
   the card — first child, or straight after the head band — it now
   collects the 14px margin from the two rules above as well and the
   gap resolves to 22. The padding comes off in exactly those two
   positions; a .sub further down the card still needs it to separate
   from the content above. */
body[data-theme=gemini] #view .card > .sub:first-child,
body[data-theme=gemini] #view .card > h2:first-child + .sub {
  padding-top: 0;
}

/* the reference tile itself pads directly (themes.css:465) rather
   than through its children, so it takes the number as padding and
   drops the child insets that would otherwise double it.

   Same treatment for every other card variant that pads ITSELF, or
   the two mechanisms stack and the tile ends up inset twice — e.g.
   .mychart-cta (themes.css:850, 34/26) was resolving to a 40px left
   edge on its children (26 padding + 14 margin) while its own h2 sat
   at 27. These are the only four such variants in the centre pane;
   every other `.card X` sets padding:0 and insets through children,
   which the rule above already covers. */
body[data-theme=gemini] #view .onboard-prompt,
body[data-theme=gemini] #view .mychart-cta,
body[data-theme=gemini] #view .sec-empty,
body[data-theme=gemini] #view .plan-wall {
  padding: var(--tile-pad);
}
/* the variant class is repeated here on purpose. The rule this has to
   beat is `#view .card > *:not(h2):not(.sub)` = (1,3,2) — :not() args
   count, and h2 lands in the ELEMENT column. A plain
   `#view .card.mychart-cta > *` is only (1,3,1) and loses on that
   element count, so the doubled class buys the extra weight (1,4,1). */
body[data-theme=gemini] #view .card.onboard-prompt.onboard-prompt > *,
body[data-theme=gemini] #view .card.mychart-cta.mychart-cta > *,
body[data-theme=gemini] #view .card.sec-empty.sec-empty > *,
body[data-theme=gemini] #view .card.plan-wall.plan-wall > * {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
/* h2/.sub take the inset as padding above, so on a self-padding card
   that has to come back off — but only on those two, never on a
   control like .bw-go whose padding is its own button geometry. */
body[data-theme=gemini] #view .onboard-prompt > h2,
body[data-theme=gemini] #view .onboard-prompt > .sub,
body[data-theme=gemini] #view .mychart-cta > h2,
body[data-theme=gemini] #view .mychart-cta > .sub,
body[data-theme=gemini] #view .sec-empty > h2,
body[data-theme=gemini] #view .sec-empty > .sub,
body[data-theme=gemini] #view .plan-wall > h2,
body[data-theme=gemini] #view .plan-wall > .sub {
  padding-inline-start: 0;
  padding-inline-end: 0;
}
body[data-theme=gemini] #view .card.onboard-prompt > *:first-child,
body[data-theme=gemini] #view .card.mychart-cta > *:first-child,
body[data-theme=gemini] #view .card.sec-empty > *:first-child,
body[data-theme=gemini] #view .card.plan-wall > *:first-child { margin-top: 0; }
body[data-theme=gemini] #view .card.onboard-prompt > *:last-child,
body[data-theme=gemini] #view .card.mychart-cta > *:last-child,
body[data-theme=gemini] #view .card.sec-empty > *:last-child,
body[data-theme=gemini] #view .card.plan-wall > *:last-child { margin-bottom: 0; }

/* Board's tiles are the other container family in the centre pane
   (board.css:114/131). They were drawn at 12px; they move
   to the same 14 so a Board tile and a card on any other page share
   one edge. */
body[data-theme=gemini] #view .tile-head {
  padding-inline-start: var(--tile-pad);
  padding-inline-end: var(--tile-pad);
}
body[data-theme=gemini] #view .tile-body {
  padding: var(--tile-pad);
}
/* the two rules above are (1,2,1) and unconditioned, so Board's own
   phone insets at (0,2,1) in board.css could never take —
   its 900px band now keeps only min-height and points here. The
   density drop is re-stated at matching weight so it wins again:
   same 10px / 9-10-10 the ported Board sheet used. */
@media (max-width: 900px) {
  body[data-theme=gemini] #view .tile-head {
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }
  body[data-theme=gemini] #view .tile-body { padding: 9px 10px 10px; }
}

/* secondary containers that pad themselves rather than their
   children — same number, so nothing in the workspace is inset at
   a value other than 14.

   .tpanel is deliberately NOT in this list: its markup is
   `<div class="card tpanel">` (app.js:5089/5568/5771), so the child
   mechanism above already insets it. Padding it here as well stacked
   14 on 14 and gave the Tools panel a 28px edge. Every class below is
   a bare container in the markup, never a .card. */
body[data-theme=gemini] #view .comm-card,
body[data-theme=gemini] #view .room-house,
body[data-theme=gemini] #view .plan-card,
body[data-theme=gemini] #view .gtile {
  padding: var(--tile-pad);
}

/* Per-page density is NOT in this sheet: it lives in the four
   page-group sheets loaded after it — pages-workspace.css,
   pages-research.css, pages-markets.css, pages-tools.css. */