:root {
  --bg: #fbfaf8;
  --panel: #ffffff;
  --ink: #1b1a18;
  --muted: #6c6862;
  --line: #e4e0d9;
  --accent: #2f5d50;
  --accent-soft: #e8f0ec;
  --agent: #6b4ea8;
  --agent-soft: #efeaf9;
  --warn: #9a5b1f;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  
  --dp-morning: color-mix(in srgb, #5b93b8 7%, transparent);
  --dp-evening: color-mix(in srgb, #c07a34 8%, transparent);
  --dp-night: color-mix(in srgb, #2b3560 10%, transparent);
  --dp-edge: color-mix(in srgb, var(--ink) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
    --bg: #16171a;
    --panel: #1e2024;
    --ink: #ecebe8;
    --muted: #9a968f;
    --line: #2e3138;
    --accent: #7fb8a4;
    --accent-soft: #22302c;
    --agent: #b39ce8;
    --agent-soft: #282338;
    --warn: #d69a5c;

    
    --dp-morning: color-mix(in srgb, #5b93b8 11%, transparent);
    
    --dp-evening: color-mix(in srgb, #c07a34 7%, transparent);
    --dp-night: color-mix(in srgb, #000000 28%, transparent);
    --dp-edge: color-mix(in srgb, var(--ink) 18%, transparent);
  }

}
:root[data-theme="dark"] {
    --bg: #16171a;
    --panel: #1e2024;
    --ink: #ecebe8;
    --muted: #9a968f;
    --line: #2e3138;
    --accent: #7fb8a4;
    --accent-soft: #22302c;
    --agent: #b39ce8;
    --agent-soft: #282338;
    --warn: #d69a5c;

    
    --dp-morning: color-mix(in srgb, #5b93b8 11%, transparent);
    
    --dp-evening: color-mix(in srgb, #c07a34 7%, transparent);
    --dp-night: color-mix(in srgb, #000000 28%, transparent);
    --dp-edge: color-mix(in srgb, var(--ink) 18%, transparent);
  }


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}




.chrome {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
}


html {
  scroll-padding-top: 127px;
}

.chrome-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
}

.wordmark {
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.chrome nav {
  display: flex;
  gap: 4px;
}

.chrome .tabwrap,
.chrome .subtab {
  flex: 0 0 auto;
}


@media (max-width: 760px) {
  .chrome {
    position: static;
  }

  .chrome-row {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 14px;
  }

  
  .tabs,
  .subnav {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .tab,
  .subtab {
    white-space: nowrap;
  }

  .subnav {
    padding: 6px 14px;
  }

  
  .tab,
  .subtab {
    padding: 9px 12px;
    font-size: 15px;
  }
}


.navmenu {
  display: none;
}

@media (max-width: 760px) {
  
  .chrome-row {
    position: relative;
  }

  .navmenu {
    display: block;
    flex: 1;
  }

  
  .chrome .tabs {
    display: none;
  }

  .navmenu-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    font-size: 15px;
    font-weight: 560;
    cursor: pointer;
    
    list-style: none;
  }

  .navmenu-button::-webkit-details-marker {
    display: none;
  }

  .navmenu-caret {
    color: var(--muted);
    font-size: 12px;
  }

  .navmenu[open] .navmenu-caret {
    transform: rotate(180deg);
  }

  
  .navmenu-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 8px;
    right: 8px;
    max-height: calc(100svh - 120px);
    overflow-y: auto;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  }

  .navmenu-group {
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
  }

  .navmenu-group:last-child {
    border-bottom: none;
  }

  .navmenu-section {
    display: block;
    padding: 8px 10px;
    color: var(--ink);
    font-weight: 560;
    font-size: 15px;
    text-decoration: none;
    border-radius: 7px;
  }

  .navmenu-children {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 6px 4px;
  }

  
  .navmenu-child {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
  }

  .navmenu-section.on,
  .navmenu-child.on {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
  }
}


@media (hover: none) {
  .tabwrap:hover .tabmenu,
  .tabwrap:focus-within .tabmenu {
    display: none;
  }
}


.tabwrap {
  position: relative;
}

.tabmenu {
  display: none;
  position: absolute;
  left: 0;
  
  top: 100%;
  padding-top: 6px;
  min-width: 148px;
  z-index: 30;
}

.tabwrap:hover .tabmenu,
.tabwrap:focus-within .tabmenu {
  display: block;
}

.tabmenu .menuitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-width: 0;
}

.tabmenu .menuitem:first-child {
  border-radius: 8px 8px 0 0;
}

.tabmenu .menuitem:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 9%);
}

.tabmenu .menuitem:hover {
  background: var(--bg);
}

.tabmenu .menuitem.on {
  color: var(--accent);
  font-weight: 560;
}


.subnav {
  padding: 0 24px;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.subtab {
  padding: 8px 10px 9px;
  margin-bottom: -1px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
}

.subtab:hover {
  color: var(--ink);
}

.subtab.on {
  color: var(--accent);
  font-weight: 560;
  border-bottom-color: var(--accent);
}

.tab {
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tab:hover {
  background: var(--bg);
  color: var(--ink);
}

.tab.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 560;
}

.badge {
  background: var(--agent);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

main {
  padding: 24px;
  max-width: 1180px;
  margin: 0 auto;
}


main.wide {
  max-width: none;
}


body:has(> main.flush) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

main.flush {
  flex: 1;
  min-height: 0;
  padding: 0;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}


main.flush > #island-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin: 0;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.nav-arrows {
  display: flex;
  gap: 6px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}



.btn {
  font: inherit;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  border-color: var(--muted);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.danger {
  color: #b0392f;
}

.btn.small {
  padding: 4px 10px;
  font-size: 13px;
}



input[type="text"],
input[type="password"],
select,
textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 62px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 5px;
}

.field {
  margin-bottom: 12px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.row > * {
  flex: 1;
  min-width: 140px;
}



.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.notice {
  border-left: 3px solid var(--agent);
  background: var(--agent-soft);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
}

.notice.warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}



.week {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.week-head,
.week-body {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
}

.week-head {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 57px;
  background: var(--panel);
  z-index: 10;
}

.week-head div {
  padding: 9px 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  border-left: 1px solid var(--line);
}

.week-head div:first-child {
  border-left: none;
}

.week-head .num {
  display: block;
  font-size: 17px;
  color: var(--ink);
  font-weight: 560;
  line-height: 1.3;
}

.week-head .today .num {
  color: var(--accent);
}


.week-head .today {
  background: var(--accent-soft);
}

.day-col.today {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.allday-row {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  min-height: 26px;
}

.allday-row > div {
  border-left: 1px solid var(--line);
  padding: 3px;
}

.allday-row > div:first-child {
  border-left: none;
  font-size: 11px;
  color: var(--muted);
  padding: 5px 6px;
  text-align: right;
}

.chip {
  display: block;
  font-size: 11px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 15%, var(--panel));
  color: var(--cal, var(--accent));
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-scroll {
  
  overflow: visible;
  
  padding: 9px 0;
}


.legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid color-mix(in srgb, var(--cal, var(--accent)) 38%, transparent);
  background: color-mix(in srgb, var(--cal, var(--accent)) 20%, var(--panel));
}

.legend .swatch.dotted {
  border-left: 3px dotted var(--muted);
}

.legend .swatch.backup {
  border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--muted) 22%, var(--panel)) 0 3px,
    transparent 3px 6px
  );
}




.cals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}

.cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.cal .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cal, var(--accent));
  
  box-shadow: inset 0 0 0 8px var(--cal, var(--accent));
}

.cal:not(.on) {
  opacity: 0.62;
}

.cal:not(.on) .dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cal, var(--accent));
}

.cal.on {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--cal, var(--accent)) 45%, var(--line));
  background: color-mix(in srgb, var(--cal, var(--accent)) 9%, var(--panel));
}

.cal:hover {
  border-color: var(--cal, var(--accent));
}

.cal.locked {
  cursor: default;
}


.cal-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 11.5px;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cal, var(--accent)) 40%, var(--line));
  color: var(--cal, var(--accent));
  vertical-align: 1px;
}

.cal-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cal, var(--accent));
}




.week-body {
  position: relative;
}

.dayparts {
  position: absolute;
  inset: 0;
  
  pointer-events: none;
}

.dayparts .daypart {
  left: 0;
  right: 0;
}


.dayparts-x {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dayparts-x .daypart {
  top: 0;
  bottom: 0;
}

.daypart {
  position: absolute;
}


.dayparts .daypart {
  border-top: 1px solid var(--dp-edge);
}

.dayparts-x .daypart {
  border-left: 1px solid var(--dp-edge);
}

.daypart.morning {
  background: var(--dp-morning);
}



.daypart.evening {
  background: var(--dp-evening);
}

.daypart.night {
  background: var(--dp-night);
}



#providers section {
  margin: 28px 0;
}

#providers h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.pv-name {
  width: 45%;
}

.pv-star {
  margin-left: 6px;
  color: var(--warn);
}


.pv-notes {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.pv-notes :is(p, ul, ol) {
  margin: 4px 0;
}

.pv-contact {
  text-align: right;
}

.pv-contact .btn {
  margin: 0 0 4px 4px;
}

.pv-status,
.pv-who {
  text-align: right;
  white-space: nowrap;
}


#providers tr.gap .pv-name strong {
  color: var(--warn);
}

#providers .chip.gap {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  color: var(--warn);
}


#providers tr.retired {
  opacity: 0.6;
}

.day-col {
  --rail-w: 6px;
  --gutter: calc(var(--rails, 0) * var(--rail-w));
  position: relative;
  border-left: 1px solid var(--line);
  
  height: var(--grid-height);
}

.hours {
  position: relative;
  height: var(--grid-height);
}

.hours span {
  position: absolute;
  right: 6px;
  font-size: 11px;
  color: var(--muted);
  transform: translateY(-50%);
}

.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  opacity: 0.55;
}


.rails {
  position: absolute;
  inset: 0;
  
  pointer-events: none;
  z-index: 0;
}


.events {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--gutter);
  z-index: 1;
}

.rail {
  position: absolute;
  left: calc(var(--lane, 0) * var(--rail-w));
  right: 0;
  overflow: hidden;
  pointer-events: none;
  text-decoration: none;
}

.rail .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 55%, transparent);
  pointer-events: auto;
}

.rail span {
  position: absolute;
  
  top: calc(var(--label-top, 0%) + 2px + var(--row, 0) * 11px);
  left: 7px;
  max-width: calc(100% - 11px);
  font-size: 9.5px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.rail:hover .bar {
  background: var(--cal, var(--accent));
}

.rail:hover span {
  color: var(--ink);
}


.evt {
  position: absolute;
  
  min-height: 17px;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11.5px;
  line-height: 1.3;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cal, var(--accent)) 38%, transparent);
  background: color-mix(in srgb, var(--cal, var(--accent)) 13%, var(--panel));
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: block;
}



.evt.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}


.evt.free {
  background: color-mix(in srgb, var(--cal, var(--accent)) 11%, var(--panel));
  border: none;
  
  color: color-mix(in srgb, var(--ink) 72%, var(--panel));
}

.evt.free b {
  font-weight: 600;
}


.evt.backup {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--cal, var(--accent)) 10%, var(--panel)) 0 5px,
    transparent 5px 10px
  );
  
  border: 1px dashed
    color-mix(in srgb, var(--cal, var(--accent)) 38%, transparent);
  color: var(--ink);
  opacity: 0.85;
}

.evt .rank {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cal, var(--accent));
  font-weight: 600;
}

.evt.tight .rank {
  display: none;
}

.evt b {
  font-weight: 580;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evt .when {
  color: var(--muted);
  font-size: 10.5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evt .where {
  color: var(--muted);
  font-size: 10.5px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evt:hover {
  filter: brightness(0.97);
  border-color: var(--cal, var(--accent));
}


.evt.tight {
  padding: 1px 5px;
  line-height: 1.15;
}

.evt.tight .when,
.evt.tight .where {
  display: none;
}

.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #c8503f;
  z-index: 5;
}

.now-line::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8503f;
}



table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  font-weight: 560;
  color: var(--muted);
  font-size: 12px;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 12.5px;
}

.key-reveal {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 12px;
  word-break: break-all;
  margin: 10px 0;
  flex: 1 1 auto;
  min-width: 0;
}


.key-line {
  display: flex;
  align-items: center;
  gap: 10px;
}


.revoke {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}



.inbox-filter,
.person-filter {
  flex: 0 1 320px;
  min-width: 0;
}

.log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.log-head h2 {
  margin: 0;
}

.log-filter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 1 auto;
}

.log-filter select,
.log-filter input {
  font-size: 12px;
  padding: 4px 8px;
}

.pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.pill.write {
  border-color: var(--accent);
  color: var(--accent);
}

.pill.propose {
  border-color: var(--agent);
  color: var(--agent);
}

.pill.revoked {
  opacity: 0.6;
  text-decoration: line-through;
}

.empty {
  color: var(--muted);
  font-size: 14px;
  padding: 26px 0;
  text-align: center;
}

.proposal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--panel);
}

.proposal .who {
  font-size: 12px;
  color: var(--agent);
  font-weight: 560;
  margin-bottom: 6px;
}

.proposal .what {
  font-size: 15px;
  font-weight: 560;
  margin-bottom: 4px;
}

.proposal .reason {
  font-size: 14px;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin: 10px 0;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.actions input[type="text"] {
  flex: 1;
}

.login {
  max-width: 320px;
  margin: 12vh auto;
}

@media (max-width: 720px) {
  .week-head,
  .week-body,
  .allday-row {
    grid-template-columns: 40px repeat(7, 1fr);
  }

  main {
    padding: 14px;
  }

  .evt {
    font-size: 10px;
    padding: 2px 3px;
  }
}


.plan {
  width: auto;
  margin-bottom: 4px;
}

.plan td {
  padding: 4px 14px 4px 0;
  border-bottom: none;
  white-space: nowrap;
}



.ranges {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.range {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.range:hover {
  color: var(--ink);
}

.range.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 560;
}


.ranges-sep {
  display: flex;
  gap: 2px;
  margin-left: 6px;
  padding-left: 7px;
  border-left: 1px solid var(--line);
}



.rowgrid {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 8px 12px 12px;
  margin-bottom: 16px;
  overflow: hidden;
}


.rowgrid-axis,
.rowgrid-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: stretch;
}

.rowgrid-axis {
  height: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.rowgrid-axis .rowgrid-track span {
  position: absolute;
  top: 0;
  
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rowgrid-track {
  position: relative;
  min-width: 0;
}

.rowgrid-row {
  border-top: 1px solid var(--line);
}

.rowgrid-row:first-of-type {
  border-top: 0;
}


.rowgrid-row.today {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border-radius: 8px;
}

.rowgrid-row .rowgrid-track {
  
  height: calc(var(--bands, 0) * 15px + var(--lines, 1) * 27px + 8px);
}

.rowgrid-day {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 8px 0 2px;
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: none;
  border-left: 3px solid var(--marker, transparent);
  padding-left: 7px;
}

.rowgrid-day .rnum {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.rowgrid-day .rmark {
  font-size: 10px;
}

.rtick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  opacity: 0.55;
}

.rnow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  
  background: #c8503f;
  z-index: 3;
}


.rband {
  position: absolute;
  top: calc(var(--line, 0) * 15px);
  height: 13px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 16%, transparent);
  border-left: 2px solid
    color-mix(in srgb, var(--cal, var(--accent)) 55%, transparent);
  text-decoration: none;
  
  overflow: visible;
}

.rband span,
.rbar span {
  display: block;
  
  width: max-content;
  
  max-width: calc(var(--ratio, 1) * 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.rroutine {
  position: absolute;
  top: calc(var(--rline, 0) * 15px + 1px);
  left: 0;
  right: 0;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 12px;
  color: var(--muted);
  
  pointer-events: none;
  z-index: 0;
}

.rroutine-tag {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 8.5px;
  opacity: 0.75;
  padding-left: 2px;
}

.rroutine-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rroutine-item + .rroutine-item::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.5;
}

.rroutine-x {
  font-style: normal;
  margin-left: 3px;
  opacity: 0.7;
}


.rbar.bare {
  width: 9px !important;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  min-width: 9px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 55%, var(--panel));
  border-color: color-mix(in srgb, var(--cal, var(--accent)) 70%, transparent);
}

.rbar.bare:hover {
  background: var(--cal, var(--accent));
}


.rbar.flip span {
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
}

.rband span {
  padding: 1px 4px;
  font-size: 9.5px;
  line-height: 11px;
  color: var(--muted);
}

.rband:hover span {
  color: var(--ink);
}

.rbar {
  position: absolute;
  top: calc(var(--bands, 0) * 15px + var(--line, 0) * 27px + 2px);
  height: 23px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 15%, var(--panel));
  border: 1px solid
    color-mix(in srgb, var(--cal, var(--accent)) 40%, transparent);
  text-decoration: none;
  overflow: visible;
  
  min-width: 6px;
}

.rbar span {
  padding: 4px 5px;
  font-size: 11.5px;
  line-height: 14px;
  color: var(--ink);
}

.rbar b {
  font-weight: 560;
}


.rbar em {
  font-style: normal;
  color: var(--muted);
  margin-left: 6px;
  font-size: 10.5px;
}

.rbar .rplan {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent);
  margin-right: 5px;
}

.rbar.free {
  background: color-mix(in srgb, var(--cal, var(--accent)) 22%, transparent);
  border-color: transparent;
}

.rbar.backup {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--cal, var(--accent)) 45%, transparent);
}

.rbar.cancelled span {
  opacity: 0.5;
  text-decoration: line-through;
}


.rband:hover,
.rbar:hover {
  z-index: 2;
}

.rbar:hover span {
  background: var(--panel);
  border-radius: 4px;
}



.cards {
  display: grid;
  gap: 14px;
  align-items: start;
}


.cards.cols-1 {
  grid-template-columns: 1fr;
}


.cards:not(.cols-1) {
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(330px, (100% - 14px) / 2), 1fr)
  );
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}


.card.past {
  opacity: 0.62;
}

.card.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.card-label {
  display: block;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: var(--bg);
}

.card.current .card-label {
  background: var(--accent-soft);
  color: var(--accent);
}

.card-label:hover {
  color: var(--accent);
}

.card-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}

.card-head div {
  padding: 4px 2px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.card-week {
  position: relative;
  border-top: 1px solid var(--line);
}

.card-week:first-of-type {
  border-top: none;
}

.card-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.card-day {
  position: relative;
  min-height: 62px;
  border-left: 1px solid var(--line);
  padding: 2px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.card-day:first-child {
  border-left: none;
}


.card-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 50%, transparent);
  pointer-events: none;
}

.card-day.weekend {
  background: color-mix(in srgb, var(--line) 20%, transparent);
}

.card-day.outside {
  opacity: 0.4;
}

.card-day.today {
  background: var(--accent-soft);
}

.card-num {
  font-size: 10.5px;
  color: var(--muted);
  text-decoration: none;
  align-self: flex-start;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 16px;
}

.card-num:hover {
  background: var(--bg);
  color: var(--ink);
}

.card-day.today .card-num {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.card-evt,
.card-bar {
  font-size: 10.5px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 14%, var(--panel));
  border-left: 2px solid var(--cal, var(--accent));
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}


.card-evt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  padding-top: 1px;
  padding-bottom: 1px;
}


.card-evt .t {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}

.card-bar {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-evt:hover,
.card-bar:hover {
  filter: brightness(0.96);
}


.card-evt.backup {
  border-left-style: dashed;
  opacity: 0.75;
}

.card-evt.cancelled,
.card-bar.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}


.card-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 14px;
  row-gap: 1px;
  pointer-events: none;
}

.card-bar {
  pointer-events: auto;
  margin: 0 1px;
  font-weight: 560;
}


.card-bar:not(.start) {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}

.card-bar:not(.end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}

@media (max-width: 720px) {
  .cards:not(.cols-1) {
    grid-template-columns: 1fr;
  }

  .card-day {
    min-height: 54px;
  }
}

.bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
}


#event-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  padding: 0;
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
}
#event-modal::backdrop {
  background: rgb(0 0 0 / 38%);
}
#event-modal .modal-body {
  padding: 18px 20px 20px;
}

#event-modal #event-detail > .bar .btn[href="/"] {
  display: none;
}
#event-modal .panel {
  border: 0;
  padding: 0;
  background: none;
}
#event-modal .modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  margin: 10px 12px 0 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
#event-modal .modal-close:hover {
  color: var(--fg);
  background: var(--bg);
}


.ahead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-bottom: 10px;
}

.ahead-item {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  gap: 5px;
  max-width: 100%;
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  padding: 3px 9px;
  
  border-radius: 7px;
  border: 1px solid var(--line);
  
  border-left: 3px solid var(--cal, var(--line));
  background: var(--panel);
}

