/* mial v1 screens. Every colour is a variable from tokens.css; sizes and
   spacing are the design's (.chief-of-staff/mial-design-v1/*.dc.html). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--ink); }
a:hover { color: var(--gold-text); }
button, input { font: inherit; margin: 0; color: inherit; }
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
input::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--card-border); }
.skip-link:focus { top: 12px; }
.noscript { padding: 24px; }

@keyframes mialinA { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mialinB { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mialtoast { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mialrise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mialpop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes mialsheet { from { transform: translateY(32px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes mialpulse { 0% { box-shadow: 0 0 0 0 var(--pulse); } 80% { box-shadow: 0 0 0 5px var(--pulse-clear); } 100% { box-shadow: 0 0 0 0 var(--pulse-clear); } }
@keyframes mialshimmer { from { opacity: .55; } to { opacity: 1; } }
.anim-in-a { animation: mialinA .32s cubic-bezier(.2,.8,.2,1) both; }
.anim-in-b { animation: mialinB .32s cubic-bezier(.2,.8,.2,1) both; }
.anim-rise { animation: mialrise .25s ease-out both; }
.anim-pop { display: inline-block; animation: mialpop .3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- type */
.wordmark { display: inline-block; line-height: 1; font-family: var(--font-brand); font-weight: 500; letter-spacing: -0.5px; white-space: nowrap; }
.wordmark-dot { display: inline-block; width: 0.22em; height: 0.22em; background: var(--gold); border-radius: 50%; margin-left: 0.15em; vertical-align: middle; }
.wordmark-head { font-size: 24px; }
.wordmark-rail { font-size: 26px; }
.mial-inline { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.mial-inline-dot { display: inline-block; width: 0.22em; height: 0.22em; background: var(--gold); border-radius: 50%; margin-left: 0.12em; vertical-align: middle; }
.label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-2); }
.title { margin: 0; font-family: var(--font-brand); font-weight: 700; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.title-28 { font-size: 28px; line-height: 1.1; }
.title-24 { font-size: 24px; }
.meta { font-size: 12.5px; color: var(--secondary-2); }
.meta-13 { font-size: 13px; color: var(--secondary-2); }
.meta-135 { font-size: 13.5px; color: var(--secondary-2); }
.meta-cool { color: var(--cool-text); }
.link-gold { font-size: 12.5px; font-weight: 600; color: var(--gold-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.link-gold:hover { text-decoration: underline; }
.empty-line { margin: 0; padding: 18px 16px; font-size: 14.5px; line-height: 1.5; color: var(--secondary-2); }

/* ---------------------------------------------------------------- layout */
.view { display: block; padding: 12px 20px 124px; max-width: 600px; margin: 0 auto; outline: none; }
body.no-tabs .view { padding-bottom: 40px; }
.screen { display: flex; flex-direction: column; gap: 28px; }
.screen-people { gap: 22px; }
.screen-week { gap: 20px; }
.screen-person { gap: 24px; }
.section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section-12 { gap: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 20px; }
.section-pad { padding: 0 2px; }
.rail-host { display: none; }
.only-desk { display: none !important; }

.card { border-radius: var(--r-card); background: var(--card); border: 1px solid var(--card-border); }
.elevated { box-shadow: var(--shadow); }
.list-card { overflow: hidden; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 23px; border: 0; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color .25s ease; }
.btn-primary { background: var(--primary-bg); color: var(--on-ink); }
.btn-primary:hover { color: var(--on-ink); }
.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--btn-border); }
.btn-soft { background: var(--gold-tint); color: var(--gold-text-2); }
.btn-soft:hover { color: var(--gold-text-2); }
.btn-accent { background: var(--gold); color: var(--on-gold); }
.btn-accent:hover { color: var(--on-gold); }
.btn-small { height: 34px; padding: 0 13px; border-radius: 17px; font-size: 13.5px; }
.btn-small.btn-secondary { color: var(--body); }
.btn-block { width: 100%; }
.btn-50 { height: 50px; border-radius: 25px; font-size: 15.5px; width: 100%; }
.btn.is-disabled, .btn:disabled { background: var(--btn-disabled-bg); color: var(--secondary-2); cursor: default; }
.kept-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- marks, avatars, tags */
.mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.mark-18 { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.mark-22 { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.mark-28 { width: 28px; height: 28px; border-radius: 8px; font-size: 11.5px; }
.mark-ai { background: var(--mark-ai-bg); color: var(--mark-ai-fg); }
.mark-tg { background: var(--mark-tg-bg); color: var(--mark-tg-fg); }
.mark-you { background: var(--mark-you-bg); color: var(--mark-you-fg); }
.mark-mail { background: var(--gold-tint); color: var(--gold-text); }
.avatar { flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.avatar-22 { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-36 { width: 36px; height: 36px; font-size: 12.5px; }
.avatar-42 { width: 42px; height: 42px; font-size: 13px; }
.avatar-58 { width: 58px; height: 58px; font-size: 21px; }
.avatar-brand { font-family: var(--font-brand); }
.avatar-warm { background: var(--gold-tint); color: var(--gold-text); }
.avatar-cool { background: var(--cool-tint); color: var(--cool-text-2); }
.avatar-self { background: var(--fill); color: var(--secondary); }
.tag { flex-shrink: 0; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-tag); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.tag-gold { background: var(--gold-tint); color: var(--gold-text); }
.tag-late { background: var(--late-tint); color: var(--late-text); }
.tag-soft { background: var(--gold-soft); color: var(--gold-text); padding: 0 8px; }
.ring-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ring-wrap .ring { position: absolute; inset: 0; }
.ring-46 { width: 46px; height: 46px; }
.ring-52 { width: 52px; height: 52px; }
.ring-72 { width: 72px; height: 72px; }
.stroke-gold { stroke: var(--gold); }
.stroke-warm-track { stroke: var(--warm-track); }
.stroke-cool-track { stroke: var(--cool-track); }
.stroke-cool-ring { stroke: var(--cool-ring); }
.ring-anim { transition: stroke-dasharray .5s cubic-bezier(.2,.8,.2,1); }
.fill-gold { fill: var(--gold); }
.fill-current { fill: currentColor; }
svg .stroke-gold { stroke: var(--gold); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: mialpulse 2.4s ease-out infinite; flex-shrink: 0; }

/* ---------------------------------------------------------------- tab bar */
.tabbar { position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; gap: 10px; align-items: center; max-width: 568px; margin: 0 auto; }
.tabbar-tabs { flex: 1; height: 60px; border-radius: 30px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--nav-shadow); display: flex; align-items: center; justify-content: space-around; padding: 0 4px; min-width: 0; }
.tab { min-width: 76px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--secondary-2); text-decoration: none; font-size: 11.5px; font-weight: 500; line-height: 1; border-radius: 16px; }
.tab.is-active { color: var(--ink); font-weight: 600; }
.tab:hover { color: var(--ink); }
.fab { width: 60px; height: 60px; flex-shrink: 0; border-radius: 30px; background: var(--gold); color: var(--on-gold); display: flex; align-items: center; justify-content: center; box-shadow: var(--fab-shadow); }
.fab:hover { color: var(--on-gold); }

/* ---------------------------------------------------------------- toast */
.toast-host { position: fixed; left: 20px; right: 20px; bottom: calc(98px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 560px; margin: 0 auto; pointer-events: none; }
body.no-tabs .toast-host { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.toast { pointer-events: auto; min-height: 50px; border-radius: 25px; background: var(--toast-bg); color: var(--toast-fg); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 18px; box-shadow: var(--toast-shadow); animation: mialtoast .28s ease-out both; }
.toast-msg { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14.5px; font-weight: 500; padding: 8px 0; }
.toast-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.toast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-undo { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: transparent; color: var(--toast-undo); font-size: 14.5px; font-weight: 700; line-height: 1; flex-shrink: 0; }

/* ---------------------------------------------------------------- loading and failure */
.sk-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 60px; }
.sk { display: block; height: 14px; border-radius: 7px; background: var(--fill-2); animation: mialshimmer .9s ease-in-out infinite alternate; }
.sk-label { height: 10px; }
.sk-title { height: 26px; border-radius: 10px; }
.sk-card { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.sk-tall { min-height: 150px; }
.state-card { margin-top: 60px; padding: 24px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.state-title { font-size: 18px; font-weight: 600; }
.state-body { font-size: 14.5px; color: var(--secondary-2); line-height: 1.5; }

/* ---------------------------------------------------------------- Today */
.today-header { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: -28px; }
.screen-today .today-header + .today-cols { margin-top: 28px; }
.today-cols, .today-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.chip-connected { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); text-decoration: none; color: var(--body); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; }
.chip-connected::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.chip-connected.is-none .pulse-dot { animation: none; background: var(--btn-border); }
.intro { display: flex; flex-direction: column; gap: 10px; }
.morning { margin: 2px 0 0; font-size: 18px; line-height: 1.62; color: var(--body-2); text-wrap: pretty; overflow-wrap: anywhere; }
.clause { transition: color .3s ease; }
.clause.is-muted { color: var(--muted); }
.morning .name { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-underline); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.morning .name.is-cool { text-decoration-color: var(--cool-underline); }
.morning .name:hover { color: var(--gold-text); }
.progress { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pdot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; transition: background-color .25s ease; }
.pdot.is-filled { background: var(--gold); }
.upnext-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.uc-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.uc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.uc-source { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--secondary-2); white-space: nowrap; overflow: hidden; }
.uc-source-text { overflow: hidden; text-overflow: ellipsis; }
.uc-body { display: flex; flex-direction: column; gap: 6px; }
.uc-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.uc-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--secondary); }
.uc-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 2px; }
.done-card { padding: 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.done-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); }
.done-title { font-size: 18px; font-weight: 600; }
.done-sub { font-size: 14px; color: var(--secondary-2); }
.first-run { gap: 14px; }
.first-run .link-gold { font-size: 14px; }
.then { font-size: 13px; color: var(--secondary-2); padding: 0 2px; line-height: 1.5; }
.caught-row { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.caught-row + .caught-row { border-top: 1px solid var(--divider); }
.caught-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.caught-texts { display: flex; flex-direction: column; gap: 3px; }
.caught-text { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.caught-agent { font-weight: 600; }
.caught-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.caught-done { font-size: 13px; font-weight: 600; color: var(--secondary-2); min-height: 34px; display: flex; align-items: center; animation: mialrise .25s ease-out both; }
.caught-done.is-ok { color: var(--gold-text); }
.drift-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drift-tile { border-radius: 18px; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; }
.drift-name { font-size: 14px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drift-quiet { font-size: 12px; font-weight: 500; color: var(--cool-text); }

/* ---------------------------------------------------------------- Your circle */
.circle-card { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.circle-head { padding: 0 2px; }
.legend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--secondary); }
.legend-line { width: 12px; height: 2px; background: var(--gold); }
.circle-svg { width: 100%; display: block; }
.circle-svg .c-core { fill: var(--circle-core); stroke: var(--warm-track); }
.circle-svg .c-ring { stroke: var(--circle-ring); }
.circle-svg .c-labels { fill: var(--muted); font-family: var(--font-ui); }
.circle-svg .c-lines-warm line { stroke: var(--gold); }
.circle-svg .c-lines-cool line { stroke: var(--cool-line); }
.circle-svg .c-you { fill: var(--gold); }
.circle-svg .c-node circle { fill: var(--gold-tint); stroke: var(--card); }
.circle-svg .c-node text { fill: var(--gold-text); font-family: var(--font-ui); }
.circle-svg .c-node.is-cool circle { fill: var(--cool-tint); }
.circle-svg .c-node.is-cool text { fill: var(--cool-text-2); }

/* ---------------------------------------------------------------- People */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; min-height: 48px; gap: 12px; }
.page-head-col { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.page-count { font-size: 13px; color: var(--secondary-2); padding-bottom: 4px; white-space: nowrap; }
.page-sub { font-size: 14.5px; color: var(--secondary); line-height: 1.45; }
.search { position: relative; }
.search-icon { position: absolute; left: 15px; top: 15px; color: var(--secondary-2); pointer-events: none; }
.search-input { width: 100%; height: 48px; border-radius: var(--r-seg); border: 1px solid var(--search-border); background: var(--card); padding: 0 16px 0 42px; font-size: 16px; color: var(--ink); }
.people-groups { display: flex; flex-direction: column; gap: 22px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; text-decoration: none; color: var(--ink); min-height: 66px; }
.person-row + .person-row { border-top: 1px solid var(--divider); }
.person-row:hover { color: var(--ink); background: var(--gold-soft); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.person-row .meta { font-size: 13px; }
.empty-people { padding: 4px 2px; }

/* ---------------------------------------------------------------- Person */
.person-head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.back-link { display: inline-flex; align-items: center; gap: 2px; height: 44px; margin-left: -8px; padding: 0 8px; color: var(--secondary); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1; }
.person-hero { display: flex; align-items: center; gap: 16px; }
.person-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person-rel { font-size: 14.5px; color: var(--secondary-2); }
.before { overflow: hidden; }
.before-label { padding: 14px 16px 4px; }
.before-rows { display: flex; flex-direction: column; }
.before-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.before-row + .before-row { border-top: 1px solid var(--divider); }
.icon-tile { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.icon-tile-owe { background: var(--gold-tint); color: var(--gold-text); }
.icon-tile-owed { background: var(--cool-tint); color: var(--cool-text-2); }
.icon-tile-talk { background: var(--icon-tile); color: var(--secondary); }
.before-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.before-title { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.before-action { padding: 4px 16px 16px; }
.cad-head { display: flex; flex-direction: column; gap: 2px; }
.seg { display: grid; gap: 4px; padding: 4px; border-radius: var(--r-seg); background: var(--fill-2); }
.seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--fill); }
.seg-opt { display: inline-flex; align-items: center; justify-content: center; height: 38px; border: 0; border-radius: var(--r-seg-inner); background: transparent; color: var(--secondary); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; }
.seg-opt::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.seg-2 .seg-opt { height: 40px; font-size: 14.5px; }
.seg-opt.is-on { background: var(--card); box-shadow: var(--sel-shadow); color: var(--ink); }
.story { padding: 16px 16px 4px; }
.story-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; }
.story-mark { display: flex; flex-direction: column; align-items: center; }
.story-dot { width: 10px; height: 10px; margin-top: 5px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--gold); background: var(--card); }
.story-dot.is-filled { background: var(--gold); }
.story-rail { flex: 1; width: 2px; margin: 4px 0; background: var(--story-rail); }
.story-rail.is-last { background: transparent; }
.story-text { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; min-width: 0; }
.story-title { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.story-empty { padding: 0 0 14px; }
.notes { margin: 0; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; color: var(--body); overflow-wrap: anywhere; white-space: pre-line; }

/* ---------------------------------------------------------------- This week */
.daystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-border); }
.day { height: 70px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; transition: background-color .2s ease; min-width: 0; }
.day.is-today { background: var(--gold-soft); }
.day.is-selected { background: var(--primary-bg); color: var(--on-ink); }
.day-short { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; }
.day-num { font-family: var(--font-brand); font-size: 18px; font-weight: 700; line-height: 1; }
.day-dots { display: flex; gap: 3px; height: 6px; }
.day-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; }
.day-dot.is-kept { background: var(--gold); }
.day-dot.is-late { border-color: var(--late-ring); }
.week-row { display: flex; gap: 12px; align-items: center; padding: 13px 16px 13px 14px; text-decoration: none; color: var(--ink); }
.week-row + .week-row { border-top: 1px solid var(--divider); }
a.week-row:hover { color: var(--ink); background: var(--gold-soft); }
.week-row .row-body { gap: 3px; }
.dir { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dir-owe { color: var(--gold-text); }
.dir-theirs { color: var(--dir-theirs); }
.dir-self { color: var(--secondary); }
.row-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.row-title.is-kept { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--gold); }
.state-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--gold); background: transparent; }
.state-dot.is-kept { background: var(--gold); }
.state-dot.is-late { border-style: dashed; border-color: var(--late-ring); }

