@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #f8fafb;
  --ink: #243d50;
  --muted: #597083;
  --line: #dce4e9;
  --blue: #325f83;
  --blue-fill: #ecf3f8;
  --lived: #865320;
  --lived-fill: #faf0dd;
  --now: #bd492a;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --header-height: calc(145px + env(safe-area-inset-top));
  --legend-height: 40px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body { font: 16px var(--sans); color: var(--ink); background: #e7edf1; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #336e9f; outline-offset: 4px; }
button:focus:not(:focus-visible) { outline: none; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin: 0; }

.app-shell { position: relative; max-width: 760px; height: 100dvh; min-height: 400px; margin: auto; background: var(--paper); overflow: hidden; box-shadow: 0 0 70px #253d5010; }
.app-header { height: var(--header-height); padding: calc(14px + env(safe-area-inset-top)) 23px 0; border-bottom: 1px solid var(--line); position: relative; background: var(--paper); z-index: 4; }
.masthead { display: flex; align-items: center; justify-content: space-between; height: 43px; }
.wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 29px var(--serif); letter-spacing: -1.3px; }
.wordmark svg { width: 24px; height: 24px; }
.study-button { border: 0; background: none; display: flex; align-items: center; gap: 6px; font-size: 12px; min-height: 44px; padding: 0 0 0 8px; color: var(--muted); }
.study-button > span:last-child { font-size: 18px; margin-left: 1px; }
.study-dot { width: 5px; height: 5px; border-radius: 50%; background: #6e8798; }
.date-row { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 8px; }
.eyebrow { font-size: 12px; letter-spacing: 1.2px; font-weight: 600; color: var(--muted); line-height: 1.6; }
.date-row h1 { font-size: 18px; font-weight: 500; letter-spacing: -.4px; margin-top: 3px; }
.header-clock { text-align: right; display: flex; gap: 5px; align-items: baseline; }
.header-clock time { font: 25px var(--mono); letter-spacing: -1.3px; }
.header-clock > span { font-size: 12px; color: var(--muted); }

/* The axis belongs to continuous time. Cards sit on either side of it. */
.lane-headings { height: var(--legend-height); display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; padding: 0 23px; border-bottom: 1px solid #e6ebef; font-size: 14px; color: var(--muted); }
.lane-headings > span { display: flex; align-items: center; gap: 6px; }
.lane-headings > span:last-child { justify-content: flex-end; }
.lane-headings .time-heading { justify-content: center; font-size: 12px; letter-spacing: 1px; }
.plan-key { width: 13px; height: 8px; border: 1px dashed var(--blue); }
.lived-key { width: 13px; height: 8px; border: 1px solid var(--lived); background: var(--lived-fill); }
.timeline-scroll { height: calc(100dvh - var(--header-height) - var(--legend-height)); overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #bdcbd5 transparent; position: relative; touch-action: pan-y; }
.timeline-canvas { position: relative; min-height: 3000px; }
.time-axis { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid #c6d3dd; }
.hour-rule, .half-hour-rule { position: absolute; left: 0; right: 0; border-top: 1px solid #e2e9ee; }
.half-hour-rule { left: calc(50% - 4px); right: calc(50% - 4px); border-color: #b8c8d3; }
.hour-time { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 7px; background: var(--paper); font: 12px/18px var(--mono); color: #587084; white-space: nowrap; }
.day-boundary { position: absolute; left: 0; right: 0; border-top: 1px solid #8099ac; z-index: 2; pointer-events: none; }
.day-boundary span { position: absolute; left: 18px; top: -13px; font-size: 12px; line-height: 24px; padding: 0 7px; background: var(--paper); color: var(--ink); font-weight: 600; }
.day-boundary .midnight-label { left: 50%; transform: translateX(-50%); font: 12px/24px var(--mono); font-weight: 400; }
.timeline-item { position: absolute; display: flex; flex-direction: column; align-items: flex-start; text-align: left; overflow: hidden; border-radius: 5px; border: 1px dashed #8ca9bf; border-left: 3px solid #779bb7; background: var(--blue-fill); padding: 9px 10px 8px; min-height: 58px; line-height: 1.3; z-index: 2; transition: filter .15s, box-shadow .15s; width: calc(50% - 45px); left: 17px; }
.timeline-item:hover { filter: brightness(.98); box-shadow: 0 3px 9px #20394c12; }
.timeline-item.actual { left: calc(50% + 28px); border: 1px solid #d2b58a; border-left: 3px solid #ba8a4e; background: var(--lived-fill); color: #73471d; }
.timeline-item.passed { background: #f0f4f7; border-color: #a9bac8; color: #526b7e; }
.timeline-item .item-title { font-size: 14px; font-weight: 600; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }
.item-time { font: 12px var(--mono); margin-top: 5px; color: var(--muted); }
.actual .item-time { color: #886137; }
.item-detail { font-size: 12px; line-height: 1.5; margin-top: 10px; max-width: 100%; color: var(--muted); }
.recording-card { box-shadow: 0 2px 13px #b1802520 !important; border-left-color: #996527 !important; }
.item-active { font-size: 12px; font-weight: 600; letter-spacing: .5px; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.item-active::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #996527; }
.open-time { position: absolute; left: 20px; right: calc(50% + 28px); display: flex; align-items: center; justify-content: center; gap: 7px; font: italic 14px var(--serif); color: #597083; pointer-events: none; }
.open-time::before { content: ''; width: 13px; border-top: 1px solid #bac8d2; }
.now-marker { position: absolute; left: 0; right: 0; display: flex; align-items: center; z-index: 1; pointer-events: none; transform: translateY(-50%); }
.now-marker > span { flex: 1; border-top: 1px solid var(--now); }
.now-marker > span:first-child::before { content: ''; display: block; width: 5px; height: 5px; margin-top: -3px; background: var(--now); border-radius: 50%; }
.now-marker time { background: var(--now); color: #fff; border-radius: 4px; font: 12px/23px var(--mono); padding: 0 6px; min-width: 48px; text-align: center; box-shadow: 0 0 0 3px var(--paper); }
.return-now { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 5; background: var(--paper); border: 1px solid #cbd7df; border-radius: 24px; padding: 0 15px; min-height: 44px; box-shadow: 0 3px 15px #233c5012; font-size: 14px; white-space: nowrap; }
.return-now span { font-size: 18px; vertical-align: -1px; padding-right: 5px; }

.bottom-nav { position: absolute; z-index: 6; bottom: calc(23px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 5px; display: flex; gap: 4px; border: 1px solid #ffffffcc; border-radius: 35px; background: #fffefbf5; box-shadow: 0 6px 35px #263b5125, 0 1px 4px #263b5114; backdrop-filter: blur(14px); }
.bottom-nav button { border: 0; background: transparent; padding: 0 20px; border-radius: 28px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); position: relative; }
.bottom-nav svg { height: 19px; width: 19px; }
.bottom-nav [aria-current=page] { background: var(--ink); color: #fff; box-shadow: 0 1px 3px #10253621; }
.nav-recording { height: 5px; width: 5px; border-radius: 50%; background: #bb843b; position: absolute; top: 9px; right: 12px; }

.activity-view { height: calc(100dvh - var(--header-height)); overflow-y: auto; padding: 29px 22px 130px; }
.activity-heading { margin-bottom: 24px; }
.activity-heading h2 { font: 29px/1.2 var(--serif); letter-spacing: -1px; margin-top: 8px; }
.control-panel { background: linear-gradient(135deg, #f2f4f5, #e7ecef); border: 1px solid #ccd6dc; border-radius: 16px; padding: 19px 22px 15px; box-shadow: inset 0 1px #fff, 0 4px 10px #28415106; position: relative; }
.control-panel::before, .control-panel::after { content: ''; width: 4px; height: 4px; border: 1px solid #b5c3cc; border-radius: 50%; position: absolute; bottom: 12px; }
.control-panel::before { left: 12px; }
.control-panel::after { right: 12px; }
.panel-status { display: flex; gap: 6px; align-items: center; font: 12px var(--mono); letter-spacing: .2px; color: #516777; margin-bottom: 27px; }
.recording-light { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #9aaab5; box-shadow: inset 0 1px 2px #1e334333; }
.recording-light.active { background: #ba7737; box-shadow: 0 0 7px #bc79284d; }
.panel-number { margin-left: auto; color: #647b8a; font-size: 12px; white-space: nowrap; }
label { display: block; font-size: 14px; margin-bottom: 9px; font-weight: 500; }
input { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #b9c9d4; background: #fff; border-radius: 7px; color: var(--ink); font-size: 16px; }
#activity-name { background: #f8fafb; border-color: #b7c6d0; }
input::placeholder { color: #738594; }
.selected-plan { font-size: 12px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.elapsed-display { text-align: center; margin-top: 32px; }
.elapsed-display > span:first-child { font: 48px/1.1 var(--mono); letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.elapsed-caption { display: block; font: 12px var(--mono); letter-spacing: 1px; color: var(--muted); margin-top: 10px; }
.switch-assembly { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 27px 0 18px; }
.switch-side { font: 12px var(--mono); letter-spacing: 1px; color: #637988; }
.mechanical-switch { width: 114px; height: 74px; padding: 5px; border: 1px solid #93a4af; border-radius: 10px; background: linear-gradient(#a3b0b9, #c8d2d9); box-shadow: inset 0 2px 4px #24394c50, 0 1px #fff; perspective: 180px; }
.switch-rocker { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; position: relative; border-radius: 6px; border: 1px solid #f9fafc; background: linear-gradient(#fff, #e4e9ed 65%, #c2cdd5); box-shadow: 0 4px 5px #132c3d4d, 0 1px 1px #fff inset; transform: rotateX(9deg); transform-origin: center; transition: transform .2s, background .2s, box-shadow .2s; color: #314d62; }
.rocker-line { height: 2px; width: 22px; border-radius: 2px; background: #9dacb7; margin-top: 8px; }
.rocker-label { font: 600 12px var(--mono); letter-spacing: 2px; margin-top: 3px; }
.rocker-grip { height: 7px; width: 28px; background: repeating-linear-gradient(to bottom, #a5b4bf 0 1px, transparent 1px 3px); opacity: .55; margin-bottom: 7px; }
.mechanical-switch:active .switch-rocker { transform: rotateX(-3deg); box-shadow: 0 1px 2px #132c3d30; }
.mechanical-switch.is-recording .switch-rocker { background: linear-gradient(#c4cfd6, #e4e9ed 35%, #f4f7f8); transform: rotateX(-9deg); box-shadow: 0 -3px 4px #203a4a25; }
.is-recording .rocker-line { background: #a36c2f; box-shadow: 0 0 5px #b0773240; }
.switch-hint { text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 250px; margin: auto; }
#running-name { font: 24px/1.2 var(--serif); letter-spacing: -.5px; margin-bottom: 9px; overflow-wrap: anywhere; }
#running-since { font-size: 12px; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 27px 0 8px; gap: 10px; }
.section-heading h3 { font-size: 14px; font-weight: 600; }
.section-heading > span { font-size: 12px; letter-spacing: .4px; color: var(--muted); }
.plan-choice { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 12px; padding: 14px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); min-height: 61px; }
.plan-choice strong { font-size: 14px; font-weight: 500; display: block; }
.plan-choice small { font: 12px var(--mono); color: var(--muted); display: block; margin-top: 5px; }
.plan-choice > span:last-child { font-size: 22px; color: #698297; }
.plan-choice.selected > span:last-child { font-size: 15px; }
.activity-footnote { font: italic 14px var(--serif); color: var(--muted); text-align: center; margin-top: 26px; }
.latest-record { margin-top: 23px; border-top: 1px solid var(--line); padding-top: 15px; }
.latest-record button { padding: 0; background: none; border: 0; text-align: left; width: 100%; min-height: 50px; }
.latest-record .eyebrow { margin-bottom: 6px; color: var(--lived); }
.latest-record strong { font-size: 14px; display: block; font-weight: 500; }
.latest-record small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }

.toast { position: absolute; z-index: 12; bottom: calc(100px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 10px); max-width: calc(100% - 40px); padding: 12px 17px; background: var(--ink); color: #fff; box-shadow: 0 3px 12px #223b4c22; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 14px; text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.storage-warning { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: #fff1d9; border-bottom: 1px solid #d6bb8e; padding: 10px 16px; font-size: 12px; color: #6d481f; }
.sheet { position: fixed; inset: auto 0 0; width: min(100%, 520px); max-width: 100%; max-height: 90dvh; margin: 0 auto; border: 1px solid #d6dfe5; border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); padding: 10px 25px max(29px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 60px #1b334126; overflow-x: hidden; overflow-y: auto; }
.sheet::backdrop { background: #152c3a50; backdrop-filter: blur(3px); }
.sheet-handle { width: 32px; height: 4px; border-radius: 3px; background: #c1ced7; margin: 0 auto 9px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.icon-button { border: 0; background: transparent; font-size: 28px; color: var(--muted); min-width: 44px; min-height: 44px; margin-right: -12px; }
.sheet h2 { font: 30px/1.18 var(--serif); letter-spacing: -.8px; margin: 5px 0 25px; overflow-wrap: anywhere; }
.detail-times { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 19px; }
.detail-times dt { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.detail-times dd { margin: 0; font: 16px var(--mono); line-height: 1.4; }
.detail-times dd small { display: block; font: 12px var(--sans); color: var(--muted); margin-top: 6px; }
.detail-note { font-size: 14px; line-height: 1.65; margin-bottom: 22px; color: var(--muted); }
.record-link { padding: 15px 0; display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 14px; min-height: 54px; }
.record-link small { display: block; margin-top: 6px; font: 12px var(--mono); color: var(--muted); }
.primary-button, .secondary-button { border-radius: 8px; min-height: 48px; padding: 12px 17px; font-size: 14px; font-weight: 500; border: 1px solid var(--ink); }
.primary-button { background: var(--ink); color: white; }
.secondary-button { background: transparent; border-color: #bacbd7; }
.full-width { width: 100%; }
.sheet-actions { display: flex; gap: 10px; margin-top: 24px; }
.sheet-actions > * { flex: 1; }
#edit-form label:not(:first-child) { margin-top: 19px; }
.form-note, .study-note { font-size: 12px; line-height: 1.65; color: var(--muted); margin-top: 16px; }
.form-error { font-size: 14px; color: #a13b25; line-height: 1.5; }
.form-error:not(:empty) { margin-top: 13px; }
.sheet-intro { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: -10px; }
.scenario-list { margin: 20px 0; }
.scenario-list button { width: 100%; display: flex; align-items: center; gap: 13px; background: none; border: 0; border-top: 1px solid var(--line); padding: 18px 0; text-align: left; }
.scenario-list button > span:last-child { margin-left: auto; font-size: 20px; }
.scenario-number { font: 12px var(--mono); color: var(--muted); }
.scenario-list strong { font-size: 14px; font-weight: 500; }
.scenario-list small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 5px; }
.noscript { position: fixed; inset: 40% 20px auto; z-index: 20; padding: 20px; background: white; text-align: center; }

@media (min-width: 600px) {
  :root { --header-height: 154px; --legend-height: 44px; }
  .app-shell { border-inline: 1px solid #cad6de; }
  .app-header { padding-inline: 36px; padding-top: 19px; }
  .date-row { margin-top: 21px; }
  .lane-headings { padding-inline: 36px; }
  .timeline-item { left: 32px; width: calc(50% - 66px); padding: 13px 17px; }
  .timeline-item.actual { left: calc(50% + 34px); }
  .timeline-item .item-title { font-size: 16px; }
  .activity-view { padding: 36px max(38px, calc((100% - 440px) / 2)) 135px; }
  .activity-heading h2 { font-size: 33px; }
  .control-panel { padding: 24px 30px; }
  .sheet { bottom: 28px; border-bottom: 1px solid #d6dfe5; border-radius: 20px; padding: 16px 30px 30px; }
  .sheet-handle { display: none; }
  .open-time { left: 34px; right: calc(50% + 40px); }
}

@media (max-width: 350px) {
  .app-header { padding-inline: 16px; }
  .timeline-item { left: 10px; width: calc(50% - 36px); padding: 9px 7px; }
  .timeline-item.actual { left: calc(50% + 26px); }
  .activity-view { padding-inline: 16px; }
  .control-panel { padding-inline: 17px; }
  .bottom-nav button { padding-inline: 17px; }
  .panel-number { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.account-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; padding:6px 0; }
.app-header { height:auto; padding-bottom:14px; }
.account-row .study-button { min-height:32px; }
.date-row { margin-top:8px; }
#sync-status { flex:1; }
#example-banner { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:12px; line-height:1.5; }
#leave-examples { display:block; min-height:44px; background:none; border:0; text-decoration:underline; }
button:disabled { opacity:.5; cursor:wait; }

/* Daily room: daylight, a desk, and a small instrument for lived time. */
.plan-launch { position:absolute; right:20px; bottom:calc(100px + env(safe-area-inset-bottom)); z-index:5; min-height:54px; padding:0 23px; border:1px solid #25473b; border-radius:28px; background:#365d4d; color:#fffdf4; box-shadow:0 5px 16px #233e4030,inset 0 1px #ffffff30; font-weight:600; display:flex; align-items:center; gap:10px; }
.plan-launch span { font-size:27px; font-weight:300; }
.return-now { left:18px; transform:none; padding-inline:12px; min-height:48px; bottom:calc(103px + env(safe-area-inset-bottom)); }
.activity-view { background:#f1f0e9; padding:20px 20px 140px; }
.room-welcome { --sun:#aebcc1; position:relative; padding:19px 20px 20px; border:1px solid #c7d0cd; border-radius:20px; overflow:hidden; background:linear-gradient(145deg,#e1e7e5,#f0f1e9); box-shadow:inset 0 1px #fff; transition:background .6s; }
.room-awake .room-welcome { --sun:#f5d88b; background:linear-gradient(140deg,#fff5dd,#f2e9d6 65%,#e0e9dc); border-color:#d5c7ac; }
.room-label { display:flex; align-items:center; gap:8px; font:10px var(--mono); letter-spacing:1.6px; color:#566a63; }
.room-edition { margin-left:auto; letter-spacing:1px; }
.room-led { height:7px; width:7px; border-radius:50%; background:#a0ada5; box-shadow:inset 0 1px 2px #244b3830; }
.room-led.on { background:#5a8450; box-shadow:0 0 9px #a9c779; }
.room-scene { height:103px; position:relative; margin:18px 8px 0; border-bottom:1px solid #9fae9f; }
.room-window { position:absolute; top:0; left:15px; width:100px; height:83px; border:5px solid #f9f8ef; outline:1px solid #a9b7b0; border-radius:40px 40px 0 0; overflow:hidden; background:linear-gradient(#a3b9c1,#d6dfd7); box-shadow:3px 4px 0 #90a49620; }
.room-awake .room-window { background:linear-gradient(#bddbd5,#f1eac6); box-shadow:20px 15px 34px #efd18b65; }
.room-window::before { content:''; position:absolute; width:28px; height:28px; border-radius:50%; background:var(--sun); left:44px; top:12px; }
.room-window::after { content:''; position:absolute; inset:0 44% 0 48%; background:#f9f8ef; }
.room-window i { position:absolute; left:0; right:0; height:4px; top:42px; background:#f9f8ef; }
.room-shelf { position:absolute; left:4px; top:82px; width:122px; height:5px; background:#a9997c; border-radius:2px; }
.room-desk { position:absolute; right:5px; bottom:16px; width:116px; height:7px; border-radius:3px; background:#a69070; box-shadow:0 3px #907b6020; }
.room-desk::before,.room-desk::after { content:''; position:absolute; width:5px; height:16px; top:7px; background:#a69070; }
.room-desk::before { left:8px; }.room-desk::after { right:8px; }
.room-lamp { position:absolute; right:23px; bottom:23px; width:6px; height:43px; background:#5f7569; }
.room-lamp::before { content:''; position:absolute; top:-9px; left:-17px; width:40px; height:23px; background:#7e9580; border-radius:22px 22px 4px 4px; }
.room-lamp::after { content:''; position:absolute; bottom:0; left:-10px; width:26px; height:4px; border-radius:5px; background:#5f7569; }
.room-awake .room-lamp::before { background:#b68c50; box-shadow:0 13px 25px #f1c86c90; }
.room-book { position:absolute; bottom:23px; right:65px; width:37px; height:10px; border-radius:2px; border-block:3px solid #768886; background:#eee5cf; transform:rotate(-4deg); }
.room-welcome .activity-heading { margin:21px 0 17px; }
.room-welcome .activity-heading h2 { font:32px/1.15 var(--serif); letter-spacing:-1px; margin:5px 0 9px; color:#304a3f; }
.room-welcome .eyebrow { font-size:10px; }
#room-greeting { font-size:13px; line-height:1.6; color:#57685d; }
.room-power-row { display:flex; align-items:center; gap:14px; }
.room-power { display:flex; align-items:center; justify-content:center; gap:9px; flex-shrink:0; min-height:50px; padding:0 16px; border:1px solid #9eaaa0; border-radius:10px; background:linear-gradient(#fffef9,#dce0d5); box-shadow:0 3px 0 #a1aa9d,inset 0 1px #fff; font-size:13px; font-weight:600; color:#334d3f; }
.room-power:active { transform:translateY(2px); box-shadow:0 1px 0 #a1aa9d; }
.room-power[aria-pressed=true] { background:linear-gradient(#e2e4d8,#faf8e9); box-shadow:inset 0 2px 4px #7d886a25; }
.power-symbol { font-size:23px; } #room-power-note { font-size:11px; line-height:1.55; color:#596b5f; }
.room-overview { margin:18px 0 25px; padding:17px; border:1px solid #d4d9cb; border-radius:12px; background:#fafaf2; }
.room-readouts { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.room-readouts > div + div { padding-left:14px; border-left:1px solid #d7ddce; }
.room-readouts span { display:block; font:10px var(--mono); color:#617366; letter-spacing:.6px; margin-bottom:9px; }
.room-readouts strong { font:18px/1.3 var(--serif); display:block; overflow-wrap:anywhere; color:#334d3f; }
.room-readouts small { font-size:11px; color:#617366; display:block; margin-top:7px; line-height:1.5; }
.room-totals { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:12px; border-top:1px solid #d7ddce; font-size:11px; color:#617366; }
.instrument-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 3px 10px; }
.instrument-heading h3 { font-size:14px; font-weight:500; }.instrument-heading > span { font:9px var(--mono); letter-spacing:.5px; color:#667269; }
.activity-view .control-panel { background:linear-gradient(135deg,#f7f6ef,#e3e4d9); border-color:#b9c2b5; box-shadow:inset 0 1px #fff,0 5px 14px #3b50420b; }
.activity-view .elapsed-display { padding:20px 8px; border:1px solid #b6c1af; border-radius:8px; background:linear-gradient(#dce4d4,#e9eddf); box-shadow:inset 0 2px 6px #34493618,0 1px #fff; color:#334d3f; margin-top:20px; }
.activity-view .elapsed-caption { color:#5b705d; font-size:10px; }
.activity-view .panel-status { margin-bottom:20px; font-size:10px; }
.activity-view .recording-light.active { background:#a2612b; box-shadow:0 0 8px #c3934470; }
.activity-view .mechanical-switch { width:132px; height:80px; }
.room-sync { text-align:center; font-size:10px; color:#617366; margin:0 0 10px; line-height:1.5; }
.room-text-button { border:0; background:none; min-height:44px; padding:0 8px; color:#365d4d; font-weight:600; font-size:13px; }
.room-agenda-item { display:grid; grid-template-columns:1fr auto; gap:6px 12px; text-align:left; width:100%; padding:15px 0; background:none; border:0; border-bottom:1px solid #d5dccf; }
.room-agenda-item > span:first-child { grid-column:1; font:11px var(--mono); color:#667669; }
.room-agenda-item strong { grid-column:1; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.room-agenda-item .room-arrow { grid-column:2; grid-row:1 / 3; align-self:center; }
.room-empty { font-size:13px; line-height:1.7; color:#677567; padding:10px 0; }
@media(min-width:600px) { .activity-view { padding:26px max(36px,calc((100% - 490px)/2)) 140px; } .room-scene { height:115px; margin-inline:24px; } .room-welcome { padding:23px 27px; } }
@media(max-width:350px) { .activity-view { padding-inline:12px; } .room-welcome { padding-inline:14px; } .room-power-row { gap:9px; }.room-power { padding-inline:10px; }.room-readouts { gap:10px; }.room-edition { display:none; } .plan-launch { right:12px; padding-inline:18px; } .return-now { left:10px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .room-welcome { transition:none; } }

/* A desk calendar that opens into a date navigator and shared daily agenda. */
.calendar-preview { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin:18px 0; padding:19px; text-align:left; border:1px solid #d1d6c8; border-radius:15px; background:#fffdf5; color:#344c40; box-shadow:0 3px 0 #d5d8cc55; }
.calendar-preview-copy { display:flex; flex-direction:column; gap:9px; }
.calendar-preview .eyebrow { font-size:9px; letter-spacing:1.3px; color:#617366; }
.calendar-preview-copy > strong { font:19px var(--serif); }
.calendar-preview-today { display:flex; align-items:center; gap:9px; font-size:11px; color:#6b776a; }
.calendar-preview-today b { font:35px var(--serif); color:#385544; }
.calendar-preview-hint { font-size:10px; color:#667765; }
.calendar-mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; width:133px; flex-shrink:0; font:9px var(--mono); text-align:center; }
.calendar-mini-grid span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; }
.calendar-mini-grid .outside { color:#9fa69c; }
.calendar-mini-grid .mini-today { background:#3f5b48; color:#fff; }
.calendar-sheet { width:min(100%,680px); max-height:94dvh; padding:22px 20px max(25px,env(safe-area-inset-bottom)); background:#fafbf5; color:#344c40; }
.calendar-sheet .sheet-top { align-items:flex-start; }
.calendar-sheet .sheet-top h2 { margin:7px 0 6px; font-size:32px; }
.calendar-sheet .eyebrow { font-size:9px; letter-spacing:1.3px; }
.calendar-context { margin:4px 0 17px; color:#667765; font-size:11px; }
.calendar-toolbar { display:flex; align-items:flex-end; gap:10px; }
.calendar-arrow { width:44px; height:44px; flex-shrink:0; border:1px solid #cdd6c9; border-radius:10px; background:#fffef8; font-size:27px; }
.calendar-selectors { display:flex; gap:10px; flex:1; min-width:0; }
.calendar-selectors label { flex:1; min-width:0; margin:0; font-size:10px; color:#667765; }
.calendar-selectors label:last-child { flex:0 0 86px; }
.calendar-selectors select,.calendar-selectors input { width:100%; height:44px; min-width:0; margin:5px 0 0; padding:8px; border:1px solid #cdd6c9; border-radius:9px; background:#fffef8; color:#344c40; font:16px var(--sans); }
.calendar-selectors select:focus-visible { outline:3px solid #336e9f; outline-offset:2px; }
.calendar-month-heading { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.calendar-month-heading h3 { font:21px var(--serif); }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.calendar-weekdays { margin:4px 0 8px; font:10px var(--mono); color:#6b776a; text-align:center; }
.calendar-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:46px; padding:4px 0; gap:4px; border:1px solid transparent; border-radius:10px; background:transparent; font:15px var(--sans); }
.calendar-day.outside { color:#7f897a; background:#edf0e766; }
.calendar-day[aria-current=date] { border-color:#6e876d; }
.calendar-day[aria-pressed=true] { background:#3f5b48; color:#fffef7; box-shadow:0 3px 8px #38523f25; }
.calendar-day:hover { border-color:#6e876d; }
.calendar-dots { display:flex; gap:3px; height:4px; }
.plan-dot,.record-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#3d7494; }
.record-dot { background:#ac793b; }
.calendar-day[aria-pressed=true] .plan-dot { background:#a5d2ef; }
.calendar-day[aria-pressed=true] .record-dot { background:#ffd18f; }
.calendar-legend { display:flex; gap:15px; align-items:center; margin:14px 0 8px; font-size:10px; color:#667765; }
.calendar-legend > span { display:flex; align-items:center; gap:6px; }
.calendar-today-legend { margin-left:auto; }
.calendar-sync { display:flex; align-items:center; gap:10px; min-height:32px; font-size:11px; color:#667765; }
.calendar-day-section { border-top:1px solid #d8ded1; margin-top:7px; padding-top:18px; }
.calendar-day-section > h3 { font:20px/1.4 var(--serif); }
.calendar-day-actions { display:flex; gap:10px; margin:13px 0 17px; }
.calendar-day-actions button { flex:1; min-height:44px; padding:10px 9px; font-size:12px; margin:0; }
.calendar-day-actions .primary-button { background:#3f5b48; }
.calendar-entry { position:relative; display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; padding:13px 14px; margin:9px 0; border:1px solid #d8e1e5; border-left:3px solid #5982a0; border-radius:9px; background:#f1f6f8; }
.calendar-entry.record { background:#fbf4e7; border-color:#e4d6be; border-left-color:#ac793b; }
.calendar-entry-kind { font:9px var(--mono); letter-spacing:1px; color:#607789; }
.calendar-entry.record .calendar-entry-kind { color:#936b36; }
.calendar-entry strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.calendar-entry-time { font-size:11px; color:#627365; }
.calendar-edit-hint { align-self:flex-end; font-size:10px; color:#57736c; }
.calendar-empty { font-size:13px; line-height:1.7; color:#667765; padding:9px 0 15px; }
.plan-fields { border:0; margin:0; padding:0; min-width:0; }
.sheet select { width:100%; min-height:44px; padding:10px; border:1px solid #c7d4d9; border-radius:8px; background:#fff; color:var(--ink); font:16px var(--sans); }
.sheet select:focus-visible { outline:3px solid #336e9f; outline-offset:2px; }
.plan-check { display:flex; gap:10px; align-items:center; min-height:44px; }
.plan-check input,.weekday-options input { width:18px; height:18px; margin:0; accent-color:#3f5b48; }
#plan-weekdays { padding:12px 0; border:0; margin:12px 0 0; }
#plan-weekdays legend { font-size:13px; }
.weekday-options { display:flex; flex-wrap:wrap; gap:5px; }
.weekday-options label { display:flex; align-items:center; gap:5px; margin:0; min-height:44px; padding:7px; border:1px solid #d3dfd3; border-radius:8px; font-size:12px; }
.schedule-preview { padding:15px; margin:15px 0; border:1px solid #cbd9c8; border-radius:10px; background:#f4f7ec; font-size:13px; line-height:1.65; }
.schedule-preview ul { padding-left:18px; }.schedule-preview p { color:#596d55; font-size:12px; }
.timeline-all-day { height:48px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding:5px 18px; background:#f2f5eb; }
.timeline-all-day > span { font:9px var(--mono); flex-shrink:0; color:#607057; }
#all-day-items { display:flex; gap:7px; overflow-x:auto; }
.all-day-chip { border:1px solid #bacbb5; border-radius:7px; background:#fafcf7; font-size:12px; padding:8px 12px; min-height:34px; white-space:nowrap; }
#timeline-all-day:not([hidden]) + .timeline-scroll { height:calc(100dvh - var(--header-height) - var(--legend-height) - 48px); }
@media(min-width:600px) { .calendar-sheet { padding:28px 35px; } .calendar-day { min-height:57px; } }
@media(max-width:350px) { .calendar-preview { padding:14px; gap:10px; } .calendar-mini-grid { width:116px; gap:1px; } .calendar-sheet { padding-inline:12px; } .calendar-toolbar,.calendar-selectors { gap:6px; } }
/* A quiet service window, accessible even while the Room light is dimmed. */
.ai-entry { width:100%; display:flex; align-items:center; gap:14px; margin:14px 0 22px; padding:20px; text-align:left; color:#334d3f; border:1px solid #c9d7c9; border-radius:14px; background:linear-gradient(120deg,#f4f7ed,#e9f0e8); }
.ai-entry > span:nth-child(2) { flex:1; display:grid; gap:7px; }
.ai-entry small { font:10px var(--mono); letter-spacing:1px; }
.ai-entry strong { font:26px var(--serif); }
.ai-entry span span { font-size:12px; line-height:1.5; }
.ai-entry-mark { font-size:32px; }
.ai-intro { color:#597064; line-height:1.6; }
.ai-sheet textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; min-height:130px; padding:14px; border:1px solid #bdcbd0; border-radius:8px; background:#fff; color:inherit; font:16px/1.6 var(--sans); }
.ai-response { background:#eff4ec; border:1px solid #ccd9c9; padding:18px; border-radius:12px; margin:18px 0; overflow-wrap:anywhere; }
.ai-response h3 { margin:0 0 12px; font:24px var(--serif); }
.ai-response p,.ai-response li { line-height:1.6; }
.ai-response ul { padding-left:20px; }
#ai-status { font-size:13px; line-height:1.6; color:#597064; }
#ai-error { overflow-wrap:anywhere; }
.repair-list { max-height:260px; overflow:auto; padding-left:20px; font-size:13px; line-height:1.6; }
.repair-list li { margin-bottom:12px; }
#repair-message { overflow-wrap:anywhere; line-height:1.6; }
.sheet-actions.with-repair { flex-wrap:wrap; }
.sheet-actions > .series-repair-launch { flex-basis:100%; }