/* Okkadio layout layer: geometry retained, /_okkadio-public-20260929-4cbb75fa58bf-fix1/glass-system.css owns materials. */
@layer okkadio-layout {
/* Shared text and control roles · Block 25. Used by the website and the app. */
:root {
  --type-body: 1rem;
  --type-help: .875rem;
  --type-label: .875rem;
  --type-control: 1rem;
  --type-menu: .9375rem;
  --type-meta: .75rem;
  --type-card: 1.25rem;
  --type-section: 1.5rem;
  --type-page: clamp(2rem, 3.2vw, 2.5rem);
  --weight-body: 400;
  --weight-label: 500;
  --weight-action: 600;
  --weight-title: 700;
  --control-border: #7b879b;
  --focus-color: #51499f;
  --reading-link: #51499f;
  --space-panel: 24px;
  --motion-quick: 180ms;
  --motion-story: 480ms;
  --motion-ease: cubic-bezier(.22, .7, .25, 1);
}
html { font-size: 100%; }
body { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: var(--type-body); font-weight: var(--weight-body); line-height: 1.55; }
button, input, textarea, select { font-family: inherit; }
strong, b { font-weight: var(--weight-action); }
[data-theme="light"] { --muted:#596579; --subtle:#596579; }
body[data-theme="dark"], body[data-workspace-kind][data-theme="dark"] {
  --bg:#1d2129; --surface:#292f3a; --surface-raised:#343d4c;
  --surface-soft:#343d4c; --text:#f2f4f8; --muted:#bbc4d3; --subtle:#bbc4d3;
  --control-border:#8793a8; --focus-color:#73d8ff; --reading-link:#c3bcff;
}
body[data-theme="contrast"], body[data-workspace-kind][data-theme="contrast"] {
  --bg:#000; --surface:#111; --surface-raised:#1b1b1b; --surface-soft:#1b1b1b;
  --text:#fff; --muted:#eee; --subtle:#eee; --border:#fff; --border-strong:#fff;
  --accent-strong:#ffe18f; --action-bg:#ffe18f; --action-hover:#ffebb0; --action-text:#161616;
  --control-border:#fff; --focus-color:#87dcff; --reading-link:#87dcff;
}
body[data-workspace-kind][data-theme="contrast"] {
  --bg:#000; --surface:#111; --surface-raised:#1b1b1b; --surface-soft:#1b1b1b;
  --accent-strong:#ffe18f; --dialog-bg:#111;
}
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset:2px; }
button, a { -webkit-tap-highlight-color: transparent; }
label { font-size:var(--type-label); font-weight:var(--weight-label); line-height:1.4; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
  font-size:var(--type-control); font-weight:var(--weight-body); line-height:1.45;
  border-color:var(--control-border); min-height:46px;
}
input::placeholder, textarea::placeholder { color:var(--muted,#596579); opacity:1; font-weight:400; }
/* Explicit roles also apply when the menu is portalled to body or a dialog. */
body .select-trigger, body .settings-detail .select-trigger:not(.has-color-value),
body .business-detail .select-trigger:not(.has-color-value), body .app-actions .select-trigger,
body .select-option, body .settings-detail .select-option, body .business-detail .select-option {
  font-size:var(--type-control); font-weight:var(--weight-body); line-height:1.45;
}
body select.select-native { min-height:0!important; min-width:0!important; }
body .select-trigger { min-height:46px; border-color:var(--control-border); border-radius:12px; white-space:normal; }
body .select-option { min-height:44px; padding:10px 12px; }
body .select-option[aria-selected="true"] { font-weight:var(--weight-action); }
.select-menu { color:var(--text); font-size:var(--type-control); line-height:1.45; }
.select-menu-hint { padding:8px 12px; margin:0; font-size:var(--type-help); font-weight:400; color:var(--muted); line-height:1.5; }
.select-option--placeholder { border-top:1px solid var(--border); }
/* Native controls stay native, with one geometry and a generous label target. */
body input[type="checkbox"], body input[type="radio"] {
  appearance:auto; flex:0 0 20px; inline-size:20px; block-size:20px;
  min-width:20px; min-height:20px; width:20px; height:20px; padding:0; margin:2px 0 0;
  border:1px solid var(--control-border); accent-color:var(--accent-strong,#5f58b5); box-shadow:none;
}
body label:has(>input[type="checkbox"]), body label:has(>input[type="radio"]), body .checkline {
  display:flex; align-items:flex-start; gap:10px; min-height:44px; padding-block:10px;
  font-size:var(--type-label); font-weight:500; line-height:1.45;
}
.primary,.secondary,.textbtn,.oauth-button,.btn,.buttonlink,.homepage-secondary,
.home-redesign .homepage-primary, .home-redesign .primary-nav-action {
  font-size:var(--type-control); font-weight:var(--weight-action); line-height:1.4;
}
body .textbtn { border:1px solid var(--control-border); background:var(--surface); min-height:44px; padding:9px 12px; border-radius:12px; }
body .secondary { border-color:var(--control-border); }
body .primary:focus-visible, body .secondary:focus-visible, body .textbtn:focus-visible,
body .select-trigger:focus-visible { outline:3px solid var(--focus-color); outline-offset:3px; }
body .hint, body .field-hint, body .empty-state p, body .setting-row small,
body .decision-grid article>p, body .decision-grid .muted, body .dashboard-row-content small,
body .quick-action small, body .providerrow small { font-size:var(--type-help); font-weight:400; line-height:1.5; }
body .setting-row strong { font-size:var(--type-body); font-weight:600; line-height:1.4; }
body .setting-row { padding:20px; gap:20px; }
body .settings-detail { padding:24px; }
body .settings-nav button, body .business-nav button { font-size:var(--type-menu); font-weight:500; line-height:1.4; }
body .settings-nav button.active, body .business-nav button.active { font-weight:600; }
body .eyebrow,body .section-kicker,body .pro-badge,body .example-badge { font-size:var(--type-meta); font-weight:600; letter-spacing:.06em; line-height:1.4; }
body .decision-grid h3 { font-size:var(--type-card); font-weight:600; }
body .screenhead h1 { font-size:var(--type-page); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
body .lead { font-size:var(--type-body); font-weight:400; line-height:1.5; }
body .dashboard-starter { padding:var(--space-panel); }
body .dashboard-starter h2 { font-size:clamp(1.5rem,2.4vw,2rem); max-width:28ch; }
body .quick-actions { grid-template-columns:1fr; gap:12px; }
body .quick-action-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
body .quick-action { min-width:0; padding:16px; align-items:flex-start; }
body .quick-action strong { font-size:var(--type-body); font-weight:600; }
body .business-profile-context .business-context-heading { display:grid; gap:6px; }
.business-context-heading { display:grid; gap:6px; grid-column:1/-1; }
.business-context-heading strong { font-size:var(--type-card); line-height:1.35; }
/* The title belongs to the seven calendar columns, independently of the aside. */
body .calendar-screenhead { display:block; }
body .calendar-screenhead>div:first-child { max-width:none; }
body .calendar-screenhead .monthnav { width:calc(100% - 312px); justify-content:center; margin-top:20px; }
body .monthnav button { min-width:44px; min-height:44px; }
body .monthnav strong { font-size:var(--type-section); font-weight:600; }
/* Rounded outer shell, inset native scroll area: scrollbar arrows cannot protrude. */
body .context-panel { overflow:clip; max-height:none; }
body #contextPanelBody { overflow:auto; max-height:calc(100dvh - 224px); padding:4px 8px 8px 4px; margin:0 -4px; scrollbar-gutter:stable; }
body .context-panel-head { padding:0 4px 10px; }
*::-webkit-scrollbar-button { display:none; width:0; height:0; }
body .onboarding-progress span.active { background:var(--action-bg); color:var(--action-text); border-color:var(--control-border); }
.field-guidance { display:block; margin:5px 0 0; font-size:var(--type-help); font-weight:400; color:var(--muted); line-height:1.5; }
.field-guidance-extra { margin:6px 0 12px; font-size:var(--type-help); font-weight:400; color:var(--muted); }
.field-guidance-extra summary { cursor:pointer; display:flex; align-items:center; gap:7px; min-height:32px; color:var(--reading-link); font-weight:500; }
.field-guidance-extra summary::before { content:'i'; display:inline-grid; place-items:center; border:1px solid currentColor; border-radius:50%; width:20px; height:20px; font-style:normal; flex:none; }
.field-guidance-extra p { margin:6px 0 0; line-height:1.5; }
body .brand .brand-lockup { display:inline-flex; align-items:center; gap:8px; margin:0; }
body .brand-lockup img { width:42px; height:42px; margin:0; }
body .brand-lockup .brand-word { font-size:30px; font-weight:500; color:var(--text,#202633); letter-spacing:-.04em; line-height:1.1; margin:0; text-shadow:none; -webkit-text-stroke:0; }
body .brand .brand-caption { margin:4px 0 0 50px; font-size:12px; font-weight:400; }
.app-topic-footer { width:min(1240px,calc(100% - 40px)); margin:0 auto 24px; border-top:1px solid var(--border); padding-top:24px; }
.app-topic-footer h2 { font-size:var(--type-card); font-weight:600; }
.topic-footer-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.topic-footer-groups>div { display:grid; align-content:start; gap:8px; }
.topic-footer-groups strong { font-size:var(--type-label); font-weight:600; }
.topic-footer-groups a { color:var(--reading-link); font-size:var(--type-help); text-underline-offset:3px; padding-block:3px; }
.approval-snapshot { padding:16px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface-soft); }
.approval-snapshot summary { cursor:pointer; font-weight:600; min-height:44px; }
.approval-snapshot dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.approval-snapshot dt { font-size:var(--type-help); color:var(--muted); }
.approval-snapshot dd { margin:4px 0 0; overflow-wrap:anywhere; }
.approval-snapshot .snapshot-note { white-space:pre-wrap; }
@media(max-width:1050px) {
  body .quick-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .calendar-screenhead .monthnav { width:calc(100% - 262px); }
}
@media(max-width:850px) {
  body #contextPanelBody { max-height:none; overflow:visible; margin:0; padding:4px; }
  body .calendar-screenhead .monthnav { width:100%; }
  body .calendar-heading-row { display:grid; gap:8px; }
}
@media(max-width:560px) {
  :root { --space-panel:20px; }
  body .settings-detail { padding:16px; }
  body .setting-row { padding:16px; gap:12px; }
  body .app-actions .select-control { min-width:110px; max-width:130px; }
  body .app-actions .select-trigger { font-size:var(--type-menu); padding-left:10px; }
  body .brand .brand-lockup img { width:32px; height:32px; }
  body .brand .brand-lockup .brand-word { font-size:24px; display:inline; }
  body .brand .brand-lockup { display:inline-flex; margin:0; }
  body .quick-action-grid { grid-template-columns:1fr; }
  .topic-footer-groups { grid-template-columns:1fr; gap:20px; }
  .approval-snapshot dl { grid-template-columns:1fr; }
  body .action-group button, body .business-workspace-actions button { font-size:var(--type-control); }
  body .action-group { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@media(forced-colors:active) {
  body { --control-border:ButtonText; --focus-color:Highlight; --reading-link:LinkText; }
  body :focus-visible { outline:3px solid Highlight; outline-offset:3px; box-shadow:none; }
  body button, body input, body select, body textarea, body .select-menu, body .select-option { border:1px solid ButtonText; }
  body .select-option[aria-selected="true"], body [aria-pressed="true"] { outline:2px solid Highlight; outline-offset:-3px; }
  body .onboarding-progress span.active { background:Highlight; color:HighlightText; }
  body .brand-word { color:CanvasText; }
}

}