is this wide on EVERY page, so two stacked blocks are never different lengths (Atakan 2026-07-27, standing design rule — see `main > *` below). Single source: never hardcode a block width again, and never give a top-level block its own max-width. A component that needs a narrower reading measure caps an INNER wrapper (cf. .solac-lib-grid), not the block itself. */ --solac-block-max: 1400px; /* Semantic tints for the Follow-Up Simulator. Four-tier per-cell colour scheme against the account's own overdraft, plus the rescue/estimate accents the renderer relies on: red = balance < overdraft (broken) yellow = overdraft <= balance < 0 (overdrawn but within limit) default= 0 <= balance <= abs(overdraft) (positive, no buffer above) green = balance > abs(overdraft) (comfortable cushion) The whole-row red background is reserved for the terminal day when rescue is impossible. ⚠ THE KEYS ARE UNCHANGED AND THE VALUES ARE NOT — these were dark-scheme tints (a #3a1a1a row under #fecaca text). On paper that pair renders a black gash with pink writing in it, so each one is re-read for the paper ground: the *-bg names are washes, the *-fg / *-cell names are ink dark enough to sit on them. Nothing that consumes them had to move. */ --break-bg: #FFDEDE; --break-fg: #7A0F0C; --break-cell: #B3231F; --warn-cell: #7A5200; --good-cell: #0B7A3B; --rescue-bg: #FFEFD9; --rescue-fg: #6B3E00; /* TYPE (R5, from the v2 mock he approved). THREE faces, and the third has a narrow job: --font-head Archivo 900 — headings and the loud numbers. Type IS a design element here. --font-sans Inter — body, labels, buttons, everything a person reads as prose. --font-mono IBM Plex Mono — NUMBERS, table cells, ids and codes ONLY. It is no longer the house body face; a mono UI is the terminal layer this scheme replaced (R10). ALL THREE ARE SELF-HOSTED from /helpers/fonts (the @font-face blocks at the top of solac.css) — no CDN, offline-first, and Archivo/Inter ship as ONE variable woff2 per subset. Every stack still ends in a real system fallback, so a font that fails to load is plain, never broken. */ --font-head: Archivo, Inter, ui-sans-serif, system-ui, sans-serif; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-size: 15px; --line-height: 1.55; } /* end solac-tokens:palette */ /* ---- theme: PAPER ONLY (Atakan 2026-08-26) ------------------------------------------ ONE scheme, no picker, and — his T0 answer 3 — NO DARK MODE: `prefers-color-scheme` is not consulted anywhere in this sheet and must not be. The graphite variant, the night variant and the cream|brownie switch are all gone; stale 'solac-theme' localStorage keys are simply ignored. ⭐ AND THE INVERT CAME OFF THE MARKS. They were drawn near-black (#24201C, measured) on cream and were being flipped to near-white for the graphite ground. On paper the original ink is exactly right, so the filter is not adjusted — it is deleted. A mark that has to be filtered to sit on its own page is a mark fighting the scheme. */ /* ---- print (the manual/PDF path, and anybody's ctrl-p) --------------------------------- A hard 5px ink shadow on every box is a toner tax and an offset box misaligns on paper — the one place this scheme's grammar does not pay for itself. Borders stay (they carry the structure), shadows go. Declared HERE, at the top, so no component can forget it. */ @media print { * { box-shadow: none !important; } } /* ---- base reset (self-hosted — replaces water.css) ----------------------- solac.css already styles every element our markup uses (forms/tables/buttons/etc. below); water.css only still provided a GLOBAL box-sizing reset, responsive media, and a selection colour. Those three live here so the CDN water.css can be dropped — offline-first / sovereign (see docs/archive/css_rewrite_plan.md). Verified pixel-identical with vs without water.css on the kitchen-sink (all house patterns). */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } img, video, svg { max-width: 100%; height: auto; } ::selection { background: var(--accent); color: var(--fg); } /* ---- base ---------------------------------------------------------------- */ body { font-family: var(--font-sans); font-size: var(--font-size); line-height: var(--line-height); color: var(--fg); background: var(--bg); /* ⚠ THE TOKEN, NOT A CLAMP. It was `clamp(1rem, 4vw, 4rem)` — right for a page whose blocks all sit INSIDE the gutter, and impossible for a full-bleed band, which has to reach back by exactly what the page indents by. A negative clamp does not exist, and reproducing the clamp in the margin leaves the two to drift apart at some viewport nobody measured (a hairline of paper down one edge of the hero). One number, one direction each way; the phone value is a media query below. */ padding: var(--page-pad); margin: 0; max-width: unset; text-align: center !important; } /* HEADINGS SHOUT (R5). Archivo 900 with a tightened track is the loudest element on any screen — in this language type IS the design, which is why the sizes step hard rather than politely. */ /* the page gutter on a phone. One place, and the hero's negative margin follows it automatically because both read the same token. */ @media (max-width: 700px) { :root { --page-pad: 1rem; } } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 900; margin-top: 14px; margin-bottom: 12px; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: 2.4rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.15rem; } h4, h5, h6 { font-size: 1rem; } hr { border: none; border-top: var(--border-w) solid var(--border); margin: 2rem 0; } /* ⭐ A LINK IS INK, UNDERLINED — the accent is a FILL and can never be a text colour again (it is a pastel: cyan type on paper is unreadable, which is the whole reason this rule changed with the scheme). The click cue is the underline; hover paints the accent BEHIND the words, which is both the movement's idiom and #12's "no colour-coded words". */ a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--fg); background: var(--accent); } /* Masthead — borderless page header: centered app logo, app name under it, optional placeholder tagline. Overrides the "card every top-level div" rule (main > div). */ /* ⭐ THE MASTHEAD IS THE HERO BAND (T2, 2026-08-26) — the v2 mock's first screen. Full width, the app's own signature colour, the lockup centred on it. A page says which app it is before a word is read, in the same colour its icon wears on the phone. ⛔ IT HAS TO CANCEL EVERY PROPERTY THE CARD RULE SETS. The opt-out listed only border/background/ padding, so when the card gained a shadow the borderless masthead rendered a hard ink L hanging off nothing, down the right of every page (caught in the first panel render of the new scheme). That is the standing cost of an opt-out written property by property — when the card grows a property, this grows a line. ⚠ FULL-BLEED WITHOUT `100vw`. The obvious `width:100vw; margin-inline:calc(50% - 50vw)` includes the scrollbar in the viewport width, so on this box (a 15px gutter) every page gains a horizontal scrollbar — the one thing #21 says the body must never do. `margin-inline: calc(-1 * var(--page-pad))` uses the body's OWN padding instead: the band reaches exactly the edges the page has, no more, and there is nothing to overflow. The token is what body's padding is set from, so the two cannot drift. */ .solac-masthead { border: none !important; box-shadow: none !important; max-width: unset !important; margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 2rem !important; padding: 2.6rem var(--page-pad) 2rem !important; background: var(--bg) !important; border-bottom: var(--border-w) solid var(--border) !important; } /* the band variants stood here — gone with the set (2026-09-07): no surface wears a band */ .solac-masthead .solac-mast-logo { width: 96px; height: auto; margin: 0 auto 0.4rem; display: block; } .solac-masthead .solac-mast-name { font-family: var(--font-head); font-size: 2.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0; } /* links inside the lockup (app name → app home, "solac" → studio) carry no underline — the lockup is a title, not prose — and take the accent as a HIGHLIGHT on hover like every other link. */ .solac-masthead .solac-mast-name a { color: var(--fg); text-decoration: none; } .solac-masthead .solac-mast-name a:hover { background: var(--accent); } /* a link that wraps an IMAGE carries no underline — and the case that proved it is the one where the image is missing: the harness renders the mark from a URL path it cannot resolve, and the alt text then appears underlined, which is the only moment anybody sees the rule at all. */ .solac-masthead .solac-mast-logolink { display: inline-block; text-decoration: none; } .solac-masthead .solac-mast-logolink:hover { background: none; } /* the hero's action row — the pills sit under the lockup, on the band */ /* "solac " lockup — the studio half sits one weight down so the APP is the word you read. */ .solac-by { font-weight: 400; font-style: normal; opacity: 0.6; } .solac-studio { font-weight: 500; font-style: normal; } /* ============================================================================ SOLAC NEO-BRUTALISM — the primitive layer (Atakan 2026-08-26; design_system.md §0). His words: *"kesinlikle light versiyon neo brutalism'de… bütün sisteme"*, on the v2 mock *"o kadar hoşuma gitti ki… on numara"*. Reference sheet: docs/design/mocks/neo_brutalism_2026-08-26/v2_pastel_grotesk.html. ⛔ THE TERMINAL LAYER IS GONE (R10, his call: *"terminal sistemini kaldırırız"*). What stood here was: a `// ` prefix generated in front of every secondary line, `[ ]`/`[x]` bracket checkboxes, `[ verb ]` brackets around every button, `▸/▾` markers, and a mono UI. All of it is removed rather than toned down — a scheme that keeps the old layer's chrome is two schemes. The classes that survived (`.solac-comment`) survived as PLAIN roles: muted secondary text, no prefix. The dead ones (`.solac-prompt*`, `.solac-toggle`) are deleted; both had zero consumers in the tree (grepped), and the prompt masthead had already been pulled by him on 2026-08-23. THE GRAMMAR, in four lines, and every component below is one of them: · a BOX is white on paper, `--border-w` ink border, `--shadow-x/y` HARD ink shadow, radius 0 · a CONTROL is a pill: same border, `--shadow-btn`, and PRESS slides it into its own shadow · a BAND is a pastel ground with ink on top — never a tint, never an opacity · nothing hovers by moving; hover changes COLOUR, press is the only motion (his T0 answer 4) ============================================================================ */ /* ── THE BOX ────────────────────────────────────────────────────────────────────────────────────── One rule, reached for by name, so a new component is correct by writing four characters instead of copying five declarations. Everything the house draws as a box uses this or is generated from it. */ .solac-box { background: var(--bg-elev); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--border); } /* ── THE INK LINE (his word 2026-09-07 night) ───────────────────────────────────────────────────────── Every border is DRAWN per box by core/assets/ink.js (served as /helpers/js/ink.js): the drawings' rule — per edge, corners pinned, a sample every --ink-step, ±--ink-amp on both axes, seeded per box. A repeating border-image tile was tried first and read as mechanical (his eye, 2026-09-07 night); a line drawn to each box's own size does not. */ /* ── THE BANDS ──────────────────────────────────────────────────────────────────────────────────── A band paints a whole section (the mock's full-bleed rows) or fills one card. Ink never changes on top of one — that is what the ≥7:1 measurement in tokens.json buys. */ /* ⭐ THE PER-APP SIGNATURE BAND (R8, his T0 answer 1). A card carries its app's colour as a thin stripe down the left edge of its header — present when the block is SHUT, which is the only time it has to do any work (#13: every collapsible arrives closed, so the shut header is the card). The assignment lives in tokens.json's $app_bands and reaches the markup as `data-band=""` via solac_app_band(); an app with no assignment renders no stripe, deliberately — a guessed colour is worse than none, and T3 is where the rest are chosen. */ /* THE SET (2026-09-07): the band rules that stood here — the stripe, the coloured pill, the open header fill — are gone. No surface wears a band. */ /* ⭐ AND THE PILL CARRIES IT TOO (fable audit 2026-08-27). The 8px stripe alone was not enough: at that width sage/mint/fern/olive and sky/powder/cyan did not separate for the eye, so the measured ΔE 8.1 — which is honest as a swatch — bought nothing on the actual card. The chevron is a 24px round area, the one round thing in the component, and filling it with the band gives the colour a surface big enough to read. The stripe stays: it is what aligns down a stacked list. Ink on top is unchanged — every band measures past 9:1 against it, which is what makes this safe at all. ⚠ THE ATTRIBUTE IS REPEATED ON PURPOSE — it buys one specificity step, and without it these rules silently lose. The house pill is scoped `main > details > summary::before`, but the owner panel renders with NO

