/* Twenty7 Technology Group skin for the Salesforce Lightning Design System.
   Palette (Brand Identity Portfolio 2026-09-15): primary blue, deep navy, cyan accent, light ground. The values
     live in theme.css with the dark theme beside them (Lesson 26).
   Type: Cambria for headings, Calibri for body (system fallbacks when not installed). */

/* Caladea: a free font with Cambria's proportions, served from app/static/fonts/ (licence alongside), so headings look
   the same on a machine without Microsoft Office. Cambria stays first in each list for machines that really have it. */
@font-face { font-family: "Caladea"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/caladea-400.woff2") format("woff2"); }
@font-face { font-family: "Caladea"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/caladea-700.woff2") format("woff2"); }

/* Colours: every one is a name from theme.css (Lesson 26). This file never writes a colour itself. */

/* html too: SLDS paints html pale blue, which shows when iOS bounces the page past its ends. */
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: Calibri, "Carlito", "Helvetica Neue", Arial, sans-serif;
}

/* Links: SLDS colours them with a fixed blue, not a hook, so the token is applied here (Lesson 26). */
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

h1, h2, h3, .slds-page-header__title, .slds-text-heading_large, .slds-text-heading_medium {
  font-family: Cambria, "Caladea", Georgia, serif;
}

/* Global header: navy bar with the white logo, like Salesforce's top bar but on-brand. */
.t7-header {
  background: var(--navy);
  color: var(--on-navy);
  /* Lesson 18h: room for the status bar if the page is ever drawn beneath it. Since the solid "black" status bar (after
     Lesson 19) the page starts below it and these insets are 0, as they always are on the Mac. */
  height: calc(3.25rem + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 1rem;
}
.t7-header__logo { height: 1.75rem; width: auto; }
.t7-header__logo-wrap {
  background: var(--paper);
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  display: inline-flex;
  align-items: center;
}
.t7-header__title { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1.05rem; letter-spacing: 0.01em; }
.t7-header__spacer { flex: 1; }
.t7-header .slds-input { background: var(--on-navy-soft); color: var(--on-navy); border-color: var(--on-navy-line); }
.t7-header .slds-input::placeholder { color: var(--on-navy-muted); }
.t7-avatar { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--accent-2); display: block; }
/* The avatar opens Settings (2026-09-25). The button adds nothing you can see; the menu is an SLDS popover. */
.t7-account { position: relative; display: flex; align-items: center; }
.t7-account__button { background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; }
.t7-account__button:focus-visible { outline: 2px solid var(--on-navy); outline-offset: 2px; }
.t7-account__menu { position: absolute; top: calc(100% + 0.9rem); right: -0.4rem; width: 17rem; z-index: 9000; color: var(--text-strong); }
.t7-account__menu[hidden] { display: none; }
.t7-account__heading { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1rem; margin: 0.25rem 0; }
.t7-account__who { overflow-wrap: anywhere; }
.t7-account__links a { display: block; padding: 0.45rem 0.5rem; border-radius: 0.25rem; font-weight: 600; }
.t7-account__links a:hover, .t7-account__links a:focus { background: var(--bg); text-decoration: none; }
.t7-account__hint { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }

/* Context bar (the app nav) keeps SLDS's white tab bar, with a cyan rule and blue current-tab underline. */
.slds-context-bar { border-bottom-color: var(--accent-2); }
.slds-context-bar__item.slds-is-active { border-bottom: 3px solid var(--accent); }
.slds-context-bar__label-action { font-weight: 600; }
.t7-lesson-badge {
  background: var(--accent-2); color: var(--navy);
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 0.6rem; margin-left: 0.4rem;
}

/* Page body */
.t7-page { padding: 1rem; max-width: 1400px; margin: 0 auto; }

/* Stat tiles for the home page */
.t7-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; }
a.t7-stat-link { display: block; color: inherit; text-decoration: none; }
a.t7-stat-link:hover, a.t7-stat-link:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); text-decoration: none; }
.t7-stat__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.t7-stat__value { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1.75rem; color: var(--text-strong); line-height: 1.2; }

