/* * Kaamko: the calm default, and plain mode. * * Loaded last by ToolsLayout, after ice-tools.css and kaamko-grid.css, so it * can quieten the ruled grid without rewriting either file. Added 2026-09-25 * after the owner asked for "the crowded version" to be updated and for a * plain version toggle. Audit: outputs/kaamko-declutter/AUDIT.md (local). * * Rules of this file: * - Nothing here removes text from the HTML. The explainer, the tables and * the FAQ carry the pages' search value, so the default only restyles * them, and plain mode only folds them behind a visible button. * - Plain mode hides with `display: none !important` under a class on * , never with the [hidden] attribute, so no author `display` rule * can resurrect a folded block (the [hidden] trap, docs/13 §1150). * - Only --ice-* tokens, so both themes hold. */ /* ── 1. The calm default ─────────────────────────────────────────── */ /* The panel keeps its 2px frame (the visual spec holds it). What goes is the second, third and fourth frame inside it: the grey head band, the grey form column, a box around every fieldset and a 2px rule on every table cell. */ body.page-tools .tool-panel { box-shadow: none; } body.page-tools .tool-panel__head { background: transparent; border-bottom: 1px solid var(--ice-color-border); } body.page-tools .tool-panel__title { font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ice-color-on-surface); } body.page-tools .tool-panel__body:has(> form + .tool-result) > form { background: transparent; border-right: 1px solid var(--ice-color-border); } body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-note, body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-provenance { border-top: 1px solid var(--ice-color-border); border-bottom: 0; } body.page-tools .tool-fieldset { padding: 0; border: 0; background: transparent; } body.page-tools .tool-fieldset + .tool-fieldset { margin-top: 1rem; } body.page-tools .tool-fieldset > legend { padding: 0 0 .35rem; background: transparent; font-size: .8rem; } /* Paired input grids keep their cells, drawn in the quiet line colour. */ body.page-tools .tool-fields, body.page-tools .tool-textpair { border-color: var(--ice-color-border); border-top-width: 1px; border-left-width: 1px; } body.page-tools .tool-fields > .tool-field, body.page-tools .tool-textpair > .tool-field { border-color: var(--ice-color-border); border-right-width: 1px; border-bottom-width: 1px; } body.page-tools .tool-readout th, body.page-tools .tool-readout td { border-bottom: 1px solid var(--ice-color-border); } body.page-tools .tool-readout td { border-left: 0; } body.page-tools .tool-readout caption { letter-spacing: 0; text-transform: none; font-size: .8rem; color: var(--ice-color-on-surface-muted); } body.page-tools .tool-units { border-top: 1px solid var(--ice-color-border); border-left: 1px solid var(--ice-color-border); } body.page-tools .tool-unitgroup { border-color: var(--ice-color-border); } /* The source line is part of the answer, so it stays next to it, as a line of small print rather than a grey box with an uppercase label. */ body.page-tools .tool-provenance { padding: .6rem 0 0; background: transparent; border-top: 1px solid var(--ice-color-border); } body.page-tools .tool-provenance b { letter-spacing: 0; text-transform: none; font-size: .78rem; } body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-provenance { padding: .6rem .85rem; } body.page-tools .tool-panel .tool-note { background: transparent; font-size: .8rem; color: var(--ice-color-text-muted); } /* The head: one lede at reading size, any further paragraph as small print, so the panel starts sooner on a phone. */ body.page-tools .tool-head p + p:not(.tool-head__by) { font-size: .8rem; } @media (max-width: 620px) { body.page-tools .tool-head { padding-block: .9rem .6rem; } body.page-tools .tool-head p { font-size: .85rem; } } /* The explainer was a two-column grid with a 2px box around every paragraph and every heading: 30-plus boxes under the salary tool. It is prose, so it reads as prose: one measure, headings, paragraphs, tables left as tables. */ body.page-tools .tool-explainer { display: block; max-width: 74ch; padding-block: 2.25rem .5rem; } /* !important because kaamko-grid.css draws these rules from (0,3,0) selectors such as `.tool-explainer > :nth-child(even)`. */ body.page-tools .tool-explainer > * { margin: 0 0 .8rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.page-tools .tool-explainer > h2 { margin-bottom: .6rem !important; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); } body.page-tools .tool-explainer > h3 { margin-top: 1.5rem !important; margin-bottom: .35rem !important; background: transparent; color: var(--ice-color-on-surface); font-size: .95rem; } body.page-tools .tool-explainer > p, body.page-tools .tool-explainer > ul, body.page-tools .tool-explainer > ol { font-size: .9rem; line-height: 1.62; } body.page-tools .tool-explainer > ul, body.page-tools .tool-explainer > ol { padding-left: 1.2rem; } body.page-tools .tool-explainer .tool-table-wrap { border-width: 1px; border-color: var(--ice-color-border); } body.page-tools .tool-related { border-top-width: 1px; border-top-color: var(--ice-color-border); } /* ── 2. The switch ───────────────────────────────────────────────── */ .tbar__switches { grid-column: -2; display: flex; align-items: center; gap: .4rem; } .tbar__plain { appearance: none; flex: none; min-height: 52px; padding: 0 .8rem; border: 2px solid var(--ice-color-border-strong); border-radius: 4px; background: var(--ice-color-surface-field); color: var(--ice-color-on-surface); font: 750 .85rem/1 var(--ice-font-primary); cursor: pointer; } .tbar__plain:hover { background: var(--ice-color-surface-muted); } .tbar__plain[aria-pressed='true'] { background: var(--ice-color-on-surface); color: var(--ice-color-surface); } .tbar__plain:focus-visible, .kaamko-plain-more:focus-visible { outline: 2px solid var(--ice-color-text-action); outline-offset: 2px; } @media (max-width: 980px) { .tbar__switches { grid-row: 1; justify-self: end; } .tbar__plain { min-height: 40px; padding: 0 .6rem; font-size: .75rem; } } /* ── 3. Plain mode ───────────────────────────────────────────────── */ html.kaamko-plain { --ice-font-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif; --ice-font-display: var(--ice-font-primary); } html.kaamko-plain body.page-tools { background: var(--ice-color-surface); font-family: var(--ice-font-primary); } /* No shadows, gradients, blur or background art anywhere. Selects keep their background image, because on some of them that is the dropdown arrow. */ html.kaamko-plain body.page-tools *:not(select), html.kaamko-plain body.page-tools *::before, html.kaamko-plain body.page-tools *::after { box-shadow: none !important; text-shadow: none !important; background-image: none !important; } html.kaamko-plain .tbar { position: static; background: var(--ice-color-surface); backdrop-filter: none; border-bottom: 1px solid var(--ice-color-border); } html.kaamko-plain .tbar__inner { min-height: 0; padding-block: .5rem; } /* Decorative imagery: pictograms, the crest, card icons. */ html.kaamko-plain .tool-pictogram, html.kaamko-plain .tbar__index svg, html.kaamko-plain .tbar__brand img, html.kaamko-plain .tfoot__brand img, html.kaamko-plain .tool-card__icon, html.kaamko-plain .tool-card__arrow { display: none !important; } html.kaamko-plain .tbar__link, html.kaamko-plain .tbar__theme, html.kaamko-plain .tbar__plain { min-height: 40px; font-size: .85rem; font-weight: 600; } html.kaamko-plain .tbar__theme { width: 40px; } /* No cards: the panel loses its frame and its inner rules, and reads as a form followed by its answer. */ html.kaamko-plain body.page-tools .tool-panel, html.kaamko-plain body.page-tools .tool-fieldset, html.kaamko-plain body.page-tools .tool-unitgroup, html.kaamko-plain body.page-tools .tool-units, html.kaamko-plain body.page-tools .tool-scroll, html.kaamko-plain body.page-tools .tool-copybar, html.kaamko-plain body.page-tools .tool-mode-note, html.kaamko-plain body.page-tools .tool-card, html.kaamko-plain body.page-tools .tool-fields, html.kaamko-plain body.page-tools .tool-fields > .tool-field, html.kaamko-plain body.page-tools .tool-textpair, html.kaamko-plain body.page-tools .tool-textpair > .tool-field, html.kaamko-plain body.page-tools .tool-check, html.kaamko-plain body.page-tools .tool-modes { border: 0; border-radius: 0; background: transparent; } html.kaamko-plain body.page-tools .tool-panel__head { padding-inline: 0; border-bottom: 1px solid var(--ice-color-border); } html.kaamko-plain body.page-tools .tool-panel__body, html.kaamko-plain body.page-tools .tool-panel__body:has(> form + .tool-result) > form, html.kaamko-plain body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-result, html.kaamko-plain body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-note, html.kaamko-plain body.page-tools .tool-panel__body:has(> form + .tool-result) > .tool-provenance { padding-inline: 0; border-right: 0; background: transparent; } @media (min-width: 761px) { html.kaamko-plain body.page-tools .tool-panel__body:has(> form + .tool-result) { column-gap: 2rem; } } html.kaamko-plain body.page-tools .tool-headline { font-weight: 700; letter-spacing: -.01em; } html.kaamko-plain body.page-tools input, html.kaamko-plain body.page-tools select, html.kaamko-plain body.page-tools textarea { border-width: 1px; border-radius: 4px; } html.kaamko-plain body.page-tools .tool-modes, html.kaamko-plain body.page-tools .tool-modes button { border-radius: 4px; } /* Secondary content, folded until "More about this tool" is pressed. Still in the HTML; plain mode is a stored visitor choice a crawler never has. */ html.kaamko-plain:not(.kaamko-plain-open) body.page-tools .tool-explainer, html.kaamko-plain:not(.kaamko-plain-open) body.page-tools .tool-faq, html.kaamko-plain:not(.kaamko-plain-open) body.page-tools .tool-related, html.kaamko-plain:not(.kaamko-plain-open) body.page-tools .tool-head p:not(:first-of-type) { display: none !important; } .kaamko-plain-more { display: none; } html.kaamko-plain .kaamko-plain-more { display: inline-block; margin: 1.25rem 0 .5rem; padding: .6rem .9rem; border: 1px solid var(--ice-color-border-strong); border-radius: 4px; background: transparent; color: var(--ice-color-on-surface); font: 600 .9rem/1.2 var(--ice-font-primary); cursor: pointer; } html.kaamko-plain .tfoot { border-top: 1px solid var(--ice-color-border); background: transparent; } body.page-tools .tool-scroll { border-width: 1px; border-color: var(--ice-color-border); }