.ahead-item:hover {
  border-color: var(--cal, var(--muted));
}

.ahead-icon {
  flex: none;
  font-size: 11px;
}

.ahead-when {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ahead-who {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cal, var(--accent)) 16%, transparent);
  color: color-mix(in srgb, var(--cal, var(--accent)) 72%, var(--ink));
  font-size: 10px;
  font-weight: 600;
}

.ahead-what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

.ahead-meta {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
}


.ahead-age {
  flex: none;
  min-width: 2ch;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


.week-head > div.marked {
  background: color-mix(in srgb, var(--marker) 9%, transparent);
  border-radius: 6px 6px 0 0;
}
.marker-pill {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--marker);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.timeoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 7px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 12.5px;
}
.timeoff-item strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}


.plan {
  display: inline-block;
  flex: none;
  min-width: 13px;
  padding: 0 3px;
  margin-right: 4px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: var(--panel);
  background: var(--cal, var(--accent));
}
.card-evt.backup .plan,
.chip.backup .plan {
  
  color: var(--cal, var(--accent));
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
.chip.backup {
  border-style: dashed;
  opacity: 0.8;
}


td.notes {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


@media (max-width: 620px) {
  main {
    padding: 10px;
  }

  .grid-scroll {
    overflow-x: auto;
    
    -webkit-overflow-scrolling: touch;
  }

  .week-head,
  .week-body,
  .allday-row {
    min-width: 560px;
  }

  .week-head,
  .week-body,
  .allday-row {
    grid-template-columns: 34px repeat(7, 1fr);
  }

  .evt {
    font-size: 9.5px;
    padding: 2px;
  }

  .evt .where {
    display: none;
  }

  
  .rail span {
    display: none;
  }

  
  .ahead-item {
    font-size: 11.5px;
    padding: 3px 8px;
  }

  
  .ahead-what {
    max-width: 18ch;
  }
}



.circle h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 0 6px;
  font-weight: 600;
}





.person-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.person-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--line);
  
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}


.person-th-name { width: auto; }
.person-th-bd { width: 74px; }
.person-th-seen { width: 128px; }

.person-row > td {
  padding: 4px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
}

.person-row:hover > td {
  background: var(--panel);
}

.person-name a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.person-name a:hover { color: var(--accent); }

.person-rel,
.person-where {
  color: var(--muted);
}

.person-bd,
.person-seen {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}


.person-name {
  border-left: 3px solid transparent;
}

.person-row.circle-family_local > .person-name,
.person-row.circle-family_remote > .person-name {
  border-left-color: var(--accent);
}

.person-row.circle-friends_close_local > .person-name,
.person-row.circle-friends_close_remote > .person-name {
  border-left-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.person-row.circle-friends_mid_local > .person-name,
.person-row.circle-friends_mid_remote > .person-name,
.person-row.circle-jbca > .person-name,
.person-row.circle-jbca_partners > .person-name {
  border-left-color: color-mix(in srgb, var(--accent) 30%, transparent);
}


.person-row.circle-moffett_capital > .person-name,
.person-row.circle-professional_network > .person-name,
.person-row.circle-friends_extended > .person-name {
  border-left-color: var(--line);
}


.person-overdue {
  font-weight: 600;
  color: var(--warn);
}

.person-next {
  color: var(--muted);
}

.person-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.person-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  min-width: 120px;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
}

.stat-value.late {
  color: var(--warn);
}

.person-notes {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  
  white-space: normal;
  line-height: 1.55;
  font-size: 13.5px;
  margin-bottom: 14px;
}


.evt-people {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.evt-person {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  text-decoration: none;
}

.evt-person:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}



.people-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}

.people-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.people-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 30px 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.people-search input:focus {
  outline: none;
  border-color: var(--accent);
}


.people-slash {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  pointer-events: none;
}

.people-search input:focus + .people-slash {
  opacity: 0;
}

.people-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.people-sort select {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}

.people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}


.circle-chip {
  font: inherit;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}

.circle-chip:hover {
  border-color: var(--muted);
}

.circle-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.circle-chip-n {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.75;
  margin-left: 3px;
}

.people-empty {
  padding: 18px 2px;
}


.person-row[hidden] {
  display: none;
}





@media (max-width: 620px) {
  .person-table .person-th-bd,
  .person-table .person-bd,
  .person-table .person-th-seen,
  .person-table .person-seen {
    display: none;
  }
}


@media (max-width: 480px) {
  .person-table .person-th-where,
  .person-table .person-where {
    display: none;
  }
}


@media (max-width: 720px) {
  .chrome {
    max-width: 100%;
  }

  
  .chrome nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chrome nav::-webkit-scrollbar {
    display: none;
  }
}




.person-notes p {
  margin: 0 0 10px;
}

.person-notes ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.person-notes li {
  margin: 2px 0;
}

.person-notes hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

.person-notes code {
  font-family: var(--mono);
  font-size: 12px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
}


.person-notes .md-h {
  font-weight: 650;
  margin: 14px 0 6px;
  line-height: 1.3;
}

.person-notes .md-h3 {
  font-size: 15px;
}

.person-notes .md-h4 {
  font-size: 13.5px;
}

.person-notes .md-h5,
.person-notes .md-h6 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}


fieldset.people-chips {
  border: 0;
  margin: 0 0 10px;
  padding: 0;
  min-width: 0;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.grid-note {
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--muted);
}



.cals-wrap {
  margin-bottom: 10px;
}

.cals-wrap > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 3px 2px;
  list-style: none;
}

.cals-wrap > summary::-webkit-details-marker {
  display: none;
}


.cals-wrap > summary::before {
  content: "▸";
  font-size: 9px;
  transition: transform 0.12s ease;
}

.cals-wrap[open] > summary::before {
  transform: rotate(90deg);
}

.cals-count {
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
}

.cals-wrap > .cals {
  margin-top: 6px;
}


.timeoff {
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 8px;
  gap: 4px 10px;
}

.ahead {
  margin-bottom: 8px;
}

.ranges {
  margin-bottom: 10px;
}

.bar {
  margin-bottom: 12px;
}

.bar h1 {
  font-size: 21px;
}



#files .bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

#files .bar input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#files .bar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}

.crumbs {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.crumbs strong {
  color: var(--ink);
}


.toc ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
}

.toc li {
  margin: 2px 0;
  break-inside: avoid;
}

.toc a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.toc a:hover {
  color: var(--accent);
}

.doc {
  max-width: 78ch; 
  line-height: 1.65;
}

.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  margin: 1.6em 0 0.5em;
  line-height: 1.3;
}

.doc h1:first-child {
  margin-top: 0;
}

.doc h1 { font-size: 24px; }
.doc h2 { font-size: 19px; }
.doc h3 { font-size: 16px; }
.doc h4,
.doc h5,
.doc h6 { font-size: 15px; }


.doc .anchor {
  color: inherit;
  text-decoration: none;
}

.doc .anchor:hover {
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.doc a {
  color: var(--accent);
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

.doc a.wiki {
  color: var(--agent);
}

.doc a.ext::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 2px;
  color: var(--muted);
}

.doc p { margin: 0 0 1em; }

.doc ul,
.doc ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.doc li { margin: 0.25em 0; }

.doc li.task {
  list-style: none;
  margin-left: -1.4em;
}

.doc li.task input {
  margin-right: 6px;
}

.doc blockquote {
  margin: 0 0 1em;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.doc pre,
#files > pre {
  overflow-x: auto;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.doc code {
  font-family: var(--mono);
  font-size: 0.9em;
}

.doc :not(pre) > code {
  padding: 1px 5px;
  background: var(--accent-soft);
  border-radius: 4px;
}

.doc hr {
  margin: 1.6em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.doc img {
  max-width: 100%;
  border-radius: var(--radius);
}


.tablewrap {
  overflow-x: auto;
  margin: 0 0 1em;
}

.frontmatter table {
  margin: 0;
}

.frontmatter td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 14px;
}

ul.plain {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

ul.plain li {
  margin: 3px 0;
}

.pdf {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}



#work .bar,
#work-detail .bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

#work .work-status {
  margin-bottom: 18px;
}

#work .work-status h2 {
  margin-bottom: 6px;
}

#work .work-status-percent {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

#work .work-status p {
  margin: 6px 0 0;
}

#work .bar input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.tab {
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.tab:hover { background: var(--accent-soft); }

.tab.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
}

.chip:hover { border-color: var(--accent); }

.chip.on {
  border-color: var(--accent);
  color: var(--accent);
}

.worklist td {
  vertical-align: top;
  padding: 7px 10px 7px 0;
}


.worklist .worktitle {
  overflow-wrap: anywhere;
}

.worklist .workacts {
  white-space: nowrap;
}


.worklist .workid,
.worklist .workprio,
.worklist .workcat,
.worklist .workacts {
  width: 1%;
}

.worklist .workage {
  width: 1%;
  text-align: right;
}


#work .panel {
  overflow-x: auto;
}


.worklist a {
  color: var(--ink);
  text-decoration: none;
}

.worklist a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line);
}


.pill.p1 {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.pill.p2,
.pill.p3 {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.pill.waiting,
.pill.blocked {
  margin-left: 8px;
  color: var(--agent);
  background: var(--agent-soft);
}


.pill.quick {
  margin-right: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 0.95em;
  cursor: help;
}

#work-detail .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#work-detail .actions input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 7px 11px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}



.triplist,
.daylist,
.vouchers,
.anchors,
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.triplist li,
.daylist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 8px;
}

.triplist li > a,
.daylist li > a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}

.triplist li > a:hover .tname,
.daylist li > a:hover .dhead {
  text-decoration: underline;
}

.tname,
.dhead {
  font-weight: 560;
}

.dlabel {
  font-size: 13px;
  font-weight: 600;
}

.dsleep {
  flex-basis: 100%;
}


.triplist li.past,
.daylist li.past {
  opacity: 0.62;
}

.daylist li.today,
.triplist li.now {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.pill.past,
.pill.ahead {
  color: var(--muted);
  border: 1px solid var(--line);
  background: transparent;
}

.pill.now {
  color: var(--accent);
  background: var(--accent-soft);
}

.pill.warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}



.daystrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}

.daychip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  text-decoration: none;
  color: var(--muted);
  line-height: 1.25;
}

.daychip:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.daychip .dow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.daychip .dnum {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.daychip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.daychip.on .dnum,
.daychip.on .dow {
  color: var(--accent);
}


.daychip.today::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 3px;
}

.dcountry {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.daychip .dflag {
  font-size: 13px;
  line-height: 1;
  margin-bottom: 2px;
}

.headline {
  font-size: 17px;
  font-weight: 560;
  margin: 0 0 14px;
}




.route {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 20px;
}

.rleg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.rleg:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rflag {
  font-size: 15px;
  line-height: 1;
}

.rname {
  font-weight: 560;
}

.rdays {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}



.leg {
  margin-bottom: 22px;
  
  scroll-margin-top: 16px;
}

.leghead {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 2px 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.legflag {
  font-size: 22px;
  line-height: 1;
  
  position: relative;
  top: 2px;
}

.legname {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}


.leg .daylist {
  margin: 0;
}



.next {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.next-head {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 6px;
}

.next-head strong {
  font-size: 18px;
  letter-spacing: -0.01em;
  
  text-transform: none;
}

.next-body {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  font-weight: 560;
}

.next-now {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}




.anchors li {
  padding: 5px 0;
}

.anchors li.done {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.aglyph {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  margin-right: 4px;
}

.alert,
.sleep,
.daynote {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}

.alert {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 7%, var(--panel));
}




.timeline > li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.timeline > li:first-child {
  border-top: 0;
}

.ttime {
  flex: 0 0 auto;
  width: 5.4em;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  padding-top: 2px;
  white-space: nowrap;
}


.tbody {
  flex: 1;
  min-width: 0;
}

.tglyph {
  display: inline-block;
  margin-right: 6px;
}

.tbody > .tsub {
  margin: 4px 0 0;
  padding-left: 1.1em;
  list-style: disc;
  color: var(--muted);
  font-size: 13.5px;
}

.tsub li {
  padding: 2px 0;
}


.trow.past {
  opacity: 0.45;
}

.vouchers li {
  padding: 5px 0;
}

.daynav {
  margin-top: 20px;
}


@media (max-width: 420px) {
  .timeline li {
    flex-direction: column;
    gap: 2px;
  }

  .ttime {
    width: auto;
    font-weight: 600;
    color: var(--ink);
  }
}


@media (max-width: 480px) {
  .chrome {
    gap: 14px;
    padding: 10px 12px;
  }

  main {
    padding: 16px 12px 32px;
  }
}


.rowact {
  display: flex;
  gap: 4px;
  align-items: center;
}

.rowact details {
  position: relative;
}

.rowact summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.rowact summary::-webkit-details-marker {
  display: none;
}


.rowact .rowact-more {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 5px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}


.rowact .rowact-note {
  width: 14ch;
  padding: 5px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.rowact .rowact-note::placeholder {
  color: color-mix(in srgb, var(--muted) 50%, transparent);
}

.rowact .rowact-note:hover {
  border-color: var(--line);
}

.rowact .rowact-note:focus {
  background: var(--bg);
  border-color: var(--line);
}

.graveyard .ghost {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.graveyard .ghost:first-of-type {
  border-top: 0;
}


.graveyard .phoenix {
  padding-left: 10px;
  border-left: 3px solid var(--warn);
}


.callform {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.callform input[type="text"] {
  flex: 1;
  padding: 7px 11px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.callform input[name="at"] {
  flex: 0 0 150px;
}


.chips.flags {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.chips.flags .chip {
  border-style: dashed;
}

.chips.flags .chip.on {
  border-style: solid;
  background: var(--accent-soft);
}


.pill.buried {
  margin-left: 8px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}


.pill.asked {
  margin-left: 8px;
  color: var(--accent);
  background: var(--accent-soft);
}




#goals .goals-head {
  margin-bottom: 20px;
}

#goals h1 {
  font-size: 22px;
  margin: 0 0 10px;
}

#goals .epigraph {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 15px;
  line-height: 1.5;
}

#goals .epigraph p {
  margin: 0;
}

#goals .epigraph p + p {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.02em;
}



#goals .mori-bar,
#charlie .mori-bar,
#yuka .mori-bar {
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(1.25% - 1px),
      var(--line) calc(1.25% - 1px),
      var(--line) 1.25%
    ),
    var(--panel);
  overflow: hidden;
}

#goals .mori-lived,
#charlie .mori-lived,
#yuka .mori-lived {
  height: 100%;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-right: 2px solid var(--accent);
}

#goals .mori-legend,
#charlie .mori-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 5px;
  color: var(--muted);
}

#goals .mori-legend strong,
#charlie .mori-legend strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#goals .goals-sub {
  margin: 12px 0 9px;
}


#goals .goals-sub a {
  color: var(--accent);
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

#goals .goal-jump,
#compass .goal-jump {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#goals .goal-jump a,
#compass .goal-jump a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  color: var(--ink);
}

#goals .goal-jump a:hover,
#compass .goal-jump a:hover {
  border-color: var(--muted);
}


#goals .goal-by {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

#goals .goal-by a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  text-decoration: none;
  color: var(--muted);
}

#goals .goal-by a:hover {
  border-color: var(--muted);
  color: var(--ink);
}

#goals .goal-by a.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

#goals .goal-group {
  margin-bottom: 14px;
  scroll-margin-top: 16px;
}


#goals .goal-group[style] .goal-group-head h2 {
  color: hsl(var(--cat) 55% 32%);
}

#goals .goal-group[style] .goal-group-head {
  border-bottom-color: hsl(var(--cat) 55% 72%);
}


#goals .goal-jump a[style] {
  color: hsl(var(--cat) 55% 30%);
  border-color: hsl(var(--cat) 55% 78%);
  background: hsl(var(--cat) 68% 95%);
}

#goals .goal-jump a[style]:hover {
  border-color: hsl(var(--cat) 55% 55%);
}

#goals .goal-jump a[style] .muted {
  color: hsl(var(--cat) 30% 45%);
}


#goals .goal-untouched span[style] {
  color: hsl(var(--cat) 45% 38%);
  font-weight: 600;
}

#goals .goal-group-head,
#compass .goal-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

#goals .goal-group-head h2,
#compass .goal-group-head h2 {
  font-size: 17px;
  margin: 0;
}

#goals .goal-group-head .count,
#compass .goal-group-head .count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


#goals .goal-group-head .goal-live {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


#goals .goal-group-head .goal-live.none {
  color: var(--muted);
}


@media (prefers-color-scheme: dark) {
:root:not([data-theme]) #goals .goal-cat {
    color: hsl(var(--cat) 62% 76%);
    background: hsl(var(--cat) 40% 21%);
  }:root:not([data-theme]) #goals .goal-group[style] .goal-group-head h2 {
    color: hsl(var(--cat) 62% 72%);
  }:root:not([data-theme]) #goals .goal-group[style] .goal-group-head {
    border-bottom-color: hsl(var(--cat) 40% 32%);
  }:root:not([data-theme]) #goals .goal-jump a[style] {
    color: hsl(var(--cat) 62% 74%);
    border-color: hsl(var(--cat) 35% 34%);
    background: hsl(var(--cat) 35% 17%);
  }:root:not([data-theme]) #goals .goal-jump a[style]:hover {
    border-color: hsl(var(--cat) 45% 52%);
  }:root:not([data-theme]) #goals .goal-jump a[style] .muted {
    color: hsl(var(--cat) 25% 58%);
  }:root:not([data-theme]) #goals .goal-untouched span[style] {
    color: hsl(var(--cat) 50% 68%);
  }

}
:root[data-theme="dark"] #goals .goal-cat {
    color: hsl(var(--cat) 62% 76%);
    background: hsl(var(--cat) 40% 21%);
  }:root[data-theme="dark"] #goals .goal-group[style] .goal-group-head h2 {
    color: hsl(var(--cat) 62% 72%);
  }:root[data-theme="dark"] #goals .goal-group[style] .goal-group-head {
    border-bottom-color: hsl(var(--cat) 40% 32%);
  }:root[data-theme="dark"] #goals .goal-jump a[style] {
    color: hsl(var(--cat) 62% 74%);
    border-color: hsl(var(--cat) 35% 34%);
    background: hsl(var(--cat) 35% 17%);
  }:root[data-theme="dark"] #goals .goal-jump a[style]:hover {
    border-color: hsl(var(--cat) 45% 52%);
  }:root[data-theme="dark"] #goals .goal-jump a[style] .muted {
    color: hsl(var(--cat) 25% 58%);
  }:root[data-theme="dark"] #goals .goal-untouched span[style] {
    color: hsl(var(--cat) 50% 68%);
  }



#goals .goal-untouched {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#goals .blurb,
#compass .blurb {
  margin: 2px 0 5px;
}


#goals .goal-table {
  width: 100%;
  border-collapse: collapse;
  
  table-layout: fixed;
}

#goals .goal-table thead th {
  padding: 0 8px 3px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

#goals .goal {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

#goals .goal > td {
  padding: 3px 8px;
  vertical-align: baseline;
}


#goals .goal > td:first-child {
  border-left: 3px solid var(--line);
  width: 1%;
  white-space: nowrap;
}


#goals .goal.active > td:first-child {
  border-left-color: var(--accent);
}

#goals .goal.hold > td:first-child {
  border-left-color: var(--warn);
}

#goals .goal.done > td:first-child {
  border-left-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}


#goals .goal.idea > td:first-child {
  border-left-style: dashed;
}


#goals .goal-table th:nth-child(1) { width: 5ch; }
#goals .goal-table th:nth-child(3) { width: 28ch; }
#goals .goal-table th:nth-child(4) { width: 13ch; }

#goals .goal-table th:nth-child(5) { width: 44ch; }

#goals .goal-span {
  white-space: nowrap;
}


#goals .goal-act {
  overflow: hidden;
}


#goals .goal-dates {
  white-space: normal;
}

#goals .goal-title {
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

#goals .goal-type {
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 6px;
}


#goals .goal-cat {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--cat) 55% 30%);
  background: hsl(var(--cat) 68% 91%);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}


#goals .goal-span {
  color: var(--ink);
}

#goals .goal-notes {
  margin: 1px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 78ch;
}



#goals .goal-id {
  font-family: var(--mono);
  font-size: 12px;
}

#goals .goal-title a {
  color: inherit;
  text-decoration: none;
}

#goals .goal-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}


#goals .goal-set {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex: 0 1 auto;
}

#goals .goal-set select {
  width: auto;
  font-size: 12.5px;
  padding: 2px 6px;
}




#goals .goal-set .goal-note-in {
  flex: 1 1 6ch;
  min-width: 6ch;
  font-size: 12.5px;
  padding: 2px 6px;
  background: transparent;
  border-color: transparent;
}

#goals .goal-set .goal-note-in::placeholder {
  color: color-mix(in srgb, var(--muted) 50%, transparent);
}