/* Tier pills */
.t7-tier { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.t7-tier--engaged { background: var(--tier-engaged-bg); color: var(--tier-engaged-text); }
.t7-tier--warm    { background: var(--tier-warm-bg); color: var(--tier-warm-text); }
.t7-tier--nurture { background: var(--tier-nurture-bg); color: var(--tier-nurture-text); }
.t7-tier--new     { background: var(--tier-new-bg); color: var(--tier-new-text); }
.t7-tier--cold    { background: var(--tier-cold-bg); color: var(--tier-cold-text); }
.t7-tier--excluded{ background: var(--tier-excluded-bg); color: var(--tier-excluded-text); }

/* Credentials strip in the footer, verbatim from the flyer */
.t7-footer {
  margin-top: 2rem; padding: 0.75rem 1rem; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong);
  border-top: 1px solid var(--border);
}
.t7-footer b { color: var(--accent); }

/* Router board (Lesson 3). SLDS has no Kanban component, so the board is a scrolling row of columns of slds-cards. */
/* Two steps per row (one on a narrow window), so all seven fit without scrolling sideways. */
.t7-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; padding-bottom: 0.5rem; }
@media (max-width: 48em) { .t7-board { grid-template-columns: minmax(0, 1fr); } }
.t7-board__col { background: var(--board-col); border-radius: 0.5rem; padding: 0.5rem; }
/* Contacts list view (Lesson 8a). The header row stays put while the rows scroll under it. SLDS has a fixed-header
   blueprint, but it needs a wrapper div in every header cell; position: sticky does the same job with one rule. */
.t7-sticky-table { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 0.25rem; }
.t7-sticky-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.t7-sort { font-size: 0.6rem; margin-left: 0.25rem; color: var(--accent); }
.t7-pill-x { text-decoration: none; font-weight: 700; padding: 0 0.35rem; color: var(--text-muted); }
.t7-pill-x:hover { color: var(--danger); text-decoration: none; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 0.2rem; padding: 0 0.3rem; font-size: 0.75rem; background: var(--surface); }
/* Local time (Lesson 8b): green while it is calling hours where the contact is, grey otherwise. */
.t7-local--open { color: var(--success); font-weight: 600; }
.t7-local--closed { color: var(--text-subtle); }
/* Saved-view tabs sit above the list like Salesforce list views. */
.t7-views { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.t7-views__tab { padding: 0.4rem 0.75rem; border-bottom: 3px solid transparent; color: inherit; font-weight: 600; }
.t7-views__tab:hover { text-decoration: none; border-bottom-color: var(--border-strong); }
.t7-views__tab--active { border-bottom-color: var(--accent); color: var(--accent); }
.t7-views details { position: relative; }
.t7-views details > summary { cursor: pointer; padding: 0.4rem 0.5rem; list-style: none; color: var(--accent); }
.t7-views__menu { position: absolute; z-index: 5; right: 0; min-width: 16rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.75rem; box-shadow: 0 4px 12px var(--shadow); }
/* Copy buttons (Lesson 9): quiet until hovered; green check for 2 s after a copy, red when the browser refused. */
.t7-copy { color: var(--text-subtle); vertical-align: middle; }
.t7-copy:hover, .t7-copy:focus { color: var(--accent); }
.t7-copy--done, .t7-copy--done:hover { color: var(--success); }
.t7-copy--failed, .t7-copy--failed:hover { color: var(--danger); }
/* Reminders: a row per reminder with a coloured edge (red overdue, amber today, grey upcoming). */
.t7-reminders > summary { cursor: pointer; }
.t7-reminder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.75rem;
  padding: 0.35rem 0.6rem; margin-top: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 0.25rem; }
