/* ════════════════════════════════════════════════════════════════════════
RYOS MAGIC — PRO UX PASS (v2 preview)
Palette, fonts and brand = untouched v4 prod tokens (rose #ff3d77 /
violet #9d6bff aurora). This layer only upgrades UX mechanics:
type hierarchy, navigation clarity, elevation scale, focus/hover states,
density rhythm, SVG nav icons. Loaded after styles.css + inline styles.
════════════════════════════════════════════════════════════════════════ */
/* ── type hierarchy: clearer contrast between levels (≥1.25 ratio) —
body .9rem → h2 1.3rem → lock title untouched ── */
.sec-head h2 { font-size: 1.3rem; }
.sec-head .hint { font-size: .8rem; }
.eyebrow { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
/* ── navigation: drop the glass box — the item list breathes, section labels
act as rails, active state carries the weight. Desktop only: under 760px
styles.css turns .side into a fixed bottom bar that needs its own chrome ── */
@media (min-width: 761px) {
.side, .side-right {
background: transparent; border-color: transparent; backdrop-filter: none;
padding-inline: 0;
}
.navitem { padding-block: 10px; }
.navitem:hover { transform: translateX(2px); }
}
.nav-section { display: flex; align-items: center; gap: 8px; }
.nav-section::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.side-right-h { border-bottom: 1px solid var(--border); margin-bottom: 10px; }
/* SVG nav icons (Lucide) — consistent 2px stroke, inherit state color */
.nemoji svg { width: 17px; height: 17px; stroke-width: 2; }
.navitem.on .nemoji svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 60%, transparent)); }
/* ── elevation scale: cards get one consistent soft-depth step instead of
flat glass; hover reveals the brand hairline on top ── */
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px -18px rgba(0,0,0,0.8); }
.card { position: relative; }
.card::after {
content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
background: var(--grad); opacity: 0; transition: opacity .25s;
border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
}
.card:hover::after { opacity: .55; }
/* topbar: gradient hairline instead of flat border — quiet brand signal */
.topbar {
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 40%, transparent), transparent) 1;
}
/* ── interaction states: visible focus everywhere, soft halo on inputs ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea:focus, select:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input:not([type]):focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* ── data presentation ── */
.kpi-v { font-variant-numeric: tabular-nums; }
.status-row { border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
/* ── density: dashboard rhythm — tighter without shrinking touch targets ── */
.card { padding: 15px; }
.sec { margin-top: 24px; }
main { padding-block: 20px 56px; }
@media (max-width: 760px) {
main { padding-bottom: 88px; } /* keep content clear of the fixed bottom nav */
.nemoji svg { width: 20px; height: 20px; } /* bottom-bar tabs need bigger glyphs */
}
/* ── topbar button icons (SVG replaces emoji glyphs) ── */
.btn .bicon { width: 14px; height: 14px; flex: none; }
/* ── empty states: framed and intentional instead of floating grey text ── */
.empty {
border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
padding: 26px 22px; background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.empty::before {
content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 10px; opacity: .5;
background: currentColor;
-webkit-mask: url('data:image/svg+xml,') center / contain no-repeat;
mask: url('data:image/svg+xml,') center / contain no-repeat;
}
/* ── quick-action tiles: emoji stays (owner-configured content) but the tile
itself gets press/hover physics and a brand edge on hover ── */
.qbtn { transition: transform .14s, border-color .14s, background .14s, box-shadow .14s; }
.qbtn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.qbtn:active { transform: translateY(0) scale(.97); }
.qbtn .lbl { font-weight: 600; letter-spacing: .01em; }
/* ── motion: sections stagger in with the view (30ms steps, capped) —
the global prefers-reduced-motion kill switch in styles.css disables all ── */
.view:not([hidden]) .sec { animation: viewIn .26s ease both; }
.view:not([hidden]) .sec:nth-child(2) { animation-delay: .03s; }
.view:not([hidden]) .sec:nth-child(3) { animation-delay: .06s; }
.view:not([hidden]) .sec:nth-child(4) { animation-delay: .09s; }
.view:not([hidden]) .sec:nth-child(n+5) { animation-delay: .12s; }
.card { transition: box-shadow .2s, transform .2s; }
/* toggles: springier thumb, focus ring parity with inputs */
.tgl::after { transition: left .18s cubic-bezier(.22,1,.36,1), background .18s; }
.tgl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* thin scrollbars inside panels (page scrollbar keeps prod width) */
.view ::-webkit-scrollbar { width: 8px; height: 8px; }
/* native controls on-palette everywhere — prod set accent-color per-widget,
this catches the stragglers (ctl sliders, pass checkboxes, allowance toggle) */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* feed timestamps line up (chat, dossier history) */
.track-chat-t, .dos-ht { font-variant-numeric: tabular-nums; }
/* ── Wardrobe / Clipping (auto-hide map): was a soup of pass-* rows — now
a toolbar (root + scan), one bordered card per mapped folder with the
tucked categories as chips, and the checkbox flood as a scrollable grid ── */
#autohideCard .ml-note { font-size: .8rem; color: var(--text-3); margin-bottom: 10px; }
#autohideCard .pass-add {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 9px 12px; margin-top: 8px;
}
#autohideCard .pass-add .access-label { flex: 1; min-width: 200px; }
.ah-row {
background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 12px 14px; margin-top: 10px; border-bottom: 1px solid var(--border); /* overrides the inline .pass-row hairline look */
}
.ah-head { align-items: center; }
.ah-head b { font-family: var(--font-display); font-size: .9rem; }
.ah-chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ah-chip {
font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.ah-chip.dim { color: var(--text-3); background: var(--surface-2); border-color: var(--border); }
.ah-rm { margin-left: auto; min-width: 30px; }
#autohideCard .pass-grp {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px;
max-height: 168px; overflow-y: auto;
margin-top: 8px; padding: 10px 12px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
#autohideCard .pass-perm { display: flex; align-items: center; gap: 7px; margin: 0; white-space: normal; font-size: .82rem; }
.ah-add .access-label { width: 100%; margin-top: 6px; }
.ah-add .pass-grp-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ah-add .btn { margin-top: 10px; }
/* ════════ SUBMENU UX PASS ════════ */
/* Transforms: level pips — bigger touch targets, clearer current level */
.pips { gap: 6px; }
.pip { min-width: 34px; height: 34px; border-radius: 9px; }
.pip.on { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); font-weight: 700; }
/* Suggestions: name/trigger fields were 130px — placeholders truncated
("Name (e.g. Knee…"). Let them breathe and wrap as a unit. */
.sugg-add #suggName, .sugg-add #suggTrig { width: 185px; }
.sugg-add input, .sugg-add select { min-height: 38px; }
/* Suggestions: row action controls — the 🔥 toggle and edit/delete chips had
~20px hit areas; normalize to a 30px minimum with breathing room */
.sugg-tog { min-width: 30px; min-height: 30px; display: inline-grid; place-items: center; border-radius: 8px; }
.sugg-tog:hover { background: var(--surface-2); }
.sugg-act { min-width: 30px; min-height: 30px; }
/* ── Restrictions / Active now: chips read as data, sections as rails ── */
.restr-chip { background: var(--surface); }
.restr-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.restr-chip .restr-val { font-variant-numeric: tabular-nums; }
.restr-sec-h { display: flex; align-items: center; gap: 8px; }
.restr-sec-h::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.restr-sec-n {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; padding: 1px 8px; min-width: 24px; text-align: center;
}
/* ── Suggestions: the add-form becomes a labelled inset panel, not a loose
row of naked inputs; Save & sync anchors a separated footer ── */
.sugg-add {
align-items: flex-end;
background: var(--bg-0); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 12px; margin-top: 10px;
}
.sfield { display: flex; flex-direction: column; gap: 4px; }
.sfield > span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.sfield > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-3); opacity: .7; }
.sugg-add .sfield input, .sugg-add .sfield select { width: 175px; }
.sugg-datawrap { align-self: flex-end; }
.sugg-add #suggAddBtn { align-self: flex-end; min-height: 38px; }
.sugg-foot { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; align-items: center; }
.sugg-dirty { color: var(--warn); font-size: .8rem; font-weight: 600; }
/* ── Surveillance: labelled control clusters instead of button soup ── */
.ctl-group { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg-0); margin-top: 8px; }
.ctl-group:first-child { margin-top: 0; }
.ctl-group-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin-bottom: 8px; }
.ctl-group-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.conf-wrap { display: inline-flex; align-items: center; gap: 4px; }
.conf-unit { font-size: .75rem; color: var(--text-3); }
.btn.nudge { min-width: 34px; padding-inline: 0; }
.sit-list { max-height: 132px; overflow-y: auto; } /* a busy sim returns dozens of targets — scroll, don't sprawl */
/* Dossier: movement history scrolls after ~6 rows instead of stretching the card */
.dos-hrow { font-variant-numeric: tabular-nums; }
.dos-block .dos-hrow:nth-child(n+2) { border-top: 1px solid var(--border); }
.dos-block:has(.dos-hrow) { max-height: 220px; overflow-y: auto; }
/* ── AI Manager people graph: bigger canvas feel, grabbable nodes ── */
.ppl-node { cursor: grab; }
.ppl-node:active { cursor: grabbing; }
.ppl-node-ctr { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.ppl-nlabel-ctr { font-weight: 700; }
/* ── Access: status cards are two lines of text — pair them up on wide
screens and stop letting a sentence own a full-width card ── */
@media (min-width: 1024px) {
/* :not([hidden]) — an ID selector would out-rank .view[hidden]'s display:none and leak the view everywhere */
#view-access:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
#view-access #passesSec, #view-access #profileSec { grid-column: 1 / -1; }
}
#view-access .ml-status { font-size: .98rem; margin: 0 0 6px; }
#view-access .card p { margin-block: 4px; }
#view-access .card { padding: 14px 16px; }
/* Long views (Transforms grid, Modules catalogue, Restrictions): section
headers stay visible while scrolling — you always know which block you're
in. Blurred veil keeps text readable over cards. */
.sec-head {
position: sticky; top: 54px; z-index: 20;
padding-block: 6px;
background: color-mix(in srgb, var(--bg-0) 78%, transparent);
backdrop-filter: blur(10px);
border-radius: var(--radius-xs);
}
@media (max-width: 760px) {
.sec-head { position: static; background: none; backdrop-filter: none; } /* small screens: no room to pin */
}
/* ════════ MINOR POLISH PASS (2026-07-10) ════════ */
/* Modules accordion: the ▸ expander sat at --text-3 (barely visible). Lift it one
step, and brighten on row hover / when the module is open so the affordance reads.
(styles.css already handles the 90° rotate on [open] — this only touches colour.) */
.module > summary .chev { color: var(--text-2); font-size: 1.05rem; }
.module > summary:hover .chev,
.module[open] > summary .chev { color: var(--accent-2); }
/* Quick Actions rail is a fixed 2-column grid — an odd tile count left the last one
stranded alone on the left. Center a lone trailing tile across the row so the
block reads balanced instead of ragged. Tile keeps its size (half the row). */
.side-right .quick-grid > .qbtn:last-child:nth-child(odd) {
grid-column: 1 / -1; max-width: calc(50% - 4.5px); margin-inline: auto;
}