#goals .goal-set .goal-note-in:hover,
#goals .goal-set .goal-note-in:focus {
  background: var(--bg);
  border-color: var(--line);
}


#goals .goal .goal-notes {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#goals .goal .goal-more[open] .goal-notes {
  display: block;
  overflow: visible;
}


#goals .goal-more > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

#goals .goal-more > summary::-webkit-details-marker {
  display: none;
}


#goals .goal-more-count {
  display: inline-block;
  margin-top: 0;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}

#goals .goal-more[open] .goal-more-count {
  display: none;
}

#goals .goal-more > summary:hover .goal-more-count {
  color: var(--ink);
}


#goals .goal-log {
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin-top: 5px;
}

#goals .goal-add {
  margin-top: 14px;
}

#goals .goal-add > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

#goals .goal-add > summary::-webkit-details-marker {
  display: none;
}

#goals .goal-add form {
  margin-top: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#goals .notice {
  margin: 12px 0;
}

#goal-detail h1 {
  font-size: 22px;
  margin: 6px 0 4px;
}

#goal-detail .crumbs a {
  color: var(--muted);
}

#goal-detail .goal-status {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

#goal-detail .goal-status.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

#goal-detail .goal-status.hold {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: transparent;
}

#goal-detail .panel {
  margin-top: 16px;
}

#goal-detail textarea {
  min-height: 220px;
  font-size: 14px;
  line-height: 1.5;
}



#compass {
  --compass-color: var(--accent);
}
#compass .priority,
#compass .vision {
  --compass-color: var(--accent);
}
#compass .value,
#compass .question {
  --compass-color: var(--warn);
}
#compass .identity {
  --compass-color: var(--agent);
}
#compass .compass-head {
  position: relative;
  padding: 0 0 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
#compass .compass-eyebrow {
  margin: 0;
  color: var(--muted);
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#compass h1,
#compass-detail h1 {
  font-size: 26px;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
#compass .compass-rose {
  position: absolute;
  right: 0;
  top: 0;
  width: 66px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  opacity: 0.4;
  pointer-events: none;
}
#compass .rose-north {
  fill: currentColor;
}
#compass .rose-south {
  fill: var(--panel);
}
#compass .rose-center {
  fill: var(--ink);
}
#compass .epigraph {
  margin: 0 74px 6px 0;
  font:
    16px / 1.4 Georgia,
    serif;
}
#compass .epigraph p {
  display: inline;
  margin: 0;
}
#compass .epigraph p + p {
  margin-left: 10px;
  font:
    12px / 1.4 ui-sans-serif,
    system-ui,
    sans-serif;
}
#compass .compass-head > .muted {
  margin: 4px 0 8px;
  font-size: 12px;
}
#compass .compass-head a,
#compass-detail .muted a {
  color: var(--accent);
  text-underline-offset: 3px;
}
#compass .compass-map {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}
#compass .compass-map a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
#compass .compass-map a:hover {
  border-color: var(--compass-color);
  background: color-mix(in srgb, var(--compass-color) 8%, var(--panel));
}
#compass a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#compass .compass-symbol {
  color: var(--compass-color);
  font-size: 16px;
  line-height: 1;
}
#compass .map-count {
  font: 11px var(--mono);
  color: var(--muted);
}
#compass .creed-group {
  margin-bottom: 10px;
  scroll-margin-top: 16px;
}
#compass .goal-group-head {
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
}
#compass .goal-group-head h2 {
  font-size: 15px;
}
#compass .section-symbol {
  color: var(--compass-color);
  font-size: 19px;
  line-height: 1;
}
#compass .blurb {
  margin: 4px 0 8px;
  font-size: 11px;
}
#compass .creed-entries {
  columns: 3 280px;
  column-gap: 14px;
}
#compass .creed {
  break-inside: avoid;
  padding: 4px 0 4px 8px;
  margin: 0 0 4px;
  border-left: 2px solid var(--compass-color);
}
#compass .creed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
#compass .creed-head h3 {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  font-weight: 600;
}
#compass .creed-head h3 a {
  color: inherit;
  text-decoration: none;
}
#compass .creed-head h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#compass .creed-when {
  font: 10px var(--mono);
  color: var(--compass-color);
}
#compass .creed-body {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  white-space: pre-line;
}
#compass .priority .creed-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
#compass .priority-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#compass .priority-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
}
#compass .rank-number {
  font: 10px var(--mono);
  color: var(--accent);
}
#compass .vision .creed-when {
  font-size: 12px;
}
#compass .creed-add {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 8px;
}
#compass .creed-add[open] {
  display: block;
  margin: 8px 0 0;
}
@media (max-width: 560px) {
  #compass .compass-rose {
    width: 48px;
  }
  #compass .epigraph {
    margin-right: 0;
    font-size: 13px;
  }
  #compass .epigraph p + p {
    display: block;
    margin-left: 0;
  }
  #compass .creed-entries {
    columns: 1;
  }
  #compass .priority .creed-entries {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #compass .compass-map a {
    min-height: 32px;
  }
  #compass .creed-add {
    margin: 6px 0 0;
  }
}

#compass .creed-reasoning { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
#compass .creed-reasoning summary { cursor: pointer; }
#compass .reasoning-more, #compass .reasoning-less { color: var(--accent); }
#compass .reasoning-less, #compass .creed-reasoning[open] .reasoning-preview { display: none; }
#compass .creed-reasoning[open] .reasoning-less { display: inline; }
#compass .creed-reasoning summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#compass .creed-add > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

#compass .creed-add > summary::-webkit-details-marker {
  display: none;
}

#compass .creed-add form {
  margin-top: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#compass .notice {
  margin: 12px 0;
}

#compass-detail .crumbs a,
#compass-detail .muted a {
  color: var(--muted);
}

#compass-detail .panel {
  margin-top: 16px;
}

#compass-detail textarea {
  font-size: 14px;
  line-height: 1.6;
}




.worklist tr.busy {
  opacity: 0.45;
  pointer-events: none;
}


#work .undo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 7px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13px;
}

#work .undo .undo-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#work .undo button {
  margin-left: auto;
  flex: none;
}

#work .undo.undo-compact {
  padding: 0;
  border: 0;
  background: transparent;
}

#work .undo.undo-compact button {
  margin-left: 0;
}


#work .dispatched {
  border-left-color: var(--muted);
}

#work .dispatched.refused {
  border-left-color: var(--warn);
}


#work .dispatch-preview {
  border-left: 3px solid var(--accent);
}

#work .dispatch-preview pre {
  margin: 8px 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

#work .dispatch-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}



#happenings .hap-head {
  margin-bottom: 14px;
}

#happenings h1 {
  margin: 0 0 4px;
}

#happenings .hap-sub {
  margin: 6px 0 8px;
}

#happenings .hap-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}


#happenings .hap-filter-group {
  display: inline-flex;
  gap: 5px;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}

#happenings .hap-day {
  margin-bottom: 20px;
}

#happenings .hap-day h2 {
  font-size: 15px;
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
}

#happenings .hap {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 13px;
  margin-bottom: 6px;
}


#happenings .hap.new {
  border-left-color: var(--accent);
}

#happenings .hap.added {
  border-left-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

#happenings .hap.dismissed {
  border-left-color: var(--line);
  opacity: 0.72;
}


#happenings .hap.stale {
  border-left-color: var(--warn);
  opacity: 1;
}

#happenings .hap-when {
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  white-space: nowrap;
}

#happenings .hap-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

#happenings .hap-title a {
  color: inherit;
  text-decoration: none;
}

#happenings .hap-title a:hover {
  color: var(--accent);
}

#happenings .tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}

#happenings .hap-meta {
  margin: 3px 0 0;
}


#happenings .hap-drive {
  color: var(--ink);
}

#happenings .hap-desc {
  margin: 4px 0 0;
  max-width: 74ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#happenings .hap-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

#happenings .hap-actions form {
  display: flex;
  align-items: center;
  gap: 5px;
}

#happenings .hap-actions select {
  max-width: 130px;
}

#happenings .hap-note-in {
  width: 130px;
}

#happenings .hap-on {
  color: var(--muted);
  white-space: nowrap;
}

#happenings .hap-note {
  max-width: 200px;
  text-align: right;
}

#happenings .hap-empty {
  margin-top: 20px;
}


@media (max-width: 800px) {
  #happenings .hap {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #happenings .hap-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}



#charlie .ch-head {
  margin-bottom: 22px;
}

#charlie h1 {
  margin: 0;
}

#charlie .ch-age {
  font-size: 19px;
  font-weight: 600;
  margin: 2px 0 2px;
}

#charlie .ch-clock {
  margin: 14px 0 12px;
}


#charlie .ch-landmarks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#charlie .ch-landmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

#charlie .ch-landmark-n {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#charlie .ch-block {
  margin-bottom: 28px;
}

#charlie .ch-block > h2 {
  font-size: 17px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

#charlie h3 {
  font-size: 14px;
  margin: 14px 0 4px;
}


#charlie .ch-strip {
  display: flex;
  gap: 3px;
  margin: 12px 0 4px;
}

#charlie .ch-band {
  position: relative;
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#charlie .ch-band.done {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

#charlie .ch-band.on {
  color: var(--accent);
  font-weight: 600;
  border-color: var(--accent);
}


#charlie .ch-band-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent-soft);
  z-index: 0;
}

#charlie .ch-band span {
  position: relative;
  z-index: 1;
}

#charlie .ch-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

#charlie .ch-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}

#charlie .ch-growth {
  margin-top: 14px;
  padding: 10px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
}

#charlie .ch-growth h3 {
  margin-top: 0;
}


#charlie .ch-ledger {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

#charlie .ch-ledger li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

#charlie .ch-span {
  flex: 0 0 84px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

#charlie .ch-what {
  flex: 1;
  min-width: 0;
}

#charlie .ch-detail {
  display: block;
  line-height: 1.45;
}

#charlie .tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 5px;
}


#charlie .ch-share {
  margin: 10px 0;
}

#charlie .ch-share-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#charlie .ch-share-bar {
  height: 8px;
  margin: 3px 0 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

#charlie .ch-share-fill {
  height: 100%;
  background: var(--accent);
}

#charlie .ch-share-detail {
  margin: 0;
}

#charlie .ch-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

#charlie .ch-day {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 8px;
  min-height: 92px;
}

#charlie .ch-day.today {
  border-color: var(--accent);
}


#charlie .ch-day.solo {
  border-left: 3px solid var(--accent);
}

#charlie .ch-day-head {
  font-weight: 600;
  margin-bottom: 4px;
}

#charlie .ch-day-head .tag {
  margin-left: 4px;
}

#charlie .ch-entry {
  line-height: 1.4;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

#charlie .ch-lesson {
  margin: 10px 0;
  padding: 8px 13px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
}

#charlie .ch-ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  margin: 10px 0;
}

#charlie .ch-idea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 11px;
}

#charlie .ch-idea-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
}

#charlie .ch-idea p {
  margin: 2px 0 0;
}


#charlie .ch-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

#charlie .ch-path {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
}


#charlie .ch-path.due {
  border-left: 3px solid var(--warn);
}

#charlie .ch-path-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14.5px;
}

#charlie .ch-path .ch-list {
  margin-top: 6px;
}


#charlie .ch-path-facts {
  margin: 9px 0 0;
}

#charlie .ch-path-facts dt {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 7px;
}

#charlie .ch-path-facts dd {
  margin: 1px 0 0;
  line-height: 1.5;
}

#charlie .ch-path-facts .ch-ceiling {
  color: var(--warn);
}

#charlie .ch-friends {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 8px;
}

#charlie .ch-friends th,
#charlie .ch-friends td {
  text-align: left;
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

#charlie .ch-friends th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}


@media (max-width: 760px) {
  #charlie .ch-two {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #charlie .ch-paths {
    grid-template-columns: 1fr;
  }

  #charlie .ch-week {
    grid-template-columns: 1fr;
  }

  #charlie .ch-day {
    min-height: 0;
  }

  #charlie .ch-strip {
    flex-wrap: wrap;
  }

  #charlie .ch-band {
    flex: 1 1 30%;
  }
}




#happenings .card-day.gone {
  opacity: 0.45;
}

#happenings .hap-chip {
  border-left: 2px solid var(--accent);
}


#happenings .hap-chip.added {
  border-left-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  opacity: 0.7;
}

#happenings .hap-chip.dismissed {
  border-left-color: var(--line);
  opacity: 0.5;
  text-decoration: line-through;
}


#happenings .card-label {
  display: block;
}

#happenings .hap-horizon {
  margin-top: 10px;
  max-width: 70ch;
}



.callpanel {
  border-left: 3px solid var(--agent);
}

.callbrief {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 70ch;
}

.callfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.callfield input,
.callfield textarea {
  padding: 8px 11px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}


.callbrief textarea[name="goal"] {
  font: 13px/1.6 var(--mono);
  resize: vertical;
  min-height: 9em;
}

.callbrief .callfield input[type="tel"] {
  font: 15px/1.5 var(--mono);
  letter-spacing: 0.02em;
}


.callfacts {
  margin: 12px 0;
  border-collapse: collapse;
}

.callfacts td {
  padding: 3px 12px 3px 0;
  vertical-align: top;
}




.callphase {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--line);
  vertical-align: middle;
}

.callphase.running {
  background: var(--agent);
  animation: callpulse 1.4s ease-in-out infinite;
}

.callphase.over {
  background: var(--muted);
}

@keyframes callpulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}


@media (prefers-reduced-motion: reduce) {
  .callphase.running {
    animation: none;
  }
}

.transcript {
  margin: 10px 0;
  max-width: 70ch;
}

.transcript .turn {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 10px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.transcript .turn:last-child {
  border-bottom: none;
}

.transcript .who {
  padding-top: 2px;
  text-align: right;
}


.transcript .turn.us .said {
  color: var(--agent);
}

.calllog {
  margin-top: 6px;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 14em;
  overflow-y: auto;
}

.danger {
  color: var(--warn);
}



.hap-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  padding: 18px 20px 20px;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
}

.hap-modal::backdrop {
  background: rgb(0 0 0 / 38%);
}

.hap-modal .modal-close {
  float: right;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin: -6px -8px 0 0;
  border-radius: 6px;
}

.hap-modal .modal-close:hover {
  color: var(--fg);
  background: var(--bg);
}

.hap-modal-title {
  font-size: 17px;
  margin: 0 24px 2px 0;
}

.hap-modal-title a {
  color: inherit;
  text-decoration: none;
}

.hap-modal-title a:hover {
  color: var(--accent);
}

.hap-modal-when {
  margin: 0 0 2px;
  font-weight: 600;
}

.hap-modal-desc {
  margin: 8px 0 0;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}


#happenings .hap-modal .hap-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#happenings .hap-modal .hap-actions form {
  display: flex;
  width: 100%;
  gap: 6px;
}


#happenings .hap-modal .hap-note-in,
#happenings .hap-modal .hap-actions select {
  flex: 1;
  min-width: 0;
  max-width: none;
  width: auto;
}



.doacts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}

.btn.doact {
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  white-space: nowrap;
}

.btn.doact:hover {
  color: var(--ink);
  border-color: var(--muted);
}


.btn.doact.buy,
.btn.doact.call {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.btn.doact.buy:hover,
.btn.doact.call:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}


#work-detail .doactpanel {
  padding: 10px 14px;
}

#work-detail .doacts {
  margin-left: 0;
  gap: 6px;
}

#work-detail .btn.doact {
  padding: 3px 11px;
  font-size: 13px;
}


.btn.doact .amz {
  vertical-align: -1px;
  margin-right: 1px;
}


#happenings .cards:not(.cols-1) {
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(470px, (100% - 28px) / 3), 1fr)
  );
}


#happenings .card-evt {
  font-size: 11px;
  line-height: 15px;
}


#happenings .hap-more {
  margin-top: 1px;
}

#happenings .hap-more > summary {
  font-size: 10.5px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 3px;
  color: var(--muted);
  border: 1px dashed var(--line);
  cursor: pointer;
  list-style: none;
}


#happenings .hap-more > summary::-webkit-details-marker {
  display: none;
}

#happenings .hap-more > summary:hover {
  color: var(--ink);
  border-color: var(--muted);
}

#happenings .hap-more[open] > summary {
  margin-bottom: 1px;
}



#happenings .hap-views {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

#happenings .hap-map {
  padding: 14px 16px 10px;
}

#happenings .hap-leaflet {
  
  max-width: 820px;
  margin: 0 auto;
  height: min(70vh, 620px);
  border-radius: var(--radius);
  overflow: hidden;
  
  border: 1px solid var(--line);
}


#happenings .leaflet-container {
  background: var(--bg);
  font: inherit;
}

#happenings .leaflet-popup-content-wrapper,
#happenings .leaflet-popup-tip {
  background: var(--panel);
  color: var(--ink);
}

#happenings .leaflet-bar a {
  background: var(--panel);
  color: var(--ink);
  border-bottom-color: var(--line);
}


@media (prefers-color-scheme: dark) {
:root:not([data-theme]) #happenings .leaflet-tile-pane {
    filter: brightness(0.72) saturate(0.85);
  }

}
:root[data-theme="dark"] #happenings .leaflet-tile-pane {
    filter: brightness(0.72) saturate(0.85);
  }



#happenings .hap-places {
  columns: 3 18ch;
  margin: 4px 0;
  padding-left: 18px;
}

#happenings .hap-places li {
  margin-bottom: 3px;
  break-inside: avoid;
}

#happenings .hap-map-key {
  margin: 10px auto 0;
  max-width: 70ch;
  text-align: center;
}

#happenings .hap-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px 0 10px;
  vertical-align: -1px;
}

#happenings .hap-key.near {
  background: var(--accent);
  margin-left: 0;
}

#happenings .hap-key.mid {
  background: var(--agent);
}

#happenings .hap-key.far {
  background: var(--warn);
}





#culture h2 {
  font-size: 15px;
  font-weight: 620;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 6px;
}

