/* Concept 02 shared surfaces; canvases, video and printed output keep their own colors. */
@layer icon-selection, design, pearl, legacy;
@import url('/app-icons.css?v=20261014-browser-guide-version');
@import url('/design-variants.css?v=20261015-square-corners');
@import url('/nippo/css/safety-pearl.css?v=20261014-safety-entry');
.ckas-version-info{border-top:1px solid var(--pearl-edge);padding-top:12px;font-size:13px;line-height:1.6;color:var(--pearl-muted)}.ckas-version-info p{margin:0 0 6px!important}.ckas-version-info summary{cursor:pointer;min-height:44px;padding-block:10px}.ckas-version-info code{display:block;padding:4px 0 10px;overflow-wrap:anywhere;user-select:all}
@layer pearl {
 .pearl-suite :is(#globalSafetyReminderConfirm,.nippo-date-next) { min-height:56px!important; padding:12px!important; border:1px solid var(--pearl-ink)!important; border-radius:16px!important; background:linear-gradient(145deg,#61778d,#30465d)!important; color:#fff!important; font-size:18px!important; font-weight:700!important; line-height:1.4!important; box-shadow:none!important; cursor:pointer; }
 :root { --pearl-bg:#e6f1f9; --pearl-paper:#f2f8fd; --pearl-field:#f8fcff; --pearl-ink:#314c68; --pearl-muted:#566f88; --pearl-line:#fff; --pearl-edge:#bdcedd; --pearl-shadow:5px 7px 15px #8eacc432,-3px -3px 10px #ffffffbf; }
 html[data-color-theme=teal] { --pearl-bg:#e4f2ee; --pearl-paper:#f2faf7; }
 html[data-color-theme=violet] { --pearl-bg:#eae7f6; --pearl-paper:#f6f3ff; }
 html[data-color-theme=coral] { --pearl-bg:#f7e9e2; --pearl-paper:#fff6ef; }
 html[data-color-theme=rose] { --pearl-bg:#f5e6ed; --pearl-paper:#fff4f8; }
 html[data-theme=dark],body[data-theme=dark] { --pearl-bg:#192636; --pearl-paper:#283a4e; --pearl-field:#30445a; --pearl-ink:#e1edf8; --pearl-muted:#b8cadb; --pearl-line:#52667c; --pearl-edge:#617b96; --pearl-shadow:5px 7px 15px #070f1b66,-2px -2px 8px #53698025; color-scheme:dark; }
 body.pearl-suite { --bg:var(--pearl-bg)!important; --surface:var(--pearl-paper)!important; --card:var(--pearl-paper)!important; --text:var(--pearl-ink)!important; --ink:var(--pearl-ink)!important; --muted:var(--pearl-muted)!important; --border:var(--pearl-edge)!important; --line:var(--pearl-edge)!important; --page-bg:var(--pearl-bg)!important; background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--pearl-paper) 90%,transparent),transparent 65%),var(--pearl-bg)!important; color:var(--pearl-ink)!important; }
 .pearl-suite :is(.card,.panel,.profile-card,.metric-card,.recordings-section,.game-card,.editor-card,.field-card,.action-card,.money-card,.baby-card,.result-card,.tools-panel,.timeline-panel,.analyze-intro,.camera-panel,.sg-guide,.content-guide,.guide-content,.nippo-content,.route-list-panel,.route-editor-panel,.route-import-panel,.privacy-note,.status-banner,.unsupported) { background:linear-gradient(145deg,var(--pearl-field),var(--pearl-paper))!important; border:1px solid var(--pearl-line)!important; border-radius:24px!important; box-shadow:var(--pearl-shadow)!important; color:var(--pearl-ink)!important; }
 .pearl-suite :is(.summary-grid>*,.care-totals>*,.result-grid>*,.balance-card,.milk-timing,.game-grid,.flow-steps li,.nippo-flow li) { background:var(--pearl-paper)!important; border-color:var(--pearl-line)!important; border-radius:18px!important; color:var(--pearl-ink)!important; }
 .pearl-suite :is(h1,h2,h3,h4,label,legend) { color:var(--pearl-ink)!important; }
 .pearl-suite :is(.compact-note,.empty-state,.tool-save-note,.source-note,.panel-heading p,.privacy-note) { color:var(--pearl-muted)!important; }
 .pearl-suite :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea) { min-width:0; max-width:100%; min-height:48px!important; border:1px solid var(--pearl-edge)!important; border-radius:13px!important; background:var(--pearl-field)!important; color:var(--pearl-ink)!important; box-shadow:inset 1px 2px 4px #7592a51a!important; font-size:max(16px,1em)!important; }
 .pearl-suite :is(input,select,textarea):focus-visible { outline:3px solid var(--ckas-accent,#0879de)!important; outline-offset:2px; }
 .pearl-suite :is(button,a,summary):focus-visible { outline:3px solid var(--pearl-ink)!important; outline-offset:3px; }
 .pearl-suite :is(.primary-button,.primary,.btn-primary,.nippo-primary) { min-height:48px; border-radius:16px!important; border:1px solid #8197a9!important; background:linear-gradient(145deg,#61778d,#30465d)!important; color:white!important; box-shadow:var(--pearl-shadow)!important; }
 .pearl-suite :is(.secondary-button,.secondary,.small-button,.text-button,.btn-secondary,.nippo-secondary,.import-file-button,.import-video-button,.capture-choice-button,.portrait-button,.camera-off-button,.view-tabs button,.type-switch button,.quick-care button) { min-height:44px; border:1px solid var(--pearl-edge)!important; border-radius:14px!important; background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; box-shadow:2px 3px 7px #7291a522!important; }
 .pearl-suite :is(.view-tabs button,.type-switch button,.quick-care button):is(.active,.is-active,[aria-selected=true],[aria-pressed=true]) { border-color:var(--ckas-accent,#1686b1)!important; box-shadow:0 0 0 2px var(--ckas-accent,#1686b1)!important; }
 .pearl-suite button:disabled { opacity:.5; cursor:not-allowed; }
 .pearl-suite :is(.ckas-app-header,.approval-topbar,.teiten-app-header,.my-routes-app-header) { background:color-mix(in srgb,var(--pearl-bg) 94%,transparent)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-line)!important; box-shadow:0 3px 15px #7995af16!important; }
 .pearl-suite :is(.ckas-app-back,.ckas-app-theme,.teiten-header-back,.nippo-theme-toggle,.approval-theme) { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border:1px solid var(--pearl-line)!important; border-radius:15px!important; box-shadow:var(--pearl-shadow)!important; min-width:44px; min-height:44px; }
 .pearl-suite .ckas-app-logo { width:44px!important; height:44px!important; background:url('/assets/pearl-apps.png') 100% 100% /400% 200% no-repeat!important; }
 .pearl-suite .ckas-app-mark { visibility:hidden; }
 .pearl-suite dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border:1px solid var(--pearl-line)!important; border-radius:24px!important; }
 .pearl-suite dialog::backdrop { background:#142a4766; backdrop-filter:blur(4px); }
 .pearl-suite :is(.table-scroll,.history-table-wrap,.points-table-wrap) { overscroll-behavior-x:contain; border-radius:14px; }
 .pearl-suite [hidden] { display:none!important; }
 html[data-text-size=large] { font-size:18px; }
 @media(max-width:600px) { .pearl-suite :is(.money-app,.baby-app,.fitness-app,.lineup-app,.sg-main,.analyze-main,.approval-shell) { padding-inline:14px!important; } .pearl-suite :is(.panel,.money-card,.baby-card,.editor-card,.game-card) { padding:16px!important; } .pearl-suite :is(.action-row,.section-title,.recordings-tools,.camera-settings,.folder-row) { flex-wrap:wrap; gap:10px; } .pearl-suite :is(.money-summary,.baby-summary,.summary-grid) { gap:10px!important; } }
 @media(prefers-reduced-motion:reduce) { .pearl-suite *, .pearl-home * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
 @media print { body.pearl-suite { background:white!important; color:black!important; } .pearl-suite :is(.panel,.field-card,.editor-card,.money-card,.baby-card) { box-shadow:none!important; } }
}

@layer pearl {
 .pearl-suite .ckas-app-logo { flex:0 0 44px!important; min-width:44px!important; }
 .pearl-suite .status-banner[data-tone=error] { color:#963f40!important; border-color:#bd6c6b!important; }
 .pearl-suite .status-banner[data-tone=success] { color:#267246!important; border-color:#6aa381!important; }
 .pearl-suite .status-banner[data-tone=warning] { color:#78551b!important; border-color:#b5924f!important; }
 .pearl-suite[data-theme=dark] .status-banner[data-tone=error] { color:#ffb7b8!important; }
 .pearl-suite[data-theme=dark] .status-banner[data-tone=success] { color:#a5e8bd!important; }
 .pearl-suite[data-theme=dark] .status-banner[data-tone=warning] { color:#f8d394!important; }
}

@layer pearl {
 html:has(body.pearl-suite), body.pearl-suite { min-height:100dvh; background-color:var(--pearl-bg)!important; }
 .pearl-suite .approval-theme { display:grid!important; place-items:center!important; box-sizing:border-box!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; padding:0!important; margin-left:auto; background:var(--pearl-paper); border:1px solid var(--pearl-line); border-radius:15px; color:var(--pearl-ink); }
 .pearl-suite .approval-theme svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.8; fill:none; }
 .pearl-suite .approval-theme [data-theme-icon=dark] { display:none; }
 .pearl-suite[data-theme=dark] .approval-theme [data-theme-icon=dark] { display:block; }
 .pearl-suite[data-theme=dark] .approval-theme [data-theme-icon=light] { display:none; }
 .pearl-suite :is(.measure-row,.lineup-row,.bench-row,.detail-body,.meta-item,.report-item,.filters,.report-list,.detail-empty) { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; }
 .pearl-suite .profile-card :is(label,fieldset) { font-size:13px!important; }
 .pearl-suite .measure-name { font-size:14px!important; }
 .pearl-suite .measure-info-button { min-width:44px!important; min-height:44px!important; }
 .pearl-suite .my-routes-brand img { opacity:0; }
 .pearl-suite .my-routes-brand { background-image:url('/assets/pearl-apps.png'); background-size:176px 88px; background-position:left -132px top -44px; background-repeat:no-repeat; }
 @media(max-width:600px) {
  .pearl-suite .measure-row { grid-template-columns:18px minmax(68px,1fr) minmax(72px,1fr) 34px 44px!important; gap:4px!important; }
  .pearl-suite .lineup-row { grid-template-columns:24px minmax(90px,1fr) 50px 76px!important; gap:6px!important; padding:10px 6px!important; }
  .pearl-suite .lineup-row .row-actions { grid-column:2 / -1; display:flex!important; justify-content:flex-end!important; }
  .pearl-suite .lineup-row .row-actions button { width:44px!important; height:44px!important; }
  .pearl-suite .lineup-row label { font-size:12px!important; }
  .pearl-suite .lineup-app { padding-inline:0!important; }
  .pearl-suite .lineup-app main { padding-inline:14px!important; }
  .pearl-suite .timeline-panel { width:100%!important; margin-inline:0!important; box-sizing:border-box!important; }
 }
}

@layer pearl {
 .pearl-suite :is(.approval-brand,.approval-topbar-label,.approval-heading p,.fine-print,.pdf-hint,.report-item-meta,.approval-warning,.empty-list) { color:var(--pearl-muted)!important; }
 .pearl-suite .approval-shell a { color:var(--pearl-ink)!important; }
 .pearl-suite :is(.approval-box,.review-check) { background:var(--pearl-bg)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; }
 .pearl-suite .queue-count { color:var(--pearl-ink)!important; background:var(--pearl-bg)!important; }
 .pearl-suite .report-item[aria-current=true] { border-color:var(--ckas-accent,#0879de)!important; box-shadow:inset 0 0 0 1px var(--ckas-accent,#0879de)!important; }
 @media(max-width:359px) { .pearl-suite .measure-row { grid-template-columns:16px minmax(56px,1fr) minmax(62px,1fr) 30px 44px!important; gap:3px!important; } .pearl-suite .ckas-app-title { font-size:16px!important; } }
}
@layer pearl {
 .pearl-suite .result-card :is(strong,dd) { color:var(--pearl-ink)!important; }
 .pearl-suite .result-card :is(p,dt,small) { color:var(--pearl-muted)!important; }
 .pearl-suite .result-card > div span { color:var(--pearl-ink)!important; }
 .pearl-suite .result-card dl,.pearl-suite .result-card dl div { border-color:var(--pearl-edge)!important; }
 .pearl-suite :is(.order-number,.auto-detect-button) { color:#fff!important; background:#30465d!important; }
 .pearl-suite .trim-native-input { width:1px!important; min-width:0!important; max-width:1px!important; height:1px!important; min-height:0!important; clip-path:inset(50%); }
 .pearl-suite .baby-app .row-actions { display:flex; flex-wrap:wrap; gap:8px; }
 .pearl-suite .baby-app .care-delete { width:auto; min-width:60px; min-height:44px; white-space:nowrap; color:var(--pearl-ink); }
 .pearl-suite :is(input,select,textarea,[tabindex]) { scroll-margin-block:100px 110px; }
 .pearl-suite :is(.primary-button,.primary,.btn-primary,.nippo-primary) { min-height:56px!important; }
 .pearl-suite .baby-options > summary { cursor:pointer; font-size:18px; font-weight:700; padding:4px 0; }
 @media(max-width:600px) {
  .pearl-suite .baby-app .care-row { grid-template-columns:62px minmax(0,1fr); }
  .pearl-suite .baby-app .row-actions { grid-column:2; }
  .pearl-suite .baby-app .care-detail { overflow-wrap:anywhere; }
 }
 @media(max-width:359px) {
  .pearl-suite .lineup-row { grid-template-columns:24px minmax(0,1fr) 50px!important; }
  .pearl-suite .lineup-row .position-label { grid-column:2 / -1; }
 }
}
@layer pearl {
 .pearl-suite .info-card { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-line)!important; border-radius:24px!important; box-shadow:var(--pearl-shadow)!important; }
 .pearl-suite .info-header { background:var(--pearl-bg)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; }
 .pearl-suite :is(.info-card p,.info-card li,.info-card a,.info-card .lead,.info-header-copy,.info-theme-toggle) { color:var(--pearl-ink)!important; }
 .pearl-suite :is(.info-header-icon,.approval-logo) { display:block; width:44px!important; height:44px!important; flex:0 0 44px; background:url('/assets/pearl-apps.png') 100% 100% /400% 200% no-repeat!important; }
 .pearl-suite .approval-topbar { justify-content:flex-start; gap:12px; min-height:76px; }
 .pearl-suite .approval-topbar-label { color:var(--pearl-ink)!important; font-size:20px; font-weight:700; }
 .pearl-suite .approval-brand { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--pearl-line); border-radius:15px; background:var(--pearl-paper); color:var(--pearl-ink)!important; font-size:30px; text-decoration:none; }
}
@layer pearl { .pearl-suite .money-field input { scroll-margin-top:140px; } }
@layer pearl {
 body.pearl-suite:has(.lineup-app) { min-width:0!important; }
 .pearl-suite .lineup-app .small-button { white-space:nowrap; }
}
@layer pearl {
 .pearl-suite .points-section { min-width:0; max-width:100%; }
 .pearl-suite .points-table-wrap { max-width:100%; overflow-x:auto; }
 .pearl-suite .calibration-buttons button { color:var(--pearl-ink)!important; background:var(--pearl-field)!important; border-color:var(--pearl-edge)!important; }
 .pearl-suite .result-card .average-speed { color:var(--pearl-ink)!important; }
}
@layer pearl { .pearl-suite .approval-brand svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; } }
@layer pearl {
 .pearl-suite .info-header :is(.ckas-back-button,.info-theme-toggle) { display:grid; place-items:center; width:44px!important; height:44px!important; border:1px solid var(--pearl-line)!important; border-radius:15px!important; color:var(--pearl-ink)!important; background:var(--pearl-paper)!important; }
 .pearl-suite .info-header-icon { padding:0!important; border:0!important; border-radius:0!important; }
 .pearl-suite .info-header-copy .ckas-wordmark { display:none!important; }
 .pearl-suite .info-header-copy > strong { font-size:20px!important; color:var(--pearl-ink)!important; }
}
@layer pearl {
 .pearl-suite :is(.info-header-icon,.approval-logo) { flex:0 0 44px!important; }
 .pearl-suite .approval-topbar { display:grid!important; grid-template-columns:44px minmax(0,1fr) 44px; }
 .pearl-suite .approval-header-title { display:flex; align-items:center; justify-content:center; gap:8px; }
 .pearl-suite .approval-topbar-label { font-size:20px!important; font-weight:700!important; white-space:nowrap; }
 @media(max-width:600px) { .pearl-suite .approval-topbar { min-height:68px; } }
}
@layer pearl {
 .pearl-suite :is(.primary-button,.primary,.btn-primary,.nippo-primary) { font-size:18px!important; font-weight:700!important; line-height:1.4!important; }
 .pearl-suite :is(.secondary-button,.secondary,.btn-secondary,.nippo-secondary) { font-size:16px!important; }
 .nippo-pearl .phase-actions > .phase-btn { min-height:56px!important; font-size:18px!important; line-height:1.4!important; border-radius:16px!important; }
}

/* Keep every page header aligned with the compact baby-log header. */
@layer pearl {
 .pearl-suite :is(.ckas-app-header,.approval-topbar,.teiten-app-header,.my-routes-app-header,.info-header,.nippo-landing-header,.step-top-brand-bar) {
  box-sizing:border-box!important; position:sticky!important; top:0!important; z-index:10040!important;
  display:grid!important; grid-template-columns:44px minmax(0,1fr) 44px!important; align-items:center!important; gap:12px!important;
  width:min(100%,1180px)!important; max-width:1180px!important; height:calc(82px + env(safe-area-inset-top))!important; min-height:calc(82px + env(safe-area-inset-top))!important;
  margin:0 auto!important; padding:env(safe-area-inset-top) 32px 0!important;
  border:0!important; border-bottom:1px solid var(--pearl-line)!important; border-radius:0!important;
  background:color-mix(in srgb,var(--pearl-bg) 94%,transparent)!important; color:var(--pearl-ink)!important;
  box-shadow:0 3px 15px #7995af16!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
 }
 .pearl-home .home-topbar .pearl-logo { flex:0 0 44px; }
 .pearl-suite .ckas-app-title { color:var(--pearl-ink)!important; }
 .pearl-suite .info-header-copy { min-width:0; }
 .pearl-suite .info-header-center { max-width:100%; overflow:hidden; }
 .pearl-suite .info-header-copy > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 @media(max-width:767px) {
  .pearl-suite :is(.ckas-app-header,.approval-topbar,.teiten-app-header,.my-routes-app-header,.info-header,.nippo-landing-header,.step-top-brand-bar) {
   height:calc(68px + env(safe-area-inset-top))!important; min-height:calc(68px + env(safe-area-inset-top))!important; padding-inline:20px!important;
  }
  .pearl-home .home-topbar > .ckas-app-back { margin-left:-10px!important; }
 }
}