/* ===== Organizer-specific components (on top of the shared Pockytap system) ===== */

/* --- day hero --- */
.day-hero, .goal-hero { display: flex; align-items: center; gap: 18px; padding: 20px 20px 18px; }
.goal-hero { background: linear-gradient(140deg, color-mix(in srgb, var(--gc) 85%, #000) 0%, var(--gc) 50%, color-mix(in srgb, var(--gc) 60%, #fff) 140%); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--gc) 60%, transparent); }
.dh-ring { position: relative; flex: none; display: grid; place-items: center; }
.dh-ring .ring { display: block; }
.dh-ring .ring .bg { fill: none; stroke: rgba(255,255,255,.22); }
.dh-ring .ring .fg { fill: none; stroke: #fff; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 700ms var(--ease); }
.dh-pct { position: absolute; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.dh-pct .ic { width: 24px; height: 24px; }
.dh-text { min-width: 0; flex: 1; }
.hero.day-hero .amount, .hero.goal-hero .amount { font-size: clamp(20px, 6vw, 26px); margin: 2px 0 8px; }
.dh-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-s); font-weight: 600; opacity: .9; }
.dh-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dh-meta .ic { width: 15px; height: 15px; }
.dh-meta .warn { color: #ffe08a; }

/* generic ring (goal cards) */
.ring .bg { fill: none; stroke: var(--surface-3); }
.ring .fg { fill: none; stroke: var(--gc, var(--brand)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 700ms var(--ease); }

/* --- task rows --- */
.task-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.task-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; min-height: 54px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
  cursor: pointer; position: relative; transition: transform 140ms var(--ease), opacity var(--dur), background var(--dur);
  animation: rise-in 360ms var(--ease) backwards;
}
.task-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lc, var(--brand)); opacity: .9; }
.task-row:active { transform: scale(.985); }
.task-row .tmain { flex: 1; min-width: 0; }
.task-row .tt { font-weight: 600; font-size: var(--fs); line-height: 1.3; overflow-wrap: anywhere; display: flex; align-items: flex-start; gap: 6px; }
.task-row .tt .flag { width: 14px; height: 14px; color: var(--expense); flex: none; margin-top: 3px; }
.task-row .tm { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.task-row .tm span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.task-row .tm .ic { width: 13px; height: 13px; }
.task-row .tm .over { color: var(--overdue); font-weight: 600; }
.task-row.done { opacity: .55; }
.task-row.done .tt { text-decoration: line-through; color: var(--text-2); }
.task-row.overdue::before { background: var(--overdue); }
.task-row.pop .tcheck { animation: pop 260ms var(--ease); }
.tcheck {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--text-3); flex: none; display: grid; place-items: center;
  color: transparent; transition: background var(--dur), border-color var(--dur), color var(--dur), transform 120ms var(--ease);
}
.tcheck .ic { width: 15px; height: 15px; stroke-width: 3; }
.tcheck:hover { border-color: var(--brand); }
.tcheck:active { transform: scale(.85); }
.task-row.done .tcheck, .subtask.done .tcheck, .habit.done .hcheck { background: var(--done); border-color: var(--done); color: #fff; }
.tcheck.sm { width: 22px; height: 22px; }
.tcheck.sm .ic { width: 12px; height: 12px; }
.task-row.important .tcheck { border-color: var(--expense); }
.task-row.important.done .tcheck { border-color: var(--done); }

/* timeline (today's timed tasks) */
.timeline .tl-row { display: flex; align-items: center; gap: 10px; }
.timeline .tl-time { width: 44px; flex: none; text-align: right; font-size: var(--fs-s); font-weight: 700; color: var(--text-2); }
.timeline .tl-row.past .tl-time { color: var(--text-3); font-weight: 600; }
.timeline .tl-row .task-row { flex: 1; min-width: 0; }
.timeline .tl-row + .tl-row { position: relative; }

/* overdue card */
.overdue-card { border-color: color-mix(in srgb, var(--overdue) 30%, var(--border)); background: color-mix(in srgb, var(--overdue) 4%, var(--surface)); }
.overdue-card .card-title h2 .ic { color: var(--overdue); }
.overdue-card .task-list { margin-bottom: 10px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.more-link { display: block; text-align: center; font-size: var(--fs-s); color: var(--brand-600); font-weight: 600; padding: 6px; }

/* habits */
.habits { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.habit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); text-align: left; width: 100%; transition: transform 140ms var(--ease); }
.habit:active { transform: scale(.985); }
.habit .hcheck { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 14%, var(--surface)); color: var(--hc); flex: none; transition: all var(--dur); }
.habit .hcheck .ic { width: 18px; height: 18px; }
.habit .ht { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit.done .ht { color: var(--text-2); }
.habit .hs { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; white-space: nowrap; }
.habit.done .hs { color: var(--done); }

/* day note */
.note-card { padding: 10px 14px; }
.note-card.small { padding: 10px 14px; font-size: var(--fs-s); }
.daynote { width: 100%; border: 0; background: transparent; resize: none; font: inherit; line-height: 1.45; color: var(--text); min-height: 72px; padding: 4px 0; }
.daynote::placeholder { color: var(--text-3); }

/* section toggles and row headers */
.section-label.toggle { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; cursor: pointer; }
.section-label.toggle .ic { width: 16px; height: 16px; }
.section-label.row { display: flex; align-items: center; justify-content: space-between; }
.section-label .link, .link { color: var(--brand-600); font-weight: 600; font-size: var(--fs-s); display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.link .ic { width: 16px; height: 16px; }
.first-card.compact { padding: 18px; }
button.first-card { width: 100%; text-align: center; }

/* --- quick add sheet --- */
.addtask .nl-wrap { position: relative; }
.addtask .nl-input, .addtask .nl-mirror {
  width: 100%; min-height: 52px; max-height: 140px; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 19px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em; white-space: pre-wrap; overflow-wrap: anywhere; box-sizing: border-box; margin: 0;
  font-size: 19px !important; /* above the 16px touch rule of base.css: the mirror must wrap exactly like the field */
}
.addtask .nl-input { position: relative; background: transparent; border: 1.5px solid var(--border); color: transparent; caret-color: var(--brand); resize: none; outline: none; overflow: auto; -webkit-text-fill-color: transparent; }
.addtask .nl-input:focus { border-color: var(--brand); }
.addtask .nl-input::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); font-weight: 500; }
.addtask .nl-mirror { position: absolute; inset: 0; pointer-events: none; color: var(--text); background: var(--surface-2); border: 1.5px solid transparent; overflow: hidden; }
.addtask .nl-mirror mark { background: transparent; color: var(--brand-600); border-radius: 4px; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.addtask .nl-mirror mark.priority { color: var(--expense); background: color-mix(in srgb, var(--expense) 12%, transparent); }
.addtask .nl-mirror mark.repeat { color: var(--habit); background: color-mix(in srgb, var(--habit) 14%, transparent); }
.addtask .nl-hint { font-size: 12px; padding: 8px 4px 4px; }
.addtask .tchips { margin-top: 8px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 6px; }
.chip[style*="--cc"] { --tc: var(--cc); }
.chip.sel[style*="--cc"] { background: color-mix(in srgb, var(--cc) 14%, var(--surface)); color: var(--cc); }
.addtask .more { margin-top: 10px; }
.addtask .pick-row textarea { width: 100%; border: 0; background: transparent; font: inherit; resize: none; padding: 2px 0; color: var(--text); }
.addtask .pick-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.addtask .pick-row .input { height: 38px; }
.subtasks { display: flex; flex-direction: column; gap: 4px; }
.subtask { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.subtask input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); padding: 4px 0; outline: none; }
.subtask.done input, .subtask.done .st-title { text-decoration: line-through; color: var(--text-3); }
.subtask .st-title { flex: 1; min-width: 0; }
.subtask .icon-btn { width: 30px; height: 30px; color: var(--text-3); }
.ms-list .subtask { min-height: 40px; }
.input.big { font-size: 19px; font-weight: 600; height: 52px; }

/* --- calendar --- */
.cal .dp-head { margin-bottom: 6px; }
.cal-grid .dp-day { position: relative; height: 46px; }
.cal-grid .dp-day .dots { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.cal-grid .dp-day .dots b { width: 5px; height: 5px; border-radius: 50%; display: block; background: var(--text-3); }
.cal-grid .dp-day .dots b.o { background: var(--brand); }
.cal-grid .dp-day .dots b.d { background: var(--done); }
.cal-grid .dp-day .dots b.h { background: var(--habit); }
.cal-grid .dp-day.sel .dots b { background: #fff; }

/* --- lists overview --- */
.goal-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px var(--gutter) 10px; margin: 0 calc(-1 * var(--gutter)) 6px; scrollbar-width: none; }
.goal-strip::-webkit-scrollbar { display: none; }
.goal-card { flex: none; width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px; box-shadow: var(--shadow-1); display: block; transition: transform 140ms var(--ease); }
.goal-card:active { transform: scale(.97); }
.goal-card .gc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.goal-card .gc-ring { position: relative; display: grid; place-items: center; }
.goal-card .gc-ring .num { position: absolute; font-size: 11px; font-weight: 700; }
.goal-card .gc-title { font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }
.goal-card .gc-sub { font-size: 12px; margin-top: 4px; }
.goal-card .warn { color: var(--overdue); font-weight: 600; }
.list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-4); }
.list-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 14px; box-shadow: var(--shadow-1); text-align: left; display: block; transition: transform 140ms var(--ease); position: relative; overflow: hidden; }
.list-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: color-mix(in srgb, var(--lc) 10%, transparent); }
.list-card:active { transform: scale(.97); }
.list-card .lc-name { font-weight: 700; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card .lc-sub { font-size: 12px; margin-top: 2px; }
.list-card.add { border-style: dashed; box-shadow: none; background: transparent; color: var(--text-2); }
.list-card.add::after { display: none; }

/* --- notes --- */
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 var(--space-4); }
.note-grid.compact { grid-template-columns: 1fr; gap: 6px; margin-top: 0; }
.note-card-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px 14px; box-shadow: var(--shadow-1); text-align: left; display: block; transition: transform 140ms var(--ease); overflow: hidden; position: relative; }
.note-card-item.tinted { background: color-mix(in srgb, var(--nc) 10%, var(--surface)); border-color: color-mix(in srgb, var(--nc) 25%, var(--border)); }
.note-card-item:active { transform: scale(.97); }
.note-card-item .nt { font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.note-card-item .nt .pin { width: 13px; height: 13px; color: var(--brand-600); flex: none; }
.note-card-item .nb { font-size: var(--fs-s); color: var(--text-2); margin-top: 4px; line-height: 1.4; max-height: 8.4em; overflow: hidden; }
.note-card-item .nb .nl { display: flex; align-items: flex-start; gap: 6px; }
.note-card-item .nb .nl.done { text-decoration: line-through; color: var(--text-3); }
.note-card-item .nb .nbox { width: 14px; height: 14px; border: 1.5px solid var(--text-3); border-radius: 4px; flex: none; margin-top: 3px; display: grid; place-items: center; color: transparent; }
.note-card-item .nb .nl.done .nbox { background: var(--done); border-color: var(--done); color: #fff; }
.note-card-item .nb .nbox .ic { width: 10px; height: 10px; stroke-width: 3; }
.note-card-item .nm { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-3); font-weight: 600; }
.note-card-item .nm span { display: inline-flex; align-items: center; gap: 3px; }
.note-card-item .nm .ic { width: 12px; height: 12px; }
.note-editor .note-text { width: 100%; min-height: 38vh; border: 0; background: transparent; resize: none; font: inherit; font-size: 16px; line-height: 1.5; color: var(--text); padding: 4px 2px; outline: none; }
.note-editor .note-text::placeholder { color: var(--text-3); }
.note-editor .swatches.small { margin-top: 8px; }
.note-editor .swatches.small .swatch { width: 24px; height: 24px; }
.note-sheet.tinted .sheet { background: color-mix(in srgb, var(--nc) 8%, var(--surface)); }
.sheet-foot .btn:not(.block) { padding: 0 14px; }

/* --- misc --- */
.icon-grid button.sel { background: var(--surface-3); }
.grip { color: var(--text-3); cursor: grab; touch-action: none; display: grid; place-items: center; width: 22px; }
.grip .ic { width: 18px; height: 18px; }
.onb-card { text-align: center; padding-top: 6px; }
.onb-card .onb-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.onb-card .onb-list { text-align: left; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.onb-card .onb-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-s); line-height: 1.4; }
.onb-card .onb-check { width: 30px; height: 30px; border-radius: 10px; background: var(--brand-100); color: var(--brand-600); display: grid; place-items: center; flex: none; }
.onb-card .onb-check .ic { width: 16px; height: 16px; }
.sub { font-size: var(--fs-s); color: var(--text-2); }

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .note-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .goal-card { width: 200px; }
  .addtask .nl-input, .addtask .nl-mirror { font-size: 20px !important; }
}
@media (max-width: 1099.98px) and (min-width: 1024px) { .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* chips inside the add sheet redraw on every keystroke: no entry animation there */
.addtask .chip, .note-editor .chip { animation: none; }

/* --- assistant --- */
.sg-card { padding: 14px; }
.sg-head { display: flex; align-items: center; gap: 12px; }
.sg-head .sg-t { flex: 1; font-weight: 700; min-width: 0; }
.sg-head .icon-btn { width: 32px; height: 32px; color: var(--text-3); }
.sg-m { font-size: var(--fs-s); color: var(--text-2); margin: 8px 0 12px; line-height: 1.45; }
.sg-a { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.icon-btn.has-dot, .sidebar nav a.has-dot { position: relative; }
.icon-btn.has-dot::after, .sidebar nav a.has-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--expense); box-shadow: 0 0 0 2px var(--surface); }
.sidebar nav a.has-dot::after { top: 12px; right: 12px; }
/* --- external calendar events --- */
.event-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--ec) 9%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--ec) 45%, var(--border)); }
.event-row .ei { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ec); flex: none; }
.event-row .ei .ic { width: 16px; height: 16px; }
.event-row .tt { font-weight: 600; font-size: var(--fs-s); }
.event-row .tm { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.cal-grid .dp-day .dots b.e { background: var(--event); }

/* seven slots in the tab bar: 3 screens, add in the middle, 3 screens */
.tabbar { grid-template-columns: repeat(7, 1fr); width: min(400px, calc(100% - 32px)); padding: 0 4px; }
.tabbar a .ic { width: 23px; height: 23px; }
.tabbar a.has-dot { position: relative; }
.tabbar a.has-dot::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--expense); }
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-4); }
.goal-grid .goal-card { width: auto; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) { .goal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- time picker (ours, no native controls) --- */
.tp-display { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 12px; }
.tp-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tp-hours button { height: 40px; border-radius: 11px; background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); transition: background var(--dur), color var(--dur), transform 120ms var(--ease); }
.tp-hours button:active { transform: scale(.94); }
.tp-hours button.sel { background: var(--brand); color: var(--brand-ink); }
.tp-min { margin-top: 10px; }
.tp-min button { font-variant-numeric: tabular-nums; }