.log-stats > div {
  flex: 1 1 130px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.log-stats strong {
  display: block;
  font-size: 21px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.log-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 20px 0 6px;
}

.log-controls input[type="search"] {
  font: inherit;
  font-size: 14px;
  flex: 1 1 260px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.log-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip-link {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.chip-link:hover {
  border-color: var(--muted);
}

.chip-link.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}


.log-year-group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  margin: 22px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}



.log-list .log-row[hidden] {
  display: none;
}

.log-log .log-head,
.log-list .log-row {
  display: grid;
  grid-template-columns: var(--log-cols);
  gap: 2px 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.log-list li:last-child {
  border-bottom: none;
}

.log-seq {
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.log-title {
  font-weight: 520;
}

.log-when {
  text-align: right;
  white-space: nowrap;
}



.log-title:has(.log-thumb) {
  display: flex;
  align-items: center;
  gap: 9px;
}


.log-shelf .log-thumb {
  float: left;
  margin-right: 9px;
}


.log-thumb {
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  height: 40px;
}


.log-thumb.square {
  width: 40px;
}


.log-thumb.wide {
  width: 60px;
}

.log-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.log-photo {
  display: none;
}

.log-photo:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 4vmin;
  
  background: rgb(0 0 0 / 62%);
  cursor: zoom-out;
  
  text-decoration: none;
  color: inherit;
}

.log-photo:target img {
  
  max-width: min(560px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgb(0 0 0 / 35%);
}

.log-photo-cap {
  font-size: 13px;
  
  color: rgb(255 255 255 / 82%);
  text-decoration: none;
}


.log-caveat {
  margin: 22px 0 0;
  max-width: 78ch;
}


.log-list .log-row:has(.log-thumb) {
  align-items: center;
}


.log-credit {
  display: inline-block;
  font-size: 11px;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.log-credit:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}


.log-credit.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}


.log-maker .log-credit,
.log-shelf td:first-child .log-credit {
  display: inline;
  font-size: inherit;
  background: none;
  padding: 0;
  color: var(--muted);
  white-space: normal;
  overflow: visible;
}

.log-maker .log-credit:hover,
.log-shelf td:first-child .log-credit:hover {
  color: var(--accent);
  text-decoration: underline;
}

.log-maker .log-credit.on,
.log-shelf td:first-child .log-credit.on {
  background: none;
  border-color: transparent;
  color: var(--accent);
}

.log-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.log-credits-head {
  color: var(--muted);
}

.log-cast .log-people {
  gap: 5px 10px;
}

.log-topic {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--agent);
  background: var(--agent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}


.log-kind {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.log-shelf td:first-child {
  white-space: nowrap;
}

.log-shelf .num,
.log-stats .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.log-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.log-people li {
  display: flex;
  align-items: baseline;
  gap: 5px;
}



.log-date {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.log-date input[type="month"] {
  font: inherit;
  font-size: 12px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  max-width: 15ch;
}

.log-date .btn {
  font-size: 12px;
  padding: 2px 8px;
}

.log-flash {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 9px 13px;
  font-size: 14px;
  margin: 14px 0 0;
}


.log-head {
  position: sticky;
  top: var(--chrome-h, 72px);
  z-index: 5;
  background: var(--bg);
  
  font: inherit;
  color: var(--muted);
  padding: 7px 0 5px;
  border-bottom: 1px solid var(--line);
}

.log-head > * {
  font-size: 12px;
  font-weight: 560;
}


.log-measure,
.log-year,
.log-nth,
.log-spec,
.log-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.log-scroll {
  overflow-x: auto;
}






@media (max-width: 720px) {
  .log-list .log-row {
    grid-template-columns: 3.5ch auto auto auto 1fr;
    grid-template-areas:
      "seq title   title  title title"
      "gap maker   maker  maker maker"
      "gap measure year   spec  nth"
      "gap country value  when  when";
    row-gap: 1px;
  }

  .log-list .log-row .log-seq {
    grid-area: seq;
  }

  .log-list .log-row .log-title {
    grid-area: title;
  }

  .log-list .log-row .log-maker {
    grid-area: maker;
  }

  .log-list .log-row .log-measure {
    grid-area: measure;
    text-align: left;
  }

  .log-list .log-row .log-year {
    grid-area: year;
    text-align: left;
  }

  .log-list .log-row .log-spec {
    grid-area: spec;
    text-align: left;
  }

  .log-list .log-row .log-country {
    grid-area: country;
    text-align: left;
  }

  .log-list .log-row .log-value {
    grid-area: value;
    text-align: left;
  }

  .log-list .log-row .log-nth {
    grid-area: nth;
    text-align: left;
  }

  .log-list .log-row .log-when {
    grid-area: when;
    text-align: right;
  }

  
  .log-list .log-row .log-date {
    grid-area: when;
    justify-content: flex-start;
  }

  
  .log-log .log-head {
    display: none;
  }
}


.log-country {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.log-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 18px 0 0;
  font-size: 14px;
}


.rowact-nudge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}


.rowact-queued {
  flex: none;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}




.mail-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}


.mail-list {
  --mail-cols: 3.5ch minmax(0, 2.6fr) minmax(0, 1fr) 9ch 6ch 4ch 8ch;
}

.mail-head,
.mail-row {
  display: grid;
  grid-template-columns: var(--mail-cols);
  gap: 2px 12px;
  align-items: baseline;
}


.mail-row {
  position: relative;
  padding: 10px 12px 10px 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
  transition: background 90ms ease, border-color 90ms ease;
}

.mail-row:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: var(--line);
  border-left-color: var(--accent);
}


.mail-row.act {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.mail-row.wait {
  border-left-color: color-mix(in srgb, var(--ink) 22%, transparent);
}


.mail-row.done {
  background: transparent;
  border-left-color: color-mix(in srgb, var(--line) 70%, transparent);
}


.mail-head {
  font: inherit;
  color: var(--muted);
  padding: 0 12px 6px 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.mail-head > * {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.mail-turn-head,
.mail-moved-head,
.mail-moved-cell {
  text-align: center;
}

.mail-row:last-child {
  border-bottom: none;
}


.mail-num {
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}

.mail-subject {
  font-size: 14px;
  font-weight: 560;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-subject:hover {
  color: var(--accent);
  text-decoration: underline;
}


.mail-row.unread .mail-subject {
  font-weight: 680;
}

.mail-who {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-turn {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}


.mail-turn.yours {
  background: var(--accent-soft);
  color: var(--accent);
}


.mail-turn.fyi {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.mail-turn.theirs {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--muted);
}

.mail-when,
.mail-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.mail-moved {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--agent);
  background: var(--agent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  text-align: center;
  white-space: nowrap;
}




.mail-brief {
  grid-column: 2 / -1;
  display: grid;
  gap: 3px;
  min-width: 0;
  margin-top: 2px;
}

.mail-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}


.mail-label {
  flex: none;
  
  min-width: 8ch;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.5;
}

.mail-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 0;
}


.mail-action.none {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 4px;
  padding: 0 6px;
}


.mail-turn.spent {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}


.mail-situation {
  min-width: 0;
  white-space: normal;
}

.mail-snippet {
  grid-column: 2 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.mail-queued {
  grid-column: 2 / -1;
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-top: 3px;
}


.mail-nudge-form {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
}


.mail-row .mail-nudge-in {
  flex: 1 1 auto;
  min-width: 6ch;
  max-width: 60ch;
  font: inherit;
  font-size: 12.5px;
  padding: 2px 6px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.mail-row .mail-nudge-in::placeholder {
  color: color-mix(in srgb, var(--muted) 50%, transparent);
}

.mail-row:hover .mail-nudge-in,
.mail-row .mail-nudge-in:focus {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--line);
}


.mail-nudge-form .btn {
  flex: none;
  display: none;
}

.mail-row:hover .mail-nudge-form .btn,
.mail-nudge-form:focus-within .btn {
  display: inline-block;
}


.mail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}


.mail-tabs .chip-link.act {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}

.mail-tabs .chip-link.act.on {
  background: var(--accent-soft);
}

.mail-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}


@media (max-width: 720px) {
  
  .mail-head {
    display: none;
  }

  
  .mail-row {
    grid-template-columns: 3.5ch minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "num subject subject subject subject"
      "gap who     turn    when    moved"
      "gap snippet snippet snippet snippet"
      "gap queued  queued  queued  queued"
      "gap nudge   nudge   nudge   nudge";
  }

  .mail-num { grid-area: num; }
  .mail-subject { grid-area: subject; white-space: normal; }
  .mail-who { grid-area: who; }
  .mail-turn { grid-area: turn; }
  .mail-when { grid-area: when; }
  .mail-moved-cell { grid-area: moved; }
  .mail-snippet { grid-area: snippet; }
  .mail-brief { grid-area: snippet; }
  .mail-queued { grid-area: queued; }
  .mail-nudge-form { grid-area: nudge; }
  .mail-count { display: none; }
}


.worklist thead th {
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

.worklist thead th.num {
  text-align: right;
}


.worknudge {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
}

.worknudge-tag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 1.6;
}




.worknudge-done span:last-child,
.worknudge-failed span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.worknudge-done {
  color: color-mix(in srgb, var(--agent) 72%, var(--ink));
}

.worknudge-done .worknudge-tag {
  color: var(--agent);
  background: color-mix(in srgb, var(--agent) 14%, transparent);
}


.worknudge-failed {
  color: color-mix(in srgb, var(--warn) 72%, var(--ink));
}

.worknudge-failed .worknudge-tag {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}


.worksub {
  margin: 0 0 10px;
}


.worksub a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}


#work .drainpanel {
  border: 1px solid color-mix(in srgb, var(--agent) 35%, var(--line));
  border-left: 3px solid var(--agent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--agent) 5%, var(--panel));
}

#work .drainpanel h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

#work .drainpanel > p {
  margin: 0 0 4px;
  max-width: 68ch;
}


#work .drainpanel a:not(.btn) {
  color: var(--agent);
  text-decoration-color: color-mix(in srgb, var(--agent) 45%, transparent);
  text-underline-offset: 2px;
}


.drainqueue {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  gap: 7px;
  max-height: 46vh;
  overflow-y: auto;
}

.drainqueue li {
  font-size: 13px;
  line-height: 1.5;
}


.mail-orphans {
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn) 6%, var(--bg));
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 14px 0 0;
}

.mail-orphans p {
  margin: 0;
}

.mail-orphans .drainqueue {
  margin-bottom: 0;
}


.mail-orphans .worknudge-tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 500;
}


#runs .runs {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
  
  grid-template-columns: minmax(0, 1fr);
}
#runs .run {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px 14px;
}

#runs .run.bad {
  border-color: var(--warn);
}

#runs .run.noted {
  border-left: 3px solid var(--agent);
}
#runs .run-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#runs .run-badge {
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--agent-soft);
  color: var(--agent);
  white-space: nowrap;
}

#runs .run-badge.going::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: run-pulse 1.6s ease-in-out infinite;
}
@keyframes run-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #runs .run-badge.going::before { animation: none; opacity: 0.8; }
}
#runs .run-badge.pr {
  background: var(--accent-soft);
  color: var(--accent);
}
#runs .run-badge.refused,
#runs .run-badge.failed {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}

#runs .run-badge.gone {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
#runs .run-badge.gone::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
#runs .run-now {
  margin: 8px 0 0;
}
#runs .run-notes,
#runs .run-errors {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
#runs .run-notes li {
  margin: 2px 0;
}
#runs .run-errors li {
  color: var(--warn);
  margin: 2px 0;
}
#runs .run-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#runs .run-links code {
  color: var(--muted);
}


#runs .run-detail {
  margin-top: 10px;
  font-size: 0.9rem;
}
#runs .run-detail > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 2px 0;
  
  list-style-position: inside;
}
#runs .run-detail > summary:hover {
  color: var(--fg);
}
#runs .run-detail[open] > summary {
  margin-bottom: 4px;
}
#runs .run-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
#runs .run-paths code {
  color: var(--muted);
}


#runs .run-elapsed {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}



#runs .run-ref {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

#runs .run-badge.accepted {
  color: var(--accent);
  background: var(--accent-soft);
}


#runs .run-badge.rejected {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
}


#runs .run-why {
  width: 150px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: width 120ms ease;
}

#runs .run-why:focus { width: 300px; }

#runs .run-when { margin-left: auto; }


#runs .run-elapsed { margin-left: 10px; }

#runs .run-verify { display: inline-flex; }


#runs .run-check {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

#runs .run-check li { margin: 2px 0; }
#runs .run-check a { color: var(--accent); }

#runs .run-usage {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  margin-left: 10px;
}

#runs .runfilter {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

#runs .runfilter a {
  color: var(--muted);
  text-decoration: none;
  padding: 1px 8px;
  border-radius: var(--radius);
}

#runs .runfilter a.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
#runs .runfilter a:hover { color: var(--accent); }


#work .epic-row > .epic {
  padding: 14px 8px 5px;
  border-bottom: 1px solid var(--line);
}

#work .epic-row:first-child > .epic { padding-top: 4px; }

#work .epic-name {
  font-weight: 600;
  font-size: 14px;
}

#work .epic-count { margin-left: 10px; }

#work .epic-bar {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 4px;
  margin: 0 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

#work .epic-bar > span {
  display: block;
  height: 100%;
  background: var(--close-done);
}

#work .epic-here { float: right; }

#work .groupby { margin: -4px 0 12px; }


#goals .goal-tags { flex-wrap: wrap; }

#work .groupby a {
  color: var(--muted);
  text-decoration: none;
  padding: 1px 7px;
  border-radius: var(--radius);
}

#work .groupby a.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
#work .groupby a:hover { color: var(--accent); }


:root {
  --close-done: #1a7f5a;
  --close-frozen: #4b6ad8;
  --close-declined: #c2660f;

  
  --run-shipped: var(--close-done);
  --run-stopped: var(--close-frozen);
  --run-refused: var(--close-declined);
  --run-going: #a8a29a;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
    --close-done: #2e9c78;
    --close-frozen: #6688e0;
    --close-declined: #c8802f;
    --run-going: #7a756e;
  }

}
:root[data-theme="dark"] {
    --close-done: #2e9c78;
    --close-frozen: #6688e0;
    --close-declined: #c8802f;
    --run-going: #7a756e;
  }


:root[data-theme="dark"] {
  --close-done: #2e9c78;
  --close-frozen: #6688e0;
  --close-declined: #c8802f;
  --run-going: #7a756e;
}

:root[data-theme="light"] {
  --close-done: #1a7f5a;
  --close-frozen: #4b6ad8;
  --close-declined: #c2660f;
  --run-going: #a8a29a;
}

#work .chart {
  width: 100%;
  height: auto;
  margin-top: 10px;
  overflow: visible;
}


#work .ax-line { stroke: var(--line); stroke-width: 1; }
#work .ax-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }

#work .ax-text {
  fill: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

#work .ax-tick { text-anchor: middle; }


#work .hit-target {
  fill: transparent;
  pointer-events: all;
}

#work .hover-layer .tip {
  visibility: hidden;
  pointer-events: none;
}

#work .hit:hover .tip { visibility: visible; }


#work .hit:hover .hit-target { fill: color-mix(in srgb, var(--ink) 4%, transparent); }

#work .hover-layer .tip > rect {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.12));
}

#work .tip-day {
  fill: var(--ink);
  font-size: 10px;
  font-weight: 600;
}

#work .tip-line { fill: var(--muted); font-size: 10px; }

#work .tip-value {
  fill: var(--ink);
  font-size: 10px;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}

#work .stats-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

#work .statwin {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius);
}

#work .statwin.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
#work .statwin:hover { color: var(--accent); }

#work .stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 12px;
}

#work .stat-tiles .stat-value {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}


#work .stat-tiles a { color: inherit; text-decoration: none; }
#work .stat-tiles a:hover { color: var(--accent); text-decoration: underline; }

#work .stat-tiles .stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}


#work .chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#work .chart-key li { display: flex; align-items: center; gap: 5px; }

#work .chart-key .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

#work .swatch.close-done { background: var(--close-done); }
#work .swatch.close-frozen { background: var(--close-frozen); }
#work .swatch.close-declined { background: var(--close-declined); }

#work .swatch.run-shipped { background: var(--run-shipped); }
#work .swatch.run-stopped { background: var(--run-stopped); }
#work .swatch.run-refused { background: var(--run-refused); }
#work .swatch.run-going { background: var(--run-going); }

#work .stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

#work .stats-table th,
#work .stats-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

#work .stats-table th { color: var(--muted); font-weight: 500; }
#work .stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }


#work .pickcol {
  width: 1%;
  padding-right: 0;
  text-align: center;
  vertical-align: top;
}

#work .pickcol input {
  margin-top: 4px;
  cursor: pointer;
}


#work .buildbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}


#work .pill.building {
  color: var(--agent);
  background: var(--agent-soft);
  text-decoration: none;
}


#runs .run-items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}




#deeds .dd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 14px;
}

.dd-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dd-stat strong {
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dd-stat span {
  font-size: 12px;
  color: var(--muted);
}

.dd-stat em {
  font-size: 11px;
  font-style: normal;
  color: var(--accent);
  margin-top: 3px;
}


.dd-stat em.down {
  color: var(--warn);
}


.dd-heat {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 3px;
  margin: 14px 0 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.dd-cell {
  border-radius: 2px;
  background: var(--line);
}

.dd-cell.l1 {
  background: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.dd-cell.l2 {
  background: color-mix(in srgb, var(--accent) 70%, var(--line));
}

.dd-cell.l3 {
  background: var(--accent);
}

.dd-cell.today {
  outline: 1px solid var(--ink);
  outline-offset: 1px;
}

.dd-quiet {
  font-size: 13px;
  margin: 10px 0 18px;
}

.dd-quiet strong {
  color: var(--warn);
}


.dd-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
}

.dd-what-input {
  flex: 1 1 260px;
  min-width: 0;
}

.dd-add select {
  flex: 0 0 auto;
  width: auto;
}

.dd-add input[type="date"] {
  flex: 0 0 auto;
  width: auto;
}

.dd-mins-input {
  flex: 0 0 auto;
  width: 72px;
}

.dd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 760px) {
  .dd-body {
    grid-template-columns: minmax(0, 1fr);
  }
}


.dd-asides {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#deeds .dd-days section {
  margin: 0 0 20px;
}

#deeds h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}


.dd-wd {
  display: inline-block;
  width: 42px;
  color: var(--accent);
}

.dd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.dd-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}


.dd-kind {
  flex: 0 0 74px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.dd-kind.none {
  opacity: 0.55;
}

.dd-what {
  flex: 1 1 auto;
  min-width: 0;
}

.dd-notes {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.dd-notes :is(p, ul, ol) {
  margin: 3px 0;
}

.dd-minutes {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.dd-kinds table {
  width: 100%;
}

.dd-count,
.dd-last {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


.dd-kinds tr.never td {
  opacity: 0.5;
}


.dd-nudge-form {
  display: flex;
  flex: 0 1 240px;
  gap: 4px;
  min-width: 0;
}


.dd-row .dd-nudge-in {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
  padding: 3px 6px;
  width: 100%;
}

.dd-row:hover .dd-nudge-in,
.dd-row .dd-nudge-in:focus {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}


.dd-nudge-form button {
  display: none;
}

.dd-row:hover .dd-nudge-form button,
.dd-nudge-form:focus-within button {
  display: inline-block;
}

@media (max-width: 900px) {
  
  .dd-row {
    flex-wrap: wrap;
  }

  .dd-nudge-form {
    flex: 1 1 100%;
    margin-left: 74px;
  }
}


.dd-id {
  margin-left: 8px;
  opacity: 0.45;
}

.dd-line {
  display: block;
}


.dd-prompt {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--muted);
}

.dd-prompt.asked {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
}


.dd-pair {
  margin: -6px 0 14px;
  font-size: 13px;
}


.dd-expressed,
.dd-prompts {
  margin: 10px 0 0;
  font-size: 13px;
}

.dd-tally {
  margin-right: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


.dd-prompt-pick {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.dd-prompt-pick label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}

.dd-person-input {
  flex: 0 1 110px;
  min-width: 70px;
}


#deeds .worknudge {
  display: block;
  margin-top: 4px;
}


.routine {
  margin: 18px 0 4px;
}

.routine h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

.routine ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.routine li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}

.routine-time {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.routine a {
  color: var(--ink);
  text-decoration: none;
}

.routine a:hover {
  text-decoration: underline;
}

.routine-when {
  color: var(--muted);
  font-size: 11px;
}



















.pj {
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --sneg: #e34948;
  
  --viz-surface: var(--panel);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .pj {
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --sneg: #e66767;
  }

}
:root[data-theme="dark"] .pj {
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --sneg: #e66767;
  }


.pj .lede {
  max-width: 68ch;
}



.pj-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.pj-kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pj-kpi > span {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pj-kpi > strong {
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pj-kpi > em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.pj-kpi.bad > strong {
  color: var(--warn);
}



.pj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.pj-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.pj-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 13px;
  cursor: pointer;
}

.pj-seg button.on {
  background: var(--accent);
  color: var(--panel);
}

.pj-viewnote {
  flex: 1 1 320px;
  margin: 0;
}



.pj-figure {
  margin: 0 0 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
}

.pj-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pj-band {
  
  stroke: var(--viz-surface);
  stroke-width: 2;
  stroke-linejoin: round;
}

.pj-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.pj-grid.zero line {
  stroke: color-mix(in srgb, var(--ink) 35%, transparent);
}

.pj-grid text,
.pj-xlabel {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pj-age {
  fill: var(--muted);
  opacity: 0.65;
}


.pj-fi {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  opacity: 0.75;
}

.pj-marker line {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.45;
}

.pj-marker text {
  fill: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.pj-marker.warn line {
  stroke: var(--sneg);
  opacity: 0.8;
}

.pj-marker.warn text {
  fill: var(--sneg);
}

.pj-crosshair {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.5;
}

.pj-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.pj-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
}

.pj-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pj-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

.pj-swatch.line {
  height: 0;
  border-top: 2px dashed var(--ink);
  border-radius: 0;
  width: 14px;
  opacity: 0.75;
}

.pj-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.pj-readout span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pj-hint {
  margin: 0;
}



.pj-milestones ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.pj-milestones li {
  display: grid;
  grid-template-columns: 170px 190px 1fr;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.pj-ms-label {
  font-weight: 600;
}

.pj-ms-when {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

@media (max-width: 640px) {
  .pj-milestones li {
    grid-template-columns: 1fr;
  }
}



.pj-controls {
  margin: 26px 0;
}

.pj-controls-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.pj-controls-head h2 {
  margin: 0;
}

.pj-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pj-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.pj-groups fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px 14px;
  margin: 0;
  background: var(--panel);
}

.pj-groups legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 5px;
}

.pj-field {
  display: block;
  margin-top: 9px;
}

.pj-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}

.pj-field-head strong {
  font-variant-numeric: tabular-nums;
}

.pj-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  margin: 2px 0 0;
}



.pj-table h2 {
  margin-bottom: 8px;
}

.pj-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.pj-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.pj-table th,
.pj-table td {
  padding: 5px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.pj-table th:first-child,
.pj-table td:first-child,
.pj-table th:nth-child(2),
.pj-table td:nth-child(2) {
  text-align: left;
}

.pj-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--panel);
}

.pj-table tbody tr.retired td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pj-table tbody tr.edge td {
  border-top: 2px solid var(--accent);
}

.pj-table tbody tr.broke td {
  color: var(--sneg);
}

.pj-strong {
  font-weight: 600;
}



.pj-caveats {
  margin-top: 26px;
  max-width: 72ch;
}

.pj-caveats ul {
  padding-left: 18px;
}

.pj-caveats li {
  margin-bottom: 7px;
}


fieldset.pj-seg {
  margin: 0;
  padding: 0;
  min-width: 0;
}




.pj-chart {
  --hatch: color-mix(in srgb, var(--panel) 55%, transparent);
}

.pj-band.was {
  opacity: 0.92;
  mask-image: repeating-linear-gradient(
    45deg,
    #000 0 3px,
    transparent 3px 6px
  );
  mask-size: 100% 100%;
  stroke-width: 1.5;
}


.pj-past-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0.55;
}

.pj-dot {
  fill: var(--ink);
  stroke: var(--panel);
  stroke-width: 1.5;
}


.pj-dot.partial {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-dasharray: 2 2;
}


.pj-marker.now line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: none;
  opacity: 0.9;
}

