/* ── Seneschal Modern ─────────────────────────────────────────────────────────
   The second look. Every rule is scoped to html[data-look="modern"], which
   look.js sets before first paint, so the medieval look never sees any of it.

   The same product underneath: no markup, route or behaviour differs between
   the two. What changes is the surface -- a civic building instead of the
   castle, flat navy panels with hairline edges instead of ornate artwork,
   text pills instead of painted ones, one modern typeface instead of four
   serif ones (modern-fonts.css), and square-shouldered controls.

   look.js replaces each painted pill image with a .lk-label carrying the same
   words, so the controls keep working exactly as they did.
   ------------------------------------------------------------------------- */

html[data-look="modern"] {
  --m-bg:        #0a1420;
  --m-panel:     #0f1c2b;
  --m-panel-2:   #13243a;
  --m-raise:     #172a42;
  --m-line:      rgba(255, 255, 255, 0.08);
  --m-line-2:    rgba(255, 255, 255, 0.14);
  --m-gold-line: rgba(212, 160, 23, 0.45);
  --m-text:      #e9eef5;
  --m-soft:      #b4c1d2;
  --m-dim:       #8494aa;
  --m-display:   'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --m-r:         6px;
  --m-r-sm:      4px;

  --serif: var(--m-display);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 6px;
  --navy-panel: var(--m-panel);
  --navy-deep: var(--m-bg);
  --navy-line: var(--m-line-2);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.45);

  background: var(--m-bg) !important;
}

/* ── Stage ────────────────────────────────────────────────────────────────── */
html[data-look="modern"] body {
  background-color: var(--m-bg) !important;
  background-image:
    linear-gradient(90deg, rgba(10, 20, 32, 0.97) 0%, rgba(10, 20, 32, 0.9) 42%, rgba(10, 20, 32, 0.78) 100%),
    linear-gradient(180deg, rgba(10, 20, 32, 0) 55%, rgba(10, 20, 32, 0.85) 100%),
    url('/backgrounds/town-hall.jpg') !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, right top !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

html[data-look="modern"] ::selection { background: rgba(212, 160, 23, 0.35); }

/* ── Painted artwork, replaced by words ───────────────────────────────────── */
html[data-look="modern"] img.lk-art:not(#lk-a):not(#lk-b) { display: none !important; }

html[data-look="modern"] .lk-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 16px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-panel);
  color: var(--m-text);
  font-family: var(--m-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html[data-look="modern"] :is(a, button):hover > .lk-label,
html[data-look="modern"] :is(a, button):hover > * > .lk-label {
  border-color: var(--m-gold-line);
  color: #fff;
}
html[data-look="modern"] :is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) > .lk-label,
html[data-look="modern"] :is(.is-active, .active, [aria-current="page"]) > * > .lk-label {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}

html[data-look="modern"] .lk-label[data-lk-icon]::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--lk-icon) center / contain no-repeat;
          mask: var(--lk-icon) center / contain no-repeat;
}
html[data-look="modern"] .lk-label[data-lk-icon="dashboard"]      { --lk-icon: url('/brand/modern/icons/dashboard.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="pipeline"]       { --lk-icon: url('/brand/modern/icons/pipeline.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="communications"] { --lk-icon: url('/brand/modern/icons/communications.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="contacts"]       { --lk-icon: url('/brand/modern/icons/contacts.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="marketing"]      { --lk-icon: url('/brand/modern/icons/marketing.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="listings"]       { --lk-icon: url('/brand/modern/icons/listings.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="settings"]       { --lk-icon: url('/brand/modern/icons/settings.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="speak"]          { --lk-icon: url('/brand/modern/icons/speak.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="people"]         { --lk-icon: url('/brand/modern/icons/people.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="briefing"]       { --lk-icon: url('/brand/modern/icons/briefing.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="chevron-left"]   { --lk-icon: url('/brand/modern/icons/chevron-left.svg'); }
html[data-look="modern"] .lk-label[data-lk-icon="chevron-right"]  { --lk-icon: url('/brand/modern/icons/chevron-right.svg'); flex-direction: row-reverse; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
html[data-look="modern"] :is(h1, h2, h3, h4) {
  font-family: var(--m-display);
  font-style: normal;
  letter-spacing: -0.005em;
}
html[data-look="modern"] em,
html[data-look="modern"] i { font-style: normal; }

/* ── Header ───────────────────────────────────────────────────────────────── */
html[data-look="modern"] .brand-name {
  font-family: var(--m-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.28em;
  color: #fff;
}
html[data-look="modern"] .brand-agent {
  color: var(--m-soft);
  opacity: 1;
  font-size: 12.5px;
}
html[data-look="modern"] .auth-status { color: var(--m-soft); opacity: 1; }
html[data-look="modern"] .date-display {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-soft);
  opacity: 1;
}
html[data-look="modern"] .header-quote {
  font-family: var(--m-display);
  font-style: normal;
  color: var(--m-text);
}
html[data-look="modern"] .header-quote #greeting-time {
  font-family: var(--m-display);
  font-weight: 700;
  font-style: normal;
  color: #fff;
  letter-spacing: -0.01em;
}
html[data-look="modern"] .header-quote span[style] {
  font-family: var(--m-display);
  font-weight: 600;
  color: var(--m-text);
}
html[data-look="modern"] .site-header__summary {
  border-top: 1px solid var(--m-line-2);
}
html[data-look="modern"] .summary-message {
  font-style: normal;
  color: var(--m-text);
  opacity: 1;
}

/* The briefing and People buttons are real buttons here, not artwork. */
html[data-look="modern"] #generateBtn,
html[data-look="modern"] #adminLink.header-people {
  line-height: 1.2;
}
html[data-look="modern"] #generateBtn .lk-label {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
  padding: 10px 18px;
  min-height: 40px;
}
html[data-look="modern"] #generateBtn:hover .lk-label {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #0a1420;
}
html[data-look="modern"] #adminLink.header-people .lk-label {
  min-height: 40px;
  padding: 10px 18px;
}

/* ── Side navigation ──────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  html[data-look="modern"] body.has-sidebar::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    background: rgba(9, 18, 29, 0.94);
    border-right: 1px solid var(--m-line);
    z-index: 40;
    pointer-events: none;
  }
  html[data-look="modern"] .brand-logo {
    top: 22px !important;
    left: 28px !important;
    z-index: 60;
  }
  html[data-look="modern"] .sidebar-nav {
    top: 104px !important;
    padding: 12px 16px 20px !important;
    gap: 4px !important;
    justify-content: flex-start;
  }
  html[data-look="modern"] .sidebar-nav .sidebar-btn { transform: none !important; }
  html[data-look="modern"] .sidebar-nav .lk-label {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 14px;
    min-height: 46px;
    padding: 12px 16px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0;
    background: transparent;
    color: var(--m-soft);
    font-size: 12.5px;
    letter-spacing: 0.14em;
  }
  html[data-look="modern"] .sidebar-nav .sidebar-btn:hover .lk-label {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
  }
  html[data-look="modern"] .sidebar-nav .sidebar-btn.is-active .lk-label {
    background: rgba(212, 160, 23, 0.1);
    border-left-color: var(--brand-gold);
    color: var(--gold-bright);
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
html[data-look="modern"] .btn {
  border-radius: var(--m-r-sm);
  font-family: var(--m-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}
html[data-look="modern"] .btn-sm { font-size: 11px; }
html[data-look="modern"] .btn-large { font-size: 13px; }
html[data-look="modern"] .btn-primary {
  background: var(--brand-gold);
  color: #0a1420;
  box-shadow: none;
}
html[data-look="modern"] .btn-primary:hover {
  background: var(--gold-bright);
  box-shadow: none;
  transform: none;
}
html[data-look="modern"] .btn-secondary {
  background: transparent;
  border-color: var(--m-line-2);
  color: var(--m-text);
}
html[data-look="modern"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--m-gold-line);
}

/* ── Cards and panels ─────────────────────────────────────────────────────── */
html[data-look="modern"] .section-title {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 0;
  font-family: var(--m-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html[data-look="modern"] .section-title::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--m-gold-line);
}

html[data-look="modern"] .overview-card {
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r);
  text-align: left;
  padding: 14px 16px;
}
html[data-look="modern"] .overview-card:hover {
  background: var(--m-panel-2);
  border-color: var(--m-line-2);
}
html[data-look="modern"] .overview-number {
  font-family: var(--m-display);
  font-size: 34px;
  font-weight: 800;
}
html[data-look="modern"] .oval-pill {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-soft);
}