/* --- current time --- */
.clock { color: var(--brand-600); font-weight: 700; }
.tl-now { display: flex; align-items: center; gap: 10px; height: 10px; margin: 2px 0; }
.tl-now span { width: 44px; flex: none; text-align: right; font-size: 11px; font-weight: 800; color: var(--expense); }
.tl-now i { flex: 1; height: 2px; border-radius: 2px; background: var(--expense); position: relative; }
.tl-now i::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--expense); }

/* --- swipe on task rows (touch) --- */
.task-wrap { position: relative; overflow: hidden; border-radius: var(--radius); }
.task-wrap .task-row { position: relative; z-index: 1; touch-action: pan-y; }
.task-wrap .swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; color: #fff; font-weight: 600; font-size: var(--fs-s); opacity: 0; border-radius: var(--radius); }
.task-wrap .swipe-bg .ic { width: 20px; height: 20px; }
.task-wrap .swipe-bg.done { background: var(--done); justify-content: flex-start; }
.task-wrap .swipe-bg.del { background: var(--expense); justify-content: flex-end; }
.task-wrap.swiping.right .swipe-bg.done, .task-wrap.swiping.left .swipe-bg.del { opacity: .75; }
.task-wrap.swiping.ready .swipe-bg { opacity: 1; }
/* --- drag to schedule --- */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: .92; box-shadow: var(--shadow-2); transform-origin: center; animation: none !important; }
.task-row.drag-src { opacity: .35; }
.timeline .tl-row.drop-before { box-shadow: 0 -3px 0 0 var(--brand); }
.timeline .tl-row.drop-after { box-shadow: 0 3px 0 0 var(--brand); }
.timeline.drop-end { box-shadow: 0 3px 0 0 var(--brand); }
body[data-dragging] { -webkit-user-select: none; user-select: none; cursor: grabbing; }
[data-untimed] .task-row { cursor: grab; }
/* --- week view --- */
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-col { min-height: 120px; border-radius: 12px; background: var(--surface-2); padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; border: 1px solid transparent; }
.wk-col.sel { border-color: var(--brand); }
.wk-col.today .wk-num { background: var(--brand); color: var(--brand-ink); }
.wk-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 2px; }
.wk-dow { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.wk-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.wk-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.wk-item { font-size: 11px; line-height: 1.25; padding: 4px 5px; border-radius: 7px; background: var(--surface); border-left: 3px solid var(--lc, var(--brand)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer; }
.wk-item .num { display: block; font-size: 10px; color: var(--text-3); font-weight: 700; }
.wk-item.done { opacity: .45; text-decoration: line-through; }
.wk-item.ev { border-left-color: var(--event); background: color-mix(in srgb, var(--event) 10%, var(--surface)); }
.wk-pill-dots { display: none; }
.grid-2.wk-mode { grid-template-columns: minmax(0, 1fr); }
.screen-head .seg { height: 38px; }
.screen-head .seg button { padding: 6px 10px; }
@media (max-width: 767.98px), (max-width: 1023.98px) and (orientation: portrait) {
  /* phone: the week becomes a strip of day pills; the selected day's list is below as in month mode */
  .wk-grid { gap: 4px; }
  .wk-col { min-height: 0; padding: 6px 2px 6px; align-items: center; }
  .wk-body { display: none; }
  .wk-pill-dots { display: flex; gap: 3px; height: 5px; }
  .wk-pill-dots b { width: 5px; height: 5px; border-radius: 50%; display: block; background: var(--text-3); }
  .wk-pill-dots b.o { background: var(--brand); } .wk-pill-dots b.d { background: var(--done); } .wk-pill-dots b.e { background: var(--event); }
}
.timeline .tl-row .task-wrap { flex: 1; min-width: 0; }

/* --- "all tasks" summary card (Lists overview) --- */
.all-card { display: block; padding: 16px 18px 14px; margin-bottom: var(--space-4); }
.all-card .ac-top { display: flex; align-items: center; gap: 12px; }
.all-card .ac-top .ci { width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.18); color: #fff; }
.all-card .ac-top .ci .ic { width: 20px; height: 20px; }
.all-card .ac-top > div { flex: 1; }
.all-card .ac-n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.all-card .chev { width: 20px; height: 20px; opacity: .8; }
.all-card .ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.all-card .ac-stats > div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .95; }
.all-card .ac-stats .ic { width: 15px; height: 15px; opacity: .85; }
.all-card .ac-stats b { font-size: 16px; font-weight: 800; }
.all-card .ac-stats > div.warn { background: rgba(255, 120, 120, .35); }
.all-card .ac-stats span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* --- stepper (ours) --- */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 3px; flex: none; }
.stepper .st-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); transition: background var(--dur), transform 100ms; touch-action: manipulation; }
.stepper .st-btn:active { background: var(--surface-3); transform: scale(.92); }
.stepper .st-btn .ic { width: 16px; height: 16px; }
.stepper .st-val { min-width: 36px; text-align: center; font-weight: 700; font-size: 15px; }
.stepper .st-val small { font-size: 10px; margin-left: 2px; color: var(--text-3); font-weight: 600; }
.list-row.on .lt { color: var(--brand-600); }