.pj-marker.now text {
  fill: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}


.next-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  line-height: 1.35;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
}

.next-when {
  font-weight: 600;
  color: var(--ink);
}


.next-days {
  margin-left: 6px;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.next-where,
.next-note {
  color: var(--muted);
}

.next-note {
  font-size: 11px;
}


.next-chip.soon {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.next-chip.soon .next-when,
.next-chip.soon .next-days {
  color: var(--accent);
}


.next-chip.ahead {
  border-color: var(--line);
}


.next-chip.expected {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.next-chip.expected .next-when {
  color: var(--muted);
  font-weight: 500;
}


.next-chip.gone {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

.next-chip.gone .next-when {
  color: var(--warn);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}


.next-chip.none .next-when {
  color: var(--muted);
  font-weight: 500;
}


.next-chip.blank {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-style: italic;
  font-size: 11px;
}



.pj-college {
  margin: 0 0 22px;
}

.pj-college h2 {
  margin: 0 0 10px;
}

.pj-college .pj-kpis {
  margin-top: 0;
}

.pj-college p {
  max-width: 78ch;
  margin: 4px 0 0;
}




#yuka .yk-head {
  margin-bottom: 20px;
}

#yuka h1 {
  font-size: 22px;
  margin: 0 0 6px;
}

#yuka h2 {
  font-size: 15px;
  margin: 0 0 4px;
}

#yuka .yk-quiet {
  margin: 10px 0 0;
  font-size: 15px;
}

#yuka .panel {
  margin-bottom: 18px;
}

#yuka ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

#yuka .yk-prompt {
  font-size: 15px;
  line-height: 1.45;
}

#yuka .yk-note {
  margin: 4px 0 0;
  max-width: 68ch;
}


#yuka .yk-why {
  margin-top: 3px;
}

#yuka .yk-why > summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  border-bottom: 1px dotted var(--line);
}

#yuka .yk-why > summary::-webkit-details-marker { display: none; }
#yuka .yk-why > summary:hover { color: var(--accent); border-color: var(--accent); }
#yuka .yk-why[open] > summary { margin-bottom: 2px; }

#yuka .yk-moves > li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

#yuka .yk-moves > li:first-child {
  border-top: 0;
}

#yuka .yk-move-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

#yuka .yk-meta {
  margin-top: 3px;
}


#yuka .pill.yk-late {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

#yuka .pill.yk-due {
  color: var(--accent);
  background: var(--accent-soft);
}

#yuka .pill.yk-never,
#yuka .pill.yk-unscheduled,
#yuka .pill.yk-fresh {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
}

#yuka .yk-did {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  max-width: 560px;
}


#yuka .yk-what {
  width: 190px;
  flex: 0 1 190px;
  transition: flex-basis 120ms ease, width 120ms ease;
  min-width: 0;
  padding: 5px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#yuka .yk-what:focus {
  flex: 1 1 auto;
  width: auto;
}


#yuka .yk-postures li {
  padding: 8px 0 8px 14px;
  border-left: 3px solid var(--accent);
  margin-bottom: 10px;
}

#yuka .yk-work li,
#yuka .yk-retired li {
  padding: 5px 0;
}


#yuka .yk-ledger .yk-tiles {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 12px 0;
}

#yuka .yk-tiles > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#yuka .yk-n {
  font-size: 20px;
  line-height: 1.2;
}


#yuka a {
  color: var(--accent);
}


.dd-add .dd-capture {
  color: var(--muted);
  background: transparent;
}

.dd-add .dd-capture:hover {
  color: var(--accent);
  border-color: var(--accent);
}





#skills .lede {
  max-width: 62ch;
  margin: 0 0 10px;
}

#skills .chiprow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 6px;
}

#skills .chiprow-label {
  flex: 0 0 6rem;
  color: var(--ink);
  text-align: right;
}

#skills .chiprow .chips {
  flex: 1;
  margin: 0;
}


#skills .chip-n {
  margin-left: 4px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}


#skills .chip.empty {
  opacity: 0.45;
}


#skills .bar {
  justify-content: flex-start;
  gap: 8px;
  margin: 4px 0 18px;
}

#skills .bar input[type="search"] {
  flex: 1;
  max-width: 26rem;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#skills .bar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}

#skills .sk-group {
  margin: 26px 0;
}

#skills .sk-group h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}

#skills .sk-gloss {
  margin: 0 0 8px;
  max-width: 62ch;
}

#skills .sk-table {
  width: 100%;
  table-layout: fixed;
}

#skills .sk-table td {
  vertical-align: top;
  padding: 9px 10px 9px 0;
  border-top: 1px solid var(--line);
}

#skills .sk-id {
  width: 3.5rem;
  padding-top: 11px;
  font-variant-numeric: tabular-nums;
}

#skills .sk-name {
  width: 13rem;
}


#skills .sk-load {
  display: inline-block;
  margin-top: 3px;
  color: var(--accent);
  text-decoration: none;
}

#skills .sk-load:hover {
  text-decoration: underline;
}


#skills .sk-ver {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}


#skills .sk-use {
  margin-top: 2px;
  color: var(--muted);
}


#skills .sk-use.muted {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}


#skills .sk-coverage {
  margin: 0 0 12px;
  font-size: 14px;
}

#skills .sk-coverage a {
  text-decoration: none;
  color: var(--muted);
}

#skills .sk-coverage a:first-child {
  color: var(--warn);
}

#skills .sk-coverage a:hover {
  text-decoration: underline;
}

#skills .sk-name a {
  text-decoration: none;
  color: var(--ink);
}

#skills .sk-name a:hover strong {
  color: var(--accent);
}

#skills .sk-meta {
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

#skills .sk-desc {
  margin: 0;
  font-size: 13.5px;
}


#skills .sk-headings {
  margin: 4px 0 0;
  line-height: 1.5;
}


#skills tr.incomplete .sk-name strong {
  color: var(--warn);
}

#skills .pill.warn {
  margin-left: 6px;
}

@media (max-width: 760px) {
  #skills .chiprow {
    display: block;
  }

  #skills .chiprow-label {
    display: block;
    text-align: left;
    margin-bottom: 3px;
  }

  
  #skills .sk-table,
  #skills .sk-table tbody,
  #skills .sk-table tr,
  #skills .sk-table td {
    display: block;
    width: auto;
  }

  #skills .sk-table td.sk-what {
    border-top: 0;
    padding-top: 0;
  }
}


.pill.skill {
  margin-left: 8px;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  text-decoration: none;
}

.pill.skill:hover {
  border-color: var(--accent);
}


.pill.skill .skill-id {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.pill.gap {
  margin-left: 8px;
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}


#work .chip.sk-none {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  color: var(--warn);
}

#work .chip.sk-none.on {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}



@media (max-width: 760px) {
  
  main {
    padding: 16px 14px;
  }

  
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

  
  #providers table,
  #providers tbody,
  #providers tr,
  #providers td {
    display: block;
    width: auto;
  }

  #providers tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  #providers tr:last-child {
    border-bottom: none;
  }

  #providers td {
    padding: 0;
    border-bottom: none;
  }

  #providers td:empty {
    display: none;
  }

  #providers .pv-name {
    width: auto;
  }

  #providers .pv-contact,
  #providers .pv-status,
  #providers .pv-who {
    text-align: left;
    white-space: normal;
  }

  #providers .pv-who,
  #providers .pv-contact {
    margin-top: 6px;
  }

  #providers .pv-contact .btn {
    margin: 0 6px 4px 0;
  }

  
  #providers .chip {
    display: inline-block;
  }

  
  #goals .goal-table,
  #goals .goal-table tbody,
  #goals .goal-table tr,
  #goals .goal-table td {
    display: block;
    width: auto;
  }

  #goals .goal-table {
    table-layout: auto;
  }

  #goals .goal-table thead {
    display: none;
  }

  #goals .goal-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  #goals .goal-table td {
    padding: 2px 0;
    border-bottom: none;
  }

  #goals .goal-table td:empty {
    display: none;
  }

  #goals .goal-span {
    white-space: normal;
  }

  
  .log-measure,
  .log-spec,
  .log-credits,
  .log-value,
  .log-next,
  .log-country,
  .log-from {
    display: none;
  }

  
  #work .worklist,
  #work .worklist tbody,
  #work .worklist tr,
  #work .worklist td {
    display: block;
    width: auto;
  }

  #work .worklist thead {
    display: none;
  }

  #work .worklist tbody tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  #work .worklist td {
    padding: 0;
    border-bottom: none;
  }

  
  #work .worklist td:empty {
    display: none;
  }

  #work .worklist .pickcol,
  #work .worklist .workid,
  #work .worklist .workprio,
  #work .worklist .workcat,
  #work .worklist .workage {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    text-align: left;
  }

  #work .worklist .worktitle {
    margin: 4px 0;
  }

  
  #work .worklist .workacts {
    margin-top: 6px;
    white-space: normal;
  }

  
  #work .panel {
    overflow-x: visible;
  }

  
  p,
  td,
  li,
  dd,
  blockquote {
    overflow-wrap: break-word;
  }
}


#work .drainheld {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: color-mix(in srgb, var(--warn) 75%, var(--ink));
  max-width: 68ch;
}


.zone-notes {
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zone-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  border-left: 3px solid var(--accent, #6b8afd);
  background: var(--surface-2, rgba(107, 138, 253, 0.07));
  border-radius: 0 4px 4px 0;
}

.zone-when {
  color: var(--muted);
}

.zone-where {
  font-weight: 600;
}

.zone-tz,
.zone-offset {
  color: var(--muted);
  font-size: 11.5px;
}

.zone-problems .zone-note {
  border-left-color: var(--warn, #c98a2b);
  background: var(--surface-2, rgba(201, 138, 43, 0.09));
}


.queuecount {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--agent);
  border-radius: 999px;
  background: var(--agent-soft);
  color: var(--agent);
  font-size: 12px;
  font-weight: 560;
  text-decoration: none;
  line-height: 1;
  
  box-shadow: 0 1px 10px rgb(0 0 0 / 14%);
}

.queuecount strong {
  font-size: 14px;
  font-weight: 640;
}

.queuecount:hover {
  background: var(--agent);
  color: var(--panel);
}


@media (max-width: 640px) {
  .queuecount {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 6px 10px;
    font-size: 11px;
  }

  .queuecount strong {
    font-size: 13px;
  }
}




.week-single .week-head,
.week-single .week-body,
.week-single .allday-row {
  grid-template-columns: 56px 1fr;
  min-width: 0;
}

@media (max-width: 720px) {
  .week-single .week-head,
  .week-single .week-body,
  .week-single .allday-row {
    grid-template-columns: 40px 1fr;
  }
}


.week-single .evt .where {
  display: block;
}

.week-head .day-link {
  color: inherit;
  text-decoration: none;
}

.week-head .day-link:hover {
  text-decoration: underline;
}

.appt-added a {
  color: inherit;
}

.new-appt {
  margin-bottom: 10px;
}

.new-appt > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  list-style: none;
}

.new-appt > summary::-webkit-details-marker {
  display: none;
}

.new-appt > summary::before {
  content: "+";
  font-size: 13px;
}

.new-appt-form {
  margin-top: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px 16px 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  column-gap: 12px;
  max-width: 760px;
}

.new-appt-form .notice,
.new-appt-actions {
  grid-column: 1 / -1;
}

.new-appt-form input,
.new-appt-form select {
  width: 100%;
}

.new-appt-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}



.rel-start {
  margin-bottom: 18px;
}

.rel-editor h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 0 8px;
}

.rel-editor h3:first-of-type {
  margin-top: 4px;
}

.rel-editor textarea,
.rel-editor select {
  width: 100%;
}

.rel-editor textarea {
  min-height: 3.2em;
}

.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 12px;
}

.rel-grid .field p {
  margin: 6px 0 0;
}

.rel-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rel-list,
.rel-upcoming,
.rel-library ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rel-row,
.rel-upcoming li,
.rel-library li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.rel-row:first-child,
.rel-upcoming li:first-child {
  border-top: 0;
}

.rel-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}

.rel-row-main:hover strong {
  text-decoration: underline;
}

.rel-gist,
.rel-follow {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.rel-gist {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rel-upcoming li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pill.rel-reflected {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.pill.rel-archived {
  opacity: 0.6;
}

.rel-library > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.rel-library > summary h2 {
  margin: 0;
}

.rel-library[open] > summary {
  margin-bottom: 8px;
}

.rel-library li p {
  margin: 4px 0;
}




.mail-foot {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mail-foot .mail-nudge-form {
  flex: 1 1 auto;
}


.mail-unstar {
  flex: none;
  color: var(--muted);
  opacity: 0.55;
}

.mail-row:hover .mail-unstar,
.mail-unstar:focus-visible {
  opacity: 1;
}

.mail-error {
  grid-column: 2 / -1;
  color: #b0392f;
  margin: 8px 0 0;
}

.mail-warn {
  color: var(--warn);
  margin: 6px 0 0;
}

.mail-syncing {
  color: var(--accent);
  font-weight: 600;
}

input[type="search"].mail-search {
  display: block;
  width: 100%;
  max-width: 44ch;
  margin-top: 14px;
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}

.mail-reader-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mail-reader-bar .mail-gmail {
  margin-left: auto;
}

.mail-reader-subject {
  margin: 18px 0 14px;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}


.mail-reader-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.mail-briefing {
  position: sticky;
  top: calc(var(--chrome-h, 72px) + 12px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}

.mail-briefing h2 {
  font-size: 15px;
  margin: 0 0 8px;
}

.mail-briefing p {
  margin: 0 0 8px;
}

.mail-label-row {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.mail-next {
  font-weight: 600;
}

.mail-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mail-msg {
  display: grid;
  justify-items: start;
  gap: 4px;
  max-width: 88%;
}


.mail-msg.out {
  justify-self: end;
  justify-items: end;
}

.mail-msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.mail-msg.out .mail-msg-body {
  background: var(--accent);
  color: #fff;
}

.mail-msg-who {
  overflow-wrap: anywhere;
}

.mail-msg-meta summary {
  cursor: pointer;
}

.mail-compose {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.mail-compose h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.mail-compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.mail-compose-actions .mail-send {
  margin-left: auto;
}

.mail-recipients {
  position: relative;
  margin-top: 10px;
}

.mail-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.mail-chipbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow-wrap: anywhere;
}

.mail-chip button {
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
  font-size: 15px;
  line-height: 1;
}

.mail-chip button:hover {
  color: var(--ink);
}

.mail-chipbox input[type="text"].mail-chip-in {
  flex: 1 1 14ch;
  min-width: 10ch;
  border: 0;
  background: transparent;
  padding: 4px;
}

.mail-chipbox:focus-within {
  border-color: var(--accent);
}

.mail-suggest {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
}

.mail-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.mail-suggest button:hover {
  background: var(--accent-soft);
}

textarea.mail-body-in {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 200px;
  resize: vertical;
  line-height: 1.5;
}

button.linkish {
  font: inherit;
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.mail-review h4 {
  margin: 8px 0;
}

.mail-review dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 10px;
}

.mail-review dt {
  font-weight: 600;
  color: var(--muted);
}

.mail-review dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mail-review-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

.mail-sent {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 720px) {
  .mail-foot {
    grid-area: nudge;
  }

  .mail-error {
    grid-column: 1 / -1;
  }

  .mail-reader-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .mail-briefing {
    position: static;
    order: -1;
  }

  .mail-msg {
    max-width: 100%;
  }
}
@media (max-width: 720px) { .mail-unstar { opacity: 1; } }

.mail-reader .btn:disabled,
.mail-unstar:disabled {
  opacity: 0.45;
  cursor: default;
}


.mail-chipbox input[type="text"].mail-chip-in:focus {
  outline: none;
  box-shadow: none;
}

.mail-controls .btn {
  flex: none;
  white-space: nowrap;
}

.rel-editor a:not(.btn),
.rel-upcoming a,
.rel-list a,
.rel-list-head a,
.rel-library a {
  color: var(--accent);
}

.rel-list .rel-row-main {
  color: inherit;
}




.notice.error {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

input[type="email"] {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
  margin-top: 12px;
}

.edit-grid .edit-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-grid .edit-wide {
  grid-column: 1 / -1;
}

details.person-edit > summary,
details.add-person > summary {
  list-style: none;
  display: inline-block;
}

details.person-edit > summary::-webkit-details-marker,
details.add-person > summary::-webkit-details-marker {
  display: none;
}

details.add-person {
  padding: 12px 18px;
}

details.add-person:not([open]),
details.person-edit:not([open]) {
  background: none;
  border: 0;
  padding: 0;
}

details.add-person .notice {
  margin: 12px 0 0;
}

.pv-edit {
  margin-top: 6px;
}

.pv-edit > summary {
  cursor: pointer;
}

.pv-edit .notice {
  margin: 8px 0 0;
}

#work .capture {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 12px 14px;
}

#work .capture .capture-title {
  margin: 0;
}

#work .capture .capture-more {
  grid-column: 1 / -1;
  grid-row: 2;
}

#work .capture .capture-more > summary {
  cursor: pointer;
}

#work .capture .capture-more textarea {
  margin-top: 6px;
}

#work .chiprow-gap {
  display: inline-block;
  width: 14px;
}

@media (max-width: 640px) {
  .edit-grid {
    grid-template-columns: 1fr;
  }

  
  input[type="email"] {
    font-size: 16px;
  }
}

#work .notice a,
#providers .notice a {
  color: var(--accent);
}


.event-nudge-form { display: flex; align-items: center; gap: 8px; }
.event-nudge-form input[type="text"] { flex: 1; min-width: 0; }
.event-nudge-form .btn { flex: none; }