/* ---------------------------------------------------------------- Add (sheet) */
.sheet-host { position: relative; z-index: 60; }
.sheet-backdrop { position: fixed; inset: 0; background: var(--sheet-scrim); z-index: 60; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; height: min(790px, calc(100% - 54px)); max-width: 600px; margin: 0 auto; background: var(--card); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--sheet-shadow); padding: 8px 20px calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; animation: mialsheet .32s cubic-bezier(.2,.8,.2,1) both; overflow-y: auto; overscroll-behavior: contain; }
body.has-sheet { overflow: hidden; }
.grabber { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--grabber); flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: 44px; flex-shrink: 0; }
.sheet-close { margin-right: -10px; }
.sheet-body { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.text-input { height: 52px; border-radius: var(--r-seg); border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 16px; font-size: 17px; font-weight: 500; color: var(--ink); width: 100%; }
.date-input { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 20px; border: 1px solid var(--input-border); background: var(--card); color: var(--body); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; max-width: 100%; }
.chip::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.chip:has(.chip-dot) { padding: 0 14px 0 5px; }
.chip.is-on { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--on-ink); }
.chip-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-text); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chip.is-on .chip-dot { background: var(--gold); color: var(--on-gold); }
.chip-dashed { border: 1px dashed var(--dashed-border); background: transparent; color: var(--secondary); gap: 6px; padding: 0 14px; }
.chip-new { padding: 0 6px; background: var(--card); border-color: var(--primary-bg); }
.chip-new::after { display: none; }
.chip-input { height: 32px; border: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 600; padding: 0 8px; width: 180px; max-width: 60vw; outline: none; }
.chip-new:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.readback { margin-top: auto; border-radius: var(--r-seg); background: var(--readback-bg); border: 1px solid var(--readback-border); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.readback-dot { width: 7px; height: 7px; margin-top: 7px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.readback-text { font-size: 14.5px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choices .label { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--ink); }

/* ---------------------------------------------------------------- laptop (Desktop.dc.html) */
@media (min-width: 860px) {
  .only-phone { display: none !important; }
  .only-desk { display: flex !important; }
  .app { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
  .rail-host { display: flex; flex: 1 1 220px; max-width: 100%; }
  .nav-host { display: none; }
  .view { flex: 999 1 640px; min-width: 0; max-width: none; margin: 0; padding: 40px clamp(20px, 4vw, 56px) 56px; }
  body.no-tabs .view { padding-bottom: 56px; }
  .view > .screen { max-width: 640px; }
  .view > .screen-today { max-width: 1040px; }
  .toast-host { left: auto; right: 32px; bottom: 32px; width: 420px; }
  body.no-tabs .toast-host { bottom: 32px; }

  .rail { width: 100%; padding: 28px 16px; display: flex; flex-direction: column; gap: 28px; background: var(--rail-bg); border-right: 1px solid var(--card-border); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .rail-brand { padding: 0 10px; height: 32px; display: flex; align-items: center; }
  .rail-nav { display: flex; flex-direction: column; gap: 2px; }
  .rail-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 11px; border-radius: 10px; text-decoration: none; color: var(--secondary); font-size: 14.5px; font-weight: 500; line-height: 1; border: 1px solid transparent; position: relative; }
  .rail-link::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
  .rail-link.is-active { background: var(--card); border-color: var(--card-border); color: var(--ink); font-weight: 600; padding: 0 10px; }
  .rail-add { height: 44px; border-radius: 22px; font-size: 14.5px; }
  .rail-conns { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
  .rail-label { padding: 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-2); }
  .rail-conn-list { display: flex; flex-direction: column; gap: 8px; }
  .rail-conn { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--body); font-size: 13.5px; font-weight: 500; position: relative; }
  .rail-conn::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .rail-conn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-dot { margin-left: auto; animation-duration: 2.6s; }

  .screen-today { gap: 0; }
  .today-cols { flex-direction: row; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
  .today-main { flex: 999 1 440px; gap: 30px; }
  .today-right { flex: 1 1 340px; min-width: 0; flex-direction: column; gap: 20px; }
  .screen-today .title { font-size: 36px; line-height: 1.1; }
  .morning { font-size: 19px; max-width: 620px; }
  .upnext-card { padding: 20px 22px; flex-direction: row; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
  .uc-main { flex: 999 1 300px; gap: 8px; }
  .uc-top { justify-content: flex-start; gap: 8px; min-height: 22px; }
  .uc-top .tag { height: 22px; padding: 0 8px; }
  .uc-source { gap: 8px; font-weight: 400; }
  .uc-title { font-size: 22px; }
  .uc-av { display: none; }
  .uc-actions { flex: 1 1 220px; padding-top: 0; }
  .caught-row { flex-wrap: wrap; align-items: center; padding: 14px 18px; gap: 10px 16px; }
  .caught-body { display: contents; }
  .caught-texts { flex: 999 1 280px; min-width: 0; gap: 2px; }
  .caught-actions, .caught-done { flex: 0 0 auto; }
  .circle-card { padding: 18px 18px 12px; gap: 4px; }
  .circle-card .meta { font-size: 13px; }
  .circle-card .circle-svg { max-width: 340px; align-self: center; }
  .weekmini-card { padding: 16px 18px; flex-direction: column; gap: 10px; }
  .weekmini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
  .wm-day { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0; border-radius: 10px; }
  .wm-day.is-today { background: var(--gold-soft); }
  .wm-name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--secondary-2); }
  .wm-day.is-today .wm-name { color: var(--ink); }
  .wm-dots { display: flex; flex-direction: column; gap: 4px; min-height: 26px; align-items: center; }
  .wm-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--gold); }
  .wm-dot.is-kept { background: var(--gold); }
  .wm-dot.is-late { border-color: var(--late-ring); }

  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 48px)); height: auto; max-height: calc(100% - 48px); border-radius: var(--r-sheet); animation: none; }
  .sheet .grabber { display: none; }
}