/* Carely (Sillage aftercare) panel — the "soft" look.

   Soft-form glass: a frosted sidebar and floating top bar over a warm, softly
   lit background; large rounded cards that sit slightly raised; pill-shaped
   bars; one dark card for the money. The palette is still the clinic's own
   (sillage.no: cream, deep brown, terracotta), cooled a little toward warm
   graphite so the figures carry the colour, not the furniture.

   The same rules as panel.css: no remote fonts or images, nothing inline.
   The classic look lives on in panel.css; Settings → Appearance switches. */

:root {
  --bg:          #efe9e3;
  --ink:         #241d1a;
  --ink-soft:    #6f635b;
  --ink-faint:   #a59a91;
  --line:        rgba(120, 95, 78, .14);
  --line-strong: rgba(120, 95, 78, .24);

  --glass:        rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge:   rgba(255, 255, 255, .85);
  --sunk:         rgba(120, 95, 78, .06);

  --graphite:    #4a3f3a;   /* buttons, active states — the refs' slate, warmed */
  --graphite-2:  #5d5049;
  --night:       #2b221e;
  --brand:       #5a260a;
  --accent:      #a04a22;   /* terracotta */
  --accent-soft: #f1dccd;
  --sand:        #e7d6c5;
  --sand-soft:   #f4ebe2;

  --ok:        #3f7a5b;  --ok-bg:     #e3f0e7;
  --warn:      #946318;  --warn-bg:   #fbefd9;
  --danger:    #a3392a;  --danger-bg: #f9e3de;
  --info:      #476181;  --info-bg:   #e6edf5;
  --plum:      #6b4a86;  --plum-bg:   #efe6f6;

  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --raise: 0 1px 0 rgba(255, 255, 255, .9) inset,
           0 22px 44px -24px rgba(74, 46, 28, .28),
           0 3px 10px -4px rgba(74, 46, 28, .08);
  --raise-sm: 0 1px 0 rgba(255, 255, 255, .9) inset,
              0 10px 22px -14px rgba(74, 46, 28, .30);
  --press: inset 0 2px 6px rgba(74, 46, 28, .10);

  --sans: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", -apple-system,
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.soft {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* the soft light behind everything */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.glow-a { width: 620px; height: 620px; left: -160px; top: -180px; background: #f6d9c4; }
.glow-b { width: 560px; height: 560px; right: -140px; top: 18%; background: #e9d7e2; opacity: .55; }
.glow-c { width: 700px; height: 520px; left: 30%; bottom: -260px; background: #f2e2cf; }

/* ---------- type ---------- */

h1 {
  font-size: 2.1rem; line-height: 1.12; font-weight: 750;
  letter-spacing: -.035em; margin: 0 0 .35rem; color: var(--ink);
}
h2 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; margin: 2rem 0 .7rem; }
h3 { font-size: .98rem; font-weight: 700; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

.muted { color: var(--ink-soft); }
.small { font-size: .85em; }
.right { text-align: right; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .92em; }
.eyebrow {
  margin: 0 0 .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- the shell ---------- */

.shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 22px; padding: 22px; min-height: 100vh;
}

.sidebar {
  position: sticky; top: 22px; align-self: start;
  height: calc(100vh - 44px);
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px 16px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 34px;
  box-shadow: var(--raise);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 44px; height: 44px; flex: none; border-radius: 15px;
  display: grid; place-items: center;
  font: 600 1.3rem/1 "Iowan Old Style", "Palatino Linotype", Georgia, serif; color: #fff7f0;
  /* Carely: a warm terracotta-to-cocoa mark, a shade lighter than the brand text. */
  background: linear-gradient(150deg, #d08a62, var(--accent) 48%, #4a2212);
  box-shadow: 0 10px 20px -10px rgba(90, 38, 10, .7), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.brand-text strong { display: block; font-size: 1.02rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.brand-text small { display: block; font-size: .7rem; color: var(--ink-faint); letter-spacing: .04em; line-height: 1.3; }
.brand:hover { color: inherit; }

.sidenav { display: flex; flex-direction: column; gap: 4px; }
.sidenav a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: var(--r-md);
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.sidenav a .ico { width: 21px; height: 21px; opacity: .85; }
.sidenav a:hover { background: rgba(255, 255, 255, .55); color: var(--ink); }
.sidenav a.active {
  background: #fff; color: var(--ink);
  box-shadow: var(--raise-sm);
}
.sidenav a.active .ico { color: var(--accent); opacity: 1; }
/* The paid-module lock: pushed to the row's right edge, drawn at a size that
   reads as a state marker. Opacity stays at .8 or above so the glyph keeps
   the 3:1 contrast a non-text indicator needs against the sidebar glass. */
.sidenav a .nav-lock { width: 14px; height: 14px; flex: none; margin-left: auto; opacity: .8; }
.sidenav a.active .nav-lock { color: var(--ink-soft); opacity: .8; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.me {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .6);
  border: 1px solid var(--glass-edge);
}
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--accent), #6a3a22);
}
.me-text { min-width: 0; }
.me-text strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { display: block; font-size: .72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-logout {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--graphite); color: #fff; font: 600 .88rem var(--sans);
  box-shadow: 0 12px 22px -14px rgba(43, 34, 30, .9);
}
.side-logout:hover { background: var(--night); }
.side-logout .ico { width: 18px; height: 18px; }

.workspace { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.topbar {
  position: sticky; top: 22px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 24px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: var(--raise-sm);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.topbar-date { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: .92rem; color: var(--ink); }
.date-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.lang {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge);
  color: var(--ink-soft);
}
.lang .ico { width: 17px; height: 17px; }
.lang select { border: 0; background: transparent; padding: 6px 4px; font: 600 .85rem var(--sans); color: var(--ink); width: auto; box-shadow: none; }
.lang select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

main { padding: 6px 4px 48px; max-width: 1440px; width: 100%; }
main.centered {
  position: relative; z-index: 1; max-width: none;
  display: grid; place-items: center; min-height: 100vh; padding: 1rem;
}

/* ---------- the bot switch ---------- */

.botswitch { display: flex; align-items: center; gap: 8px; }
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: 999px; cursor: pointer;
  font: 600 .86rem var(--sans); border: 1px solid transparent;
  transition: background .18s, box-shadow .18s;
}
.switch-track {
  position: relative; width: 44px; height: 26px; border-radius: 999px; flex: none;
  background: #d5ccc4; transition: background .2s; box-shadow: var(--press);
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); transition: left .2s;
}
.switch-on  { background: var(--ok-bg); color: var(--ok); border-color: rgba(63, 122, 91, .18); }
.switch-on .switch-track { background: var(--ok); }
.switch-on .switch-thumb { left: 21px; }
.switch-off { background: var(--danger-bg); color: var(--danger); border-color: rgba(163, 57, 42, .18); }
.switch-off .switch-track { background: var(--danger); }
.switch:hover { box-shadow: var(--raise-sm); }
.switch-note { font-size: .74rem; color: var(--ink-soft); max-width: 10rem; line-height: 1.2; }

/* ---------- cards ---------- */

.card {
  position: relative;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  box-shadow: var(--raise);
  margin-bottom: 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.card > h2:first-child { margin-top: 0; }
.card.narrow { max-width: 520px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head > div { flex: 1 1 260px; }
.card-head h2 { margin: 0 0 .2rem; }
.card-head p { margin: 0; }

/* ---------- buttons and fields ---------- */

button, .btn {
  font: 600 .88rem var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .8); color: var(--ink);
  text-decoration: none; box-shadow: var(--raise-sm);
  transition: background .18s, color .18s, box-shadow .18s, transform .08s;
}
button:hover, .btn:hover { background: #fff; color: var(--ink); }
button:active, .btn:active { transform: translateY(1px); box-shadow: var(--press); }
button.primary, .btn-dark { background: var(--graphite); border-color: var(--graphite); color: #fff; box-shadow: 0 14px 26px -16px rgba(43, 34, 30, .95); }
button.primary:hover, .btn-dark:hover { background: var(--night); border-color: var(--night); color: #fff; }
button.ghost, .btn-ghost { background: transparent; box-shadow: none; border-color: var(--line-strong); }
button.ghost:hover, .btn-ghost:hover { background: rgba(255, 255, 255, .7); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.linkish {
  border: 0; background: none; box-shadow: none; padding: 4px 2px; border-radius: 6px;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; font-weight: 550;
}
button.linkish:hover { background: none; color: var(--brand); }
button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn .ico, button .ico { width: 18px; height: 18px; }
.btn-light { background: #fff7f0; color: var(--night); border-color: transparent; }
.btn-light:hover { background: #fff; color: var(--night); }
.btn-small { padding: 7px 14px; font-size: .8rem; }

label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin: 1rem 0 .4rem; }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=date],
input[type=number], input[type=time], select, textarea {
  width: 100%; padding: .7rem .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .78); color: var(--ink); font: inherit;
  box-shadow: inset 0 1px 2px rgba(74, 46, 28, .06);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { background: #fff; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input[disabled] { background: var(--sunk); color: var(--ink-soft); cursor: not-allowed; }
textarea { line-height: 1.55; resize: vertical; }

.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin-top: 1rem; color: var(--ink); }
.checkbox input { width: auto; }

/* ---------- page heads, crumbs ---------- */

main > h1 + .muted { margin-top: 0; max-width: 70ch; }
.crumbs { margin: 0 0 .7rem; font-size: .85rem; }
.crumbs a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-soft);
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-edge);
}
.crumbs a:hover { color: var(--ink); background: #fff; }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 1.3rem; }
.page-head > div:first-child { flex: 1 1 320px; }
.page-head h1 { margin-bottom: .2rem; }
.page-head-action { display: flex; align-items: center; gap: .7rem; }

/* ---------- chips, tags, statuses ---------- */

.filters, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge);
  color: var(--ink-soft); text-decoration: none; transition: all .15s;
}
.chip:hover { background: #fff; color: var(--ink); box-shadow: var(--raise-sm); }
.chip-active, .chip-active:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; box-shadow: 0 10px 20px -12px rgba(43, 34, 30, .9); }
.chip-count {
  font-variant-numeric: tabular-nums; font-size: .74rem; padding: 1px 7px; border-radius: 999px;
  background: rgba(120, 95, 78, .1);
}
.chip-active .chip-count { background: rgba(255, 255, 255, .18); }

.tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 650; letter-spacing: .01em; vertical-align: middle;
  background: rgba(120, 95, 78, .08); color: var(--ink-soft); border: 0;
}
.tag-on, .tag-approved, .tag-sent { background: var(--ok-bg); color: var(--ok); }
.tag-warn, .tag-pending_approval { background: var(--warn-bg); color: var(--warn); }
.tag-clinical { background: var(--info-bg); color: var(--info); }
.tag-suppressed, .tag-failed, .tag-danger, .tag-urgent { background: var(--danger-bg); color: var(--danger); }
.tag-new { background: var(--plum-bg); color: var(--plum); }
.tag-off { background: rgba(120, 95, 78, .08); color: var(--ink-soft); }

.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 650; white-space: nowrap;
  background: rgba(120, 95, 78, .08); color: var(--ink-soft);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.status-planned { background: var(--info-bg); color: var(--info); }
.status-sent    { background: var(--ok-bg); color: var(--ok); }
.status-replied { background: var(--plum-bg); color: var(--plum); }
.status-failed  { background: var(--danger-bg); color: var(--danger); }
.status-reason  { display: block; margin-top: .3rem; color: var(--warn); line-height: 1.35; }

.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.pill { background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; color: var(--ink-soft); }

/* ---------- alerts ---------- */

.alert {
  position: relative; padding: 16px 20px 16px 52px; margin: 1rem 0;
  border-radius: var(--r-lg); border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .7); box-shadow: var(--raise-sm);
}
.alert::before {
  content: ""; position: absolute; left: 20px; top: 19px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--info); box-shadow: 0 0 0 5px var(--info-bg);
}
.alert p { margin: .3rem 0 0; }
.alert-info  { background: linear-gradient(90deg, var(--info-bg), rgba(255, 255, 255, .7) 60%); }
.alert-warn  { background: linear-gradient(90deg, var(--warn-bg), rgba(255, 255, 255, .7) 60%); }
.alert-warn::before { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-bg); }
.alert-error { background: linear-gradient(90deg, var(--danger-bg), rgba(255, 255, 255, .7) 60%); }
.alert-error::before { background: var(--danger); box-shadow: 0 0 0 5px var(--danger-bg); }

/* ---------- tables ---------- */

.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: 26px; overflow: hidden; box-shadow: var(--raise);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.table th, .table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th {
  background: rgba(255, 255, 255, .5); font-size: .68rem; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .14em; padding-top: 16px; padding-bottom: 12px;
}
.table tbody th { font-weight: 650; color: var(--ink-soft); width: 32%; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover td, .table tbody tr:hover th { background: rgba(255, 255, 255, .6); }
.table tfoot th { background: rgba(255, 255, 255, .55); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.table form { display: inline; }
.table.log td { vertical-align: top; }
.row-muted td { opacity: .55; }
.row-warn td, .row-warn th { background: rgba(251, 239, 217, .7) !important; }
.log-recipient { font-weight: 650; text-decoration: none; color: var(--ink); }
.log-recipient:hover { color: var(--accent); }

/* ---------- toolbars ---------- */

.toolbar { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; justify-content: space-between; margin: 1rem 0 1.2rem; }
.search, .searchbar { display: flex; gap: 8px; align-items: center; }
.searchbar { margin: 1rem 0 1.2rem; }
.search input, .searchbar input { width: 320px; max-width: 100%; border-radius: 999px; padding-left: 1.2rem; }
.searchbar select { width: auto; border-radius: 999px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin: 1.2rem 0; }
.pager a { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); text-decoration: none; box-shadow: var(--raise-sm); }

.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 1rem; }
.bulk form { display: inline; }
.bulk button { padding: 8px 15px; font-size: .82rem; }

/* ---------- facts, timeline, checks ---------- */

.kv, .facts { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 0; }
.kv dt, .facts dt { color: var(--ink-faint); font-size: .8rem; font-weight: 650; }
.kv dd, .facts dd { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0 .65rem 1.7rem; border-left: 2px solid var(--line-strong); margin-left: .45rem;
}
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: .95rem; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong);
}
.timeline li.tl-done::before { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.timeline li.tl-next::before { background: var(--accent-soft); border-color: var(--accent); }
.tl-label { color: var(--ink-soft); }
.tl-value { text-align: right; }
.history .tl-label { color: var(--ink); }
.history-detail { display: block; margin-top: .15rem; }
.history .tl-value { white-space: nowrap; color: var(--ink-soft); }
.history .tl-value strong { color: var(--brand); font-variant-numeric: tabular-nums; }

.checks { list-style: none; margin: .5rem 0 0; padding: 0; }
.check { display: flex; gap: .65rem; padding: .35rem 0; align-items: baseline; }
.check-mark { flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 800; }
.check-ok .check-mark { background: var(--ok-bg); color: var(--ok); }
.check-no .check-mark { background: var(--danger-bg); color: var(--danger); }
.check-no { font-weight: 600; }
.check-na { color: var(--ink-soft); }
.check-na .check-mark { background: var(--sunk); color: var(--ink-faint); }

/* ---------- texts and their e-mails ---------- */

.template-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.template-head h2, .template-head h3 { margin: 0; font-size: 1.05rem; }
.template-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.template-actions form { display: inline; }
.template-grid, .detail-grid {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 580px);
}
.template-edit > button, .template form > button { margin-top: 1rem; }
.template-edit textarea { font-family: var(--mono); font-size: .85rem; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-narrow { flex: 0 0 160px; }
.field-wide { flex: 1 1 340px; }
.preview, .kv dd.preview {
  display: block; white-space: pre-wrap; background: var(--sunk); margin: .3rem 0 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: .65rem .8rem;
}
.preview-warning { display: block; margin-top: .5rem; font-size: .85em; color: var(--danger); font-weight: 600; }
.preview-warning[hidden] { display: none; }
.has-unknown-placeholder textarea[name=body] { border-color: var(--danger); }

.mail-preview > p { margin: 0 0 .45rem; }
.mail-client {
  border-radius: var(--r-lg); overflow: hidden; background: #f6f2ee;
  border: 1px solid var(--glass-edge); box-shadow: var(--raise);
}
.mail-head { background: rgba(255, 255, 255, .85); border-bottom: 1px solid var(--line); padding: .7rem 1rem; font-size: .85rem; line-height: 1.55; }
.mail-head .muted { display: inline-block; min-width: 3.4rem; }
.mail-frame { position: relative; height: 640px; }
.mail-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f6f2ee; }
.mail-frame iframe.is-loading { visibility: hidden; }