, so solac_brain.css re-declares the pill as `details[data-collapse] > summary::before` — same specificity as a single [data-band], and later in the cascade, so it won and every pill stayed state-warn yellow. Measured on the first render, not reasoned about. ⚠ The real defect underneath is that the house pill is

-scoped at all and the panel had to copy it; unscoping it is a bigger change than this audit item and is not smuggled in here. */ /* ⭐ AND THE OPEN HEADER'S GROUND (his ruling 2026-08-30, option A) — the same band, on the surface that actually carries the page's colour. The stripe above still aligns a stacked list of SHUT cards; this is what an OPEN one looks like. ⚠ Repeated attribute for the same specificity reason as the pill rules above: `main > details[open] > summary` is two elements + a pseudo-class, so a single `[data-band]` loses to it. */ /* ⛔ AND THE PILL GOES TO PAPER — WHEN THE BLOCK IS OPEN, and only then (his ruling 2026-08-30). ⭐ THE STATE IS THE WHOLE ANSWER, and getting it wrong undoes an audit instead of completing it: · SHUT — the header is neutral, so the pill IS where the band lives (audit 2026-08-27: an 8px stripe alone did not separate sage/mint/fern for the eye, and the pill is the one round 24px surface big enough to carry a colour). Unchanged. · OPEN — the header now carries the band, so a band pill is band-on-band, readable only by its border; and `--state-warn` yellow on a lemon header is what the mac measured as weak (S16). Paper is the one neutral surface every band separates from, and the colour has already done its work on the header behind it. ⚠ SCOPED TO [open] FOR SPECIFICITY TOO, not only for meaning — measured: the first attempt was `details[data-band] > summary::before` (one attribute, two elements) and it LOST to the band rules above (two attributes, one element), so the pill silently stayed banded and the browser said so. */ main > details[open][data-band] > summary::before, main > div > details[open][data-band] > summary::before { background: var(--bg); } /* ── SECONDARY TEXT ─────────────────────────────────────────────────────────────────────────────── Was the terminal `// ` comment voice; now it is simply the muted subline — taglines, hints, empty-state explanations. The role did not change, only the chrome in front of it. */ .solac-comment { color: var(--fg-muted); } /* ── CHECKBOXES ─────────────────────────────────────────────────────────────────────────────────── A real box again: ink square, ink tick, sized to the type. The bracket glyphs went with R10. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.05em; height: 1.05em; margin: 0 .4em 0 0; padding: 0; border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--bg-elev); cursor: pointer; vertical-align: -0.15em; display: inline-block; position: relative; } input[type="checkbox"]:checked { background: var(--bg-elev); border-width: var(--border-w-strong); } /* the set: an ink tick on paper, no fill */ input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 0.24em; top: 0.02em; width: 0.3em; height: 0.6em; border: solid var(--fg); border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="checkbox"]:focus-visible { outline: var(--focus-w) solid var(--border); outline-offset: 2px; } p { margin: 0.5rem 0; } small { color: var(--fg-muted); } /* ---- section cards ------------------------------------------------------- */ /* Only top-level section divs (direct children of

, which is the wrapping element in each app's index.php) get the dashed border. Inner divs used as form helpers (recurring-preview, credit-card-fields, inline forms, inbox rows, etc.) stay borderless and invisible. Body > div is kept as a fallback in case a future layout drops the

wrapper. */ /* THE CARD.

is here for the same reason

is: it is a top-level block, and which TAG a view happened to reach for must not decide whether the block reads as one. Before 2026-07-27 the card was keyed to

alone, so the owner panel — which builds its blocks as

— rendered them borderless: measured 1400px wide by the equal-width sentinel, but SEEN as a narrow ~770px table floating next to a full-width dashed card. Equal width is not equal LOOK; the eye reads edges, so the card has to be as generic as the width rule above it. */ main > div, main > section, body > div { background: var(--bg-elev); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--border); padding: 1.25rem; margin: 1.5rem auto 2rem; max-width: var(--solac-block-max); } /* ⭐ EQUAL-WIDTH BLOCKS — STANDING DESIGN RULE (Atakan 2026-07-27, "her sayfada eşit olsun"). Every direct child of

gets the SAME width on EVERY page. Two stacked blocks must never read as different lengths — that was a recurring bug (a component set its own max-width and silently won on specificity: .solac-lib's 820px vs the house card's 1400px on /health/water). This catch-all covers blocks that are NOT plain divs (details, section, forms, future tags), so a new block type is correct by default with no per-app CSS. Opting out is deliberate and explicit: use !important (cf. .solac-masthead, which is full-bleed). Do NOT put a max-width on a top-level block to make its CONTENT narrower — cap an inner wrapper. */ main > * { max-width: var(--solac-block-max); margin-inline: auto; } /* ⭐ …AND A TABLE STANDING AT THE TOP LEVEL IS STILL A TOP-LEVEL BLOCK (#23292, /brain's drain list). This is the .solac-lib bug one element type over, and it is worth naming because the catch-all above reads as if it already covered it. `.solac-table-one` carries `max-width:100%` — correct, and needed, for the tables that live INSIDE a block. Directly under

that 100% resolves against

's own 1500px instead of the house cap, and a class (0,1,0) beats `main > *` (0,0,1) on specificity, so the table rendered 1500 beside 1400 siblings. Restoring the token here is not a bespoke width — it is the same `--solac-block-max` the rule above hands every other block, put back where a component overrode it (which is exactly what #21 says to do: never a NEW number, always the single source). */ main > table.solac-table-one { max-width: var(--solac-block-max); } /* a card's first/last child drops its own outer margin, so the card's padding is the ONLY gap — equal top and bottom (Atakan 2026-07-26: the h3's margin-top made the top space bigger than the bottom). */ main > div > :first-child, main > section > :first-child { margin-top: 0; } main > div > :last-child, main > section > :last-child { margin-bottom: 0; } /* ============================================================================ HOUSE DEFAULT — the studio block system (single-source; every app the same). Apps wrap page content in

; real section blocks are

(or section divs) either direct under

or one level inside a single wrapper div. Card each block; make the wrapper a transparent pass-through so we never get a card-inside-a-card. Adding a new app needs NO per-app CSS — just emit

blocks. (Atakan 2026-06-15: solac post'taki sistem default olmalı, her proje aynı mantıkta.) ============================================================================ */ /* wrapper pass-through. NOTE: do NOT use :has() here — it forces an expensive whole-page style recalc every time a

toggles [open] (froze the editor on open). Explicit wrapper ids instead. A new app's wrapper div just adds its id to this list. ⛔ #post-manager-live and #credits_generator-main were REMOVED here (BRIEF 2/S5, 2026-08-01, sonnet_queue.md): neither app has a web frontend any more (solac_post and solac_credits, both API-only now, #11) and grep found zero PHP anywhere emitting either id — dead selectors, nothing left to wrap. If a future app needs this pattern, add its wrapper id back to the list below. */ /* ⭐ THE COLLAPSE BLOCK, IN THE NEO-BRUTALIST GRAMMAR. Two states, and the difference between them is the whole point of the component: CLOSED → border only, no shadow, paper ground. It is a line of information, not an object. OPEN → the shadow appears and the summary takes a mint band. The block LIFTS when you open it. That reading was chosen in the research and it settles #13's one tension with this style: every collapsible arrives closed (his 2026-07-31, no exception), so if a shut block carried a 5px shadow a long page would be a wall of floating slabs. Here a shut page is quiet and an open block is unmistakable — which is also #13's counterpart duty (a closed header carries its own information) being helped rather than fought. */ main > details, main > div > details { display: block; /* block (the element default) so text-align:center applies to content */ border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--bg-elev); /* ⛔ THE INSET IS PADDING ON THE BLOCK, NOT MARGIN ON ITS CHILDREN, and that is a measured correction rather than a preference. A `

` has no element wrapping its body, so the obvious move is `> :not(summary) { margin-inline: … }` — and `.solac-table-one` is `width: 100%`, which resolves against the CONTAINING BLOCK and then gets pushed outward by the margin instead of shrinking. css_block_width.py went red on exactly that: 1396px direct-child tables against 1359px nested ones inside the same card, i.e. a table hanging 37px out of the card that holds it. Padding shrinks the containing block, so every table inside agrees. The summary is pulled back out to the edges with a negative margin (the standard trick) so the header still spans the card. */ padding: 0 1.15rem; margin: 1.2rem auto; max-width: var(--solac-block-max); text-align: center; /* centre the card's content */ } main > details[open], main > div > details[open] { padding-bottom: 1rem; } main > details[open], main > div > details[open] { box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--border); margin-bottom: 1.9rem; /* room for the shadow, so the next block never sits on it */ } /* the summary is a HEADER ROW: centered title, a pill chevron on the left. The `+`/`−` in the pill replaces the terminal `▸/▾` markers (R10) — same information, drawn as an object. */ main > details > summary, main > div > details > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.3; padding: 0.75rem 1.15rem; margin: 0 -1.15rem; text-align: center; } /* ⛔ THE OPEN HEADER CARRIES THE APP'S OWN BAND — his ruling 2026-08-30, option A. It said `--band-mint` for every app until then, which is a FIXED HOUSE COLOUR ON A PER-APP SURFACE: the exact thing §0c had already called wrong when it fixed the iOS side, applied to the loudest half and left standing here. Measured in a browser that day, not reasoned about — a lemon app and a sage app both rendered a mint header, and solac offload's "three greens" defect was fixed on iOS while still live on the web. ⚠ mint stays as the FALLBACK, for the block with no `data-band` (the studio's own surfaces, which have no app and therefore no band — §0c: the container is deliberately uncoloured). */ main > details[open] > summary, main > div > details[open] > summary { background: var(--bg-elev-2); border-bottom: var(--border-w) solid var(--border); margin-bottom: 1rem; } main > details > summary::-webkit-details-marker, main > div > details > summary::-webkit-details-marker { display: none; } /* THE PILL CHEVRON — the one round thing in a square component (R6). Content is `+`/`−`, so it says what a tap will do without a glyph anyone has to learn. */ main > details > summary::before, main > div > details > summary::before { content: "+"; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; line-height: 1.25rem; border: var(--border-w) solid var(--border); border-radius: var(--radius); /* the set: a square marker (his word 2026-09-07) */ background: var(--bg-elev); /* the set (2026-09-07): an ink "+" on paper, no fill */ font-family: var(--font-head); font-weight: 900; font-size: 0.95rem; text-align: center; } main > details[open] > summary::before, main > div > details[open] > summary::before { content: "\2212"; } /* − U+2212, not a hyphen */ main > details > summary small, main > div > details > summary small { font-weight: 400; color: var(--fg-muted); } /* nested blocks inside a card → the same box one weight down: thin border, no shadow, no band. A sub-block drawn at full card weight inside its parent reads as two competing blocks. */ /* ⚠ AND A NESTED BLOCK ADDS NO HORIZONTAL INSET OF ITS OWN (#9963, and the width proof above is the same argument): its side borders and side padding both come off, so a table two levels down measures exactly what a table one level down does. It keeps its vertical breathing room and its top/bottom rules — that is what stops it touching the rows around it. */ main > div > details details, main > details details { display: block; border: var(--border-w-thin) solid var(--border); border-left: 0; border-right: 0; border-radius: var(--radius); background: var(--bg); box-shadow: none; padding: 0; margin: .7rem 0; max-width: none; text-align: center; } main > div > details details > summary, main > details details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.8rem; margin: 0; font-weight: 700; } main > div > details details[open] > summary, main > details details[open] > summary { border-bottom: var(--border-w-thin) solid var(--border); margin-bottom: .6rem; } main > div > details details > summary::-webkit-details-marker, main > details details > summary::-webkit-details-marker { display: none; } main > div > details details > summary::before, main > details details > summary::before { content: "+"; flex: 0 0 auto; width: 1.2rem; height: 1.2rem; line-height: 1rem; border: var(--border-w-thin) solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elev); font-weight: 900; font-size: 0.8rem; text-align: center; } main > div > details details[open] > summary::before, main > details details[open] > summary::before { content: "\2212"; } /* A collapsible sub-block one level INSIDE a top-level card — the owner panel's shape, where a

holds several

(solac custody has seven). It gets the same lighter treatment as the nested sub-cards above, and for the same reason: a sub-block drawn at full card weight inside its parent card reads as two competing blocks instead of a section and its parts. The [data-collapse] in the selector is not decoration — core/collapse.php styles every such

as a FULL-WIDTH card, which is right at top level and wrong one level in, and that rule would otherwise win on specificity. ⛔ THE SELECTOR SAID [data-pref-key] UNTIL 2026-08-26 AND HAD MATCHED NOTHING SINCE 2026-07-29, when the collapse prefs were removed and the attribute was renamed to `data-collapse` (its own comment in collapse.php records the rename and this call site was not swept with it). So the panel's sub-blocks have been rendering at full card weight for a month — found while restyling them, which is the only reason it surfaced at all: a dead selector breaks nothing, it just quietly stops. */ main > section > details[data-collapse] { margin: .7rem auto; max-width: none; box-shadow: none; } /* Forms inline + centered by default (overrides the base

grid below, which stacks fields at 480px). Inline edit-row forms keep their own style="display:inline". */ main form:not(.solac-inline-action) { display: block; max-width: none; text-align: center; margin: 8px 0; } main form:not(.solac-inline-action) input[type="text"], main form:not(.solac-inline-action) input[type="number"], main form:not(.solac-inline-action) input[type="email"], main form:not(.solac-inline-action) input[type="password"], main form:not(.solac-inline-action) input[type="url"], main form:not(.solac-inline-action) input[type="file"], main form:not(.solac-inline-action) input[type="datetime-local"], main form:not(.solac-inline-action) select, main form:not(.solac-inline-action) textarea, main form:not(.solac-inline-action) button { display: inline-block; width: auto; max-width: 92%; vertical-align: middle; margin: 3px 4px; } /* ⛔ `main` CARRIES NO WIDTH CAP, and removing the old 1500px is what lets the hero actually be full-bleed. Measured before and after: at 1920 the band stopped at 178…1742 — the page's own 1500px box — because a negative margin can only give back the BODY's padding, never a parent's centring margin. Every block inside is capped and centred by `main > *` (--solac-block-max, 1400) on its own, so main's cap constrained nothing except the one element that must escape it. ⚠ THE ALTERNATIVE WAS `width:100vw`, and it was rejected on measurement: 100vw includes the scrollbar, so on this box every page would gain a 15px horizontal scrollbar — the exact thing #21 forbids — and clipping it back would leave the band off-centre by half a gutter. css_block_width.py measures the blocks, not main, and stays the proof that nothing widened. */ main { display: block; margin: 0 auto; max-width: none; } /* ---- forms --------------------------------------------------------------- */ form { display: grid; grid-template-columns: 1fr; gap: 0.55rem; max-width: 480px; margin: 0.75rem auto; justify-items: center; } /* ── INPUTS ─────────────────────────────────────────────────────────────────────────────────────── A field is a BOX, not a pill: square, ink-bordered, white. It has no shadow — a form of eight floating slabs is unreadable, and the field is a hole in the page rather than an object on it. `url` and `date` are in this list on purpose: they were missing once and an inline-action form rendered a bright native input in the middle of a themed panel (2026-07-27). Keep the two lists (this one and `main form:not(.solac-inline-action)` above) in step. */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="datetime-local"], textarea, select { width: 100%; max-width: 380px; padding: 0.55rem 0.8rem; font: inherit; font-family: var(--font-sans); background: var(--bg-elev); color: var(--fg); border: var(--border-w) solid var(--border); border-radius: var(--radius); text-align: center; box-sizing: border-box; } input::placeholder, textarea::placeholder { text-align: center; color: var(--fg-dim); } /* FOCUS = A SECOND HARD RING, offset so it reads as a ring and not a thicker border. Ink, not a colour: on paper an accent ring is a pastel halo, which is exactly the thing this scheme refuses. */ input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: var(--focus-w) solid var(--border); outline-offset: 2px; } input:focus, textarea:focus, select:focus { outline-offset: 2px; } input:disabled, select:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* ── BUTTONS ────────────────────────────────────────────────────────────────────────────────────── THE PILL (R6) with a 4px hard shadow, and PRESS IS THE ONLY MOTION (his T0 answer 4): the button slides by exactly its own offset and the shadow collapses to nothing, so it reads as being pushed flat against the page. Hover changes colour and nothing else — a button that jumps on hover makes a dense panel twitch as the pointer crosses it. */ button, .solac-btn { display: inline-block; padding: 0.5rem 1.2rem; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; background: var(--bg-elev); color: var(--fg); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-btn) var(--shadow-btn) var(--shadow-blur) var(--border); cursor: pointer; text-decoration: none; transition: background 0.12s ease; } button:hover, .solac-btn:hover { background: var(--accent-hover); } /* ⭐ THE PRIMARY VERB IS CYAN — the studio's accent doing the one job his T0 answer 2 gave it ("sign-in pill, studio CTAs"). It is the DEFAULT for a submit rather than a class somebody has to remember, so the one button on a form that actually commits is coloured on every page in the house without a single view being edited. Green stays a STATE and is opted into (.solac-btn-ok). */ /* THE SET (his rulings 2026-09-07: "gölgesiz · siyah buton kullanmayalım, o da beyaz olsun"): every button is white; the PRIMARY verb says so by WEIGHT — the strong border — never by a fill. Pressed = the paper dips (elev-2). */ button[type="submit"] { background: var(--bg-elev); border-width: var(--border-w-strong); } button:active, .solac-btn:active { background: var(--bg-elev-2); box-shadow: none; } /* the tonal variants, straight from the mock: a verb that COMMITS is green, a caution is yellow, a destruction is red, a studio action is cyan. Ink on every one of them. */ /* the tonal verbs (the set, 2026-09-07): colour lives in the WORD, the button stays white with the strong border */ .solac-btn-ok { background: var(--bg-elev); color: var(--ok-text); border-width: var(--border-w-strong); } .solac-btn-warn { background: var(--bg-elev); color: var(--warn-text); border-width: var(--border-w-strong); } .solac-btn-bad { background: var(--bg-elev); color: var(--bad-text); border-width: var(--border-w-strong); } .solac-btn-go { background: var(--bg-elev); border-width: var(--border-w-strong); } .solac-btn-ok:hover, .solac-btn-warn:hover, .solac-btn-bad:hover, .solac-btn-go:hover { background: var(--accent-hover); } /* `input type=submit` cannot carry a pseudo-element or a class the views bother to set, so it takes the same skin by element. */ input[type="submit"] { width: auto; padding: 0.5rem 1.2rem; font-family: var(--font-sans); font-weight: 700; background: var(--accent); color: var(--fg); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-btn) var(--shadow-btn) var(--shadow-blur) var(--border); cursor: pointer; } input[type="submit"]:hover { background: var(--accent-hover); } input[type="submit"]:active { transform: translate(var(--shadow-btn), var(--shadow-btn)); box-shadow: none; } /* "get the apps" download buttons on the home (macOS direct-download + iOS placeholder). The house button; the "coming soon" placeholders read as muted + non-interactive, shadow off — an object that cannot be pressed must not look pressable. */ .solac-home-downloads { margin-top: 1.75rem; text-align: center; } .solac-dl-btn { display: inline-block; margin: 0.3rem 0.2rem; padding: 0.5rem 1.2rem; font-family: var(--font-sans); font-weight: 700; background: var(--accent); color: var(--fg); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-btn) var(--shadow-btn) var(--shadow-blur) var(--border); text-decoration: none; } a.solac-dl-btn:hover { background: var(--accent-hover); } a.solac-dl-btn:active { transform: translate(var(--shadow-btn), var(--shadow-btn)); box-shadow: none; } .solac-dl-btn.solac-dl-soon { background: var(--bg-elev-2); color: var(--fg-muted); cursor: default; box-shadow: none; } .solac-home-downloads p { margin: 0.15rem 0 0.5rem; } /* ⛔ THE FAMILY ACCORDION IS GONE (2026-08-26). This block used to style a two-level table: clickable FAMILY rows that expanded into their apps. Families were abolished on 2026-08-23 (CLAUDE.md #35: *"Uygulamaların aileleri — bu yapıyı kaldırıyorum"*) and the markup went with them; the css did not. ⚠ MEASURED BEFORE DELETING, and the first measurement was WRONG: a grep for `.solac-fam-row` and `.fam-caret` found nothing and the whole block was written off as dead. It is not — `.solac-fam-table` and `.solac-prod-row` are still emitted by the catalog page and by status, as a FLAT one-row platform table. So what came out is the accordion half only (`.solac-fam-row`, `.fam-caret`, `.solac-prod-head`, `.solac-desc-cell` and the open/closed shading), and the flat half stayed. The lesson is the grep's: a class family is dead only when EVERY name in it is unclaimed, and checking two of six is checking nothing. */ /* the flat platform table — one row, one cell per platform (catalog · status). Compact, centered, non-wrapping; the whole thing scrolls sideways inside .solac-table-scroll if it gets too wide. */ .solac-fam-table { width: 100%; margin: 0; } .solac-fam-table .solac-prod-row td { white-space: nowrap; padding-left: 12px; padding-right: 12px; } /* a downloadable platform build renders as a small pill (channel+build / version label). */ .solac-plat-dl { display: inline-block; padding: 2px 10px; border: var(--border-w-thin) solid var(--border); border-radius: var(--radius-pill); background: var(--accent); color: var(--fg); font-weight: 700; text-decoration: none; white-space: nowrap; } .solac-plat-dl:hover { background: var(--accent-hover); } /* WEB-FACE-K1: text-style navigation — plain links joined by " · " instead of buttons (Atakan 2026-07-26: "use few buttons, lots of text style"). A csrf_form_link POST (logout / sign out) sheds its button chrome ENTIRELY here (native appearance included) so it reads as one identical text link. */ .solac-textnav { text-align: center; margin: 1.5rem auto; line-height: 2; } .solac-links > p { margin-bottom: 0; } .solac-links .solac-textnav { margin-top: .2rem; } /* the landing's links box: the word and its row sit close (his eye 2026-09-07) */ .solac-textnav a, .solac-textnav .solac-linkbtn { display: inline; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; font: inherit; font-size: inherit; font-weight: 600; color: var(--fg); text-decoration: none; cursor: pointer; min-height: 0; min-width: 0; -webkit-appearance: none; appearance: none; vertical-align: baseline; line-height: inherit; } .solac-textnav a:hover, .solac-textnav .solac-linkbtn:hover { background: var(--accent); border: none; color: var(--fg); } .solac-textnav form, .solac-textnav .solac-inline-action { display: inline; } .solac-textnav .sep { opacity: 0.4; margin: 0 0.5rem; } /* home quick links as small house buttons (what's new / terms / account / logout). The logout is a csrf_form_link() POST — its .solac-linkbtn gets the same button skin here. */ .solac-quicks { margin-top: 1.5rem; text-align: center; } .solac-quicks .solac-quick-btn, .solac-quicks .solac-linkbtn { display: inline-block; margin: 0.2rem 0.15rem; padding: 0.4rem 1rem; font-family: var(--font-sans); font-size: 0.9em; font-weight: 700; background: var(--bg-elev); color: var(--fg); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm) var(--shadow-sm) var(--shadow-blur) var(--border); text-decoration: none; cursor: pointer; } .solac-quicks .solac-quick-btn:hover, .solac-quicks .solac-linkbtn:hover { background: var(--accent); color: var(--fg); } .solac-quicks .solac-quick-btn:active, .solac-quicks .solac-linkbtn:active { transform: translate(var(--shadow-sm), var(--shadow-sm)); box-shadow: none; } /* ---- inline POST-form action (csrf_form_link) ---------------------------- */ /* Used inside table cells and prose so a mutating action (delete / apply / skip / drop / unarchive / rescue) can be a real but still read as a link. Overrides every -level layout style above. */ .solac-inline-action { display: inline; margin: 0; padding: 0; border: none; max-width: none; gap: 0; grid-template-columns: none; justify-items: initial; } /* ---- inline (single-line) form ------------------------------------------ */ /* Reusable: add class="solac-form-inline" to any whose fields should sit on ONE row instead of stacking in the default vertical grid. Fields size to content (not width:100%) and wrap only when the row is genuinely too narrow. Helper drops to its own line below the row. */ .solac-form-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; max-width: none; margin: 0.5rem auto; grid-template-columns: none; justify-items: initial; } .solac-form-inline > input[type="text"], .solac-form-inline > input[type="number"], .solac-form-inline > input[type="datetime-local"], .solac-form-inline > select { width: auto; max-width: 200px; } .solac-form-inline > small { flex-basis: 100%; text-align: center; } /* ---- stacked form --------------------------------------------------------- Opt-in vertical layout for multi-field forms (new/edit account, etc.). Undoes the inline default (above) so each field gets its own full-width row in a centered column — placed AFTER the inline rules so it wins on source order. */ main form.solac-form-stack { display: grid; grid-template-columns: 1fr; gap: 0.5rem; max-width: 420px; margin: 0.75rem auto; justify-items: center; text-align: center; } main form.solac-form-stack > input[type="text"], main form.solac-form-stack > input[type="number"], main form.solac-form-stack > input[type="email"], main form.solac-form-stack > input[type="password"], main form.solac-form-stack > input[type="datetime-local"], main form.solac-form-stack > select, main form.solac-form-stack > textarea { display: block; width: 100%; max-width: 360px; margin: 0; } main form.solac-form-stack > button { margin: 0.25rem 0 0; } main form.solac-form-stack > p, main form.solac-form-stack > small { margin: 0.05rem 0 0.3rem; max-width: 380px; color: var(--fg-dim); } /* Mutating actions read as MINI BUTTONS, not bare links (Atakan 2026-07-02: "link-shaped things aren't understood") — the house pill at its smallest, so a dense table row can carry three of them without turning into a control panel. 300+ call sites take this skin by class alone. */ /* ⭐ `hidden` MUST ACTUALLY HIDE — the browser's own [hidden] rule is `display:none` at normal specificity, so ANY author `display` beats it. `.solac-linkbtn` sets `display:inline-block`, which meant a `