/* Days owns these tokens and selectors; the surrounding application keeps its styles. */
:root {
  --days-page:var(--app-page-background); --days-surface:var(--app-surface-background); --days-ink:#1f2412;
  --days-secondary:#4a5138; --days-muted:#6b7159; --days-accent:#56680c;
  --days-me:#7d8b3c; --days-ai:#4283b5;
  --days-line:rgba(31,36,18,.16); --days-soft:rgba(31,36,18,.06);
  --days-dark:#1d1f19; --days-light:#f2f3ec; --days-on-dark:#a9ad9c;
  --days-focus:#b9d36a; --days-hour:56px; --days-motion:180ms;
  --days-serif:Newsreader,Georgia,serif; --days-body:16px; --days-small:13px;
  --days-heading:28px; --days-space:8px; --days-radius:14px;
  --days-summary-size:18px; --days-summary-leading:1.6; --days-summary-space:24px; --days-summary-width:70ch;
  --days-calendar-cell:36px; --days-calendar-pad:16px; --days-calendar-gap:8px; --days-calendar-dot:4px;
  --days-calendar-shadow:0 16px 40px rgba(31,36,18,.16); --days-calendar-layer:32;
}
.p21-days,.p21-days-layer,.p21-days-toast-layer { box-sizing:border-box; color:var(--days-ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif; font-size:var(--days-body); line-height:1.55; -webkit-font-smoothing:antialiased; }
.p21-days *,.p21-days-layer *,.p21-days-toast-layer * { box-sizing:border-box; }
.p21-days { min-height:100%; background:var(--days-page); }
.days-inner { max-width:860px; margin:0 auto; padding:clamp(24px,5vh,44px) clamp(18px,4vw,40px) 160px; }
.p21-days h1,.p21-days-layer h2 { margin:0; font-family:var(--days-serif); font-size:var(--days-heading); font-weight:400; letter-spacing:-.3px; line-height:1.2; overflow-wrap:anywhere; }
.days-subtitle { margin:6px 0 0; color:var(--days-muted); font-size:16px; }
.days-summary { margin:var(--days-summary-space) 0 0; max-width:var(--days-summary-width); color:var(--days-ink); font-family:var(--days-serif); font-size:var(--days-summary-size); font-weight:400; line-height:var(--days-summary-leading); overflow-wrap:anywhere; text-wrap:pretty; }
.p21-days button,.p21-days-layer button { appearance:none; -webkit-appearance:none; font-family:inherit; font-size:var(--days-small); font-weight:400; line-height:1.3; cursor:pointer; color:var(--days-ink); border:0; padding:0; background:transparent; }
.p21-days button:disabled,.p21-days-layer button:disabled { cursor:default; opacity:.4; }
.p21-days .days-preview-record:disabled { opacity:1; }
.p21-days button:focus-visible,.p21-days-layer button:focus-visible,.p21-days [role=slider]:focus-visible,.days-week-scroll:focus-visible { outline:2px solid var(--days-accent); outline-offset:4px; }
.days-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:22px; }
.days-filters { display:flex; gap:6px; }
.days-filter,.p21-days .days-date { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:32px; padding:6px 14px; border:1px solid var(--days-line); border-radius:999px; white-space:nowrap; }
.p21-days .days-filter { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:6px 14px; border:1px solid var(--days-line); border-radius:999px; }
.p21-days .days-filter[aria-pressed=true] { color:var(--days-page); background:var(--days-ink); border-color:var(--days-ink); }
.days-filter-dot { display:block; width:7px; height:7px; flex:none; border-radius:50%; }
.days-toolbar-space { flex:1; }
.days-modes { display:inline-flex; padding:3px; border-radius:999px; background:var(--days-soft); }
.p21-days .days-mode { display:block; min-height:28px; padding:4px 16px; border-radius:999px; color:var(--days-muted); }
.p21-days .days-mode[aria-pressed=true] { color:var(--days-ink); background:var(--days-surface); box-shadow:0 1px 2px rgba(20,30,5,.12); }
.days-dates { display:flex; align-items:center; gap:2px; }
.days-date-picker { position:relative; flex:none; }
.days-calendar { position:absolute; top:calc(100% + var(--days-calendar-gap)); right:0; z-index:var(--days-calendar-layer); width:calc(7 * var(--days-calendar-cell) + 2 * var(--days-calendar-pad) + 2px); max-width:calc(100vw - 2 * var(--days-calendar-pad)); padding:var(--days-calendar-pad); border:1px solid var(--days-line); border-radius:var(--days-radius); background:var(--days-surface); color:var(--days-ink); box-shadow:var(--days-calendar-shadow); }
.days-calendar-month { font-size:var(--days-body); font-weight:500; line-height:1.5; }
.days-calendar-weekdays,.days-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.days-calendar-weekdays { margin-top:var(--days-calendar-gap); color:var(--days-muted); font-size:var(--days-small); line-height:1.5; }
.days-calendar-weekdays > span { display:block; }
.days-calendar-grid { margin-top:var(--days-calendar-gap); }
.p21-days .days-calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--days-calendar-dot); min-width:0; min-height:var(--days-calendar-cell); border-radius:var(--days-space); font-size:var(--days-body); line-height:1; font-variant-numeric:tabular-nums; }
.days-calendar-day > span { display:block; }
.days-calendar-dot { display:block; flex:none; width:var(--days-calendar-dot); height:var(--days-calendar-dot); border-radius:50%; background:transparent; }
.days-calendar-day.has-records .days-calendar-dot,.days-calendar-legend .days-calendar-dot { background:var(--days-accent); }
.p21-days .days-calendar-day[aria-pressed=true] { color:var(--days-surface); background:var(--days-ink); }
.days-calendar-day.has-records[aria-pressed=true] .days-calendar-dot { background:currentColor; }
.p21-days .days-calendar-day:focus-visible { outline-offset:-2px; }
.days-calendar-legend { display:flex; align-items:center; gap:var(--days-calendar-gap); margin-top:var(--days-calendar-gap); font-size:var(--days-small); line-height:1.5; color:var(--days-muted); }
.p21-days .days-arrow,.p21-days-layer .days-close { display:flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:50%; color:var(--days-secondary); }
.days-icon { display:block; width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.days-player { margin-top:20px; padding:16px; border-radius:22px; color:var(--days-light); background:var(--days-dark); box-shadow:0 24px 50px -28px rgba(20,25,5,.75); }
.days-preview { display:grid; grid-template-rows:auto auto minmax(64px,1fr) auto; min-height:280px; aspect-ratio:2; max-height:380px; padding:16px 20px; border-radius:var(--days-radius); background:#eceee6; color:var(--days-ink); }
.days-window-dots { display:flex; gap:6px; }
.days-window-dots span { display:block; width:9px; height:9px; border-radius:50%; }
.days-preview-body { display:flex; align-items:flex-start; gap:16px; padding-top:10px; min-width:0; }
.p21-days .days-preview-record { display:grid; gap:8px; flex:1; min-width:0; text-align:left; border-radius:4px; }
.days-preview-app { display:block; font-size:13px; color:var(--days-muted); }
.days-preview-title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-family:var(--days-serif); font-size:28px; font-weight:400; line-height:1.25; text-wrap:pretty; }
.days-preview-bottom { display:flex; align-items:center; justify-content:center; gap:16px; }
.p21-days .days-play { display:flex; align-items:center; justify-content:center; flex:none; width:64px; height:64px; border-radius:50%; color:white; background:rgba(29,31,25,.85); box-shadow:0 10px 24px -8px rgba(0,0,0,.5); }
.days-play .days-icon { width:24px; height:24px; fill:currentColor; stroke:none; }
.days-time { display:block; justify-self:end; padding:4px 10px; border-radius:8px; background:var(--days-dark); color:white; font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.days-player-caption { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:14px; }
.days-player-caption strong { font-size:16px; font-weight:400; color:#fff; }
.days-player-caption small { font-size:13px; color:var(--days-on-dark); }
.days-scrubber { position:relative; height:40px; margin-top:12px; border-radius:10px; background:rgba(255,255,255,.07); cursor:ew-resize; touch-action:none; }
.p21-days .days-scrubber:focus-visible { outline-color:var(--days-focus); }
.days-recorded-band { position:absolute; top:0; bottom:0; border-radius:10px; background:rgba(255,255,255,.06); pointer-events:none; }
.days-activity-band { position:absolute; top:9px; height:16px; min-width:4px; border-radius:4px; background:var(--days-me); pointer-events:none; }
.days-ai-band { position:absolute; bottom:6px; height:3px; border-radius:2px; background:var(--days-ai); pointer-events:none; }
.days-playhead { position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:1px; background:white; pointer-events:none; }
.days-playhead::before { content:""; display:block; position:absolute; top:-5px; left:-5px; width:12px; height:12px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.days-hours { display:flex; justify-content:space-between; margin-top:8px; color:var(--days-on-dark); font-size:13px; font-variant-numeric:tabular-nums; }
.days-empty { margin:24px 0 0; color:var(--days-muted); font-size:16px; }
.days-week-stats { display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:20px; padding:16px 20px; border-radius:18px; background:rgba(31,36,18,.035); }
.days-week-stats .od-stat { --od-gap:2px; flex:1 1 116px; }
.days-stat-value { font-family:var(--days-serif); font-size:clamp(24px,2.2vw,28px); line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.days-stat-label { font-size:13px; color:var(--days-muted); }
.days-week-scroll { overflow-x:auto; margin-top:18px; padding:4px 2px 8px; overscroll-behavior-x:contain; }
.days-week-grid { min-width:820px; }
.days-week-head,.days-week-body { display:grid; grid-template-columns:44px repeat(7,minmax(0,1fr)); gap:6px; }
.days-week-body { margin-top:8px; }
.p21-days .days-day-head { --od-gap:2px; justify-items:center; padding:6px; min-width:0; border-radius:10px; }
.days-day-name { color:var(--days-muted); font-size:13px; }
.days-day-number { display:flex!important; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-family:var(--days-serif); font-size:16px; font-variant-numeric:tabular-nums; }
.days-day-head.is-today .days-day-number { background:var(--days-accent); color:white; }
.days-day-count { min-height:17px; color:var(--days-muted); font-size:13px; white-space:nowrap; }
.days-week-axis,.days-week-track { display:grid; grid-template-rows:repeat(960,calc(var(--days-hour) / 60)); height:calc(16 * var(--days-hour)); }
.days-week-axis { grid-template-columns:1fr; color:var(--days-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.days-week-hour { justify-self:end; margin-right:6px; align-self:start; }
.days-week-track { grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:0; min-width:0; border-radius:12px; background:rgba(31,36,18,.03); }
.days-week-track.is-today { background:rgba(86,104,12,.05); }
.days-week-track.is-future { opacity:.45; }
.days-week-band { grid-column:1 / -1; background:rgba(31,36,18,.025); pointer-events:none; }
.p21-days .days-week-event { position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:1px; min-width:0; margin:0 3px 2px; padding:4px 6px 4px 9px; border-radius:8px; text-align:left; background:var(--event-bg); color:var(--days-ink); }
.days-week-event::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--event-bar); border-radius:8px 0 0 8px; }
.days-week-event-title { display:-webkit-box; -webkit-line-clamp:var(--event-lines,2); -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; hyphens:auto; font-size:13px; line-height:1.3; }
.days-week-event.has-agent .days-week-event-title { padding-right:14px; }
.days-event-agent { position:absolute; top:4px; right:4px; width:14px; height:auto; aspect-ratio:1; border-radius:4px; }
.days-week-event-time { display:block; font-size:13px; color:var(--days-muted); line-height:1.3; white-space:nowrap; }
.days-week-now { position:relative; grid-column:1 / -1; height:2px; z-index:2; background:var(--days-accent); pointer-events:none; }
.days-week-now::before { content:""; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--days-accent); }
.days-week-quiet { grid-column:1 / -1; justify-self:center; align-self:start; color:var(--days-muted); font-size:13px; font-style:italic; }
.p21-days-layer { position:absolute; inset:0; z-index:44; display:flex; justify-content:flex-end; padding:12px; }
.p21-days-layer .days-scrim { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:rgba(20,26,6,.16); cursor:default; }
.days-drawer { position:relative; z-index:1; width:min(560px,100%); height:100%; overflow-y:auto; overscroll-behavior:contain; padding:16px 28px 28px; border-radius:20px; background:var(--days-surface); box-shadow:0 0 0 1px rgba(31,36,18,.08),0 30px 60px -20px rgba(20,30,5,.45); animation:days-enter var(--days-motion) ease-out both; }
.days-drawer-top { display:flex; justify-content:flex-end; }
.days-detail-date { margin-top:0; color:var(--days-muted); font-size:13px; }
.p21-days-layer .days-detail-title { margin-top:6px; }
.days-detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.days-detail-tag { display:block; padding:6px 14px; border:1px solid var(--days-line); border-radius:999px; font-size:13px; color:var(--days-secondary); overflow-wrap:anywhere; }
.days-detail-tag.is-progress { color:#4f5d12; background:#e9f0c7; border-color:transparent; }
.days-made-title { margin:24px 0 0; font-size:16px; font-weight:600; }
.days-made-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.days-made-row { display:flex; align-items:flex-start; gap:12px; color:#2b3120; font-size:16px; line-height:1.5; }
.days-made-time { display:block; flex:none; width:44px; padding-top:2px; font-size:13px; color:var(--days-muted); white-space:nowrap; }
.days-made-copy { display:block; min-width:0; overflow-wrap:anywhere; }
.days-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.p21-days-layer .days-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 14px; border:1px solid var(--days-line); border-radius:999px; color:var(--days-secondary); white-space:nowrap; }
.p21-days-layer .days-action.primary { padding-inline:16px; border-color:var(--days-accent); color:white; background:var(--days-accent); }
.p21-days-layer .days-report { display:block; margin-top:16px; padding:6px 0; color:var(--days-muted); text-align:left; }
.days-confirm { margin-top:24px; padding:16px; border:1px solid var(--days-line); border-radius:12px; }
.days-confirm p { margin:0 0 12px; font-size:16px; }
.days-confirm-actions { display:flex; flex-wrap:wrap; gap:8px; }
.p21-days-toast-layer { position:absolute; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center; padding:24px 24px 112px; pointer-events:none; }
.days-toast { max-width:100%; margin:0; padding:10px 16px; border-radius:10px; color:var(--days-light); background:var(--days-ink); font-size:13px; line-height:1.5; overflow-wrap:anywhere; box-shadow:0 12px 30px rgba(15,15,15,.2); }
.days-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes days-enter { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@media (hover:hover) {
  .p21-days .days-calendar-day:not(:disabled):not([aria-pressed=true]):hover { background:var(--days-soft); }
  .p21-days .days-filter:not([aria-pressed=true]):hover,.p21-days .days-mode:not([aria-pressed=true]):hover,.p21-days .days-arrow:not(:disabled):hover,.p21-days .days-date:hover,.p21-days .days-day-head:not(:disabled):hover,.p21-days-layer .days-close:hover { background:var(--days-soft); }
  .p21-days .days-week-event:hover { filter:brightness(.96); }
  .p21-days .days-preview-record:not(:disabled):hover .days-preview-title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
  .p21-days .days-play:hover { background:#14160f; }
  .p21-days-layer .days-action:hover { border-color:rgba(31,36,18,.4); color:var(--days-ink); }
  .p21-days-layer .days-action.primary:hover { color:#fff; background:#47570a; }
  .p21-days-layer .days-report:not(:disabled):hover { color:var(--days-ink); }
}
@media (max-width:1440px) { .days-toolbar-space { flex-basis:0; } }
@media (max-width:1024px) { .days-toolbar-space { display:none; } .days-dates { margin-left:auto; } }
@media (max-width:768px) { .days-toolbar { gap:12px; } .days-dates { margin-left:0; } .days-preview-title { font-size:24px; } .days-week-stats .od-stat { flex-basis:40%; } }
@media (max-width:480px) { .days-inner { padding-inline:18px; } .days-player { padding:12px; border-radius:18px; } .days-preview { padding:12px; min-height:260px; aspect-ratio:auto; } .days-preview-title { font-size:24px; } .days-modes { margin-left:auto; } .days-dates { width:100%; justify-content:space-between; } .p21-days .days-filter,.p21-days .days-mode,.p21-days .days-date,.p21-days .days-arrow,.p21-days-layer .days-close,.p21-days-layer .days-action,.p21-days-layer .days-report { min-height:44px; } .days-filters { gap:8px; } .days-player-caption { display:grid; } .p21-days-layer { padding:8px; } .days-drawer { padding:16px 20px 24px; border-radius:16px; } }
@media (prefers-reduced-motion:reduce) { .days-drawer { animation:none; } }
@media (max-width:767px),(pointer:coarse) { .days-date-picker { --days-calendar-cell:44px; } }
@media (max-width:480px) { .days-calendar { right:50%; transform:translateX(50%); } }
