/* The preview follows the Mac app's split-view structure and calm, local-first palette. */
:root { color: #202329; background: #fbfbfa; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
body { min-width: 0; }
button:focus-visible, input:focus-visible { outline: 2px solid #397699; outline-offset: 2px; }
.app { grid-template-columns: 190px minmax(0, 1fr); height: 640px; min-height: 0; }
.sidebar { gap: 13px; padding: 16px 11px 14px; background: #f2f2ef; border-color: #e1e2df; }
.brand { padding: 0 8px 6px; font-size: 16px; }
.brand strong { color: #202329; }
.brand img { border-radius: 8px; }
.sidebar nav button { min-height: 35px; color: #565e65; font-size: 12px; font-weight: 560; }
.sidebar nav button .ui-icon { width: 17px; height: 17px; color: #74818a; }
.sidebar nav button:hover { background: #e9eae7; }
.sidebar nav button[aria-current=page] { background: #e1e7e9; color: #163f59; }
.sidebar nav button[aria-current=page] .ui-icon { color: #397699; }
.nav-label { margin-top: 13px; color: #969a9c; }
.sidebar-bottom { align-items: center; padding: 11px 8px 0; border-top: 1px solid #e2e4e1; color: #636e72; line-height: 1.35; }
.sidebar-bottom .ui-icon { color: #397699; }
.workspace { min-width: 0; overflow-y: auto; background: #fcfcfb; }
.titlebar { position: sticky; top: 0; z-index: 4; min-height: 38px; background: #fbfbfaed; backdrop-filter: blur(18px); border-color: #e7e8e5; }
.titlebar-label { color: #767b80; }
.titlebar-end { display: flex; align-items: center; gap: 7px; color: #7d8586; }
.titlebar-end i { width: 5px; height: 5px; border-radius: 50%; background: #74b0b0; }
.traffic i { background: #d5d8d6 !important; }
.screen { min-height: 600px; padding: 29px 34px 34px; }
.overline, .eyebrow { color: #4b7e9b; }
.page-heading { align-items: end; margin-bottom: 22px; }
.page-heading h1 { margin: 7px 0 2px; color: #202329; font-size: 29px; font-weight: 640; }
.page-heading p { margin-top: 5px; color: #6e7378; font-size: 12px; }
.local-tag { color: #697276; }
.date-controls { display: flex; gap: 5px; align-items: center; }
.date-controls button { height: 29px; min-width: 29px; padding: 0 9px; border: 1px solid #e2e5e4; border-radius: 6px; background: #fff; color: #545d65; font-size: 12px; }
.date-controls button:first-child, .date-controls button:nth-child(2) { font-size: 20px; line-height: 1; }
.date-controls button:hover { border-color: #aac6d1; background: #f5fafb; }
.date-controls button:disabled { opacity: .42; cursor: default; }
.date-controls .ui-icon { width: 13px; height: 13px; margin-right: 4px; }
.daily-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.daily-main { display: grid; align-content: start; gap: 13px; min-width: 0; }
.daily-aside { min-width: 0; }
.brief-card { padding: 21px 24px 16px; border-color: #d8e3e6; background: #f4f5f8; box-shadow: none; }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-topline strong { font-size: 15px; }
.card-topline > span:last-child { color: #7a8588; font-size: 10px; white-space: nowrap; }
.brief-card p, .brief-card li { color: #434c52; font-size: 12px; line-height: 1.65; }
.brief-card p { margin-top: 13px; }
.brief-card ul { margin-bottom: 4px; }
.brief-card .divider { background: #dbe6e7; }
.daily-section-title { margin-top: 5px; color: #252b30; font-size: 15px; font-weight: 650; }
.moment-panel { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid #e8eae8; border-radius: 0; background: transparent; color: #353c40; text-align: left; font-size: 12px; line-height: 1.55; }
.moment-panel > span:nth-child(2) { flex: 1; }
.moment-panel > span:last-child { color: #8b9fa6; font-size: 20px; }
.moment-panel:hover { color: #2b718f; }
.moment-time { width: 39px; color: #818c90; font-size: 10px; font-variant-numeric: tabular-nums; }
.mini-calendar { position: absolute; z-index: 3; top: 100px; right: 34px; width: 250px; padding: 15px 16px 11px; border: 1px solid #dce4e5; border-radius: 9px; background: #fff; box-shadow: 0 18px 44px #25313924; transition: border-color .18s, box-shadow .18s; }
.mini-calendar.calendar-emphasis { border-color: #6c9fb4; box-shadow: 0 0 0 3px #bddce54a; }
.calendar-title { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.calendar-title strong { color: #30363a; font-size: 11px; }
.calendar-title span { color: #8a9395; font-size: 9px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; gap: 3px; margin-top: 13px; text-align: center; }
.calendar-grid > span { color: #a0a6a6; font-size: 9px; }
.calendar-grid button { position: relative; height: 25px; border: 0; border-radius: 6px; background: transparent; color: #485259; font-size: 11px; }
.calendar-grid button.selected { background: #d9e9ed; color: #225572; font-weight: 700; }
.calendar-grid button.selected::after { position: absolute; bottom: 2px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #4784a0; content: ''; }
.calendar-grid button:hover { background: #edf4f5; }
.daily-empty { max-width: 540px; padding: 36px 5px; }
.daily-empty h2 { margin: 0 0 8px; font-size: 18px; }
.daily-empty p { margin: 0 0 20px; color: #6e797e; font-size: 12px; }
.daily-empty button { padding: 9px 0; border: 0; border-bottom: 1px solid #83a6b6; background: none; color: #397c99; font-size: 11px; font-weight: 650; }
.list-heading { margin: 0 0 9px; }
.record-card { display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: 11px 0; border: 0; border-bottom: 1px solid #e8eae8; border-radius: 0; background: transparent; box-shadow: none; }
.record-card > .ui-icon { color: #6a858c; }
.record-card > span { flex: 1; }
.record-card strong { margin: 0 0 3px; font-size: 12px; }
.record-card b { margin: 0; color: #4d8c71; font-size: 10px; }
.record-card:hover, .library-item:hover, .search-hit:hover { border-color: #a9c5d0; background: #fcfefe; box-shadow: none; }

.import-intro h1 { margin: 0 0 9px; color: #252a2e; font-size: 26px; font-weight: 650; letter-spacing: -.045em; }
.import-intro > p { max-width: 680px; margin: 0; color: #6e767b; font-size: 12px; line-height: 1.65; }
.route-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 12px; color: #65818d; font-size: 10px; }
.route-labels span { display: inline-flex; align-items: center; gap: 5px; }
.route-labels .ui-icon { width: 13px; height: 13px; }
.import-primary { margin-top: 17px; padding: 9px 14px; border: 1px solid #416f9a; border-radius: 6px; background: #4e729b; color: #fff; font-size: 11px; font-weight: 650; }
.import-primary:hover { background: #3c628e; }
.import-section { margin-top: 29px; }
.import-section-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.import-section h2 { margin: 0 0 4px; color: #2b3034; font-size: 16px; font-weight: 640; }
.import-section p { margin: 0; color: #727a80; font-size: 11px; line-height: 1.55; }
.import-section-head > div { min-width: 0; }
.import-section-head > button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #e5e7e7; border-radius: 6px; background: #f5f5f5; color: #536c87; font-size: 11px; }
.import-section-head > button:hover { border-color: #a5becb; background: #edf3f6; }
.import-hint { margin-top: 11px !important; color: #757e84 !important; }
.import-secondary { margin-top: 9px !important; }
.recorder-empty { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 13px 17px; border-radius: 8px; background: #f3f3f2; }
.recorder-empty > .ui-icon { width: 22px; height: 22px; color: #858f94; }
.recorder-empty strong { font-size: 12px; }
.recorder-empty p { margin-top: 2px; }
.recent-activity { margin-top: 25px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ebedeb; }
.activity-row:first-of-type { margin-top: 6px; }
.activity-row > .ui-icon { width: 16px; height: 16px; color: #738b87; }
.activity-row > div { flex: 1; }
.activity-row strong, .activity-row span { display: block; font-size: 11px; }
.activity-row span { margin-top: 2px; color: #828a8e; font-size: 10px; }
.activity-row b { color: #568b69; font-size: 10px; }
.import-status { margin-top: 12px; padding: 9px 11px; border: 1px solid #dce8e9; border-radius: 6px; background: #f4f9fa; color: #52717c; font-size: 10px; line-height: 1.5; }

.weekly-brief { max-width: 720px; }
.weekly-days { max-width: 720px; margin-top: 24px; }
.weekly-days > button { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 11px; padding: 15px 17px; border: 1px solid #e0e5e4; border-radius: 8px; background: #fff; text-align: left; }
.weekly-days > button:hover { border-color: #9ec4d0; }
.weekly-days strong { font-size: 12px; }
.weekly-days span { color: #737b80; font-size: 11px; }
.weekly-days b { margin-left: auto; color: #417d9b; font-size: 10px; white-space: nowrap; }

.recording-screen { padding: 0; }
.recording-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 600px; }
.recording-list, .chat-history { padding: 14px 10px; border-right: 1px solid #e5e7e5; background: #f8f8f6; }
.recording-list-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 14px; color: #252b2f; font-size: 13px; }
.recording-list-head span { color: #98a1a3; font-size: 10px; }
.list-date { display: block; padding: 11px 8px 7px; color: #929a9e; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.library-item { padding: 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; box-shadow: none; }
.library-item[aria-pressed=true] { border-color: #d4e2e5; background: #e9f2f4; }
.library-item strong { margin: 0 0 5px; color: #2c3438; font-size: 12px; }
.library-item small { font-size: 10px; }
.record-detail { display: flex; flex-direction: column; min-height: 600px; padding: 28px 32px 17px; border: 0; border-radius: 0; box-shadow: none; }
.record-detail h2 { margin: 7px 0 4px; font-size: 25px; }
.detail-subtitle { margin-bottom: 21px; }
.audio-player { display: flex; align-items: center; gap: 14px; min-height: 46px; margin-top: auto; padding: 0 14px; border-top: 1px solid #e5e8e7; background: #fbfbfa; }
.audio-player .ui-icon { color: #6391a4; }
.player-label { color: #687780; font-size: 10px; }
.player-time { flex: 0 0 auto; margin-left: auto; color: #7a868b; font-size: 10px; }
.detail-tabs { display: flex; gap: 23px; margin: 18px 0 14px; border-bottom: 1px solid #e3e6e5; }
.detail-tabs button { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: #838b8d; font-size: 11px; font-weight: 600; }
.detail-tabs button[aria-pressed=true] { border-color: #4b819f; color: #2e657f; }
.detail-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 5px; }
.processing-boundary { display: block; margin-bottom: 14px; color: #727d81; font-size: 10px; }
.detail-points { margin: 8px 0 18px; padding-left: 18px; color: #505c62; font-size: 11px; line-height: 1.6; }
.detail-points li + li { margin-top: 5px; }
.detail-label { margin-top: 15px; }
.detail-note { margin: 10px 0 20px; }
.record-detail blockquote { margin: 9px 0 0; border-color: #7fa9b9; background: #f5f9fa; }
.detail-source { margin-top: 11px; padding: 0; border: 0; background: none; color: #387998; font-size: 11px; font-weight: 650; }
.transcript-block { font-size: 13px !important; line-height: 1.8 !important; }
.transcript-block { white-space: pre-line; }

.search-field { border-color: #d9e1e1; box-shadow: 0 5px 15px #20323e08; }
.search-field > span { color: #528ca9; }
.search-field > .ui-icon { color: #528ca9; }
.search-field button { padding: 7px 12px; border: 0; border-radius: 5px; background: #eaf3f5; color: #356e89; font-size: 11px; font-weight: 650; }
.search-results { max-width: 760px; }
.search-hit { border-color: #e3e7e6; box-shadow: none; }

.ask-screen { padding: 0; }
.ask-layout { display: grid; grid-template-columns: 194px minmax(0, 1fr); max-width: none; min-height: 600px; }
.chat-history { padding-top: 14px; }
.chat-history > button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: #525c62; text-align: left; font-size: 11px; }
.chat-history > button:hover { background: #ecf2f3; }
.chat-history #new-chat { border: 1px solid #dfe5e4; background: #fff; color: #346d8a; font-weight: 650; }
.chat-history .chat-history-item { background: #e9f2f4; color: #2c4c5f; }
.ask-main { display: flex; flex-direction: column; min-width: 0; }
.ask-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 22px 26px 15px; border-bottom: 1px solid #e5e8e7; }
.ask-header h1 { margin: 5px 0 0; font-size: 25px; }
.model-route { display: inline-flex; align-items: center; gap: 5px; color: #69818b; font-size: 10px; white-space: nowrap; }
.model-route .ui-icon { width: 13px; height: 13px; }
.ask-thread { display: flex; align-items: center; flex: 1; min-height: 0; padding: 24px; border: 0; border-radius: 0; box-shadow: none; }
.ask-empty, .ask-conversation { width: 100%; }
.ask-symbol { background: #eaf4f6; color: #4e8fac; }
.ask-symbol .ui-icon { width: 23px; height: 23px; }
.answer-mark .ui-icon { width: 15px; height: 15px; }
.answer small { display: block; margin-top: 11px; color: #77858b; font-size: 10px; line-height: 1.5; }
.suggestions button { background: #fff; }
.ask-composer { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 0 22px; padding: 0 13px; border: 1px solid #dfe5e4; border-radius: 9px; background: #fff; color: #a0a7a8; font-size: 11px; }
.ask-composer span:last-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e7edef; color: #6f929c; font-size: 15px; }
.ask-route { display: flex; align-items: center; gap: 10px; margin: 11px 24px 0; color: #7b878a; font-size: 10px; }
.ask-route select { max-width: 230px; padding: 5px 25px 5px 7px; border: 1px solid #dfe5e4; border-radius: 6px; background: #fff; color: #3e6579; font: inherit; }
.ask-footer { padding: 10px 24px 16px; }

@media(max-width:900px) {
  .recording-layout { grid-template-columns: 195px minmax(0, 1fr); }
  .record-detail { padding: 25px 23px; }
}
@media(max-width:720px) {
  .app { display: block; height: auto; min-height: 0; }
  .sidebar { padding: 9px 10px 0; }
  .sidebar nav { gap: 2px; }
  .sidebar nav button { min-width: 78px; }
  .workspace { overflow: visible; }
  .screen { min-height: 0; }
  .daily-layout { grid-template-columns: 1fr; }
  .daily-aside { display: block; }
  .date-controls button:last-child { display: none; }
  .recording-layout { grid-template-columns: 1fr; }
  .recording-list { display: flex; align-items: center; gap: 5px; overflow: auto; border-right: 0; border-bottom: 1px solid #e6e9e8; }
  .recording-list-head, .recording-list .list-date { display: none; }
  .library-item { width: auto; min-width: 155px; }
  .record-detail { min-height: 400px; }
  .ask-layout { grid-template-columns: 1fr; }
  .chat-history { display: none; }
  .ask-thread { min-height: 270px; }
}
@media(max-width:480px) {
  .import-section-head { display: block; }
  .import-section-head > button { margin-top: 9px; }
  .mini-calendar { right: 12px; }
}
@media(prefers-reduced-motion:reduce) { .mini-calendar { transition: none; } }
@media(prefers-reduced-transparency:reduce) { .titlebar { background: #fbfbfa; backdrop-filter: none; } }
@media(prefers-contrast:more) { .brief-card, .search-hit, .audio-player, .recorder-empty { border-color: #3d4d56; } }

/* Match the site's graphite and silver shell; connector marks remain in their own colors. */
:root { color: #202833; background: #fcfcfd; }
button:focus-visible, input:focus-visible { outline-color: #566674; }
.sidebar { background: #f4f6f7; border-color: #d9dee3; }
.sidebar nav button[aria-current=page] { background: #e8edf0; color: #202833; }
.sidebar nav button[aria-current=page] .ui-icon,
.sidebar-bottom .ui-icon,
.overline, .eyebrow { color: #566674; }
.workspace { background: #fcfcfd; }
.titlebar { background: #fcfcfded; border-color: #d9dee3; }
.titlebar-end i { background: #8997a3; }
.brief-card { border-color: #d9dee3; background: #f8f9fa; }
.brief-card .divider { background: #d9dee3; }
.mini-calendar.calendar-emphasis { border-color: #8997a3; box-shadow: 0 0 0 3px #cbd3da80; }
.calendar-grid button.selected { background: #e8edf0; color: #202833; }
.calendar-grid button.selected::after { background: #566674; }
.import-primary { border-color: #354653; background: #354653; }
.import-primary:hover { background: #566674; }
.import-status { border-color: #cbd3da; background: #f8f9fa; color: #46535f; }
.record-card b, .activity-row b, .weekly-days b { color: #566674; }
.moment-panel:hover, .daily-empty button { color: #354653; }
.daily-empty button { border-bottom-color: #8997a3; }
.library-item[aria-pressed=true] { border-color: #cbd3da; background: #f1f4f6; }
.search-field > span, .search-field > .ui-icon { color: #566674; }
.search-field button { background: #f1f4f6; color: #354653; }
.chat-history > button:hover, .chat-history .chat-history-item { background: #f1f4f6; color: #354653; }
.chat-history #new-chat { color: #354653; }
.ask-symbol { background: #f1f4f6; color: #566674; }
.ask-route select { color: #354653; }
@media(prefers-reduced-transparency:reduce) { .titlebar { background: #fcfcfd; } }