body:has(.app-sidebar) { padding-left: 224px; --chrome-h: 52px; }
html:has(.app-sidebar) { scroll-padding-top: 68px; }
.app-chrome.chrome { height: 52px; display: flex; align-items: center; padding: 0 24px; gap: 14px; position: sticky; top: 0; flex-shrink: 0; }
.section-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 224px; z-index: 45; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
.sidebar-brand { height: 52px; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); }
.sidebar-nav { padding: 14px 10px; }
.sidebar-link, .sidebar-group > summary { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.4; }
.sidebar-group { margin-bottom: 3px; }
.sidebar-group > summary { cursor: pointer; font-weight: 570; list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary::after { content: "›"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.sidebar-group[open] > summary::after { transform: rotate(90deg); }
.sidebar-link:hover, .sidebar-group > summary:hover { background: var(--agent-soft); }
.sidebar-child { padding-left: 26px; font-weight: 400; }
.sidebar-link.on { background: var(--agent-soft); color: var(--agent); font-weight: 600; }
.sidebar-group > summary.on { color: var(--agent); }
.sidebar-link:focus-visible, .sidebar-group > summary:focus-visible, .sidebar-toggle:focus-visible { outline: 2px solid var(--agent); outline-offset: -2px; }
.sidebar-toggle, .sidebar-backdrop, .mobile-wordmark { display: none; }
@media (max-width: 760px) {
  body:has(.app-sidebar) { padding-left: 0; }
  .app-chrome.chrome { padding: 0 12px; }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
  .mobile-wordmark { display: block; }
  .section-title { margin-left: auto; font-size: 12px; }
  .app-sidebar { display: none; top: 52px; width: min(280px, 85vw); z-index: 60; box-shadow: 8px 0 30px rgb(0 0 0 / 16%); }
  .sidebar-brand { display: none; }
  body.sidebar-open .app-sidebar { display: block; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 52px 0 0; border: 0; border-radius: 0; background: rgb(0 0 0 / 30%); z-index: 55; }
  .sidebar-link, .sidebar-group > summary { min-height: 44px; font-size: 14px; }
}


.sidebar-item { display: flex; align-items: center; position: relative; }
.sidebar-item > .sidebar-link { flex: 1; min-width: 0; padding-right: 30px; }
.sidebar-pin-form { position: absolute; right: 4px; margin: 0; }
.sidebar-pin { border: 0; border-radius: 4px; background: transparent; color: var(--muted); padding: 5px; font-size: 15px; cursor: pointer; line-height: 1; }
.sidebar-pin:hover, .sidebar-pin[aria-pressed="true"] { color: var(--agent); }
.sidebar-pin:focus-visible { outline: 2px solid var(--agent); }
.sidebar-pinned { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sidebar-pinned h2 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 12px 6px; }
@media (max-width: 760px) { .sidebar-pin { padding: 10px; } .sidebar-item > .sidebar-link { padding-right: 40px; } }


.calendar-settings { position: relative; }
.calendar-settings > summary { list-style: none; cursor: pointer; font-size: 1.2rem; }
.calendar-settings > summary::-webkit-details-marker { display: none; }
.calendar-settings-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(330px, calc(100vw - 32px)); padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px #0003;
}
.calendar-settings-panel .ranges { margin: 10px 0 0; flex-wrap: wrap; }
.calendar-settings-panel .ranges-sep { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
@media (max-width: 640px) {
  .nav-arrows:has(.calendar-settings) { width: 100%; justify-content: flex-end; }
}


#yuka .yk-stats { margin: 10px 0 8px; padding: 10px 12px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#yuka .yk-durations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#yuka .yk-duration-card + .yk-duration-card { border-left: 1px solid var(--line); padding-left: 18px; }
#yuka .yk-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; color: var(--muted); }
#yuka .yk-duration { font-size: 17px; line-height: 1.15; margin: 3px 0 5px; font-variant-numeric: tabular-nums; }
#yuka .yk-duration > strong { font-size: 30px; font-weight: 650; letter-spacing: -.05em; }
#yuka .yk-duration > span { font-size: 13px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
#yuka .yk-timeline { margin: 9px 0 7px; }
#yuka .yk-timeline-bar { display: flex; gap: 3px; height: 9px; border-radius: 5px; overflow: hidden; }
#yuka .yk-dating-band { background: color-mix(in srgb, var(--accent) 35%, var(--panel)); }
#yuka .yk-married-band, #yuka .yk-dot { background: var(--accent); }
#yuka .yk-timeline-labels { display: flex; gap: 18px; margin-top: 5px; font-size: 11px; }
#yuka .yk-timeline-labels > :last-child { margin-left: auto; }
#yuka .yk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
#yuka .yk-dot.dating { background: color-mix(in srgb, var(--accent) 35%, var(--panel)); }
#yuka .yk-countdowns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--line); padding-top: 7px; }
#yuka .yk-countdown { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px; border-radius: 7px; background: var(--bg); }
#yuka .yk-countdown.next { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
#yuka .yk-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
#yuka .yk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3; }
#yuka .yk-ring-track { stroke: var(--line); }
#yuka .yk-ring-fill { stroke: var(--accent); stroke-linecap: round; }
#yuka .yk-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.1; }
#yuka .yk-ring-value strong { font-size: 18px; font-variant-numeric: tabular-nums; }
#yuka .yk-ring-value span { font-size: 10px; color: var(--muted); }
#yuka .yk-occasion { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
#yuka .yk-occasion strong { font-size: 12px; color: var(--ink); }
#yuka .yk-next { color: var(--accent); font-weight: 600; }
#yuka .yk-stats-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; }
@media (max-width: 1050px) {
  #yuka .yk-countdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  #yuka .yk-stats { padding: 9px 10px 6px; }
  #yuka .yk-durations { gap: 10px; }
  #yuka .yk-duration-card + .yk-duration-card { padding-left: 10px; }
  #yuka .yk-duration > strong { font-size: 28px; }
  #yuka .yk-duration > span { display: block; margin: 4px 0 0; font-size: 11px; }
  #yuka .yk-duration-card .small { font-size: 10px; }
  #yuka .yk-countdown { gap: 5px; padding: 6px 4px; }
  #yuka .yk-ring { width: 42px; height: 42px; }
  #yuka .yk-ring-value strong { font-size: 16px; }
  #yuka .yk-occasion { font-size: 10px; }
  #yuka .yk-occasion strong { font-size: 11px; }
}
.calendar-settings-panel { max-height: min(650px, 70vh); overflow-y: auto; }
.calendar-toggle-settings { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.calendar-legend { margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--line); }
.calendar-legend h2 { font-size: 1rem; }
.ahead-countdown { color: var(--muted); font-size: .85em; }


#yuka .yk-lifetime { border-top: 1px solid var(--line); padding: 7px 0 6px; }
#yuka .yk-lifetime-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 6px; }
#yuka .yk-life-caption { color: var(--muted); font-size: 12px; }
#yuka .yk-life-years { font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
#yuka .yk-life-years span { font-size: 12px; font-weight: 400; }
#yuka .yk-life-units { color: var(--muted); font-size: 11px; }
#yuka .yk-life-units strong { color: var(--ink); font-variant-numeric: tabular-nums; }
#yuka .yk-life-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
#yuka .yk-life-method { margin-top: 5px; font-size: 11px; color: var(--muted); }
#yuka .yk-life-method summary { cursor: pointer; }
#yuka .yk-life-method p { margin: 6px 0; max-width: 85ch; }

#yuka .yk-about { margin-top: 6px; font-size: 11px; }
#yuka .yk-about summary { cursor: pointer; }
#yuka .yk-about p { margin: 4px 0; }
#yuka .yk-head { margin-bottom: 12px; }
#yuka .yk-quiet { margin-top: 5px; font-size: 12px; }
@media (max-width: 540px) {
  #yuka .yk-lifetime-head { gap: 2px 8px; }
  #yuka .yk-life-caption { font-size: 11px; }
  #yuka .yk-life-units { width: 100%; }
}


.event-feed { max-width: 1000px; }
.event-feed-day { margin: 28px 0; }
.event-feed-day > h2 { font-size: 17px; margin: 0 0 12px; }
.event-feed-card { padding: 20px 22px; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); scroll-margin-top: 70px; }
.event-feed-title { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.event-feed-title h3 { font-size: 18px; line-height: 1.4; margin: 0; }
.event-feed-title h3 a { color: var(--ink); text-decoration: none; }
.event-feed-title h3 a:hover { text-decoration: underline; }
.event-feed-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 20px 0; }
.event-feed-facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 5px; }
.event-feed-facts dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.event-feed-facts a { color: var(--accent); text-underline-offset: 3px; }
.event-feed-description { font-size: 13px; color: var(--muted); line-height: 1.7; white-space: pre-line; }
.event-feed-source { display: flex; flex-wrap: wrap; gap: 12px 25px; color: var(--muted); font-size: 11px; padding-bottom: 14px; }
.event-feed-actions { border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; }
.event-feed-actions summary { cursor: pointer; color: var(--accent); }
.event-feed-actions .hap-actions { margin-top: 15px; }
@media (max-width: 600px) {
  .event-feed-card { padding: 16px; }
  .event-feed-facts { grid-template-columns: 1fr; gap: 12px; }
  .event-feed-title { flex-wrap: wrap; }
}


#charlie .family-header, #yuka .family-header { margin-bottom: 12px; }
#charlie .family-header h1, #yuka .family-header h1 { font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.family-overview { display: flex; flex-direction: column; min-height: 340px; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.family-summary, #yuka .yk-durations { min-height: 72px; }
.family-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; color: var(--muted); }
#charlie .ch-age { font-size: 26px; line-height: 1.2; margin: 3px 0 5px; letter-spacing: -.03em; }
#charlie .family-summary p:last-child { margin: 0; }
#charlie .ch-clock { margin: 12px 0; }
.family-countdowns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.family-countdown { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 7px; background: var(--bg); }
.family-countdown-number { color: var(--ink); font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.family-countdown .small { font-size: 11px; }
#charlie .mori-legend { font-size: 11px; gap: 5px 16px; justify-content: space-between; }
@media (max-width: 900px) {
  .family-countdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-overview { min-height: 390px; }
}
@media (max-width: 520px) {
  .family-overview { padding: 12px; min-height: 440px; }
  .family-countdown { gap: 7px; padding: 7px; }
  .family-countdown-number { font-size: 22px; }
}

.work-star { display: inline-flex; vertical-align: baseline; margin: 0 6px 0 0; }
.work-star button { border: 0; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; padding: 4px; cursor: pointer; }
.work-star button[aria-pressed="true"], .work-star button:hover { color: var(--accent); }
.work-star button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sidebar-pinned .sidebar-link { overflow-wrap: anywhere; }

.family-time-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.family-time-heading > strong { font-size: 22px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.family-time-heading > strong > span { font-size: 12px; font-weight: 400; }
.family-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; }
.family-overview a { color: var(--accent); }
.family-countdown { min-height: 70px; box-sizing: border-box; }


#work { position: relative; }
#work .work-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; padding-right: 120px; }
#work .work-heading h1 { margin: 0; font-size: 24px; }
#work a { color: var(--accent); }
#work .work-capture > summary { position: absolute; top: 0; right: 0; list-style: none; cursor: pointer; }
#work .work-capture > summary::-webkit-details-marker { display: none; }
#work .work-capture .capture { margin-bottom: 14px; }
#work #worksearch { margin-bottom: 12px; }
#work #worksearch input[type="search"] { min-width: 0; }
#work .tabs { margin-bottom: 10px; }
#work .work-filters { border-top: 1px solid var(--line); margin-bottom: 14px; }
#work .work-filters > summary { padding: 12px 0; cursor: pointer; font-size: 13px; }
#work .work-filters > summary > span { margin-left: 12px; }
#work .work-filters[open] { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
#work .work-results { padding: 0 14px; overflow: visible; }
#work .work-bulk { padding: 10px 0; }
#work .work-bulk > summary { cursor: pointer; }
#work .worklist { width: 100%; }
#work .worklist thead { display: none; }
#work .worklist td { padding: 14px 0; vertical-align: top; }
#work .worklist .pickcol { padding-right: 12px; padding-top: 20px; width: 22px; }
#work .worklist .worktitle { width: auto; padding-right: 20px; }
#work .work-row-title { display: flex; align-items: baseline; gap: 8px; }
#work .work-row-title > a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 550; line-height: 1.5; }
#work .work-row-title > a:hover { color: var(--accent); text-decoration: underline; }
#work .work-star { flex-shrink: 0; margin: 0; }
#work .work-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 5px 0 0 31px; color: var(--muted); font-size: 11px; }
#work .work-row-meta .pill { font-size: 10px; padding: 1px 6px; }
#work .work-priority.p1 { color: var(--warn); }
#work .work-row-controls { display: flex; align-items: center; gap: 6px; }
#work .work-row-controls > form { margin: 0; }
#work .work-row-menu { position: relative; }
#work .work-row-menu > summary { list-style: none; cursor: pointer; color: var(--muted); }
#work .work-row-menu > summary::-webkit-details-marker { display: none; }
#work .work-row-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 310px; box-sizing: border-box; padding: 14px; z-index: 10; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px rgb(0 0 0 / 20%); white-space: normal; }
#work .work-row-panel .rowact-nudge { margin: 6px 0 16px; }
#work .work-row-panel .rowact { flex-wrap: wrap; margin: 6px 0 14px; }
#work .work-row-panel .rowact > .rowact-note { width: 100%; box-sizing: border-box; border-color: var(--line); background: var(--bg); margin-bottom: 4px; }
#work .work-row-panel .rowact-more { flex-wrap: wrap; width: 240px; }
@media (max-width: 760px) {
  #work .work-heading { padding-right: 100px; }
  #work #worksearch { flex-wrap: wrap; }
  #work #worksearch input[type="search"] { flex-basis: 100%; }
  #work .tabs { overflow-x: auto; }
  #work .tab { white-space: nowrap; padding: 6px 9px; }
  #work .worklist .pickcol { display: block; padding: 0; margin: 0 0 5px; }
  #work .worklist .worktitle { padding: 0; }
  #work .worklist td.workacts { padding: 8px 0 0 31px; }
  #work .work-row-menu { position: static; }
  #work .work-row-controls { flex-wrap: wrap; position: relative; }
  #work .work-row-panel { right: auto; left: -31px; width: min(310px, calc(100vw - 56px)); }
}
@media (max-width: 760px) {
  #work .tabs { flex-wrap: nowrap; }
  #work .tab { font-size: 12px; padding: 6px 7px; }
  #work .tab .small { font-size: 11px; }
  #work .worklist tbody tr:not(.epic-row) { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
  #work .worklist .pickcol { grid-column: 1; padding-top: 7px; }
  #work .worklist .worktitle { grid-column: 2; margin: 0; }
  #work .worklist td.workacts { grid-column: 2; }
}
@media (max-width: 760px) {
  #work .work-row-panel { left: -61px; }
}


#work .work-quick-sort { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#work .work-quick-sort > span { color: var(--muted); font-size: 12px; }
#work .workacts { width: 300px; min-width: 280px; }
#work .workacts > .rowact-nudge { margin: 0 0 8px; gap: 6px; }
#work .workacts > .rowact-nudge input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); }
#work .workacts > .rowact-nudge input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#work .work-row-controls { justify-content: flex-end; }
#work .work-bury-form label { display: grid; gap: 8px; font-size: 12px; }
#work .work-bury-form input[type="text"] { width: 100%; box-sizing: border-box; min-width: 0; }
#work .work-bury-form > button { margin-top: 10px; }
#work .pickcol input[type="checkbox"] { appearance: none; width: 18px; height: 18px; padding: 0; margin: 0; display: inline-grid; place-content: center; border: 1.5px solid color-mix(in srgb, var(--muted) 65%, var(--line)); border-radius: 5px; background: var(--bg); cursor: pointer; vertical-align: middle; }
#work .pickcol input[type="checkbox"]::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-1px) rotate(-45deg) scale(0); }
#work .pickcol input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
#work .pickcol input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
#work .pickcol input[type="checkbox"]:hover { border-color: var(--accent); }
#work .pickcol input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#work .worklist tr:has(.pickcol input:checked) { background: color-mix(in srgb, var(--accent) 5%, transparent); }
@media (max-width: 760px) {
  #work .workacts { min-width: 0; width: auto; }
  #work .worklist td.workacts { padding-left: 0; }
  #work .work-row-controls { justify-content: flex-start; }
  #work .work-row-panel { left: -30px; }
  #work .pickcol input[type="checkbox"] { width: 20px; height: 20px; }
  #work .work-quick-sort { gap: 6px; }
  #work .work-quick-sort select { max-width: 190px; }
}
@media (forced-colors: active) {
  #work .pickcol input[type="checkbox"] { appearance: auto; }
  #work .pickcol input[type="checkbox"]::after { display: none; }
}


.rowgrid-day-label { min-width: 0; padding-bottom: 5px; }

.rowgrid-row .rowgrid-track { height: calc(var(--bands, 0) * 15px + var(--lines, 1) * 42px + 8px); }
.rbar { top: calc(var(--bands, 0) * 15px + var(--line, 0) * 42px + 2px); height: 34px; }
.rbar > span { box-sizing: border-box; width: max-content; max-width: min(170px, calc(var(--ratio, 1) * 100%)); white-space: normal; padding: 3px 5px; border-radius: 4px; background: color-mix(in srgb, var(--cal, var(--accent)) 15%, var(--panel)); }
.rbar > span > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 14px; }
.rbar.bare { height: 9px; }
.rbar:focus-visible { z-index: 4; outline: 2px solid var(--accent); }


#work .worklist .pickcol { padding-left: 12px; }
#work .worklist td.workacts { padding-right: 12px; }
#work .pickcol input[type="checkbox"] { transition: background-color 160ms ease, border-color 160ms ease; }
#work .pickcol input[type="checkbox"]:active { transform: scale(.9); }
#work .pickcol input.work-check-animate:checked { animation: work-checkbox-settle 320ms ease-out; }
#work .pickcol input.work-check-animate:checked::after { animation: work-checkmark-pop 420ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes work-checkbox-settle {
  0% { transform: scale(.86); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  55% { transform: scale(1.12); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 8px transparent; }
}
@keyframes work-checkmark-pop {
  0% { transform: translateY(-1px) rotate(-65deg) scale(.35); clip-path: inset(0 100% 0 0); opacity: 0; }
  40% { clip-path: inset(0 0 0 0); opacity: 1; }
  65% { transform: translateY(-1px) rotate(-40deg) scale(1.22); }
  100% { transform: translateY(-1px) rotate(-45deg) scale(1); clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (max-width: 760px) {
  #work .worklist tbody tr:not(.epic-row) { padding: 12px; }
  #work .worklist .pickcol { padding-left: 0; }
  #work .worklist td.workacts { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #work .pickcol input[type="checkbox"],
  #work .pickcol input.work-check-animate:checked,
  #work .pickcol input.work-check-animate:checked::after { animation: none; transition: none; }
  #work .pickcol input[type="checkbox"]:active { transform: none; }
}


.ahead-item.birthday-today { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.ahead-item.birthday-today .ahead-when { color: var(--accent); font-weight: 700; }

.rbar:not(.bare) { background: transparent; border: 0; border-radius: 0; }
.rbar:not(.bare)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--cal, var(--accent)) 70%, var(--panel)); }
.rbar:not(.bare) > span { min-height: 28px; padding: 3px 5px; }


#work .work-row-title { align-items: flex-start; }
#work .work-row-title > a { line-height: 26px; }
.work-star button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 3px; box-sizing: border-box; }
.work-star-icon { display: block; width: 20px; height: 20px; overflow: visible; fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.work-star button[aria-pressed="true"] .work-star-icon { fill: currentColor; }
#work .pickcol input[type="checkbox"] { width: 20px; height: 20px; }
#work .worklist .pickcol { padding-top: 17px; }
.work-star-pop .work-star-icon { animation: work-star-burst 500ms cubic-bezier(.2,.8,.2,1); }
@keyframes work-star-burst {
  0% { transform: scale(.45) rotate(-55deg); opacity: .5; filter: drop-shadow(0 0 0 transparent); }
  55% { transform: scale(1.35) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); }
  78% { transform: scale(.93) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 transparent); }
}
.work-copy-id { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: copy; }
.work-copy-id:hover { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.work-copy-id:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.work-copy-status:not(:empty) { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); z-index: 12; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); white-space: nowrap; font-size: 11px; box-shadow: 0 2px 6px rgb(0 0 0 / 12%); }
@media (max-width: 760px) {
  #work .worklist .pickcol { padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-star-pop .work-star-icon { animation: none; }
}
#work .pickcol input[type="checkbox"] { display: grid; }


#work .worklist td { padding-top: 8px; padding-bottom: 8px; }
#work .worklist .pickcol { padding-top: 11px; padding-right: 8px; }
#work .worklist .worktitle { padding-right: 14px; }
#work .work-row-title { gap: 5px; }
#work .work-row-meta { gap: 3px 9px; margin: 0 0 0 31px; line-height: 18px; }
#work .workacts > .rowact-nudge { margin-bottom: 4px; gap: 4px; }
#work .workacts > .rowact-nudge input { height: 28px; padding: 3px 7px; border-radius: 5px; }
#work .workacts > .rowact-nudge > .btn,
#work .work-row-controls > form > .btn,
#work .work-row-menu > summary { min-height: 28px; padding: 3px 7px; font-size: 12px; line-height: 20px; box-sizing: border-box; border-radius: 5px; }
#work .work-row-controls { gap: 4px; }
@media (min-width: 1100px) {
  #work .workacts { width: 420px; min-width: 420px; }
  #work .workacts > .rowact-nudge { display: inline-flex; width: 204px; margin: 0 6px 0 0; vertical-align: top; }
  #work .work-row-controls { display: inline-flex; vertical-align: top; }
}
@media (max-width: 760px) {
  #work .worklist tbody tr:not(.epic-row) { padding: 8px 10px; }
  #work .worklist .pickcol { padding-top: 3px; padding-right: 0; }
  #work .worklist .worktitle { padding: 0; }
  #work .worklist td.workacts { padding: 5px 0 0 31px; }
  #work .workacts > .rowact-nudge input,
  #work .workacts > .rowact-nudge > .btn,
  #work .work-row-controls > form > .btn,
  #work .work-row-menu > summary { min-height: 32px; }
}
@media (max-width: 760px) {
  #work .work-row-panel { left: -61px; }
}


#work .work-filter-primary { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; padding-bottom: 8px; }
#work .work-filter-field { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
#work .work-filter-field select { width: 100%; min-width: 130px; max-width: 210px; padding: 5px 8px; font-size: 12px; }
#work .work-filter-primary > .btn { margin-bottom: 1px; }
#work .work-filter-primary > a { padding: 7px 2px; }
#work .work-filter-more > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
#work .work-filter-secondary { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
@media (max-width: 760px) {
  #work .work-filter-primary, #work .work-filter-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #work .work-filter-field select { min-width: 0; max-width: none; }
}