/* a sheet body that redraws itself (steppers, pickers): no entry animations after the first draw */
.redraw .list-row, .redraw .chip, .redraw .tp-hours button, .redraw .seg button { animation: none !important; }
.stepper .st-val { transition: none; }

.list-row.dim { opacity: .5; }
.list-row.dim .switch { opacity: .6; }

.list-row .chev-slot { display: inline-flex; width: 18px; justify-content: flex-end; }

/* section headers with a real button on the right (as Pockytap's "add wallet/category") */
.section-label.row .btn.sm, .card-title .btn.sm { flex: none; width: auto; height: 32px; padding: 0 12px; font-size: var(--fs-xs); border-radius: 10px; text-transform: none; letter-spacing: 0; }
.section-label.row .btn.sm .ic, .card-title .btn.sm .ic { width: 15px; height: 15px; }
.section-label.row { padding-right: 0; }

/* management rows (as Pockytap wallets): the whole row is the button, the grip sits on the right */
.list-row .row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.drag-row > .grip { margin-left: 4px; }

/* --- steps (subtasks) checklist in the task sheet --- */
.steps-box { margin-top: 8px; background: var(--surface-2); border-radius: 14px; padding: 4px 6px; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 2px 6px; border-radius: 10px; }
.step + .step { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.step .step-t { flex: 1; min-width: 0; text-align: left; font-size: var(--fs); line-height: 1.3; padding: 8px 0; overflow-wrap: anywhere; }
.step.done .step-t { text-decoration: line-through; color: var(--text-3); }
.step .step-x { width: 30px; height: 30px; color: var(--text-3); opacity: .6; }
.step .step-x:hover { opacity: 1; }
.step .step-in { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs); color: var(--text); padding: 8px 0; outline: none; }
.step .step-in::placeholder { color: var(--text-3); }
.step .tcheck.ghost { border-style: dashed; opacity: .5; }
.step.add { color: var(--brand-600); font-weight: 600; font-size: var(--fs-s); gap: 8px; cursor: pointer; }
.step.add .ic { width: 18px; height: 18px; margin-left: 4px; }

