/* The simple page look (page-design simplification, docs/project/pagedesign-build-plan.md slices 1 and 2).
   Opt-in per page: nothing here applies until the page sets <html data-simple>. Removing the attribute restores the Living Window look,
   and the classic switch (data-design="classic", localStorage "seppo-design") turns it off too.
   Linked after ui.css, pages.css and living.css. Four parts:
   1. one glass surface per content page (.simple-surface): the frosted pane; panels and cards inside it are flat, no glass on glass;
   2. six text sizes only (--text-12/14/16/20/28/40 from tokens.css); Pirata One only for the page title; gold capital labels stay;
   3. the underline tab row (.simple-tabs; site/shared/simple-tabs.js centres the current tab and adds the arrow keys);
   4. 44px hit targets and reduced motion.
   Specificity: every rule starts with html:root[data-simple]:not([data-design="classic"]) (0,2,1) so it wins over the page and pages.css rules it replaces,
   whatever the order of the style sheets. Flourishes (corner curls, the vine under the title) and the gold capital labels stay. */

/* ---- 1. The one glass surface ---- */
html:root[data-simple]:not([data-design="classic"]) .simple-surface {
  --glass-radius: var(--radius-panel, 40px);
  position: relative; isolation: isolate; box-sizing: border-box;
  color: var(--ui-text); border-radius: var(--radius-panel, 40px);
  background: var(--sheen), var(--simple-veil);
  border: var(--lead-w-panel, 1px) solid var(--lead, var(--lg-hairline));
  box-shadow: var(--lift);
  font: 400 var(--text-16)/1.5 var(--font-ui);
  /* One pane carries all the text of the page, so it is a little denser than thick glass and dims the scene behind it:
     measured 4.5:1 for every text on all four scenes by day and night (tools/shot/simple.mjs). */
  --simple-veil: rgb(var(--lg-ink) / calc(var(--ga, 1) * .74));
  --glass-blur: blur(calc(var(--ga, 1) * 24px)) saturate(calc(100% + var(--ga, 1) * 50%)) brightness(calc(1 - var(--ga, 1) * .22));
}
html:root[data-simple]:not([data-design="classic"])[data-time="day"]:is([data-scene="hall"], [data-scene="mere"], [data-scene="grove"], [data-scene="keep"]) .simple-surface {
  --simple-veil: rgb(var(--lg-ink) / calc(var(--ga, 1) * .78));
  --glass-blur: blur(calc(var(--ga, 1) * 22px)) saturate(calc(100% + var(--ga, 1) * 40%)) brightness(calc(1 + var(--ga, 1) * .06));
}
@media (max-width: 520px), (pointer: coarse) {
  html:root[data-simple]:not([data-design="classic"]) .simple-surface { --glass-blur: blur(calc(var(--ga, 1) * 14px)) saturate(calc(100% + var(--ga, 1) * 45%)) brightness(calc(1 - var(--ga, 1) * .22)); }
  html:root[data-simple]:not([data-design="classic"])[data-time="day"]:is([data-scene="hall"], [data-scene="mere"], [data-scene="grove"], [data-scene="keep"]) .simple-surface { --glass-blur: blur(calc(var(--ga, 1) * 14px)) saturate(calc(100% + var(--ga, 1) * 40%)) brightness(calc(1 + var(--ga, 1) * .06)); }
}
@media (prefers-reduced-transparency: reduce) {
  html:root[data-simple]:not([data-design="classic"]) .simple-surface { --simple-veil: rgb(var(--lg-ink) / .9); --glass-blur: none; }
}
/* The frost and the rim, as on every .glass surface (ui.css), for a surface that is not also a .glass element */
html:root[data-simple]:not([data-design="classic"]) .simple-surface:not(.glass)::before {
  --r: var(--frost-reach, 0px);
  content: ""; position: absolute; z-index: -1; inset: calc(var(--r) * -1); pointer-events: none;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  clip-path: inset(var(--r) round var(--glass-radius));
}
html:root[data-simple]:not([data-design="classic"]) .simple-surface:not(.glass)::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--rim);
}
/* No glass on glass, no plates: panels and cards inside the surface are flat, separated by a hairline */
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(.glass, .card, .simple-card) {
  background: none; box-shadow: none; border: 0; border-top: 1px solid var(--lg-hairline); border-radius: 0;
  --frost-reach: 0px;
}
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(.glass, .card, .simple-card)::before { content: none; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .glass::after { content: none; }
/* Card grids and fact rows of the content pages (pages.css .cards, .account-facts) become one column of flat rows */
html:root[data-simple]:not([data-design="classic"]) .simple-surface .cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .cards > .card { padding-inline: 0; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .account-facts { gap: 0; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .account-facts > div { padding: 10px 0; border-radius: 0; background: none; border-top: 1px solid var(--lg-hairline); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .account-facts > div:first-child { border-top: 0; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .simple-list { margin: 0; padding: 0; list-style: none; }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .simple-list > li { padding: var(--space-3, 12px) 0; border-top: 1px solid var(--lg-hairline); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .simple-list > li:first-child { border-top: 0; }

/* ---- 2. Six text sizes: 40 page title (28 on phones), 20 headings (.simple-heading), 16 body and titles of rows, 14 labels,
   buttons and the gold section labels (h2), 12 small print. Everything else inherits; Pirata One only for the page title. ---- */
/* Zero specificity: text without a size of its own takes the pane's 16px, while a page's own sizes (board cards, What is new rows) keep
   their hierarchy; the rules below set the six sizes on the common elements. */
:where(html[data-simple]:not([data-design="classic"]) .simple-surface *) { font-size: inherit; }
/* The initials in the account picture circle: 16px, near their own 18px (pages.css) and one of the six sizes */
html:root[data-simple]:not([data-design="classic"]) .simple-surface .avatar { font-size: var(--text-16); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(h1, .simple-title) {
  font: 400 var(--text-40)/1.1 var(--font-page-title); letter-spacing: .005em; color: var(--ui-title);
}
@media (max-width: 600px) {
  html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(h1, .simple-title) { font-size: var(--text-28); }
}
/* Section headings (h2) stay the gold capital labels Sebastian kept (brief 2026-10-28), at 14px; .simple-heading is the 20px heading */
html:root[data-simple]:not([data-design="classic"]) .simple-surface h2 {
  font: 700 var(--text-14)/1.2 var(--font-ui); letter-spacing: .12em; color: var(--ui-label);
}
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface .simple-heading {
  font: 600 var(--text-20)/1.25 var(--font-heading); letter-spacing: 0; text-transform: none; color: var(--ui-label);
}
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface :is(h3, h4, h5, h6, .card strong, .tool strong, .simple-row-title) {
  font-family: var(--font-ui); font-size: var(--text-16); font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ui-title);
}
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(p, li, dd, td, blockquote, figcaption, input, textarea, select, .simple-body) { font-size: var(--text-16); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(label, button, .button-link, th, legend, summary, small, .muted, .quiet, code, pre, kbd, .simple-label, .board-jump a) { font-size: var(--text-14); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(label, button, .button-link, th, legend) { font-family: var(--font-ui); letter-spacing: .01em; }
/* Form fields stay 16px so phones do not zoom in */
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(input, textarea, select) { font-size: var(--text-16); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(.badge, .legal-foot, .simple-small, dt, sup, sub) { font-size: var(--text-12); }

/* ---- 3. Underline tabs: one row, never wraps, scrolls sideways; the current tab is gold-underlined and centred by simple-tabs.js.
   Real links (aria-current="page") or buttons in a role="tablist" (aria-selected="true"). ---- */
html:root[data-simple]:not([data-design="classic"]) .simple-tabs {
  display: flex; flex-wrap: nowrap; gap: var(--space-5, 24px); margin: 0 0 var(--space-5, 24px); padding: 0 2px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth;
  border-bottom: 1px solid var(--lg-hairline); -webkit-overflow-scrolling: touch;
}
html:root[data-simple]:not([data-design="classic"]) .simple-tabs::-webkit-scrollbar { display: none; }
html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is(a, button, [role="tab"]) {
  flex: none; display: inline-flex; align-items: center; min-height: var(--hit, 44px); margin: 0 0 -1px; padding: 0 2px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none;
  font: 500 var(--text-16)/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none;
  color: var(--ui-text-soft); cursor: pointer;
}
html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is(a, button, [role="tab"])::before,
html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is(a, button, [role="tab"])::after { content: none; }
@media (hover: hover) {
  html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is(a, button, [role="tab"]):hover { color: var(--ui-title); border-bottom-color: var(--lg-hairline); }
}
html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is([aria-current="page"], [aria-selected="true"]) {
  color: var(--ui-title); font-weight: 700; border-bottom-color: var(--ui-label);
}
/* The focus ring sits inside the tab, so the scrolling row cannot clip it */
html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is(a, button, [role="tab"]):focus-visible {
  outline: 2px solid var(--ui-highlight); outline-offset: -2px; border-radius: var(--radius-small, 16px) var(--radius-small, 16px) 0 0;
}

/* ---- 4. Hit targets: buttons and link buttons inside the surface are at least 44px tall ---- */
html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(button, .button-link, select, .board-jump a):not(.simple-tabs > *, .help-tip *, .info) { min-height: var(--hit, 44px); min-width: var(--hit, 44px); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface .button-link { display: inline-flex; align-items: center; }

/* Reduced motion (as in the rest of the system): no smooth scrolling of the tab row, no transitions */
@media (prefers-reduced-motion: reduce) {
  html:root[data-simple]:not([data-design="classic"]) .simple-tabs { scroll-behavior: auto; }
  html:root[data-simple]:not([data-design="classic"]) .simple-tabs > *, html:root[data-simple]:not([data-design="classic"]) .simple-surface :is(a, button, summary) { transition: none !important; }
}
/* Windows high contrast: the current tab keeps a visible mark */
@media (forced-colors: active) {
  html:root[data-simple]:not([data-design="classic"]) .simple-tabs > :is([aria-current="page"], [aria-selected="true"]) { border-bottom-color: Highlight; }
}