/* R1.1 Visual Fidelity Lock
   Effective source: v12 Manrope editorial scale + Today task material family + Calendar Day Lens.
   Presentation only: no task/store/scheduling behavior lives here. */

html,body,button,input,textarea,select{
  font-family:var(--font-ui);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body{font-weight:var(--weight-regular);letter-spacing:0}

/* Editorial type hierarchy: 600 is reserved for hierarchy anchors, not every card label. */
.today-title-row h1,.calendar-month-copy h1,.inbox-top h1,.hub-top h1{
  font-weight:var(--weight-semibold);
  letter-spacing:-.045em;
}
.today-date-line,.calendar-kicker,.inbox-kicker,.hub-kicker{font-weight:var(--weight-medium)}
.today-summary,.calendar-summary{font-weight:var(--weight-medium)}
.today-summary strong,.dayboard-caption b,.today-list-head strong,.hub-section-head h2{font-weight:var(--weight-semibold)}
.bottom-dock .dock-item,.bottom-dock .dock-item small{font-size:var(--text-nav);font-weight:var(--weight-medium)}
.task-title-row strong{
  font-size:var(--text-task);
  font-weight:var(--weight-medium);
  letter-spacing:-.025em;
}
.task-meta{font-size:var(--text-meta);font-weight:var(--weight-regular)}
.state-chip{font-weight:var(--weight-medium)}
.today-section-title span,.completed-toggle{font-weight:var(--weight-medium)}
.calendar-lens-row strong{
  font-size:14px;
  font-weight:var(--weight-medium);
  letter-spacing:-.02em;
}
.calendar-lens-row small{font-size:10.5px;font-weight:var(--weight-regular)}
.week-pulse-head strong,.week-insight strong,.day-board-head strong{font-weight:var(--weight-semibold)}
.inbox-row strong,.hub-project-preview b,.hub-manage-card b,.hub-setting-row b,.hub-setting-row strong{font-weight:var(--weight-medium)}
.editor-title-surface input{font-weight:var(--weight-medium)}
.editor-smart-guess>span,.editor-smart-guess>b,.editor-section-title,.editor-advanced summary{font-weight:var(--weight-medium)}
.editor-header h2,.editor-primary{font-weight:var(--weight-semibold)}

/* Base task material: semantic color is accent/icon/glow, not a flat full-card fill. */
.task-surface{
  border:0;
  border-radius:22px 26px 24px 18px;
  background:linear-gradient(135deg,rgba(248,252,255,.98),rgba(255,255,255,.92));
  box-shadow:0 12px 30px rgba(73,99,121,.075),inset 0 1px 0 rgba(255,255,255,.88);
  padding:10px 12px 10px 14px;
}
.task-surface::before{
  width:5px;
  border-radius:inherit;
  background:var(--task-tone);
}
.task-icon{
  color:var(--task-tone);
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 0 0 1px rgba(74,103,124,.06);
}
.task-check{
  background:rgba(255,255,255,.56);
  box-shadow:inset 0 0 0 1px rgba(95,126,147,.08);
  color:#6E8798;
}
.state-current{
  box-shadow:0 22px 54px rgba(64,103,137,.16),inset 0 1px 0 rgba(255,255,255,.88);
}
.state-overdue{box-shadow:0 0 0 1px rgba(255,112,106,.30),0 12px 30px rgba(73,99,121,.06)}
.state-completed{opacity:.5;filter:saturate(.55)}

/* Today v12 material families. Focus is luminous ice-blue even though its semantic registry tone is Citron. */
.task-surface.type-focus{
  border-radius:30px 22px 34px 26px;
  background:radial-gradient(180px 120px at 10% 15%,rgba(255,255,255,.96),transparent 65%),linear-gradient(135deg,#E8F3FF 0%,#F7FBFF 58%,#EDF7FF 100%);
  box-shadow:0 26px 62px rgba(54,89,118,.14),0 6px 18px rgba(54,89,118,.055),inset 0 1px 0 rgba(255,255,255,.82);
}
.task-surface.type-focus::before{width:7px;background:linear-gradient(180deg,#69A5FF,#3378F4)}
.task-surface.type-focus .task-icon{color:#417F79;background:rgba(255,255,255,.48)}
.task-surface.type-focus .task-title-row strong{font-size:var(--text-task-feature)}
.task-surface.type-focus .task-meta{font-size:11.5px;font-weight:var(--weight-medium)}

.task-surface.type-meeting{
  background:linear-gradient(135deg,rgba(255,234,238,.93),rgba(255,249,251,.94) 60%,rgba(248,239,255,.82));
}
.task-surface.type-meeting::before{width:6px;background:linear-gradient(180deg,#FF7C76,#FF9CA7)}
.task-surface.type-meeting .task-icon{color:#FF706A}

.task-surface.type-personal{
  background:linear-gradient(135deg,rgba(225,250,240,.94),rgba(249,253,251,.95));
}
.task-surface.type-personal::before{width:6px;background:linear-gradient(180deg,#4BD39B,#2DBE7D)}
.task-surface.type-personal .task-icon{color:#34C987}

.task-surface.type-admin{
  background:linear-gradient(135deg,rgba(235,245,255,.94),rgba(252,254,255,.96));
}
.task-surface.type-admin::before{width:6px;background:linear-gradient(180deg,#70B7F3,#4F99DD)}
.task-surface.type-admin .task-icon{color:#55C9D8}

.task-surface.type-quick{
  background:linear-gradient(135deg,rgba(235,244,255,.95),rgba(253,254,255,.96));
}
.task-surface.type-quick::before{background:linear-gradient(180deg,#79A8FF,#4F83EE)}
.task-surface.type-quick .task-icon{color:#397CF7}

.task-surface.type-other{
  background:linear-gradient(135deg,rgba(243,246,248,.96),rgba(255,255,255,.95));
}
.task-surface.type-other::before{background:linear-gradient(180deg,#9AA6AD,#75838C)}
.task-surface.type-other .task-icon{color:#6F7F8B}

/* Per-task color override remains honored, without flooding the full card. */
.task-surface.has-custom-tone{
  background:linear-gradient(112deg,color-mix(in srgb,var(--task-tone) 9%,white),rgba(255,255,255,.94) 62%,rgba(255,255,255,.90));
}
.task-surface.has-custom-tone::before{background:var(--task-tone)}
.task-surface.has-custom-tone .task-icon{color:var(--task-tone)}

/* Travel / Break retain exact time geometry but shed card mass, matching v12 ribbons. */
.task-surface.role-ribbon{
  height:min(36px,100%);
  min-height:0;
  border:0;
  border-radius:16px;
  padding:0 12px;
  box-shadow:none;
  gap:8px;
}
.task-surface.role-ribbon::before{
  position:static;
  width:25px;
  height:0;
  border-radius:0;
  border-top:2px dashed currentColor;
  background:transparent;
  opacity:.48;
  flex:0 0 25px;
}
.task-surface.role-ribbon .task-icon{width:22px;height:22px;flex-basis:22px;background:transparent;box-shadow:none}
.task-surface.role-ribbon .task-copy{display:flex;align-items:center;gap:5px}
.task-surface.role-ribbon .task-title-row strong{font-size:10.5px;font-weight:var(--weight-medium)}
.task-surface.role-ribbon .task-meta{font-size:10.5px;margin:0;font-weight:var(--weight-regular)}
.task-surface.role-ribbon .state-chip{display:none}
.task-surface.role-ribbon .task-check{width:36px;height:36px;flex-basis:36px;background:transparent;box-shadow:none}
.task-surface.role-ribbon.type-travel{
  color:#A66A13;
  background:linear-gradient(90deg,rgba(255,236,197,.74),rgba(255,249,235,.54));
}
.task-surface.role-ribbon.type-travel .task-icon{color:#C77D18}
.task-surface.role-ribbon.type-break{
  color:#248A5E;
  background:linear-gradient(90deg,rgba(223,248,238,.68),rgba(247,253,250,.42));
}
.task-surface.role-ribbon.type-break .task-icon{color:#2FBE7D}

/* Timeline composition: preserve temporal span; vary only visual mass/inset. */
.timeline-task-visual.type-focus{left:10%;right:0}
.timeline-task-visual.type-meeting{left:2%;right:17%}
.timeline-task-visual.type-personal{left:18%;right:4%}
.timeline-task-visual.type-admin{left:7%;right:23%}
.timeline-task-visual.type-quick{left:5%;right:7%}
.timeline-task-visual.type-other{left:7%;right:10%}
.timeline-task-visual.type-travel,.timeline-task-visual.type-break{left:8%;right:5%}
.timeline-task-visual.type-focus .task-surface{height:100%;min-height:76px}
.timeline-task-visual.role-standard .task-surface{height:min(100%,76px)}

/* List/untimed cards stay calmer than timeline hero materials. */
.today-list .task-surface,.today-untimed .task-surface,.completed-list .task-surface{
  border-radius:var(--radius-md);
  box-shadow:0 8px 22px rgba(73,99,121,.045),inset 0 1px 0 rgba(255,255,255,.78);
}
.today-list .task-surface.type-focus,.today-untimed .task-surface.type-focus,.completed-list .task-surface.type-focus{
  background:linear-gradient(90deg,rgba(234,244,255,.94),rgba(255,255,255,.91));
}
.today-list .task-surface.type-focus .task-title-row strong,.today-untimed .task-surface.type-focus .task-title-row strong,.completed-list .task-surface.type-focus .task-title-row strong{font-size:var(--text-task)}

/* Calendar Day Lens: ice-white rows with a thin semantic edge and semantic icon. */
.calendar-day-lens{
  background:radial-gradient(180px 120px at 92% 0,rgba(57,124,247,.045),transparent 72%),rgba(255,255,255,.88);
  box-shadow:0 18px 46px rgba(54,86,108,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
.calendar-lens-row{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:var(--radius-md);
  background:linear-gradient(100deg,color-mix(in srgb,var(--task-tone) 4%,rgba(255,255,255,.96)),rgba(255,255,255,.90) 58%,rgba(255,255,255,.84));
  box-shadow:0 8px 22px rgba(73,99,121,.045),inset 0 0 0 1px rgba(82,116,140,.055);
  padding-left:14px;
}
.calendar-lens-row::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:var(--task-tone);
}
.calendar-event-icon{
  color:var(--task-tone);
  background:color-mix(in srgb,var(--task-tone) 8%,rgba(255,255,255,.92));
  box-shadow:none;
}
.lens-chevron{color:#8DA0AF}

/* Calendar day cards follow the same rule: semantic edge, restrained surface fill. */
.day-event{
  background:linear-gradient(110deg,color-mix(in srgb,var(--task-tone) 6%,#fff),rgba(255,255,255,.92));
  box-shadow:0 10px 24px color-mix(in srgb,var(--task-tone) 6%,transparent);
}
.day-event::before{width:4px;background:var(--task-tone)}
.day-event b{font-weight:var(--weight-medium)}
.day-event span{font-weight:var(--weight-regular)}

/* Dark: same hierarchy, near-black material; semantic color remains local. */
:root[data-theme="dark"] .task-surface{
  background:linear-gradient(135deg,#191E1C,#151A18 72%);
  box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.025);
}
:root[data-theme="dark"] .task-surface.type-focus{
  background:radial-gradient(180px 130px at 8% 12%,rgba(232,229,138,.08),transparent 66%),linear-gradient(135deg,#1B2422,#151A18 72%);
}
:root[data-theme="dark"] .task-surface.type-focus::before{background:linear-gradient(180deg,#E8E58A,#A6A45F)}
:root[data-theme="dark"] .task-surface.type-focus .task-icon{color:#E8E58A;background:rgba(255,255,255,.035)}
:root[data-theme="dark"] .task-surface.type-meeting{background:linear-gradient(135deg,#251A1A,#171A18 72%)}
:root[data-theme="dark"] .task-surface.type-personal{background:linear-gradient(135deg,#17231C,#151A18 72%)}
:root[data-theme="dark"] .task-surface.type-admin,:root[data-theme="dark"] .task-surface.type-quick{background:linear-gradient(135deg,#172024,#151A18 72%)}
:root[data-theme="dark"] .task-surface.type-other{background:linear-gradient(135deg,#1C201E,#151A18 72%)}
:root[data-theme="dark"] .task-surface.has-custom-tone{background:linear-gradient(112deg,color-mix(in srgb,var(--task-tone) 16%,#151A18),#151A18 70%)}
:root[data-theme="dark"] .task-icon,:root[data-theme="dark"] .task-check{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
:root[data-theme="dark"] .task-surface.role-ribbon.type-travel{background:linear-gradient(90deg,rgba(255,173,56,.16),rgba(255,173,56,.045));color:#E8B86C}
:root[data-theme="dark"] .task-surface.role-ribbon.type-break{background:linear-gradient(90deg,rgba(52,201,135,.15),rgba(52,201,135,.035));color:#82D7AC}
:root[data-theme="dark"] .calendar-day-lens{background:linear-gradient(145deg,rgba(24,30,28,.96),rgba(18,23,21,.94))}
:root[data-theme="dark"] .calendar-lens-row{background:linear-gradient(105deg,color-mix(in srgb,var(--task-tone) 8%,#191E1C),#171B19 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
:root[data-theme="dark"] .calendar-event-icon{background:rgba(255,255,255,.035)}
:root[data-theme="dark"] .day-event{background:linear-gradient(110deg,color-mix(in srgb,var(--task-tone) 10%,#191E1C),#171B19 74%)}

@media(max-width:360px){
  :root{--text-task:13.5px;--text-task-feature:17px;--text-meta:10px;--text-nav:10px}
  .timeline-task-visual.type-focus{left:5%;right:0}
  .timeline-task-visual.type-meeting{left:0;right:9%}
  .timeline-task-visual.type-personal{left:12%;right:2%}
}

/* R1.2 Type Color Fidelity
   v12 contract: every type tile carries its semantic tone even when idle;
   selection increases tone contrast instead of being the only colored state. */
.type-option{
  background:linear-gradient(145deg,color-mix(in srgb,var(--task-tone) 12%,white),rgba(255,255,255,.88));
  border-color:color-mix(in srgb,var(--task-tone) 12%,var(--line));
  color:color-mix(in srgb,var(--task-tone) 76%,#31444D);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--task-tone) 7%,transparent);
}
.type-option-icon{
  color:color-mix(in srgb,var(--task-tone) 88%,#31444D);
  background:color-mix(in srgb,var(--task-tone) 15%,rgba(255,255,255,.94));
}
.type-option.is-selected{
  background:linear-gradient(145deg,color-mix(in srgb,var(--task-tone) 24%,white),color-mix(in srgb,var(--task-tone) 12%,white));
  border-color:color-mix(in srgb,var(--task-tone) 58%,var(--line));
  color:color-mix(in srgb,var(--task-tone) 88%,#20313A);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--task-tone) 38%,transparent),0 9px 22px color-mix(in srgb,var(--task-tone) 12%,transparent);
}
:root[data-theme="dark"] .type-option{
  background:linear-gradient(145deg,color-mix(in srgb,var(--task-tone) 12%,#191E1C),#171B19);
  border-color:color-mix(in srgb,var(--task-tone) 15%,var(--line));
  color:#C1C7C0;
}
:root[data-theme="dark"] .type-option-icon{color:color-mix(in srgb,var(--task-tone) 76%,#F3F2EB);background:color-mix(in srgb,var(--task-tone) 14%,#1B211E)}
:root[data-theme="dark"] .type-option.is-selected{
  background:linear-gradient(145deg,color-mix(in srgb,var(--task-tone) 30%,#171B19),color-mix(in srgb,var(--task-tone) 18%,#171B19));
  color:#F3F2EB;
  border-color:color-mix(in srgb,var(--task-tone) 55%,var(--line));
}

/* Task title readability: long titles wrap instead of ellipsizing.
   Temporal geometry remains owned by the task slot; compact cards trade metadata for title space. */
.task-title-row{display:block;min-width:0}
.task-title-row strong{
  display:block;
  min-width:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.18;
}
.task-detail-row{display:flex;align-items:center;gap:7px;min-width:0;margin-top:3px}
.task-detail-row .task-meta{min-width:0;flex:1;margin-top:0}
.task-detail-row .state-chip{flex:0 0 auto}
.task-surface.title-long .task-title-row strong{font-size:calc(var(--text-task) - .75px);line-height:1.16}
.task-surface.title-xlong .task-title-row strong{font-size:calc(var(--text-task) - 1.5px);line-height:1.12}
.task-surface.type-focus.title-long .task-title-row strong{font-size:calc(var(--text-task-feature) - 1.5px)}
.task-surface.type-focus.title-xlong .task-title-row strong{font-size:calc(var(--text-task-feature) - 3px);line-height:1.1}
.task-surface.title-xlong .task-detail-row .task-meta{display:none}
.task-surface.is-compact{padding:4px 8px 4px 10px;gap:7px}
.task-surface.is-compact .task-title-row strong{font-size:13px;line-height:1.08}
.task-surface.is-compact.title-long .task-title-row strong{font-size:12.5px}
.task-surface.is-compact.title-xlong .task-title-row strong{font-size:11.5px;line-height:1.04}
.task-surface.is-compact .task-detail-row{display:none}
.task-surface.is-compact .task-check{width:36px;height:36px;flex-basis:36px;border-radius:12px}
.task-surface.role-ribbon .task-title-row strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.05}
.task-surface.role-ribbon.title-long .task-meta,.task-surface.role-ribbon.title-xlong .task-meta{display:none}
.task-surface.role-ribbon.title-xlong .task-title-row strong{font-size:9.5px;line-height:1.02}

/* Non-temporal lists may grow vertically, so never truncate task titles there. */
.inbox-row{height:auto}
.inbox-row-copy strong{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.22;
}
.calendar-lens-row{height:auto;padding-top:8px;padding-bottom:8px}
.calendar-lens-row strong{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.2;
}

/* Calendar Day preserves event time geometry while using the vertical room already available. */
.calendar-event-content strong{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.12;
}
.calendar-event.is-compact .calendar-event-content small{display:none}
.calendar-event.is-compact .calendar-event-content strong{font-size:11.5px;line-height:1.08}
.calendar-event.is-micro .calendar-event-content strong{font-size:9.5px;line-height:1.02}


/* Timeline glanceability: start time belongs to the rail; card owns duration only. */
.task-duration-badge{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--task-tone) 7%,rgba(255,255,255,.90));
  color:color-mix(in srgb,var(--task-tone) 50%,#607583);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--task-tone) 12%,rgba(104,132,151,.12));
  font-size:9px;line-height:1;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;
}
.task-surface.is-compact.is-timeline .task-icon{display:none}
.task-surface.is-compact.is-timeline .task-duration-badge{width:28px;height:28px;flex-basis:28px;font-size:8px}
.task-surface.is-compact.is-timeline .task-detail-row{display:none}
.task-surface.role-ribbon.is-timeline .task-duration-badge{width:26px;height:26px;flex-basis:26px;font-size:8px;background:rgba(255,255,255,.54)}
:root[data-theme="dark"] .task-duration-badge{background:color-mix(in srgb,var(--task-tone) 8%,#171B19);color:color-mix(in srgb,var(--task-tone) 52%,#B9C0BB);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

.task-start-label{
  position:absolute;right:4px;z-index:3;transform:translateY(-50%);
  min-width:43px;height:20px;padding:0 5px;border-radius:8px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  color:#5D7487;box-shadow:0 2px 8px rgba(51,78,98,.055),inset 0 0 0 1px rgba(111,143,164,.10);
  font-size:9.5px;line-height:1;font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  pointer-events:none;
}
.task-start-label::after{content:"";position:absolute;right:-5px;top:50%;width:5px;border-top:1px solid color-mix(in srgb,var(--primary) 28%,transparent)}
:root[data-theme="dark"] .task-start-label{background:color-mix(in srgb,var(--surface) 95%,transparent);color:#A8B3BA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.task-surface.role-ribbon.is-compact.is-timeline .task-duration-badge{width:20px;height:20px;flex-basis:20px;font-size:7.5px}