.dur-custom { display: flex; gap: 12px; }
.dur-part { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-xs); }

/* steps box: fixed frame like the notes editor; the list scrolls inside, the entry line stays put */
.steps-box { margin-top: 10px; padding: 0 6px; display: flex; flex-direction: column; }
.steps-box .steps { max-height: 132px; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.steps-box .step.entry { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.steps-box .steps:empty + .step.entry { border-top: 0; }
.step.entry .step-in::placeholder { color: var(--text-3); }

/* steps as text, like the note: fixed height, scrolls inside */
.addtask .pick-row textarea[data-steps] { height: 72px; max-height: 72px; overflow-y: auto; resize: none; line-height: 1.5; }

/* steps field: free text behind, drawn as numbered lines in front (mirror), same metrics as the note field */
.steps-wrap { position: relative; }
.steps-wrap textarea[data-steps], .steps-wrap .steps-mirror { font: inherit; font-size: var(--fs) !important; line-height: 24px; padding: 2px 0 2px 26px; margin: 0; box-sizing: border-box; height: 76px !important; max-height: 76px; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps-wrap textarea[data-steps] { position: relative; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--brand); overflow-y: auto; resize: none; z-index: 1; }
.steps-wrap textarea[data-steps]::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.steps-wrap .steps-mirror { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--text); }
.steps-wrap .sl { position: relative; min-height: 24px; }
.steps-wrap .sl i { position: absolute; left: -26px; width: 22px; text-align: right; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.steps-wrap .sl.done { color: var(--text-3); }
.steps-wrap .sl.done span { text-decoration: line-through; }
.steps-wrap .sl.done i { color: var(--done); }
.steps-wrap .sl.blank i { display: none; }

/* the step number is the toggle: tappable above the text field */
.steps-wrap .sl i { pointer-events: auto; cursor: pointer; z-index: 2; top: 0; height: 24px; display: flex; align-items: center; justify-content: flex-end; border-radius: 6px; }
.steps-wrap .sl i .ic { width: 14px; height: 14px; stroke-width: 3; }
.steps-wrap .sl i:active { transform: scale(.85); }

/* --- steps sheet --- */
.steps-sheet .list-row { gap: 10px; min-height: 48px; padding: 6px 10px 6px 12px; }
.steps-sheet .list-row + .list-row::before { left: 48px; }
.steps-sheet .tcheck.on { background: var(--done); border-color: var(--done); color: #fff; }
.steps-sheet .step-t { flex: 1; min-width: 0; text-align: left; font-size: var(--fs); padding: 8px 0; overflow-wrap: anywhere; }
.steps-sheet .step-t.done { text-decoration: line-through; color: var(--text-3); }
.steps-sheet .step-in { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs); color: var(--text); padding: 8px 0; outline: none; }
.steps-sheet .step-x { width: 30px; height: 30px; color: var(--text-3); opacity: .6; }
.steps-sheet .entry { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.steps-sheet .entry .step-in::placeholder { color: var(--text-3); }
.steps-sheet .tcheck.ghost { border-style: dashed; opacity: .5; }
/* a row's drag handle inside a sheet must not inherit the sheet's own pull bar (.sheet .grip) */
.sheet .row-grip { width: 36px; height: 44px; border-radius: 10px; background: none; margin: 0; display: grid; place-items: center; color: var(--text-3); }
.sheet .row-grip:active { background: var(--surface-2); }

.steps-sheet .lt.done { text-decoration: line-through; color: var(--text-3); font-weight: 500; }
.steps-sheet .list-row .row-main { padding: 6px 0; }

/* --- groups --- */
.group-seg { margin-bottom: 14px; }
.group-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.group-seg button .ic { width: 16px; height: 16px; }
.group-seg button b { font-size: 11px; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 1px 6px; font-weight: 700; }
.group-seg button.active b { background: var(--brand-100); color: var(--brand-600); }
.list-card .lc-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-3); font-weight: 600; min-height: 14px; }
.list-card .lc-meta span { display: inline-flex; align-items: center; gap: 3px; }
.list-card .lc-meta .ic { width: 12px; height: 12px; }
/* --- notes screen --- */
.section-label.grp { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: var(--fs-s); color: var(--text-2); margin-top: 6px; }
.section-label.grp .ci { width: 24px; height: 24px; border-radius: 7px; }
.section-label.grp .ci .ic { width: 13px; height: 13px; }
.section-label .ic { width: 14px; height: 14px; vertical-align: -2px; }
.note-card-item .nt span { overflow-wrap: anywhere; }
.note-card-item .nb .nbox { pointer-events: auto; cursor: pointer; }
.note-card-item .nb .nbox:active { transform: scale(.85); }
.note-card-item .nm { flex-wrap: wrap; }
.note-editor .note-title { width: 100%; border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); padding: 4px 2px 8px; outline: none; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.note-editor .note-title::placeholder { color: var(--text-3); font-weight: 600; }
.note-editor .note-text { min-height: 30vh; }
.note-editor .pick-list { margin-top: 10px; }

/* --- richer note cards --- */
.note-card-item { border-top: 3px solid transparent; }
.note-card-item.tinted { border-top-color: var(--nc); background: color-mix(in srgb, var(--nc) 8%, var(--surface)); }
.note-card-item .nt .nicon { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--nc) 18%, var(--surface)); color: var(--nc); flex: none; }
.note-card-item .nt .nicon .ic { width: 13px; height: 13px; }
.note-card-item .nt .pin { margin-left: auto; }
.note-card-item .ntags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.note-card-item .ntags span { font-size: 11px; font-weight: 600; color: var(--brand-600); background: var(--brand-100); border-radius: 999px; padding: 1px 7px; }
.chip.tag { --tc: var(--brand); }
.icon-grid.small { grid-template-columns: repeat(9, 1fr); gap: 4px; }
.icon-grid.small button { height: 34px; border-radius: 10px; }
.icon-grid.small button .ic { width: 17px; height: 17px; }
.note-sheet.tinted .sheet-head { border-bottom: 3px solid var(--nc); }

