@layer reset, tokens, base, layout, workflows, components, utilities;
@layer reset {
:where(html, body, div, span, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, form, fieldset, legend, dialog, details, summary, header, nav, main, section, article, aside, footer) {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
box-sizing: border-box;
}
:where(ul, ol) {
list-style: none;
}
:where(img, svg, video, canvas) {
display: block;
max-inline-size: 100%;
}
}
@layer tokens {
:root {
color-scheme: light dark;
container-type: scroll-state;
--bg-canvas-light: #f8f6f2;
--bg-canvas-dark: #0c1117;
--bg-surface-light: #ffffff;
--bg-surface-dark: #151d28;
--bg-subtle-light: #f1ede6;
--bg-subtle-dark: #1e293b;
--bg-elevated-light: #ffffff;
--bg-elevated-dark: #1f2a3c;
--text-primary-light: #141b24;
--text-primary-dark: #f1f5f9;
--text-secondary-light: #4b5563;
--text-secondary-dark: #94a3b8;
--text-muted-light: #6b7280;
--text-muted-dark: #64748b;
--border-color-light: #e4dfd7;
--border-color-dark: #2a3649;
--brand-primary-light: #0f766e;
--brand-primary-dark: #2dd4bf;
--brand-on-primary-light: #ffffff;
--brand-on-primary-dark: #042f2e;
--accent-amber-light: #d97706;
--accent-amber-dark: #fbbf24;
--bg-amber-soft-light: #fef3c7;
--bg-amber-soft-dark: #3b2806;
--accent-danger-light: #dc2626;
--accent-danger-dark: #f87171;
--bg-danger-soft-light: #fee2e2;
--bg-danger-soft-dark: #3b1219;
--accent-success-light: #15803d;
--accent-success-dark: #4ade80;
--bg-success-soft-light: #dcfce7;
--bg-success-soft-dark: #0d3321;
--accent-indigo-light: #4f46e5;
--accent-indigo-dark: #818cf8;
--bg-indigo-soft-light: #e0e7ff;
--bg-indigo-soft-dark: #1e1b4b;
--bg-canvas: var(--bg-canvas-light);
--bg-surface: var(--bg-surface-light);
--bg-subtle: var(--bg-subtle-light);
--bg-elevated: var(--bg-elevated-light);
--text-primary: var(--text-primary-light);
--text-secondary: var(--text-secondary-light);
--text-muted: var(--text-muted-light);
--border-color: var(--border-color-light);
--brand-primary: var(--brand-primary-light);
--brand-on-primary: var(--brand-on-primary-light);
--brand-secondary: #06b6d4;
--brand-tertiary: #8b5cf6;
--brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
--topbar-border-gradient: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 50%, var(--brand-tertiary) 100%);
--hero-gradient: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(6, 182, 212, 0.12) 55%, rgba(139, 92, 246, 0.1) 100%);
--canvas-mesh: radial-gradient(circle at 6% 0%, rgba(37, 99, 235, 0.13) 0%, transparent 44%), radial-gradient(circle at 94% 6%, rgba(6, 182, 212, 0.12) 0%, transparent 44%), radial-gradient(circle at 50% 98%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
--accent-amber: var(--accent-amber-light);
--bg-amber-soft: var(--bg-amber-soft-light);
--accent-danger: var(--accent-danger-light);
--bg-danger-soft: var(--bg-danger-soft-light);
--accent-success: var(--accent-success-light);
--bg-success-soft: var(--bg-success-soft-light);
--accent-indigo: var(--accent-indigo-light);
--bg-indigo-soft: var(--bg-indigo-soft-light);
--scrollbar-thumb: #b8b2a8;
--scrollbar-track: #f1ede6;
@media (prefers-color-scheme: dark) {
--bg-canvas: var(--bg-canvas-dark);
--bg-surface: var(--bg-surface-dark);
--bg-subtle: var(--bg-subtle-dark);
--bg-elevated: var(--bg-elevated-dark);
--text-primary: var(--text-primary-dark);
--text-secondary: var(--text-secondary-dark);
--text-muted: var(--text-muted-dark);
--border-color: var(--border-color-dark);
--brand-primary: var(--brand-primary-dark);
--brand-on-primary: var(--brand-on-primary-dark);
--accent-amber: var(--accent-amber-dark);
--bg-amber-soft: var(--bg-amber-soft-dark);
--accent-danger: var(--accent-danger-dark);
--bg-danger-soft: var(--bg-danger-soft-dark);
--accent-success: var(--accent-success-dark);
--bg-success-soft: var(--bg-success-soft-dark);
--accent-indigo: var(--accent-indigo-dark);
--bg-indigo-soft: var(--bg-indigo-soft-dark);
--scrollbar-thumb: #475569;
--scrollbar-track: #151d28;
}
@supports (color: light-dark(white, black)) {
--bg-canvas: light-dark(var(--bg-canvas-light), var(--bg-canvas-dark));
--bg-surface: light-dark(var(--bg-surface-light), var(--bg-surface-dark));
--bg-subtle: light-dark(var(--bg-subtle-light), var(--bg-subtle-dark));
--bg-elevated: light-dark(var(--bg-elevated-light), var(--bg-elevated-dark));
--text-primary: light-dark(var(--text-primary-light), var(--text-primary-dark));
--text-secondary: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
--text-muted: light-dark(var(--text-muted-light), var(--text-muted-dark));
--border-color: light-dark(var(--border-color-light), var(--border-color-dark));
--brand-primary: light-dark(var(--brand-primary-light), var(--brand-primary-dark));
--brand-on-primary: light-dark(var(--brand-on-primary-light), var(--brand-on-primary-dark));
--accent-amber: light-dark(var(--accent-amber-light), var(--accent-amber-dark));
--bg-amber-soft: light-dark(var(--bg-amber-soft-light), var(--bg-amber-soft-dark));
--accent-danger: light-dark(var(--accent-danger-light), var(--accent-danger-dark));
--bg-danger-soft: light-dark(var(--bg-danger-soft-light), var(--bg-danger-soft-dark));
--accent-success: light-dark(var(--accent-success-light), var(--accent-success-dark));
--bg-success-soft: light-dark(var(--bg-success-soft-light), var(--bg-success-soft-dark));
--accent-indigo: light-dark(var(--accent-indigo-light), var(--accent-indigo-dark));
--bg-indigo-soft: light-dark(var(--bg-indigo-soft-light), var(--bg-indigo-soft-dark));
--scrollbar-thumb: light-dark(#b8b2a8, #475569);
--scrollbar-track: light-dark(#f1ede6, #151d28);
}
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 9999px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
accent-color: var(--brand-primary);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
html[data-theme="dark"] {
color-scheme: dark;
--bg-canvas: var(--bg-canvas-dark);
--bg-surface: var(--bg-surface-dark);
--bg-subtle: var(--bg-subtle-dark);
--bg-elevated: var(--bg-elevated-dark);
--text-primary: var(--text-primary-dark);
--text-secondary: var(--text-secondary-dark);
--text-muted: var(--text-muted-dark);
--border-color: var(--border-color-dark);
--brand-primary: var(--brand-primary-dark);
--brand-on-primary: var(--brand-on-primary-dark);
--accent-amber: var(--accent-amber-dark);
--bg-amber-soft: var(--bg-amber-soft-dark);
--accent-danger: var(--accent-danger-dark);
--bg-danger-soft: var(--bg-danger-soft-dark);
--accent-success: var(--accent-success-dark);
--bg-success-soft: var(--bg-success-soft-dark);
--accent-indigo: var(--accent-indigo-dark);
--bg-indigo-soft: var(--bg-indigo-soft-dark);
}
html[data-theme="light"] {
color-scheme: light;
--bg-canvas: var(--bg-canvas-light);
--bg-surface: var(--bg-surface-light);
--bg-subtle: var(--bg-subtle-light);
--bg-elevated: var(--bg-elevated-light);
--text-primary: var(--text-primary-light);
--text-secondary: var(--text-secondary-light);
--text-muted: var(--text-muted-light);
--border-color: var(--border-color-light);
--brand-primary: var(--brand-primary-light);
--brand-on-primary: var(--brand-on-primary-light);
--brand-secondary: #06b6d4;
--brand-tertiary: #8b5cf6;
--brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
--topbar-border-gradient: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 50%, var(--brand-tertiary) 100%);
--hero-gradient: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(6, 182, 212, 0.12) 55%, rgba(139, 92, 246, 0.1) 100%);
--canvas-mesh: radial-gradient(circle at 6% 0%, rgba(37, 99, 235, 0.13) 0%, transparent 44%), radial-gradient(circle at 94% 6%, rgba(6, 182, 212, 0.12) 0%, transparent 44%), radial-gradient(circle at 50% 98%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
--accent-amber: var(--accent-amber-light);
--bg-amber-soft: var(--bg-amber-soft-light);
--accent-danger: var(--accent-danger-light);
--bg-danger-soft: var(--bg-danger-soft-light);
--accent-success: var(--accent-success-light);
--bg-success-soft: var(--bg-success-soft-light);
--accent-indigo: var(--accent-indigo-light);
--bg-indigo-soft: var(--bg-indigo-soft-light);
}
@supports not (scrollbar-color: auto) {
body::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 5px;
}
body::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
}
}
@layer base {
body {
font-family: var(--font-sans);
background-color: var(--bg-canvas);
background-image: var(--canvas-mesh);
background-attachment: fixed;
color: var(--text-primary);
line-height: 1.5;
min-block-size: 100dvh;
display: flex;
flex-direction: column;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.25s ease, color 0.2s ease;
}
::selection {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
}
h1, h2, h3, h4 {
text-wrap: balance;
line-height: 1.2;
font-weight: 700;
}
h1 {
font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
}
h2 {
font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.4rem);
}
h3 {
font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem);
}
a {
color: var(--brand-primary);
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
:target {
scroll-margin-top: 6rem;
}
[inert], [inert] * {
opacity: 0.5;
cursor: default;
user-select: none;
}
}
@layer layout {
.safety-banner {
view-transition-name: safety-banner;
background: linear-gradient(90deg, #4f46e5, #0f766e);
color: #ffffff;
padding-block: 0.45rem;
padding-inline: 1rem;
font-size: 0.875rem;
font-weight: 600;
z-index: 60;
}
.safety-banner__inner {
max-inline-size: 95dvw;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.top-bar {
view-transition-name: app-header;
position: sticky;
top: 0;
z-index: 40;
background-color: var(--bg-surface);
border-block-start: 4px solid var(--brand-primary);
border-block-end: 2px solid var(--border-color);
box-shadow: var(--shadow-md);
transition: transform 0.22s ease, background-color 0.2s ease;
}
@container scroll-state((scrolled: bottom) and (scrollable: top)) {
.top-bar {
transform: translateY(-100%);
}
}
.top-bar:focus-within,
.top-bar:not(.is-hidden) {
transform: none;
}
.top-bar.is-hidden:not(:focus-within) {
transform: translateY(-100%);
}
.top-bar__inner {
max-inline-size: 95dvw;
margin-inline: auto;
padding-block: 0.5rem;
padding-inline: 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.brand-cluster {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.brand-link {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text-primary);
}
.brand-icon {
font-size: 1.5rem;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.brand-text strong {
font-size: 1rem;
letter-spacing: -0.02em;
}
.role-pill {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--brand-primary);
}
.workflow-nav {
display: flex;
align-items: center;
gap: 0.25rem;
overflow-x: auto;
scrollbar-width: none;
}
.workflow-nav__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-block-size: 2.75rem;
padding-block: 0.52rem;
padding-inline: 0.92rem;
border-radius: var(--radius-pill);
font-size: 0.92rem;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.workflow-nav__link:hover:not(:disabled) {
background-color: var(--bg-subtle);
color: var(--brand-primary);
border-color: var(--border-color);
}
.workflow-nav__link.is-active {
background: var(--brand-gradient);
background-color: var(--brand-primary);
color: var(--brand-on-primary);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
.header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
#btn-theme-studio {
border: 2px solid var(--brand-primary);
background: var(--hero-gradient);
font-weight: 700;
}
.omni-bar {
background: var(--hero-gradient);
background-color: var(--bg-subtle);
border-block-start: 1px solid var(--border-color);
padding-block: 0.45rem;
padding-inline: 0.75rem;
}
.omni-bar__form {
max-inline-size: 95dvw;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.omni-bar__modes {
display: flex;
align-items: center;
gap: 0.25rem;
overflow-x: auto;
}
.omni-mode-btn {
min-block-size: 2.55rem;
padding-block: 0.42rem;
padding-inline: 0.82rem;
border-radius: var(--radius-pill);
font-size: 0.86rem;
font-weight: 600;
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
transition: all 0.12s ease;
}
.omni-mode-btn:hover:not(:disabled) {
border-color: var(--brand-primary);
color: var(--text-primary);
}
.omni-mode-btn[data-omni-mode="tobuy"] {
border-inline-start: 4px solid var(--accent-success);
}
.omni-mode-btn[data-omni-mode="task"] {
border-inline-start: 4px solid var(--brand-primary);
}
.omni-mode-btn[data-omni-mode="event"] {
border-inline-start: 4px solid var(--brand-secondary);
}
.omni-mode-btn[data-omni-mode="chore"] {
border-inline-start: 4px solid var(--accent-amber);
}
.omni-mode-btn[data-omni-mode="braindump"] {
border-inline-start: 4px solid var(--brand-tertiary);
}
.omni-mode-btn.is-active {
background: var(--brand-gradient);
background-color: var(--brand-primary);
color: var(--brand-on-primary);
border-color: var(--brand-primary);
box-shadow: var(--shadow-sm);
}
.omni-bar__inputs {
flex: 1 1 360px;
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.omni-input {
flex: 1 1 220px;
padding-block: 0.42rem;
padding-inline: 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
font-size: 0.875rem;
min-inline-size: 0;
}
.omni-bar__context {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.omni-select,
.omni-date {
padding-block: 0.38rem;
padding-inline: 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
font-size: 0.8rem;
}
.omni-mic-btn {
min-inline-size: 2.35rem;
min-block-size: 2.35rem;
padding: 0.35rem 0.6rem;
border-radius: var(--radius-pill);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
font-size: 1.05rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.omni-mic-btn:hover {
border-color: var(--brand-primary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.voice-assistant-big-btn {
inline-size: 8.5rem;
block-size: 8.5rem;
border-radius: 50%;
border: 4px solid var(--brand-primary);
background: var(--brand-gradient);
background-color: var(--brand-primary);
color: var(--brand-on-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
margin-inline: auto;
cursor: pointer;
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.28);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.voice-assistant-big-btn:hover:not(:disabled) {
transform: scale(1.04);
box-shadow: 0 12px 30px rgba(79, 70, 229, 0.38);
}
.voice-assistant-big-btn.is-listening {
background: linear-gradient(135deg, #ef4444, #dc2626);
border-color: #fecaca;
animation: voice-pulse-ring 1.4s infinite ease-in-out;
}
.voice-assistant-big-btn.is-busy {
opacity: 0.85;
cursor: wait;
}
@keyframes voice-pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 18px rgba(239, 68, 68, 0);
transform: scale(1.05);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
transform: scale(1);
}
}
.app-main {
view-transition-name: main-workspace;
flex: 1;
width: 100%;
max-inline-size: 95dvw;
margin-inline: auto;
padding-block: 1rem 4.5rem;
padding-inline: 0.75rem;
container-type: inline-size;
}
.mobile-nav {
view-transition-name: mobile-nav;
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 35;
background-color: var(--bg-surface);
border-block-start: 1px solid var(--border-color);
padding-block: 0.35rem;
padding-inline: 0.5rem;
display: none;
justify-content: space-around;
align-items: center;
}
@media (max-width: 820px) {
.workflow-nav {
display: none;
}
.mobile-nav:not([hidden]) {
display: flex;
}
.hide-sm {
display: none;
}
}
@media (max-width: 1080px) {
.hide-md {
display: none;
}
}
}
@layer workflows {
.workflow-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-block-end: 1.15rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-lg);
background: var(--hero-gradient);
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-inline-start: 6px solid var(--brand-primary);
box-shadow: var(--shadow-sm);
}
.workflow-subtitle {
color: var(--text-secondary);
font-size: 0.92rem;
margin-block-start: 0.2rem;
}
.pulse-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 0.85rem;
margin-block-end: 1.25rem;
}
.pulse-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-inline-start: 5px solid var(--brand-primary);
border-radius: var(--radius-md);
padding: 0.95rem 1.05rem;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 0.35rem;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pulse-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.pulse-card--warning {
border-inline-start-color: var(--accent-amber);
}
.pulse-card--danger {
border-inline-start-color: var(--accent-danger);
}
.pulse-card--success {
border-inline-start-color: var(--accent-success);
}
.pulse-card__label {
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: space-between;
}
.pulse-card__metric {
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.65rem);
font-weight: 800;
}
.pulse-card__detail {
font-size: 0.83rem;
color: var(--text-secondary);
}
.split-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem;
}
@container (min-width: 900px) {
.split-layout--2col {
grid-template-columns: 1.2fr 1fr;
}
.split-layout--3col {
grid-template-columns: repeat(3, 1fr);
}
.split-layout--sidebar {
grid-template-columns: 2fr 1fr;
}
}
.member-board-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 1rem;
align-items: start;
}
.board-column {
content-visibility: auto;
contain-intrinsic-size: auto 320px auto 520px;
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
@supports not (content-visibility: auto) {
.board-column {
contain: layout style paint;
}
}
.board-column__header {
padding: 0.85rem 1rem;
border-block-end: 1px solid var(--border-color);
border-block-start: 5px solid var(--member-color, var(--brand-primary));
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background-color: var(--bg-subtle);
}
.board-column__body {
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.kids-world {
display: grid;
grid-template-columns: 1fr;
gap: 1.15rem;
}
@container (min-width: 860px) {
.kids-world {
grid-template-columns: 1.35fr 1fr;
}
}
.quest-stage {
background: linear-gradient(145deg, var(--bg-surface), var(--bg-subtle));
border: 2px solid var(--brand-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.quest-emoji-giant {
font-size: clamp(3.4rem, 2.5rem + 3vw, 5.2rem);
line-height: 1.1;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
}
.quest-title {
font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.2rem);
font-weight: 800;
}
.quest-hint {
font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
color: var(--text-secondary);
max-inline-size: 48ch;
}
.btn-kid-giant {
min-block-size: 64px;
padding-block: 0.9rem;
padding-inline: 1.8rem;
border-radius: var(--radius-xl);
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
font-weight: 800;
background-color: var(--accent-success);
color: #ffffff;
border: none;
cursor: pointer;
box-shadow: 0 6px 0 #115e2d, var(--shadow-md);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-kid-giant:active:not(:disabled) {
transform: translateY(4px);
box-shadow: 0 2px 0 #115e2d;
}
.supply-picture-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 0.65rem;
}
.supply-pic-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.75rem 0.5rem;
min-block-size: 92px;
background-color: var(--bg-surface);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
cursor: pointer;
font-weight: 700;
font-size: 0.85rem;
text-align: center;
transition: transform 0.12s ease, border-color 0.12s ease;
}
.supply-pic-btn:hover:not(:disabled) {
transform: scale(1.03);
border-color: var(--accent-amber);
}
.supply-pic-btn__emoji {
font-size: 2.1rem;
line-height: 1;
}
.star-jar {
position: relative;
inline-size: 110px;
block-size: 140px;
border: 4px solid var(--brand-primary);
border-radius: 18px 18px 28px 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(251, 191, 36, 0.16));
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
margin-inline: auto;
}
.star-jar__fill {
inline-size: 100%;
block-size: var(--jar-fill-pct, 35%);
background: linear-gradient(180deg, #fde047, #f59e0b);
transition: block-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.kids-weather-card {
border: 2px solid var(--accent-amber);
background: var(--bg-surface);
}
.kids-weather-scene {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-lg);
color: #ffffff;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
margin-block-end: 0.95rem;
}
.kids-weather-scene__svg {
inline-size: 220px;
block-size: 82px;
flex-shrink: 0;
}
.kids-weather-scene__info {
flex: 1 1 180px;
display: flex;
flex-direction: column;
gap: 0.2rem;
text-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
}
.kids-weather-scene__temp {
font-size: 2rem;
font-weight: 800;
line-height: 1.05;
}
.kids-weather-scene__cond {
font-size: 0.98rem;
font-weight: 700;
}
.kids-weather-scene__pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-block-start: 0.25rem;
text-shadow: none;
}
.kids-outfit-combined {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 0.9rem;
border-radius: var(--radius-lg);
background-color: var(--bg-subtle);
border: 1px solid var(--border-color);
margin-block-end: 0.9rem;
}
.kids-outfit-pair {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: 1.5rem;
padding: 0.5rem 0.75rem;
background-color: var(--bg-surface);
border-radius: var(--radius-md);
border: 1px dashed var(--border-color);
}
.kids-outfit-avatar-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.kids-outfit-avatar-col__label {
font-weight: 800;
font-size: 0.92rem;
color: var(--text-primary);
}
.kid-avatar-svg {
inline-size: 132px;
block-size: 175px;
filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.1));
}
.outfit-table-wrapper {
container-type: inline-size;
overflow-x: auto;
inline-size: 100%;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
}
.outfit-table {
inline-size: 100%;
border-collapse: collapse;
font-size: 0.88rem;
text-align: start;
}
.outfit-table__caption {
caption-side: top;
text-align: start;
padding: 0.55rem 0.8rem;
font-weight: 800;
font-size: 0.92rem;
color: var(--text-primary);
background-color: var(--bg-subtle);
border-block-end: 1px solid var(--border-color);
}
.outfit-table th,
.outfit-table td {
padding: 0.55rem 0.75rem;
border-block-end: 1px solid var(--border-color);
vertical-align: middle;
line-height: 1.35;
}
.outfit-table thead th {
background-color: var(--bg-subtle);
font-weight: 800;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-secondary);
white-space: nowrap;
}
.outfit-table tbody tr:last-child th,
.outfit-table tbody tr:last-child td {
border-block-end: none;
}
.outfit-table th[scope="row"] {
position: sticky;
inset-inline-start: 0;
background-color: var(--bg-surface);
z-index: 1;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
border-inline-end: 1px solid var(--border-color);
}
@container (max-width: 480px) {
.outfit-table th,
.outfit-table td {
padding: 0.45rem 0.55rem;
font-size: 0.82rem;
}
}
.kids-weather-presets {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding-block-start: 0.65rem;
border-block-start: 1px dashed var(--border-color);
}
}
@layer components {
.card {
--card-accent: var(--brand-primary);
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-block-start: 4px solid var(--card-accent);
border-radius: var(--radius-lg);
padding: 1.05rem;
box-shadow: var(--shadow-sm);
}
.split-layout > .card:nth-child(3n + 2) {
--card-accent: var(--brand-secondary);
}
.split-layout > .card:nth-child(3n + 3) {
--card-accent: var(--brand-tertiary);
}
html[data-person-theme="lisa-frank-neon"] .card:nth-child(5n + 1) {
--card-accent: #ff007f;
}
html[data-person-theme="lisa-frank-neon"] .card:nth-child(5n + 2) {
--card-accent: #00e5ff;
}
html[data-person-theme="lisa-frank-neon"] .card:nth-child(5n + 3) {
--card-accent: #ffab00;
}
html[data-person-theme="lisa-frank-neon"] .card:nth-child(5n + 4) {
--card-accent: #00c853;
}
html[data-person-theme="lisa-frank-neon"] .card:nth-child(5n + 5) {
--card-accent: #aa00ff;
}
html[data-person-theme="lisa-frank-neon"] .card {
box-shadow: 0 4px 16px rgba(255, 0, 127, 0.14);
}
html[data-person-theme="barbie-dreamhouse"] .card:nth-child(4n + 1) {
--card-accent: #e0218a;
}
html[data-person-theme="barbie-dreamhouse"] .card:nth-child(4n + 2) {
--card-accent: #ff69b4;
}
html[data-person-theme="barbie-dreamhouse"] .card:nth-child(4n + 3) {
--card-accent: #00c6ff;
}
html[data-person-theme="barbie-dreamhouse"] .card:nth-child(4n + 4) {
--card-accent: #f59e0b;
}
html[data-person-theme="barbie-dreamhouse"] .card {
box-shadow: 0 4px 16px rgba(224, 33, 138, 0.13);
}
html[data-person-theme="pastel-pink-purple-teal"] .card:nth-child(3n + 1),
html[data-person-theme="pastel-pink-purple-teal"] .pulse-card:nth-child(3n + 1) {
--card-accent: #f472b6;
border-inline-start-color: #f472b6;
}
html[data-person-theme="pastel-pink-purple-teal"] .card:nth-child(3n + 2),
html[data-person-theme="pastel-pink-purple-teal"] .pulse-card:nth-child(3n + 2) {
--card-accent: #a855f7;
border-inline-start-color: #a855f7;
}
html[data-person-theme="pastel-pink-purple-teal"] .card:nth-child(3n + 3),
html[data-person-theme="pastel-pink-purple-teal"] .pulse-card:nth-child(3n + 3) {
--card-accent: #14b8a6;
border-inline-start-color: #14b8a6;
}
html[data-person-theme="pastel-pink-purple-teal"] .card {
box-shadow: 0 4px 16px rgba(168, 85, 247, 0.11);
}
html[data-person-theme="crimson-obsidian"] .card:nth-child(3n + 1),
html[data-person-theme="crimson-obsidian"] .pulse-card:nth-child(3n + 1) {
--card-accent: #ef4444;
border-inline-start-color: #ef4444;
}
html[data-person-theme="crimson-obsidian"] .card:nth-child(3n + 2),
html[data-person-theme="crimson-obsidian"] .pulse-card:nth-child(3n + 2) {
--card-accent: #dc2626;
border-inline-start-color: #dc2626;
}
html[data-person-theme="crimson-obsidian"] .card:nth-child(3n + 3),
html[data-person-theme="crimson-obsidian"] .pulse-card:nth-child(3n + 3) {
--card-accent: #f43f5e;
border-inline-start-color: #f43f5e;
}
html[data-person-theme="crimson-obsidian"] .card {
box-shadow: 0 4px 18px rgba(239, 68, 68, 0.16);
}
html[data-person-theme="pastel-lemon-tangerine"] .card:nth-child(3n + 1),
html[data-person-theme="pastel-lemon-tangerine"] .pulse-card:nth-child(3n + 1) {
--card-accent: #facc15;
border-inline-start-color: #facc15;
}
html[data-person-theme="pastel-lemon-tangerine"] .card:nth-child(3n + 2),
html[data-person-theme="pastel-lemon-tangerine"] .pulse-card:nth-child(3n + 2) {
--card-accent: #fb923c;
border-inline-start-color: #fb923c;
}
html[data-person-theme="pastel-lemon-tangerine"] .card:nth-child(3n + 3),
html[data-person-theme="pastel-lemon-tangerine"] .pulse-card:nth-child(3n + 3) {
--card-accent: #f59e0b;
border-inline-start-color: #f59e0b;
}
html[data-person-theme="pastel-lemon-tangerine"] .card {
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.14);
}
html[data-person-theme="vscode-dark-plus"] .card:nth-child(4n + 1),
html[data-person-theme="vscode-dark-plus"] .pulse-card:nth-child(4n + 1) {
--card-accent: #007acc;
border-inline-start-color: #007acc;
}
html[data-person-theme="vscode-dark-plus"] .card:nth-child(4n + 2),
html[data-person-theme="vscode-dark-plus"] .pulse-card:nth-child(4n + 2) {
--card-accent: #569cd6;
border-inline-start-color: #569cd6;
}
html[data-person-theme="vscode-dark-plus"] .card:nth-child(4n + 3),
html[data-person-theme="vscode-dark-plus"] .pulse-card:nth-child(4n + 3) {
--card-accent: #9cdcfe;
border-inline-start-color: #9cdcfe;
}
html[data-person-theme="vscode-dark-plus"] .card:nth-child(4n + 4),
html[data-person-theme="vscode-dark-plus"] .pulse-card:nth-child(4n + 4) {
--card-accent: #4ec9b0;
border-inline-start-color: #4ec9b0;
}
html[data-person-theme="vscode-dark-plus"] .card {
box-shadow: 0 4px 18px rgba(0, 122, 204, 0.18);
}
.card + .card {
margin-block-start: 1rem;
}
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-block-end: 0.8rem;
}
.card__title {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 1.05rem;
font-weight: 700;
}
.item-stack {
display: flex;
flex-direction: column;
}
.item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-block: 0.68rem;
padding-inline: 0.55rem;
border-radius: var(--radius-sm);
transition: background-color 0.12s ease;
}
.item-row:not(:last-child) {
border-block-end: 1px solid var(--border-color);
}
.item-row:hover {
background-color: var(--bg-subtle);
}
.item-row:has(input[type="checkbox"]:checked) .item-row__title {
text-decoration: line-through;
color: var(--text-muted);
}
.item-row__main {
display: flex;
align-items: flex-start;
gap: 0.65rem;
min-inline-size: 0;
flex: 1;
}
.item-row__title {
font-weight: 600;
font-size: 0.93rem;
word-break: break-word;
}
.item-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--text-secondary);
margin-block-start: 0.15rem;
}
.item-row__actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-block-size: 3.125rem;
min-inline-size: 3.125rem;
padding-block: 0.68rem;
padding-inline: 1.2rem;
border-radius: var(--radius-md);
font-size: 0.96rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}
.btn:active:not(:disabled) {
transform: scale(0.98);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn--xs {
min-block-size: 2.4rem;
min-inline-size: 2.4rem;
padding-block: 0.38rem;
padding-inline: 0.75rem;
font-size: 0.84rem;
border-radius: var(--radius-sm);
}
.btn--sm {
min-block-size: 2.75rem;
min-inline-size: 2.75rem;
padding-block: 0.52rem;
padding-inline: 0.95rem;
font-size: 0.9rem;
border-radius: var(--radius-sm);
}
.btn--lg {
min-block-size: 3.65rem;
padding-block: 0.85rem;
padding-inline: 1.55rem;
font-size: 1.08rem;
border-radius: var(--radius-md);
}
@media (pointer: coarse) {
.btn {
min-block-size: 3.35rem;
padding-block: 0.78rem;
padding-inline: 1.3rem;
font-size: 1rem;
}
.btn--sm,
.subtab-btn,
.workflow-nav__link {
min-block-size: 3rem;
padding-block: 0.6rem;
padding-inline: 1.05rem;
font-size: 0.95rem;
}
.btn--xs,
.omni-mode-btn {
min-block-size: 2.75rem;
padding-block: 0.48rem;
padding-inline: 0.85rem;
font-size: 0.88rem;
}
.input,
.select {
min-block-size: 3rem;
font-size: 1rem;
}
}
.btn--primary {
background: var(--brand-gradient);
background-color: var(--brand-primary);
color: var(--brand-on-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
@supports (color: oklch(from red l c h)) {
.btn--primary,
.btn--avatar {
--threshold: 0.623;
--l: max(0, sign(var(--threshold) - l));
color: oklch(from var(--brand-primary) var(--l) 0 h);
}
}
@supports (color: contrast-color(red)) {
.btn--primary,
.btn--avatar {
color: contrast-color(var(--brand-primary));
}
}
.btn--primary:hover:not(:disabled) {
filter: brightness(1.08);
}
.btn--success {
background-color: var(--accent-success);
color: #ffffff;
}
.btn--warning {
background-color: var(--accent-amber);
color: #ffffff;
}
.btn--danger {
background-color: var(--accent-danger);
color: #ffffff;
}
.btn--surface {
background-color: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border-color);
}
.btn--surface:hover:not(:disabled) {
background-color: var(--bg-subtle);
}
.btn--ghost {
background-color: transparent;
color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) {
background-color: var(--bg-subtle);
color: var(--text-primary);
}
.btn--avatar {
inline-size: 2.1rem;
block-size: 2.1rem;
padding: 0;
border-radius: var(--radius-pill);
background-color: var(--brand-primary);
color: var(--brand-on-primary);
font-weight: 700;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding-block: 0.14rem;
padding-inline: 0.5rem;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.3;
}
.badge--brand {
background-color: var(--bg-indigo-soft);
color: var(--accent-indigo);
}
.badge--success {
background-color: var(--bg-success-soft);
color: var(--accent-success);
}
.badge--amber {
background-color: var(--bg-amber-soft);
color: var(--accent-amber);
}
.badge--danger {
background-color: var(--bg-danger-soft);
color: var(--accent-danger);
}
.badge--subtle {
background-color: var(--bg-subtle);
color: var(--text-secondary);
}
[popover] {
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background-color: var(--bg-elevated);
color: var(--text-primary);
box-shadow: var(--shadow-lg);
padding: 1rem;
max-inline-size: min(92dvw, 420px);
max-block-size: 82dvh;
overflow-y: auto;
margin: auto;
}
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
.popover-panel--wide {
inline-size: min(94dvw, 480px);
}
.omni-split-btn {
display: inline-flex;
align-items: stretch;
flex-shrink: 0;
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.omni-split-btn .omni-submit-btn {
border-start-end-radius: 0;
border-end-end-radius: 0;
box-shadow: none;
margin: 0;
}
.omni-split-btn .omni-mode-trigger {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
padding-inline: 0.55rem;
min-inline-size: 2rem;
box-shadow: none;
margin: 0;
}
#actions-menu-trigger {
anchor-name: --actions-menu-trigger;
}
#page-setup-trigger {
anchor-name: --page-setup-trigger;
}
#omni-mode-trigger {
anchor-name: --omni-mode-trigger;
}
.actions-menu-popover,
.page-setup-popover {
inline-size: min(94dvw, 440px);
padding: 0.5rem;
margin: 0;
}
.omni-mode-popover {
inline-size: min(92dvw, 310px);
padding: 0.4rem;
margin: 0;
}
@supports (position-area: block-end) {
#actions-menu-popover {
position-anchor: --actions-menu-trigger;
position-area: block-end span-inline-start;
position-try-fallbacks: flip-block, flip-inline;
margin-block-start: 0.35rem;
}
#page-setup-popover {
position-anchor: --page-setup-trigger;
position-area: block-end span-inline-start;
position-try-fallbacks: flip-block, flip-inline;
margin-block-start: 0.35rem;
}
#omni-mode-popover {
position-anchor: --omni-mode-trigger;
position-area: block-end span-inline-start;
position-try-fallbacks: flip-block, flip-inline;
margin-block-start: 0.35rem;
}
}
@supports not (position-area: block-end) {
#actions-menu-popover,
#page-setup-popover,
#omni-mode-popover {
position: fixed;
inset: auto;
top: var(--menu-top, 3.25rem);
right: var(--menu-right, 1rem);
}
}
[focusgroup~="menu"],
[focusgroup~="menu"] > [role="group"] {
display: flex;
flex-direction: column;
gap: 2px;
}
[focusgroup~="menu"] > button,
[focusgroup~="menu"] > [role="group"] > button {
display: flex;
align-items: flex-start;
gap: 0.65rem;
inline-size: 100%;
padding: 0.55rem 0.65rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
[focusgroup~="menu"] > button:hover,
[focusgroup~="menu"] > button:focus-visible,
[focusgroup~="menu"] > [role="group"] > button:hover,
[focusgroup~="menu"] > [role="group"] > button:focus-visible {
background-color: var(--bg-subtle);
border-color: var(--border-color);
outline: none;
}
[focusgroup~="menu"] button[role="menuitemradio"][aria-checked="true"] {
background-color: var(--bg-subtle);
border-color: var(--brand-primary);
}
[focusgroup~="menu"] button[role="menuitemradio"][aria-checked="true"]::after {
content: "✓";
margin-inline-start: auto;
font-weight: 800;
color: var(--brand-primary);
align-self: center;
}
[focusgroup~="menu"] .hint {
margin-inline-start: auto;
opacity: 0.85;
font-size: 0.72rem;
flex-shrink: 0;
}
[focusgroup~="menu"] hr {
border: 0;
border-block-start: 1px solid var(--border-color);
margin-block: 0.35rem;
}
.popover-panel__header {
margin-block-end: 0.75rem;
padding-block-end: 0.5rem;
border-block-end: 1px solid var(--border-color);
}
.lens-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.lens-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.8rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
text-align: start;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.lens-card:hover {
border-color: var(--brand-primary);
background-color: var(--bg-subtle);
}
.lens-card.is-active {
border-color: var(--brand-primary);
background-color: var(--bg-success-soft);
}
.modal-dialog {
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background-color: var(--bg-elevated);
color: var(--text-primary);
box-shadow: var(--shadow-lg);
padding: 0;
inline-size: min(94dvw, 680px);
max-block-size: 92dvh;
margin: auto;
overflow-y: auto;
scrollbar-gutter: stable;
overscroll-behavior: contain;
}
.modal-dialog--wide,
.modal-dialog:has(.modal-wide) {
inline-size: min(96dvw, 1320px);
max-block-size: 95dvh;
}
.modal-dialog:modal {
overscroll-behavior: contain;
}
.modal-dialog::backdrop {
background-color: rgba(10, 15, 24, 0.58);
backdrop-filter: blur(3px);
overflow: hidden;
overscroll-behavior: contain;
}
.modal-dialog--fullscreen {
inline-size: min(96dvw, 1120px);
min-block-size: 82dvh;
}
.modal-dialog__body {
padding: 1.25rem 1.5rem;
}
details.disclosure {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background-color: var(--bg-surface);
padding: 0.65rem 0.9rem;
}
details.disclosure + details.disclosure {
margin-block-start: 0.5rem;
}
details.disclosure > summary {
font-weight: 700;
cursor: pointer;
padding-block: 0.2rem;
}
details.disclosure[open] > summary {
margin-block-end: 0.65rem;
padding-block-end: 0.45rem;
border-block-end: 1px solid var(--border-color);
}
.form-stack {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form-field label {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-secondary);
}
.input,
.select,
.textarea {
padding: 0.55rem 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
font-size: 0.92rem;
inline-size: 100%;
}
.input:user-invalid,
.textarea:user-invalid {
border-color: var(--accent-danger);
}
.subtabs {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem;
background-color: var(--bg-subtle);
padding: 0.25rem;
border-radius: var(--radius-md);
margin-block-end: 1rem;
}
.subtab-btn {
min-block-size: 2.75rem;
padding: 0.52rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 600;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.subtab-btn.is-active {
background-color: var(--bg-surface);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.recipe-clickable {
cursor: pointer;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.recipe-card {
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.85rem;
}
.recipe-card:hover,
.item-row.recipe-clickable:hover {
border-color: var(--brand-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.recipe-card__title {
font-size: 1.12rem;
color: var(--brand-primary);
}
.cook-section-block {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background-color: var(--bg-surface);
overflow: hidden;
}
.cook-section-banner {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 1rem;
background-color: var(--bg-subtle);
border-block-end: 1px solid var(--border-color);
}
.cook-step-list {
display: flex;
flex-direction: column;
}
.cook-step-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem;
}
.cook-step-item:not(:last-child) {
border-block-end: 1px solid var(--border-color);
}
.cook-step-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
flex: 1;
cursor: pointer;
line-height: 1.55;
}
.cook-step-checkbox {
inline-size: 1.35rem;
block-size: 1.35rem;
margin-block-start: 0.25rem;
flex-shrink: 0;
}
.cook-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 999px;
background-color: var(--bg-subtle);
color: var(--brand-primary);
font-weight: 800;
font-size: 0.85em;
flex-shrink: 0;
}
.cook-step-item:has(.cook-step-checkbox:checked) .cook-step-text {
text-decoration: line-through;
color: var(--text-muted);
}
.gcal-shell {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.gcal-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.gcal-toolbar__left,
.gcal-toolbar__center,
.gcal-toolbar__right {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.gcal-nav-arrows {
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
.gcal-period-title {
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
font-weight: 700;
margin-inline-start: 0.25rem;
}
.gcal-member-dot {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-pill);
background-color: var(--bg-subtle);
}
.gcal-member-dot::before {
content: "";
inline-size: 0.6rem;
block-size: 0.6rem;
border-radius: 50%;
background-color: var(--dot-color, var(--brand-primary));
}
.gcal-frame {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
block-size: calc(100dvh - 13.5rem);
min-block-size: 520px;
}
.gcal-header-row {
display: grid;
grid-template-columns: 68px 1fr;
border-block-end: 1px solid var(--border-color);
background-color: var(--bg-surface);
z-index: 25;
}
.gcal-gutter-header {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
color: var(--text-muted);
border-inline-end: 1px solid var(--border-color);
}
.gcal-days-header-track {
display: grid;
grid-template-columns: repeat(var(--gcal-cols, 7), minmax(105px, 1fr));
}
.gcal-day-header {
padding: 0.5rem 0.6rem;
text-align: center;
border-inline-end: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.gcal-day-header.is-today {
background-color: rgba(15, 118, 110, 0.06);
}
.gcal-day-header__top {
display: flex;
align-items: center;
justify-content: space-between;
inline-size: 100%;
}
.gcal-day-name {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.gcal-day-add-btn {
inline-size: 1.5rem;
block-size: 1.5rem;
border-radius: 50%;
border: 1px solid var(--border-color);
background: var(--bg-surface);
color: var(--text-secondary);
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gcal-day-add-btn:hover {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
border-color: var(--brand-primary);
}
.gcal-day-num {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
font-size: 1.05rem;
font-weight: 700;
}
.gcal-day-num.is-today {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
}
.gcal-allday-row {
display: grid;
grid-template-columns: 68px 1fr;
border-block-end: 1px solid var(--border-color);
background-color: var(--bg-subtle);
min-block-size: 2.2rem;
}
.gcal-gutter-allday {
font-size: 0.7rem;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
border-inline-end: 1px solid var(--border-color);
}
.gcal-allday-track {
display: grid;
grid-template-columns: repeat(var(--gcal-cols, 7), minmax(105px, 1fr));
}
.gcal-allday-cell {
padding: 0.25rem;
border-inline-end: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 0.2rem;
cursor: pointer;
}
.gcal-allday-pill {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
border-radius: var(--radius-xs);
padding: 0.15rem 0.45rem;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gcal-scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: auto;
position: relative;
}
.gcal-body-grid {
display: grid;
grid-template-columns: 68px 1fr;
position: relative;
block-size: 1440px;
}
.gcal-time-gutter {
position: sticky;
inset-inline-start: 0;
z-index: 22;
background-color: var(--bg-surface);
border-inline-end: 1px solid var(--border-color);
block-size: 1440px;
}
.gcal-gutter-hour {
position: absolute;
inset-inline: 0;
padding-inline-end: 0.45rem;
text-align: end;
font-size: 0.7rem;
color: var(--text-muted);
transform: translateY(-0.55em);
pointer-events: none;
}
.gcal-now-gutter-pill {
position: absolute;
inset-inline: 2px;
transform: translateY(-50%);
background-color: #ef4444;
color: #ffffff;
font-size: 0.65rem;
font-weight: 800;
text-align: center;
padding: 0.1rem 0.2rem;
border-radius: 4px;
z-index: 26;
pointer-events: none;
}
.gcal-columns-track {
display: grid;
grid-template-columns: repeat(var(--gcal-cols, 7), minmax(105px, 1fr));
position: relative;
block-size: 1440px;
}
.gcal-day-col {
position: relative;
block-size: 1440px;
border-inline-end: 1px solid var(--border-color);
user-select: none;
cursor: crosshair;
}
.gcal-day-col.is-today {
background-color: rgba(15, 118, 110, 0.03);
}
.gcal-offhours {
position: absolute;
inset-inline: 0;
background-color: rgba(100, 116, 139, 0.06);
pointer-events: none;
z-index: 1;
}
.gcal-hour-cell {
position: absolute;
inset-inline: 0;
border-block-start: 1px solid var(--border-color);
pointer-events: none;
z-index: 2;
}
.gcal-halfhour-line {
position: absolute;
inset-inline: 0;
top: 30px;
border-block-start: 1px dashed rgba(148, 163, 184, 0.28);
}
.gcal-item {
position: absolute;
border-radius: var(--radius-xs);
padding: 0.25rem 0.45rem;
overflow: hidden;
cursor: pointer;
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.gcal-item--routine {
z-index: 10;
color: var(--text-primary);
backdrop-filter: blur(2px);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}
.gcal-item--routine:hover {
z-index: 24;
filter: brightness(0.97);
box-shadow: var(--shadow-md);
}
.gcal-item--event {
z-index: 20;
color: #ffffff;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(255, 255, 255, 0.22);
}
.gcal-item--event:hover {
z-index: 25;
filter: brightness(1.08);
box-shadow: var(--shadow-md);
}
.gcal-item__title {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gcal-item__meta {
font-size: 0.68rem;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gcal-now-line {
position: absolute;
inset-inline: 0;
height: 2px;
background-color: #ef4444;
z-index: 28;
pointer-events: none;
}
.gcal-now-dot {
position: absolute;
inset-inline-start: -5px;
top: -4px;
inline-size: 10px;
block-size: 10px;
border-radius: 50%;
background-color: #ef4444;
}
.gcal-drag-ghost {
position: absolute;
inset-inline: 3px;
background-color: rgba(15, 118, 110, 0.28);
border: 2px dashed var(--brand-primary);
border-radius: var(--radius-xs);
padding: 0.25rem 0.45rem;
z-index: 30;
pointer-events: none;
display: flex;
flex-direction: column;
font-size: 0.75rem;
color: var(--text-primary);
}
.gcal-month-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: var(--bg-subtle);
border-block-end: 1px solid var(--border-color);
}
.gcal-month-dayname {
padding: 0.5rem;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-secondary);
}
.gcal-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(115px, 1fr);
}
.gcal-month-cell {
padding: 0.45rem;
border-inline-end: 1px solid var(--border-color);
border-block-end: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 0.35rem;
cursor: pointer;
}
.gcal-month-cell.is-outside {
opacity: 0.5;
background-color: var(--bg-subtle);
}
.gcal-month-cell.is-today {
background-color: rgba(15, 118, 110, 0.05);
}
.gcal-month-cell__items {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.gcal-month-chip {
padding: 0.18rem 0.45rem;
border-radius: var(--radius-xs);
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gcal-month-chip--event {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
}
.gcal-month-chip--routine {
background-color: var(--bg-subtle);
color: var(--text-secondary);
border-inline-start: 3px solid var(--brand-primary);
}
.toast-region {
position: fixed;
inset-block-end: 1.25rem;
inset-inline-end: 1.25rem;
z-index: 90;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-inline-size: 360px;
pointer-events: none;
}
.toast {
pointer-events: auto;
background-color: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-inline-start: 4px solid var(--brand-primary);
border-radius: var(--radius-md);
padding: 0.7rem 0.95rem;
box-shadow: var(--shadow-lg);
font-size: 0.86rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
}
.confetti-canvas {
position: fixed;
inset: 0;
inline-size: 100dvw;
block-size: 100dvh;
pointer-events: none;
z-index: 100;
}
.loading-shell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-block-size: 50dvh;
gap: 0.75rem;
color: var(--text-secondary);
}
.spinner {
inline-size: 2rem;
block-size: 2rem;
border: 3px solid var(--border-color);
border-block-start-color: var(--brand-primary);
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
}
@layer utilities {
.sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.row-wrap {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.text-muted {
color: var(--text-secondary);
font-size: 0.85rem;
}
.empty-state {
text-align: center;
padding: 1.6rem 1rem;
color: var(--text-secondary);
background-color: var(--bg-subtle);
border-radius: var(--radius-md);
font-size: 0.9rem;
}
.theme-studio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
max-block-size: 52dvh;
overflow-y: auto;
padding: 0.2rem;
}
.theme-swatch-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-md);
border: 2px solid var(--swatch-border, var(--border-color));
background-color: var(--swatch-bg, var(--bg-surface));
overflow: hidden;
cursor: pointer;
padding: 0;
text-align: start;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.theme-swatch-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--swatch-primary, var(--brand-primary));
}
.theme-swatch-card.is-active {
border-width: 3px;
border-color: var(--swatch-primary, var(--brand-primary));
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08), var(--shadow-md);
}
.theme-swatch-card__banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.75rem;
min-block-size: 2.9rem;
}
.theme-swatch-card__emoji {
font-size: 1.45rem;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.theme-swatch-card__dots {
display: flex;
align-items: center;
gap: 0.28rem;
background: rgba(255, 255, 255, 0.28);
padding: 0.22rem 0.4rem;
border-radius: var(--radius-pill);
}
.theme-swatch-card__dots span {
inline-size: 0.85rem;
block-size: 0.85rem;
border-radius: 999px;
border: 1.5px solid rgba(255, 255, 255, 0.85);
forced-color-adjust: none;
}
.theme-swatch-card__body {
padding: 0.65rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1;
}
@media (forced-colors: active) {
.card,
.workflow-header,
.top-bar,
.btn,
.badge {
border: 1px solid CanvasText;
}
.workflow-nav__link.is-active,
.omni-mode-btn.is-active {
outline: 2px solid Highlight;
}
}
}
@keyframes vt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes vt-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes vt-slide-from-right {
from { transform: translateX(28px); }
to { transform: translateX(0); }
}
@keyframes vt-slide-to-left {
from { transform: translateX(0); }
to { transform: translateX(-28px); }
}
@keyframes vt-slide-from-left {
from { transform: translateX(-28px); }
to { transform: translateX(0); }
}
@keyframes vt-slide-to-right {
from { transform: translateX(0); }
to { transform: translateX(28px); }
}
::view-transition-old(app-header),
::view-transition-new(app-header),
::view-transition-old(mobile-nav),
::view-transition-new(mobile-nav),
::view-transition-old(safety-banner),
::view-transition-new(safety-banner) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(main-workspace) {
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-to-left;
}
::view-transition-new(main-workspace) {
animation:
180ms cubic-bezier(0, 0, 0.2, 1) 45ms both vt-fade-in,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-from-right;
}
html:active-view-transition-type(forward)::view-transition-old(main-workspace) {
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(main-workspace) {
animation:
180ms cubic-bezier(0, 0, 0.2, 1) 45ms both vt-fade-in,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-from-right;
}
html:active-view-transition-type(backward)::view-transition-old(main-workspace) {
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(main-workspace) {
animation:
180ms cubic-bezier(0, 0, 0.2, 1) 45ms both vt-fade-in,
210ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-from-left;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
.kiosk-shell {
display: grid;
grid-template-columns: 112px 1fr;
gap: 1.25rem;
min-block-size: calc(100dvh - 5.5rem);
align-items: stretch;
}
@media (max-width: 820px) {
.kiosk-shell {
grid-template-columns: 1fr;
}
}
.kiosk-rail {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.55rem;
background-color: var(--bg-surface);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 0.75rem 0.5rem;
box-shadow: var(--shadow-md);
}
.kiosk-rail__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.85rem 0.35rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 800;
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
}
.kiosk-rail__btn:hover {
background-color: var(--bg-subtle);
color: var(--text-primary);
}
.kiosk-rail__btn.is-active {
background-color: var(--brand-primary);
color: var(--brand-on-primary);
box-shadow: var(--shadow-sm);
}
.kiosk-screensaver {
position: fixed;
inset: 0;
z-index: 120;
background-color: #000000;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
overflow: hidden;
}
.kiosk-oled-clock {
text-align: center;
padding: 2rem;
animation: oled-shift 120s ease-in-out infinite alternate;
}
@keyframes oled-shift {
0% { transform: translate(-24px, -18px); }
25% { transform: translate(22px, -14px); }
50% { transform: translate(-18px, 20px); }
75% { transform: translate(26px, 16px); }
100% { transform: translate(0px, -22px); }
}
.week-prep-stepper {
display: grid;
grid-template-columns: repeat(7, minmax(110px, 1fr));
gap: 0.45rem;
overflow-x: auto;
padding-block-end: 0.25rem;
}
.week-prep-step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-md);
border: 2px solid var(--border-color);
background-color: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
text-align: start;
transition: all 0.14s ease;
}
.week-prep-step.is-active {
border-color: var(--brand-primary);
background-color: var(--bg-subtle);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.week-prep-step.is-done {
border-color: var(--accent-success);
}
.cleaning-zone-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
gap: 0.85rem;
}
.cleaning-zone-card {
border-radius: var(--radius-md);
border: 2px solid var(--border-color);
background-color: var(--bg-surface);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cleaning-zone-card__header {
padding: 0.65rem 0.9rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: space-between;
border-block-end: 1px solid var(--border-color);
}
.cleaning-check-table {
inline-size: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.cleaning-check-table th,
.cleaning-check-table td {
border: 1px solid var(--border-color);
padding: 0.45rem 0.6rem;
}
.cleaning-check-table th {
background-color: var(--bg-subtle);
font-weight: 800;
}
.filter-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
}
.kanban-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.85rem;
align-items: start;
}
.kanban-col {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background-color: var(--bg-subtle);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.specs-shopping-mode .spec-card-value {
font-size: 1.35rem;
font-weight: 900;
letter-spacing: 0.02em;
color: var(--brand-primary);
}
.cleaning-zone-card,
.kanban-col,
.recipe-card,
.spec-card,
.guide-card {
content-visibility: auto;
contain-intrinsic-size: auto 320px;
}
[hidden] {
display: none !important;
}
.omni-bar__modes {
scrollbar-width: none;
}
.omni-bar__modes::-webkit-scrollbar {
display: none;
}
.gcal-shell,
.gcal-frame {
min-inline-size: 0;
max-inline-size: 100%;
}
@media (max-width: 820px) {
.btn {
min-block-size: 2.5rem;
min-inline-size: 2.5rem;
padding-block: 0.45rem;
padding-inline: 0.8rem;
font-size: 0.86rem;
}
.btn--sm {
min-block-size: 2.2rem;
min-inline-size: 2.2rem;
padding-block: 0.32rem;
padding-inline: 0.6rem;
font-size: 0.8rem;
}
.btn--xs {
min-block-size: 1.95rem;
min-inline-size: 1.95rem;
padding-block: 0.22rem;
padding-inline: 0.48rem;
font-size: 0.75rem;
}
.top-bar__inner {
max-inline-size: 100%;
padding-block: 0.35rem;
padding-inline: 0.5rem;
gap: 0.35rem;
}
#btn-header-settings {
display: none;
}
.brand-cluster {
min-inline-size: 0;
flex: 1 1 auto;
gap: 0.35rem;
}
.brand-link {
gap: 0.35rem;
min-inline-size: 0;
}
.brand-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.brand-text {
min-inline-size: 0;
}
.brand-text strong {
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-inline-size: 145px;
}
.role-pill {
font-size: 0.6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-inline-size: 145px;
}
.header-actions {
gap: 0.22rem;
flex-shrink: 0;
}
.header-actions .btn,
.header-actions .btn--sm {
min-inline-size: 2.05rem;
min-block-size: 2.05rem;
padding-block: 0.25rem;
padding-inline: 0.42rem;
font-size: 0.76rem;
gap: 0.18rem;
border-radius: var(--radius-sm);
}
.header-actions .btn--avatar {
inline-size: 2.05rem;
block-size: 2.05rem;
min-inline-size: 2.05rem;
min-block-size: 2.05rem;
padding: 0;
border-radius: var(--radius-pill);
}
.omni-bar {
padding-block: 0.3rem;
padding-inline: 0.5rem;
}
.omni-bar__form {
max-inline-size: 100%;
gap: 0.3rem;
}
.omni-bar__modes {
inline-size: 100%;
gap: 0.2rem;
}
.omni-mode-btn {
min-block-size: 1.85rem;
padding-block: 0.2rem;
padding-inline: 0.52rem;
font-size: 0.74rem;
}
.omni-bar__inputs {
flex: 1 1 100%;
display: flex;
flex-wrap: nowrap;
gap: 0.28rem;
min-inline-size: 0;
}
.omni-input {
flex: 1 1 0;
min-inline-size: 85px;
min-block-size: 2.1rem;
padding-block: 0.25rem;
padding-inline: 0.5rem;
font-size: 0.8rem;
}
.omni-bar__context {
flex-shrink: 1;
min-inline-size: 0;
display: flex;
flex-wrap: nowrap;
gap: 0.22rem;
}
.omni-select,
.omni-date {
max-inline-size: 98px;
min-block-size: 2.1rem;
padding-block: 0.2rem;
padding-inline: 0.35rem;
font-size: 0.73rem;
text-overflow: ellipsis;
}
.omni-submit-btn {
min-block-size: 2.1rem;
min-inline-size: auto;
padding-block: 0.25rem;
padding-inline: 0.5rem;
font-size: 0.75rem;
flex-shrink: 0;
}
.omni-split-btn .omni-mode-trigger {
min-block-size: 2.1rem;
min-inline-size: 1.7rem;
padding-block: 0.25rem;
padding-inline: 0.38rem;
font-size: 0.75rem;
}
.mobile-nav {
max-inline-size: 100dvw;
padding-block: 0.22rem calc(0.22rem + env(safe-area-inset-bottom, 0px));
padding-inline: 0.15rem;
gap: 0.08rem;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.mobile-nav .workflow-nav__link,
.mobile-nav__link {
flex: 1 1 0;
min-inline-size: 0;
min-block-size: 2.75rem;
padding: 0.2rem 0.1rem;
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1rem;
font-size: 0.62rem;
font-weight: 700;
line-height: 1.1;
text-align: center;
}
.mobile-nav__icon {
font-size: 1.05rem;
line-height: 1;
}
.mobile-nav__label {
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-main {
max-inline-size: 100%;
padding-inline: 0.6rem;
padding-block: 0.65rem 4.75rem;
overflow-x: clip;
}
.workflow-header,
.workflow-header > *,
.row-wrap,
.row-between,
.card,
.item-row,
.item-row__actions,
.filter-toolbar {
min-inline-size: 0;
max-inline-size: 100%;
}
.workflow-header {
padding: 0.75rem 0.85rem;
gap: 0.55rem;
margin-block-end: 0.85rem;
}
.workflow-subtitle {
font-size: 0.82rem;
}
.toast-region {
inset-inline: 0.75rem;
inset-block-end: 4.25rem;
max-inline-size: calc(100dvw - 1.5rem);
}
.subtabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-inline-size: 100%;
inline-size: 100%;
gap: 0.22rem;
padding: 0.22rem;
}
.subtab-btn {
min-block-size: 2.15rem;
min-inline-size: 0;
padding: 0.32rem 0.45rem;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
justify-content: center;
}
.item-row__actions .btn {
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.gcal-toolbar {
padding: 0.55rem 0.65rem;
gap: 0.45rem;
}
.gcal-toolbar__left,
.gcal-toolbar__center,
.gcal-toolbar__right {
gap: 0.35rem;
}
.gcal-period-title {
font-size: 0.95rem;
margin-inline-start: 0.1rem;
}
.gcal-frame {
block-size: calc(100dvh - 15.5rem);
min-block-size: 420px;
}
.gcal-header-row,
.gcal-allday-row,
.gcal-body-grid {
grid-template-columns: 38px 1fr;
}
.gcal-days-header-track,
.gcal-allday-track,
.gcal-columns-track {
grid-template-columns: repeat(var(--gcal-cols, 7), minmax(0, 1fr));
}
.gcal-gutter-header,
.gcal-gutter-allday,
.gcal-gutter-hour {
font-size: 0.58rem;
padding-inline-end: 0.2rem;
}
.gcal-day-header {
padding: 0.25rem 0.1rem;
gap: 0.1rem;
min-inline-size: 0;
}
.gcal-day-header__top {
justify-content: center;
}
.gcal-day-name {
font-size: 0.58rem;
letter-spacing: 0.02em;
}
.gcal-day-add-btn {
display: none;
}
.gcal-day-num {
inline-size: 1.45rem;
block-size: 1.45rem;
font-size: 0.78rem;
}
.gcal-allday-cell {
padding: 0.12rem;
min-inline-size: 0;
}
.gcal-allday-pill {
padding: 0.1rem 0.2rem;
font-size: 0.62rem;
}
.gcal-item {
padding: 0.12rem 0.2rem;
}
.gcal-item__title {
font-size: 0.62rem;
}
.gcal-item__meta {
font-size: 0.55rem;
}
.gcal-month-dayname {
padding: 0.3rem 0.1rem;
font-size: 0.65rem;
}
.gcal-month-grid {
grid-auto-rows: minmax(76px, 1fr);
}
.gcal-month-cell {
padding: 0.2rem;
min-inline-size: 0;
}
.gcal-month-chip {
padding: 0.1rem 0.2rem;
font-size: 0.6rem;
}
}
@media (max-width: 600px) {
.pulse-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
margin-block-end: 0.85rem;
}
.pulse-card {
padding: 0.65rem 0.7rem;
gap: 0.2rem;
min-inline-size: 0;
}
.pulse-card__label {
font-size: 0.66rem;
}
.pulse-card__metric {
font-size: 1.1rem;
}
.pulse-card__detail {
font-size: 0.74rem;
}
.item-row {
flex-wrap: wrap;
gap: 0.45rem;
padding-inline: 0.35rem;
}
.item-row__main {
flex: 1 1 170px;
}
.item-row__actions {
flex-wrap: wrap;
margin-inline-start: auto;
}
.card {
padding: 0.8rem;
}
.kids-outfit-pair {
gap: 0.75rem;
}
.kid-avatar-svg {
inline-size: 110px;
block-size: 146px;
}
}
@media print {
.top-bar,
.workflow-nav,
.safety-banner,
.no-print,
button:not(.print-keep) {
display: none !important;
}
body,
.main-workspace,
.card {
background: #ffffff !important;
color: #000000 !important;
box-shadow: none !important;
}
.cleaning-zone-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}