/* Stellar shared system classes (prop-system, 2026-10-22 evening).
   Today's home page decisions as reusable classes for every page. Values come from the tokens in _style/tokens.css
   ("Current system" block); the rules are in DESIGN-PRINCIPLES.md, "Current system (2026-10-22 evening)", and the
   class list with markup examples is in notes/prop-system.md.
   Loaded by: every original page (imported at the top of _style/base.css), and the home page (linked after
   sections.css, with tokens.css linked before rework.css). Hand-written pages: link /_style/tokens.css BEFORE
   /_home/rework.css and /_style/system.css AFTER your own page css.
   Every selector here starts with .sx- and none of these names is used by the home page's own css, so loading this
   file changes nothing on a page until a class is put on an element. */

/* fig counter for .sx-fig (shares the home page's "fig" counter so Fig. numbers run on in one sequence) */
html{counter-reset:fig}

/* ---------- 1. section bands: neutral paper shades, no rules between sections ----------
   <section class="sx-band sx-band--shade"> ... Neighbouring sections should differ in shade or texture.
   Each band tells the panels inside it which shade to use (--stage-bg). */
.sx-band{position:relative;isolation:isolate;padding-block:var(--sec-y);overflow-x:clip}
.sx-band--tight{padding-block:var(--sec-y-tight)}
.sx-band--white{background-color:var(--band-white);--stage-bg:var(--panel-on-white)}
.sx-band--paper{background-color:var(--band-paper);--stage-bg:var(--panel-on-paper)}
.sx-band--shade{background-color:var(--band-shade);--stage-bg:var(--panel-on-shade)}

/* ---------- 2. faint textures: half strength, fading out toward every edge ----------
   .sx-grid-bg  32px graph paper (use on paper bands)      .sx-dot-bg  14px dot field (use on shade bands)
   They draw on ::before, so do not combine them with another ::before on the same element. */
.sx-grid-bg,.sx-dot-bg{position:relative;isolation:isolate}
.sx-grid-bg::before,.sx-dot-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--tex-opacity)}
.sx-grid-bg::before{background:var(--tex-grid);
  --sx-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--sx-g) 50% 0/32px 32px,var(--tex-fade);-webkit-mask-composite:source-in;
  mask:var(--sx-g) 50% 0/32px 32px,var(--tex-fade);mask-composite:intersect}
.sx-dot-bg::before{background:var(--tex-dot);
  --sx-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--sx-d) 50% 0/14px 14px,var(--tex-fade);-webkit-mask-composite:source-in;
  mask:var(--sx-d) 50% 0/14px 14px,var(--tex-fade);mask-composite:intersect}

/* ---------- 3. bleed panel: the panel that holds mock-up cards runs to the page edge ----------
   Put it in a column of a .wrap (max 1200px, side padding --wrap-pad). Default runs to the RIGHT wall;
   .sx-panel-bleed--left runs to the left wall. Flush and square on the wall side, --radius-bleed (36/32/28px) on the
   inner side, a 1px hairline on the three inner sides. The band around it needs overflow-x:clip (.sx-band has it). */
.sx-panel-bleed{
  --sx-bleed:max(var(--wrap-pad),calc((100vw - var(--wrap,1200px)) / 2 + var(--wrap-pad)));
  position:relative;background:var(--stage-bg,var(--panel));border:1px solid var(--line);border-right:0;
  border-radius:var(--radius-bleed) 0 0 var(--radius-bleed);
  margin-right:calc(-1 * var(--sx-bleed));padding:var(--bleed-pad) var(--sx-bleed) var(--bleed-pad) var(--bleed-pad)}
.sx-panel-bleed--left{border-right:1px solid var(--line);border-left:0;border-radius:0 var(--radius-bleed) var(--radius-bleed) 0;
  margin-right:0;margin-left:calc(-1 * var(--sx-bleed));padding:var(--bleed-pad) var(--bleed-pad) var(--bleed-pad) var(--sx-bleed)}
@media (max-width:1024px){.sx-panel-bleed{--sx-bleed:var(--wrap-pad)}}
/* a contained panel (no bleed), same shade and hairline, 16px corners: e.g. the competitions card */
.sx-panel{background:var(--stage-bg,var(--panel));box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-l);padding:var(--bleed-pad)}

/* ---------- 4. white sheets that pop out (product mock-ups, previews) ----------
   .sx-sheet-pop  white sheet, 16px corners, near-invisible edge, layered soft shadow; lifts 2px on hover.
   .sx-card a quieter card (rest shadow + hairline) for text content; .sx-card.sx-lift lifts on hover. */
.sx-sheet-pop{background:var(--sheet);border:1px solid var(--sheet-edge);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);
  transition:translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sx-sheet-pop:hover{translate:0 var(--lift);box-shadow:var(--shadow-float)}