.fab.ctx-note { background: var(--c-amber); color: #fff; }
.fab.ctx-goal { background: var(--c-violet); color: #fff; }

/* --- goals strip on Today --- */
.goal-strip-today { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter)) 8px; scrollbar-width: none; }
.goal-strip-today::-webkit-scrollbar { display: none; }
.goal-mini { flex: none; width: 168px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); transition: transform 140ms var(--ease); }
.goal-mini:active { transform: scale(.97); }
.goal-mini .gm-ring { position: relative; display: grid; place-items: center; flex: none; }
.goal-mini .gm-ring .num { position: absolute; font-size: 10px; font-weight: 800; }
.goal-mini .gm-t { font-weight: 700; font-size: var(--fs-s); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.goal-mini .gm-s { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.goal-mini.all { width: auto; color: var(--brand-600); font-weight: 600; font-size: var(--fs-s); }
.goals-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: var(--space-4); }
.goals-card .gc-ring { position: relative; display: grid; place-items: center; }
.goals-card .gc-ring .num { position: absolute; font-size: 11px; font-weight: 800; }

/* --- habits --- */
.fab.ctx-habit { background: var(--c-orange); color: #fff; }
.dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { height: 40px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; transition: background var(--dur), color var(--dur), transform 120ms; }
.dow:active { transform: scale(.94); }
.dow.on { background: var(--brand); color: var(--brand-ink); }
.habit-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: var(--space-4); }
.habit-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px 14px; box-shadow: var(--shadow-1); transition: transform 140ms var(--ease); }
.habit-card:active { transform: scale(.98); }
.habit-card .hc-top { display: flex; align-items: center; gap: 12px; }
.habit-card .hc-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-card .hc-s { font-size: 12px; margin-top: 2px; }
.habit-card .hc-streak { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--hc); flex: none; }
.habit-card .hc-streak small { font-size: 11px; font-weight: 600; margin-left: 2px; color: var(--text-3); }
.habit-card .hc-grid, .habit-hist .hh-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.habit-card .hc-grid { grid-template-columns: repeat(28, 1fr); gap: 3px; margin-top: 12px; }
.habit-card .hc-grid i, .habit-hist i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-3); }
.habit-hist i { border-radius: 6px; }
.habit-hist .hh-row + .hh-row { margin-top: 4px; }
.habit-card .hc-grid i.done, .habit-hist i.done { background: var(--done); }
.habit-card .hc-grid i.miss, .habit-hist i.miss { background: color-mix(in srgb, var(--expense) 45%, var(--surface-3)); }
.habit-card .hc-grid i.due, .habit-hist i.due { background: var(--surface-3); outline: 1px dashed var(--text-3); outline-offset: -1px; }
.habit-card .hc-grid i.off, .habit-hist i.off { opacity: .25; }
.habit-card .hc-grid i.today, .habit-hist i.today { box-shadow: 0 0 0 2px var(--brand); }
.habit-card .hc-foot { font-size: 11px; margin-top: 8px; }
.hc-big { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) { .habit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.habit-hist .hh-head span { font-size: 10px; text-align: center; color: var(--text-3); font-weight: 700; }

/* habit history: weeks as columns, days as rows, small cells */
.habit-hist { --cell: 14px; --gap: 3px; }
.habit-hist .hh-months { display: grid; grid-template-columns: 18px repeat(var(--weeks), var(--cell)); gap: var(--gap); font-size: 10px; color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
.habit-hist .hh-months span { overflow: visible; white-space: nowrap; }
.habit-hist .hh-body { display: flex; gap: var(--gap); }
.habit-hist .hh-dows { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); width: 18px; font-size: 9px; color: var(--text-3); font-weight: 700; align-items: center; }
.habit-hist .hh-grid { display: flex; gap: var(--gap); }
.habit-hist .hh-col { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); }
.habit-hist .hh-col i { width: var(--cell); height: var(--cell); border-radius: 3px; background: var(--surface-3); display: block; }
.habit-hist .hh-col i.done { background: var(--done); }
.habit-hist .hh-col i.miss { background: color-mix(in srgb, var(--expense) 45%, var(--surface-3)); }
.habit-hist .hh-col i.due { outline: 1px dashed var(--text-3); outline-offset: -1px; }
.habit-hist .hh-col i.off { opacity: .25; }
.habit-hist .hh-col i.today { box-shadow: 0 0 0 2px var(--brand); }
.habit-hist .hh-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 8px; }
.habit-hist .hh-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--surface-3); margin-left: 6px; }
.habit-hist .hh-legend i.done { background: var(--done); } .habit-hist .hh-legend i.miss { background: color-mix(in srgb, var(--expense) 45%, var(--surface-3)); } .habit-hist .hh-legend i.off { opacity: .25; }

