/* AlignHour web app v2: simpler screens. Loaded after app.css; class names unchanged.
   Brand (Nov 2026): no blur, glows or gradients; dark mode is flat deep green and takes all its colours from the
   tokens in app.css. */

/* --glass: kept as a name, now simply the card colour in both themes */
:root { --glass: var(--bg); }

/* ---------- shared new pieces (both themes) ---------- */
/* .btn.glow = the main action (class name kept): a plain emerald button */
.btn.glow { background: var(--solid); color: var(--on-solid); }
.btn.glow:hover { background: var(--solid-hover); }
.btn.big { min-height: 56px; font-size: 17px; border-radius: 6px; }
.tab-new { background: var(--solid); color: var(--on-solid); }
.tab-new:hover { background: var(--solid-hover); }
.ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--line); background: var(--tone); color: var(--ink-2); }
.chev { flex: 0 0 auto; display: inline-flex; color: var(--ink-4); }
.sdot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ink-4); vertical-align: 1px; }
.sdot.Working { background: var(--work-dot); }
.sdot.Awake { background: var(--rust-dot); }
.row-item[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.linkrow { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.linkrow .link-btn { text-decoration: none; font-size: 15px; }

/* sign-in */
.welcome { min-height: 100%; justify-content: space-between; gap: 28px; padding: 28px 4px 8px; }
.welcome-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-top: 7vh; }
.logo-glow { display: block; line-height: 0; }   /* class name kept: a plain wrapper, no glow or tile */
.welcome .logo { width: 56px; height: 56px; }
.welcome h1 { font-size: 31px; line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; }
/* .grad (class name kept): the few highlighted words get a flat lemon highlighter line, no gradient */
.grad { color: inherit; box-shadow: inset 0 -0.2em 0 var(--lemon); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.welcome-hero .muted { margin: 0; font-size: 15.5px; max-width: 34ch; }
.steps3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.steps3 span { padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-3); font-size: 15px; }
.welcome-actions { display: flex; flex-direction: column; gap: 10px; }
.welcome-actions .link-btn.center { align-self: center; }

/* booking: 3 steps */
.wiz-head { display: flex; flex-direction: column; gap: 8px; }
.prog { display: flex; gap: 6px; }
.prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); }
.prog i.on { background: var(--accent); }
.wiz-head .back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 2px 0; }
/* bottom = minus the page's bottom padding, so the bar sits flush with the screen edge and no card peeks out under it */
.wiz-foot { position: sticky; bottom: -28px; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: auto -18px -28px; padding: 18px 18px 22px; border-top: 1px solid var(--line); background: var(--soft); }
.who-card { border: 1px solid var(--line); border-radius: var(--r); }
.days-row .day-btn { flex: 0 0 60px; }
.tcards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -18px; padding: 4px 18px 8px; scroll-padding: 0 18px; scrollbar-width: none; }
.tcards::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 152px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--glass); color: var(--ink); text-align: left; }
.tcard .big { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.tcard .part { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.tcard .ppl { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); }
.tcard .p { display: flex; justify-content: space-between; gap: 6px; font-size: 15px; color: var(--ink-3); }
.tcard .p b { font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcard .p.x b { font-weight: 500; color: var(--ink-3); }
.tcard .fit { margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.tcard.best { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.tcard[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.chips.len { gap: 6px; }
.card.picked { gap: 4px; }
.card.picked .big { font-size: 17px; }
@media (min-width: 900px) {
  .tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); overflow: visible; margin: 0; padding: 4px 0; }
  .wiz-foot { bottom: -48px; margin: auto auto -48px; padding: 18px 0 28px; }
}

/* ---------- quiet press (small, quick, no bounce, no hover lift; none for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .gbtn, .chip-btn, .day-btn, .tcard, button.row-item, .tab, .tab-new, .theme-btn, .avatar { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
  .btn:active, .gbtn:active, .chip-btn:active, .day-btn:active, .tcard:active, .tab-new:active, .theme-btn:active, .avatar:active { transform: scale(0.96); transition-duration: 0.12s; }
  button.row-item:active, .tab:active { transform: scale(0.985); transition-duration: 0.12s; }
}


/* the right-hand time/status never squeezes the name: at most 44% of the row, the status may wrap */
.row-item .end { max-width: 44%; }
.row-item .end .st { white-space: normal; }

/* ---------- v2.1: a fixed 5 clocks in the top bar (4 on phones): equal tiles, time / name / city ---------- */
.top-clocks { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 900px; margin: 0 14px; }
.tclock { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); color: var(--ink-2); text-align: left; line-height: 1.25; }
.tclock:hover { border-color: var(--line-2); }
.tclock .tc-t { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tclock .tc-c, .tclock .tc-z { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tclock .tc-c { color: var(--ink); font-weight: 600; }
.tclock .tc-z { color: var(--ink-3); }
.tclock .sdot { margin: 0; }
@media (max-width: 899px) {
  /* the 44 px top buttons fill the row, so less padding keeps the bar as tall as before */
  .top { flex-wrap: wrap; row-gap: 10px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .top-clocks { order: 3; flex: 1 1 100%; max-width: none; margin: 0 -10px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tclock { align-items: center; text-align: center; padding: 6px 2px; border-radius: 6px; }
  .tclock .tc-t { gap: 3px; letter-spacing: -0.01em; }
  .tclock .sdot { width: 6px; height: 6px; }
}

/* ---------- v2.1: Home — clients and teams side by side, each scrolls on its own ---------- */
.home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col-scroll { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.home-col .row-item { padding: 10px 12px; }
.home-col .row-item .title { font-size: 15px; }
.home-col .row-item .sub { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad { padding: 12px; margin: 0; }
@media (max-width: 420px) { .home-cols { gap: 8px; } .home-col .row-item { padding: 9px 10px; } }

/* "Needs you": a row with its own Skip button */
.need-row { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.need-row .need-main { flex: 1 1 auto; min-width: 0; }
.need-skip { flex: 0 0 auto; }
.need-row { background: var(--glass); }
.need-row .need-main { background: transparent; }

/* Top bar clocks chooser: tick a clock, then "Show as" a client/team name or the place only */
.pick-row { display: flex; flex-direction: column; gap: 6px; }
.pick-row.on .slot { border-color: var(--accent); }
.show-as { display: flex; align-items: center; gap: 10px; padding-left: 48px; }
.small-field { flex: 1 1 auto; min-height: 44px; font-size: 15px; }
.top-pick .chips { gap: 6px; }
.show-as > span { white-space: nowrap; }
@media (max-width: 420px) { .show-as { padding-left: 12px; } }
/* the client/team name may use 2 lines, so "Northwind Studio" is never cut to "Northwind Stu…" */
.tclock .tc-c { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.2; overflow-wrap: anywhere; }
.tclock { justify-content: flex-start; }

/* meeting notifications: the one-time card on Home */
.push-card { gap: 12px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.push-card-row { display: flex; align-items: flex-start; gap: 12px; }
.push-card-row .grow strong { display: block; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* exact time: hour : minutes AM/PM (or 24-hour), never the browser's own time box */
.time-field { display: flex; align-items: center; gap: 6px; }
.time-field .field { flex: 0 0 auto; width: 88px; min-width: 0; padding: 0 10px; }   /* compact: a box each for hour, minutes and AM or PM (owner, 6 Nov) */
.time-field select.field { padding-right: 28px; background-position: right 9px center; }
.time-field .tf-colon { font-weight: 600; color: var(--ink-3); }
.fmt-seg button { font-size: 15px; }

/* working hours on one screen (owner, 7 Nov 2026; demo _design/alive/hours-demo/v2.html): "5 working days · 45 h a
   week"; a ready set; the 7 days, one short row each (tick, times with a thin 24-hour bar, hours, pencil); the pencil
   opens one day with up to 3 small From - To pairs; the days add up to the total under them. */
.wh { display: flex; flex-direction: column; gap: 12px; }
.wh-glance { padding: 12px 14px; border-radius: var(--r); background: var(--tone); }
.wh-glance strong { color: var(--ink); font-size: 16px; }
.wh-preset { width: 100%; }
.wh-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.wh-drow, .wh-scale, .wh-total { display: grid; grid-template-columns: 76px minmax(0, 1fr) 60px 44px; align-items: center; column-gap: 8px; }
.wh-item { border-top: 1px solid var(--line); }
.wh-drow { padding: 2px 2px 2px 12px; }
.wh-drow.bad { background: var(--bad-soft); }
.wh-chk { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; cursor: pointer; }
.wh-chk input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--solid); }
.wh-times { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.wh-times.off { color: var(--ink-3); }
.wh-next { color: var(--warn); }
.wh-dbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--tone); overflow: hidden; }
.wh-dbar::before, .wh-dbar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.wh-dbar::before { left: 25%; } .wh-dbar::after { left: 75%; }
.wh-times.off .wh-dbar { opacity: .5; }
.wh-dbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--work); }
.wh-dbar i.spill { opacity: .45; }
.wh-dbar i.bad { background: var(--bad); }
.wh-hrs { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wh-hrs.off { color: var(--ink-3); font-weight: 400; }
.wh-pen { width: 44px; height: 44px; background: transparent; color: var(--ink-2); }
.wh-pen:hover, .wh-pen[aria-expanded="true"] { background: var(--tone); color: var(--ink); }
.wh-scale { padding: 8px 2px 2px 12px; color: var(--ink-3); }
.wh-ticks { position: relative; height: 20px; }
.wh-ticks b { position: absolute; top: 0; transform: translateX(-50%); font-weight: 400; font-size: 15px; white-space: nowrap; }
.wh-hh { text-align: right; font-size: 15px; }
.wh-total { padding: 10px 2px 10px 12px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--soft); }
.wh-total span { grid-column: 1 / 3; color: var(--ink-2); }
.wh-total strong { text-align: right; color: var(--ink); }
.wh-open { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px; }
.wh-rng { display: flex; align-items: center; gap: 6px; }
.wh-sel { flex: 0 0 auto; width: 132px; min-height: 44px; padding: 0 28px 0 10px; }
.wh-rng.bad .wh-sel { border-color: var(--bad); }
.wh-dash { color: var(--ink-3); }
.wh-len { color: var(--ink-3); white-space: nowrap; }
.wh-x { flex: 0 0 auto; margin-left: auto; width: 44px; height: 44px; background: transparent; color: var(--ink-3); }
.wh-x:hover { color: var(--bad); background: var(--bad-soft); }
.wh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.wh-acts .link-btn { min-height: 44px; }
.wh-problem, .wh-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 480px) {
  .wh-drow, .wh-scale, .wh-total { grid-template-columns: 62px minmax(0, 1fr) 50px 44px; column-gap: 6px; }
  .wh-ticks b:nth-child(2) { display: none; }   /* 6 AM and 6 PM only: three labels crowd */
  .wh-sel { flex: 1 1 0; width: auto; min-width: 0; padding: 0 24px 0 8px; }
  .wh-len { display: none; }   /* the day's hours are in its row */
}

/* booking step 3: who's joining — tap a person to edit, × to remove, add by email (Enter or ,) */
.who-row { padding: 0; gap: 0; }
.who-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 14px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.who-main .grow { min-width: 0; }
.who-x { flex: 0 0 auto; width: 44px; height: 44px; margin-right: 4px; background: transparent; color: var(--ink-3); }
.who-x:hover { color: var(--bad); background: var(--bad-soft); }
.adder { gap: 6px; }
.bad-text { color: var(--bad); margin: 0; }
.hours-skip { align-self: flex-start; text-decoration: none; }

/* long pages: never squeeze a card or list to make it fit (the page scrolls instead) */
.main > * { flex-shrink: 0; }

/* reminders: several chips + a custom one */
.rem .chips { gap: 6px; }
.rem-custom { flex-wrap: wrap; gap: 6px; }
/* drop-down lists: one quiet chevron instead of the browser's own arrow */
select.field { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6b65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3b6ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select.field option { background: var(--bg); color: var(--ink); }
/* the reminder picker: two scroll lists (how many, then minutes / hours / days / weeks) and Add, on one line */
.rem-custom { align-items: center; }
.rem-custom .field.rem-num, .rem-custom .field.rem-unit { flex: 0 0 auto; width: auto; min-height: 44px; padding-left: 12px; font-size: 15px; }
.rem-custom .field.rem-num { min-width: 68px; font-variant-numeric: tabular-nums; }
.rem-custom .field.rem-unit { min-width: 112px; }

/* meeting title / agenda: counters, the agenda box that keeps bold */
.count-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; }
.count { margin-left: auto; font-size: 15px; opacity: .7; font-variant-numeric: tabular-nums; }
.count.over { color: var(--bad); opacity: 1; font-weight: 600; }
.toolbar { display: flex; gap: 6px; margin: 0 0 6px; }
.tool-btn { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.tool-btn:hover { border-color: currentColor; }
.field.rich { min-height: 96px; max-height: 340px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.5; cursor: text; }
.field.rich.empty::before { content: attr(data-placeholder); opacity: .5; pointer-events: none; }
.field.rich b, .md-line b { font-weight: 600; }
.md-line { white-space: pre-wrap; word-break: break-word; }
/* Ready message for people without an email; quick edit chips on a meeting */
.msg-box { display: block; box-sizing: border-box; resize: vertical; margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.edit-chips { gap: 6px; }
.danger-text { color: var(--bad); }
#mt-people, #mt-edit { scroll-margin-top: 16px; }
.ready-msg .btn.block { margin-top: 8px; }
/* Home client/team rows: tap to book, "Edit" opens the client */
.row-split { display: flex; align-items: center; background: var(--bg); }
.row-split .row-item { flex: 1 1 auto; min-width: 0; }
.row-split .row-edit { flex: 0 0 auto; padding: 0 12px; min-height: 44px; }
:root[data-theme="dark"] .row-split { background: transparent; }
.ready-msg, .ready-msg .msg-box { text-align: left; width: 100%; }
/* Time offers: the start card in New meeting */
.offer-start { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer; border-style: dashed; }
.ok-note { border-color: var(--ok-line, color-mix(in srgb, var(--ok) 40%, transparent)); }

/* Short windows (a laptop zoomed to 200% or more): the whole page scrolls, so the header, the Next bar and the menu
   no longer take all the room (accessibility review H2). At most 2 top clocks. */
@media (max-height: 500px) {
  html, body { height: auto; }
  .app { height: auto; min-height: 100vh; }
  .main { overflow: visible; }
  .wiz-foot { position: static; margin-bottom: 0; }
  .top-clocks > :nth-child(n+3) { display: none; }
}

/* Meeting page: rows that fold (audit M8). */
details.fold { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
details.fold > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .fold-sum { color: var(--ink-3); font-weight: 400; font-size: 15px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.fold > :not(summary) { margin: 12px 14px; }

/* The hidden date label inside each time card stays inside the card (it stretched the page sideways on phones). */
.tcard { position: relative; }
/* After a change: tell the people without an email (owner, 3 Nov; prototype _design/alive/no-email-update.html) */
.tell { display: flex; flex-direction: column; gap: 10px; }
.tell p { margin: 0; }
.tell-why { display: flex; gap: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.tell-why .ico, .tell-why svg { flex: 0 0 auto; margin-top: 3px; color: var(--ink-3); }
.tell .msg-box { max-height: 220px; }
.tell .msg-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.tell-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tell-row [hidden] { display: none; }
.tell-done { margin-left: auto; color: var(--ink-2); text-decoration: none; }

/* ---------- Top clocks (owner, 3 Nov; prototype _design/alive/small-wins.html): 6 everywhere, named by city (tinted
   for the time of day there) or by client (each client in its own light shade), a "+" while there's room. On a phone
   the bar swipes: every clock keeps a readable width, a soft fade shows where more are. ---------- */
.tclock.tint-morning { background: #e3eef6; }
.tclock.tint-day { background: var(--bg); }
.tclock.tint-evening { background: #f6e6d3; }
.tclock.tint-night { background: #1d362f; border-color: #1d362f; }
.tclock.tint-night .tc-t, .tclock.tint-night .tc-c { color: #f2efe6; }
.tclock.tint-night .tc-z { color: #c9d6cf; }
.tclock.shade-0 { background: #e5efe8; } .tclock.shade-1 { background: #e4ecf4; } .tclock.shade-2 { background: #f3ebdc; }
.tclock.shade-3 { background: #efe6f0; } .tclock.shade-4 { background: #e3f0ef; } .tclock.shade-5 { background: #f4e6e1; }
.tclock[class*="shade-"] .tc-z { color: var(--ink-2); }
:root[data-theme="dark"] .tclock.tint-morning { background: #1b3540; }
:root[data-theme="dark"] .tclock.tint-evening { background: #3b3022; }
:root[data-theme="dark"] .tclock.tint-night { background: #0d1d19; border-color: var(--line); }
:root[data-theme="dark"] .tclock.tint-night .tc-t, :root[data-theme="dark"] .tclock.tint-night .tc-c { color: var(--ink); }
:root[data-theme="dark"] .tclock.tint-night .tc-z { color: var(--ink-2); }
:root[data-theme="dark"] .tclock.shade-0 { background: #1f4434; } :root[data-theme="dark"] .tclock.shade-1 { background: #1f3a4d; }
:root[data-theme="dark"] .tclock.shade-2 { background: #45391f; } :root[data-theme="dark"] .tclock.shade-3 { background: #3d2e44; }
:root[data-theme="dark"] .tclock.shade-4 { background: #1e4544; } :root[data-theme="dark"] .tclock.shade-5 { background: #4a2f28; }
.tclock-add { align-items: center; justify-content: center; border-style: dashed; border-color: var(--line-2); background: transparent; color: var(--ink-3); }
.tclock-add:hover { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 899px) {
  .top-clocks { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; }
  .top-clocks::-webkit-scrollbar { display: none; }
  .tclock { flex: 0 0 auto; min-width: 92px; max-width: 160px; padding: 6px 10px; scroll-snap-align: start; }
  .tclock-add { min-width: 44px; padding: 0; }
  .top-clocks.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .top-clocks.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
  .top-clocks.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}
/* Today popup (owner, 3 Nov): start time first, then Now / Next / a countdown on every meeting */
.tday { align-items: center; }
.tday-time { flex: 0 0 auto; min-width: 72px; font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tday-tag { display: inline-block; font-size: 15px; font-weight: 600; border-radius: 4px; padding: 0 6px; margin-bottom: 2px; background: var(--tone); color: var(--ink-2); }
.tday-tag.now { background: var(--rust-soft); color: var(--rust); }
.tday-tag.next { background: var(--ok-soft); color: var(--on-ok-soft); }
.tday .title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* A meeting in progress (owner, 3 Nov): "Happening now" on Home and in the lists */
.live-now > .label { display: inline-flex; align-items: center; gap: 8px; color: var(--rust); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust-dot); box-shadow: 0 0 0 3px var(--rust-soft); }
.row-item .tday-tag { margin-bottom: 2px; }
/* Clocks page: the top bar clocks as real clocks (owner, 3 Nov) */
.tpc-list { display: flex; flex-direction: column; gap: 6px; }
.tpc-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); flex-wrap: wrap; }
.tpc-time { min-width: 76px; font-size: 18px; font-weight: 600; color: var(--ink); }
.tpc-row .grow { display: flex; flex-direction: column; min-width: 120px; }
.tpc-row select.small-field { flex: 0 1 200px; min-height: 44px; }
.tpc-custom { display: inline-flex; gap: 6px; align-items: center; flex: 0 1 260px; }
.tpc-custom .field { min-height: 44px; }
/* A guest without email whose clocks change before your meeting (owner, 3 Nov): a red card on Home */
.clock-alert { gap: 6px; border-color: var(--bad-line); background: color-mix(in srgb, var(--bad) 6%, var(--bg)); }
.clock-alert > strong { color: var(--bad); }
.clock-alert p { margin: 0; color: var(--ink-2); }
.keep-usual { margin-top: 8px; }
/* Step 2.5: what to check about the chosen time, right under the best times (one line per kind, wraps on a phone) */
.best-warn > strong { display: block; color: inherit; }
.best-warn ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.best-warn li { overflow-wrap: anywhere; }
.best-warn li > strong { color: inherit; }
/* 12h / 24h next to day/night */
.fmt-btn { width: auto; min-width: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; }
/* New meeting: "Someone new" stands out above the client list (owner, 4 Nov 2026) */
.row-item.new-person { border: 1px dashed var(--accent); border-radius: var(--r); cursor: pointer; }
.row-item.new-person .initials { background: var(--accent-soft); color: var(--on-accent-soft); }
/* Labels and Private (owner, 4 Nov 2026) */
.label-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: var(--tone); color: var(--ink-2); font-size: 15px; font-weight: 600; vertical-align: 1px; }
.meet-tags { margin: 4px 0 0; } .meet-tags .label-tag:first-child { margin-left: 0; }
.card.for-whom { gap: 8px; }
.seg.pick-how { margin-bottom: 4px; }
/* Group polls (owner, 4 Nov 2026) */
.res { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.res.best { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.res .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--tone); }
.res .bar i { display: block; height: 100%; }
.res .bar .y { background: var(--accent); } .res .bar .m { background: #c9a227; } .res .bar .n { background: var(--line-2); }
.poll-card { gap: 6px; }
.poll-card .btn { align-self: flex-start; }
.row-item.poll-time .sub { white-space: normal; }
/* The 12-hour / 24-hour choice on the same line as the time boxes (owner, 6 Nov 2026); under them on a phone */
.time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.time-row .fmt-seg { flex: 1 1 300px; margin: 0; }
.time-row .fmt-seg.short { flex: 0 1 220px; }   /* "12-hour" / "24-hour" beside the time boxes, also in the booking screen's When column */

/* Agenda tools (agenda.js, owner 6 Nov 2026): Bold, Underline, Numbered list, Clear | align left, centre, right, justify.
   One line: two joined groups, as in Word; in a box under 360 px the four alignments fold into one Align button. */
.section:has(> .ag-tools) { container-type: inline-size; }
.ag-tools { display: flex; flex-wrap: nowrap; gap: 10px; margin: 0 0 6px; }
.ag-group { position: relative; display: flex; }
.ag-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 9px; margin-left: -1px; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.ag-group > .ag-tool:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.ag-group:not(.ag-align) > .ag-tool:last-child, .ag-align > .ag-tool:nth-child(4) { border-radius: 0 6px 6px 0; }
.ag-tool:hover { position: relative; z-index: 1; border-color: var(--ink); }
.ag-tool[aria-pressed="true"] { position: relative; z-index: 1; background: var(--accent-soft); border-color: var(--accent); }
.ag-tool:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--accent); outline-offset: 1px; }
.ag-align > .ag-menu { display: none; gap: 2px; padding: 0 8px; margin-left: 0; border-radius: 6px; }
.ag-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; padding: 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); box-shadow: 0 10px 24px rgba(22, 48, 42, .16); }
.ag-pop[hidden] { display: none; }
.ag-pop > .ag-tool:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.ag-pop > .ag-tool:last-child { border-radius: 0 6px 6px 0; }
@container (max-width: 359px) {
  .ag-align > .ag-tool:not(.ag-menu) { display: none; }
  .ag-align > .ag-menu { display: inline-flex; }
}
.field.rich u { text-decoration: underline; }
/* an agenda line's alignment (a class: inline styles are not allowed here) */
.ag-center { text-align: center; } .ag-right { text-align: right; } .ag-justify { text-align: justify; }

/* ---------- One booking screen (owner, 6 Nov 2026; demo _design/alive/booking-demo) ----------
   Who on top, then Teams and clients beside When, then the details; the title and Send stay at the bottom. */
.bk1-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.bk1-head .page-title { margin: 0; }
.bk1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.bk-part { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.bk-part > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; }
.bk-part > h2 .link-btn { min-height: 44px; margin: -8px 0; }
.bk-part .tcards { margin: 0 -16px; padding: 4px 16px 8px; scroll-padding: 0 16px; }
@media (min-width: 900px) {
  body.bk-on .app { max-width: 1440px; }
  body.bk-on .main > * { max-width: 1180px; }
}
@media (min-width: 1100px) {
  .bk1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .bk-who, .bk-details { grid-column: 1 / -1; }
}
/* Who: the search box with suggestions, + Someone new, then the name tags */
.bk-whorow { position: relative; display: flex; gap: 10px; }
.bk-whorow .field { flex: 1 1 auto; min-width: 0; }
.bk-whorow .btn { flex: 0 0 auto; white-space: nowrap; }
.bk-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); box-shadow: 0 12px 28px rgba(22, 48, 42, .14); }
.bk-sugg[hidden] { display: none; }
.bk-sugg button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; }
.bk-sugg button .bk-k { color: var(--ink-3); font-weight: 400; text-align: right; }
.bk-sugg button:hover, .bk-sugg button:focus-visible { background: var(--accent-soft); outline: none; }
.bk-sugg .bk-none { margin: 0; padding: 10px; color: var(--ink-3); font-size: 15px; }
.bk-newp { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.bk-newp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bk-newp > .btn { align-self: flex-start; min-width: 120px; }
.bk-groups { display: flex; flex-direction: column; gap: 8px; }
.bk-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gname { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 15px; font-weight: 600; }
.gname .bk-n { font-weight: 500; opacity: .85; }
.gname svg { transform: rotate(90deg); transition: transform .15s; }
.bk-group.closed .gname svg { transform: none; }
.bk-group.closed .ptag { display: none; }
.ptag { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 15px; }
.ptag-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 42px; padding: 0 4px 0 12px; border: 0; border-radius: 999px 0 0 999px; background: none; color: inherit; font: inherit; }
.ptag-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptag .bk-t { color: var(--ok); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptag.out { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.ptag.out .bk-t { color: var(--warn); }
.ptag.me { gap: 6px; padding: 0 14px; background: var(--accent-soft); border-color: transparent; }
.ptag.me.out { background: var(--warn-soft); }
.ptag .x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 2px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); }
.ptag .x:hover, .ptag-name:hover { background: var(--tone); color: var(--ink); }
.bk-empty { margin: 0; }
/* Teams and clients: folders with arrows and tick boxes */
.bk-folder { display: flex; flex-direction: column; gap: 6px; }
.bk-folder .fhead { color: var(--ink-3); font-size: 15px; font-weight: 600; }
.bk-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.bk-item.bk-main { border-color: var(--line-2); }
.irow { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; }
.irow .arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); }
.irow .arrow:hover { background: var(--tone); }
.irow .arrow svg { transition: transform .15s; }
.bk-item.open .arrow svg { transform: rotate(90deg); }
.arrow-gap { flex: 0 0 auto; width: 10px; }
.bk-item .chk { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; cursor: pointer; }
.bk-item .chk input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--solid); }
.bk-item .chk .nm { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-item .bk-meta { min-width: 0; color: var(--ink-3); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-count { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: var(--tone); color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; }
.bk-people { padding: 0 10px 6px 44px; }
.bk-people .chk .bk-meta { margin-left: auto; }
.bk-people .small { margin: 0 0 8px; }
/* When: three ways to choose, then the length and the time format */
.seg3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg3 button { padding: 0 6px; line-height: 1.2; }
.bk-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--tone); }
.pills button { min-width: 52px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 5px; background: none; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.pills button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.bk-when .section, .bk-details .section { margin: 0; }
/* The bar at the bottom: title and Send, with what you are about to send */
.bk-send { gap: 6px; }
.bk-send-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-send-row .field { flex: 1 1 260px; min-width: 0; }
.bk-send-row .btn { flex: 0 0 auto; min-width: 180px; }
.bk-send-row { align-items: center; }
.bk-tcount { flex: 0 0 auto; color: var(--ink-3); font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .bk-tcount:not(.near) { display: none; } }   /* phones: only near the limit, so Send keeps its room */
.bk-sum { margin: 0; font-size: 15px; color: var(--ink-2); }
.bk-sum strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .bk-newp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .bk-whorow { flex-wrap: wrap; }
  .bk-whorow .btn { flex: 1 1 100%; }
  .bk-part { padding: 14px 12px; }
  .bk-part .tcards { margin: 0 -12px; padding: 4px 12px 8px; scroll-padding: 0 12px; }
  .bk-people { padding-left: 34px; }
  /* the phone: the bar stays small (title and Send on one line, the summary only); the length fills one line */
  .bk-send-row { flex-wrap: nowrap; }
  .bk-send-row .field { flex: 1 1 auto; }
  .bk-send-row .btn { min-width: 0; padding: 0 16px; }
  .bk-sum .muted { display: none; }
  .bk-opts .pills[aria-label="Length"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .bk-opts .pills[aria-label="Length"] button { min-width: 0; padding: 0 2px; }
}
@media (max-width: 380px) { .seg3 button { font-size: 15px; } }
.bk-when .tcard { flex: 0 0 auto; width: max-content; min-width: 152px; }   /* grows to fit "5:30 PM · evening" (it ran over the edge) */
/* the booking screen on a laptop: the time cards as a grid inside the When part, each wide enough for
   "Emma 6:00 AM · weekend" (they ran past the edge and cut that word, 7 Nov) */
@media (min-width: 900px) {
  .bk-when .tcards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0; padding: 4px 0 8px; }
  .bk-when .tcard { width: auto; min-width: 0; }
}

/* Links to the website (owner, 7 Nov 2026): Help and guides and alignhour.com at the bottom of the laptop menu; a
   "Help and website" part in Account; alignhour.com at the top right of the sign-in page. Each opens a new tab. */
.tabs-site { display: none; }
@media (min-width: 900px) {
  .tabs-site { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
  .tab-site { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 6px; color: var(--ink-3); font-size: 15px; text-decoration: none; }
  .tab-site:hover { background: var(--tone); color: var(--ink); }
}
.acc-site { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); }
.acc-site-a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; color: var(--ink); font-size: 15px; text-decoration: none; }
.acc-site-a + .acc-site-a { border-top: 1px solid var(--line); }
.acc-site-a svg { color: var(--ink-3); flex: 0 0 auto; }
.acc-site-a:hover { background: var(--tone); }
.top-site { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--ink-3); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.top-site:hover { color: var(--ink); }

/* Client teams and projects (owner, 7 Nov 2026; N5, Option C). A client's page: the owner, their people, our side as
   chips picked from your teams (with a project filter once the client has projects). Your teams: each person's clients
   as small tags. Booking: All my teams, two dropdowns inside a client, Guests, From our side, Project. */
.ctags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ctag { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--on-accent-soft); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ownrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ownrow .field-label { margin: 0; }
.ownrow .sel { flex: 0 1 240px; }
.field.sel { min-height: 44px; padding: 0 30px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background-color: var(--bg); color: var(--ink); font: 600 15px var(--font); }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ptag .s { color: var(--ink-3); font-size: 15px; font-weight: 400; white-space: nowrap; }
.ptag.own { background: var(--accent-soft); border-color: transparent; }
.ptag.own .s { color: var(--on-accent-soft); font-weight: 600; }
.row-between .btn.small { min-height: 44px; }
/* Add from my teams */
.aft-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.aft-filters .field { flex: 1 1 200px; min-width: 0; }
.aft-count { margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.aft-box .bk-item .chk .nm { white-space: normal; }
/* Booking */
.bk-item.bk-all { background: var(--soft); }
.bk-subs { padding: 0 8px 6px 36px; }
.bk-sub { border-top: 1px dashed var(--line); }
.bk-sub .bk-people { padding-left: 44px; }
.gname.ours { background: var(--accent); }
.gname.guest { background: var(--warn-soft); color: var(--warn); }
.bk-how, .bk-proj { display: flex; flex-direction: column; gap: 6px; }
.bk-how .small, .bk-proj .small { margin: 0; }
.our-pick { margin: 0; }
.note.ok-note.our-pick { background: var(--accent-soft); color: var(--on-accent-soft); border-color: transparent; }
@media (max-width: 560px) {
  .bk-subs { padding: 0 6px 6px 8px; }
  .bk-sub .bk-people { padding-left: 28px; }
  .bk-item .chk .bk-meta { white-space: normal; }
}

/* ---------- Two sides (owner and his wife, 7 Nov 2026; N5a; demo _design/alive/two-sides-demo) ----------
   My teams on the left, the meeting in the middle, Contacts on the right from 1280 px; narrower, three tabs. */
.bk3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.bk3 .bk1 { grid-template-columns: minmax(0, 1fr); }
.bk3 .bk-who, .bk3 .bk-details { grid-column: auto; }
.bk3[data-pane="mid"] > .bk-side, .bk3[data-pane="left"] > :not(.bk-left), .bk3[data-pane="right"] > :not(.bk-right) { display: none; }
.bk-tabs3 { grid-auto-flow: column; }
.bk-tabs3 button, .bk-cview button { padding: 0 6px; line-height: 1.15; }
.bk-side { gap: 10px; padding: 14px 12px; }
.bk-side > h2 { font-size: 17px; }
.bk-side .bk-item .irow { gap: 2px; }
.bk-side .bk-people { padding: 0 6px 6px 22px; }
.bk-side .bk-people .bk-item { margin-bottom: 6px; }
.bk-item.bk-all { background: var(--soft); border-color: var(--line-2); }
.bk-item .chk .tx2, .bk-flat .chk .tx2 { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.tx2 .nm, .tx2 .bk-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-people .chk .tx2 .bk-meta, .tx2 .bk-meta { margin-left: 0; }
.bk-flat { display: flex; flex-direction: column; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bk-flat .chk { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; color: var(--ink); }
.bk-flat .chk + .chk { border-top: 1px dashed var(--line); }
.bk-flat .chk input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--solid); }
.bk-flat .bk-meta { color: var(--ink-3); font-size: 15px; }
/* Colour badges for teams and groups (colours only, no pictures: owner, 7 Nov 2026) */
.lg { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.lg.s { width: 24px; height: 24px; border-radius: 6px; }
.lg.c0 { background: #1f6f5c; } .lg.c1 { background: #2f5d8a; } .lg.c2 { background: #8a4b2f; } .lg.c3 { background: #6b4e9b; }
.lg.c4 { background: #9b2f5c; } .lg.c5 { background: #4f6b2f; } .lg.c6 { background: #2f7a8a; } .lg.c7 { background: #5a5a5a; }
@media (min-width: 1280px) {
  body.bk-on .app { max-width: 1600px; }
  body.bk-on .main { padding: 20px 20px 40px; }
  body.bk-on .main > * { max-width: none; }
  .bk-tabs3 { display: none; }
  .bk3 { grid-template-columns: 272px minmax(0, 1fr) 292px; }
  .bk3[data-pane] > .bk-side { display: flex; }
  .bk3[data-pane] > .bk-mid { display: grid; }
  .bk-side { position: sticky; top: 0; max-height: calc(100vh - 150px); overflow-y: auto; }
}
.bk3 .bk-send { position: sticky; bottom: -28px; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.bk-side .irow .arrow { width: 32px; }
.bk-side .bk-item .chk { gap: 8px; }
.bk-side .bk-meta .bk-count { padding: 0; background: none; color: inherit; font-weight: 400; }
@media (min-width: 1280px) { .bk3 .bk-send { bottom: -40px; } }
.bk3 .time-row { gap: 8px; }
.bk3 .time-row .fmt-seg.short { flex: 0 1 136px; }
@media (max-height: 500px) { .bk3 .bk-send { position: static; } }

/* Who in parts (N5b): My team, each client, Others. Each part is as wide as its tags need (flex basis auto). */
.bk-parts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.bk-pt { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.bk-pt-mine { background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg)); }
.bk-pt-others { background: color-mix(in srgb, var(--warn-soft) 40%, var(--bg)); }
.bk-pth { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font-weight: 600; text-align: left; }
.bk-pth svg { transform: rotate(90deg); transition: transform .15s; flex: 0 0 auto; }
.bk-pt.closed .bk-pth svg { transform: none; }
.bk-pth .bk-n { padding: 0 8px; border-radius: 999px; background: var(--tone); font-weight: 600; }
.bk-pth .bk-sum2 { min-width: 0; color: var(--ink-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-ptb { display: flex; flex-direction: column; gap: 6px; }
.bk-pt .gname .lg { margin-left: -2px; }
.bk-whobtns { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-whobtns .btn { flex: 0 0 auto; }
.pick { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pick .chk { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; color: var(--ink); }
.pick .chk + .chk { border-top: 1px dashed var(--line); }
.pick .chk input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--solid); }
.pick .tx2 { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pick .bk-meta { color: var(--ink-3); font-size: 15px; }

/* When (N5c): one line per local time, day words; Length as a small dropdown */
.tlines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tline + .tline { border-top: 1px solid var(--line); }
.tline-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--ink); text-align: left; }
.tline-b b { color: var(--ok); font-weight: 600; min-width: 76px; }
.tline.out .tline-b b { color: var(--warn); }
.tline-b .tl-day { color: var(--ink-2); }
.tline-b .tl-who { flex: 1 1 160px; min-width: 0; color: var(--ink-3); }
.tl-list { margin: 0; padding: 0 12px 10px 34px; color: var(--ink-2); }
.bk-len { display: inline-flex; align-items: center; gap: 8px; }
.bk-len .field-label { margin: 0; }
.field.sel { min-height: 44px; width: auto; padding: 0 30px 0 10px; }
.ex-for-you { margin: 0; }
.lg::before { content: attr(data-i); }

/* Editing my side (N5d): a pencil on each person, a menu on each team, colour swatches */
.bk-side .prow { display: flex; align-items: center; gap: 2px; }
.bk-side .prow .chk { flex: 1 1 auto; min-width: 0; }
.bk-side .ed { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); }
.bk-side .ed:hover { background: var(--tone); color: var(--ink); }
.bk-side .bk-people > .link-btn { min-height: 44px; }
.sw { display: flex; flex-wrap: wrap; gap: 6px; }
.sw .lg { width: 44px; height: 44px; border: 2px solid transparent; border-radius: 10px; }
.sw .lg[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--bg); }
.team-remove { display: flex; flex-direction: column; gap: 8px; }

/* Editing contacts (N5e) */
.bk-addrow { gap: 8px; }
.np-box { padding: 0; }
.np-box > summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--accent); font-weight: 600; cursor: pointer; }
.np-box > .stack { padding: 0 12px 12px; gap: 8px; }
.ps-groups { max-height: 220px; }
/* Wider side panels on wide screens, so names show in full (N5 pictures, 7 Nov 2026) */
.bk-side .bk-people { padding-left: 12px; }
@media (min-width: 1440px) { .bk3 { grid-template-columns: 304px minmax(0, 1fr) 324px; } }
.bk3 .bk-send-row .field { flex: 1 1 180px; }
.bk3 .bk-send-row .btn { min-width: 132px; }
.bk-whobtns .btn { flex: 1 1 140px; justify-content: center; }