#work .tabs, #work .work-favorites { display: flex; align-items: center; gap: 6px; }
#work .work-favorites { margin: 8px 0; }
#work .tabs .tab, #work .work-favorites .chip, #work .work-kind .chip {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  min-height: 30px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 500; line-height: 20px; text-decoration: none;
  white-space: nowrap;
}
#work .tabs .tab .small { font-size: inherit; line-height: inherit; }
#work .tabs .tab:hover, #work .work-favorites .chip:hover, #work .work-kind .chip:hover { background: var(--accent-soft); border-color: var(--accent); }
#work .tabs .tab.on, #work .work-favorites .chip.on, #work .work-kind .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
#work .tabs .tab:focus-visible, #work .work-favorites .chip:focus-visible, #work .work-kind .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


@media (min-width: 761px) {
  #work .worklist { table-layout: fixed; }
}
#work .work-row-meta .doacts { display: contents; }
#work .work-row-meta .doact { display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 1px 6px; min-height: 20px; box-sizing: border-box; border-radius: 999px; font-size: 10px; line-height: 16px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 761px) {
  #work .worklist .pickcol { width: 44px; }
}

#work .work-general-nudge { display: flex; gap: 6px; margin: 0 0 12px; }
#work .work-general-nudge input[type="text"] { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
#work .work-general-queued { margin: 0 0 12px; font-size: 12px; }
#work .work-general-queued summary { cursor: pointer; color: var(--muted); }