.chip.habit-chip.sel { background: color-mix(in srgb, var(--done) 16%, var(--surface)); color: var(--done); }

.habit-row { margin-top: -2px; margin-bottom: 10px; }
.habit-row .chip { --tc: var(--c-amber); }
.habit-row .chip .amt { font-weight: 700; color: var(--text-3); }
.habit-row .chip.sel .amt { color: var(--done); }

.cal-grid .dp-day .dots b.n { background: var(--c-amber); }
.note-card-item .nm .ndate { color: var(--brand-600); }

[data-view].seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
[data-view].seg button .ic { width: 15px; height: 15px; }

/* note sheet shaped like the task sheet */
.note-editor .note-text { min-height: 22vh; max-height: 40vh; margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; border: 1.5px solid transparent; }
.note-editor .note-text:focus { border-color: var(--brand); background: var(--surface); }
.note-editor .nl-mirror mark.date { color: var(--brand-600); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.note-editor .pick-row.col .swatches, .note-editor .pick-row.col .icon-grid { width: 100%; }
.list-card .lc-meta span.zero { opacity: .4; }

.all-card .ac-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.all-card .ac-unit { font-size: 13px; font-weight: 600; opacity: .8; }
.all-card .ac-meta { display: inline-flex; gap: 10px; margin-left: 8px; font-size: 13px; font-weight: 700; }
.all-card .ac-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.16); }
.all-card .ac-meta .ic { width: 13px; height: 13px; }