/* ── Layout band ──────────────────────────────────────────────────────────
   The medieval header reserves 300px for the crest. Modern has no crest to
   hang, so the band is the header's own height and content starts under it. */
html[data-look="modern"] { --header-band: 150px; }
@media (min-width: 769px) {
  html[data-look="modern"] .site-header { padding-right: 28px; }
}
html[data-look="modern"] .date-display { letter-spacing: 0.12em; }

/* No italics anywhere in this look. */
html[data-look="modern"] body *:not(input):not(textarea) { font-style: normal !important; }

/* ── Destination rows (section pills) ─────────────────────────────────────── */
html[data-look="modern"] .section-pill { line-height: 1.2; }
html[data-look="modern"] .section-pill > .lk-label,
html[data-look="modern"] .section-pill > .art-pill {
  display: flex;
  width: 100%;
}
html[data-look="modern"] .section-pill > .lk-label { min-height: 38px; padding: 9px 14px; }
html[data-look="modern"] .section-pill.is-active { cursor: default; }
html[data-look="modern"] .section-pill:focus-visible { border-radius: var(--m-r-sm); }

/* Artwork pills that carry a live count. The count sits inline, inside the
   same box as the words, instead of over the end of a painted bar. */
html[data-look="modern"] .art-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  padding-right: 12px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-panel);
}
html[data-look="modern"] .art-pill > .lk-label {
  border: 0;
  background: transparent;
  padding-right: 0;
  min-height: 36px;
}
html[data-look="modern"] .art-pill__count,
html[data-look="modern"] .pipeline-switch__count {
  position: static;
  transform: none;
}
html[data-look="modern"] .section-pill.is-active .art-pill,
html[data-look="modern"] :is(a, button):hover > .art-pill {
  border-color: var(--m-gold-line);
}
html[data-look="modern"] .section-pill.is-active .art-pill {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
}
html[data-look="modern"] .section-pill.is-active .art-pill > .lk-label { color: #0a1420; }
html[data-look="modern"] .section-pill.is-active .art-pill .pipeline-switch__count,
html[data-look="modern"] .section-pill.is-active .art-pill .art-pill__count {
  background: #0a1420;
  color: var(--brand-gold);
}

/* Counts: square-shouldered chips, one style everywhere. */
html[data-look="modern"] :is(.pipeline-switch__count, .pipeline-stage__count, .followup-day__count, .cat-count) {
  font-family: var(--m-display);
  font-size: 11px;
  font-weight: 800;
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.02em;
}

/* ── Board headings: pipeline stages and follow-up days ───────────────────── */
html[data-look="modern"] :is(.pipeline-stage__toggle, .followup-day__toggle) {
  font-family: var(--m-display);
  letter-spacing: 0.14em;
  gap: 10px;
  padding: 6px 0;
}
html[data-look="modern"] :is(.pipeline-stage__label, .followup-day__label) {
  border-bottom-color: var(--m-line-2);
}
html[data-look="modern"] :is(.pipeline-stage__toggle, .followup-day__toggle) .art-pill {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 10px;
}
html[data-look="modern"] :is(.pipeline-stage__toggle, .followup-day__toggle) .lk-label {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #fff;
}
html[data-look="modern"] :is(.pipeline-stage__toggle, .followup-day__toggle):hover .lk-label { color: var(--gold-bright); }

/* ── Inbox piles: the text labels that already ship for phones ───────────── */
html[data-look="modern"] img.lk-own-label:not(#lk-a):not(#lk-b) { display: none !important; }
html[data-look="modern"] :is(.cat-pill, .compose-btn, .unread-toggle) :is(.cat-pill__label, .unread-toggle__label) { display: inline; }
html[data-look="modern"] .cat-pill,
html[data-look="modern"] .cat-pill.cat-pill--art,
html[data-look="modern"] .cat-pill.cat-pill--art.active,
html[data-look="modern"] .compose-btn.compose-btn--art,
html[data-look="modern"] .unread-toggle.unread-toggle--art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  background: var(--m-panel);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  color: var(--m-text);
  font-family: var(--m-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transform: none;
  filter: none;
}
html[data-look="modern"] .cat-pill:hover,
html[data-look="modern"] .compose-btn.compose-btn--art:hover,
html[data-look="modern"] .unread-toggle.unread-toggle--art:hover {
  background: var(--m-panel-2);
  border-color: var(--m-gold-line);
  color: #fff;
}
html[data-look="modern"] .cat-pill.active,
html[data-look="modern"] .cat-pill.cat-pill--art.active,
html[data-look="modern"] .unread-toggle.unread-toggle--art.active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] .compose-btn.compose-btn--art {
  background: transparent;
  border-color: var(--m-gold-line);
  color: var(--gold-bright);
}
html[data-look="modern"] .cat-pill .cat-pill__meta {
  position: static;
  transform: none;
  pointer-events: auto;
  gap: 6px;
}
html[data-look="modern"] .cat-pill .cat-count,
html[data-look="modern"] .cat-pill.cat-pill--art .cat-count {
  background: rgba(212, 160, 23, 0.16);
  color: var(--gold-bright);
}
html[data-look="modern"] .cat-pill.active .cat-count,
html[data-look="modern"] .cat-pill.cat-pill--art.active .cat-count {
  background: #0a1420;
  color: var(--brand-gold);
}

/* The search field wears plain edges, not the ornate frame. */
html[data-look="modern"] .inbox-search-field {
  border: 1px solid var(--m-line-2) !important;
  border-image: none !important;
  border-radius: var(--m-r-sm);
  background: var(--m-panel);
  padding: 0 14px;
  min-height: 42px;
  display: flex;
  align-items: center;
}
html[data-look="modern"] .inbox-search-field:focus-within {
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

/* ── Lockup: mark and wordmark together at the top of the rail ─────────────
   Drawn by the rail itself, so it sits above the header band on pages whose
   header is opaque, and the rail sits above the header so its links are
   never under the header's box. */
@media (min-width: 769px) {
  html[data-look="modern"] body.has-sidebar::before {
    z-index: 115;
    background-image: url('/brand/modern/seneschal-lockup.svg');
    background-repeat: no-repeat;
    background-position: 26px 26px;
    background-size: 232px 52px;
  }
  html[data-look="modern"] body.has-sidebar .sidebar-nav { z-index: 120; }
  html[data-look="modern"] body.has-sidebar .brand-logo,
  html[data-look="modern"] body.has-sidebar .brand-name { display: none !important; }
  html[data-look="modern"] .brand-agent {
    font-family: var(--m-display);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-top: 0;
  }
}
html[data-look="modern"] .header-quote #greeting-time { font-size: 24px; }

html[data-look="modern"] #tab-emails .inbox-tools-row .unread-toggle--art,
html[data-look="modern"] #unreadToggle {
  background: var(--m-panel);
  border: 1px solid var(--m-line-2);
  padding: 8px 14px;
  min-height: 38px;
}
html[data-look="modern"] #unreadToggle.active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] :is(.page-pill-row, .inbox-search-bar, .pipeline-switch, .section-pill-group) .lk-label,
html[data-look="modern"] :is(.cat-pill, .compose-btn) {
  letter-spacing: 0.06em;
}

/* ── Shape: square shoulders everywhere ───────────────────────────────────
   The medieval look rounds nearly every control into a full pill. Modern
   squares them off. Only the radius moves; size, colour and behaviour are
   whatever each control already had, so nothing reflows. */
html[data-look="modern"] :is(
  .tab-btn, .draft-toggle-btn, .settings-pill, .pa-pill, .skipped-toggle, .skipped-row,
  .btn-archive, .btn-notspam, .btn-pill, .undo-btn, .compose-btn, .btn-attachment-preview,
  .btn-attachment-download, .subpill, .format-tab, .reel-tpl-btn, .reel-scene__preset-save,
  .reel-scene-add, .support-btn, .idx-btn--tool, .contact-filter-dropdown, .unread-toggle,
  .bar, .story-mockup__reply, .idx-filters
) {
  border-radius: var(--m-r-sm) !important;
}
html[data-look="modern"] :is(
  .priority-pill, .social-theme-badge, .phase-pill, .contact-tag, .label-pill, .pillar-pill,
  .chip, .stat-chip, .reel-scene__preset-chip, .idx-chip, .idx-status, .idx-tour-badge,
  .idx-gallery-count, .status-badge, .plan-card__founding, .keydate, .oval-pill
) {
  border-radius: 3px !important;
}
html[data-look="modern"] [style*="border-radius:999px"],
html[data-look="modern"] [style*="border-radius: 999px"],
html[data-look="modern"] [style*="border-radius:20px"],
html[data-look="modern"] [style*="border-radius: 20px"] {
  border-radius: var(--m-r-sm) !important;
}

/* Chips read as labels: small, tracked capitals. */
html[data-look="modern"] :is(.priority-pill, .phase-pill, .social-theme-badge, .label-pill, .pillar-pill) {
  font-family: var(--m-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ── Cards that carry data ─────────────────────────────────────────────────
   Medieval outlines every card in gold. Modern keeps gold for what matters
   (the active thing, the number, the primary action) and edges cards with a
   hairline, lifting on hover instead of glowing. */
html[data-look="modern"] :is(.pipeline-card, .contact-card, .priority-card, .email-card, .calendar-card, .transaction-card) {
  border-color: var(--m-line-2) !important;
  border-radius: var(--m-r) !important;
  background: var(--m-panel);
}
html[data-look="modern"] :is(.pipeline-card, .contact-card, .priority-card, .email-card, .transaction-card):hover {
  border-color: var(--m-gold-line) !important;
  background: var(--m-panel-2);
}
html[data-look="modern"] .priority-row {
  background: var(--m-panel);
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
}
html[data-look="modern"] .priority-row:hover { border-color: var(--m-gold-line); }
html[data-look="modern"] .priority-dot { border-radius: 2px; }
html[data-look="modern"] .priority-pill--contact {
  background: transparent;
  border-color: var(--m-gold-line);
}

/* ── Settings ─────────────────────────────────────────────────────────────── */
html[data-look="modern"] .settings-shell {
  background: rgba(10, 20, 32, 0.9);
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
  backdrop-filter: none;
}
html[data-look="modern"] .settings-rail {
  background: rgba(7, 15, 24, 0.7);
  border-right-color: var(--m-line);
  padding: 12px 0;
  gap: 0;
}
html[data-look="modern"] .settings-rail-item {
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
}
html[data-look="modern"] .settings-rail-item:hover { background: rgba(255, 255, 255, 0.04); }
html[data-look="modern"] .settings-rail-item.is-active {
  background: rgba(212, 160, 23, 0.1);
  border-left-color: var(--brand-gold);
}
html[data-look="modern"] .settings-rail-label {
  font-family: var(--m-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--m-soft);
}
html[data-look="modern"] .settings-rail-item:hover .settings-rail-label { color: #fff; }
html[data-look="modern"] .settings-rail-item.is-active .settings-rail-label { color: var(--gold-bright); }
html[data-look="modern"] .settings-rail-item--link { border-top: 1px solid var(--m-line); }
html[data-look="modern"] .settings-rail-item--link + .settings-rail-item--link { border-top-color: transparent; }
html[data-look="modern"] .settings-detail-title {
  font-family: var(--m-display);
  color: #fff;
}
html[data-look="modern"] :is(.settings-section-title, #settings-panel .ai-quota-title) {
  font-family: var(--m-display);
  font-weight: 700;
  color: #fff;
}
html[data-look="modern"] .settings-pill {
  background: transparent;
  border-color: var(--m-line-2);
  color: var(--m-text);
  font-family: var(--m-display);
  font-weight: 600;
}
html[data-look="modern"] .settings-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--m-gold-line);
}
html[data-look="modern"] .settings-pill[aria-checked="true"] {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
html[data-look="modern"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="number"], input[type="url"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input:not([type]), select, textarea):not(.inbox-search-input) {
  border-radius: var(--m-r-sm);
  border-color: var(--m-line-2);
}
html[data-look="modern"] :is(input, select, textarea):not(.inbox-search-input):focus {
  border-color: var(--brand-gold);
}
html[data-look="modern"] .site-header { flex-shrink: 0; }

/* ── Contact page ─────────────────────────────────────────────────────────── */
html[data-look="modern"] #checklistContainer .checklist-header > .lk-label {
  display: flex;
  width: 100%;
  min-height: 40px;
  background: var(--m-panel-2);
  border-color: var(--m-gold-line);
  color: var(--gold-bright);
}

/* Full-screen overlays that sat at z-index 100 must still cover the rail,
   which rides at 115-120 in this look. */
html[data-look="modern"] :is(.cd-edit-modal, .draft-overlay, .modal-bg) { z-index: 300 !important; }
html[data-look="modern"] :is(.info-toast, .undo-toast) { z-index: 300; }

/* ── Pieces that exist only in the modern look ───────────────────────────
   Marked hidden in the markup so the medieval look never shows them. */
html[data-look="modern"] .lk-modern-only[hidden] { display: revert !important; }

/* ── Sign-in page ─────────────────────────────────────────────────────────
   One responsive layout at every width, in place of the medieval desktop
   hero plus a separate phone stack. */
html[data-look="modern"] .hero { display: flex !important; }
html[data-look="modern"] .mobile { display: none !important; }
html[data-look="modern"] .hero .site-header {
  min-height: 0;
  padding: 28px clamp(20px, 6vw, 88px) 0;
}
html[data-look="modern"] .hero .brand-logo,
html[data-look="modern"] .hero .wizard-lockup { display: none !important; }
html[data-look="modern"] .lk-login-lockup[hidden] {
  display: block !important;
  width: 232px;
  height: 52px;
}
html[data-look="modern"] .hero .login-panel {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 26px;
  padding: 40px clamp(20px, 6vw, 88px);
  max-width: 900px;
}
html[data-look="modern"] .login-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--m-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-gold);
  text-shadow: none;
}
html[data-look="modern"] .login-sub::after {
  content: '';
  width: 56px;
  height: 1px;
  background: var(--m-gold-line);
}
html[data-look="modern"] .lk-login-title[hidden] {
  display: block !important;
  margin: 0;
  font-family: var(--m-display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 15ch;
}
html[data-look="modern"] .lk-login-title span { color: var(--brand-gold); }
html[data-look="modern"] .login-buttons { justify-content: flex-start; gap: 14px; }
html[data-look="modern"] .login-btn {
  min-width: 190px;
  padding: 15px 30px;
  border-radius: var(--m-r-sm);
  border-width: 1px;
  font-family: var(--m-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-look="modern"] .login-btn:hover { transform: none; box-shadow: none; }
html[data-look="modern"] .login-btn-outline {
  background: rgba(10, 20, 32, 0.6);
  border-color: var(--m-line-2);
  color: #fff;
}
html[data-look="modern"] .login-btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
}
html[data-look="modern"] .login-btn-gold {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] .login-btn-gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  filter: none;
}
html[data-look="modern"] .signup-link {
  font-family: 'Inter', sans-serif;
  color: var(--m-soft);
  border-color: var(--m-line-2);
}
html[data-look="modern"] .lk-pillars[hidden] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--m-line-2);
  background: rgba(7, 15, 24, 0.85);
}
html[data-look="modern"] .lk-pillar {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  padding: 26px clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--m-line);
  font-family: 'Inter', sans-serif;
}
html[data-look="modern"] .lk-pillar:first-child { border-left: 0; }
html[data-look="modern"] .lk-pillar::before {
  content: '';
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  background-color: var(--brand-gold);
  -webkit-mask: var(--lk-icon) center / contain no-repeat;
          mask: var(--lk-icon) center / contain no-repeat;
}
html[data-look="modern"] .lk-pillar[data-lk-icon="briefing"]       { --lk-icon: url('/brand/modern/icons/briefing.svg'); }
html[data-look="modern"] .lk-pillar[data-lk-icon="pipeline"]       { --lk-icon: url('/brand/modern/icons/pipeline.svg'); }
html[data-look="modern"] .lk-pillar[data-lk-icon="people"]         { --lk-icon: url('/brand/modern/icons/people.svg'); }
html[data-look="modern"] .lk-pillar[data-lk-icon="communications"] { --lk-icon: url('/brand/modern/icons/communications.svg'); }
html[data-look="modern"] .lk-pillar strong {
  font-family: var(--m-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
html[data-look="modern"] .lk-pillar span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--m-soft);
}
@media (max-width: 900px) {
  html[data-look="modern"] .lk-pillars[hidden] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-look="modern"] .lk-pillar:nth-child(3) { border-left: 0; }
  html[data-look="modern"] .lk-pillar:nth-child(n+3) { border-top: 1px solid var(--m-line); }
}
@media (max-width: 560px) {
  html[data-look="modern"] .lk-pillars[hidden] { grid-template-columns: 1fr; }
  html[data-look="modern"] .lk-pillar { border-left: 0; }
  html[data-look="modern"] .lk-pillar + .lk-pillar { border-top: 1px solid var(--m-line); }
  html[data-look="modern"] .login-buttons { width: 100%; }
  html[data-look="modern"] .login-btn { flex: 1 1 100%; min-width: 0; }
}

/* Sign-in and account dialogs */
html[data-look="modern"] .signup-card {
  background: var(--m-panel);
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
}
html[data-look="modern"] .signup-card h2 {
  font-family: var(--m-display);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
html[data-look="modern"] :is(.signup-cta, .auth-microsoft, .signup-close, .auth-field input, .auth-uri) {
  border-radius: var(--m-r-sm);
}
html[data-look="modern"] .signup-cta {
  background: var(--brand-gold);
  color: #0a1420;
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-look="modern"] .hero .header-brand { padding-left: 0; }
@media (max-width: 560px) {
  html[data-look="modern"] .login-sub::after { display: none; }
}

/* ── Setup wizard ─────────────────────────────────────────────────────────── */
html[data-look="modern"] body:not(.has-sidebar) .hero > .site-header {
  min-height: 0;
  padding: 28px clamp(20px, 6vw, 88px) 0;
}
html[data-look="modern"] body:not(.has-sidebar) .hero .brand-logo { display: none !important; }
html[data-look="modern"] .step-overlay { padding-top: 28px; }

/* Progress: a row of short bars, not torches. */
html[data-look="modern"] .torch-row { gap: 6px; align-items: center; }
html[data-look="modern"] .torch {
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: var(--m-line-2);
  opacity: 1;
  filter: none !important;
}
html[data-look="modern"] .torch svg { display: none; }
html[data-look="modern"] .torch.lit { background: var(--brand-gold); }
html[data-look="modern"] .torch.current { background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18); }

html[data-look="modern"] .step {
  background: rgba(10, 20, 32, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
  box-shadow: var(--shadow-soft);
}
html[data-look="modern"] .step-heading {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: -0.015em;
}
html[data-look="modern"] .step-greeting { font-family: var(--m-display); font-weight: 700; letter-spacing: 0.16em; }

html[data-look="modern"] .choice-card {
  background: var(--m-panel);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r);
  transform: none;
}
html[data-look="modern"] .choice-card:hover { border-color: var(--m-gold-line); background: var(--m-panel-2); }
html[data-look="modern"] .choice-card.selected {
  border-color: var(--brand-gold);
  background: rgba(212, 160, 23, 0.12);
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}
html[data-look="modern"] .card-title { font-family: var(--m-display); font-weight: 800; color: #fff; }
html[data-look="modern"] .choice-card.selected .card-title { color: var(--gold-bright); }

html[data-look="modern"] body:not(.has-sidebar) .btn {
  border-radius: var(--m-r-sm);
  border-width: 1px;
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
html[data-look="modern"] body:not(.has-sidebar) .btn.primary {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] body:not(.has-sidebar) .btn.primary:hover { background: var(--gold-bright); transform: none; filter: none; }
html[data-look="modern"] body:not(.has-sidebar) .btn.secondary { border-color: var(--m-line-2); color: #fff; }
html[data-look="modern"] .wizard-input { border-radius: var(--m-r-sm); border-color: var(--m-line-2); }

/* Back and Next: real buttons with a chevron, in place of the painted arrows. */
html[data-look="modern"] :is(#btn-back, #btn-next) {
  flex-direction: row;
  gap: 8px;
  opacity: 1;
  transform: none !important;
  padding: 11px 18px;
  border-radius: var(--m-r-sm);
  font-family: var(--m-display);
}
html[data-look="modern"] #btn-next { background: var(--brand-gold); border: 1px solid var(--brand-gold); }
html[data-look="modern"] #btn-next:hover { background: var(--gold-bright); }
html[data-look="modern"] #btn-back { background: transparent; border: 1px solid var(--m-line-2); }
html[data-look="modern"] #btn-back:hover { border-color: #fff; }
html[data-look="modern"] .wizard-nav-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
  color: #fff;
}
html[data-look="modern"] #btn-next .wizard-nav-label { color: #0a1420; }
html[data-look="modern"] :is(#btn-back, #btn-next)::before,
html[data-look="modern"] :is(#btn-back, #btn-next)::after {
  width: 16px;
  height: 16px;
  background-color: currentColor;
}
html[data-look="modern"] #btn-next { color: #0a1420; }
html[data-look="modern"] #btn-back { color: #fff; }
html[data-look="modern"] #btn-next::after {
  content: '';
  order: 2;
  -webkit-mask: url('/brand/modern/icons/chevron-right.svg') center / contain no-repeat;
          mask: url('/brand/modern/icons/chevron-right.svg') center / contain no-repeat;
}
html[data-look="modern"] #btn-back::before {
  content: '';
  -webkit-mask: url('/brand/modern/icons/chevron-left.svg') center / contain no-repeat;
          mask: url('/brand/modern/icons/chevron-left.svg') center / contain no-repeat;
}

html[data-look="modern"] body:not(.has-sidebar) .pillars-banner { display: none !important; }

/* Plans */
html[data-look="modern"] .plan-card {
  background: var(--m-panel);
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
}
html[data-look="modern"] .plan-card:hover { border-color: var(--m-gold-line); }
html[data-look="modern"] .plan-card.selected {
  border-color: var(--brand-gold);
  background: rgba(212, 160, 23, 0.1);
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}
html[data-look="modern"] .plan-card__name { font-family: var(--m-display); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }
html[data-look="modern"] .plan-card__price { font-family: var(--m-display); color: #fff; }

/* ── Standalone pages: payment wall, approval, no access, Gmail ─────────── */
html[data-look="modern"] body:not(.has-sidebar) .card {
  background: rgba(10, 20, 32, 0.94);
  border-color: var(--m-line-2) !important;
  border-radius: var(--m-r) !important;
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}
html[data-look="modern"] body:not(.has-sidebar) .card::before {
  content: '';
  display: block;
  width: 232px;
  height: 52px;
  margin: 0 0 22px;
  background: url('/brand/modern/seneschal-lockup.svg') left center / contain no-repeat;
}
html[data-look="modern"] body:not(.has-sidebar) .card .wordmark { display: none; }
html[data-look="modern"] body:not(.has-sidebar) .card h1 {
  font-family: var(--m-display);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
html[data-look="modern"] :is(a.button, button.button, .signout-btn) {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
html[data-look="modern"] :is(button.button--primary, .signout-btn) {
  background: var(--brand-gold) !important;
  color: #0a1420 !important;
  box-shadow: none !important;
}
html[data-look="modern"] .pw-section h2,
html[data-look="modern"] .pw-section > :is(h3, .pw-title) {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--brand-gold);
}
html[data-look="modern"] .pw-grid > * { border-radius: var(--m-r) !important; }
html[data-look="modern"] body:not(.has-sidebar) .card:has(.wordmark)::before { margin-inline: auto; background-position: center; }
html[data-look="modern"] body:not(.has-sidebar) .card:has(.mark)::before { display: none; }
html[data-look="modern"] .mark .shield,
html[data-look="modern"] .crest-hero { display: none !important; }
html[data-look="modern"] .mark::before {
  content: '';
  display: block;
  width: 280px;
  max-width: 100%;
  height: 62px;
  background: url('/brand/modern/seneschal-lockup-large.svg') left center / contain no-repeat;
}
html[data-look="modern"] body:not(.has-sidebar) .card:has(.wordmark) { padding: 36px 32px 32px; }

/* ── Listing search (IDX) ─────────────────────────────────────────────────
   Surface only. Text sizes, the attribution lines and the brokerage's
   prominence over Seneschal are compliance rules and are left exactly as
   they are; the Seneschal lockup stays smaller than the brokerage name. */
html[data-look="modern"] body.idx {
  background-image:
    linear-gradient(180deg, rgba(10, 20, 32, 0.9), rgba(10, 20, 32, 0.94) 45%, rgba(10, 20, 32, 0.98)),
    url('/backgrounds/town-hall.jpg') !important;
  background-position: center, right top !important;
  background-size: auto, cover !important;
}
html[data-look="modern"] body.idx::after { display: none; }
html[data-look="modern"] .idx-sen-lockup .idx-shield { display: none !important; }
html[data-look="modern"] .idx-sen-lockup::after {
  content: '';
  width: 170px;
  height: 38px;
  background: url('/brand/modern/seneschal-lockup.svg') right center / contain no-repeat;
}
@media (max-width: 640px) {
  html[data-look="modern"] .idx-sen-lockup::after { width: 44px; background-image: url('/brand/seneschal-shield.png'); }
}

/* Unread only: the medieval rules strip this button bare with !important
   so the artwork can be the button; modern puts the box back. */
html[data-look="modern"] body .unread-toggle--art {
  background: var(--m-panel) !important;
  border: 1px solid var(--m-line-2) !important;
  padding: 8px 14px !important;
  border-radius: var(--m-r-sm) !important;
  line-height: 1.2;
  opacity: 1;
  filter: none;
  transform: none !important;
  color: var(--m-text);
}
html[data-look="modern"] body .unread-toggle--art:hover {
  border-color: var(--m-gold-line) !important;
  background: var(--m-panel-2) !important;
  opacity: 1;
}
html[data-look="modern"] body .unread-toggle--art.active,
html[data-look="modern"] body .unread-toggle--art.active:hover {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #0a1420;
}

/* ── Phones and narrow windows ────────────────────────────────────────────── */
@media (max-width: 768px) {
  html[data-look="modern"] .brand-logo {
    position: static !important;
    width: 210px;
    height: 47px;
    background: url('/brand/modern/seneschal-lockup.svg') left center / contain no-repeat;
  }
  html[data-look="modern"] .brand-logo img { display: none !important; }
  html[data-look="modern"] .header-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  html[data-look="modern"] body.has-sidebar .brand-name { display: none; }

  html[data-look="modern"] nav.sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  html[data-look="modern"] nav.sidebar-nav .sidebar-btn {
    width: 100%;
    max-width: none;
    transform: none !important;
  }
  html[data-look="modern"] nav.sidebar-nav .sidebar-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-look="modern"] nav.sidebar-nav .lk-label {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
    background: var(--m-panel);
  }
  html[data-look="modern"] nav.sidebar-nav .sidebar-btn.is-active .lk-label {
    background: rgba(212, 160, 23, 0.12);
    border-color: var(--brand-gold);
    color: var(--gold-bright);
  }
  html[data-look="modern"] .header-right { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
}

/* A 320px phone gives each menu box about 145px, and COMMUNICATIONS with its
   icon at the spacing above needs about 168: it ran out of its box into the
   next one. Tighter letter spacing and padding here only. */
@media (max-width: 360px) {
  html[data-look="modern"] nav.sidebar-nav .lk-label { gap: 6px; padding: 10px 6px; font-size: 10.5px; letter-spacing: 0.02em; }
  html[data-look="modern"] nav.sidebar-nav .lk-label[data-lk-icon]::before { width: 16px; height: 16px; flex-basis: 16px; }
}

/* ── Inbox rows ───────────────────────────────────────────────────────────── */
html[data-look="modern"] .email-table {
  border-color: var(--m-line-2) !important;
  border-radius: var(--m-r) !important;
  background: rgba(10, 20, 32, 0.92);
}
html[data-look="modern"] .action-btn {
  border-radius: var(--m-r-sm) !important;
  background: transparent;
  border-color: var(--m-line-2);
  color: var(--m-text);
}
html[data-look="modern"] .action-btn:hover { transform: none; border-color: var(--m-gold-line); filter: none; }
html[data-look="modern"] .btn-archive {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold-bright);
  border-color: var(--m-gold-line);
}
html[data-look="modern"] :is(.btn-spam, .btn-delete) { color: var(--status-red); border-color: rgba(228, 88, 87, 0.45); }

@media (max-width: 768px) {
  html[data-look="modern"] :is(.section-pill, .page-pill-row .section-pill) > .lk-label,
  html[data-look="modern"] :is(.cat-pill, .compose-btn) {
    white-space: normal;
    text-align: center;
    letter-spacing: 0.04em;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ── First-run states ─────────────────────────────────────────────────────── */
html[data-look="modern"] .briefing-empty-content .lk-label,
html[data-look="modern"] .welcome-pill-wrap .welcome-pill-text {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-family: var(--m-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: normal;
  color: #fff;
  text-align: center;
}
html[data-look="modern"] .welcome-pill-wrap { background: none; }
html[data-look="modern"] .welcome-pill-wrap .welcome-pill-text { position: static; transform: none; }
html[data-look="modern"] #contactImportHonorific { display: none; }

/* ── Dialogs and fields ──────────────────────────────────────────────────────
   A few dialogs are still the app's original white. Modern makes every one
   of them the same dark panel, and every field the same dark well. */
html[data-look="modern"] :is(.modal, .reply-modal__panel, .cd-edit-modal__panel, .modal-bg > div, .draft-overlay > div, .loading-card) {
  background: var(--m-panel) !important;
  color: var(--m-text);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r) !important;
}
html[data-look="modern"] .modal-header { border-bottom-color: var(--m-line); }
html[data-look="modern"] .modal-footer { border-top-color: var(--m-line); }
html[data-look="modern"] :is(.modal-header h3, .loading-title) {
  font-family: var(--m-display);
  font-weight: 800;
  color: #fff;
}
html[data-look="modern"] .form-group label { color: var(--m-soft); }
html[data-look="modern"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="number"], input[type="url"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input:not([type]), select, textarea):not(.inbox-search-input) {
  background-color: #0b1724;
  color: var(--m-text);
  border: 1px solid var(--m-line-2);
  color-scheme: dark;
}
html[data-look="modern"] :is(input, textarea)::placeholder { color: var(--m-dim); }
html[data-look="modern"] select option { background: #0b1724; color: var(--m-text); }
html[data-look="modern"] .loading-step { color: var(--m-dim); }
html[data-look="modern"] .loading-step.active { color: #fff; }
html[data-look="modern"] .spinner { border-color: var(--m-line-2); border-top-color: var(--brand-gold); }

/* ── Marketing ────────────────────────────────────────────────────────────── */
html[data-look="modern"] .subpill {
  background: var(--m-panel);
  border-color: var(--m-line-2);
  color: var(--m-text);
  font-family: var(--m-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11.5px;
}
html[data-look="modern"] .subpill:hover { border-color: var(--m-gold-line); color: #fff; }
html[data-look="modern"] .subpill.active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] .ap-pill { border-radius: var(--m-r-sm); }
html[data-look="modern"] .ap-tag { border-radius: 3px; }
html[data-look="modern"] .email-body-modal__panel {
  background: var(--m-panel);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r);
}
html[data-look="modern"] .email-body-modal__subject { font-family: var(--m-display); font-weight: 700; color: #fff; }

/* ── Communications: two rows, Outlook-style ───────────────────────────────
   1. One toolbar: search, Unread only, and Compose.
   2. The piles as small tabs with their counts.
   The destination tabs that sat above them moved to Contacts, 2026-09-25. */
html[data-look="modern"] #tab-emails .inbox-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 14px;
}
html[data-look="modern"] #tab-emails .inbox-search-row { order: 3; flex: 1 1 320px; min-width: 0; }
html[data-look="modern"] #tab-emails .inbox-tools-row { order: 4; flex: 0 0 auto; flex-basis: auto; flex-wrap: nowrap; }
html[data-look="modern"] #tab-emails .inbox-search-bar > #catPills { order: 5; flex-basis: 100%; }
html[data-look="modern"] .inbox-search-field { max-width: none; width: 100%; }

/* Destination tabs on the Contacts pages. */
html[data-look="modern"] .page-pill-row .section-pill {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html[data-look="modern"] .page-pill-row .section-pill-group {
  gap: 0 22px;
  border-bottom: 1px solid var(--m-line-2);
}
html[data-look="modern"] .page-pill-row .section-pill > .lk-label {
  min-height: 0;
  padding: 10px 2px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--m-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
html[data-look="modern"] .page-pill-row .section-pill:hover > .lk-label { color: #fff; }
html[data-look="modern"] .page-pill-row .section-pill.is-active > .lk-label {
  background: transparent;
  color: var(--gold-bright);
  border-bottom-color: var(--brand-gold);
}

/* Toolbar */
html[data-look="modern"] #tab-emails .inbox-search-field { min-height: 40px; }
html[data-look="modern"] body #tab-emails .unread-toggle--art {
  min-height: 40px;
  padding: 8px 14px !important;
  font-size: 11.5px;
}
html[data-look="modern"] #tab-emails .inbox-tools-row .compose-btn.compose-btn--art {
  min-height: 40px;
  margin-left: 0;
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] #tab-emails .inbox-tools-row .compose-btn.compose-btn--art:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #0a1420;
}

/* Piles */
html[data-look="modern"] #catPills { gap: 6px; }
html[data-look="modern"] #catPills .cat-pill.cat-pill--art,
html[data-look="modern"] #catPills .cat-pill {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  min-height: 32px;
  padding: 6px 12px;
  background: transparent;
  font-size: 11.5px;
}
html[data-look="modern"] #catPills .cat-pill.active,
html[data-look="modern"] #catPills .cat-pill.cat-pill--art.active {
  background: rgba(212, 160, 23, 0.14);
  border-color: var(--brand-gold);
  color: var(--gold-bright);
}
html[data-look="modern"] #catPills .cat-pill.active .cat-count {
  background: var(--brand-gold);
  color: #0a1420;
}

@media (max-width: 768px) {
  html[data-look="modern"] #tab-emails .inbox-search-bar { column-gap: 16px; }
  html[data-look="modern"] #tab-emails .inbox-tools-row { flex: 1 1 100%; justify-content: space-between; }
  html[data-look="modern"] .page-pill-row .section-pill-group { gap: 0 16px; }
  html[data-look="modern"] .page-pill-row .section-pill > .lk-label { padding: 8px 0 9px; font-size: 11px; }
}
@media (max-width: 768px) {
  html[data-look="modern"] #tab-emails .inbox-search-bar { row-gap: 2px; }
  html[data-look="modern"] #tab-emails .inbox-search-row { margin-top: 12px; }
  html[data-look="modern"] #tab-emails .inbox-tools-row { margin: 8px 0; }
}

/* ── Pipeline: Active / Closed as tabs, a slim alert line ─────────────────── */
html[data-look="modern"] .pipeline-switch {
  gap: 0 26px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--m-line-2);
}
html[data-look="modern"] .pipeline-switch .section-pill .art-pill {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0 0 1px;
  gap: 8px;
}
html[data-look="modern"] .pipeline-switch .section-pill .art-pill > .lk-label {
  min-height: 0;
  padding: 10px 0;
  color: var(--m-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
}
html[data-look="modern"] .pipeline-switch .section-pill:hover .art-pill > .lk-label { color: #fff; }
html[data-look="modern"] .pipeline-switch .section-pill.is-active .art-pill {
  background: transparent;
  border-bottom-color: var(--brand-gold);
}
html[data-look="modern"] .pipeline-switch .section-pill.is-active .art-pill > .lk-label {
  background: transparent;
  color: var(--gold-bright);
}
html[data-look="modern"] .pipeline-switch .section-pill .pipeline-switch__count {
  background: rgba(212, 160, 23, 0.16);
  color: var(--gold-bright);
}
html[data-look="modern"] .pipeline-switch .section-pill.is-active .pipeline-switch__count {
  background: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] .urgent-deadlines-banner {
  max-width: none !important;
  text-align: left;
  font-size: 13px;
  padding: 9px 14px;
  border: 0;
  border-left: 3px solid var(--status-amber);
  border-radius: var(--m-r-sm);
  background: rgba(232, 168, 56, 0.1);
  text-shadow: none;
}

/* ── Marketing: sections as tabs, views as small tabs under them ──────────── */
html[data-look="modern"] #socialSubpills,
html[data-look="modern"] #videoSectionPills { gap: 8px 6px; }
html[data-look="modern"] :is(#socialSubpills, #videoSectionPills) .section-pill-group {
  gap: 0 26px;
  border-bottom: 1px solid var(--m-line-2);
  margin-bottom: 8px;
}
html[data-look="modern"] :is(#socialSubpills, #videoSectionPills) .section-pill { flex: 0 0 auto; }
html[data-look="modern"] :is(#socialSubpills, #videoSectionPills) .section-pill > .lk-label {
  min-height: 0;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--m-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
}
html[data-look="modern"] :is(#socialSubpills, #videoSectionPills) .section-pill:hover > .lk-label { color: #fff; }
html[data-look="modern"] :is(#socialSubpills, #videoSectionPills) .section-pill.is-active > .lk-label {
  background: transparent;
  color: var(--gold-bright);
  border-bottom-color: var(--brand-gold);
}
html[data-look="modern"] #socialSubpills .subpill {
  min-height: 32px;
  padding: 6px 12px;
  background: transparent;
  font-size: 11.5px;
}
html[data-look="modern"] #socialSubpills .subpill.active {
  background: rgba(212, 160, 23, 0.14);
  border-color: var(--brand-gold);
  color: var(--gold-bright);
}

/* ── Settings: sections as a tab row across the top ─────────────────────────
   The side rail becomes the same underlined tabs every other section uses,
   and the panel below gets the full width. Help & Support and Sign Out sit
   at the far end of the row. The section title under the tabs repeated the
   lit tab, so only its one-line description stays. */
html[data-look="modern"] .settings-shell { flex-direction: column; }
html[data-look="modern"] .settings-rail {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 24px;
  padding: 0 24px;
  background: transparent;
  border-right: 0;
  border-bottom: 1px solid var(--m-line-2);
  overflow: visible;
}
html[data-look="modern"] .settings-rail-item,
html[data-look="modern"] .settings-rail-item.is-active {
  flex: 0 0 auto;
  padding: 14px 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
html[data-look="modern"] .settings-rail-item:hover { background: transparent; }
html[data-look="modern"] .settings-rail-item.is-active { border-bottom-color: var(--brand-gold); }
html[data-look="modern"] .settings-rail-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-look="modern"] .settings-rail-item--link,
html[data-look="modern"] .settings-rail-item--link + .settings-rail-item--link { margin-top: 0; border-top: 0; }
html[data-look="modern"] .settings-rail-item--link:not(.settings-rail-item--link + .settings-rail-item--link) { margin-left: auto; }
html[data-look="modern"] .settings-rail-item--link .settings-rail-label { color: var(--m-dim); }
html[data-look="modern"] .settings-detail-title { display: none; }
@media (max-width: 768px) {
  html[data-look="modern"] .settings-rail { gap: 0 16px; padding: 0 14px; }
  html[data-look="modern"] .settings-rail-item--link:not(.settings-rail-item--link + .settings-rail-item--link) { margin-left: 0; }
}
html[data-look="modern"] .settings-rail { gap: 0 20px; padding: 0 20px; }
html[data-look="modern"] .settings-rail-label { letter-spacing: 0.07em; font-size: 11.5px; }
/* Help & Support is already in the footer of every page. */
html[data-look="modern"] .settings-rail-item--link[href="/support.html"] { display: none; }
html[data-look="modern"] .settings-rail-item--link[href="/auth/logout"] { margin-left: auto; }
@media (max-width: 768px) {
  html[data-look="modern"] .settings-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html[data-look="modern"] .settings-rail-item--link[href="/auth/logout"] { margin-left: 0; }
}
html[data-look="modern"] #settings-panel .settings-rail { align-self: stretch; width: auto; gap: 0 18px; }
html[data-look="modern"] #settings-panel .settings-rail-item { padding: 14px 0 12px; }
html[data-look="modern"] #settings-panel .settings-rail-label {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 13.5px;
  font-weight: 600;
}

/* ── Dashboard: one stats bar, one slim prompt ─────────────────────────────
   The four boxed tiles become a single bar with hairline dividers, and the
   "Scan for deal updates" box becomes a slim line like the pipeline alert. */
html[data-look="modern"] .overview-grid {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r);
  background: var(--m-panel);
  overflow: hidden;
}
html[data-look="modern"] .overview-grid .overview-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  border: 0 !important;
  border-left: 1px solid var(--m-line) !important;
  border-radius: 0 !important;
  background: transparent;
  transform: none;
}
html[data-look="modern"] .overview-grid .overview-card:first-child { border-left: 0 !important; }
html[data-look="modern"] .overview-grid .overview-card:hover { background: rgba(255, 255, 255, 0.03); }
html[data-look="modern"] .overview-grid .overview-number { font-size: 30px; }
html[data-look="modern"] .overview-grid .overview-label { margin-top: 0; }
html[data-look="modern"] .overview-grid .oval-pill { white-space: nowrap; }
@media (max-width: 780px) {
  html[data-look="modern"] .overview-grid { flex-wrap: wrap; }
  html[data-look="modern"] .overview-grid .overview-card { flex: 1 1 50%; }
  html[data-look="modern"] .overview-grid .overview-card:nth-child(3) { border-left: 0 !important; }
  html[data-look="modern"] .overview-grid .overview-card:nth-child(n+3) { border-top: 1px solid var(--m-line) !important; }
}

html[data-look="modern"] #tab-overview .pending-assignment-banner {
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--m-r-sm);
  background: rgba(212, 160, 23, 0.08);
}
html[data-look="modern"] #tab-overview .pending-assignment-banner__header { gap: 10px; }
html[data-look="modern"] #tab-overview .pending-assignment-banner__icon { display: none; }
html[data-look="modern"] #tab-overview .pending-assignment-banner__title { font-size: 13.5px; color: var(--m-text); }
html[data-look="modern"] #tab-overview .pending-assignment-banner__toggle {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--m-r-sm);
  font-family: var(--m-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-look="modern"] #tab-overview .pending-assignment-banner__toggle + .pending-assignment-banner__toggle { margin-left: 8px; }
@media (max-width: 780px) {
  html[data-look="modern"] .overview-grid .overview-card {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }
  html[data-look="modern"] .overview-grid .oval-pill { white-space: normal; font-size: 10.5px; }
  /* The same four numbers again as a line of text under the bar. */
  html[data-look="modern"] #summaryStats { display: none !important; }
}

/* ── Listings: the view choice as small tabs ──────────────────────────────── */
html[data-look="modern"] #idxControls { gap: 6px; }
html[data-look="modern"] #idxControls .subpill {
  min-height: 32px;
  padding: 6px 12px;
  background: transparent;
  font-size: 11.5px;
}
html[data-look="modern"] #idxControls .subpill.active {
  background: rgba(212, 160, 23, 0.14);
  border-color: var(--brand-gold);
  color: var(--gold-bright);
}
html[data-look="modern"].idx-in-app .idx-sen-lockup::after { width: 130px; height: 29px; }

/* ── Communications sub-pages: tabs first, like the inbox ────────────────────
   Contacts, Templates, Scheduled Messages and Call Notes carried their tab
   row UNDER the search and buttons; the inbox, Pipeline and Marketing lead
   with theirs. The page is a flex column, so order moves the row without
   touching the markup the medieval look aligns on. */
html[data-look="modern"] body.has-sidebar .page:has(> .page-pill-row) { display: flex; flex-direction: column; }
html[data-look="modern"] body.has-sidebar .page > .page-pill-row { order: -2; padding-left: 0; padding-right: 0; }
html[data-look="modern"] body.has-sidebar .page > .page-pill-row { margin-bottom: 4px; }

/* Follow Up: the tabs lead here too, and Add Contact sits under them. */
html[data-look="modern"] #tab-contacts > .page-pill-row { order: -2; }

/* ── Contact page: the activity switch and checklist filter as tabs ──────── */
html[data-look="modern"] .log-bar { gap: 0 22px !important; align-items: stretch !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-look="modern"] .log-bar .log-bar-label {
  align-self: center;
  font-family: var(--m-display);
  font-weight: 800;
  color: #fff;
}
html[data-look="modern"] .log-bar .log-btn > .lk-label,
html[data-look="modern"] .checklist-filter-pill > .lk-label {
  min-height: 0;
  padding: 14px 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--m-soft);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
html[data-look="modern"] .log-bar .log-btn:hover > .lk-label,
html[data-look="modern"] .checklist-filter-pill:hover > .lk-label { color: #fff; }
html[data-look="modern"] .log-bar .log-btn.active > .lk-label,
html[data-look="modern"] .checklist-filter-pill.active > .lk-label {
  background: transparent;
  color: var(--gold-bright);
  border-bottom-color: var(--brand-gold);
}
html[data-look="modern"] .checklist-filter-pills { gap: 0 20px !important; }
html[data-look="modern"] .checklist-filter-pill { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ── Help & Support: the same side list as Settings used to have ──────────── */
html[data-look="modern"] .support-shell {
  background: rgba(10, 20, 32, 0.9);
  border-color: var(--m-line-2);
  border-radius: var(--m-r);
  backdrop-filter: none;
}
html[data-look="modern"] .support-rail {
  background: rgba(7, 15, 24, 0.7);
  border-right-color: var(--m-line);
  padding: 12px 0;
  gap: 0;
}
html[data-look="modern"] .support-rail-item,
html[data-look="modern"] .support-rail-item.is-active {
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 10px 16px;
}
html[data-look="modern"] .support-rail-item:hover { background: rgba(255, 255, 255, 0.04); }
html[data-look="modern"] .support-rail-item.is-active {
  background: rgba(212, 160, 23, 0.1);
  border-left-color: var(--brand-gold);
}
html[data-look="modern"] .support-rail-label {
  font-family: var(--m-display);
  font-weight: 700;
  color: var(--m-text);
}
html[data-look="modern"] .support-rail-item.is-active .support-rail-label { color: var(--gold-bright); }
/* Medieval lines the contact card up with the Settings pill in its rail and
   the Follow Up tabs up with the other pages' rows. Neither rail exists here. */
@media (min-width: 768px) {
  html[data-look="modern"] .profile-panel.profile-panel,
  html[data-look="modern"] .activity-panel.activity-panel { margin-top: 12px; }
}
html[data-look="modern"] #tab-contacts .section-header-row { min-height: 0; margin-bottom: 10px; }
html[data-look="modern"] body.contact-detail .page-pill-row .section-pill > .lk-label { font-size: 12px; }

/* The feedback button and window (feedback.css holds the layout). Business
   plain here: a navy button with a gold mark rather than the gold pill. */
html[data-look="modern"] .fb-launch {
  border: 1px solid var(--m-gold-line);
  border-radius: var(--m-r);
  background: var(--m-panel-2);
  color: var(--m-text);
  font-family: var(--m-display);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
html[data-look="modern"] .fb-launch svg { color: var(--brand-gold); }
html[data-look="modern"] .fb-launch:hover { background: var(--m-raise); filter: none; }
html[data-look="modern"] .fb-panel {
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r);
  background: var(--m-panel);
  color: var(--m-text);
  font-family: var(--m-display);
}
html[data-look="modern"] .fb-title {
  font-family: var(--m-display);
  font-weight: 700;
  color: var(--m-text);
}
html[data-look="modern"] .fb-close { color: var(--m-soft); }
html[data-look="modern"] .fb-kind,
html[data-look="modern"] .fb-btn {
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  color: var(--m-text);
}
html[data-look="modern"] .fb-kind[aria-checked="true"],
html[data-look="modern"] .fb-btn--send {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: #0a1420;
}
html[data-look="modern"] .fb-btn--send:hover { background: var(--gold-bright); }
html[data-look="modern"] .fb-btn--talk[aria-pressed="true"] { background: #b3261e; border-color: #b3261e; color: #fff; }
html[data-look="modern"] .fb-hint,
html[data-look="modern"] .fb-status { color: var(--m-soft); }
html[data-look="modern"] .fb-note,
html[data-look="modern"] .fb-done__ref { color: var(--m-dim); }
html[data-look="modern"] .fb-box {
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-bg);
  color: var(--m-text);
}

/* Modern has no castle to keep clear, so the action sits at the end of the tab row. */
html[data-look="modern"] .pipeline-switch .pipeline-add { margin-left: auto; }

/* Tablets and small laptops (769-1300px). The rail here is a full-height
   panel from the top, where the medieval rail starts below the header, and
   the header was laid out for the medieval one: the agent line, the briefing
   summary and the greeting sat underneath the rail. The header clears it the
   way the wide layout already does. */
@media (min-width: 769px) and (max-width: 1300px) {
  html[data-look="modern"] body.has-sidebar .site-header { padding-left: 300px; }
}
/* In that range the four stats in one bar had no room for number and label
   side by side, and each label ran into the next number. */
@media (min-width: 781px) and (max-width: 1300px) {
  html[data-look="modern"] .overview-grid .overview-card { flex-direction: column; gap: 4px; padding: 12px 16px; }
  html[data-look="modern"] .overview-grid .oval-pill { white-space: normal; }
}

/* Getting started checklist (7A). */
html[data-look="modern"] .getting-started {
  background: var(--m-panel);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r);
}
html[data-look="modern"] .getting-started__title { color: #fff; font-family: var(--m-display); letter-spacing: 0.02em; }
html[data-look="modern"] a.getting-started__label { color: var(--gold-bright); }