.passage-nudge {
  position: fixed;
  z-index: 80;
  bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3rem));
  right: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  padding: .8rem;
  background: var(--bg, #faf9f6);
  color: var(--ink, #292824);
  border: 1px solid var(--line, #ddd);
  border-radius: 12px;
  box-shadow: 0 5px 24px #0002;
  max-height: 75dvh;
  overflow-y: auto;
}
.passage-nudge blockquote {
  margin: .6rem 0;
  padding: .4rem .7rem;
  border-left: 3px solid currentColor;
  max-height: 20dvh;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .9rem;
}
.passage-nudge textarea { width: 100%; box-sizing: border-box; margin-bottom: .5rem; }
.passage-saved { position: fixed; bottom: 4rem; right: 1rem; z-index: 80; padding: .7rem; background: var(--bg, #faf9f6); border: 1px solid currentColor; border-radius: 8px; }
.work-detail-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; padding: .7rem .9rem; margin: .8rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: .85rem; }
.work-detail-meta > div { display: flex; gap: .4rem; align-items: baseline; min-width: 0; }
.work-detail-meta dt { color: var(--muted); }
.work-detail-meta dd { margin: 0; overflow-wrap: anywhere; }
.work-comments > h2 { margin-bottom: .2rem; font-size: 1.1rem; }
.work-comment { margin: .6rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.work-comment > summary { padding: .7rem .9rem; cursor: pointer; }
.work-comment-title { font-weight: 600; overflow-wrap: anywhere; }
.work-comment-meta { display: block; color: var(--muted); font-size: .78rem; margin: .25rem 0 0 1rem; }
.work-comment-body { padding: 0 .9rem .8rem; overflow-wrap: anywhere; }
.work-comment-body > :first-child { margin-top: .4rem; }
.work-detail-queued { margin: .8rem 0; }
.work-detail-queued-note { display: flex; align-items: baseline; gap: .5rem; margin: .4rem 0; }
.work-detail-queued-note p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.work-summary { margin: .8rem 0; padding: .7rem .9rem; background: var(--accent-soft); border-radius: var(--radius); }
.work-summary h2 { font-size: .85rem; color: var(--accent); margin: 0 0 .4rem; }
.work-summary p { margin: .4rem 0; overflow-wrap: anywhere; }
.work-summary details > summary { color: var(--muted); font-size: .8rem; cursor: pointer; }
.work-summary form { margin-top: .5rem; }
.work-summary textarea { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
#work .work-row-summary { display: block; margin: .2rem 0 .25rem 2rem; font-size: .82rem; line-height: 1.4; color: var(--muted); font-weight: normal; overflow-wrap: anywhere; }
#work .work-summary-empty { font-size: .75rem; text-decoration: none; opacity: .8; }


.queue-widget { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 6px; }
.queue-widget .queuecount { position: static; cursor: pointer; list-style: none; }
.queuecount::-webkit-details-marker { display: none; }
.queue-add { border: 1px solid var(--agent); border-radius: 50%; background: var(--agent-soft); color: var(--agent); width: 32px; height: 32px; padding: 0; font-size: 22px; cursor: pointer; }
.queue-panel { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(390px, calc(100vw - 28px)); max-height: min(480px, 65dvh); overflow: auto; padding: 14px; border: 1px solid var(--agent); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 8px 30px rgb(0 0 0 / 20%); font-size: 13px; }
.queue-panel header { display: flex; justify-content: space-between; gap: 16px; }
.queue-panel ol { list-style: none; padding: 0; margin: 10px 0 0; }
.queue-panel li { border-top: 1px solid var(--line); padding: 10px 0; }
.queue-panel small { color: var(--muted); overflow-wrap: anywhere; }
.queue-panel p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.queue-composer { width: min(460px, calc(100vw - 28px)); max-height: 85dvh; overflow: auto; padding: 22px; border: 1px solid var(--agent); border-radius: 14px; background: var(--panel); color: var(--ink); }
.queue-composer::backdrop { background: rgb(0 0 0 / 40%); }
.queue-composer h2 { margin-top: 0; }
.queue-position { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.queue-composer textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 8px; font: inherit; }
.queue-composer footer { display: flex; justify-content: flex-end; gap: 8px; }
.queue-error { color: var(--bad); font-size: 13px; }

.queue-preview[open] .queue-panel { transform-origin: bottom right; animation: queue-reveal 220ms cubic-bezier(.16, 1, .3, 1) both; }
.queue-preview.closing .queue-panel { animation: queue-dismiss 160ms ease-in both; pointer-events: none; }
@keyframes queue-reveal { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes queue-dismiss { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(5px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .queue-preview[open] .queue-panel, .queue-preview.closing .queue-panel { animation: none; } }

.queue-composer footer { margin-top: 16px; }
.queue-composer footer .btn { min-height: 40px; padding: 9px 16px; font-weight: 600; }
.queue-composer .queue-cancel { background: transparent; color: var(--muted); }
.queue-composer .queue-cancel:hover { background: var(--bg); color: var(--ink); }
.queue-composer .queue-submit { background: var(--agent); border-color: var(--agent); color: var(--bg); box-shadow: 0 2px 5px rgb(0 0 0 / 12%); }
.queue-composer .queue-submit:hover { filter: brightness(1.08); }
.queue-composer footer .btn:focus-visible { outline: 3px solid var(--agent); outline-offset: 3px; }
.queue-composer .queue-submit:disabled { opacity: .65; cursor: wait; box-shadow: none; }
.work-kind { display: flex; gap: .5rem; margin: .7rem 0; }
.item-kind { font-size: .65rem; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; }
.item-kind-task { background: var(--accent-soft); color: var(--accent); }
.item-kind-email { background: var(--agent-soft); color: var(--agent); }
#work .work-row-title { position: relative; padding-left: 31px; }
#work .work-row-title > .work-star { position: absolute; left: 0; top: 0; }
#work .work-row-summary { margin-left: 31px; }
.email-row-icon { display: block; width: 24px; height: 24px; color: var(--agent); }
.work-email-scope { margin: .6rem 0; }




#work .worklist td.workacts { text-align: left; }
#work .workacts > .rowact-nudge { align-items: center; }
#work .workacts > .rowact-nudge > .btn { flex: 0 0 auto; }
#work .work-row-controls { justify-content: flex-start; align-items: center; }
#work .work-row-controls > a.btn { min-height: 28px; padding: 3px 7px; font-size: 12px; line-height: 20px; box-sizing: border-box; border-radius: 5px; }
@media (max-width: 760px) {
  #work .work-row-controls > a.btn { min-height: 32px; }
}


#work .workacts > .work-row-controls { display: flex; width: 100%; }
#work .workacts > .work-row-controls > form,
#work .workacts > .work-row-controls > details,
#work .workacts > .work-row-controls > a.btn { flex: 1 1 auto; min-width: 0; }
#work .workacts > .work-row-controls > form > .btn,
#work .workacts > .work-row-controls > details > summary { width: 100%; text-align: center; }
#work .workacts > .work-row-controls > a.btn { text-align: center; }
@media (min-width: 1100px) {
  #work .workacts > .work-row-controls { display: inline-flex; width: calc(100% - 210px); }
}

#work .work-heading { flex-wrap: wrap; gap: 8px 12px; }

#work .work-heading { padding-right: 0; }

.queue-edit-form textarea { width: 100%; box-sizing: border-box; }
.queue-drain-form { position: sticky; bottom: -14px; padding: 12px 0; background: var(--panel); border-top: 1px solid var(--line); }
.queue-edit-error { color: var(--warn); }


.notification-center { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 10000; }
.notification-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--panel); box-shadow: 0 2px 8px #0001; cursor: pointer; }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box; border-radius: 12px; background: var(--agent); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; border: 2px solid var(--panel); }
.notification-count[hidden], .notification-panel[hidden] { display: none; }
.notification-panel { position: absolute; right: 0; top: 54px; width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 90px)); overflow: auto; padding: 16px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); box-shadow: 0 8px 32px #0003; }
.notification-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-item { padding: 12px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.notification-item p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-item time { color: var(--muted); font-size: 12px; }
.notification-item.error { border-top-color: var(--warn); }
@media (max-width: 760px) {
  .notification-center { top: max(4px, env(safe-area-inset-top)); right: 12px; }
  .app-chrome.chrome { padding-right: 68px; }
}


.app-chrome .notification-center { position: relative; top: auto; right: auto; margin-left: auto; align-self: center; flex-shrink: 0; z-index: 70; }
.app-chrome .notification-bell { width: 36px; height: 36px; box-shadow: none; border-color: transparent; background: transparent; }
.app-chrome .notification-panel { top: 44px; }
@media (max-width: 760px) { .app-chrome.chrome { padding-right: 12px; } .app-chrome .notification-center { margin-left: 0; } }


.event-duration { display: block; font-size: 8px; font-weight: 400; line-height: 9px; color: var(--muted); white-space: nowrap; }
.rowgrid-row .rowgrid-track { height: calc(var(--bands, 0) * 15px + var(--lines, 1) * 51px + 8px); }
.rbar { top: calc(var(--bands, 0) * 15px + var(--line, 0) * 51px + 2px); height: 43px; }
.rbar:not(.bare) > span { min-height: 37px; }
.rbar.bare { height: 9px; }


.worklist tr.busy.work-outcome-confirmed { opacity: 1; }
.work-completing > td { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); transition: background 160ms ease; }
.work-burying > td { background: color-mix(in srgb, var(--muted) 10%, var(--panel)); transition: background 160ms ease; }
.work-outcome { position: fixed; z-index: 10001; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 28px; background: var(--panel); border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 4px 18px #0002; pointer-events: none; animation: work-outcome-pop 520ms ease both; }
.work-outcome svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.work-outcome-done circle { opacity: .3; }
.work-outcome .outcome-check { stroke-dasharray: 26; stroke-dashoffset: 26; animation: work-outcome-check 240ms 60ms ease forwards; }
.work-outcome-buried { color: var(--muted); border-color: var(--line); animation: work-outcome-bury 600ms ease both; }
.work-outcome i { position: absolute; left: 23px; top: 23px; width: 4px; height: 4px; border-radius: 1px; background: var(--accent); animation: work-outcome-spark 500ms ease-out both; }
.work-outcome i:nth-of-type(even) { background: var(--agent); }
@keyframes work-outcome-pop { 0% { opacity: 0; transform: scale(.65); } 35% { opacity: 1; transform: scale(1.12); } 60% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes work-outcome-check { to { stroke-dashoffset: 0; } }
@keyframes work-outcome-spark { 0% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(8px); } 25% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)); } }
@keyframes work-outcome-bury { 0% { opacity: 0; transform: translateY(-6px); } 30%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(9px); } }
.work-outcome.reduced { animation: none; }
.work-outcome.reduced .outcome-check { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .work-completing > td, .work-burying > td { transition: none; } }


#runs .run { padding: 16px 18px; border-radius: 14px; }
#runs .run-head { gap: 8px; }
#runs .run-now { font-size: 15px; line-height: 1.5; margin: 10px 0; }
#runs .run-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; font-family: inherit; font-size: 11px; }
#runs .run-usage b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
#runs .run-cost { color: var(--accent); }
#runs .run-verify { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
#runs .run-reject summary { list-style: none; cursor: pointer; }
#runs .run-reject summary::-webkit-details-marker { display: none; }
#runs .run-reject-fields { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }
#runs .run-why, #runs .run-why:focus { width: min(240px, 60vw); }
#runs .run-detail { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; font-size: 12px; }
.run-token-table { overflow-x: auto; margin-top: 12px; }
.run-token-table th, .run-token-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { #runs .run { padding: 12px; } #runs .run-when { margin-left: 0; } #runs .run-elapsed { margin-left: auto; } .run-token-stats .stat-value { font-size: 21px; } }


.social-plans { max-width: 1400px; margin: auto; }
.plans-heading,.plan-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.plans-heading h1,.plans-heading h2 { margin-bottom:.35rem; }
.plans-layout { display:grid; grid-template-columns:minmax(0,1fr); max-width:1000px; gap:1.4rem; align-items:start; margin-top:1.5rem; }
.plans-list:empty { display:none; }
.plans-list { display:grid; gap:1rem; min-width:0; }
.plan-card,.plan-compose { padding:1.4rem; }
.plan-compose form,.plan-compose label { display:grid; gap:.5rem; }
.plan-compose form { gap:1rem; }
.plan-compose input,.plan-compose textarea { width:100%; box-sizing:border-box; }
.plan-compose fieldset { border:1px solid var(--line); border-radius:12px; display:grid; gap:.75rem; min-width:0; }
.plan-fields { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.plan-options { list-style:none; padding:0; display:grid; gap:.7rem; }
.plan-options li { display:grid; gap:.3rem; border-left:3px solid var(--accent); padding:.45rem .8rem; }
.plan-state { font-size:.78rem; border:1px solid var(--line); border-radius:2rem; padding:.3rem .65rem; }
.plan-details { white-space:pre-wrap; }
.plan-links>div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.plan-links span { overflow-wrap:anywhere; }
.plan-winner { font-weight:600; color:var(--accent); }
.plans-error { border-left:3px solid #aa7340; padding:.75rem; }
@media(max-width:900px) { .plans-layout {grid-template-columns:1fr;} .plan-fields {grid-template-columns:1fr;} }
.plans-list > .card { padding: 1.4rem; }
.plan-compose input, .plan-recover input { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; min-height: 40px; }
.plan-compose input:focus-visible, .plan-recover input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-recover { display: grid; gap: .7rem; margin-top: 1rem; }
.plan-recover label { display: grid; gap: .4rem; }
.plan-compose select { width:100%; min-width:0; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.6rem; }
[data-plan-date-label] {font-size:.9rem; color:var(--accent);}


.social-plans > .plans-heading p { margin:.35rem 0 0; }
.plans-layout { margin-top:1rem; }
.plan-compose { padding:1rem 1.15rem; }
.plan-compose > h2 { margin:0 0 .3rem; }
.plan-compose > p { margin:.3rem 0 .8rem; }
.plan-compose form { gap:.7rem; }
.plan-compose label { gap:.3rem; }
.plan-compose input,.plan-compose select { min-height:36px; padding:.4rem .6rem; }
.plan-compose textarea { padding:.5rem .6rem; }
.plan-compose fieldset { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; padding:.65rem; }
.plan-compose fieldset > small { grid-column:1/-1; }
[data-plan-date-status]:empty { display:none; }
.plan-compose [data-plan-date-label] { font-size:.8rem; }
.plan-compose form > p { margin:.1rem 0; }
.plan-month { display:grid; gap:.4rem; }
.plan-month-shortcuts { display:flex; flex-wrap:wrap; gap:.3rem; }
.plan-month-shortcuts .btn { padding:.25rem .5rem; font-size:.8rem; }
.plan-month-shortcuts .btn[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:var(--bg); }
@media(max-width:760px) { .plan-compose fieldset {grid-template-columns:minmax(0,1fr);} }

.plan-compose .plan-fields { align-items:start; }
.plan-compose .plan-fields > label { align-content:start; }
.plan-compose input:not([type="hidden"]), .plan-compose select { height:38px; min-height:38px; box-sizing:border-box; }
.plan-compose { padding:.85rem 1rem; }
.plan-compose form { gap:.55rem; }
.plan-compose label { gap:.2rem; font-size:.85rem; }
.plan-compose .plan-fields { gap:.65rem; }
.plan-compose .plan-fields-details { grid-template-columns:2fr 1fr 1fr; }
.plan-compose input:not([type="hidden"]), .plan-compose select { height:36px; min-height:36px; }
.plan-compose fieldset { gap:.4rem .65rem; padding:.5rem .6rem; }
.plan-compose > p { margin:.2rem 0 .6rem; font-size:.85rem; }
.plan-compose small { font-size:.75rem; }
@media(max-width:760px) { .plan-compose .plan-fields-details {grid-template-columns:minmax(0,1fr);} }

#work .worktitle > .worknudge { margin-left:31px; }
#work .worktitle > .worknudge > span:last-child { min-width:0; overflow-wrap:anywhere; }


#work .work-results { background:transparent; border:0; padding:0; }
#work .worklist { border-collapse:separate; border-spacing:0 8px; }
#work .worklist tbody tr:not(.epic-row) > td { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:12px; padding-bottom:12px; }
#work .worklist tbody tr:not(.epic-row) > td:first-child { border-left:1px solid var(--line); border-radius:10px 0 0 10px; padding-left:12px; }
#work .worklist tbody tr:not(.epic-row) > td:last-child { border-right:1px solid var(--line); border-radius:0 10px 10px 0; padding-right:12px; }
#work .work-row-title > a { font-weight:600; font-size:15px; line-height:24px; }
#work .work-row-summary { margin-top:3px; margin-bottom:6px; font-size:12px; line-height:1.5; }
#work .work-row-meta { margin-top:5px; gap:3px 9px; font-size:10px; }
#work .item-kind { text-transform:none; letter-spacing:0; font-size:10px; font-weight:600; padding:1px 6px; }
#work .work-row-meta .skill-id { display:none; }
#work .work-row-meta .pill.skill { border-color:transparent; padding:0; background:transparent; color:var(--muted); }
#work .worktitle > .worknudge { margin-top:8px; padding:6px 9px; border-left:2px solid color-mix(in srgb,var(--accent) 35%,transparent); background:color-mix(in srgb,var(--accent) 5%,var(--panel)); border-radius:0 6px 6px 0; font-size:12px; }
#work .worktitle > .worknudge .worknudge-tag { background:transparent; padding:0; font-size:8px; }
#work .worklist td.workacts { width:265px; min-width:265px; }
#work .workacts > .rowact-nudge { display:flex; width:100%; margin:0 0 6px; gap:5px; }
#work .workacts > .rowact-nudge input { flex:1 1 0; width:0; min-width:0; }
#work .workacts > .work-row-controls { display:flex; width:100%; gap:5px; }
#work .work-row-controls .btn { background:transparent; }
#work .work-row-controls > form > .btn { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
@media(max-width:760px) {
 #work .worklist { border-spacing:0; }
 #work .worklist tbody tr:not(.epic-row) { background:var(--panel); border:1px solid var(--line); border-radius:10px; margin:8px 0; padding:10px; }
 #work .worklist tbody tr:not(.epic-row) > td { border:0; border-radius:0; padding:0; background:transparent; }
 #work .worklist tbody tr:not(.epic-row) > td:first-child { padding:3px 0 0; }
 #work .worklist tbody tr:not(.epic-row) > td:last-child { padding:8px 0 0 31px; }
 #work .worklist td.workacts { width:auto; min-width:0; }
}

.work-email-content { margin: 1.2rem 0; }
.work-email-content > .panel { margin:.75rem 0; }
.work-email-content h3 { margin:0; }
.work-email-content .mail-reader { margin-top:1rem; }
.work-email-content .mail-reader-cols { grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr); }
.work-email-copy,.work-email-updates { margin-top:1rem; }
.work-email-copy article,.work-email-updates article { padding:.7rem 0; border-top:1px solid var(--line); }
.work-email-copy pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.9rem; }
@media(max-width:900px) { .work-email-content .mail-reader-cols {grid-template-columns:minmax(0,1fr);} }
.work-email-updates p {white-space:pre-wrap;overflow-wrap:anywhere;}
.work-email-updates h4 {margin:.3rem 0;}
.work-emails { margin: 1.2rem 0; }
.work-emails h2 { margin-top: 0; }
.work-email-list { list-style: none; margin: .5rem 0; padding: 0; }
.work-email-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: .6rem 0; border-top: 1px solid var(--line); }
.work-email-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.work-email-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.work-email-acts form { margin: 0; }
.work-emails .actions { flex-wrap: wrap; }
.work-emails .actions input[type="search"], .work-emails .actions input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.work-email-move p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.work-email-history ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.work-email-history li { padding: .35rem 0; overflow-wrap: anywhere; }
.mail-attach { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.mail-attach input[type="text"] { width: 6.5rem; min-width: 0; }
.mail-attach-confirm { grid-column: 2 / -1; margin: 6px 0 0; overflow-wrap: anywhere; }
.mail-attach-confirm p { margin: 0 0 .4rem; }
.mail-foot { flex-wrap: wrap; }
@media (max-width: 720px) { .mail-attach-confirm { grid-column: 1 / -1; } }


.notification-panel { width: min(460px, calc(100vw - 24px)); padding: 0 14px 12px; overscroll-behavior: contain; }
.notification-panel > header { position: sticky; top: 0; z-index: 1; padding: 12px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.notification-item { margin-top: 0; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.notification-item:last-child { border-bottom: 0; padding-bottom: 0; }
.notification-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.notification-status { font-size: 11px; font-weight: 650; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; }
.notification-item.error .notification-status { color: var(--warn); background: transparent; }
.notification-meta time { margin-left: auto; font-size: 11px; }
.notification-dismiss { border: 0; background: transparent; color: var(--muted); padding: 4px 7px; cursor: pointer; font-size: 18px; }
.notification-target { display: block; font-size: 14px; font-weight: 650; line-height: 1.4; margin-bottom: 9px; }
.notification-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; margin: 8px 0 3px; }
.notification-item p { font-size: 13px; line-height: 1.5; margin-bottom: 9px; }
.notification-request { border-left: 2px solid var(--line); padding-left: 9px; }
.notification-followup { margin-top: 10px; }
.notification-followup label { display: grid; gap: 6px; font-size: 12px; }
.notification-followup textarea { box-sizing: border-box; width: 100%; resize: vertical; font: inherit; padding: 9px; }
.notification-actions { display: flex; gap: 6px; margin-top: 7px; }
.notification-item .notification-feedback { font-size: 12px; color: var(--accent); margin: 6px 0 0; }
.notification-panel [hidden] { display: none; }
.notification-target { color: var(--ink); text-decoration: none; }
.notification-target:hover { color: var(--accent); text-decoration: underline; }

.work-response { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.work-response h2 { margin: 0 0 6px; font-size: 16px; }
.work-response-body { margin: 14px 0; line-height: 1.6; overflow-wrap: anywhere; }
.work-response textarea { width: 100%; box-sizing: border-box; margin: 10px 0; resize: vertical; }
.work-response-body p { white-space: pre-wrap; }


.work-visible-count { display: inline-flex; align-items: center; min-height: 34px; box-sizing: border-box; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }


.work-tag-options { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 13rem; overflow-y: auto; padding: .25rem 0; }
.work-filter-field input[name="tag"] { min-width: min(28rem, 70vw); }


:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-palette="sand"] {
  --bg: #f5efdf; --panel: #fffaf0; --ink: #362b20; --muted: #74634e;
  --line: #ded1b9; --accent: #875321; --accent-soft: #efe1c8;
}
:root[data-palette="sand"][data-theme="dark"] {
  --bg: #211c17; --panel: #2c251e; --ink: #f1e5d1; --muted: #b5a58b;
  --line: #493c2c; --accent: #e2b875; --accent-soft: #42331f;
}
:root[data-palette="ocean"] {
  --bg: #edf4f8; --panel: #fafdff; --ink: #183344; --muted: #536f80;
  --line: #ccdee8; --accent: #17658b; --accent-soft: #dceef6;
}
:root[data-palette="ocean"][data-theme="dark"] {
  --bg: #101e2b; --panel: #172a3a; --ink: #e1eff8; --muted: #9db4c5;
  --line: #2a4357; --accent: #80c9ed; --accent-soft: #203e53;
}
:root[data-palette="forest"] {
  --bg: #eff3eb; --panel: #fafcf6; --ink: #253622; --muted: #607259;
  --line: #d2deca; --accent: #3f7038; --accent-soft: #e0ecd9;
}
:root[data-palette="forest"][data-theme="dark"] {
  --bg: #172018; --panel: #202d22; --ink: #e7efe0; --muted: #a8b9a0;
  --line: #374937; --accent: #a4ce8e; --accent-soft: #30472b;
}
.appearance-settings { position: relative; margin-left: auto; order: 3; flex-shrink: 0; }
.appearance-settings[hidden] { display: none; }
.app-chrome .notification-center { order: 2; margin-left: auto; }
.app-chrome:has(.notification-center) .appearance-settings { margin-left: 0; }
.appearance-settings > summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; }
.appearance-settings > summary::-webkit-details-marker { display: none; }
.appearance-settings > summary:hover, .appearance-settings[open] > summary { color: var(--accent); background: var(--accent-soft); }
.appearance-settings > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.appearance-panel { position: absolute; right: 0; top: 44px; width: min(300px, calc(100vw - 24px)); padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px #0003; z-index: 80; }
.appearance-panel h2 { margin: 0 0 18px; font-size: 16px; }
.appearance-panel fieldset { padding: 0; margin: 0 0 18px; border: 0; min-width: 0; }
.appearance-panel legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.appearance-modes, .appearance-palettes { display: grid; gap: 6px; }
.appearance-modes { grid-template-columns: repeat(3, 1fr); }
.appearance-palettes { grid-template-columns: repeat(2, 1fr); }
.appearance-panel label { position: relative; cursor: pointer; }
.appearance-panel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.appearance-panel label > span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.appearance-panel input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.appearance-panel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.palette-swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #0002; }
.palette-classic { background: linear-gradient(135deg, #fbfaf8 50%, #2f5d50 50%); }
.palette-sand { background: linear-gradient(135deg, #f5efdf 50%, #875321 50%); }
.palette-ocean { background: linear-gradient(135deg, #edf4f8 50%, #17658b 50%); }
.palette-forest { background: linear-gradient(135deg, #eff3eb 50%, #3f7038 50%); }
.appearance-hint { font-size: 11px; color: var(--muted); margin: 0; }
@media (max-width: 760px) {
  .app-chrome .notification-center { margin-left: auto; }
  .app-chrome.chrome { gap: 8px; }
}

.work-search-combo { position: relative; flex: 1; min-width: 180px; }
#worksearch .work-search-combo input { width: 100%; }
#work-tag-suggestions { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px #0002; padding: 5px; }
#work-tag-suggestions [role="option"] { padding: 8px 10px; cursor: pointer; border-radius: 4px; font-size: 13px; }
#work-tag-suggestions [role="option"]:hover, #work-tag-suggestions [aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }



#work .work-row-title > .work-star button { height: 24px; }
#work .worklist tbody tr:not(.epic-row) > td.pickcol { padding-top: 14px; }
@media (max-width: 760px) {
  #work .worklist tbody tr:not(.epic-row) > td.pickcol { padding-top: 2px; }
}

.work-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work-editable-tag { display: inline-flex; align-items: center; gap: 4px; padding-right: 5px; }
.work-editable-tag a { color: inherit; text-decoration: none; }
.work-editable-tag a:hover { text-decoration: underline; }
.work-editable-tag form { display: inline-flex; margin: 0; }
.work-editable-tag button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 18px; cursor: pointer; }
.work-editable-tag button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.work-editable-tag button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.work-editable-tag button:disabled { cursor: wait; opacity: .5; }


.nav-arrows > .btn, .nav-arrows > .calendar-settings > summary.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0 13px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
}
.nav-arrows > .btn[aria-label], .nav-arrows > .calendar-settings > summary.btn { width: 40px; padding: 0; }
.nav-arrows > .btn svg, .nav-arrows > .calendar-settings > summary.btn svg { display: block; flex-shrink: 0; }


.global-search { position: relative; flex: 1; max-width: 640px; min-width: 0; margin-left: auto; }
.global-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 6px 30px 6px 12px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.global-search > kbd { position: absolute; right: 12px; top: 9px; font-size: 12px; color: var(--muted); pointer-events: none; }
.global-search-popover { position: absolute; top: 42px; left: 0; right: 0; max-height: min(65vh, 560px); overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 12px 35px #0003; z-index: 100; }
.global-search-popover[hidden] { display: none; }
.global-search-preview a, #global-search-suggestions [role=option] { display: block; padding: 9px; border-radius: 6px; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; cursor: pointer; }
.global-search-preview a:hover, #global-search-suggestions [aria-selected=true], #global-search-suggestions [role=option]:hover { background: var(--accent-soft); color: var(--accent); }
.global-search-status { color: var(--muted); font-size: 12px; padding: 8px; }
.global-search-results { list-style: none; padding: 0; }
.global-search-results li { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.global-search-results li > a { display: block; font-size: 17px; font-weight: 600; }
.global-search-results p { margin: 6px 0; font-size: 14px; white-space: pre-wrap; }
.global-search-kind { font-size: 12px; color: var(--muted); }
.app-chrome .notification-center { margin-left: 0; }
@media(max-width:760px) {
  .app-chrome .section-title, .app-chrome .mobile-wordmark { display:none; }
  .global-search-popover { position: fixed; top: 54px; left: 12px; right: 12px; }
}


.app-chrome.chrome { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 640px) minmax(80px, 1fr); }
.app-chrome > .section-title, .app-chrome > .sidebar-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
.app-chrome > .section-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-chrome > .global-search { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
.app-chrome > .notification-center { grid-column: 3; grid-row: 1; justify-self: end; margin: 0 44px 0 0; }
.app-chrome > .appearance-settings { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }


.xt-browser { max-width: 1200px; margin: 0 auto; }
.xt-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.xt-header h1 { margin: 0; font-size: 32px; letter-spacing: -.04em; }
.xt-header p { margin: 6px 0 0; }
.xt-header .xt-eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.xt-work-link { font-size: 12px; white-space: nowrap; }
.xt-search { display: flex; align-items: end; gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; }
.xt-search label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.xt-search-field { flex: 1; }
.xt-search input, .xt-search select { width: 100%; min-height: 40px; margin: 0; }
.xt-search button { min-height: 40px; margin: 0; }
.xt-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.xt-sidebar { min-width: 0; }
.xt-sidebar summary { font-size: 13px; font-weight: 650; cursor: pointer; padding: 4px 0; }
.xt-sidebar summary span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.xt-sidebar p { font-size: 12px; line-height: 1.5; margin: 8px 0 14px; }
.xt-tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.xt-browser .xt-tag { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 9px; border: 1px solid color-mix(in srgb, hsl(var(--tag-hue) 55% 52%) 25%, var(--line)); background: color-mix(in srgb, hsl(var(--tag-hue) 55% 52%) 8%, var(--panel)); border-radius: 7px; color: var(--ink); font-size: 12px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.xt-browser .xt-tag:hover { border-color: hsl(var(--tag-hue) 55% 52%); background: color-mix(in srgb, hsl(var(--tag-hue) 55% 52%) 16%, var(--panel)); }
.xt-browser .xt-tag.is-selected { border-color: hsl(var(--tag-hue) 55% 52%); box-shadow: inset 0 0 0 1px hsl(var(--tag-hue) 55% 52%); font-weight: 650; }
.xt-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 10px; }
.xt-other { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.xt-untagged { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }
.xt-collections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.xt-collections a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 6px; text-decoration: none; font-size: 12px; color: var(--muted); border: 1px solid transparent; }
.xt-collections a:hover, .xt-collections .is-selected { color: var(--ink); background: var(--panel); border-color: var(--line); }
.xt-collections .is-selected { font-weight: 650; }
.xt-collections span { font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.xt-results { min-width: 0; scroll-margin-top: 90px; }
.xt-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.xt-result-heading h2 { font-size: 22px; margin: 0; letter-spacing: -.025em; display: flex; align-items: center; gap: 9px; overflow-wrap: anywhere; }
.xt-result-heading p { font-size: 13px; line-height: 1.5; margin: 7px 0 16px; }
.xt-selected-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: hsl(var(--tag-hue) 55% 52%); }
.xt-reset { white-space: nowrap; font-size: 12px; margin-top: 5px; }
.xt-result-meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.xt-records { list-style: none; padding: 0; margin: 0; }
.xt-records li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 32%); align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.xt-record-meta { display: flex; gap: 8px; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.xt-record-meta span + span::before { content: "·"; margin-right: 8px; }
.xt-browser .xt-record-title { color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.xt-browser .xt-record-title:hover { color: var(--accent); text-decoration: underline; }
.xt-record-tags { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; font-size: 11px; }
.xt-record-tags .xt-tag { font-size: 10px; padding: 3px 7px; }
.xt-empty { padding: 40px 20px; background: var(--panel); text-align: center; border-radius: 10px; margin-top: 16px; }
.xt-empty h3 { margin-top: 0; }
.xt-empty p { color: var(--muted); font-size: 13px; }
.xt-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font-size: 12px; }
.xt-pagination > span { color: var(--muted); }
.xt-browser a:focus-visible, .xt-browser summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
  .xt-header { align-items: start; margin-bottom: 18px; }
  .xt-header h1 { font-size: 27px; }
  .xt-header p { font-size: 13px; }
  .xt-work-link { font-size: 11px; margin-top: 5px; }
  .xt-search { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .xt-search-field { flex-basis: 100%; }
  .xt-search label:not(.xt-search-field) { flex: 1; }
  .xt-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .xt-other { margin-top: 12px; padding-top: 10px; }
  .xt-untagged { margin-top: 12px; }
  .xt-collections { margin-bottom: 18px; }
  .xt-records li { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 14px 0; }
  .xt-record-tags { justify-content: start; }
  .xt-result-meta { flex-wrap: wrap; }
}
.xt-search input { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; font: inherit; font-size: 13px; }
.xt-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.xt-search button { padding: 9px 18px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: var(--bg); font: inherit; font-size: 13px; cursor: pointer; }
.xt-work-link, .xt-untagged, .xt-reset, .xt-pagination a, .xt-empty a { color: var(--accent); text-decoration: none; }
.xt-work-link:hover, .xt-untagged:hover, .xt-reset:hover, .xt-pagination a:hover, .xt-empty a:hover { text-decoration: underline; }
.search-settings label { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.search-settings input { accent-color: var(--accent); }
.appearance-panel .search-settings input { position: static; opacity: 1; width: 16px; height: 16px; flex-shrink: 0; }


.calendar-today-badge { display: block; width: fit-content; margin: 3px auto 0; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 10px; line-height: 1.3; font-weight: 750; letter-spacing: .02em; }
.week-head > .today { box-shadow: inset 0 3px var(--accent); }
.week-head .today .num { font-weight: 800; }
.day-col.today { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 1px 0 color-mix(in srgb, var(--accent) 45%, transparent), inset -1px 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.rowgrid-row.today { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 3px 0 var(--accent); }
.rowgrid-row.today .rnum { color: var(--accent); font-weight: 800; }
.rowgrid-day .calendar-today-badge { margin: 3px 0 0; }
.card-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.card-day.today .card-num { padding: 1px 5px; }
.calendar-today-label { white-space: nowrap; }
.rowgrid-row.today .rowgrid-day { display: grid; grid-template-columns: max-content max-content; gap: 2px 5px; }
.rowgrid-day .calendar-today-badge { grid-column: 1 / -1; justify-self: start; font-size: 9px; padding: 2px 4px; }
.xt-work-group { margin: 10px 0; }
.xt-work-group .xt-tag-list { padding-top: 8px; }
@media (max-width: 1000px) { .xt-search { flex-wrap: wrap; } .xt-search-field { flex-basis: 100%; } }


#work .work-row-tags-more { min-width: 0; max-width: 100%; }
#work .work-row-tags-more > summary { cursor: pointer; width: fit-content; }
#work .work-row-tags-more > div { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 4px; }


.global-search input { display: block; line-height: 22px; }
.global-search-highlight { display: none; position: absolute; inset: 1px; padding: 6px 30px 6px 12px; overflow: hidden; clip-path: inset(0 30px 0 12px); border-radius: 7px; pointer-events: none; white-space: pre; color: var(--ink); font: inherit; font-size: 14px; line-height: 22px; }
.global-search-highlight > span { display: block; width: max-content; }
.global-search.has-highlight-mirror:not(.is-composing) input { color: transparent; caret-color: var(--ink); }
.global-search.has-highlight-mirror:not(.is-composing) .global-search-highlight { display: block; }
.global-search input::placeholder { color: var(--muted); opacity: 1; }
.global-search .search-keyword { color: light-dark(#946600, #e6bf62); }
@media (forced-colors: active) {
  .global-search.has-highlight-mirror:not(.is-composing) input { color: FieldText; caret-color: FieldText; }
  .global-search.has-highlight-mirror:not(.is-composing) .global-search-highlight { display: none; }
}

.work-tag-options .work-tag-count { margin-left: .35em; font-size: .85em; font-variant-numeric: tabular-nums; opacity: .8; }


.global-search input { padding-right: 66px; }
.global-search-highlight { padding-right: 66px; clip-path: inset(0 66px 0 12px); }
.global-search > kbd { right: 44px; }
.global-search-help { position: absolute; top: 2px; right: 3px; }
.global-search-help > summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; list-style: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
.global-search-help > summary::-webkit-details-marker { display: none; }
.global-search-help > summary:hover, .global-search-help[open] > summary { color: var(--accent); background: var(--accent-soft); }
.global-search-help > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.global-search-help-panel { position: absolute; top: 40px; right: 0; width: 380px; max-width: calc(100vw - 24px); box-sizing: border-box; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 35px #0003; z-index: 101; font-size: 13px; line-height: 1.5; }
.global-search-help-panel h2 { font-size: 15px; margin: 0 0 12px; }
.global-search-help-panel dl { margin: 0; }
.global-search-help-panel dt { margin-top: 10px; font-weight: 650; }
.global-search-help-panel dd { margin: 3px 0 0; }
.global-search-help-panel code { color: light-dark(#946600, #e6bf62); }
.global-search-help-panel p { margin: 12px 0 0; }
.global-search-help-panel .search-help-types, .global-search-help-panel .search-help-hint { font-size: 11px; color: var(--muted); }
.global-search-help-panel nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
@media (max-width: 760px) {
  .global-search-help-panel { position: fixed; top: 54px; left: 12px; right: 12px; width: auto; }
}

.search-clear-history { margin: 6px 9px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.global-search-preview a:focus-visible, .search-clear-history:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.queue-save-status { font-size: 12px; color: var(--muted); align-self: center; }

/* /brief — the daily brief. Text is plain and keeps its own line breaks. */
.brief-page {
  max-width: 720px;
}

.brief-head h1 {
  margin-bottom: 2px;
}

.brief-head p {
  margin: 2px 0 12px;
}

.brief-text,
.brief-share-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.brief-coverage {
  margin: 14px 0 0;
}

.brief-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.brief-share-head h2 {
  margin: 0;
  font-size: 17px;
}

.brief-copy {
  flex: none;
  min-width: 84px;
}

.brief-share-text {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 12px 14px;
  user-select: all;
}

.brief-history ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-history li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .brief-history li {
    white-space: normal;
  }
}

/* /brief sections: one card per section, one row per item. Tones reuse the
   existing tokens — urgent is --warn, quiet is --muted. */
.brief-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.brief-section-head h2 {
  margin: 0;
  font-size: 17px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.brief-count {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.brief-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.brief-item:first-child {
  border-top: 0;
}

.brief-item-main {
  /* Drops below a long "when" chip on a phone rather than squeezing. */
  flex: 1 1 12em;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.45;
}

.brief-item-detail {
  display: block;
  font-size: 13px;
}

.brief-when,
.brief-ref {
  flex: none;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.brief-when {
  background: var(--accent-soft);
  color: var(--accent);
}

.brief-ref {
  border: 1px solid var(--line);
  color: var(--accent);
  text-decoration: none;
  font-family: var(--mono);
}

.brief-item-copy {
  flex: none;
  align-self: center;
}

.brief-section.tone-urgent {
  border-left: 3px solid var(--warn);
}

.brief-section.tone-urgent h2 {
  color: var(--warn);
}

.brief-section.tone-quiet {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--muted);
}

.brief-section.tone-quiet h2 {
  font-size: 14px;
}

.brief-section.tone-quiet .brief-items {
  font-size: 13px;
}

.brief-section.tone-quiet .brief-item,
.brief-section.tone-quiet .brief-item-main,
.brief-section.tone-quiet .brief-item-detail {
  display: inline;
  padding: 0;
  border: 0;
}

.brief-section.tone-quiet .brief-item + .brief-item::before {
  content: " · ";
}

.brief-section.tone-quiet .brief-item-detail::before {
  content: " — ";
}

.brief-plain {
  margin-top: 16px;
}

.brief-plain summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

.brief-plain .brief-text {
  margin-top: 8px;
}