@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --canvas: #f4f7f5;
  --paper: #fff;
  --ink: #173C36;
  --muted: #73817d;
  --line: #e2e9e6;
  --aqua: #11b8a5;
  --mint: #dff4ef;
  --lime: #D7F36A;
  --deep: #173C36;
  --blue: #4eb1e3;
  --lavender: #e3eaff;
  --radius: 11px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #e9eeec;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #11b8a566; outline-offset: 2px; }
.shell { min-height: 100vh; padding: 20px; display: grid; place-items: center; }
.app-frame { width: 393px; height: 852px; max-height: calc(100dvh - 40px); min-height: 600px; border: 1px solid #dce5e1; border-radius: 25px; background: var(--canvas); overflow: hidden; box-shadow: 0 12px 40px #183f3914; display: flex; flex-direction: column; position: relative; }
.statusbar { height: 29px; padding: 7px 23px 3px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; flex: 0 0 auto; color: #1c2422; }
.status-icons { display: flex; gap: 4px; align-items: center; }
.signal { width: 12px; height: 9px; background: linear-gradient(to top, #1c2422 0 25%, transparent 25% 100%), linear-gradient(to top, #1c2422 0 50%, transparent 50% 100%), linear-gradient(to top, #1c2422 0 75%, transparent 75% 100%), linear-gradient(to top, #1c2422 0 100%, transparent 100%); clip-path: polygon(0 100%, 0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%); }
.wifi { width: 12px; height: 9px; border: 1.5px solid #1c2422; border-color: #1c2422 transparent transparent; border-radius: 50%; position: relative; margin-top: 3px; }
.wifi::before { content: ''; position: absolute; left: 2px; right: 2px; top: 1px; height: 6px; border: 1.5px solid #1c2422; border-color: #1c2422 transparent transparent; border-radius: 50%; }
.battery { width: 16px; height: 8px; border: 1.3px solid #1c2422; border-radius: 2px; position: relative; }
.battery::before { content: ''; display: block; width: 70%; height: 100%; background: #1c2422; }
.battery::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; border-radius: 0 2px 2px 0; background: #1c2422; }
.app-header { height: 39px; flex: 0 0 auto; padding: 3px 17px 8px; display: flex; align-items: center; justify-content: space-between; }
.brand-home { display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; }
.brand-home .brand-logo { display: block; }
.brand { font: 800 16px Inter, sans-serif; letter-spacing: -.8px; color: var(--ink); }
.icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; }
.screen { padding: 5px 17px 15px; flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen.onboarding { padding: 9px 17px 15px; }
.bottom-nav { height: 48px; padding: 4px 7px 5px; border-top: 1px solid var(--line); background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); flex: 0 0 auto; }
.nav-item { border: 0; background: transparent; border-radius: 9px; padding: 2px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; color: #778984; font-size: 8px; }
.nav-item .nav-icon { font-size: 15px; line-height: 17px; }
.nav-item.active { color: var(--ink); font-weight: 700; background: var(--mint); }
.nav-item.active .nav-icon { color: var(--ink); }
.eyebrow { color: var(--muted); font-size: 7px; line-height: 1.35; letter-spacing: .015em; text-transform: uppercase; font-weight: 700; margin: 0 0 5px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 700 20px/1.1 Inter, sans-serif; letter-spacing: -.52px; margin-bottom: 6px; color: var(--ink); }
h2 { font: 700 15px/1.2 Inter, sans-serif; letter-spacing: -.25px; margin-bottom: 5px; }
h3 { font: 700 12px/1.25 Inter, sans-serif; margin-bottom: 4px; }
.subhead { color: var(--muted); font-size: 10px; line-height: 1.45; margin-bottom: 11px; }
.card { padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; box-shadow: 0 1px 2px #173c3605; }
.card.lime { background: var(--lime); border-color: transparent; }
.card.deep { background: var(--deep); color: white; border-color: transparent; }
.card.deep h2, .card.deep h3, .card.deep p { color: inherit; }
.card.mint { background: #F4F9DF; border-color: #edf1d7; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-title-row .eyebrow { margin: 0; color: inherit; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 7px; padding: 4px 7px; background: #eaf0ed; color: var(--muted); font-size: 7px; line-height: 1; font-weight: 700; white-space: nowrap; }
.pill.dark { background: var(--deep); color: white; }
.pill.aqua { background: #dff3ed; color: var(--ink); }
.pill.blue { background: #e4f2fa; color: #1c638d; }
.pill.off { background: #e9efec; color: #7a8883; }
.strong-time { font: 800 23px/1.1 Inter, sans-serif; letter-spacing: -.7px; margin: 0 0 4px; }
.fine { color: var(--muted); font-size: 8px; line-height: 1.4; margin: 0; }
.dark .fine, .deep .fine { color: #d3e2dd; }
.section-heading { margin: 11px 0 6px; }
.section-heading .eyebrow { margin-bottom: 3px; }
.section-heading h2 { margin-bottom: 0; }
.shift-time { font-size: 15px; margin: 0 0 3px; }
.sleep-window { padding-bottom: 9px; }
.sleep-copy { margin-top: 6px; }
.timeline-axis { display: flex; justify-content: space-between; color: #d3e2dd; font-size: 7px; padding: 0 0 4px; }
.lane { margin: 6px 0 7px; }
.lane-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 3px; color: white; font-size: 8px; }
.lane-label span:last-child { color: #dce5e1; font-size: 7px; }
.track { height: 7px; background: #355850; border-radius: 6px; position: relative; overflow: hidden; }
.segment { position: absolute; top: 0; height: 100%; border-radius: inherit; }
.segment.sleep { background: var(--aqua); left: 37.5%; width: 27%; }
.segment.shift { background: var(--blue); left: 79%; width: 21%; }
.segment.light { background: var(--lime); left: 71%; width: 6%; }
.segment.nap { background: #788cf7; left: 64%; width: 6%; }
.steps-card { display: flex; gap: 8px; align-items: flex-start; padding: 9px; }
.step-icon { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; background: #e7f3ed; font-size: 11px; }
.steps-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.steps-card h3 { margin: 0 0 2px; }
.link-button { border: 0; background: transparent; font-size: 8px; font-weight: 700; color: var(--ink); padding: 4px 0; cursor: pointer; white-space: nowrap; }
.open-link { margin-left: auto; color: var(--muted); font-size: 7px; white-space: nowrap; }
.progress { display: flex; gap: 4px; margin: 0 0 7px; }
.progress span { width: 38px; height: 2px; border-radius: 3px; background: var(--line); }
.progress span.on { background: var(--aqua); }
.onboarding h1 { font-size: 20px; margin: 0 0 7px; }
.onboarding .subhead { margin-bottom: 12px; }
.option { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 8px; margin-bottom: 7px; cursor: pointer; }
.option.selected { background: var(--mint); border-color: #74b9ae; }
.option-copy { display: flex; align-items: center; gap: 7px; }
.option-icon { width: 15px; text-align: center; font-size: 12px; }
.option-copy strong { display: block; font-size: 9px; margin-bottom: 2px; }
.option-copy small { display: block; color: var(--muted); font-size: 7px; }
.radio { width: 13px; height: 13px; border: 1px solid #9dafaa; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.selected .radio { border-color: var(--aqua); }
.selected .radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.progress-copy { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; }
.field-label { display: block; color: var(--ink); font-size: 7px; letter-spacing: .04em; font-weight: 700; margin: 8px 0 4px; }
.field { width: 100%; min-height: 37px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: white; color: var(--ink); font-size: 9px; margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; padding: 9px 10px; background: var(--aqua); color: #102d29; font-size: 8px; font-weight: 700; cursor: pointer; margin: 7px 0 0; min-height: 30px; }
.btn.secondary { justify-content: center; background: white; border: 1px solid var(--aqua); color: var(--ink); }
.btn.ghost { justify-content: center; background: transparent; color: var(--muted); padding: 6px; margin-top: 3px; min-height: 22px; }
.helper { color: var(--muted); font-size: 8px; line-height: 1.4; margin: 7px 0; }
.shift-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.shift-row:last-child { border-bottom: 0; }
.date-badge { text-align: center; font-size: 7px; font-weight: 700; line-height: 1.35; }
.shift-row strong { display: block; font-size: 8px; }
.shift-row small { display: block; color: var(--muted); margin-top: 2px; font-size: 7px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.day-head, .weekdays span { color: var(--muted); font-size: 7px; font-weight: 700; padding: 4px 0; }
.day-cell { min-height: 25px; border: 1px solid transparent; background: transparent; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 8px; cursor: pointer; padding: 1px; }
.day-cell:hover { background: #e6eeea; }
.day-cell.selected { background: var(--mint); border-color: transparent; font-weight: 700; }
.day-cell .dot { height: 3px; width: 3px; border-radius: 50%; background: var(--aqua); }
.segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: #e8eeeb; }
.segment-button { padding: 5px 9px; border: 0; background: transparent; border-radius: 5px; color: var(--muted); font-size: 7px; font-weight: 700; cursor: pointer; }
.segment-button.active { background: var(--deep); color: white; }
.view-switch { display: flex; margin: 0 0 7px; }
.view-switch .segment-button { flex: 1; }
.schedule-subhead { margin-bottom: 8px; }
.schedule-card { padding: 8px; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; text-align: center; height: 27px; color: var(--ink); }
.calendar-nav strong { font-size: 7px; }
.calendar-nav button { border: 0; background: transparent; color: var(--ink); font-size: 14px; padding: 2px 6px; }
.week-overview, .month-overview { padding: 5px 2px 7px; }
.week-overview strong, .month-overview strong { display: block; font-size: 14px; line-height: 1.1; margin-bottom: 3px; }
.week-overview p:last-child, .month-overview p:last-child { color: var(--muted); font-size: 7px; margin: 0; }
.schedule-row { width: 100%; display: grid; grid-template-columns: 27px 1fr auto auto; gap: 4px; align-items: center; text-align: left; min-height: 35px; padding: 4px 3px; background: #fff; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; cursor: pointer; }
.schedule-row.selected { background: var(--mint); border: 1px solid #8fc8be; border-radius: 6px; }
.schedule-row .date-badge { display: flex; flex-direction: column; gap: 1px; }
.schedule-row .date-badge b { font-size: 8px; }
.schedule-label strong { display: block; font-size: 7px; }
.schedule-label small { display: block; color: var(--muted); font-size: 6px; margin-top: 2px; }
.tiny-hours { font-size: 7px; color: var(--muted); }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.month-overview { padding: 4px 0 7px; }
.schedule-tip { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; background: var(--lavender); border: 0; }
.callout-blue { display: flex; align-items: center; gap: 7px; padding: 8px; border: 0; background: var(--lavender); border-radius: 9px; margin: 8px 0; }
.callout-blue .eyebrow { color: var(--ink); }
.callout-blue p { margin: 0; font-size: 7px; line-height: 1.35; color: var(--muted); }
.callout-icon { font-size: 12px; color: #5870ab; flex: 0 0 auto; }
.roster-rows { padding: 2px 8px; border-radius: 9px; background: white; border: 1px solid var(--line); margin-bottom: 7px; }
.editable-shift { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: #fff; text-align: left; cursor: pointer; grid-template-columns: 27px 1fr auto 20px; }
.editable-shift .pill { font-size: 6px; }
.total-card { background: var(--lavender); border: 0; padding: 8px; margin: 7px 0; }
.total-card strong { display: block; font-size: 9px; }
.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.mood { border: 1px solid var(--line); background: white; border-radius: 6px; min-height: 28px; cursor: pointer; font-size: 7px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mood span { font-size: 9px; }
.mood.selected { background: var(--aqua); border-color: var(--aqua); color: white; font-weight: 700; }
.pattern-card { padding: 9px; }
.sleep-reading { font-size: 14px; font-weight: 700; margin: 4px 0 6px; }
.source-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0; }
.source-button { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; font-size: 7px; }
.source-button.active { border-color: var(--ink); background: #f4f7f5; }
.sleep-range { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }
input[type=range] { width: 100%; accent-color: var(--deep); height: 12px; }
.cycle-heading { display: flex; gap: 7px; align-items: flex-start; }
.cycle-heading>span { width: 18px; height: 18px; display: grid; place-items: center; background: var(--mint); border-radius: 50%; font-size: 10px; }
.cycle-heading h3 { margin: 0 0 3px; }
.private-note { color: var(--muted); font-size: 7px; margin: 5px 0; }
.log-btn { margin: 5px 0; justify-content: flex-start!important; min-height: 25px; padding: 6px 8px; font-size: 7px; }
.privacy-strip { background: var(--lavender); padding: 5px 7px; border-radius: 5px; font-size: 6px; color: #596b9b; }
.person-card { display: flex; align-items: center; gap: 8px; padding: 8px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: #e5eeea; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.person-card strong { display: block; font-size: 8px; }
.person-card small { display: block; color: var(--muted); font-size: 7px; margin-top: 2px; }
.section-label { margin: 12px 0 4px; }
.settings-card { padding: 9px; }
.settings-card>h3 { margin-bottom: 2px; }
.settings-card>.fine { margin-bottom: 5px; }
.privacy-card { margin-top: 8px; }
.profile-row { width: 100%; min-height: 26px; display: flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; border-top: 1px solid #edf1ef; background: transparent; text-align: left; font-size: 7px; cursor: pointer; }
.profile-row-icon { width: 11px; font-size: 9px; }
.profile-value { margin-left: auto; color: var(--muted); white-space: nowrap; }
.profile-value b { margin-left: 4px; font-size: 11px; }
.footer-brand { text-align: center; margin: 11px 0 5px; font-size: 6px; }
.add-form { padding: 9px; }
.status-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 5px; }
.status-option { border: 0; border-radius: 6px; min-height: 27px; background: #edf2ef; color: var(--muted); font-size: 7px; font-weight: 700; }
.status-option.active.day { background: #e5f1d4; color: #45633c; }
.status-option.active.night { background: var(--deep); color: white; }
.status-option.active.off { background: #e9efec; color: var(--muted); }
.status-option.active.sick { background: #f7dfdf; color: #8f4242; }
.shift-length-card { display: flex; flex-direction: column; gap: 3px; background: var(--lavender); border-radius: 8px; padding: 8px; margin: 8px 0; }
.shift-length-card strong { font-size: 7px; }
.shift-length-card b { font-size: 11px; }
.shift-length-card small { color: var(--muted); font-size: 7px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row strong { display: block; font-size: 12px; }
.toggle-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.switch { border: 0; width: 39px; height: 23px; border-radius: 20px; padding: 3px; background: #c7d3ce; cursor: pointer; flex: 0 0 auto; }
.switch::after { content: ''; width: 17px; height: 17px; display: block; background: white; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 2px #0002; }
.switch.on { background: var(--aqua); }
.switch.on::after { transform: translateX(16px); }
.toast { position: absolute; z-index: 90; left: 50%; bottom: 76px; width: calc(100% - 30px); min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 10px 11px; transform: translate(-50%, 10px); opacity: 0; visibility: hidden; pointer-events: none; background: #fff; color: var(--ink); border: 1px solid #dce5e1; border-radius: 16px; box-shadow: 0 8px 24px #173c3624; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.toast.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.toast-mark { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--lavender); color: var(--ink); }
.toast.is-success .toast-mark { background: var(--lime); }
.toast-mark .ui-icon { width: 17px; height: 17px; }
.toast-message { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; font-weight: 600; }
.toast-dismiss { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.toast-dismiss:hover { background: #f3f7f5; color: var(--ink); }
.app-frame:has(.screen.onboarding) .toast, .app-frame:has(.auth-screen) .toast { bottom: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: #102e29a6; display: grid; place-items: center; padding: 18px; z-index: 3; }
.modal { width: min(100%, 365px); max-height: 90%; overflow-y: auto; padding: 19px; border-radius: 18px; background: var(--canvas); box-shadow: 0 18px 60px #0003; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; }
.close-button { border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; background: #e6eeea; }
.empty-note { text-align: center; padding: 16px 6px; color: var(--muted); }
.tiny-label { font-size: 7px; color: var(--muted); }
@media (max-width: 600px) {
  .shell { min-height: 100dvh; padding: 0; display: grid; place-items: center; }
  .app-frame { width: min(100vw, 393px); height: min(100dvh, 852px); max-height: none; min-height: min(560px, 100dvh); border: 0; border-radius: 0; box-shadow: none; }
  .statusbar { height: 32px; padding-top: 10px; }
  .app-header { height: 37px; }
  .screen { padding-bottom: 20px; }
}
@media (max-height: 720px) and (min-width: 601px) {
  .shell { padding: 14px; }
  .app-frame { height: calc(100vh - 28px); max-height: unset; min-height: 560px; }
}

/* Onboarding reference: full-size iPhone 15 Pro screen proportions and type scale. */
.app-frame:has(.screen.onboarding) { background: #f3f7f5; }
.statusbar { height: 39px; padding: 10px 25px 5px; font-size: 12px; }
.status-icons { gap: 6px; }
.signal { width: 16px; height: 12px; }
.wifi { width: 15px; height: 11px; }
.battery { width: 22px; height: 11px; }
.screen.onboarding { padding: 45px 20px 26px; }
.progress { gap: 7px; margin: 0 0 12px; }
.progress span { width: 37px; height: 4px; }
.progress-copy { font-size: 10px; line-height: 1.3; margin: 0 0 17px; letter-spacing: 0; }
.onboarding .eyebrow { font-size: 10px; line-height: 1.35; margin-bottom: 8px; letter-spacing: 0; }
.onboarding h1 { font-size: 25px; line-height: 1.16; letter-spacing: -.55px; margin: 0 0 16px; }
.onboarding .subhead { font-size: 14px; line-height: 1.35; margin-bottom: 15px; }
.onboarding-callout { min-height: 64px; padding: 13px 15px; gap: 11px; border-radius: 16px; margin: 20px 0; }
.onboarding-callout .callout-icon { color: var(--ink); }
.onboarding-callout .eyebrow { font-size: 10px; margin: 0 0 5px; }
.onboarding-callout .fine { color: #586a65; font-size: 12px; }
.onboarding .btn { min-height: 48px; padding: 12px 14px; border-radius: 14px; font-size: 14px; margin-top: 10px; }
.onboarding .btn.ghost { min-height: 38px; padding: 8px; margin-top: 8px; font-size: 13px; }
.onboarding .option { min-height: 64px; padding: 11px 13px; gap: 10px; border-radius: 13px; margin-bottom: 10px; border-color: #dbe5e1; }
.onboarding .option.selected { background: #dff4ef; border: 1.5px solid #456d65; }
.onboarding .option-copy { gap: 12px; }
.onboarding .option-icon { width: 18px; display: grid; place-items: center; }
.onboarding .option-copy strong { font-size: 14px; margin-bottom: 4px; }
.onboarding .option-copy small { font-size: 11px; line-height: 1.3; }
.onboarding .radio { width: 21px; height: 21px; border-color: #dbe5e1; }
.onboarding .selected .radio { border-width: 1.5px; }
.onboarding .selected .radio::after { width: 13px; height: 13px; }
.onboarding .helper { font-size: 13px; line-height: 1.35; margin: 13px 0 10px; }
.roster-rows { padding: 0; border: 0; border-radius: 0; background: transparent; margin: 0 0 10px; display: grid; gap: 10px; }
.onboarding .editable-shift { position: relative; min-height: 63px; grid-template-columns: 57px minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 10px; border: 1px solid #dce6e2; border-radius: 13px; background: #fff; }
.onboarding .editable-shift.roster-today { min-height: 78px; }
.onboarding .date-badge { min-height: 44px; border-right: 1px solid #dce6e2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12px; line-height: 1.2; font-weight: 400; }
.onboarding .date-badge strong { font-size: 14px; color: var(--ink); }
.onboarding .date-badge em { font-style: normal; font-size: 9px; font-weight: 700; border-radius: 10px; background: var(--lime); padding: 4px 6px; margin-bottom: 2px; }
.onboarding .roster-shift-name strong { display: block; font-size: 14px; line-height: 1.25; }
.onboarding .roster-shift-name small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.onboarding .editable-shift .pill { font-size: 11px; padding: 8px 10px; border-radius: 10px; }
.onboarding .tiny-hours { font-size: 11px; font-weight: 700; color: #3f625b; background: #e8efec; border-radius: 10px; padding: 8px 9px; }
.onboarding .roster-add { justify-content: center; min-height: 48px; margin: 0 0 12px; border-radius: 14px; font-size: 14px; }
.onboarding .total-card { padding: 13px 15px; margin: 0 0 2px; border-radius: 15px; background: #e3eaff; }
.onboarding .total-card .eyebrow { margin: 0 0 8px; }
.onboarding .total-card strong { font-size: 17px; }
@media (max-width: 600px) {
  .app-frame:has(.screen.onboarding) { border-radius: 0; }
  .screen.onboarding { padding: 45px 20px 26px; }
}

/* Shared scale and component sizing from the supplied Circadia mobile screens. */
:root {
  --canvas: #f3f7f5;
  --ink: #173c36;
  --deep: #173c36;
  --muted: #5b6d68;
  --line: #dce6e2;
  --aqua: #12b8a6;
  --mint: #dff4ef;
  --lime: #d7f36a;
  --lavender: #e3eaff;
}
.app-frame:not(:has(.screen.onboarding)) { background: #f3f7f5; }
.statusbar { height: 42px; padding: 9px 25px 4px; font-size: 13px; }
.signal { width: 16px; height: 12px; }
.wifi { width: 15px; height: 11px; }
.battery { width: 22px; height: 11px; }
.app-header { height: 55px; padding: 4px 20px 8px; }
.brand { font-size: 23px; letter-spacing: -1px; }
.icon-button { width: 38px; height: 38px; }
.icon-button .ui-icon { width: 22px; height: 22px; }
.screen:not(.onboarding) { padding: 13px 20px 23px; }
.screen:not(.onboarding) .eyebrow { font-size: 10px; line-height: 1.35; margin-bottom: 7px; letter-spacing: .01em; }
.screen:not(.onboarding) h1 { font-size: 27px; line-height: 1.14; letter-spacing: -.55px; margin-bottom: 11px; }
.screen:not(.onboarding) h2 { font-size: 19px; line-height: 1.22; margin-bottom: 7px; }
.screen:not(.onboarding) h3 { font-size: 15px; line-height: 1.25; margin-bottom: 6px; }
.screen:not(.onboarding) .subhead { font-size: 16px; line-height: 1.4; margin-bottom: 18px; }
.screen:not(.onboarding) .fine { font-size: 12px; line-height: 1.45; }
.screen:not(.onboarding) .card { padding: 15px; border-radius: 17px; margin-bottom: 12px; }
.bottom-nav { height: 64px; padding: 5px 8px 6px; }
.nav-item { border-radius: 14px; gap: 3px; font-size: 12px; }
.nav-item .nav-icon { line-height: 25px; }
.nav-item .ui-icon { width: 22px; height: 22px; }
.nav-item.active { background: #dff4ef; }

/* Today */
.screen:not(.onboarding) .card.lime { padding: 17px; border-radius: 16px; }
.screen:not(.onboarding) .card.lime .fine { color: var(--ink); }
.screen:not(.onboarding) .card.deep .fine { color: #d3e2dd; }
.screen:not(.onboarding) .card-title-row { gap: 10px; margin-bottom: 10px; }
.screen:not(.onboarding) .card-title-row .eyebrow { font-size: 10px; }
.screen:not(.onboarding) .pill { font-size: 11px; padding: 7px 10px; border-radius: 9px; gap: 5px; }
.screen:not(.onboarding) .pill .ui-icon { width: 15px; height: 15px; }
.screen:not(.onboarding) .shift-time { font-size: 24px; margin-bottom: 6px; }
.screen:not(.onboarding) .sleep-window { padding: 16px; }
.screen:not(.onboarding) .strong-time { font-size: 29px; margin: 3px 0 7px; }
.screen:not(.onboarding) .sleep-copy { margin-top: 10px; }
.screen:not(.onboarding) .timeline-axis { font-size: 10px; }
.screen:not(.onboarding) .lane { margin: 10px 0 12px; }
.screen:not(.onboarding) .lane-label { font-size: 12px; margin-bottom: 5px; }
.screen:not(.onboarding) .lane-label span:last-child { font-size: 10px; }
.screen:not(.onboarding) .track { height: 9px; }
.screen:not(.onboarding) .steps-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.screen:not(.onboarding) .step-icon { width: 34px; height: 34px; border-radius: 11px; }
.screen:not(.onboarding) .step-icon .ui-icon { width: 20px; height: 20px; }
.screen:not(.onboarding) .steps-card p { font-size: 11px; line-height: 1.4; }
.screen:not(.onboarding) .steps-card h3 { margin-bottom: 4px; }
.screen:not(.onboarding) .open-link { font-size: 10px; }
.screen:not(.onboarding) .link-button { font-size: 12px; padding: 7px 0 0; }
.screen:not(.onboarding) .card.mint { background: #f4f9df; border-color: #e8edd2; }

/* Week and month schedule views */
.schedule-subhead { margin-bottom: 18px!important; }
.view-switch { display: flex; width: 100%; padding: 4px; gap: 4px; border-radius: 15px; margin: 0 0 16px; }
.view-switch .segment-button { min-height: 44px; padding: 9px; border-radius: 11px; font-size: 14px; color: var(--ink); }
.view-switch .segment-button.active { background: var(--deep); color: white; }
.calendar-nav { height: 48px; margin: 0 0 12px; }
.calendar-nav strong { font-size: 14px; }
.calendar-nav button { width: 36px; height: 36px; padding: 8px; display: grid; place-items: center; }
.calendar-nav .ui-icon { width: 19px; height: 19px; }
.schedule-summary { padding: 17px!important; border-radius: 17px!important; margin-bottom: 12px!important; }
.schedule-summary .eyebrow { font-size: 12px!important; margin-bottom: 10px!important; }
.schedule-summary strong { display: block; font-size: 26px; line-height: 1.15; margin-bottom: 7px; }
.schedule-summary p:last-child { font-size: 13px; line-height: 1.4; margin: 0; }
.week-list { display: grid; gap: 10px; }
.shift-swipe-wrap { position: relative; overflow: hidden; border-radius: 14px; background: #f8e5e5; }
.shift-swipe-hint { position: absolute; inset-block: 0; right: 0; z-index: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px; visibility: hidden; opacity: 0; color: #9b4c4c; font-size: 11px; font-weight: 700; pointer-events: none; transition: opacity .12s ease; }
.shift-swipe-hint .ui-icon { width: 17px; height: 17px; }
.shift-swipe-wrap.swiping-left .shift-swipe-hint { visibility: visible; opacity: 1; }
.schedule-row { min-height: 58px; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; }
.schedule-row { position: relative; z-index: 1; touch-action: pan-y; transition: transform .18s ease; will-change: transform; }
.schedule-row.selected { min-height: 82px; background: #dff4ef; border: 1.5px solid #385d55; border-radius: 14px; }
.schedule-date { min-height: 42px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11px; color: var(--muted); }
.schedule-date strong { font-size: 14px; color: var(--ink); }
.schedule-date .past-day { color: #74817d; text-decoration: line-through; }
.today-mark { font-size: 9px; line-height: 1; font-weight: 700; background: var(--lime); border-radius: 8px; padding: 4px 6px; margin-bottom: 2px; }
.schedule-label strong { display: block; font-size: 14px; line-height: 1.25; }
.schedule-label small { display: block; font-size: 12px; margin-top: 4px; }
.shift-kind { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 9px; border-radius: 10px; white-space: nowrap; font-size: 11px; font-weight: 700; }
.shift-kind .ui-icon { width: 15px; height: 15px; }
.shift-kind.day { background: #f2f8dc; color: var(--ink); }
.shift-kind.night { background: var(--deep); color: white; }
.shift-kind.off { background: #e9efec; color: #98a6a1; }
.shift-kind.sick { background: #f5dddd; color: #874747; }
.duration-pill { padding: 8px 9px; border-radius: 10px; background: #e9efec; color: var(--ink); font-size: 12px; font-weight: 700; }
.add-shift-button { min-height: 52px; border-radius: 14px; justify-content: flex-start; padding: 12px 15px; font-size: 17px; margin: 12px 0; }
.add-shift-button .ui-icon { width: 20px; height: 20px; }
.schedule-tip { display: flex; align-items: center; gap: 10px; padding: 13px 15px!important; border-radius: 15px!important; background: var(--lavender); }
.schedule-tip .ui-icon { width: 20px; height: 20px; }
.schedule-tip p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.month-grid-card { padding: 13px; background: white; border: 1px solid var(--line); border-radius: 18px; margin: 0 0 12px; }
.weekdays { margin-bottom: 5px; }
.weekdays span { font-size: 13px; padding: 8px 0; }
.days { grid-template-rows: repeat(5, minmax(42px, auto)); gap: 3px; }
.day-cell { min-height: 42px; border-radius: 10px; gap: 3px; font-size: 13px; padding: 2px; }
.day-cell.selected { background: #dff4ef; }
.day-marker, .legend i { min-width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.day-marker.day, .legend i.day { background: #f2f8dc; color: #537143; }
.day-marker.night, .legend i.night { background: var(--deep); color: white; }
.day-marker.off, .legend i.off { background: #e9efec; color: #9aa7a2; }
.day-marker.sick, .legend i.sick { background: #f5dddd; color: #874747; }
.legend { display: flex; justify-content: space-between; align-items: center; gap: 5px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.legend i { min-width: 23px; height: 23px; }

/* Recovery keeps the supplied lime message card and uses the shared outline icon system. */
.pattern-card { background: #d7f36a!important; color: #173c36; padding: 16px!important; border: 0!important; border-radius: 16px!important; }
.pattern-card .eyebrow, .pattern-card h3, .pattern-card .fine { color: #173c36!important; }
.pattern-card .eyebrow { font-size: 10px!important; margin-bottom: 8px!important; }
.pattern-card h3 { font-size: 19px!important; margin-bottom: 7px!important; }
.pattern-card .fine { font-size: 13px!important; line-height: 1.45!important; }
.mood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mood { min-height: 42px; border-radius: 12px; gap: 7px; font-size: 12px; }
.mood .ui-icon { width: 18px; height: 18px; }
.mood span { font-size: 12px; }
.mood.selected { background: var(--aqua); color: white; border-color: var(--aqua); }
.sleep-reading { font-size: 22px; margin: 8px 0 10px; }
.source-buttons { gap: 8px; margin: 10px 0; }
.source-button { border-radius: 10px; padding: 10px 8px; font-size: 11px; }
.sleep-range { font-size: 11px; gap: 8px; }
.cycle-heading { gap: 12px; }
.cycle-heading>span { width: 30px; height: 30px; }
.cycle-heading .ui-icon { width: 19px; height: 19px; }
.private-note { font-size: 11px; margin: 8px 0; }
.screen:not(.onboarding) .log-btn { min-height: 40px; padding: 9px 11px; font-size: 12px; }
.privacy-strip { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 9px; font-size: 10px; }
.cycle-entry-form { margin: 13px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cycle-entry-form .field-label { display: block; margin: 10px 0 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .35px; }
.cycle-entry-form .field { width: 100%; min-height: 43px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.cycle-choice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 7px; }
.cycle-choice { min-height: 40px; padding: 7px 3px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 11px; }
.cycle-choice.selected { border-color: var(--deep); background: #dff4ef; font-weight: 700; }
.cycle-form-note { margin: 10px 0!important; font-size: 11px!important; }
.cycle-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.cycle-form-actions .btn { justify-content: center; min-height: 44px; margin: 0; padding: 10px 13px; font-size: 13px; }
.cycle-form-actions .btn.ghost { border: 1px solid var(--line); }
.cycle-last-entry { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 11px; border-radius: 12px; background: #f3f7e5; }
.cycle-entry-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #d7f36a; color: var(--deep); }
.cycle-last-entry strong, .cycle-last-entry small { display: block; }
.cycle-last-entry strong { font-size: 13px; }
.cycle-last-entry small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.save-sleep-button { width: 100%; min-height: 44px; justify-content: center; margin-top: 10px; font-size: 13px; }
.trend-summary { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 10px; }
.trend-summary strong { color: var(--deep); font-size: 23px; }
.trend-summary span, .trend-data-note { color: var(--muted); font-size: 11px; }
.trend-chart { position: relative; height: 118px; display: flex; align-items: flex-end; justify-content: space-around; gap: 7px; padding: 12px 4px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 calc(50% - .5px), #e9efec calc(50% - .5px) 50%, transparent 50% calc(100% - 1px), #e9efec calc(100% - 1px) 100%); }
.trend-bar-column { position: relative; height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.trend-bar-value { margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.trend-bar { width: min(24px, 75%); min-height: 4px; border-radius: 7px 7px 2px 2px; background: var(--aqua); }
.trend-bar-column small { position: absolute; top: calc(100% + 5px); color: var(--muted); font-size: 9px; }
.trend-chart-legend { display: flex; justify-content: space-between; margin-top: 20px; color: var(--muted); font-size: 9px; }
.trend-data-note { margin: 9px 0 0!important; }
.trend-empty { position: relative; height: 120px; display: flex; margin-top: 12px; padding: 0 0 20px 28px; }
.trend-empty-axis { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 9px; }
.trend-empty-grid { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-left: 8px; border-bottom: 1px solid var(--line); }
.trend-empty-grid i { border-top: 1px dashed var(--line); }
.trend-empty-caption { position: absolute; inset: 0 0 17px 35px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.wearable-sync-card { margin: 13px 0 2px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.wearable-sync-head { display: flex; align-items: center; gap: 9px; }
.wearable-watch { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e1f4ee; color: var(--deep); }
.wearable-sync-head>span:nth-child(2) { flex: 1; }
.wearable-sync-head strong, .wearable-sync-head small { display: block; }
.wearable-sync-head strong { font-size: 13px; }
.wearable-sync-head small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.sync-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #38a98f; box-shadow: 0 0 0 3px #e0f3ed; }
.wearable-sleep-reading { display: flex; align-items: baseline; justify-content: space-between; margin: 15px 0 10px; }
.wearable-sleep-reading strong { color: var(--deep); font-size: 26px; }
.wearable-sleep-reading strong small { font-size: 13px; }
.wearable-sleep-reading>span { color: var(--muted); font-size: 11px; }
.wearable-sleep-meta { display: grid; grid-template-columns: 1fr 1fr; padding-top: 10px; border-top: 1px solid var(--line); }
.wearable-sleep-meta small, .wearable-sleep-meta strong { display: block; }
.wearable-sleep-meta small { color: var(--muted); font-size: 9px; font-weight: 700; }
.wearable-sleep-meta strong { margin-top: 4px; font-size: 11px; }
.wearable-disclaimer { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

/* Profile spacing, dividers, person card, and list rows follow the supplied profile reference. */
.person-card { display: flex; align-items: center; gap: 13px; padding: 17px!important; border-radius: 18px!important; }
.avatar { width: 42px; height: 42px; flex: 0 0 auto; background: #596b66; color: white; font-size: 17px; font-weight: 500; }
.person-card strong { display: block; font-size: 19px; line-height: 1.25; }
.person-card small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.section-label { margin: 18px 0 10px!important; }
.settings-card { padding: 16px!important; border-radius: 18px!important; }
.settings-card h2 { font-size: 19px!important; margin: 0 0 4px!important; }
.settings-card>.fine { font-size: 13px!important; margin: 0 0 16px!important; }
.settings-divider { height: 1px; background: var(--line); margin: 0 0 8px; }
.privacy-card { margin-top: 12px!important; }
.profile-row { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 8px 1px; border: 0; background: transparent; text-align: left; font-size: 14px; }
.profile-row+.profile-row { border-top: 0; }
.profile-row-icon { width: 18px; flex: 0 0 18px; display: grid; place-items: center; }
.profile-row-icon .ui-icon { width: 19px; height: 19px; }
.profile-row-name { font-size: 14px; font-weight: 600; }
.profile-value { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.profile-value .ui-icon { width: 16px; height: 16px; }
.footer-brand { text-align: center; margin: 14px 0 7px!important; font-size: 10px!important; }

/* Onboarding roster's duration chips are individually editable; the add row stays outline-only. */
.editable-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 6px; min-width: 0; padding: 0!important; border: 1px solid #dce6e2!important; border-radius: 13px!important; background: white!important; overflow: hidden; }
.editable-shift.roster-today { background: #dff4ef!important; border: 1.5px solid #385d55!important; }
.onboarding .editable-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 0; overflow: hidden; }
.roster-cycle { display: grid; min-width: 0; grid-template-columns: 57px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; padding: 8px 0 8px 10px; text-align: left; background: transparent; cursor: pointer; }
.onboarding .roster-cycle { grid-template-columns: 57px minmax(0, 1fr) auto; padding: 8px 0 8px 10px; }
.onboarding .date-badge { border-right: 1px solid #dce6e2; }
.hours-button { align-self: center; justify-self: end; margin-right: 10px; border: 0; padding: 8px 9px; border-radius: 10px; background: #e8efec; color: #3f625b; font-size: 11px; font-weight: 700; cursor: pointer; }
.onboarding .roster-add { background: transparent!important; border: 1.5px solid #12b8a6!important; color: var(--ink)!important; }

@media (max-width: 600px) {
  .screen:not(.onboarding) { padding: 13px 20px 23px; }
  .bottom-nav { height: 64px; }
}

/* Connected screens and reusable interactions. */
.today-next-shift { cursor: pointer; }
.today-next-shift:active { transform: scale(.99); }
.bell-button { position: relative; }
.notification-dot { position: absolute; top: 5px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #d7f36a; border: 1px solid white; pointer-events: none; }
.loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 80px 28px 38px!important; text-align: center; background: #f3f7f5; }
.loading-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.loading-brand strong { font-size: 23px; letter-spacing: -1px; }
.loading-mark { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: #dff4ef; }
.loading-mark .ui-icon { width: 31px; height: 31px; }
.loading-content { width: 100%; margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.loading-spinner { width: 42px; height: 42px; border: 3px solid #dce6e2; border-top-color: #12b8a6; border-radius: 50%; animation: circadia-spin .85s linear infinite; margin-bottom: 26px; }
.loading-content .eyebrow { margin-bottom: 11px; }
.loading-content h1 { max-width: 300px; }
.loading-content .subhead { max-width: 280px; }
.loading-progress { width: min(250px, 100%); height: 5px; border-radius: 10px; background: #dfe8e4; overflow: hidden; }
.loading-progress i { display: block; width: 45%; height: 100%; border-radius: inherit; background: #12b8a6; animation: circadia-progress 1.25s ease-in-out infinite alternate; }
.loading-footnote { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
@keyframes circadia-spin { to { transform: rotate(360deg); } }
@keyframes circadia-progress { to { width: 100%; } }

.detail-back { justify-content: flex-start!important; width: max-content; min-height: 38px!important; padding: 6px 0!important; margin: 0 0 15px!important; font-size: 13px!important; }
.detail-card { padding: 17px!important; }
.detail-card h2 { font-size: 18px!important; margin-bottom: 10px!important; }
.detail-choice { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border: 0; border-bottom: 1px solid #edf1ef; background: transparent; color: var(--ink); text-align: left; font-size: 14px; cursor: pointer; }
.detail-choice:last-child { border-bottom: 0; }
.detail-choice.selected { font-weight: 700; }
.sleep-goal-control { margin: 14px 0 0; font-size: 10px; line-height: 1.35; letter-spacing: .04em; }
.sleep-goal-select { display: block; min-height: 48px; margin-top: 7px; padding: 10px 12px; border-radius: 11px; font: 500 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
.detail-choice .radio { width: 20px; height: 20px; }
.detail-choice .radio.checked { border-color: #12b8a6; }
.detail-choice .radio.checked::after { width: 12px; height: 12px; }
.detail-card .toggle-row { min-height: 62px; padding: 11px 0; }
.detail-card .toggle-row strong { font-size: 14px; }
.detail-card .toggle-row small { font-size: 12px; }
.detail-card .switch { width: 43px; height: 25px; }
.detail-card .switch::after { width: 19px; height: 19px; }
.detail-card .switch.on::after { transform: translateX(18px); }
.privacy-intro { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 17px; margin-bottom: 14px; }
.privacy-intro .ui-icon { width: 24px; height: 24px; }
.detail-copy { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 15px; }
.detail-action { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; font-size: 14px; font-weight: 600; cursor: pointer; }
.detail-action .ui-icon { width: 19px; height: 19px; }
.detail-action.danger { color: #9b4c4c; }
.sharing-setting { display: flex; align-items: flex-start; gap: 13px; }
.sharing-setting .setting-icon { flex: 0 0 auto; }
.sharing-setting .setting-icon .ui-icon { width: 24px; height: 24px; }
.sharing-setting h2 { margin: 0 0 6px!important; }
.sharing-setting .fine { margin: 0!important; }
.sharing-setting .switch { flex: 0 0 auto; margin-left: auto; }
.privacy-note-card { display: flex; align-items: center; gap: 9px; padding: 13px!important; background: var(--lavender); font-size: 12px; color: var(--muted); }
.privacy-note-card .ui-icon { width: 19px; height: 19px; }

.notification-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.notification-title h1 { margin: 0!important; }
.text-action { border: 0; padding: 8px 0; background: transparent; color: #18786e; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.notification-list { display: grid; gap: 10px; }
.notification-swipe-wrap { position: relative; overflow: hidden; border-radius: 17px; background: linear-gradient(90deg, #dff4ef 0 50%, #f8e5e5 50% 100%); }
.swipe-hint { position: absolute; inset-block: 0; z-index: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px; visibility: hidden; opacity: 0; font-size: 11px; font-weight: 700; pointer-events: none; transition: opacity .12s ease; }
.swipe-hint .ui-icon { width: 17px; height: 17px; }
.swipe-hint-read { left: 0; color: #17685e; }
.swipe-hint-delete { right: 0; color: #9b4c4c; }
.notification-swipe-wrap.swiping-right .swipe-hint-read, .notification-swipe-wrap.swiping-left .swipe-hint-delete { visibility: visible; opacity: 1; }
.notification-card { position: relative; z-index: 1; width: 100%; display: flex; align-items: flex-start; gap: 13px; margin: 0!important; padding: 15px!important; border: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; touch-action: pan-y; transition: transform .18s ease; will-change: transform; }
.notification-card:active { background: #f6faf8; }
.notification-card.read { opacity: .75; }
.notification-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 13px; background: #dff4ef; }
.notification-icon .ui-icon { width: 21px; height: 21px; }
.notification-card>span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.notification-card .eyebrow { margin-bottom: 5px!important; }
.notification-card strong { font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
.notification-card .fine { font-size: 12px; line-height: 1.45; margin-bottom: 7px; }
.notification-card small { font-size: 11px; color: var(--muted); }
.notification-privacy { display: flex; align-items: center; gap: 8px; background: var(--lavender); font-size: 12px; color: var(--muted); }
.notification-privacy .ui-icon { width: 19px; height: 19px; }

.add-form { padding: 17px!important; }
.add-form .field-label { font-size: 10px; margin: 12px 0 7px; }
.add-form .field { min-height: 45px; padding: 10px 11px; border-radius: 10px; font-size: 14px; }
.add-form .status-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.add-form .status-option { min-height: 40px; border-radius: 10px; font-size: 12px; }
.add-form .field-row { gap: 10px; }
.add-form .shift-length-card { padding: 12px; border-radius: 12px; gap: 5px; margin: 14px 0; }
.add-form .shift-length-card strong { font-size: 10px; }
.add-form .shift-length-card b { font-size: 20px; }
.add-form .shift-length-card small { font-size: 11px; }
.add-form .btn { min-height: 48px; border-radius: 13px; font-size: 14px; padding: 12px; }
.delete-shift-button { justify-content: center!important; background: #fff!important; color: #984949!important; border: 1px solid #efcece!important; }
.delete-shift-button .ui-icon { width: 18px; height: 18px; }
.hours-button { min-width: 43px; min-height: 36px; }
.roster-cycle { width: 100%; }
.schedule-row { cursor: pointer; }
.calendar-blank { display: grid; place-items: center; min-height: 42px; color: #a8b5b0; }

/* Name capture and account prototype screens share the Circadia form language. */
.onboarding-name-field { margin: 0 0 12px!important; font-size: 10px!important; }
.onboarding-name-field .field { min-height: 45px; padding: 10px 12px; border-radius: 11px; font-size: 14px; }
.onboarding-pattern-label { margin: 0 0 8px!important; }
.onboarding-account-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 15px; color: var(--muted); font-size: 11px; }
.onboarding-account-links button, .auth-switch button, .auth-forgot { border: 0; padding: 3px; background: transparent; color: #18786e; font-size: inherit; font-weight: 700; cursor: pointer; }
.account-card { margin-top: 12px!important; }
.account-card .eyebrow { margin-bottom: 6px!important; }
.account-card .btn { min-height: 42px; margin-top: 9px; font-size: 13px; }
.account-card .btn.ghost { min-height: 34px; font-size: 13px; }
.auth-screen { padding: 13px 20px 25px!important; }
.auth-page { max-width: 100%; }
.auth-brand { display: flex; align-items: center; gap: 9px; margin: 9px 0 28px; color: var(--ink); }
.auth-brand .ui-icon { width: 28px; height: 28px; }
.auth-brand strong { font-size: 21px; font-weight: 800; letter-spacing: -.8px; }
.auth-page h1 { margin-bottom: 9px!important; }
.auth-page .subhead { margin-bottom: 22px!important; }
.auth-page .field-label { margin: 14px 0 7px; font-size: 10px; }
.auth-page .field { min-height: 48px; padding: 11px 12px; border-radius: 11px; font-size: 15px; }
.auth-page .btn { min-height: 50px; padding: 13px 15px; border-radius: 13px; font-size: 15px; margin-top: 18px; }
.auth-page .btn.secondary { justify-content: center; background: white; border: 1.5px solid var(--aqua); }
.auth-page .btn.ghost { min-height: 40px; margin-top: 6px; font-size: 14px; }
.auth-demo-note { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.auth-switch { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.auth-forgot { display: block; margin: 8px 0 0 auto; font-size: 12px; }
.auth-success { display: flex; align-items: flex-start; gap: 12px; padding: 16px!important; background: #dff4ef!important; }
.auth-success .ui-icon { flex: 0 0 auto; width: 23px; height: 23px; }
.auth-success p { margin: 0; font-size: 14px; line-height: 1.45; }

/* Brand mark and guest preview states. */
.brand-logo { width: 116px; height: auto; display: block; object-fit: contain; object-position: left center; }
.auth-brand { min-height: 28px; }
.auth-brand img { display: block; width: 155px; height: auto; }
.loading-brand { width: 160px; height: auto; }
.loading-brand img { display: block; width: 160px; height: auto; }
.onboarding-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-progress-row .progress { flex: 1 1 auto; }
.skip-onboarding { border: 0; padding: 5px 2px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.ghost-content { display: grid; gap: 11px; margin: 20px 0 16px; opacity: .76; }
.skeleton-card { padding: 17px; min-height: 125px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border: 1px solid #e1e9e5; border-radius: 17px; background: #fff; }
.skeleton-card.compact { min-height: 82px; }
.skeleton-line, .skeleton-block { display: block; border-radius: 8px; background: linear-gradient(90deg,#e9efec,#f2f6f4,#e9efec); background-size: 200% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite; }
.skeleton-line { height: 11px; }
.skeleton-line.wide { width: 84%; }
.skeleton-line.medium { width: 61%; }
.skeleton-line.short { width: 38%; }
.skeleton-block { height: 44px; margin-top: 4px; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
.guest-prompt { padding: 17px!important; background: white; }
.guest-prompt h2 { font-size: 18px!important; }
.guest-prompt .fine { line-height: 1.5; }
.guest-prompt .btn { min-height: 47px; padding: 12px 14px; font-size: 14px; border-radius: 13px; }
.guest-prompt .btn.ghost { min-height: 38px; margin-top: 5px; }
.guest-onboarding-link { display: block; width: 100%; border: 0; padding: 12px 4px 3px; background: transparent; color: #18786e; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Personal profile details remain optional and editable on device. */
.person-card { position: relative; }
.person-copy { min-width: 0; }
.profile-edit-button { margin-left: auto; border: 0; padding: 8px 2px 8px 8px; background: transparent; color: #18786e; font-size: 13px; font-weight: 700; cursor: pointer; }
.profile-photo { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.photo-editor { display: flex; align-items: center; gap: 15px; }
.photo-preview { width: 68px; height: 68px; flex: 0 0 68px; }
.profile-photo-large, .profile-photo-placeholder { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.profile-photo-placeholder { font-size: 25px; }
.photo-actions { min-width: 0; flex: 1; }
.photo-actions>strong, .photo-actions>small { display: block; }
.photo-actions>strong { font-size: 14px; }
.photo-actions>small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.photo-actions .detail-action { min-height: 36px; font-size: 12px; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.personal-fields { padding: 17px!important; }
.personal-fields .field-label { margin: 13px 0 7px; font-size: 10px; }
.personal-fields .field { min-height: 45px; border-radius: 10px; padding: 10px 11px; font-size: 14px; }
.profile-multi-group { margin: 13px 0 10px; }
.profile-multi-group>.field-label { margin: 0 0 3px!important; font-size: 10px!important; }
.profile-select-help { margin: 0 0 7px; color: var(--muted); font-size: 11px; }
.profile-multi-options { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-option-chip { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-size: 12px; cursor: pointer; }
.profile-option-chip.selected { border-color: #4e8d81; background: #dff4ef; font-weight: 700; }
.profile-option-chip .ui-icon { width: 14px; height: 14px; }
.personal-fields .profile-other-field { margin-top: 9px!important; }
.personal-fields .settings-divider { margin: 19px 0 14px; }
.pattern-explainer { margin-bottom: 9px!important; }
.personal-fields .detail-choice { min-height: 48px; }
.personal-fields .save-profile-button { min-height: 47px; padding: 12px 14px; border-radius: 13px; font-size: 14px; margin-top: 15px; }
.account-card { background: #f4f9df!important; border-color: #e8edd2!important; }
.profile-account-card { padding: 0!important; overflow: hidden; border-radius: 18px!important; margin-bottom: 12px!important; }
.profile-account-card.is-guest { background: #f4f9df!important; border-color: #e8edd2!important; }
.profile-account-card.is-signed-in { background: var(--paper)!important; }
.profile-account-card .person-card { display: flex; align-items: center; gap: 13px; margin: 0!important; padding: 16px!important; background: transparent; border: 0; border-radius: 0!important; }
.profile-account-card .profile-account-section { padding: 14px 16px 16px; border-top: 1px solid #dce6d2; }
.profile-account-card.is-signed-in .profile-account-section { border-top-color: var(--line); }
.profile-account-section>.eyebrow { margin: 0 0 6px!important; }
.profile-account-section h2 { font-size: 19px!important; line-height: 1.22!important; margin: 0 0 6px!important; }
.profile-account-section>.fine { margin: 0 0 10px!important; font-size: 13px!important; line-height: 1.45!important; color: #586a65; }
.profile-account-actions { display: grid; gap: 5px; }
.profile-account-actions .btn { min-height: 44px; justify-content: center; margin: 3px 0 0; padding: 10px 12px; border-radius: 11px; font-size: 14px; text-align: center; }
.profile-account-actions .btn.ghost { min-height: 42px; border: 1px solid #9eb6aa; color: var(--ink); }
.cycle-symbol { width: 38px!important; height: 38px!important; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; background: #173c36; color: #d7f36a; }
.cycle-symbol .ui-icon { width: 23px!important; height: 23px!important; }

/* Muted completed dates make the current and upcoming shifts easier to scan. */
.schedule-row.past { background: #f7f9f8; border-color: #e6ece9; }
.schedule-row.past .schedule-date, .schedule-row.past .schedule-date strong, .schedule-row.past .schedule-label strong, .schedule-row.past .schedule-label small { color: #899691; }
.schedule-row.past .shift-kind, .schedule-row.past .duration-pill { opacity: .58; filter: grayscale(.45); }
.schedule-row.past.selected { background: #eef2f0; border-color: #cbd5d1; }
.day-cell.past { color: #9ba6a2; }
.day-cell.past .day-marker { opacity: .48; filter: grayscale(.5); }
.day-cell.past.selected { background: #edf1ef; color: #7e8a85; }

/* Notification center floats over the current tab and makes read state explicit. */
.notification-overlay { position: absolute; inset: 0; z-index: 80; display: flex; align-items: stretch; justify-content: center; }
.notification-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #102d29a8; cursor: pointer; }
.notification-sheet { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 48px 18px 0; border: 1px solid #dce5e1; border-radius: 24px; background: var(--canvas); box-shadow: 0 16px 40px #102d2940; }
@keyframes notification-rise { from { transform: translateY(10px); opacity: .75; } to { transform: translateY(0); opacity: 1; } }
.notification-sheet-head { position: relative; margin-bottom: 12px; }
.notification-sheet .eyebrow { font-size: 10px; line-height: 1.35; margin-bottom: 7px; }
.notification-sheet h1 { font-size: 27px; line-height: 1.14; letter-spacing: -.55px; }
.notification-sheet-head>h1 { margin: 1px 0 10px!important; }
.notification-close { position: absolute; top: -12px; right: -5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 28px; cursor: pointer; }
.notification-scroll-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.notification-scroll-content::-webkit-scrollbar { display: none; }
.notification-actions { position: relative; z-index: 2; display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -18px; padding: 9px 18px max(17px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--canvas); }
.notification-actions .text-action { min-height: 48px; padding: 10px 4px; }
.text-action:disabled { opacity: .38; cursor: default; }
.danger-text { color: #9b4c4c; }
.notification-card.unread { border-color: #b8dcd3; background: #f0f8f5; }
.notification-card.read { border-color: #e1e8e5; background: #fff; opacity: .78; }
.notification-card.read strong, .notification-card.read small { color: #73817d; }
.notification-copy { flex: 1; }
.notification-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.unread-indicator { display: block; width: 9px; height: 9px; flex: 0 0 9px; margin-left: 8px; border-radius: 50%; background: #d7f36a; box-shadow: 0 0 0 2px #fff; }
.read-label { margin-left: 8px; color: #87938e; font-size: 10px; font-weight: 600; }
.notification-card.unread .notification-icon { background: #dff4ef; }
.notification-card.read .notification-icon { background: #e9efec; color: #788681; }
.empty-notifications { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.notification-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 11px; background: #dff4ef; }
.empty-notifications h2 { margin-bottom: 6px!important; font-size: 19px; line-height: 1.22; }
.empty-notifications .fine { max-width: 245px; font-size: 12px; line-height: 1.45; }
.notification-sheet .notification-privacy { margin-top: 12px; }

/* Settings that need an action open focused, matching app screens. */
.steps-card { position: relative; cursor: pointer; }
.steps-card:focus-visible { outline: 2px solid #11b8a566; outline-offset: 2px; }
.steps-card .open-link { border: 0; padding: 6px 0 6px 6px; background: transparent; color: var(--muted); cursor: pointer; }
.steps-card .open-link:focus-visible { outline: 2px solid #11b8a566; outline-offset: 2px; }
.tool-options { margin-top: 18px!important; }
.tool-note { display: flex; align-items: center; gap: 10px; padding: 14px!important; background: var(--lavender)!important; color: var(--muted); font-size: 13px; }
.tool-note .ui-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.tool-save { min-height: 49px; padding: 12px 14px; border-radius: 13px; font-size: 14px; }