.t7-reminder--overdue { border-left-color: var(--danger); }
.t7-reminder--today { border-left-color: var(--warning); }
.t7-reminder--upcoming { border-left-color: var(--text-subtle); }
.t7-reminder__due { font-weight: 700; color: var(--text-strong); margin-right: 0.35rem; }
.t7-reminder--overdue .t7-reminder__due { color: var(--danger); }
.t7-reminder__actions { white-space: nowrap; }
.t7-reminder__actions .slds-button { margin-left: 0.5rem; }
.t7-nav-count { display: inline-block; min-width: 1.15rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 0.6rem;
  background: var(--danger-fill); color: var(--on-status); font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
/* Lesson 12a: the Log call buttons stay on one line, and each is at least 44x44 px (Apple's minimum tap target,
   with the iPhone in Lesson 19 in mind). */
.t7-log-call-cell { white-space: nowrap; min-width: 18rem; }
.t7-log-call { flex-wrap: nowrap; }
.t7-log-call .slds-button { white-space: nowrap; min-height: 44px; min-width: 44px; }
/* Lesson 12a: the Next step panel inside the call panel's footer. The panel grows while it is open, so the log
   above it keeps some room. */
.t7-panel.slds-is-open:has(#next-step .t7-next-step) { height: min(46rem, 92vh); }
.t7-next-step { border: 1px solid var(--accent-2); border-radius: 0.25rem; background: var(--info-soft); padding: 0.5rem; margin-bottom: 0.5rem; }
.t7-next-step__title { margin-bottom: 0.25rem; }
.t7-next-step__touches { margin-top: 0.35rem; }
.t7-next-step__row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.35rem; align-items: center; margin-top: 0.2rem; }
.t7-next-step__row .slds-select { height: 1.9rem; }
.t7-next-step__row .slds-input[type=date] { width: 9.5rem; }
.t7-next-step__touch { white-space: nowrap; }
.t7-next-step__actions { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.t7-channel { margin: 0 0.25rem; background: var(--chip-bg); color: var(--chip-text); }

/* Lesson 10: the Report button sits at the right end of the nav; its popover hangs below it, nubbin at top right. */
.t7-report { margin-left: auto; position: relative; display: flex; align-items: center; padding: 0 0.75rem; }
.t7-report__pop { position: absolute; top: calc(100% + 0.75rem); right: 0.25rem; width: 22rem; max-width: calc(100vw - 2rem); z-index: 9000; }
.t7-report__pop[hidden] { display: none; }
.t7-queue-reminder { font-size: 0.75rem; white-space: normal; color: var(--warning); }
.t7-queue-reminder--overdue { color: var(--danger); }
/* The step picker in the router Edit window: two columns that fill downwards first (1-4 left, 5-7 right). */
.t7-steps { column-count: 2; column-gap: 1.5rem; }
.t7-steps .slds-radio { display: block; break-inside: avoid; margin-bottom: 0.35rem; }
.t7-board__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: Cambria, "Caladea", Georgia, serif; font-size: 0.95rem; color: var(--text-strong);
  margin-bottom: 0.5rem; padding: 0 0.25rem;
}

/* Call panel (docked, chat-style dialog). The frame is SLDS's docked composer; this only lays out what is inside it. */
#call-dock { z-index: 8000; }                 /* above the page, below the router modal (9001) */
#call-dock:empty { display: none; }           /* an empty fixed box must not sit over the page and eat clicks */
.t7-panel.slds-is-open { height: min(34rem, 88vh); }
.t7-panel__body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.t7-panel__details { flex: 0 0 auto; max-height: 11rem; overflow-y: auto; padding: 0.75rem; border-bottom: 1px solid var(--border); }
.t7-panel__phone { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1.4rem; color: var(--text-strong); }
.t7-panel__composer { width: 100%; }
.t7-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem; background: var(--bg); }
.t7-chat__note {
  background: var(--chip-bg); color: var(--chip-text); border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem; margin-left: 2rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.t7-chat__meta { font-size: 0.7rem; color: var(--text-muted); text-align: right; margin-top: 0.15rem; }
.t7-chat__event { text-align: center; font-size: 0.75rem; color: var(--text-muted); margin: 0.6rem 0; overflow-wrap: anywhere; }
.t7-chat__event strong { color: var(--text-strong); }

/* Phone-width tweaks (phase 2: Tailscale on iPhone) */
@media (max-width: 640px) {
  .t7-header__title { display: none; }
  #call-dock { padding: 0 0.5rem; }
  .t7-panel { width: calc(100vw - 1rem); }
  .slds-context-bar { overflow-x: auto; }
}

/* Lesson 12b: the SMS panel (inside the call panel's #next-step slot) and SMS text in the log. */
.t7-panel.slds-is-open:has(#next-step .t7-sms) { height: min(46rem, 92vh); }
.t7-sms__phone { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1.1rem; color: var(--text-strong); margin-right: 0.25rem; }
.t7-sms #sms-text { font-family: inherit; }
.t7-chat__event-text { white-space: pre-line; text-align: left; margin-top: 0.2rem; }

/* Touches (Lesson 12c): E · L · P · S on slds-badge. Outlined = never touched on that channel, filled = at least once. */
.t7-touches { display: inline-flex; gap: 0.2rem; white-space: nowrap; }
.slds-badge.t7-touch { margin: 0; padding: 0.05rem 0.4rem; background: transparent; border: 1px solid var(--border-strong); color: var(--text-subtle); }
.slds-badge.t7-touch--on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }

/* Lesson 14b: "Add to Contacts" where a full button would be too loud (call panel, Next step): looks like a link. */
.slds-button.t7-link { color: var(--accent); text-decoration: underline; font-size: inherit; line-height: inherit; vertical-align: baseline; }
.t7-contacts-status:not(:empty) { margin-left: 0.5rem; }

/* Lesson 15: sequences. The timeline is a numbered list with the day in a fixed-width column. */
.slds-badge.t7-seq-active { background: var(--success-soft); color: var(--success); }
.t7-seq-timeline { list-style: decimal; padding-left: 1.5rem; }
.t7-seq-timeline li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.t7-seq-timeline__day { display: inline-block; min-width: 4.5rem; font-weight: 600; color: var(--text-strong); }
/* Lesson 16: "Seq · 2/6" on a reminder that is a sequence step, and the "In: <sequence>" line / Enroll picker. */
.slds-badge.t7-seq-tag { margin: 0 0.25rem 0 0; background: var(--chip-2-bg); color: var(--chip-text); }
.t7-enrollment__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.t7-enrollment__form .slds-select { width: auto; max-width: 16rem; height: 1.9rem; }
.t7-enrollment__due--overdue { color: var(--danger); font-weight: 600; }
/* Lesson 17: "Enroll (N) in [sequence]" beside Copy emails, and the folded "Remove from sequence" form. */
.t7-bulk-enroll { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: 0.5rem; }
.t7-bulk-enroll .slds-select { width: auto; max-width: 14rem; height: 2rem; }
.t7-enrollment__remove { display: inline-block; margin-left: 0.5rem; }
.t7-enrollment__remove > summary { cursor: pointer; color: var(--text-muted); font-size: 0.75rem; }
.t7-enrollment__remove[open] { display: block; margin: 0.35rem 0 0; }
.t7-enrollment__remove .slds-input { width: auto; min-width: 14rem; flex: 1 1 14rem; }

/* Lesson 18b: the sign-in page (one card on the ground colour) and who's signed in, in the header. */
.t7-login { display: flex; justify-content: center; padding: 4rem 1rem; }
.t7-login .slds-card { width: 100%; max-width: 24rem; }
.t7-login__title { font-family: Cambria, "Caladea", Georgia, serif; font-size: 1.5rem; color: var(--text-strong); margin-bottom: 0.5rem; }
.t7-login__message { color: var(--danger); margin-bottom: 0.5rem; }
.t7-login__button { width: 100%; justify-content: center; margin-top: 1rem; }
.t7-header__user { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.t7-header__user .slds-button { color: var(--on-navy); border-color: var(--on-navy-line-strong); background: transparent; }
.t7-header__user .slds-button:hover { background: var(--on-navy-soft); }
@media (max-width: 48em) { .t7-header__email { display: none; } }

/* Lesson 18c: files in (an upload beside its button) and out (download links in the flash). */
.t7-upload { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.t7-upload__input { font-size: 0.8rem; max-width: 16rem; }
.t7-download { color: var(--on-navy); text-decoration: underline; margin-left: 0.75rem; white-space: nowrap; }
.t7-download:hover { color: var(--accent-2); }

/* Lesson 18e: the Connections page's buttons sit side by side. */
.t7-connection__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }

/* Lesson 23: the Agenda card on Home. */
.t7-agenda__summary { margin-bottom: 0.5rem; }
.t7-agenda__events { margin: 0 0 0.5rem; }
.t7-agenda__event { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.t7-agenda__time { min-width: 7.5rem; font-weight: 600; color: var(--text-strong); }
.t7-agenda__what { flex: 1 1 12rem; }
.t7-agenda__links { display: flex; gap: 0.35rem; }
.t7-agenda__day summary { cursor: pointer; padding: 0.3rem 0; color: var(--text-strong); list-style: none; }
.t7-agenda__day summary::-webkit-details-marker { display: none; }
.t7-agenda__day summary::before { content: "▸"; display: inline-block; width: 1rem; color: var(--accent); }   /* it opens */
.t7-agenda__day[open] summary::before { content: "▾"; }
.t7-agenda__day .t7-agenda__event { padding-left: 1rem; }
/* Lesson 24: the contacts at an event, the queue's meeting tag, the "Next meeting" line. */
.t7-agenda__contact { margin: 0.15rem 0.25rem 0 0; cursor: pointer; background: var(--chip-bg); border: 0; color: var(--chip-text); }
.t7-agenda__next { margin-left: 0.25rem; }
.t7-meeting-tag { background: var(--chip-bg); color: var(--chip-text); margin-top: 0.2rem; }
.t7-next-meeting { color: var(--text-strong); }

/* Lesson 20: the flyer library. Cards with a thumbnail, a drop zone for several files, the modal's live preview. */
.t7-dropzone { border: 2px dashed var(--border-strong); border-radius: 0.5rem; background: var(--surface); padding: 1rem; }
.t7-dropzone--over { border-color: var(--accent); background: var(--accent-soft); }
.t7-dropzone__label { display: block; margin-bottom: 0.5rem; }
.t7-flyer { height: 100%; display: flex; flex-direction: column; }
.t7-flyer--retired { opacity: 0.7; }
.t7-flyer__thumb { height: 10rem; display: flex; align-items: center; justify-content: center; background: var(--bg);
  border-bottom: 1px solid var(--border); border-radius: 0.25rem 0.25rem 0 0; overflow: hidden; }
.t7-flyer__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.t7-flyer__versions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.t7-flyer__versions .slds-badge { margin: 0; }
.t7-flyer__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.t7-flyer__actions form { display: inline; }
/* Lesson 21: the flyer panel (in the call panel's #next-step slot, or a modal from /flyers). */
.t7-flyer-panel__body { display: flex; gap: 0.75rem; align-items: flex-start; }
.t7-flyer-panel__thumb { width: 5rem; max-height: 6.5rem; object-fit: contain; border: 1px solid var(--border); border-radius: 0.25rem; background: var(--paper); flex: none; }
/* The email preview shows what a mail app will show, so it stays paper-white in both themes (Lesson 26). */
.t7-flyer__preview { border: 1px solid var(--border); border-radius: 0.25rem; background: var(--paper); color: var(--paper-text); padding: 0.75rem; min-height: 11.5rem; max-height: 20rem; overflow: auto; }

/* Lesson 26: the one-line message after a button (Home, Settings, Dashboard, Flyers): a navy banner in both themes. */
.t7-flash { background: var(--navy); color: var(--on-navy); }
/* SLDS draws the text on its coloured badges and alerts in its "white" (neutral-base-100). In dark mode that name
   means the dark card colour, so these say white outright. */
.slds-theme_success, .slds-theme_error, .slds-theme_info, .slds-theme_inverse { color: var(--on-status); }
/* SLDS's red text reads its error fill colour, too dark on a dark card; the token keeps it readable. */
.slds-text-color_error { color: var(--error-text); }

/* Lesson 25: the Settings page. The section list on the left (SLDS vertical navigation), the chosen section on the right. */
.t7-settings { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.t7-settings__nav { background: var(--surface); border-radius: 0.25rem; box-shadow: 0 0 0 1px var(--border); padding: 0.5rem 0; }
.t7-settings__icon { margin-right: 0.5rem; fill: currentColor; }
.t7-settings__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.t7-settings__facts dt { width: 10rem; }

/* Lesson 26: Settings → Appearance. Three cards; each preview is a tiny page carrying data-theme, so it is drawn with
   that theme's own tokens (theme.css works on any element). The chosen card gets the accent border. */
.t7-theme-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.t7-theme-choice { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem; border: 2px solid var(--border);
  border-radius: 0.5rem; background: var(--surface); cursor: pointer; }
.t7-theme-choice:has(input:checked) { border-color: var(--accent); }
.t7-theme-choice:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.t7-theme-choice__head { display: flex; align-items: center; gap: 0.4rem; }
.t7-theme-preview { display: flex; height: 4.5rem; border-radius: 0.35rem; overflow: hidden; border: 1px solid var(--border); }
.t7-theme-preview__page { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.t7-theme-preview__bar { height: 0.8rem; background: var(--navy); }
.t7-theme-preview__card { margin: 0.45rem; padding: 0.4rem; flex: 1; display: flex; flex-direction: column; gap: 0.3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0.2rem; }
.t7-theme-preview__text { height: 0.3rem; width: 80%; border-radius: 0.15rem; background: var(--text); }
.t7-theme-preview__link { height: 0.3rem; width: 45%; border-radius: 0.15rem; background: var(--accent); }

/* Lesson 27: the steps editor. Each row can move (↑/↓, or dragged by its handle) and carries its Message underneath.
   [hidden] is spelled out because an SLDS class's own display (slds-input, slds-button) would otherwise win over it. */
.t7-seq-step { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.t7-seq-step [hidden], .t7-seq-sort[hidden] { display: none !important; }
.t7-seq-step__move { display: flex; align-items: center; gap: 0.15rem; }
/* An slds-col grows by default: only Instructions should. Labels wrap their field, so they're blocks to give it the width. */
.t7-seq-step > .slds-grid > .slds-shrink-none { flex: 0 0 auto; }
.t7-seq-step label { display: block; }
.t7-seq-step__type { flex: 0 0 9rem; }
.t7-seq-step__day { flex: 0 0 5.5rem; }
.t7-seq-step__text { flex: 1 1 0; min-width: 0; }
.t7-seq-step__handle { cursor: grab; color: var(--text-subtle); padding: 0 0.3rem; font-size: 1.1rem; user-select: none; }
.t7-seq-step--dragging { opacity: 0.5; }
.t7-seq-step__message { margin: 0.35rem 0 0 7.25rem; }
.t7-seq-step__preview { white-space: pre-wrap; color: var(--text-muted); background: var(--surface-2); border-radius: 0.25rem;
  padding: 0.4rem 0.6rem; margin-top: 0.35rem; }
.t7-seq-step__preview:empty { display: none; }
.t7-seq-versions summary { cursor: pointer; color: var(--text-muted); }
/* A step's message, folded under its reminder (the step_message macro). */
.t7-step-message { margin-top: 0.25rem; }
.t7-step-message summary { cursor: pointer; color: var(--link); font-size: 0.8rem; }
.t7-step-message__text { white-space: pre-wrap; background: var(--surface-2); border-radius: 0.25rem; padding: 0.4rem 0.6rem; margin: 0.25rem 0; }
.t7-step-message__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

/* ======================================================================================================================
   Lesson 19: the phone. Everything below applies ONLY at 480px and narrower, so the desktop can't change (a test
   compares every page's markup, and screenshots compared the pixels). The pattern for wide tables, chosen 2026-09-25:
   scroll sideways inside their own box, with the name column pinned, so headers (and Contacts' sorting) stay.
   ====================================================================================================================== */
.t7-phone-only { display: none; }                  /* phone-only controls (the Contacts "Filters" button) */

@media (max-width: 480px) {
  .t7-phone-only { display: revert; }

  /* 1. Nothing wider than the screen: the page never scrolls sideways; wide things scroll inside themselves. */
  html, body { overflow-x: hidden; }
  .t7-page { padding: 0.5rem; }
  .slds-page-header { padding: 0.75rem; }
  .slds-page-header__row { flex-wrap: wrap; gap: 0.5rem; }
  .slds-page-header__col-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .slds-page-header__col-actions .slds-button { margin-left: 0; }
  .slds-page-header__col-actions .slds-button-group { flex-wrap: wrap; gap: 0.5rem; }
  .slds-page-header__col-actions .slds-button-group form { margin-left: 0; }
  .slds-page-header__col-actions .slds-button-group .slds-button { border-radius: 0.25rem; }
  .t7-upload { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .slds-card__body_inner { padding: 0 0.5rem; }
  .t7-footer { font-size: 0.7rem; }

  /* 2. The header: logo, a search icon that opens across the bar when tapped, Sign out. */
  .t7-header { gap: 0.5rem; position: relative; }
  .t7-header__logo { height: 1.4rem; }
  .t7-account__button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .t7-account { position: static; }
  .t7-account__menu { position: fixed; top: calc(3.25rem + env(safe-area-inset-top, 0px) + 0.5rem); left: 0.5rem; right: 0.5rem; width: auto; }  /* just under the navy bar */
  .t7-account__menu.slds-nubbin_top-right::before, .t7-account__menu.slds-nubbin_top-right::after { right: 1.1rem; }
  .t7-account__links a { min-height: 44px; }
  .t7-header > form.slds-form-element { width: 2.75rem !important; max-width: none !important; flex: 0 0 auto; }
  .t7-header > form.slds-form-element .slds-input {
    height: 2.75rem; padding: 0 0 0 2.5rem; color: transparent; cursor: pointer;
    background: var(--on-navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") no-repeat 0.75rem center;
  }
  .t7-header > form.slds-form-element .slds-input::placeholder { color: transparent; }
  .t7-header > form.slds-form-element:focus-within {                     /* tapped: the box spans the whole bar */
    position: absolute; z-index: 10; left: 0.5rem; right: 0.5rem; width: auto !important;
    bottom: 0.25rem;
  }
  .t7-header > form.slds-form-element:focus-within .slds-input { color: var(--on-navy); background-color: var(--navy); cursor: text; }
  .t7-header > form.slds-form-element:focus-within .slds-input::placeholder { color: var(--on-navy-muted); }

  /* 3. The tabs scroll sideways (base.html scrolls the active one into view). */
  .slds-context-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .slds-context-bar__item { flex: 0 0 auto; }
  .slds-context-bar__label-action { min-height: 44px; }
  .t7-report { position: static; }
  .t7-report__pop { position: fixed; top: auto; left: 0.5rem; right: 0.5rem; width: auto; margin-top: 0.5rem; }

  /* 4. Tap targets and forms: 44pt to tap (Apple's guideline), 16px text so iOS doesn't zoom in on focus. */
  .slds-button { min-height: 44px; min-width: 44px; }
  .slds-button_icon { min-height: 44px; min-width: 44px; }
  .slds-input, .slds-select, .slds-textarea, .slds-combobox__input { font-size: 16px; min-height: 44px; }
  .slds-textarea { min-height: 5rem; }
  .slds-select_container .slds-select { height: 44px; }
  .t7-upload__input { font-size: 16px; min-height: 44px; max-width: 100%; }
  .slds-form-element, .slds-form-element__control { max-width: 100%; }
  .slds-checkbox, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: inline-flex; align-items: center; min-height: 44px; gap: 0.4rem;
  }
  input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }

  /* 5. Wide tables: scroll inside their own box, name column pinned. One pattern for every table. */
  .slds-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .slds-table th, .slds-table td { white-space: nowrap; }
  .slds-table td.slds-cell-wrap, .slds-table th.slds-cell-wrap { white-space: normal; min-width: 12rem; }
  .slds-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
  /* The pinned column: at most ~45% of the screen (a long email wraps), with a shadow where the scrolling part starts. */
  .slds-table tr > :first-child, .t7-sticky-table .slds-table tr > :nth-child(2) {
    max-width: 45vw; min-width: 8.5rem; white-space: normal; overflow-wrap: anywhere; box-shadow: 1px 0 0 var(--border), 4px 0 6px -4px var(--shadow-strong);
  }
  .slds-table tbody tr, .slds-table thead tr { background: var(--surface); }
  .slds-table_striped tbody tr:nth-of-type(even) { background: var(--surface-2); }
  .t7-sticky-table { max-height: none; overflow: visible; }      /* one scroll up and down: the page's, not the table's */
  /* Contacts: column 1 is the tick box, so pin the name (column 2) instead. */
  .t7-sticky-table .slds-table tr > :first-child { position: static; max-width: none; min-width: 0; box-shadow: none; }
  .t7-sticky-table .slds-table tr > :nth-child(2) { position: sticky; left: 0; z-index: 1; background: inherit; }
  .t7-sticky-table thead th:nth-child(2) { z-index: 2; }

  /* 6. Contacts: only the search box shows until you tap Filters. (The form starts with hidden inputs, so "first"
     means the first row of fields: the first div.) */
  #contact-filters:not(.t7-filters-open) > :not(div:first-of-type),
  #contact-filters:not(.t7-filters-open) > div:first-of-type > .slds-col:not(:first-child) { display: none; }
  .t7-filters-toggle { margin-bottom: 0.5rem; }
  .t7-views { overflow-x: auto; flex-wrap: nowrap; }
  .t7-views__tab { white-space: nowrap; }

  /* 7. Home: two stat tiles a row (the grid classes already say so); smaller numbers so they fit. */
  .t7-stat { padding: 0.5rem 0.75rem; }
  .t7-stat__value { font-size: 1.4rem; }
  .t7-reminder__actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }

  /* 8. The call panel becomes a bottom sheet: full width, up to 85% of the screen, Next step and SMS inside it. */
  #call-dock { padding: 0; left: 0; right: 0; }
  .t7-panel, .t7-panel.slds-docked-composer { width: 100vw; max-width: 100vw; margin: 0; border-radius: 0.75rem 0.75rem 0 0; }
  .t7-panel.slds-is-open,
  .t7-panel.slds-is-open:has(#next-step .t7-next-step),
  .t7-panel.slds-is-open:has(#next-step .t7-sms) { height: 85vh; height: 85dvh; }
  .t7-panel__details { max-height: 30vh; }
  .t7-log-call-cell { min-width: 0; }
  .t7-log-call { flex-wrap: wrap; }
  .t7-next-step__row { grid-template-columns: 1fr; }

  /* 9. The router board: one column per screen width, swiped sideways, snapping into place. */
  .t7-board {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 0.5rem; padding-bottom: 0.75rem;
  }
  .t7-board__col { flex: 0 0 calc(100% - 1.5rem); scroll-snap-align: start; }

  /* 10. Lesson 23: each collapsed day of the Agenda is a tap target too. */
  .t7-agenda__day summary { min-height: 44px; display: flex; align-items: center; }
  .t7-agenda__time { min-width: 0; }

  /* 11. Lesson 25: Settings is one column; the section list becomes a row that scrolls sideways, like the tabs (3). */
  .t7-settings { grid-template-columns: minmax(0, 1fr); }
  .t7-settings__nav { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .t7-settings__nav ul { display: flex; }
  .t7-settings__nav .slds-nav-vertical__item { flex: 0 0 auto; }
  .slds-nav-vertical__action { min-height: 44px; white-space: nowrap; }
  .t7-settings__facts dt { width: 100%; }

  /* 12. Lesson 27: the steps editor stacks, and the drag handle goes (↑/↓ do the moving on a phone). */
  .t7-seq-step > .slds-grid { flex-wrap: wrap; }
  .t7-seq-step > .slds-grid > .slds-col { flex: 1 1 100%; }
  .t7-seq-step > .slds-grid > .t7-seq-step__move, .t7-seq-step > .slds-grid > .slds-shrink-none { flex: 0 0 auto; }
  .t7-seq-step__handle { display: none; }
  .t7-seq-step__message { margin-left: 0; }
}