/* ui.input.css - House UI fields (MASTER: P:\Docker.HouseUI; never edit a copy). Every rule is scoped, so a page only gets what it opts into: .house-bare-forms on : the Citadel's legacy look for EVERY bare input, select, textarea, label and fieldset (the first block). :where() keeps each selector's specificity exactly as it was before the scope. .house-forms on : the house field look for makeInput / makeTextarea (.ctrl-wrapper) on the --ui-* tokens (the last block). Nothing bare is touched. .ctrl-v- a named look one makeInput asks for ('variant' => ...), wherever it is drawn. Colours read the estate's --ui-* tokens (ui.tokens.css); the --net-* fallback keeps a page without them as it was. */ /* ── LEGACY BARE FIELDS (opt-in: class "house-bare-forms" on ) ── */ :where(.house-bare-forms) input, :where(.house-bare-forms) input[type="text"], :where(.house-bare-forms) input[type="number"], :where(.house-bare-forms) input[type="email"], :where(.house-bare-forms) input[type="password"], :where(.house-bare-forms) input[type="url"], :where(.house-bare-forms) input[type="color"], :where(.house-bare-forms) input[type=date], :where(.house-bare-forms) input[type=time], :where(.house-bare-forms) input[type=datetime-local], :where(.house-bare-forms) select, :where(.house-bare-forms) textarea, :where(.house-bare-forms) .control .toggle-control { /* --ctrl-h / --ctrl-pad-y: see ui.dropdown.css. min-height always outranks height, so a control partial writing an explicit height onto this element was floored here and the option did nothing. Unset, both defaults are unchanged. */ min-height: var(--ctrl-h, 32px); width:100%; padding: var(--ctrl-pad-y, var(--net-spacing-sm)) var(--net-spacing-sm); border: 1px solid var(--ui-border-strong, var(--net-border-accent)); border-radius: var(--net-border-radius-base); font-size: var(--net-font-size-base); font-family: var(--net-font-family-base); transition: var(--net-transition-fast); background: var(--ui-field-bg, var(--net-bg-primary)); color: var(--ui-text, var(--net-text-primary)); } :where(.house-bare-forms) input:focus, :where(.house-bare-forms) select:focus, :where(.house-bare-forms) textarea:focus { outline: none; border-color: var(--ui-primary, var(--net-color-primary)); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } :where(.house-bare-forms) label { display: flex; flex-direction: row; gap: var(--net-spacing-xs); font-weight: 500; min-width: 96px; white-space:nowrap; } :where(.house-bare-forms) input:invalid, :where(.house-bare-forms) select:invalid, :where(.house-bare-forms) textarea:invalid { border-color: var(--ui-danger, var(--net-color-danger)); } /* Textarea specific */ :where(.house-bare-forms) textarea { min-height: 100px; resize: vertical; font-family: var(--net-font-family-base); } /* Color input specific */ :where(.house-bare-forms) input[type="color"] { width: 60px; height: calc(var(--ctrl-height) - 2px); /* the house control height less its container border */ padding: 2px; cursor: pointer; } /* The chosen colour fills the whole field: the native swatch chrome (the wrapper's padding and the swatch's own 1px grey border) is stripped, or the border's top and bottom edges read as a thin grey line through the middle of the colour. */ :where(.house-bare-forms) input[type="color"] { padding: 0; } :where(.house-bare-forms) input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } :where(.house-bare-forms) input[type="color"]::-webkit-color-swatch { border: 0; box-shadow: none; border-radius: var(--net-border-radius-base); height: 100%; } :where(.house-bare-forms) input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--net-border-radius-base); } /* Select styling */ :where(.house-bare-forms) select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; padding-right: 32px; } /* Fieldset styling */ :where(.house-bare-forms) fieldset { border: 1px solid var(--ui-border-strong, var(--net-border-accent)); border-radius: var(--net-border-radius-md); padding: var(--net-spacing-md); margin: var(--net-spacing-md) 0; background: var(--ui-surface, var(--net-bg-secondary)); } :where(.house-bare-forms) legend { font-weight: 600; color: var(--ui-text, var(--net-text-primary)); padding: 0 var(--net-spacing-sm); background: var(--ui-field-bg, var(--net-bg-primary)); border-radius: var(--net-border-radius-sm); } /* Checkbox and radio styling */ :where(.house-bare-forms) input[type="checkbox"], :where(.house-bare-forms) input[type="radio"] { width: 18px; height: 18px; margin-right: var(--net-spacing-xs); cursor: pointer; } :where(.house-bare-forms) input[type="date"], :where(.house-bare-forms) input[type="time"], :where(.house-bare-forms) input[type="datetime-local"] { border-radius: 0; } :where(.house-bare-forms) input[type="date"]::-webkit-calendar-picker-indicator, :where(.house-bare-forms) input[type="time"]::-webkit-calendar-picker-indicator, :where(.house-bare-forms) input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 0.85; cursor: pointer; filter: grayscale(100%); color: var(--ui-text-faint, var(--net-text-muted)); } :where(.house-bare-forms) input[type="date"]:hover::-webkit-calendar-picker-indicator, :where(.house-bare-forms) input[type="time"]:hover::-webkit-calendar-picker-indicator, :where(.house-bare-forms) input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { filter: grayscale(0); opacity: 1; } /* ── VARIANTS (ai.task 477, 2026-10-26) ───────────────────────────────────── Named looks for the pages that keep their own field style, so that style still lives HERE and never in page CSS: makeInput([... 'variant' => 'auth']). auth the sign-in dialog (php/partials/blocks/auth-modal.php) ledger the Join page (pages/join) - the same tokens, a little tighter code with either: the big monospace one-time-code box prompt an AI prompt editor (the Ask Gemma box): monospace, tall, wraps hero a page's one big search box (RB WWW's Archives): larger text, surface fill, --ui-radius-lg (8px) Each first undoes the bare input / label rules at the top of this file (those pages never loaded them), then draws the look they had. */ .ctrl-wrapper.ctrl-v-auth, .ctrl-wrapper.ctrl-v-ledger { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; } .ctrl-wrapper.ctrl-v-ledger { margin-bottom: 0.9rem; } .ctrl-v-auth label, .ctrl-v-ledger label { display: flex; flex-direction: column; gap: 0; white-space: normal; flex: 1 1 auto; /* as pages.css draws a label (the bare rule above makes it a row) */ font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-text-dim, var(--net-text-secondary, #adb5bd)); } .ctrl-v-ledger label { font-size: 0.72rem; } .ctrl-v-auth .ctrl-label-note, .ctrl-v-ledger .ctrl-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ui-text-faint, var(--net-text-muted, #6c757d)); } .ctrl-v-auth .ctrl-container, .ctrl-v-ledger .ctrl-container { border: 0; background: none; padding: 0; box-shadow: none; height: auto; min-height: 0; } .ctrl-v-auth .ctrl-field, .ctrl-v-ledger .ctrl-field { display: block; min-height: auto; width: 100%; box-sizing: border-box; outline: none; background: var(--ui-surface, var(--net-bg-secondary, #252830)); border: 1px solid var(--net-border-medium, #353a45); border-radius: 8px; color: var(--ui-text, var(--net-text-primary, #e9ecef)); font-family: inherit; font-size: 1rem; padding: 0.6rem 0.75rem; transition: border-color 0.15s, box-shadow 0.15s; } .ctrl-v-ledger .ctrl-field { max-width: 420px; } .ctrl-v-auth .ctrl-field:focus, .ctrl-v-ledger .ctrl-field:focus { border-color: var(--ui-primary, var(--net-color-primary, #3498db)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, var(--net-color-primary, #3498db)) 20%, transparent); } .ctrl-v-code .ctrl-field { font-family: Consolas, 'Courier New', monospace; font-size: 1.5rem; letter-spacing: 0.18em; text-align: center; padding: 0.7rem 0.75rem; } .ctrl-v-ledger.ctrl-v-code .ctrl-field { max-width: 300px; } .ctrl-v-prompt .ctrl-field { font: 0.82rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; min-height: 9rem; max-height: 40vh; resize: vertical; } .ctrl-wrapper.ctrl-v-hero { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .ctrl-v-hero .ctrl-container { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius-lg, 8px); } .ctrl-v-hero .ctrl-container:focus-within { border-color: var(--ui-primary); box-shadow: none; } .ctrl-v-hero .ctrl-field { font-size: 1rem; padding: 0.55rem 0.9rem; } /* ── HOUSE FIELDS (opt-in: class "house-forms" on ) ─────────────────── makeInput / makeTextarea markup: .ctrl-wrapper > (label row) + .ctrl-container > .ctrl-field. The container draws the box (so a unit, icon or button sits inside it); the field is bare. Block flow, not a flex gap: a field without a label still renders its (empty) label row. */ :where(.house-forms) .ctrl-wrapper { position: relative; margin-bottom: 0.85rem; } :where(.house-forms) .ctrl-wrapper label { display: block; margin-bottom: 0.3rem; font-size: 0.83rem; font-weight: 500; color: var(--ui-text-dim); } :where(.house-forms) .ctrl-container { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: var(--ctrl-height, 38px); background: var(--ui-field-bg); border: 1px solid var(--ui-border-strong); border-radius: var(--ctrl-radius, 6px); transition: border-color 0.15s, box-shadow 0.15s; } :where(.house-forms) .ctrl-container:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-focus-tint, transparent); } :where(.house-forms) .ctrl-field { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent; color: var(--ui-text); font-family: var(--ctrl-font, inherit); font-size: var(--ctrl-font-size, 0.9rem); padding: 0.5rem var(--ctrl-pad-x, 12px); } :where(.house-forms) .ctrl-field::placeholder { color: var(--ui-text-faint); opacity: 1; } :where(.house-forms) textarea.ctrl-field { min-height: 120px; resize: vertical; } :where(.house-forms) .ctrl-container:has(.ctrl-field:user-invalid) { border-color: var(--ui-danger); } /* A search field's native clear (x): the primary colour, not the browser's blue glyph. */ :where(.house-forms) .ctrl-field[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 0.9em; width: 0.9em; flex-shrink: 0; cursor: pointer; background: var(--ui-primary); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } :where(.house-forms) .ctrl-field[type="search"]::-webkit-search-cancel-button:hover { background: var(--ui-primary-hover, var(--ui-primary)); }