.confirm-msg { padding: 8px 0 4px; font-size: 16px; line-height: 1.45; }
.confirm-msg p { margin: 0 0 10px; }
.confirm-msg ul { margin: 0 0 12px; padding: 10px 12px 10px 30px; background: var(--surface-2); border-radius: 12px; font-size: 14px; }
.confirm-msg li { margin: 2px 0; }
.confirm-msg .cm-meta { font-size: 13px; color: var(--text-3); margin: 0; }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sec-head .section-label { flex: 1; min-width: 0; }

.plan-card .plan-sub { font-size: 12px; margin: -6px 0 10px; }

.addtask .sug-row { margin-top: 10px; margin-bottom: 2px; }

/* calendar day view */
.grid-2.dv-mode { align-items: start; }
.cal.dv { padding-bottom: 8px; }
.dv-allday { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dv-al { width: 44px; flex: none; font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding-top: 4px; }
.dv-al-items { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.dv-al-ev { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--lc) 18%, transparent); color: var(--text); border-left: 3px solid var(--lc); }
.dv-grid { position: relative; margin: 8px 0; }
.dv-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: 0; border-radius: 8px; }
.dv-more .ic { width: 14px; height: 14px; }
.dv-more:hover { background: var(--surface-2); }
.dv-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.dv-hour span { position: absolute; left: 0; top: -7px; font-size: 10px; color: var(--text-3); background: var(--surface); padding-right: 4px; line-height: 14px; }
.dv-lane { position: absolute; top: 0; bottom: 0; left: 48px; right: 0; cursor: copy; }
.dv-block { position: absolute; box-sizing: border-box; overflow: hidden; text-align: left; border-radius: 8px; padding: 4px 7px; font: inherit; color: var(--text); background: color-mix(in srgb, var(--lc) 22%, var(--surface)); border: 0; border-left: 3px solid var(--lc); display: flex; flex-direction: column; gap: 1px; cursor: pointer; transition: transform 120ms var(--ease); }
.dv-block:active { transform: scale(.98); }
.dv-block b { font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-block span { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-block.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.dv-block.ev { background: color-mix(in srgb, var(--lc) 12%, var(--surface)); border-left-style: dashed; cursor: default; }
.dv-block.done { opacity: .55; }
.dv-block.done b { text-decoration: line-through; }
.dv-now { position: absolute; left: 44px; right: 0; height: 0; border-top: 2px solid var(--c-red); pointer-events: none; z-index: 2; }
.dv-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); }
.dv-now span { position: absolute; left: -46px; top: -8px; font-size: 10px; font-weight: 700; color: var(--c-red); background: var(--surface); padding: 0 2px; }

/* account: the suite note above the sign-in form */
.suite-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--text-2); line-height: 1.4; }
.suite-note .tile { flex: none; }