/* Design v3. One stylesheet for the Mac and browser app (Main.dc.html) and the phone (PhoneToday, PhoneLead,
   PhoneStage, PhoneLogUpdate, PhoneAddLead, PhoneOutreach). Every size, colour, radius and gap comes from the
   design files; colours are tokens so dark mode and the company accent swap in one place. */
:root {
  --accent: #0E7A55; --on-accent: #FFFFFF;
  --accent-tint: color-mix(in srgb, var(--accent) 10%, #FFFFFF);   /* E6F2EC */
  --accent-soft: color-mix(in srgb, var(--accent) 3%, #F5F6F5);    /* EEF2F0 for Sera */
  --accent-row: color-mix(in srgb, var(--accent) 7%, #FBFEFB);     /* EAF5EF for Sera */
  --accent-deep: color-mix(in srgb, var(--accent) 78%, #000000);   /* 0A5C40 */
  --page: #FFFFFF; --page2: #FAFAFB; --side: #F2F2F5; --phone: #F2F2F7; --card: #FFFFFF; --stat: #F5F5F7; --note: #F7F7F9;
  --text: #1D1D1F; --text2: #48484D; --hint: #6E6E73; --hint2: #8A8A90; --placeholder: #C7C7CC; --grab: #C7C7CC; --ring: #B9B9C0;
  /* the words in an empty field: the hint grey, not the design's #C7C7CC, so they keep 4.5:1 on white */
  --placeholder-text: #6E6E73;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --line: #E2E2E6; --line2: #E8E8EC; --line3: #F0F0F3; --line4: #ECECF0; --line5: #EDEDF0; --line6: #F2F2F5; --btn-line: #DCDCE1;
  --chip: #F2F2F5; --seg: #EEEEF1; --seg-phone: #E3E3E8; --seg-on: #FFFFFF; --avatar: #E8E8ED; --sel: #E1E1E6; --tile-on: #DCDCE2; --bar-off: #E5E5EA;
  --orange: #E07A00; --orange-bg: #FFF4E5; --orange-text: #6B4A12; --orange-quiet: #A95600; --notice-bg: #FFF8EC; --notice-text: #8A5300;
  --red: #B3261E; --blue-date: #0B57C2; --tile-blue: #007AFF; --tile-green: #2E9D58; --tile-purple: #7A4FD6;
  /* grey text on a grey or tinted fill keeps 4.5:1: on a selected row (EEF2F0), on the selected sidebar row (E1E1E6) and the phone search (E3E3E8) */
  --hint-sel: #636366; --hint-strong: #5E5E63;
  /* orange that carries text: N days quiet on a white row, the Start button and the picked event chip with white words */
  --quiet: #B05A00; --orange-btn: #B05A00; --on-orange: #FFFFFF;
  --talk-fg: #0B57C2; --talk-bg: #E8F0FE; --won-fg: #0E6B49; --won-bg: #E2F3EB; --late-fg: #B3261E; --late-bg: #FCEBEA; --none-fg: #55555B; --none-bg: #EFEFF2;
  --bar-not: #C7C7CC; --bar-talk: #4A8DF0; --bar-won: #2E9D58;
  --tabbar: rgba(249, 249, 251, 0.96); --overlay: rgba(0, 0, 0, 0.25); --overlay-phone: rgba(0, 0, 0, 0.32); --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  --focus: #007AFF;
  --row-open: #FAFAFB; --chip-x: var(--accent-deep);   /* the Directory: an open row, the x on a filter chip (the design's #4F8A71 is 3.5:1 on the tint and green for every company; the deep words keep 4.5:1) */
  /* the Directory's column filters: a cell a filter matched (F6FAF8 for Sera), the open column name, the pop-over's shadow */
  --cell-hit: color-mix(in srgb, var(--accent) 4%, #FFFFFF); --col-open: #ECECF0; --pop-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent-tint: color-mix(in srgb, var(--accent) 22%, #2C2C2E);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #2C2C2E);
  --accent-row: color-mix(in srgb, var(--accent) 18%, #2C2C2E);
  --accent-deep: color-mix(in srgb, var(--accent) 80%, #FFFFFF);
  --page: #1C1C1E; --page2: #1C1C1E; --side: #232325; --phone: #1C1C1E; --card: #2C2C2E; --stat: #2C2C2E; --note: #3A3A3C;
  --text: #F2F2F7; --text2: #D1D1D6; --hint: #98989D; --hint2: #8E8E93; --placeholder: #636366; --grab: #636366; --ring: #636366;
  --placeholder-text: #98989D;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398989D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --line: #3A3A3C; --line2: #3A3A3C; --line3: #3A3A3C; --line4: #3A3A3C; --line5: #3A3A3C; --line6: #3A3A3C; --btn-line: #48484A;
  --chip: #3A3A3C; --seg: #3A3A3C; --seg-phone: #3A3A3C; --seg-on: #636366; --avatar: #48484A; --sel: #3A3A3C; --tile-on: #48484A; --bar-off: #48484A;
  --orange: #FF9F0A; --orange-bg: #3A2A10; --orange-text: #F5C27A; --orange-quiet: #FFB357; --notice-bg: #3A2A10; --notice-text: #F5C27A;
  --red: #FF8A80; --blue-date: #6FA8FF; --tile-blue: #0A84FF; --tile-green: #30D158; --tile-purple: #BF5AF2;
  --hint-sel: #AEAEB2; --hint-strong: #AEAEB2;
  --quiet: #FFB357; --orange-btn: #FF9F0A; --on-orange: #1D1D1F;
  --talk-fg: #8AB8FF; --talk-bg: #1E3A5F; --won-fg: #7FE0B2; --won-bg: #163D2E; --late-fg: #FF8A80; --late-bg: #4A1F1C; --none-fg: #C7C7CC; --none-bg: #3A3A3C;
  --bar-not: #636366; --bar-talk: #4A8DF0; --bar-won: #30D158;
  --tabbar: rgba(28, 28, 30, 0.96); --overlay: rgba(0, 0, 0, 0.5); --overlay-phone: rgba(0, 0, 0, 0.55); --shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  --row-open: #232325; --chip-x: var(--accent-deep);
  --cell-hit: color-mix(in srgb, var(--accent) 12%, #1C1C1E); --col-open: #3A3A3C; --pop-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
body.is-phone { background: var(--phone); font-size: 15px; line-height: 1.35; }
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; margin: 0; }
button:disabled { cursor: default; opacity: .5; }
input, textarea, select { font: inherit; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--placeholder-text); opacity: 1; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hint { color: var(--hint); }
.muted { color: var(--hint); font-weight: 400; }
.red { color: var(--red); }
.b { font-weight: 600; }
.err { color: var(--red); margin: 0; }
.boot-wait { display: flex; align-items: center; justify-content: center; height: 100vh; }
.spinner { width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--btn-line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--text); color: var(--page); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 60; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }
body.is-desktop .toast { bottom: 28px; }
.fading { opacity: 0; transition: opacity .3s ease; }
.skel { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; }
.skel .bar { display: block; height: 12px; border-radius: 6px; background: var(--chip); width: 70%; }
.skel .bar.short { width: 40%; }

/* ---------- buttons (sizes from the design) ---------- */
.b-accent28 { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.b-line28 { height: 28px; padding: 0 12px; border: 1px solid var(--btn-line); border-radius: 14px; background: var(--card); font-weight: 600; }
.b-text28 { height: 28px; padding: 0 12px; border-radius: 14px; color: var(--hint); font-weight: 600; }
.b-accent30 { height: 30px; padding: 0 14px; border-radius: 15px; background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.b-line30 { height: 30px; padding: 0 14px; border: 1px solid var(--btn-line); border-radius: 15px; background: var(--card); font-weight: 600; white-space: nowrap; }
.b-accent32 { height: 32px; padding: 0 16px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.b-line32 { height: 32px; padding: 0 14px; border: 1px solid var(--btn-line); border-radius: 16px; background: var(--card); font-weight: 600; white-space: nowrap; }
.b-accent34 { height: 34px; padding: 0 16px; border-radius: 17px; background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.b-accent34.w18 { padding: 0 18px; }
.b-line34 { height: 34px; padding: 0 16px; border: 1px solid var(--btn-line); border-radius: 17px; background: var(--card); font-weight: 600; white-space: nowrap; }
.b-ch { height: 26px; padding: 0 10px; border: 1px solid var(--btn-line); border-radius: 13px; background: var(--card); font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; }
/* a channel button that is a link (Email, Telegram, LinkedIn, WhatsApp) looks like the design's button, not a link */
a.b-ch, a.b-pill30, a.b-round34, a.b-line30, a.b-line34, a.b-p40 { text-decoration: none; }
a.b-ch, a.b-ch:hover { color: var(--text); }
.b-link { color: var(--accent); font-weight: 600; }
.b-more { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--btn-line); background: var(--card); display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.b-round { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.circle { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 10px; border: 1.5px solid var(--ring); background: var(--card); display: flex; align-items: center; justify-content: center; }
.circle.l22 { width: 22px; height: 22px; flex-basis: 22px; border-radius: 11px; }
.circle.l24 { width: 24px; height: 24px; flex-basis: 24px; border-radius: 12px; }
.circle.done { background: var(--accent); border-color: var(--accent); }
.avatar { border-radius: 50%; background: var(--avatar); color: var(--text2); font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.a26 { width: 26px; height: 26px; font-size: 11px; }
.a30 { width: 30px; height: 30px; font-size: 12px; }
.a32 { width: 32px; height: 32px; font-size: 12px; }
.a38 { width: 38px; height: 38px; font-size: 13px; }
.a44 { width: 44px; height: 44px; font-size: 15px; }
.pill { height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.pill.talk { color: var(--talk-fg); background: var(--talk-bg); }
.pill.won { color: var(--won-fg); background: var(--won-bg); }
.pill.late { color: var(--late-fg); background: var(--late-bg); }
.pill.none { color: var(--none-fg); background: var(--none-bg); }
.chip { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--chip); color: var(--text2); display: inline-flex; align-items: center; font-weight: 500; white-space: nowrap; }
.chip.orange { background: var(--orange-bg); color: var(--orange-text); font-weight: 600; }
.chip.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip.plain { font-weight: 400; }   /* the outreach filters (Main.dc.html); the lead list chips stay 500 */
.xchip { height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--btn-line); background: var(--card); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xchip.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); font-weight: 600; }
.xchip.orange { border-color: transparent; background: var(--orange-bg); color: var(--orange-text); font-weight: 600; }
.xchip.red { color: var(--red); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: flex; flex-wrap: wrap; background: var(--seg); border-radius: 9px; padding: 2px; width: fit-content; max-width: 100%; }
.seg button { height: 28px; padding: 0 16px; border-radius: 7px; font-weight: 600; white-space: nowrap; }
.seg button.on { background: var(--seg-on); }
.seg.px14 button { padding: 0 14px; }
.seg.grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); width: auto; }
.seg.grid button { padding: 0 4px; }
.lab { color: var(--hint); font-size: 12px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.in { height: 36px; border: 1px solid var(--btn-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--card); color: var(--text); width: 100%; }
textarea.in { height: auto; padding: 10px; resize: vertical; min-height: 60px; }
/* a select is a field like the others (Main.dc.html add lead: 36px, words 10px in, on the middle line), with its own
   chevron; "Pick one" in an unset select reads like the Country field's empty words */
select.in, .pselect { appearance: none; -webkit-appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; }
select.in { padding: 0 30px 0 10px; text-indent: 0; line-height: normal; }
select.in.unset { color: var(--placeholder-text); }
select.in.unset option { color: var(--text); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.empty { padding: 10px 20px 4px; color: var(--hint); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.empty .act { color: var(--accent); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line4); border-radius: 12px; }
.card.clip { overflow: hidden; }

/* ---------- the Mac and browser shell ---------- */
.dshell { display: flex; height: 100vh; min-height: 780px; position: relative; overflow: hidden; background: var(--page); }
.sidebar { width: 256px; flex: 0 0 256px; background: var(--side); border-right: 1px solid var(--line); padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.sb-brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.sb-name { font-size: 15px; font-weight: 600; }
.sb-add { width: 28px; height: 28px; border-radius: 14px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.sb-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--btn-line); border-radius: 8px; background: var(--card); text-align: left; }
.sb-search .ph { flex: 1; color: var(--hint); }
.sb-search .kbd { color: var(--hint); font-size: 12px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 11px; text-align: left; background: var(--card); width: 100%; }
.tile.on { background: var(--tile-on); }
.tile .tr { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ic { width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic.blue { background: var(--tile-blue); }
.ic.green { background: var(--tile-green); }
.ic.purple { background: var(--tile-purple); }
.ic.orange { background: var(--orange); }
.tile .n { font-size: 20px; font-weight: 700; }
.tile .lb { font-weight: 600; color: var(--text2); }
.sb-group { display: flex; flex-direction: column; gap: 1px; }
.sb-label { font-size: 11px; font-weight: 600; color: var(--hint); padding: 4px 8px; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; text-align: left; width: 100%; }
.sb-item.on { background: var(--sel); }
.sb-item.quiet { color: var(--hint); }
.sb-item .t { flex: 1; }
.sb-item .two { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sb-item .two span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .sub { color: var(--hint); font-size: 11px; }
.sb-item .c { color: var(--hint); }
.sb-item.on .c, .sb-item.on .sub { color: var(--hint-strong); }
.sb-fill { flex: 1; }
.sb-foot { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); text-align: left; width: 100%; }
.sb-foot .t { flex: 1; }
.sb-foot .c { color: var(--hint); }
.sb-foot.on { background: var(--sel); border-radius: 7px; }   /* the open Settings page, like every other sidebar row */
.sb-foot.on .c { color: var(--hint-strong); }

.listcol { box-sizing: content-box; width: 396px; flex: 0 0 396px; border-right: 1px solid var(--line2); display: flex; flex-direction: column; min-width: 0; background: var(--page); }
.listhead { padding: 18px 20px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line3); }
.listhead h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; }
.listhead .sub { color: var(--hint); }
.listbody { flex: 1; overflow-y: auto; padding: 4px 0 24px; }
.sec { padding: 12px 20px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sec h2 { margin: 0; font-size: 15px; font-weight: 700; }
.sec .side { color: var(--hint); white-space: nowrap; }
.sec.replies { padding: 20px 20px 4px; }
.sec.progress { padding: 16px 20px 2px; }
.todo { display: flex; align-items: center; gap: 10px; padding: 7px 20px; }
.todo .body { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; text-align: left; }
.todo .two { display: flex; flex-direction: column; min-width: 0; }
.todo .nm { font-weight: 600; font-size: 14px; }
.todo .st { color: var(--hint); }
.todo .due { font-weight: 600; white-space: nowrap; }
.due.late { color: var(--red); }
.banner { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 6px 20px 0; padding: 10px 12px; border-radius: 10px; background: var(--orange-bg); text-align: left; }
.banner .two { flex: 1; display: flex; flex-direction: column; }
.banner .t { font-weight: 600; font-size: 14px; }
.banner .s { color: var(--orange-text); }
.banner .go { color: var(--orange-text); font-weight: 600; white-space: nowrap; }
.rcard { margin: 6px 20px 0; border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rcard .hd { display: flex; justify-content: space-between; gap: 8px; }
.rcard .g { font-weight: 600; }
.rcard .w { color: var(--hint); white-space: nowrap; }
.rcard .said { color: var(--text2); }
.rcard .acts { display: flex; gap: 8px; }
.pg-head { padding: 10px 20px 2px; display: flex; justify-content: space-between; }
.pg-head .g { font-size: 12px; font-weight: 600; color: var(--text2); }
.pg-head .c { font-size: 12px; color: var(--hint); }
.prow { display: flex; gap: 10px; width: 100%; padding: 7px 20px; text-align: left; align-items: flex-start; }
.prow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prow .l1 { display: flex; justify-content: space-between; gap: 8px; }
.prow .nm { font-weight: 600; font-size: 14px; }
.prow .ago { white-space: nowrap; color: var(--hint); }
.ago.quiet { color: var(--quiet); }
.prow .said { color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note { padding: 12px 20px 0; color: var(--hint); }
.chiprow { padding: 8px 20px; display: flex; gap: 6px; flex-wrap: wrap; }
.chiprow.o { padding: 10px 20px; }
.lrow { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 20px; border-bottom: 1px solid var(--line6); text-align: left; }
.lrow.on { background: var(--accent-soft); }
.lrow.on .meta, .lrow.on .hint { color: var(--hint-sel); }
.lrow .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; width: 100%; }
.lrow .nm { font-weight: 600; font-size: 14px; }
.lrow .meta { color: var(--hint); }
.more { padding: 10px 20px; }
.stats { margin: 12px 20px 4px; background: var(--stat); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats div { display: flex; flex-direction: column; }
.stats .n { font-size: 20px; font-weight: 700; }
.stats .n.orange { color: var(--orange-quiet); }
.stats .l { color: var(--hint); }
.pcard.stats { margin: 0; background: var(--card); }
.ev-acts { padding: 6px 20px; display: flex; gap: 8px; }
.ev-group { padding: 14px 20px 2px; font-size: 12px; font-weight: 600; color: var(--text2); }
.ev-group .c { color: var(--hint); font-weight: 400; }
.erow { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 20px; text-align: left; }
.erow .two { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.erow .nm { font-weight: 600; font-size: 14px; }
.erow .m { color: var(--hint); }
.erow .ch { color: var(--hint); white-space: nowrap; }
.qrow { display: flex; gap: 10px; width: 100%; padding: 9px 20px; text-align: left; align-items: center; }
.qrow.on { background: var(--accent-soft); }
.qrow.on .t, .qrow.on .st { color: var(--hint-sel); }
.qrow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qrow .nm { font-weight: 600; font-size: 14px; }
.qrow .t { color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .st { color: var(--hint); white-space: nowrap; }
.askbox { padding: 10px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.askq { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 2px solid var(--accent); border-radius: 10px; }
.askq input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; outline: none; }
.askcard { background: var(--stat); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.askcard .big { font-size: 22px; font-weight: 700; }
.askcard .big small { font-size: 15px; font-weight: 600; }
.askcard .s { color: var(--text2); }
.askcard .chips { gap: 6px; }
.askcard.pcard { background: var(--card); border-radius: 12px; overflow: visible; }
.askq input::placeholder { color: var(--hint); }
.fchip { height: 26px; padding: 0 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--btn-line); display: inline-flex; align-items: center; }

.detail { flex: 1; min-width: 0; overflow-y: auto; background: var(--page2); }
.placeholder { padding: 40px 28px; color: var(--hint); }
.leadwrap { box-sizing: content-box; max-width: 780px; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 16px; }
.ltitle { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ltitle h2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.menuwrap { position: relative; }
.menu { position: absolute; right: 0; top: 36px; background: var(--card); border: 1px solid var(--line4); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 180px; z-index: 10; }
.menu button { text-align: left; padding: 8px 10px; border-radius: 8px; }
.menu button:hover { background: var(--chip); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line4); border-radius: 12px; }
.fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-right: 1px solid var(--line3); text-align: left; min-width: 0; }
.fact:last-child { border-right: 0; }
.fact .k { font-size: 11px; color: var(--hint); }
.fact .v { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagebox { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.stagebox .hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stagebox .hd .two { display: flex; flex-direction: column; }
.stagebox .no { font-size: 11px; color: var(--hint); }
.stagebox .nm { font-size: 17px; font-weight: 700; }
.stagebox .btns { display: flex; gap: 8px; }
.steps { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
.step { display: flex; flex-direction: column; gap: 5px; }
.step .bar { height: 6px; border-radius: 3px; background: var(--bar-off); }
.step.done .bar, .step.cur .bar { background: var(--accent); }
.step .lb { font-size: 11px; line-height: 1.25; color: var(--hint); }
.step.done .lb { color: var(--text2); }
.step.cur .lb { color: var(--text); font-weight: 700; }
.stagemenu { border-top: 1px solid var(--line3); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.schip { height: 28px; padding: 0 12px; border-radius: 14px; font-weight: 600; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.schip.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.schip.red { color: var(--red); }
.stopask { border-top: 1px solid var(--line3); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.stopask .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.moveon { display: flex; gap: 8px; align-items: flex-start; color: var(--text2); background: var(--note); border-radius: 8px; padding: 8px 10px; }
.moveon b { white-space: nowrap; font-weight: 600; }
.nextstep { padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.nextstep .body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nextstep .k { font-size: 11px; color: var(--hint); }
.nextstep .v { font-weight: 600; font-size: 14px; }
.nextstep .d { font-weight: 600; color: var(--blue-date); white-space: nowrap; }
.nextstep .d.late { color: var(--red); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.block { display: flex; flex-direction: column; gap: 6px; }
.bhead { display: flex; justify-content: space-between; align-items: baseline; }
.bhead h3 { margin: 0; font-size: 15px; font-weight: 700; }
.bhead .b-link { padding: 1px 6px; }   /* the browser's button padding in the design: the words end 6px inside the card edge */
.person { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line3); flex-wrap: wrap; }
.person:last-child { border-bottom: 0; }
.person .body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.person .nm { font-weight: 600; }
.person .ti { color: var(--hint); }
.person .rk { color: var(--hint); font-size: 12px; }
.person .chs { display: flex; gap: 6px; }
.term { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line3); }
.term:last-child { border-bottom: 0; }
.term .k { color: var(--hint); }
.term .r { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.term .v { font-weight: 600; overflow-wrap: anywhere; }
.term .s { color: var(--hint); font-size: 12px; }
/* the More facts nobody asked, folded into one line with Show all (as the Directory's open row) */
.term.termmissing, .pterm.termmissing { justify-content: flex-start; flex-wrap: wrap; gap: 2px 8px; color: var(--hint); align-items: baseline; }
.hrow { display: flex; gap: 12px; padding: 7px 2px; }
.hrow .d { width: 54px; flex: 0 0 54px; color: var(--hint); }
.hrow .body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hrow .t { font-weight: 600; }
.hrow .x { color: var(--text2); white-space: pre-line; overflow-wrap: anywhere; }
.clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }   /* a History text: three lines, then More */
.hmore { align-self: flex-start; padding: 2px 0 0; font-size: 13px; }
.research { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; color: var(--text2); }
.msgwrap { box-sizing: content-box; max-width: 720px; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 14px; }
.msghead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.msghead .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msghead .pos { color: var(--hint); }
.msghead h2 { margin: 0; font-size: 24px; font-weight: 700; }
.msghead .ti { color: var(--text2); font-size: 14px; }
.msghead .met { color: var(--hint); }
.msgrow { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line3); }
.msgrow .k { color: var(--hint); width: 56px; flex: 0 0 56px; }
.msgrow .v { min-width: 0; overflow-wrap: anywhere; }
.msgbody { padding: 14px; white-space: pre-line; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.msghint { padding: 0 14px 12px; color: var(--hint); font-size: 12px; }
.msgacts { display: flex; gap: 8px; flex-wrap: wrap; }
.msgnote { color: var(--hint); }

.wide { flex: 1; min-width: 0; overflow: auto; background: var(--page); }
.widewrap { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 14px; }
.widewrap.narrow { box-sizing: content-box; max-width: 820px; }
.widehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.widehead h1 { margin: 0; font-size: 24px; font-weight: 700; }
.widehead .sub { color: var(--hint); }
.pbars-col { display: flex; flex-direction: column; gap: 14px; }   /* 44px from bar to bar, like the design */
.pbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 12px; align-items: center; padding: 4px 0; text-align: left; width: 100%; }
.pbar .l { color: var(--text2); font-weight: 600; }
.pbar .tr { height: 22px; background: var(--chip); border-radius: 6px; overflow: hidden; }
.pbar .f { display: block; height: 22px; border-radius: 6px; }
.f.not_started { background: var(--bar-not); }
.f.talking { background: var(--bar-talk); }
.f.won { background: var(--bar-won); }
.pbar .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pleft { margin-top: 18px; }   /* the grey line under the chart: the types Pipeline leaves out */
.setcard { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.setcard h2 { margin: 0; font-size: 15px; font-weight: 700; }
.setcard .row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line3); flex-wrap: wrap; }
.setcard .row:last-child { border-bottom: 0; }
.setcard .row .two { flex: 1; display: flex; flex-direction: column; min-width: 160px; }
.setcard .row .nm { font-weight: 600; }
.setcard .row .ctl, .pset .row .ctl { display: flex; align-items: center; gap: 10px; }   /* the role and Remove stay together on the right */
.setcard .form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.setcard .form .fld { flex: 1; min-width: 140px; }
.setcard p { margin: 0; }
/* a long change (a field set, a filter) wraps, and the time goes under it on a phone instead of past the edge */
.audit div { display: flex; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--line3); flex-wrap: wrap; }
.audit div > span:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.audit .at { color: var(--hint); white-space: nowrap; }

/* ---------- windows on the Mac ---------- */
.overlay { position: absolute; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; z-index: 20; }
.overlay.top60 { padding-top: 60px; }
.win { width: 520px; max-width: calc(100% - 32px); max-height: calc(100% - 90px); background: var(--card); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.win.w540 { width: 540px; }
.whead { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line3); }
.whead .cancel { color: var(--accent); padding: 1px 6px; }
.whead .title { font-weight: 700; font-size: 15px; text-align: center; }
.whead .save { color: var(--accent); font-weight: 700; padding: 1px 6px; }
/* a header Save that cannot be pressed yet keeps its full strength (the design shows it that way), in grey */
.whead .save:disabled, .shead .save:disabled { opacity: 1; color: var(--hint); }
.wbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.drop { border: 1.5px dashed var(--placeholder); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text2); text-align: center; width: 100%; }
.drop .t { font-weight: 600; }
.drop .s { color: var(--hint); }
.notice { color: var(--notice-text); background: var(--notice-bg); border-radius: 8px; padding: 8px 10px; }
.notice .act { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.login h1 { margin: 0; font-size: 24px; }
.login .card { width: 100%; max-width: 380px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.login .mark.big { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; }
.login code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* ---------- the phone ---------- */
.pshell { min-height: 100vh; background: var(--phone); color: var(--text); display: flex; flex-direction: column; }
.pshell > .ppage { flex: 1; }
.pshell.nofoot { padding-bottom: 30px; }
.pshell.withfoot { padding-bottom: 120px; }
.ppage { padding: 10px 16px 30px; display: flex; flex-direction: column; gap: 12px; }
.pcol { display: flex; flex-direction: column; gap: 12px; }   /* a run of cards inside the page, same gaps as the page */
.ptop { display: flex; justify-content: space-between; align-items: center; height: 32px; }
.ptop .co { color: var(--hint); }
.b-add32 { width: 32px; height: 32px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.b-grey32 { width: 32px; height: 32px; border-radius: 16px; background: var(--seg-phone); display: flex; align-items: center; justify-content: center; }
.pback { color: var(--accent); font-size: 17px; display: inline-flex; align-items: center; height: 32px; white-space: nowrap; }
.pback .chev { font-size: 22px; margin-right: 4px; line-height: 1; }
.ptitle h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; }
.ptitle.t30 h1 { font-size: 30px; }
.ptitle .date { color: var(--hint); }
.psearch { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--seg-phone); color: var(--hint-strong); width: 100%; text-align: left; }
.psearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.psearch input::placeholder { color: var(--hint-strong); }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ptile { background: var(--card); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.ptile .tr { display: flex; justify-content: space-between; align-items: center; }
.ptile .ic { width: 30px; height: 30px; border-radius: 15px; }
.ptile .n { font-size: 24px; font-weight: 700; }
.ptile .lb { font-weight: 600; color: var(--text2); }
.psec { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; gap: 8px; }
.psec h2 { margin: 0; font-size: 20px; font-weight: 700; }
.psec .side { color: var(--hint); font-size: 13px; white-space: nowrap; }
.psec.col { flex-direction: column; align-items: stretch; }
.psec.col .l1 { display: flex; justify-content: space-between; align-items: baseline; }
.psub { color: var(--hint); font-size: 13px; }
.pcard { background: var(--card); border-radius: 12px; overflow: hidden; }
.pcard.pad { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ptodo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line5); position: relative; background: var(--card); transition: transform .15s ease; }
.ptodo:last-child { border-bottom: 0; }
.ptodo .body { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.ptodo .nm { font-weight: 600; }
.ptodo .st { color: var(--hint); font-size: 13px; }
.ptodo .due { color: var(--text2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ptodo .due.late { color: var(--red); }   /* after the phone rule above, so a late date stays red (PhoneToday) */
.phint { color: var(--hint); font-size: 13px; padding: 0 4px; margin-top: -4px; }
.pbanner { background: var(--orange-bg); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.pbanner .two { flex: 1; display: flex; flex-direction: column; }
.pbanner .t { font-weight: 600; }
.pbanner .s { color: var(--orange-text); font-size: 13px; }
.b-orange32 { height: 32px; padding: 0 14px; border-radius: 16px; background: var(--orange-btn); color: var(--on-orange); font-weight: 600; }
.prcard { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.prcard .hd { display: flex; justify-content: space-between; gap: 8px; }
.prcard .g { font-weight: 600; }
.prcard .w { color: var(--hint); font-size: 13px; white-space: nowrap; }
.prcard .said { color: var(--text2); font-size: 14px; }
.prcard .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.b-p34 { height: 34px; border-radius: 10px; font-weight: 600; }
.b-p34.accent { background: var(--accent); color: var(--on-accent); }
.b-p34.grey { background: var(--seg); }
.b-p34.quiet { background: var(--seg); color: var(--hint); }
.pgroup { padding: 9px 14px 3px; font-size: 13px; font-weight: 600; color: var(--hint); display: flex; justify-content: space-between; }
.pprow { display: flex; flex-direction: column; padding: 7px 14px; border-bottom: 1px solid var(--line5); text-align: left; width: 100%; }
.pprow:last-child { border-bottom: 0; }
.pprow .l1 { display: flex; justify-content: space-between; gap: 8px; }
.pprow .nm { font-weight: 600; }
.pprow .ago { color: var(--hint); font-size: 13px; white-space: nowrap; }
.pprow .ago.quiet { color: var(--quiet); font-weight: 600; }
.pprow .said { color: var(--hint); font-size: 13px; }
.plrow { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--line5); text-align: left; width: 100%; }
.plrow:last-child { border-bottom: 0; }
.plrow .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.plrow .nm { font-weight: 600; }
.plrow .meta { color: var(--hint); font-size: 13px; }
.tabbar { position: sticky; bottom: 0; margin-top: 14px; height: 82px; background: var(--tabbar); border-top: 1px solid var(--btn-line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 7px; z-index: 5; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--hint); }
.tab.on { color: var(--accent); }
.tab span { font-size: 10px; font-weight: 600; }   /* the design's tab bar label */
.pfacts { background: var(--card); border-radius: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pfact { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; text-align: left; min-width: 0; }
.pfact:nth-child(1) { border-right: 1px solid var(--line5); border-bottom: 1px solid var(--line5); }
.pfact:nth-child(2) { border-bottom: 1px solid var(--line5); }
.pfact:nth-child(3) { border-right: 1px solid var(--line5); }
.pfact .k { font-size: 12px; color: var(--hint); }
.pfact .v { font-weight: 600; }   /* wraps to a second line, like PhoneLead (the desktop fact is the one that truncates) */
.pstage { background: var(--card); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pstage .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pstage .nm { font-size: 20px; font-weight: 700; }
.pstage .no { color: var(--hint); font-size: 13px; white-space: nowrap; }
.pbars { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 3px; }
.pbars span { height: 6px; border-radius: 3px; background: var(--bar-off); }
.pbars span.on { background: var(--accent); }
.plabels { display: flex; justify-content: space-between; font-size: 12px; color: var(--hint); }
.b-main46 { height: 46px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; width: 100%; }
.b-grey40 { height: 40px; border-radius: 12px; background: var(--seg); color: var(--accent); font-weight: 600; width: 100%; }
.pmoveon { background: var(--note); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text2); }
.pnext { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.pnext .body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pnext .k { font-size: 12px; color: var(--hint); }
.pnext .v { font-weight: 600; }
.pnext .d { color: var(--blue-date); font-weight: 600; font-size: 14px; text-align: right; white-space: nowrap; }
.pnext .d.late { color: var(--red); }
.pactions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pact { border-radius: 12px; background: var(--card); padding: 10px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--accent); }
.pact span { font-size: 12px; font-weight: 600; }
.pperson { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line5); }
.pperson .body { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.pperson .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pperson .ti { color: var(--hint); font-size: 13px; }
.pperson .chs { display: flex; gap: 6px; }
.b-round34 { width: 34px; height: 34px; border-radius: 17px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.b-pill30 { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; }
.paddrow { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: var(--accent); font-weight: 600; width: 100%; text-align: left; }
.pterm { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line5); }
.pterm:last-child { border-bottom: 0; }
.pterm .k { color: var(--hint); }
.pterm .r { text-align: right; display: flex; flex-direction: column; }
.pterm .v { font-weight: 600; overflow-wrap: anywhere; }
.pterm .s { color: var(--hint); font-size: 12px; }
.phrow { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line5); }
.phrow:last-child { border-bottom: 0; }
.phrow .d { width: 46px; flex: 0 0 46px; color: var(--hint); font-size: 13px; }
.phrow .body { display: flex; flex-direction: column; min-width: 0; }
.phrow .t { font-weight: 600; }
.phrow .x { color: var(--text2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.pempty { padding: 12px 14px; color: var(--hint); font-size: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pempty .act { color: var(--accent); font-weight: 600; }
.poverlay { position: fixed; inset: 0; background: var(--overlay-phone); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 56px; background: var(--phone); border-radius: 14px 14px 0 0; display: flex; flex-direction: column; z-index: 31; animation: slideup .25s ease-out; }
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet.t96 { top: 96px; }
.grab { display: flex; justify-content: center; padding-top: 6px; }
.grab span { width: 36px; height: 5px; border-radius: 3px; background: var(--grab); }
.shead { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 8px 16px 10px; }
.shead .cancel { color: var(--accent); font-size: 17px; text-align: left; }
.shead .title { text-align: center; display: flex; flex-direction: column; align-items: center; }
.shead .title b { font-size: 17px; font-weight: 600; }
.shead .title .sub { color: var(--hint); font-size: 12px; }
.shead .save { color: var(--accent); font-size: 17px; font-weight: 600; text-align: right; }
.sbody { padding: 0 16px 30px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.sbody.g8 { gap: 8px; }
.pseg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); background: var(--seg-phone); border-radius: 9px; padding: 2px; }
.pseg button { height: 30px; padding: 0 6px; border-radius: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pseg button.on { background: var(--seg-on); }
.pchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pchips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pchips .lab { color: var(--hint); font-size: 13px; margin-right: 2px; }
.pchip { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--card); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.pchip.on { background: var(--accent); color: var(--on-accent); }
.pchip.accent { color: var(--accent); }
.pchip30 { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--seg); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.pchip30.white { background: var(--card); }
.pchip30.on { background: var(--accent); color: var(--on-accent); }
.pchip30.orange { background: var(--orange-btn); color: var(--on-orange); }
.pselect { height: 30px; padding: 0 30px 0 12px; border: 0; border-radius: 15px; background-color: var(--card); color: var(--text); font-size: 13px; font-weight: 600; max-width: 100%; }
.pselect.on { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ptext { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.ptext textarea { border: 0; background: transparent; font: inherit; font-size: 15px; resize: none; outline: none; min-height: 48px; padding: 0; }
.ptext .ph { color: var(--hint); font-size: 12px; }
.plabel { font-size: 13px; color: var(--hint); padding: 4px 4px 0; }
.pradio { display: flex; align-items: center; gap: 12px; height: 45px; padding: 0 14px; border-bottom: 1px solid var(--line5); width: 100%; text-align: left; }
.pradio:last-child { border-bottom: 0; height: 44px; }   /* 44px plus the line, like the design; the last row has no line */
.pradio .t { flex: 1; }
.pradio.on .t { font-weight: 600; }
.radio { width: 20px; height: 20px; border-radius: 10px; border: 1.5px solid var(--ring); flex: 0 0 20px; }
.radio.on { border: 6px solid var(--accent); }
.prowin { display: flex; align-items: center; height: 45px; padding: 0 14px; border-bottom: 1px solid var(--line5); gap: 8px; }
.prowin:last-child { border-bottom: 0; height: 44px; }
.prowin .k { width: 96px; flex: 0 0 96px; color: var(--hint); }
.prowin input, .prowin select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; outline: none; color: var(--text); padding: 0; }
.prowin input.b { font-weight: 600; }
.pdates { display: flex; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.srow { display: flex; align-items: center; gap: 12px; height: 43px; padding: 0 14px; border-bottom: 1px solid var(--line5); width: 100%; text-align: left; }
.srow:last-child { border-bottom: 0; height: 42px; }
.srow .mk { width: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.srow .t { flex: 1; }
.srow.done .t { color: var(--hint); }
.srow.cur { background: var(--accent-row); }
.srow.cur .t { font-weight: 700; }
.srow .now { color: var(--accent); font-size: 13px; font-weight: 600; }
.srow .next { color: var(--hint); font-size: 13px; }
.dotfill { width: 18px; height: 18px; border-radius: 9px; background: var(--accent); }
.stoprow { display: flex; flex-direction: column; padding: 9px 14px; border-bottom: 1px solid var(--line5); width: 100%; text-align: left; }
.stoprow:last-child { border-bottom: 0; }
.stoprow .h { color: var(--hint); font-size: 13px; }
.stopbox { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pmode { height: 64px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--accent); border: 2px solid transparent; }
.pmode.on { border-color: var(--accent); }
.pmode span { font-size: 13px; font-weight: 600; }
.pnotice { background: var(--notice-bg); color: var(--notice-text); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.pnotice .act { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.ohead { height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ohead .mid { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ohead .mid b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ohead .mid .s { color: var(--hint); font-size: 12px; }
.ohead .skip { color: var(--accent); font-size: 17px; text-align: right; }
.pbar4 { height: 4px; border-radius: 2px; background: var(--seg-phone); overflow: hidden; }
.pbar4 span { display: block; height: 4px; background: var(--orange); }
.pwho { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.pwho .body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pwho .nm { font-size: 17px; font-weight: 600; }
.pwho .ti { color: var(--text2); font-size: 13px; }
.pwho .met { color: var(--hint); font-size: 13px; }
.pmsg .row { display: flex; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line5); font-size: 14px; }
.pmsg .row .k { color: var(--hint); flex: 0 0 auto; }
.pmsg .row .v { min-width: 0; overflow-wrap: anywhere; }
.pmsg .body { padding: 10px 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.pbtns2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-p40 { height: 40px; border-radius: 12px; background: var(--card); font-weight: 600; }
.pfoot { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px 30px; background: var(--phone); border-top: 1px solid var(--seg-phone); display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.b-main50 { height: 50px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; width: 100%; }
.pfoot .s { text-align: center; color: var(--hint); font-size: 12px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line5); width: 100%; text-align: left; }
.mrow:last-child { border-bottom: 0; }
.mrow .chev { color: var(--placeholder); font-size: 20px; }
.ppipe { background: var(--card); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; }
.ppipe .pbar { grid-template-columns: 120px minmax(0, 1fr) 44px; padding: 8px 0; font-size: 14px; }
.ppipe .pbar .tr, .ppipe .pbar .f { height: 18px; }
.pset { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sethd { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }   /* the side words go under the title when both do not fit */
.sethd .hint { white-space: nowrap; }
.pset h2 { margin: 0; font-size: 20px; font-weight: 700; }   /* the phone's section titles (README: 20px), like .psec h2 */
/* the rows of a phone Settings card, laid out like the desktop card: the name in bold, the hint under it, controls on the right */
.pset .row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line5); flex-wrap: wrap; }
.pset .row:last-child { border-bottom: 0; }
.pset .row .two { flex: 1; display: flex; flex-direction: column; min-width: 120px; }
.pset .row .nm { font-weight: 600; }
.pset .row .hint { font-size: 13px; }
.pset .form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pset .form .fld { flex: 1; min-width: 140px; }
.pset p { margin: 0; }

/* ---------- the Directory (Directory.dc.html on the Mac, PhoneDirectory.dc.html on the phone) ---------- */
.wide.flat { overflow: hidden; }   /* the Directory and Directory fields scroll inside, under a header that stays */
.sb-item.on[data-testid="tab-directory"] .t { font-weight: 600; }
.dirwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dirhead { padding: 18px 28px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line3); }
.dir-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.dir-title h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; }
.dir-title .sub { color: var(--hint); }
.dir-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
a.dlink { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.b-grey30 { height: 30px; padding: 0 14px; border: 0; border-radius: 15px; background: var(--seg); font-weight: 600; white-space: nowrap; }
.dtabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.dtab { height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 600; color: var(--text); }
.dtab .n { font-weight: 400; opacity: .75; }
.dtab.on { background: var(--accent); color: var(--on-accent); }
.dtab.on .n { opacity: .9; }   /* .75 white on the accent is 3.7:1; .9 keeps 4.5:1 */
.dmore { color: var(--hint); padding-left: 8px; }
.dmore button { color: var(--hint); }
.dmore button:hover { color: var(--text); text-decoration: underline; }
.dsvcs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dsvcs .lab2 { color: var(--hint); margin-right: 2px; }
.dsvc { height: 26px; padding: 0 11px; border-radius: 13px; font-weight: 600; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); }
.dsvc.quiet { color: var(--hint); }   /* a service nobody offers yet (the design's #8A8A90 is 3.4:1, this keeps 4.5:1) */
.dsvc.on { background: var(--text); border-color: var(--text); color: var(--page); }
/* the search bar (Directory.dc.html): the chips inside it, the words typed, Clear all; the suggestions under it */
.dsearchwrap { position: relative; }
.dsearch { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--btn-line); border-radius: 10px; background: var(--card); flex-wrap: wrap; min-width: 0; cursor: text; }
.dsearch input, .pdsearch input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; color: var(--text); padding: 0; -webkit-appearance: none; appearance: none; }
.dsearch input { min-width: 160px; height: 24px; }
.dsearch.on, .dsearch:focus-within { border-color: var(--accent); }
.dchip { height: 24px; padding: 0 4px 0 9px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-deep); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; max-width: 100%; }
.dchip .x { color: var(--chip-x); font-weight: 600; width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.dchip .x:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dclear { color: var(--hint); font-weight: 600; white-space: nowrap; }
.dsugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dsugg .hd, .pdsugg .hd { padding: 4px 8px; color: var(--hint); font-size: 12px; }
.dsugg .sg { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; text-align: left; }
.dsugg .sg:hover, .dsugg .sg.on { background: var(--chip); }
.dsugg .col, .dsugg .n, .pdsugg .col, .pdsugg .n { color: var(--hint); }
.dsugg .n, .pdsugg .n { white-space: nowrap; }
.dsugg .none, .pdsugg .none { padding: 6px 8px; color: var(--hint); }
.dsugg .ft { border-top: 1px solid var(--line3); margin-top: 4px; padding: 8px 8px 4px; color: var(--text2); }
.dfwrap2 { position: relative; display: inline-flex; }
.pop { position: absolute; top: 32px; left: 0; z-index: 12; background: var(--card); border: 1px solid var(--line4); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 240px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dfwrap2 .pop { top: 36px; right: 0; left: auto; }   /* sits at the right edge: open leftwards */
/* a column's filter (Directory.dc.html): the name turns the company colour with the number picked; the pop-over under it */
.dhcell { position: relative; min-width: 0; }
.dhbtn { width: 100%; display: flex; align-items: center; gap: 4px; padding: 9px 12px; text-align: left; font-weight: 600; color: var(--text2); background: transparent; }
.dhbtn .nm { flex: 1; min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; }   /* wraps like the design ("Countries / served"), never cut */
.dhbtn.open { background: var(--col-open); }
.dhbtn.on { color: var(--accent); }
.dhbtn .badge { font-size: 11px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: var(--on-accent); line-height: 16px; }
.dhcell:first-of-type .dhbtn.open { border-radius: 0; }
.pop.dcolpop { left: 4px; top: calc(100% + 4px); z-index: 30; width: 250px; min-width: 0; max-height: none; overflow: visible; padding: 8px; gap: 6px; border-color: var(--line); box-shadow: var(--pop-shadow); font-weight: 400; }
.pop.dcolpop.right { left: auto; right: 4px; }
.dfind { height: 30px; border: 1px solid var(--btn-line); border-radius: 8px; padding: 0 8px; background: var(--card); color: var(--text); font: inherit; outline: none; width: 100%; -webkit-appearance: none; appearance: none; }
.dfind:focus, .dfind:focus-visible { border-color: var(--accent); outline: none; }   /* the accent border is the focus mark */
.danyall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--seg); border-radius: 8px; padding: 2px; }
.danyall button { height: 24px; border-radius: 6px; font-weight: 600; font-size: 12px; color: var(--hint-strong); }
.danyall button.on { background: var(--seg-on); color: var(--text); }
.dvals { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.dval { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 6px; text-align: left; }
.dval:hover, .dval:focus-visible { background: var(--chip); }
.dval .box { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; border: 1.5px solid var(--placeholder); background: var(--card); color: var(--on-accent); font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.dval.on .box { border-color: var(--accent); background: var(--accent); }
.dval .v { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.dval .nm2 { color: var(--hint); }
.dval .fb { font-size: 11px; color: var(--hint); }
.dfbnote { font-size: 11px; color: var(--hint); padding: 0 6px; }   /* every value only on the same older list: said once */
.dval.sp .v { color: var(--hint); }
.dval.zero .v { color: var(--hint); }   /* nobody has it under the other filters */
.dval .n { color: var(--hint); white-space: nowrap; }
.dvals .none { padding: 6px; color: var(--hint); }
.dalso { display: flex; flex-wrap: wrap; gap: 4px; }
.dpopfoot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line3); padding-top: 6px; }
.dpopfoot .clr { color: var(--hint); font-weight: 600; }
.dpopfoot .done { height: 26px; padding: 0 12px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.drange .rrow, .prange .rrow { display: flex; gap: 8px; align-items: flex-end; }
.drange .rbox, .prange .rbox { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drange .rbox .lab, .prange .rbox .lab { font-size: 11px; color: var(--hint); }
.drange .in { height: 30px; font-size: 13px; padding: 0 8px; border-radius: 8px; width: 100%; }
.drange .unit, .prange .unit { color: var(--hint); padding-bottom: 6px; white-space: nowrap; }
.drange .rnote { font-size: 12px; color: var(--hint); padding-top: 4px; }
.dbtn .cell.hl { background: var(--cell-hit); }   /* a cell a filter matched: a light tint */
.dsave { color: var(--accent); font-weight: 600; margin-left: auto; white-space: nowrap; }
.dempty { padding: 18px 14px; color: var(--hint); }
.pophd { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; color: var(--hint); }
.pophd .b-link { font-size: 13px; }
.popitem { text-align: left; padding: 7px 10px; border-radius: 8px; }
.popitem:hover, .popitem:focus-visible { background: var(--chip); }
.popform { display: flex; gap: 6px; padding: 6px 4px 2px; align-items: center; }
.popform .in { flex: 1; min-width: 0; }
.popform .b-accent28 { white-space: nowrap; flex: 0 0 auto; }
.popcheck { display: flex; gap: 8px; align-items: center; padding: 6px 10px; }
.dirbody { flex: 1; min-height: 0; overflow: auto; padding: 10px 28px 28px; }
.dmatch { color: var(--hint); padding: 4px 0 8px; }
/* the match line, then "Show the 2" (the partners a filter left out only because its field is Not asked), then Save this filter */
.dmatchrow { display: flex; gap: 2px 10px; align-items: baseline; flex-wrap: wrap; justify-content: space-between; }
.dmatchrow .dmatch { min-width: 0; }
.dunk { font-size: 13px; padding: 0; }
/* the words name another category: "Company cards is under Payment providers." with Search there */
.dsuggest { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: baseline; color: var(--text); padding: 2px 0 6px; flex-basis: 100%; order: -1; }
.pdsuggest { display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: baseline; color: var(--text); font-size: 14px; padding: 0 4px; }
.pdmatchrow { display: flex; flex-direction: column; gap: 4px; }
.pdmatchrow .pdsuggest { order: -1; }
/* the phone's count on one line ("3 of 9 partners with company cards"), why some are in or out under it in 12px, then
   Show it and Save this filter on one row (PhoneDirectory.dc.html) */
.pdmatchtext { display: flex; flex-direction: column; gap: 2px; }
.pdmatch2 { color: var(--hint); font-size: 12px; padding: 0 4px; }
.pdlinks { display: flex; gap: 4px 16px; flex-wrap: wrap; align-items: baseline; padding: 0 4px; }
.pdlinks .dunk { padding: 0; font-size: 14px; }
.dtable { border: 1px solid var(--line4); border-radius: 12px; min-width: 980px; }   /* not clipped: a column's filter opens over the rows */
.dgrid { display: grid; }
.dhead { background: var(--note); border-bottom: 1px solid var(--line4); border-radius: 12px 12px 0 0; }
.dhead > span { padding: 9px 12px; font-weight: 600; color: var(--text2); }
.dhead > span:first-child { border-top-left-radius: 12px; }
.drow { border-bottom: 1px solid var(--line3); background: var(--page); }
.drow:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.drow:last-child .dbtn { border-radius: 0 0 12px 12px; }
.drow.open { background: var(--row-open); }
.dbtn { width: 100%; text-align: left; align-items: start; }
.dbtn .nm { padding: 10px 12px; font-weight: 600; font-size: 14px; }
.dbtn .cell { padding: 10px 12px; color: var(--text); overflow-wrap: anywhere; }
/* a long fact (old notes can be a paragraph) keeps a row to three lines; the open row shows the whole of it as a wide
   card under the row, where it reads in two or three lines instead of fifteen in a narrow column */
.dbtn .cell span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.dbtn .cell.na { color: var(--hint); font-style: italic; }   /* "Not asked": the design's #A1A1A6 is 2.6:1 */
/* words that are not a plain answer: Does not offer, a placeholder like "TBC", a value from an older list (its source in
   the tooltip). Grey, not italic, so they never read as "Not asked" */
.dbtn .cell.soft { color: var(--hint); }
.dbtn .st { padding: 9px 12px; }
.dbtn .chev { padding: 10px 8px; color: var(--hint); text-align: center; }
.dopen { padding: 4px 14px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dcard { background: var(--card); border: 1px solid var(--line4); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcard .k { font-size: 11px; color: var(--hint); }
.dcard .v { font-weight: 600; overflow-wrap: anywhere; }
.dcard .v.na { color: var(--hint); }
.dcard .v.soft { color: var(--hint); font-weight: 400; }
.dcard.wide { grid-column: 1 / -1; }
.dcard.wide .v { font-weight: 400; }
/* the More facts nobody asked yet, in one line under the cards, with Show all */
.dmissing { color: var(--hint); display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: baseline; padding: 0 2px; }
.dcard .src { font-size: 11px; color: var(--hint); text-align: left; align-self: flex-start; }
.dcard button.src:hover { color: var(--accent); text-decoration: underline; }
.dacts { display: flex; gap: 8px; flex-wrap: wrap; }
.dacts .b-line28 { background: transparent; }
.dnote { color: var(--hint); padding: 10px 2px 0; }
.askmsg { white-space: pre-line; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.factrow { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.facthd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.facthd .dno { display: flex; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.swrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--line3); }
.swrow:last-child { border-bottom: 0; }
.switch { width: 51px; height: 31px; border-radius: 16px; background: var(--seg-phone); position: relative; flex: 0 0 51px; transition: background .15s ease; }
.switch span { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.switch.on { background: var(--accent); }
.switch.on span { transform: translateX(20px); }
/* the phone */
.ppage.pdir { gap: 10px; }
.pdsearchwrap { display: flex; flex-direction: column; gap: 6px; }
.pdsearch { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--accent); margin: 0; }
.pdsearch input { font-size: 15px; }
.pdsugg { background: var(--card); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.pdsugg .sg { display: flex; justify-content: space-between; gap: 10px; padding: 9px 8px; border-radius: 8px; text-align: left; }
.pdsugg .sg.on { background: var(--chip); }
.pdsugg .ft { border-top: 1px solid var(--line5); margin-top: 2px; padding: 8px 8px 4px; color: var(--text2); font-size: 14px; }
.pdchips { display: flex; gap: 6px; flex-wrap: wrap; }
.pdfilters { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--card); border: 1px solid var(--btn-line); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.pdsave { padding: 0; }
/* the phone's Filters sheet (PhoneDirectoryFilter.dc.html) */
.pfsheet .sbody.pfbody { gap: 8px; padding: 0 16px 16px; }
.pfsec { background: var(--card); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.pfsec .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pfsec .hd .nm { font-weight: 600; }
.pfsec .hd .n { color: var(--accent); font-size: 13px; font-weight: 600; }
.pfseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--seg); border-radius: 8px; padding: 2px; font-size: 13px; font-weight: 600; text-align: center; }
.pfseg button { padding: 4px 0; border-radius: 6px; color: var(--hint-strong); font-weight: 600; }
.pfseg button.on { background: var(--seg-on); color: var(--text); }
.pfchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip30.pf { font-size: 14px; font-weight: 400; }
.pchip30.pf.on { font-weight: 600; }
.pfrows { background: var(--card); border-radius: 12px; overflow: hidden; }
.pfrow { border-bottom: 1px solid var(--line5); }
.pfrow:last-child { border-bottom: 0; }
.pfrow .hd { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; }
.pfrow .hd .val { color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.pfrow .hd .val.on { color: var(--accent); font-weight: 600; }
.pfrow .bd { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.prange .in { height: 36px; border-radius: 9px; width: 100%; }
.prange .rnote { font-size: 13px; color: var(--hint); padding-top: 4px; }
.pfsfoot { padding: 10px 16px 30px; border-top: 1px solid var(--seg-phone); background: var(--phone); }
.pfsfoot .b-main50 { width: 100%; }
/* Saved filters: the sidebar (Directory.dc.html) and More on the phone */
.sb-saved { position: relative; display: flex; align-items: center; border-radius: 7px; }
.sb-saved .sb-item { color: var(--text2); padding-right: 28px; }
.sb-saved .sb-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-saved.on .sb-item { background: var(--sel); color: var(--text); }
.sfmenu { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: flex; }
.sb-saved .sfdots { opacity: 0; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--hint); }
.sb-saved:hover .sfdots, .sb-saved .sfdots:focus-visible, .sb-saved .sfdots[aria-expanded="true"] { opacity: 1; }
.sfdots:hover { background: var(--tile-on); }
.pop.sfpop { top: 26px; right: 0; left: auto; min-width: 140px; }
.psaved { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line5); }
.psaved:last-child { border-bottom: 0; }
.psaved .mrow { flex: 1; min-width: 0; padding-right: 44px; border-bottom: 0; }
.psaved .mrow .two { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.psaved .mrow .two span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psaved .mrow .sub { color: var(--hint); font-size: 13px; }
.psaved .sfmenu { right: 8px; }
.psaved .sfdots { width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.psaved .pop.sfpop { top: 34px; }
.pdchip { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--accent-tint); color: var(--accent-deep); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pdchip .x { color: var(--chip-x); }
.pdmatch { color: var(--hint); font-size: 13px; padding: 0 4px; }
.pdcard { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pdcard .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pdcard .nm { font-size: 17px; font-weight: 600; text-align: left; min-width: 0; }
.pill.p22 { height: 22px; border-radius: 11px; }
.pdkv { display: grid; grid-template-columns: 112px 1fr; row-gap: 3px; font-size: 14px; }
.pdkv span { min-width: 0; overflow-wrap: anywhere; }
.pdkv .k { color: var(--hint); padding-right: 8px; overflow-wrap: break-word; }   /* a long name wraps at a space, never cut */
/* a closed card shows a long fact in three lines at most, like the Mac's row; Show more opens it whole */
.pdcard:not(.open) .pdkv > span.v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pdkv .na { color: var(--hint); font-style: italic; }
.pdkv .soft { color: var(--hint); }
.pdkv .src { display: block; font-size: 12px; color: var(--hint); }
.pdmissing { color: var(--hint); font-size: 14px; display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: baseline; }
.pdlink { color: var(--accent); font-weight: 600; font-size: 14px; }
.pdfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdask { color: var(--accent); font-weight: 600; font-size: 14px; text-align: right; }
.pdkv.extra { border-top: 1px solid var(--line5); padding-top: 8px; }
.pdmore { color: var(--accent); font-weight: 600; font-size: 14px; text-align: left; align-self: flex-start; }
.ptop .pselect { max-width: 210px; }

/* ---------- Settings: the sidebar and Directory fields (DirectoryFields.dc.html) ---------- */
.setnav { width: 256px; flex: 0 0 256px; background: var(--side); border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.setnav .brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.setnav .brand .t { font-size: 15px; font-weight: 600; flex: 1; }
.setnav .done { padding: 1px 6px; }
.setnav .item { padding: 6px 8px; border-radius: 7px; text-align: left; width: 100%; }
.setnav .item.on { background: var(--sel); font-weight: 600; }
.setnav .foot { color: var(--hint); padding: 8px; border-top: 1px solid var(--line); }
.dfwrap { display: flex; height: 100%; min-height: 0; width: 100%; }
.dfcats { width: 280px; flex: 0 0 280px; border-right: 1px solid var(--line2); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lab11 { font-size: 11px; font-weight: 600; color: var(--hint); padding: 0 8px 6px; }
.dfcat { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; width: 100%; text-align: left; }
.dfcat .c { color: var(--hint); white-space: nowrap; }
.dfcat.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dfcat.on .c { color: inherit; opacity: .9; font-weight: 400; }
.dfsvcs { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px 18px; }
.dfsvcs .lab11 { padding: 2px 8px; }
.dfsvc { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; width: 100%; text-align: left; }
.dfsvc .c { color: var(--hint); white-space: nowrap; }
.dfadd { padding: 4px 8px; color: var(--accent); font-weight: 600; text-align: left; }
.dfadd.cat { padding: 7px 8px; }
.dfmain { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.dfbanner { background: var(--notice-bg); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; }
.dfbanner .t { flex: 1; color: var(--orange-text); }
.b-orange28 { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--orange-btn); color: var(--on-orange); font-weight: 600; white-space: nowrap; }
.dfgrid { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.3fr) 92px 196px; align-items: center; }
.dfcols { color: var(--hint); font-size: 11px; font-weight: 600; padding: 0 12px; }
.dfsec { display: flex; flex-direction: column; gap: 6px; }
.dfsec .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dfsec h2 { margin: 0; font-size: 15px; font-weight: 700; }
.dflist { border: 1px solid var(--line4); border-radius: 12px; overflow: hidden; }
.dflist.over { border-color: var(--accent); }
.dfrow { padding: 8px 12px; border-bottom: 1px solid var(--line3); }
.dfrow:last-child { border-bottom: 0; }
.dfrow.over { box-shadow: inset 0 2px 0 var(--accent); }
.dfrow > .nm, .dfrow > .t2, .dfrow > .low { min-width: 0; padding-right: 8px; overflow-wrap: anywhere; }
.dfrow .grip { color: var(--ring); font-size: 14px; cursor: grab; text-align: left; letter-spacing: -2px; }
.dfrow .nm { font-weight: 600; text-align: left; }
.dfrow .t2 { color: var(--text2); }
.dfrow .low { color: var(--quiet); }   /* filled in for under half the partners */
.dfrow.hid .nm, .dfrow.hid .t2 { color: var(--hint); }
.dfempty { padding: 10px 12px; color: var(--hint); }
.kmh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--seg); border-radius: 8px; padding: 2px; }
.kmh button { text-align: center; padding: 3px 0; border-radius: 6px; font-weight: 600; color: var(--hint-strong); }   /* grey on the grey switch keeps 4.5:1 */
.kmh button.on { background: var(--seg-on); color: var(--text); }
.dfaddbox { border: 1.5px dashed var(--placeholder); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dfaddbox .t { font-weight: 700; font-size: 14px; }
.dfaddgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.in.in32 { height: 32px; border-radius: 9px; font-size: 13px; }
.pickbtn { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; width: 100%; }
.pickbtn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickbtn .chev { color: var(--hint); }
.dfaddfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* the lead's Terms grouped by service when the partner offers more than one (a small heading per service) */
.tsvc { padding: 10px 14px 2px; font-size: 11px; font-weight: 600; color: var(--hint); }
.ptsvc { padding: 9px 14px 3px; font-size: 13px; font-weight: 600; color: var(--hint); }
.dsearch input::-webkit-search-cancel-button, .pdsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dfset { margin-top: auto; padding: 14px 8px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }   /* the field set file, under the categories */
.dfset .hint { font-size: 12px; }
.dfset a { text-decoration: none; }
.pcard.psavedcard { overflow: visible; }   /* the Rename and Delete menu opens over the card's edge */

/* ---------- Add a lead in one line (QuickAdd.dc.html): the box at the top of Today ---------- */
.lh1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lhint { color: var(--hint); white-space: nowrap; }
.qwrap { padding: 10px 20px 2px; flex: 0 0 auto; }
/* one line in the list column; open, it is the design's box: 900 wide over the list and the lead, 2px in the accent,
   the rest of Today faded (the padding moves by the border's extra pixel so the words never jump) */
.qbox { width: 100%; background: var(--card); border: 1px solid var(--btn-line); border-radius: 12px; overflow: hidden; }
.qbox.open { position: relative; z-index: 8; width: min(900px, calc(100vw - 304px)); border: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.qtop { display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; cursor: text; }
.qbox.open .qtop { padding: 10px 14px; }
.qplus { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 11px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.qin { flex: 1; min-width: 0; height: 22px; border: 0; outline: none; background: transparent; resize: none; overflow: hidden; padding: 0; margin: 0; font: inherit; font-size: 15px; line-height: 22px; color: var(--text); }
.qin:focus-visible { outline: none; }   /* the box's accent border shows where the typing goes */
.qhint { color: var(--hint); font-size: 12px; line-height: 22px; white-space: nowrap; }
.qkey { min-width: 20px; height: 20px; margin-top: 1px; padding: 0 5px; border: 1px solid var(--btn-line); border-radius: 5px; color: var(--hint); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.qpanel { border-top: 1px solid var(--line3); background: var(--page2); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.qpanel.reading .qchips { opacity: .6; }
.qsay { color: var(--hint); }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.qchip { border: 1px solid var(--btn-line); background: var(--card); border-radius: 8px; padding: 4px 9px; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.qchip:hover { border-color: var(--ring); }
.qchip .k { color: var(--hint); }
.qchip.check { border-color: var(--orange); background: var(--notice-bg); }
.qchip .ck { color: var(--notice-text); font-size: 12px; font-weight: 600; }
.qchip.add { border-style: dashed; background: transparent; color: var(--hint); }
.qchip.editing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 9px; border-color: var(--accent); }
.qchip.editing input { border: 0; outline: none; background: transparent; padding: 2px 0; font: inherit; font-weight: 700; color: var(--text); min-width: 6em; max-width: 100%; }
.qchoices { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.qgroup { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qask { color: var(--notice-text); font-weight: 600; }
.qk { color: var(--hint); }
.qpill { border: 1px solid var(--btn-line); background-color: var(--card); border-radius: 13px; padding: 3px 10px; white-space: nowrap; color: var(--text); }
.qpill.on { border-color: var(--accent); background-color: var(--accent-tint); color: var(--accent-deep); font-weight: 600; }
.qpill.ev { border-color: var(--orange-btn); background-color: var(--orange-btn); color: var(--on-orange); font-weight: 600; }
select.qpill { appearance: none; -webkit-appearance: none; font: inherit; padding: 3px 26px 3px 10px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px; max-width: 220px; }
.qnotice { color: var(--notice-text); background: var(--notice-bg); border-radius: 8px; padding: 7px 10px; }
.qnotice .act { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.qacts { display: flex; gap: 8px; flex-wrap: wrap; }
.qsave { height: 30px; padding: 0 16px; border-radius: 15px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.qfull { height: 30px; padding: 0 16px; border-radius: 15px; border: 1px solid var(--btn-line); background: var(--card); font-weight: 600; }
.qcancel { height: 30px; padding: 0 12px; color: var(--hint); font-weight: 600; }
body.quick-on .listbody, body.quick-on .detail { opacity: .35; }
.addhint { color: var(--hint); }
/* the phone: a white card under the title, the accent border when open, buttons a thumb can hit */
.qwrap.ph { padding: 0; }
.qbox.ph, .qbox.ph.open { position: static; z-index: auto; width: 100%; border: 2px solid transparent; box-shadow: none; }   /* under the tab bar when it scrolls */
.qbox.ph.open { border-color: var(--accent); }
.qbox.ph .qtop, .qbox.ph.open .qtop { padding: 9px 12px; align-items: flex-start; }
.qbox.ph .qplus { width: 24px; height: 24px; flex-basis: 24px; border-radius: 12px; }
.qbox.ph .qin { font-size: 16px; line-height: 24px; height: 24px; }   /* 16px: a phone does not zoom into the box */
.qbox.ph .qhint { line-height: 24px; }
.qbox.ph .qpanel { background: var(--card); border-top-color: var(--line5); padding: 12px; }
.qbox.ph .qsay { font-size: 14px; }
.qbox.ph .qchip { font-size: 14px; padding: 6px 10px; background: var(--phone); border-color: var(--phone); }
.qbox.ph .qchip.check { background: var(--notice-bg); border-color: var(--orange); }
.qbox.ph .qchip.add { background: transparent; border-color: var(--btn-line); }
.qbox.ph .qchip.editing { background: var(--card); border-color: var(--accent); }
.qbox.ph .qpill { font-size: 14px; padding: 5px 12px; border-radius: 15px; }
.qbox.ph select.qpill { padding-right: 28px; }
.qbox.ph .qnotice { font-size: 14px; padding: 9px 12px; border-radius: 10px; }
.qbox.ph .qacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qbox.ph .qsave { grid-column: 1 / -1; height: 40px; border-radius: 10px; font-size: 15px; }
.qbox.ph .qfull, .qbox.ph .qcancel { height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--seg); font-size: 14px; }
.qbox.ph .qfull { color: var(--accent-deep); }
.qbox.ph .qcancel { color: var(--hint-strong); }