.sx-card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-rest)}
.sx-lift{transition:translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.sx-lift:hover{translate:0 var(--lift);box-shadow:var(--shadow-raised)}

/* ---------- 5. figure captions: "Fig. N" under a mock-up ----------
   <figure class="sx-fig"><div class="sx-sheet-pop">...</div><figcaption>What it shows <a class="link-arrow" ...>Try it</a></figcaption></figure>
   Or a bare caption line: <p class="sx-fig-cap"><span>What it shows</span> <a ...>Try it</a></p> */
.sx-fig{margin:0}
.sx-fig>figcaption,.sx-fig-cap{counter-increment:fig;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;
  margin-top:18px;padding:12px 6px 0;border-top:1px dashed var(--line-2);font:500 15px/1.35 var(--font);color:var(--ink)}
.sx-fig>figcaption::before,.sx-fig-cap::before{content:"Fig. " counter(fig);flex:none;padding-right:10px;
  border-right:1px solid var(--line-2);font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.sx-fig>figcaption>:first-child:not(a),.sx-fig-cap>:first-child:not(a){margin-right:auto}
.sx-fig>figcaption a,.sx-fig-cap a{font-weight:500}
[dir=rtl] :is(.sx-fig>figcaption,.sx-fig-cap)::before{padding-right:0;padding-left:10px;border-right:0;border-left:1px solid var(--line-2)}
[dir=rtl] :is(.sx-fig>figcaption,.sx-fig-cap)>:first-child:not(a){margin-right:0;margin-left:auto}

/* ---------- 6. stats: unboxed centred numbers between 1px vertical hairlines ----------
   <dl class="sx-stats"><div><dt>Courses</dt><dd>80+</dd></div>...</dl> also works; simplest:
   <div class="sx-stats"><div><b>80+</b><span>Courses</span></div><div><b class="inf">∞</b><span>Practice questions</span></div></div>
   Never a rounded box per stat, never left-aligned. The ∞ sign is drawn at the numbers' visual size (.inf).
   .sx-stats--strip: the hero's single white strip (one sheet, cells between hairlines). */
.sx-stats{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;margin:0;padding:0;list-style:none}
.sx-stats>*{flex:0 1 auto;min-width:0;margin:0;padding:2px var(--stat-pad);text-align:center;border-left:1px solid var(--line)}
.sx-stats>:first-child{border-left:0}
.sx-stats :is(b,.sx-num){display:block;font:400 var(--stat-num)/1 var(--font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.sx-stats :is(b,.sx-num).inf{font-size:calc(var(--stat-num) * 1.6);line-height:var(--stat-num)}
.sx-stats>*>span{display:block;margin-top:8px;font:400 13px/1.3 var(--font);letter-spacing:0;color:var(--muted);white-space:nowrap}
.sx-stats--strip{flex-wrap:nowrap;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}
.sx-stats--strip>*{flex:1 1 0;padding:24px 18px}
.sx-stats--strip :is(b,.sx-num){font-weight:500;font-size:30px;letter-spacing:-.03em}
.sx-stats--strip :is(b,.sx-num).inf{font-size:48px;line-height:30px;font-weight:400}
@media (max-width:720px){
  .sx-stats>*{flex:1 1 30%}
  .sx-stats>:nth-child(3n+1){border-left:0}
  .sx-stats>:nth-child(n+4){margin-top:20px}
  .sx-stats--strip{flex-wrap:wrap}
  .sx-stats--strip>*{flex:1 1 50%;padding:18px 10px;border-left:0}
  .sx-stats--strip>:nth-child(even){border-left:1px solid var(--line)}
  .sx-stats--strip>:nth-child(n+3){margin-top:0;border-top:1px solid var(--line)}
  .sx-stats--strip :is(b,.sx-num){font-size:26px}
}

/* ---------- 7. comparison table: compact rows, dashed row rules, a square green highlight column ----------
   <div class="sx-cmp-wrap"><table class="sx-cmp"> ... <th class="me"> / <td class="me"> for the Stellar column */
.sx-cmp-wrap{position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-rest);overflow:auto}
.sx-cmp{width:100%;border-collapse:separate;border-spacing:0;font:400 15px/1.35 var(--font);color:var(--text)}
.sx-cmp :is(th,td){padding:var(--cmp-cell-y) var(--cmp-cell-x);text-align:center;border-bottom:1px dashed var(--rule-dash);border-radius:0}
.sx-cmp thead th{padding-top:10px;padding-bottom:9px;font:500 14px/1.2 var(--font);color:var(--ink);vertical-align:bottom;border-bottom:1px solid var(--line)}
.sx-cmp tbody th{text-align:left;font-weight:500;color:var(--ink);padding-left:28px}
.sx-cmp tr:last-child>:is(th,td){border-bottom:0}
.sx-cmp .me{background:var(--cmp-hi);color:var(--green-dd)}
.sx-cmp thead .me img{width:24px;height:24px;margin:0 auto 4px}
.sx-cmp tbody tr:hover>:is(td,th):not(.me){background:var(--soft)}
@media (max-width:720px){.sx-cmp{font-size:13.5px}.sx-cmp tbody th{padding-left:16px}}

/* ---------- 8. quote rules: short centred half-width hairlines that set off a quote or testimonial ----------
   On the quote's section (or any block): a 1px line above and below, half the block's width, centred.
   Uses background-image, so it combines with .sx-band (background-color) and the textures (::before). */
.sx-quote-rule{
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;background-size:50% 1px;background-position:50% 0,50% 100%}
.sx-quote-rule--top{background-image:linear-gradient(var(--line),var(--line));background-position:50% 0}
/* a standalone short rule: <hr class="sx-rule-short"> */
.sx-rule-short{width:50%;height:1px;margin:0 auto;border:0;background:var(--line)}

/* ---------- 9. motion helpers ----------
   Scroll reveal on hand-written pages comes from /_home/rework.js: elements with [data-sx-reveal] (and .sx-sheet-pop,
   .sx-stats, .sx-panel-bleed, .sx-fig inside section.sec) fade and rise once. Original (Svelte) pages get no reveal. */
@media (prefers-reduced-motion:reduce){
  .sx-sheet-pop,.sx-lift{transition:none!important}
  .sx-sheet-pop:hover,.sx-lift:hover{translate:none!important}
}