.format-help { margin: 0 0 1rem; font-size: .88rem; }
.format-help > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.format-help[open] > summary { margin-bottom: .6rem; }
.format-table { max-width: 760px; }
.format-table td { padding: .45rem .9rem; }
.format-table td.mono { white-space: nowrap; width: 9rem; }

details.scenario > summary { cursor: pointer; font-weight: 650; }
details.scenario[open] > summary { margin-bottom: .6rem; }
.not-treatment { margin-top: 2rem; text-align: right; }

.winback { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-strong); }
.winback-head h2 { margin: 0 0 .25rem; font-size: 1.45rem; font-weight: 750; letter-spacing: -.025em; }
.winback-head p { margin: 0; max-width: 72ch; }
.winback-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
.winback-actions form { display: inline; }

.queue-line {
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: baseline;
  margin: .8rem 0 1.3rem; padding: 16px 22px; border-radius: var(--r-lg);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--raise-sm);
  font-size: .92rem; color: var(--ink-soft);
}
.queue-line strong { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---------- inbox ---------- */

.reply-urgent { box-shadow: var(--raise), inset 4px 0 0 var(--danger); }
.reply-body { white-space: pre-wrap; background: var(--sunk); border-radius: var(--r-md); padding: .85rem 1rem; margin: .6rem 0 1rem; }

/* ---------- settings ---------- */

.settings-block h2 { margin-top: 0; }
.settings-row { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-end; }
.settings-row .field-narrow { flex: 0 0 180px; }
.settings-help { flex: 1 1 320px; }
.settings-help p { margin: 0 0 .35rem; }
.settings-facts { margin-top: 1.1rem; }
.twofa .settings-help p { margin: 0 0 .45rem; }
.twofa-disable { margin-top: .6rem; }
.twofa-password { max-width: 280px; }
.twofa-disable .search input { width: 170px; }
.twofa-setup { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.twofa-step h2 { margin-top: 0; }
.twofa-qr { display: block; width: 220px; height: 220px; margin: .6rem 0; background: #fff; border-radius: var(--r-md); padding: 8px; box-shadow: var(--raise-sm); }
.twofa-key { font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; margin: .2rem 0 .4rem; color: var(--brand); }
.twofa-cancel { margin-top: .7rem; }

.theme-choices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: .8rem; }
.theme-choices form { display: contents; }
.theme-choice {
  display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto; gap: 2px 14px;
  align-items: center; justify-content: start; text-align: left;
  padding: 12px 16px 12px 12px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .7);
}
.theme-choice.is-current { background: #fff; box-shadow: var(--raise), 0 0 0 2px var(--graphite); }
.theme-swatch { grid-row: 1 / 3; width: 74px; height: 52px; border-radius: 12px; border: 1px solid var(--line); }
.theme-choice-classic .theme-swatch { background: linear-gradient(180deg, #fff 0 30%, #fbf7f3 30% 100%), #f7f1eb; box-shadow: inset 0 3px 0 #5a260a; }
.theme-choice-soft .theme-swatch { background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0 28%, transparent 28%), radial-gradient(circle at 70% 40%, #f6d9c4, #e9d7e2 60%, #efe9e3); }
.theme-name { font-weight: 700; color: var(--ink); }
.theme-desc { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }

/* ---------- what the bot brought (pages behind the chart) ---------- */

.impact-sum { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.impact-sum-value { font-size: 2rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- sign in ---------- */

.soft-guest .card.login {
  width: min(420px, 100%); padding: 38px 36px 32px;
  background: rgba(255, 255, 255, .72); border-radius: 34px;
}
.login h1 { font-size: 1.7rem; margin-bottom: .1rem; }
.login .muted { margin-top: .2rem; }
.login button.primary { width: 100%; margin-top: 1.4rem; padding: 13px 18px; }
.lang-login { margin-top: 1.3rem; display: inline-flex; padding: 0; background: none; border: 0; }
.lang-login select { width: auto; border-radius: 999px; padding: .45rem .9rem; }

/* ======================================================================
   The overview (soft/dashboard.html)
   ====================================================================== */

.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 4px 0 20px; }
.display { font-size: 2.7rem; line-height: 1.04; font-weight: 780; letter-spacing: -.045em; margin: 0 0 .4rem; }
.lede { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.intro-actions { display: flex; gap: 10px; }

.notice {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; margin: 0 0 14px;
  border-radius: var(--r-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--raise-sm);
}
.notice > div { flex: 1; }
.notice p { margin: .15rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.notice-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.notice-error .notice-icon { background: var(--danger-bg); color: var(--danger); }
.notice-info .notice-icon { background: var(--plum-bg); color: var(--plum); }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.bento > .card { margin: 0; }
.hero { grid-column: span 8; }
.quick { grid-column: span 4; }
.stat { grid-column: span 3; }
.chart-card { grid-column: span 8; }
.dark-card { grid-column: span 4; }
.feed { grid-column: span 6; }

/* hero: what the bot is doing */
.hero { overflow: hidden; padding: 30px 32px; min-height: 300px; display: flex; }
.hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: min(580px, 64%); }
.hero-title { font-size: 2rem; line-height: 1.1; font-weight: 760; letter-spacing: -.035em; margin: 14px 0 10px; }
.hero-text { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.hero-note { margin: .6rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.hero-foot { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; width: 100%; }
.hero-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; color: var(--ink-soft); }
.hero-hint .ico { width: 17px; height: 17px; color: var(--accent); }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px;
  font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 255, 255, .8); color: var(--ink-soft); box-shadow: var(--raise-sm);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.status-pill-on .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.status-pill-off .dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }
.status-pill-idle .dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }

.meter-block {
  display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 14px;
  padding: 12px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .7); min-width: 240px;
}
.meter-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.meter-value { justify-self: end; font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.meter-value small { font-weight: 500; color: var(--ink-faint); font-size: .8rem; }
.meter { grid-column: 1 / -1; width: 100%; height: 8px; margin-top: 6px; display: block; }
.meter-track { fill: rgba(120, 95, 78, .12); }
.meter-fill { fill: var(--graphite); }

.hero-art { position: absolute; right: -60px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); pointer-events: none; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(160, 74, 34, .14); }
.ring-2 { inset: 46px; border-color: rgba(160, 74, 34, .18); }
.ring-3 { inset: 92px; border-color: rgba(160, 74, 34, .22); }
.orb {
  position: absolute; inset: 128px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7f0, #e9b99b 45%, #a04a22 100%);
  box-shadow: 0 30px 50px -20px rgba(160, 74, 34, .55), inset -8px -10px 24px rgba(90, 38, 10, .35);
}
.hero-on .orb { background: radial-gradient(circle at 35% 30%, #f3fbf6, #a9d3b9 45%, #3f7a5b 100%); box-shadow: 0 30px 50px -20px rgba(63, 122, 91, .5), inset -8px -10px 24px rgba(30, 70, 50, .35); }
.hero-on .ring { border-color: rgba(63, 122, 91, .18); }
.hero-off .orb { background: radial-gradient(circle at 35% 30%, #fff5f2, #e9b2a6 45%, #a3392a 100%); }
.hero-off .ring { border-color: rgba(163, 57, 42, .16); }

/* quick ways in */
.quick { display: flex; flex-direction: column; padding: 24px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
.quick-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 96px; padding: 14px 10px; border-radius: var(--r-lg);
  background: #fff; color: var(--ink); text-decoration: none; text-align: center;
  font-size: .8rem; font-weight: 650; box-shadow: var(--raise-sm);
  transition: transform .18s, box-shadow .18s, color .18s;
}
.quick-tile .ico { width: 24px; height: 24px; color: var(--graphite); }
.quick-tile:hover { transform: translateY(-2px); box-shadow: var(--raise); color: var(--ink); }
.quick-tile:hover .ico { color: var(--accent); }
.badge {
  position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 999px; font-style: normal;
  font-size: .72rem; font-weight: 750; color: #fff; background: var(--accent);
}
.badge-soft { background: var(--sand); color: var(--brand); }
.is-hot { box-shadow: var(--raise-sm), 0 0 0 2px rgba(160, 74, 34, .35); }
.quick-foot {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--info-bg), rgba(255, 255, 255, .6));
}
.quick-foot-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.quick-foot-value { font-size: 1.35rem; font-weight: 760; font-variant-numeric: tabular-nums; }

/* counts */
.stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; }
a.stat:hover { transform: translateY(-3px); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 28px 50px -24px rgba(74, 46, 28, .35); }
.stat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chip-icon { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--sand-soft); color: var(--brand); box-shadow: inset 0 1px 0 #fff; }
.chip-icon .ico { width: 22px; height: 22px; }
.chip-icon-b { background: var(--info-bg); color: var(--info); }
.chip-icon-c { background: var(--ok-bg); color: var(--ok); }
.chip-icon-d { background: var(--plum-bg); color: var(--plum); }
.stat-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 95, 78, .08); color: var(--ink-soft); }
.stat-go .ico { width: 16px; height: 16px; }
a.stat:hover .stat-go { background: var(--graphite); color: #fff; }
.stat-value { font-size: 2.15rem; line-height: 1.05; font-weight: 760; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

/* the chart */
.chart-card { padding: 26px 28px 20px; }
.seg {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; text-decoration: none;
  background: rgba(120, 95, 78, .08); box-shadow: var(--press); white-space: nowrap;
}
.seg span { padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 650; color: var(--ink-soft); }
.seg .seg-on { background: #fff; color: var(--ink); box-shadow: var(--raise-sm); }
.seg:hover span:last-child { color: var(--accent); }
.pillchart { display: block; width: 100%; height: auto; }
.pill-track { fill: rgba(120, 95, 78, .085); transition: fill .2s; }
.pill-bar { fill: #c4b0a2; transition: fill .2s; }
.pill-peak { fill: var(--graphite); }
.pill-month { font: 700 12px var(--sans); fill: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; }
.pill-amount { font: 600 11px var(--sans); fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pill-link { cursor: pointer; }
.pill-link:hover .pill-track { fill: rgba(160, 74, 34, .12); }
.pill-link:hover .pill-bar { fill: var(--accent); }
.pill-link:hover .pill-month { fill: var(--accent); }
.pill-link:focus-visible { outline: none; }
.pill-link:focus-visible .pill-track { stroke: var(--accent); stroke-width: 2; }
.chart-empty { margin: .4rem 0 0; }

/* the money, dark */
.dark-card {
  overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  color: #f6ece4; border: 0;
  background: radial-gradient(120% 90% at 100% 0%, #6b3a24 0%, transparent 55%),
              linear-gradient(160deg, #3a2c26, #241b18 70%);
  box-shadow: 0 30px 60px -28px rgba(36, 27, 24, .85), 0 1px 0 rgba(255, 255, 255, .08) inset;
}
.dark-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.dark-chip { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #f6ece4; }
.dark-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 236, 228, .6); text-align: right; max-width: 60%; }
.dark-label { margin: 0; font-size: .85rem; color: rgba(246, 236, 228, .7); }
.dark-value { margin: .1rem 0 1rem; font-size: 2.4rem; line-height: 1.05; font-weight: 760; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: #fff; }
.dark-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 20px; }
.dark-stats > div { padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .07); }
.dark-num { display: block; font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; color: #fff; }
.dark-cap { display: block; font-size: .72rem; color: rgba(246, 236, 228, .62); line-height: 1.3; }
.dark-card .btn { margin-top: auto; position: relative; z-index: 1; }
.dark-art {
  position: absolute; right: -70px; bottom: -90px; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 220, 196, .35), rgba(160, 74, 34, .25) 50%, transparent 70%);
  filter: blur(4px); pointer-events: none;
}

/* activity lists */
.feed { padding: 24px 26px 14px; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.feed-list li:last-child { border-bottom: 0; }
.feed-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sand-soft); color: var(--brand); }
.feed-icon .ico { width: 19px; height: 19px; }
.feed-icon-b { background: var(--info-bg); color: var(--info); }
.feed-icon-ok { background: var(--ok-bg); color: var(--ok); }
.feed-warn .feed-icon { background: var(--warn-bg); color: var(--warn); }
.feed-text { flex: 1; min-width: 0; }
.feed-text strong { display: block; font-size: .92rem; font-weight: 650; }
.feed-text small { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.feed-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 650; background: rgba(120, 95, 78, .08); color: var(--ink-soft); }

/* ---------- smaller screens ---------- */

@media (max-width: 1280px) {
  .hero, .chart-card { grid-column: span 12; }
  .quick, .dark-card { grid-column: span 6; }
  .stat { grid-column: span 6; }
}
@media (max-width: 1100px) {
  .template-grid, .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  /* One column: the header card takes only its own height, the page the
     rest — otherwise the grid stretches the two rows to fill the screen
     and a short page shows a gap under the header. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; padding: 12px; gap: 12px; }
  .sidebar, .workspace, .sidenav { min-width: 0; max-width: 100%; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px; border-radius: 26px; gap: 12px; }
  /* The menu wraps onto as many rows as it needs instead of scrolling sideways:
     the last item (the paid module, or the Owner tab) stays visible on a phone. */
  .sidenav { flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 6px; order: 3; width: 100%; }
  .sidenav a { padding: 9px 12px; white-space: nowrap; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; }
  .me { display: none; }
  .side-logout { width: auto; padding: 9px 14px; }
  .topbar { top: 8px; border-radius: 26px; flex-wrap: wrap; padding: 10px 14px; }
  .quick, .dark-card, .feed { grid-column: span 12; }
  .hero-art { opacity: .35; }
  .display { font-size: 2.1rem; }
}
@media (max-width: 600px) {
  .sidenav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
  .sidenav a { white-space: normal; }
  .stat { grid-column: span 6; padding: 18px; }
  .stat-value { font-size: 1.7rem; }
  .chip-icon { width: 40px; height: 40px; border-radius: 14px; }
  .card { padding: 20px; border-radius: 24px; }
  .kv, .facts { grid-template-columns: 1fr; }
  .search input, .searchbar input { width: 100%; }
}

/* ---------- the owner's console (D31) ---------- */

.owner-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.owner-bar .brand { margin-right: auto; }
.owner-main { max-width: 1100px; margin: 0 auto; width: 100%; }
.owner-section { margin: 1.6rem 0; scroll-margin-top: 100px; }
.owner-section-head h2 { margin-bottom: .2rem; }
.owner-section-head p { margin-top: 0; }

/* The locked paid-module page: a calm card with the lock, not a bare line. */
.module-locked { max-width: 560px; display: grid; gap: 12px; justify-items: start; }
.module-locked p { margin: 0; }
.module-locked-ico { width: 28px; height: 28px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.owner-module-switch { margin: 0; }
.owner-base-line { margin: .7rem 0 0; }
.owner-account { padding-top: 16px; padding-bottom: 16px; }
.owner-account.is-off { opacity: .7; }
.owner-account-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owner-account-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.owner-account-who .mono { overflow-wrap: anywhere; }
.owner-account-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.owner-manage { margin-top: 12px; }
.owner-manage > summary { cursor: pointer; font-weight: 600; }
.owner-inline-row { display: flex; gap: 8px; flex-wrap: wrap; }
.owner-inline-row input { flex: 1 1 220px; }
.owner-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.owner-actions form { display: inline; }
.owner-list { list-style: none; margin: 0; padding: 0; }
.owner-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.owner-list li:last-child { border-bottom: 0; }
.owner-list li form { margin-left: auto; }
.owner-login { max-width: 420px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 22px; }

body.owner-page { min-height: 100vh; }
.owner-bar {
  position: sticky; top: 14px; z-index: 5; margin: 14px auto 0; max-width: 1100px; width: calc(100% - 28px);
  padding: 10px 12px 10px 14px; background: var(--glass); border: 1px solid var(--glass-edge);
  border-radius: 999px; box-shadow: var(--raise-sm);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.owner-bar .brand { padding: 0; }
.owner-bar .brand-mark { width: 38px; height: 38px; border-radius: 13px; font-size: 1.05rem; }
.owner-main { position: relative; z-index: 1; padding: 26px 14px 48px; }

/* ---------- phones ---------- */

@media (max-width: 720px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 11px 12px; }
  .table tbody th { width: auto; }
  .chart-card { overflow-x: auto; }
  .pillchart { min-width: 520px; }
  .page-intro { align-items: flex-start; }
  .intro-actions { width: 100%; }
  .intro-actions .btn { flex: 1; }
  .hero { min-height: 0; padding: 22px; }
  .hero-art { display: none; }
  .hero-title { font-size: 1.5rem; }
  .hero-body { max-width: none; }
  .meter-block { min-width: 0; width: 100%; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .topbar-date { display: none; }
  .switch-note { display: none; }
  .brand-text small { display: none; }
  .mail-frame { height: 520px; }
  .field-narrow, .settings-row .field-narrow { flex: 1 1 100%; }
  .owner-bar { border-radius: 24px; top: 8px; width: calc(100% - 16px); margin-top: 8px; }
  .owner-main { padding: 18px 8px 40px; }
  .dark-value { font-size: 2rem; }
  .display { font-size: 1.85rem; }
  h1 { font-size: 1.65rem; }
}

/* never wider than the screen */
html, body.soft { max-width: 100%; overflow-x: clip; }

/* ---------- the Owner tab (D32) ---------- */
.owner-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 1.2rem; }
.owner-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; text-decoration: none; }
.owner-nav a:hover { border-color: var(--accent); }
.owner-timma input[type="text"] { max-width: 320px; }
.owner-mail h3 { margin: 1.2rem 0 .4rem; }
.owner-mail-actions { margin-top: 1rem; }
.owner-mail-result { margin-top: .6rem; }
.owner-manage .owner-inline + .owner-inline { margin-top: 10px; }
.owner-delete { margin-left: auto; }
.nav-owner { font-weight: 600; }

/* ---------- conversations (D34) ---------- */
.threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.thread-row { padding: 0; }
.thread-row.is-open { border-color: var(--accent); }
.thread-link { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; text-decoration: none; color: inherit; }
.thread-link:hover { text-decoration: none; }
.thread-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.thread-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thread-head .mono { overflow-wrap: anywhere; }
.thread-snippet { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thread-when { flex: none; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 12px; margin: 0 0 1.2rem; }
.bubble { max-width: min(680px, 92%); padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface, #fff); }
.bubble-bot { align-self: flex-start; background: var(--surface-2); border-style: dashed; max-width: min(680px, 100%); }
.bubble-client { align-self: flex-start; }
.bubble-clinic { align-self: flex-end; background: var(--accent-soft, #f3e9df); border-color: transparent; }
.bubble-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.bubble-subject { margin: 0 0 6px; font-weight: 600; }
.bubble-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-box textarea { width: 100%; }
.reply-handled { margin-top: 10px; }
@media (max-width: 720px) {
  .thread-when { display: none; }
  .bubble { max-width: 100%; }
}

.attachments { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }

/* ---------- reports (D36) ---------- */
.report { margin-bottom: 1.2rem; }
.report .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.report h3 { margin: 1.4rem 0 .4rem; }
.report .stats { display: flex; gap: 12px; flex-wrap: wrap; margin: .6rem 0 1rem; }
.report .stat { flex: 1 1 160px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.report .stat-value { font-size: 1.35rem; font-weight: 700; }
.report .stat-label { font-size: .82rem; color: var(--ink-soft, #6b6259); }
.heat td { font-variant-numeric: tabular-nums; }
/* A heat cell keeps its own shade under the pointer: the row highlight would wipe the picture. */
.heat tbody tr:hover td, .heat tbody tr:hover th { background: transparent; }
.heat tbody tr td.heat-1 { background: rgba(99, 77, 35, .10); }
.heat tbody tr td.heat-2 { background: rgba(99, 77, 35, .22); }
.heat tbody tr td.heat-3 { background: rgba(99, 77, 35, .36); }
.heat tbody tr td.heat-4 { background: rgba(99, 77, 35, .52); color: #fff; }

/* ---------- notices (D38) ---------- */
.notice-settings { margin-bottom: 1rem; }

.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.report-card { display: block; text-decoration: none; color: inherit; padding: 18px 20px; }
.report-card:hover { text-decoration: none; border-color: var(--accent); }
.report-card h2 { margin: 0 0 10px; font-size: 1.05rem; }
.report-figures { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: .95rem; }
.report-figures strong { font-size: 1.25rem; margin-right: 6px; }
.report.stats { margin: 0 0 14px; }

.attachment-image img { display: block; max-width: min(360px, 100%); max-height: 320px; border-radius: 12px; border: 1px solid var(--line); margin-top: 6px; }

/* Sortable headings (reports): a pointer, and an arrow for the sorted column. */
table[data-sortable] th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table[data-sortable] th[data-sort]:hover { color: var(--ink, #2b2118); }
table[data-sortable] th[aria-sort="descending"]::after { content: " \2193"; }
table[data-sortable] th[aria-sort="ascending"]::after { content: " \2191"; }

/* The clinic in numbers (dashboard): six small cards, one per report theme, across the bento. */
.glance { grid-column: span 12; padding: 24px; }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.glance-card {
  display: flex; flex-direction: column; gap: 3px; padding: 18px 18px 16px; min-height: 150px;
  border-radius: 20px; background: var(--sand-soft, rgba(255, 255, 255, .55)); text-decoration: none; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff; transition: transform .18s, box-shadow .18s;
}
.glance-card:hover { transform: translateY(-3px); color: var(--ink); text-decoration: none; box-shadow: var(--raise, 0 20px 40px -24px rgba(74, 46, 28, .35)); }
.glance-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.glance-head .chip-icon { width: 36px; height: 36px; border-radius: 12px; }
.glance-head .chip-icon .ico { width: 18px; height: 18px; }
.glance-title { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.2; }
.glance-value { font-size: 1.75rem; line-height: 1.05; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.glance-label { font-size: .82rem; color: var(--ink-soft); }
.glance-sub { font-size: .78rem; color: var(--ink-faint); margin-top: auto; padding-top: 8px; }
.spark { width: 100%; height: 32px; margin-top: 8px; }
.spark rect { fill: var(--accent); opacity: .3; }
.spark rect.spark-now { opacity: .95; }
@media (max-width: 960px) { .glance { grid-column: span 12; } }

/* The service page: a bar to jump between the groups of e-mails, and
   collapsed text cards — one line each until opened. */
.section-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.section-nav .chip em { font-style: normal; font-weight: 700; margin-left: 4px; opacity: .7; }
.section-nav-hint { margin-left: 6px; }
details.template { padding: 0; }
details.template > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
details.template > summary::-webkit-details-marker { display: none; }
details.template > summary::before { content: "\25B8"; color: var(--accent); font-size: .9rem; width: 12px; flex: none; }
details.template[open] > summary::before { content: "\25BE"; }
details.template > summary h3 { margin: 0; font-size: 1.02rem; }
details.template > summary .template-meta { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
details.template > summary .template-subject { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.template > summary .template-version { margin-left: auto; }
details.template > .template-grid, details.template > form { padding: 0 20px 20px; }
details.template:hover { border-color: var(--accent); }
.texts { margin-top: 6px; }
.notice-settings h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.notice-settings-second { margin-top: 1.1rem !important; }

/* The notice kinds in Settings: a grid of rows — box, name, what it does, and
   the one number a kind may have, right under it. The box sits on the
   first text line, not floating above two lines of text. */
.notice-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 22px; margin: .6rem 0 1.1rem; }
.notice-item { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; }
.notice-item > input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.notice-item > label { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.notice-item > label strong { font-weight: 650; }
.notice-param { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: .88rem; }
.notice-param label { font-weight: 500; }
.notice-param input { width: 5.5em; padding: 6px 8px; }

/* The log: a second row of chips, by kind of e-mail, under the status row. */
.chips-kind { flex-basis: 100%; align-items: center; margin-top: -.4rem; }
.chips-label { margin-right: 2px; }



/* Daily AI advice (D42): the dashboard row of tiles across the bento, the pop-up,
   and the item itself, which is the same on /advice and in the pop-up. */

/* -- the /advice page -- */
.advice-list { display: grid; gap: 16px; }
.advice-item { margin: 0; scroll-margin-top: 24px; }
.advice-history { margin-top: 16px; }
.advice-history-list { display: grid; gap: 8px; margin: 0; padding-left: 1.25rem; }
.advice-history-list li { padding-left: 2px; }
.advice-history-list .small { margin-left: 8px; }
.advice-profile { margin: 0 0 16px; background: var(--sand-soft, var(--sand)); }
.advice-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.advice-profile-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.advice-profile-heading h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.advice-profile-chip { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .65); color: var(--brand); }
.advice-profile-chip .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.advice-profile-refresh { margin: 0; }
.advice-profile-text { margin: 14px 0 0; max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; color: var(--ink); }
.advice-profile-text.muted { color: var(--ink-soft); }
.advice-profile-meta, .advice-profile-status { margin: 9px 0 0; font-size: .84rem; line-height: 1.45; }
.advice-profile-status { padding-top: 9px; border-top: 1px solid rgba(105, 77, 56, .16); }

/* -- one item: category and priority, the text, what to do, sources, feedback -- */
.advice-item-body { min-width: 0; }
.advice-item .ico,
.advice-dialog .ico,
.advice-tile .ico,
.advice-nav .ico,
.advice-source-go .ico,
.advice-vote .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.advice-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.advice-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; background: var(--sand); color: var(--brand);
}
.advice-cat-outreach { background: var(--ok-bg); color: var(--ok); }
.advice-cat-social { background: var(--plum-bg); color: var(--plum); }
.advice-cat-service { background: var(--sand); color: var(--brand); }
.advice-cat-market, .advice-cat-local { background: var(--info-bg); color: var(--info); }
.advice-cat-regulation { background: var(--danger-bg); color: var(--danger); }
.advice-prio-high { background: var(--graphite); color: #fff; }
.advice-prio-normal { background: rgba(255, 255, 255, .6); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.advice-prio-low { background: transparent; color: var(--ink-faint); border: 1px solid var(--line-strong); }
.advice-important { background: var(--accent-soft); color: var(--accent); }
.advice-item-title { margin: 0 0 .65rem; font-size: 1.35rem; line-height: 1.25; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.advice-part { margin-top: 14px; }
.advice-part-title { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.advice-copy { margin: 0; max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; color: var(--ink); }
.advice-todo {
  margin: 16px 0 0; padding: 16px 18px; border-radius: 18px;
  background: var(--sand-soft); box-shadow: inset 0 1px 0 #fff;
}
.advice-todo-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--brand);
}
.advice-todo-icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: var(--graphite); color: #fff; flex: none;
}
.advice-todo-icon .ico { width: 15px; height: 15px; }
.advice-todo-text { margin: 0; max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; font-weight: 600; line-height: 1.55; color: var(--ink); }
.advice-sources { margin-top: 16px; }
.advice-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.advice-chips li { max-width: 100%; }
.advice-source {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; max-width: 100%;
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(160, 74, 34, .18); background: var(--sand-soft);
  color: var(--ink); text-decoration: none; transition: background .15s, box-shadow .15s;
}
.advice-source:hover { background: #fff; color: var(--ink); box-shadow: var(--raise-sm); text-decoration: none; }
.advice-source:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.advice-source-host { font-weight: 700; font-size: .84rem; color: var(--brand); overflow-wrap: anywhere; }
.advice-source-title { font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.advice-source-go { display: inline-flex; color: var(--ink-faint); }
.advice-source:hover .advice-source-go { color: var(--accent); }
.advice-feedback { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.advice-your-answer { margin: 0 0 8px; font-size: .88rem; color: var(--ink-soft); }
.advice-your-answer strong { color: var(--ink); }
.advice-votes { display: flex; flex-wrap: wrap; gap: 10px; }
.advice-vote {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .5rem 1.25rem;
  border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.advice-vote:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.advice-vote-yes { background: var(--ok-bg); color: var(--ok); border-color: rgba(63, 122, 91, .3); }
.advice-vote-yes:hover { background: #d3e8db; box-shadow: var(--raise-sm); }
.advice-vote-no { background: var(--danger-bg); color: var(--danger); border-color: rgba(163, 57, 42, .3); }
.advice-vote-no:hover { background: #f5d3cb; box-shadow: var(--raise-sm); }
.advice-vote.is-selected.advice-vote-yes { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 10px 20px -12px rgba(63, 122, 91, .9); }
.advice-vote.is-selected.advice-vote-no { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 10px 20px -12px rgba(163, 57, 42, .9); }
.advice-reason-label { display: block; margin: 14px 0 4px; font-size: .84rem; color: var(--ink-soft); }
.advice-optional { font-weight: 400; color: var(--ink-faint); }
.advice-reason {
  display: block; width: 100%; max-width: 620px; padding: .5rem .7rem; font-size: .88rem;
  border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255, 255, 255, .6); resize: vertical;
}

/* -- the dashboard card -- */
.advice-slot { grid-column: span 12; }
.advice-slot > .card { margin: 0; }
.advice-block { padding: 24px; }
.advice-block .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: .9rem; }
.advice-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.advice-title h2, .advice-title p { margin: 0; }
.advice-cta {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: .8rem; font-weight: 600; text-decoration: none; transition: background .18s;
}
.advice-cta:hover { background: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; }
.advice-carousel { position: relative; }
.advice-track {
  position: relative; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 6px 4px 16px; scrollbar-width: thin;
}
.advice-track:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-radius: 20px; }
.advice-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.advice-track.is-dragging .advice-tile { pointer-events: none; }
/* Fades at the edge the row can still be moved to: the content itself fades. */
.advice-carousel.has-before.has-after .advice-track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.advice-carousel.has-before:not(.has-after) .advice-track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
          mask-image: linear-gradient(to right, transparent, #000 24px);
}
.advice-carousel.has-after:not(.has-before) .advice-track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.advice-slide { flex: 0 0 min(280px, 78vw); min-width: 0; scroll-snap-align: start; display: flex; }
.advice-tile {
  display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 150px; padding: 18px 18px 16px;
  border: 0; border-radius: 20px; background: var(--sand-soft, rgba(255, 255, 255, .55));
  box-shadow: inset 0 1px 0 #fff; color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.advice-tile:hover { transform: translateY(-3px); box-shadow: var(--raise); color: var(--ink); text-decoration: none; }
.advice-tile:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.advice-tile-top { display: flex; flex-wrap: wrap; gap: 6px; }
.advice-tile-title { margin: 2px 0 0; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.advice-tile-text {
  font-size: .86rem; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.advice-tile-foot { margin-top: auto; padding-top: 8px; font-size: .78rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.advice-tile-host { color: var(--ink-soft); font-weight: 600; overflow-wrap: anywhere; }
.advice-more { font-weight: 600; }
.advice-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .82); color: var(--brand);
  box-shadow: var(--raise-sm); cursor: pointer;
}
.advice-nav[hidden] { display: none; }
.advice-nav:hover { background: #fff; }
.advice-nav:disabled { opacity: .35; box-shadow: none; cursor: default; }
.advice-nav:disabled:hover { background: rgba(255, 255, 255, .82); }
.advice-nav-prev { left: -6px; }
.advice-nav-next { right: -6px; }
.advice-nav-prev .ico { transform: scaleX(-1); }
.advice-note {
  padding: 18px 20px; border-radius: 20px; background: var(--sand-soft, rgba(255, 255, 255, .55));
  box-shadow: inset 0 1px 0 #fff; color: var(--ink);
}
.advice-note p { margin: 0 0 10px; }
.advice-note p:last-child { margin-bottom: 0; }

/* -- the pop-up: a native dialog, opened with showModal() -- */
html.advice-lock { overflow: hidden; }
.advice-dialog {
  width: min(720px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--glass-edge); border-radius: 26px;
  background: #faf6f1; color: var(--ink); box-shadow: var(--raise);
}
.advice-dialog[open] { display: flex; flex-direction: column; }
.advice-dialog::backdrop { background: rgba(43, 34, 30, .34); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.advice-dialog-body { position: relative; min-height: 0; overflow-y: auto; padding: 30px 32px 32px; }
.advice-dialog .advice-tags { padding-right: 100px; }
.advice-dialog-close-form { position: absolute; top: 16px; right: 16px; margin: 0; z-index: 1; }
.advice-dialog-close {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .7);
  color: var(--ink-soft); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.advice-dialog-close:hover { background: #fff; color: var(--ink); }
.advice-dialog-close:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .advice-tile { transition: none; }
  .advice-track { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  .advice-block { padding: 18px; }
  .advice-history-list .small { display: block; margin: 3px 0 0; }
  .advice-dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .advice-dialog-body { padding: 24px 20px 28px; }
  .advice-item-title { font-size: 1.22rem; }
  .advice-votes { flex-direction: column; }
  .advice-vote { justify-content: center; }
}

.owner-subhead { margin: 1.4rem 0 .3rem; font-size: 1.02rem; }

/* The brand: Carelly's wordmark from the website, in the ink colour, with the
   clinic's line under it. Thin, wide-set letters — the site's own logo. */
.brand-word .wordmark { display: block; width: auto; height: 17px; overflow: visible; color: #1A1613; }
.brand-word .brand-text small, .brand-word small { margin-top: 7px; }
.login-wordmark { margin: .4rem 0 .9rem; line-height: 1; }
.login-wordmark + .muted { margin-top: .5rem; }
.login-wordmark .wordmark { display: block; width: auto; height: 26px; overflow: visible; color: #1A1613; }

/* The services list: the switch and, beside it, the quiet "remove" (D43). */
.row-actions { display: flex; gap: .75rem; justify-content: flex-end; align-items: center; }
.row-actions form { margin: 0; }
button.linkish.row-remove { font-size: .82rem; color: var(--ink-soft, #7a6f68); }
button.linkish.row-remove:hover { color: var(--danger, #b4412f); }
/* A planned e-mail whose treatment is switched off: waiting, not going. */
.status-paused { background: var(--surface-2, #f1ece6); color: var(--ink-soft, #7a6f68); }

/* The log overview (2026-10-15): kinds × statuses, every number a link. */
.log-grid-wrap { overflow-x: auto; margin: 1rem 0 .4rem; }
.log-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.log-grid th, .log-grid td { padding: .55rem .6rem; border-bottom: 1px solid var(--line, #ece5de); text-align: left; vertical-align: middle; }
.log-grid thead th { font-weight: 500; white-space: nowrap; }
.log-grid .num { text-align: center; }
.log-grid tfoot th, .log-grid tfoot td { border-bottom: 0; font-weight: 600; }
.log-grid .grid-kind { font-weight: 600; text-decoration: none; color: inherit; }
.log-grid .grid-kind.is-current { color: var(--brand, #9c4a2f); text-decoration: underline; }
.log-grid .grid-help { display: block; font-size: .78rem; color: var(--ink-soft, #7a6f68); font-weight: 400; max-width: 30ch; }
.log-grid .grid-n { display: inline-block; min-width: 2.6rem; padding: .2rem .5rem; border-radius: 999px; text-decoration: none; color: inherit; font-variant-numeric: tabular-nums; }
.log-grid .grid-n:hover { background: var(--surface-2, #f1ece6); }
.log-grid .grid-n.is-zero { color: var(--ink-soft, #b7aca4); }
.log-grid .grid-n.is-current { background: var(--ink, #3d332e); color: #fff; }
.log-grid .grid-sum { font-weight: 600; }
.log-grid .grid-notices th, .log-grid .grid-notices td { background: rgba(0, 0, 0, .015); }
.log-people { margin: 0 0 1rem; }
.log-showing { margin: 0 0 .6rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--brand, #9c4a2f); }
.sort-arrow { margin-left: .3rem; font-size: .8em; color: var(--ink-soft, #a59a92); }
.log-grid thead th.grid-head { font-size: .78rem; font-weight: 600; color: var(--ink-soft, #7a6f68); white-space: normal; line-height: 1.25; max-width: 7.5rem; }
.log-grid thead th.grid-head-planned { color: var(--info, #3b6a8f); }
.log-grid thead th.grid-head-sent { color: var(--ok, #3c7a52); }
.log-grid thead th.grid-head-failed { color: var(--danger, #b4412f); }
.log-grid th, .log-grid td { padding: .5rem .45rem; }
.log-grid tbody th[scope="row"], .log-grid tfoot th[scope="row"] { min-width: 12rem; }

/* ---------- Services: the second column of scenarios (D44) ---------- */
.shell.shell-sub { grid-template-columns: 268px 244px minmax(0, 1fr); }
.subbar {
  position: sticky; top: 22px; align-self: start;
  max-height: calc(100vh - 44px); overflow-y: auto;
  padding: 22px 12px 16px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid var(--glass-edge);
  border-radius: 30px;
  box-shadow: var(--raise-sm);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav-title { margin: 0 10px 10px; font-weight: 750; font-size: 1.02rem; letter-spacing: -.01em; }
.subnav-group { margin: 14px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.subnav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .88rem; line-height: 1.25;
  transition: background .18s, color .18s, box-shadow .18s;
}
.subnav a:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.subnav a.active { background: #fff; color: var(--ink); box-shadow: var(--raise-sm); }
.subnav-count { flex: none; min-width: 1.9rem; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: .74rem; font-weight: 700; background: rgba(0, 0, 0, .05); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.subnav a.active .subnav-count { background: var(--accent); color: #fff; }
@media (max-width: 1180px) {
  .shell.shell-sub { grid-template-columns: 268px 210px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .shell.shell-sub { grid-template-columns: minmax(0, 1fr); }
  .subbar { position: static; max-height: none; padding: 10px; border-radius: 22px; overflow-x: auto; }
  .subnav { flex-direction: row; flex-wrap: nowrap; }
  .subnav-title, .subnav-group { display: none; }
  .subnav a { white-space: nowrap; }
}

/* The chosen scenario: its count and the two buttons for all. */
.scenario-count { margin: .5rem 0 0; color: var(--ink-soft); }
.scenario-count strong { font-size: 1.35rem; color: var(--ink); margin-right: .25rem; }
.scenario-all { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.scenario-all form { margin: 0; }
.scenario-on-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.scenario-on-list .tag { font-size: .7rem; }

/* The service page: one switch per scenario. */
.scenario-card { margin-bottom: 18px; }
.scenario-switches { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px 22px; }
.scenario-switches li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); }
.scenario-switches form { margin: 0; }
.scenario-name { font-weight: 600; color: inherit; text-decoration: none; }
.scenario-name:hover { color: var(--accent); }
.small-button { padding: 6px 14px; font-size: .82rem; }
.notice-item-param { display: block; }


/* ---------- The letter editor (2026-10-15): full screen, a toolbar like Gmail's ---------- */
.editor-note { margin: 0 0 .6rem; padding: 10px 12px; border-radius: 10px; background: #FBF3EC; color: #6B4A33; font-size: .86rem; line-height: 1.45; }

dialog.mail-editor {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0; background: #F4EEE8; color: #2E2A27;
}
dialog.mail-editor::backdrop { background: rgba(30, 22, 16, .45); }
.me-shell { display: flex; flex-direction: column; height: 100%; }
.me-top {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 22px; background: #fff; border-bottom: 1px solid #EADFD6;
}
.me-title { flex: 1 1 260px; min-width: 0; }
.me-title p { margin: 0; }
.me-title h2 { margin: 2px 0 0; font-size: 1.15rem; }
.me-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: #F1EAE3; }
.me-tabs button {
  border: 0; background: transparent; padding: 7px 16px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .86rem; color: #6B6259; cursor: pointer; box-shadow: none;
}
.me-tabs button[aria-selected="true"] { background: #fff; color: #2E2A27; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.me-actions { display: flex; gap: 10px; }
.me-subject { display: flex; align-items: center; gap: 12px; padding: 10px 22px; background: #fff; border-bottom: 1px solid #EADFD6; }
.me-subject label { font-weight: 600; font-size: .86rem; color: #6B6259; }
.me-subject input { flex: 1; min-width: 0; }

.me-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 18px; background: #FBF8F5; border-bottom: 1px solid #EADFD6;
}
.me-toolbar.is-off { opacity: .4; pointer-events: none; }
.me-group { display: inline-flex; align-items: center; gap: 2px; padding-right: 8px; margin-right: 2px; border-right: 1px solid #EADFD6; }
.me-group:last-child { border-right: 0; }
.me-toolbar button {
  min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: #2E2A27; font: inherit; font-size: .95rem; cursor: pointer; box-shadow: none;
}
.me-toolbar button:hover, .me-toolbar button:focus-visible { background: #EFE6DE; }
.me-toolbar button.me-wide { font-size: .8rem; font-weight: 600; padding: 0 10px; }
.me-toolbar select {
  height: 34px; padding: 0 28px 0 10px; border-radius: 8px; border: 1px solid #E3D7CC;
  background-color: #fff; font: inherit; font-size: .84rem; width: auto; min-width: 0;
}
.me-color { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.me-color:hover { background: #EFE6DE; }
.me-color input { position: absolute; left: 4px; right: 4px; bottom: 3px; width: calc(100% - 8px); height: 5px; padding: 0; border: 0; opacity: 1; cursor: pointer; }
.me-color input::-webkit-color-swatch-wrapper { padding: 0; }
.me-color input::-webkit-color-swatch { border: 0; border-radius: 2px; }
.me-color span { transform: translateY(-3px); }

.me-code[hidden], .me-stage iframe[hidden], .me-problems[hidden] { display: none; }
.me-problems { margin: 0; padding: 10px 22px; background: #FCEDE8; color: #8A2A12; font-size: .9rem; }
.me-stage { flex: 1; min-height: 0; display: flex; }
.me-stage iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #F9EFE8; }
.me-code { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 22px 18px; min-height: 0; }
.me-code p { margin: 0; max-width: 90ch; }
.me-code-actions { display: flex; gap: 8px; }
.me-code textarea {
  flex: 1; width: 100%; min-height: 0; resize: none; border-radius: 12px; border: 1px solid #E3D7CC;
  padding: 14px; font: 13px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; background: #fff; color: #2E2A27;
}
@media (max-width: 700px) {
  .me-top, .me-subject, .me-toolbar, .me-code { padding-left: 12px; padding-right: 12px; }
  .me-group { border-right: 0; }
}

/* The preview's own bar: what it is, and the button that opens it full screen for editing. */
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 .5rem; }
.preview-bar > p { margin: 0; flex: 1 1 220px; }
.preview-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.preview-actions form { margin: 0; }
button.edit-in-mail {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid #E3C9B5; background: #FFF8F3; color: #8A3A17; font: inherit; font-size: .84rem;
  font-weight: 650; line-height: 1.2; box-shadow: none; cursor: pointer; white-space: nowrap;
}
button.edit-in-mail:hover, button.edit-in-mail:focus-visible { background: #98411B; border-color: #98411B; color: #fff; }
.mail-frame { transition: height .15s ease; }
.template-edit textarea { overflow-y: hidden; resize: none; min-height: 18rem; }

/* The editor window scrolls as one; the page underneath stays still. */
html.me-lock, html.me-lock body { overflow: hidden; }
dialog.mail-editor .me-stage { display: block; overflow-y: auto; overscroll-behavior: contain; }
dialog.mail-editor .me-stage iframe { display: block; width: 100%; height: 100%; min-height: 100%; }
dialog.mail-editor .me-code:not([hidden]) { display: flex; height: 100%; }


/* "From your data" (D46) uses the advice card's own classes. */
.insight-go { margin: .6rem 0 0; }

/* Clinic pulse: the AI's caption for a post, ready to copy. */
.insight-caption { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px dashed #E3C9B5; font-style: italic; }

/* Clinic pulse: the AI's steps, numbered. */
.insight-steps { margin: .35rem 0 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.insight-steps li { line-height: 1.5; }

/* What the clinic's own visits say about a treatment (2026-10-16). */
.data-hint { margin: 1rem 0; border-left: 3px solid var(--accent, #7a5c3e); }
.data-hint p { margin: .3rem 0; }
.data-hint form { margin: .6rem 0 .2rem; }
.data-hint-kicker { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }