/* PBA Portal — themed UI */
:root {
  --navy: #1B2A4A;
  --navy-2: #16223C;
  --brick: #8B2635;
  --brick-2: #71202C;
  --brass: #B5894A;
  --brass-2: #9C7335;
  --cream: #F5EDD9;
  --bg: #FAF6EB;
  --ink: #22262E;
  --ink-soft: #525866;
  --line: #E4E0D2;
  --line-2: #D5CFB8;
  --ok: #1f7a3d;
  --warn: #B5894A;
  --err: #8B2635;
  --shadow: 0 4px 14px rgba(27,42,74,.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.18);
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--brick); }
h1, h2, h3, h4 { font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif; color: var(--navy); margin-top: 0; }
h1 { font-size: 1.85rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
.muted { color: var(--ink-soft); font-size: .92em; }
.nowrap { white-space: nowrap; }

/* ========== App shell ========== */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app__rail {
  background: var(--navy); color: var(--cream); padding: 1rem 0;
  display: flex; flex-direction: column;
}
.rail__brand {
  display:flex; align-items:center; gap:.6rem; padding: .25rem 1.1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--cream);
}
.rail__brand:hover { color: #fff; }
.rail__brand img { display:block; }
.rail__brand .b1 { font-family: 'Playfair Display', serif; font-size: 1.05rem; line-height: 1.1; color: #fff; }
.rail__brand .b2 { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity:.7; color: var(--cream); }
.rail__nav { display:flex; flex-direction:column; padding: .8rem 0; flex:1; }
.rail__nav a {
  display:flex; align-items:center; gap:.55rem; padding:.55rem 1.2rem;
  color: var(--cream); opacity:.8; font-size:.95rem; border-left: 3px solid transparent;
}
.rail__nav a:hover { opacity:1; background: rgba(255,255,255,.04); color: var(--cream); }
.rail__nav a.is-active { opacity:1; background: rgba(181,137,74,.13); border-left-color: var(--brass); color: #fff; }
.rail__nav .group-label { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5; padding: .9rem 1.2rem .35rem; }
.rail__user {
  border-top: 1px solid rgba(255,255,255,.08); padding: .75rem 1.1rem; font-size:.85rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.rail__user .name { color: #fff; }
.rail__user a { color: var(--brass); font-size:.82rem; }

.app__main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display:flex; align-items:center; gap: 1rem; padding: .85rem 1.5rem;
  background: #fff; border-bottom: 1px solid var(--line);
}
.topbar h1 { margin:0; font-size: 1.4rem; flex: 1; }
.crumbs { font-size:.86rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--navy); }

.container { padding: 1.4rem 1.5rem 3rem; max-width: 1280px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app__rail {
    position: fixed; left: -290px; top: 0; bottom: 0; z-index: 90;
    width: 270px; height: 100vh;
    transition: left .2s ease; overflow-y: auto;
    box-shadow: 4px 0 18px rgba(0,0,0,.35);
  }
  .app__rail.is-open { left: 0; }
  .app__main { padding-top: 0; }
  .topbar { position: sticky; top: 0; z-index: 40; padding: .65rem 1rem; }
  .topbar h1 { font-size: 1.15rem; }
  .menu-btn { display: inline-flex; }
  .container { padding: 1rem .9rem 2rem; }
  .scrim { display:block; position: fixed; inset:0; background: rgba(0,0,0,.45); z-index: 80; }
  .scrim:not(.is-on) { display:none; }
  /* Tables: allow horizontal scroll inside flush cards */
  .card--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data { font-size: .9rem; }
  .data th, .data td { padding: .5rem .55rem; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters input[type=text], .filters select { width: 100%; min-width: 0 !important; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr !important; }
  #mdmap { height: 360px; }
  .mail__folders { max-height: 220px; overflow-y: auto; }
  .mail__list .from { max-width: 35vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer; padding: 0;
}
.menu-btn svg { width: 22px; height: 22px; }
.scrim { display: none; }

/* ========== Cards / sections ========== */
.card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.card h2 { margin-bottom: .85rem; font-size: 1.15rem; }
/* Flush cards (used to wrap data tables) must scroll horizontally when the table is wider
   than the available container — never clip the action column off-page. */
.card--flush { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.card--flush > .data { border-radius: 0; }
.grid2 { display:grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
.grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ========== KPI tiles ========== */
/* auto-fit so 4, 5, or 6 KPI tiles flow naturally without orphaned single-tile rows */
.kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.kpi {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.05rem; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:.15rem; color: inherit;
  position: relative; overflow: hidden; text-decoration: none;
  transition: border-color .12s, box-shadow .15s, transform .12s;
}
a.kpi:hover { border-color: var(--brick); box-shadow: 0 8px 22px rgba(27,42,74,.08); transform: translateY(-1px); }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--navy); opacity:.55; }
.kpi--brick::before { background: var(--brick); }
.kpi--brass::before { background: var(--brass, #B5894A); }
.kpi--ok::before    { background: var(--ok); }
.kpi__n { font-family:'Playfair Display', serif; font-size: 1.75rem; font-weight: 700; color: var(--navy); line-height:1.1; }
.kpi__l { font-size: .76rem; color: var(--ink-soft); margin-top: .15rem; text-transform: uppercase; letter-spacing: .06em; font-weight:600; }
.kpi__sub { font-size: .78rem; color: var(--ink-soft); margin-top:.1rem; }
.kpi-group-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; margin: 1.1rem 0 .55rem; }

/* ========== Tables ========== */
.data { width:100%; border-collapse: collapse; font-size: .94rem; }
.data th, .data td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align:left; vertical-align: top; }
.data th { background:#FBF7E9; color: var(--navy); font-weight: 600; font-size:.78rem; text-transform: uppercase; letter-spacing:.04em; white-space: nowrap; }
.data tr:hover td { background: #FCFAF1; }
.data .row-actions { white-space: nowrap; text-align: right; }
.data .row-actions a, .data .row-actions button { margin-left: .35rem; }
/* Last column (typically row actions) should never be split across lines */
/* Only auto-right-align the last column when it's explicitly an action/utility column. */
.data td.row-actions, .data th.row-actions,
.data td.col-actions, .data th.col-actions { white-space: nowrap; text-align: right; }
.data td.nowrap, .data th.nowrap { white-space: nowrap; }
/* Long free-text cells (addresses, descriptions) should wrap, not push the table wider */
.data td { word-break: break-word; overflow-wrap: anywhere; }

/* ========== Forms / buttons ========== */
/* Global control baseline — applies to any standalone input/select/textarea in the portal.
   Scoped form rules (.form-grid, .filters, .auth-card) override as needed. */
.app__main input[type=text],
.app__main input[type=email],
.app__main input[type=password],
.app__main input[type=number],
.app__main input[type=date],
.app__main input[type=tel],
.app__main input[type=search],
.app__main input[type=url],
.app__main select,
.app__main textarea {
  font: inherit; color: var(--ink);
  padding: .5rem .7rem;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.app__main input[type=text]:focus,
.app__main input[type=email]:focus,
.app__main input[type=password]:focus,
.app__main input[type=number]:focus,
.app__main input[type=date]:focus,
.app__main input[type=tel]:focus,
.app__main input[type=search]:focus,
.app__main input[type=url]:focus,
.app__main select:focus,
.app__main textarea:focus {
  outline: none;
  border-color: var(--brick);
  box-shadow: 0 0 0 3px rgba(139, 38, 53, .15);
}
.app__main textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.app__main select { padding-right: 1.8rem; cursor: pointer; }

.form-grid { display: grid; grid-template-columns: 200px 1fr; gap: .7rem 1rem; align-items: start; }
.form-grid label { padding-top: .5rem; color: var(--navy); font-weight: 500; }
.form-grid input[type=text], .form-grid input[type=email], .form-grid input[type=password],
.form-grid input[type=number], .form-grid input[type=date], .form-grid select, .form-grid textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; background: #fff;
}
.form-grid textarea { min-height: 110px; resize: vertical; }
.form-grid .help { font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }
.form-actions { margin-top: 1.1rem; display:flex; gap: .55rem; align-items:center; flex-wrap:wrap; }

.btn { display:inline-block; padding:.5rem .9rem; border-radius:7px; border: 1px solid var(--navy); background: var(--navy); color: var(--cream); font: inherit; font-weight: 500; cursor: pointer; line-height: 1; transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .08s; text-decoration: none; }
.btn:hover { background: var(--navy-2); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27,42,74,.25); }
.btn--brand { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn--brand:hover { background: var(--brick-2); border-color: var(--brick-2); }
.btn--brand:focus-visible { box-shadow: 0 0 0 3px rgba(139, 38, 53, .25); }
.btn--alt   { background: #fff; color: var(--navy); }
.btn--alt:hover { background: var(--cream); }
.btn--ghost { background: transparent; color: var(--navy); border-color: transparent; }
.btn--ghost:hover { background: var(--cream); }
.btn--danger { background: #fff; color: var(--err); border-color: var(--err); }
.btn--danger:hover { background: var(--err); color:#fff; }
.btn--sm { padding:.32rem .7rem; font-size: .85rem; }

.tag { display:inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tag--admin { background: #ECE2C8; color: var(--brass-2); }
.tag--board { background: #DCE3F0; color: var(--navy); }
.tag--member { background: #E7F1E9; color: var(--ok); }
.tag--ok { background:#E7F4EC; color: var(--ok); }
.tag--err { background:#F7E2E5; color: var(--err); }
.tag--warn { background:#FBEFD7; color: var(--brass-2); }

.alert { padding:.7rem .9rem; border-radius:8px; margin: .4rem 0 1rem; font-size:.94rem; }
.alert--ok  { background: #E7F4EC; color: var(--ok);  border:1px solid #BFE0CB; }
.alert--err { background: #F7E2E5; color: var(--err); border:1px solid #E5BCC2; }
.alert--info{ background: #E9EEF8; color: var(--navy); border:1px solid #C9D5EE; }

.empty { text-align: center; padding: 2.4rem 1rem; color: var(--ink-soft); border: 1px dashed var(--line-2); border-radius: var(--radius); background: #fff; }
.empty h3 { color: var(--navy); margin-bottom: .25rem; font-family:'Playfair Display',serif; }

/* ========== Login ========== */
body.auth { background: linear-gradient(180deg, var(--navy) 0%, #15203B 100%); display:flex; align-items:center; justify-content:center; min-height: 100vh; }
.auth-card { width:100%; max-width: 420px; background: var(--cream); padding: 2rem 1.8rem; border-radius: 12px; box-shadow: var(--shadow-lg); }
.auth-card .brand { display:flex; align-items:center; gap:.6rem; margin-bottom: 1.2rem; }
.auth-card .brand .b1 { font-family:'Playfair Display', serif; font-size: 1.05rem; }
.auth-card .brand .b2 { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass-2); }
.auth-card label { display:block; font-size: .88rem; margin-bottom: .8rem; color: var(--navy); }
.auth-card input { width:100%; padding: .6rem .75rem; margin-top: .25rem; border: 1px solid #c9c0a3; border-radius: 7px; font: inherit; background: #fff; }
.auth-card .submit { width:100%; padding: .7rem; background: var(--brick); color: #fff; border: 0; border-radius: 8px; font-weight: 600; font-size: 1rem; margin-top: .35rem; cursor: pointer; }
.auth-card .submit:hover { background: var(--brick-2); }
.auth-card .legal { font-size:.78rem; color: var(--ink-soft); text-align:center; margin-top: 1rem; }

/* Login (matches legacy admin login styling) */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh;
  background: linear-gradient(180deg, var(--navy) 0%, #15203B 100%);
  font-family: 'Inter', system-ui, sans-serif; color: var(--ink); margin:0; padding: 1.5rem; }
.login__card { width:100%; max-width: 400px; background: var(--cream); padding: 2rem 1.8rem;
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.login__brand { display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.login__brand .b1 { font-weight:600; color: var(--navy); }
.login__brand .b2 { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color: var(--brass, var(--brass-2)); }
body.login h1 { margin:.2rem 0 .9rem; font-size:1.45rem; font-family:'Playfair Display', serif; color: var(--navy); }
body.login form label { display:block; margin-bottom:.85rem; font-size:.88rem; color: var(--navy); }
body.login form input { width:100%; padding:.55rem .7rem; margin-top:.25rem;
  border:1px solid #c9c0a3; border-radius:7px; font:inherit; background:#fff; box-sizing:border-box; }
body.login form button { width:100%; margin-top:.4rem; padding:.7rem; border:0; border-radius:8px;
  background: var(--brick); color:#fff; font-weight:600; font-size:1rem; cursor:pointer; }
body.login form button:hover { background: var(--brick-2, #71202C); }
body.login .legal { font-size:.78rem; color: var(--ink-soft); text-align:center; margin-top:1.1rem; }
body.login .alert { padding:.6rem .8rem; border-radius:7px; font-size:.9rem; margin-bottom:.8rem; }
body.login .alert--ok  { background:#E7F4EC; color:#1f7a3d; border:1px solid #BFE0CB; }
body.login .alert--err { background:#F7E2E5; color:#8B2635; border:1px solid #E5BCC2; }

/* Analytics chart + map */
.chart-wrap { overflow-x:auto; padding:.4rem 0; }
.chart { width:100%; min-width:720px; height:170px; }
.chart .bar--views   { fill: var(--brass, #B5894A); }
.chart .bar--signups { fill: var(--navy, #1B2A4A); }
.chart .axis { stroke: var(--line); stroke-width:1; }
.chart-legend { font-size:.85rem; color: var(--ink-soft); margin:.25rem 0 0; }
.chart-legend .dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; vertical-align:-1px; margin-right:.25rem; }
.chart-legend .dot--views   { background: var(--brass, #B5894A); }
.chart-legend .dot--signups { background: var(--navy, #1B2A4A); }
#mdmap { width:100%; height: 460px; border-radius: 10px; border:1px solid var(--line); }
.map-toolbar { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; flex-wrap:wrap; }
.map-toolbar .muted { font-size:.85rem; }

/* ========== Mail ========== */
.mail { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; }
@media (max-width: 1000px) { .mail { grid-template-columns: 1fr; } }
.mail__folders { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); height: fit-content; }
.mail__folders a { display:flex; justify-content:space-between; padding: .45rem .6rem; border-radius: 6px; color: var(--ink); font-size:.94rem; }
.mail__folders a.is-active, .mail__folders a:hover { background: var(--cream); color: var(--navy); }
.mail__folders .label { font-size: .72rem; letter-spacing: .12em; color: var(--ink-soft); padding: .8rem .6rem .25rem; text-transform: uppercase; }

.mail__list { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.mail__list table { width:100%; border-collapse: collapse; }
.mail__list td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); font-size: .94rem; vertical-align: top; }
.mail__list tr.unread td { font-weight: 600; }
.mail__list tr:hover td { background: #FCFAF1; cursor: pointer; }
.mail__list .from { width: 22%; }
.mail__list .subj { width: 60%; }
.mail__list .date { width: 16%; color: var(--ink-soft); text-align: right; white-space: nowrap; }

.mail__msg .meta { color: var(--ink-soft); font-size: .9rem; margin-bottom: .5rem; }
.mail__msg .body { background:#fff; padding: 1rem 1.1rem; border:1px solid var(--line); border-radius: var(--radius); }
.mail__msg .body img { max-width: 100%; height: auto; }
.mail__msg .actions { display:flex; gap:.5rem; margin: .7rem 0; }
.mail__attachments { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.mail__attachments a { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; background: var(--cream); border: 1px solid var(--line-2); border-radius: 6px; font-size:.88rem; }

.compose textarea { min-height: 240px; }

/* ========== Project / tasks ========== */
.task-list { display: flex; flex-direction: column; gap: .55rem; }
.task {
  display: flex; gap: .85rem; align-items: flex-start; padding: .75rem .9rem;
  background:#fff; border: 1px solid var(--line); border-radius: 10px; font-size:.94rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.task:hover { border-color: var(--line-2); box-shadow: 0 4px 12px rgba(27,42,74,.06); }
.task > form { margin: 0; flex: 0 0 auto; }
.task__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.task__body strong { font-size: .98rem; color: var(--navy); line-height: 1.3; }
.task__body .muted { font-size: .85rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.task__side { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex: 0 0 auto; justify-content: flex-end; }
.task__side .pri { flex: 0 0 auto; }
.task__assignee { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.task__due { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.task select.stat { padding: .3rem .55rem; border: 1px solid var(--line-2); background-color: var(--line); color: var(--ink); cursor: pointer; appearance: menulist; font: inherit; font-size:.72rem; text-transform: uppercase; letter-spacing:.04em; font-weight:700; border-radius: 5px; min-width: 96px; }
.task select.stat.stat--doing  { background-color:#DCE3F0; color: var(--navy);   border-color:#BCC9E2; }
.task select.stat.stat--blocked{ background-color:#F7E2E5; color: var(--err);    border-color:#E5BCC2; }
.task select.stat.stat--done   { background-color:#E7F4EC; color: var(--ok);     border-color:#BFE0CB; }
.task select.stat.stat--cancelled{ background-color:#EEE; color:#888; }
.task .stat { font-size:.74rem; padding:.15rem .5rem; border-radius: 4px; text-transform: uppercase; letter-spacing:.04em; font-weight: 600; text-align:center; }
.stat--todo { background:#EEEEEE; color:#555; }
.stat--doing { background:#DCE3F0; color: var(--navy); }
.stat--blocked { background:#F7E2E5; color: var(--err); }
.stat--done { background:#E7F4EC; color: var(--ok); }
.stat--cancelled { background:#EEE; color:#888; text-decoration: line-through; }
.pri { font-size:.74rem; padding:.15rem .5rem; border-radius: 4px; font-weight:600; text-align:center; }
.pri--low { background:#EEEEEE; color:#666; }
.pri--med { background:#DCE3F0; color: var(--navy); }
.pri--high { background:#FBEFD7; color: var(--brass-2); }
.pri--urgent { background:#F7E2E5; color: var(--err); }

/* Assignee avatars */
.avatar-stack { display:inline-flex; align-items:center; }
.avatar { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--cream);
  font-size:.68rem; font-weight:700; letter-spacing:.02em; border:2px solid #fff;
  margin-left:-6px; box-shadow:0 0 0 1px var(--line); flex:0 0 auto; }
.avatar:first-child { margin-left:0; }
.avatar--more { background:var(--cream); color:var(--ink-soft); }
.avatar--empty { background:#EEE; color:#999; font-weight:500; }

.note { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .7rem; }
.note .meta, .comment .meta { font-size:.82rem; color: var(--ink-soft); margin-bottom: .4rem; }
.comment { background: var(--cream); border: 1px solid var(--line-2); border-radius: 8px; padding: .55rem .7rem; margin-top: .4rem; font-size: .92rem; }

.footer { padding: 1rem 1.5rem; color: var(--ink-soft); font-size:.82rem; border-top:1px solid var(--line); background:#fff; display:flex; justify-content:space-between; }

/* utilities */
.hstack { display:flex; gap:.6rem; align-items:center; flex-wrap: wrap; }
.spacer { flex: 1; }
.right { text-align: right; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.pre { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; background: #FBF7E9; padding:.6rem .8rem; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- Newsletter / shared filters & badges ---------- */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin: .4rem 0 1rem; }
.filters input[type=text], .filters input[type=email], .filters select {
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:7px; background:#fff;
  min-width: 220px; font: inherit;
}

.badge {
  display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.74rem;
  text-transform: uppercase; letter-spacing:.04em; font-weight:600;
  background:#eee; color:#444; border:1px solid #ddd;
  white-space: nowrap;
}

/* ===== Businesses listing table — column widths and text behaviour ===== */
.biz-table .data { table-layout: auto; }
.biz-table .data td, .biz-table .data th { vertical-align: middle; }
.biz-table .data .col-name    { min-width: 180px; max-width: 240px; }
.biz-table .data .col-name strong { display:block; line-height:1.3 }
.biz-table .data .col-name .sub { color: var(--ink-soft); font-size:.78rem; display:block; margin-top:.15rem; word-break: normal; overflow-wrap: anywhere; }
.biz-table .data .col-cat     { white-space: nowrap; color: var(--ink-soft); font-size:.85rem; }
.biz-table .data .col-sponsor { white-space: nowrap; }
.biz-table .data .col-owner   { min-width: 150px; max-width: 200px; font-size:.82rem; line-height:1.35; }
.biz-table .data .col-owner .e { color: var(--ink-soft); font-size:.76rem; word-break: break-all; }
.biz-table .data .col-deals   { white-space: nowrap; text-align: center; }
.biz-table .data .col-addr    { font-size:.84rem; max-width: 220px; line-height:1.35; }
.biz-table .data .col-phone   { white-space: nowrap; font-size:.85rem; }
.biz-table .data .col-web     { text-align: center; }
.biz-table .data .col-state   { white-space: nowrap; text-align: center; }
.biz-table .data .col-actions { white-space: nowrap; text-align: right; }
.biz-table .data .col-actions .btn { margin-left:.2rem; padding:.25rem .55rem; font-size:.78rem; }
.biz-table .data tr:hover td { background: #FCFAF1; }
@media (max-width: 1100px) {
  .biz-table .data .col-addr,
  .biz-table .data thead th:nth-child(6) { display:none; }
}
@media (max-width: 900px) {
  .biz-table .data .col-cat,
  .biz-table .data thead th:nth-child(2) { display:none; }
}
.badge--draft   { background:#FBF7E9; color:#7a5d12; border-color:#E6D9A8; }
.badge--queued  { background:#E9EEF8; color:#1B2A4A; border-color:#C9D5EE; }
.badge--sending { background:#E9F2FA; color:#1B5599; border-color:#BBD6F0; }
.badge--sent    { background:#E7F4EC; color:#1f7a3d; border-color:#BFE0CB; }
.badge--failed  { background:#F7E2E5; color:#8B2635; border-color:#E5BCC2; }
.badge--paused  { background:#F1ECDA; color:#6A5A2A; border-color:#D8CCA0; }
.badge--skipped { background:#eee; color:#666; }

/* sub-nav indents under the rail */
.rail__sub { opacity:.85; }
.rail__sub.is-active { opacity:1; }

/* ========== Owner experience (My Listing / Deals editor) ========== */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin: 0 0 .9rem; padding-bottom:.6rem; border-bottom: 1px solid var(--line); }
.section-head h2 { margin:0; }
.section-head .lede { color: var(--ink-soft); font-size:.92rem; margin-top:.25rem; }
.section-head .actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.card .card__head { display:flex; align-items:center; gap:.7rem; margin: -.3rem 0 .9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.card .card__head h2 { margin:0; flex:1; }
.card .card__head .pill { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px; background: var(--cream); color: var(--brass-2); border:1px solid var(--line-2); font-weight:600; }
.card .card__lede { color: var(--ink-soft); margin: -.4rem 0 .9rem; font-size:.92rem; }

/* Hero panel for owner dashboard */
.hero-card { background: linear-gradient(135deg, var(--navy) 0%, #243962 100%); color: var(--cream); padding: 1.6rem 1.6rem; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.2rem; position:relative; overflow:hidden; }
.hero-card::after { content:""; position:absolute; right:-60px; top:-60px; width: 240px; height: 240px; border-radius:50%; background: radial-gradient(circle, rgba(181,137,74,.25) 0%, rgba(181,137,74,0) 70%); pointer-events:none; }
.hero-card .eyebrow { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--brass); font-weight:700; }
.hero-card h2 { color:#fff; margin:.3rem 0 .25rem; font-size:1.65rem; }
.hero-card .meta { color: rgba(245,237,217,.85); font-size:.95rem; }
.hero-card .actions { margin-top: 1.1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-card .btn--brand { background: var(--brick); border-color: var(--brick); color:#fff; }
.hero-card .btn--brand:hover { background: var(--brick-2); }
.hero-card .btn--alt { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); color: var(--cream); }
.hero-card .btn--alt:hover { background: rgba(255,255,255,.18); color:#fff; }

/* Progress bar (listing completeness) */
.progress { background: var(--cream); border:1px solid var(--line-2); border-radius:999px; height: 10px; overflow:hidden; }
.progress > i { display:block; height:100%; background: linear-gradient(90deg, var(--brass) 0%, var(--brick) 100%); border-radius:999px; transition: width .6s ease; }
.progress-row { display:flex; align-items:center; gap:.7rem; }
.progress-row .progress { flex:1; }
.progress-row .pct { font-family:'Playfair Display',serif; color: var(--navy); font-weight:700; min-width: 3.2rem; text-align:right; }

/* Badge chips (achievements) */
.chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .65rem; border-radius:999px; font-size:.78rem; font-weight:600; background: var(--cream); color: var(--ink-soft); border:1px solid var(--line-2); }
.chip--ok { background:#E7F4EC; color:var(--ok); border-color:#BFE0CB; }
.chip--warn { background:#FBEFD7; color: var(--brass-2); border-color:#E6D9A8; }
.chip--off { opacity:.55; }
.chip i { font-style:normal; }

/* Live preview block (deals editor) */
.preview-pane { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: #FFFDF6; }
.preview-pane h3 { margin:.1rem 0 .55rem; font-family:'Playfair Display',serif; color: var(--navy); }
.preview-pane .preview-prose { white-space:pre-wrap; color: var(--ink); }
.preview-pane .preview-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.preview-pane .preview-actions a { display:inline-flex; align-items:center; padding:.45rem .8rem; border-radius:8px; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; background: var(--brick); color:#fff; pointer-events:none; }
.preview-pane .preview-actions a.alt { background: transparent; border:2px solid var(--navy); color: var(--navy); }
.preview-pane .empty-preview { color: var(--ink-soft); font-style: italic; }

/* Sticky save bar in long forms */
.save-bar { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(250,246,235,0) 0%, var(--bg) 30%); padding: 1rem 0 .4rem; margin-top: .4rem; display:flex; gap:.55rem; align-items:center; z-index:10; }
.save-bar .spacer { flex:1; }

/* Quick-action tiles */
.quick-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.quick { display:flex; flex-direction:column; gap:.4rem; padding:1rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.quick:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,42,74,.10); color: var(--navy); }
.quick .quick__t { font-family:'Playfair Display',serif; font-size:1.1rem; color: var(--navy); }
.quick .quick__d { font-size:.88rem; color: var(--ink-soft); }
.quick .quick__cta { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--brick); font-weight:700; margin-top:auto; }

/* Inline status pill */
.status-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.status-pill--live { background:#E7F4EC; color: var(--ok); }
.status-pill--draft { background:#F1ECDA; color: var(--brass-2); }
.status-pill--off { background:#EEE; color:#666; }
.status-pill::before { content:""; width:.45rem; height:.45rem; border-radius:50%; background: currentColor; }

/* Form-grid: full-width row helper */
.form-grid .full { grid-column: 1 / -1; }
.form-grid .row-help { color: var(--ink-soft); font-size: .82rem; padding-top:.55rem; }
@media (max-width:700px){ .form-grid .full { grid-column: 1; } }

/* === Mailbox UX additions === */
.pill { display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.18rem .55rem; border-radius:999px; background:#eef0f3; color:#374151; border:1px solid var(--line-2); font-weight:600; }
.pill--brand { background:#0f2647; color:#fff; border-color:#0f2647; }
.pill--info  { background:#E9EEF8; color:var(--navy); border-color:#C9D5EE; }
.pill--warn  { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.btn--err { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.btn--err:hover { background:#fecaca; }
.mail__folders a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.mail__list tr.unread td { font-weight:600; background:#fcfdff; }
.mail__list tr:hover td { background:#f3f6fb; }
.mail__toolbar { padding:.4rem .55rem; background:#f9fafb; border:1px solid var(--line-2); border-radius:8px; }
dialog::backdrop { background:rgba(15,38,71,.45); }

/* === My Tasks page === */
.task-list--lg .task {
  grid-template-columns: 90px minmax(0,1fr) 80px minmax(0,180px);
  gap: .9rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.task-list--lg .task:hover {
  border-color: var(--line-2);
  box-shadow: 0 4px 14px rgba(27,42,74,.07);
  transform: translateY(-1px);
}
.task__main { min-width: 0; }
.task__title { font-weight: 600; color: var(--navy); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task__meta  { display:flex; gap:.7rem; align-items:center; margin-top:.2rem; font-size:.85rem; flex-wrap:wrap; }
.task__id    { color: var(--ink-soft); font-size:.8rem; }
.due { font-size:.85rem; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.due--today    { color: var(--brass-2); font-weight: 600; }
.due--soon     { color: var(--navy); font-weight: 500; }
.due--overdue  { color: var(--err); font-weight: 600; }

@media (max-width: 700px) {
  /* Stack the task row into a tidy mobile card */
  .task-list--lg .task {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "stat   pri"
      "main   main"
      "meta   due";
    gap: .45rem .6rem;
    padding: .7rem .85rem;
  }
  .task-list--lg .task .stat { grid-area: stat; justify-self: start; }
  .task-list--lg .task .pri  { grid-area: pri;  justify-self: end; }
  .task-list--lg .task .task__main { grid-area: main; }
  .task-list--lg .task .due  { grid-area: due;  text-align: right; }
  /* The .task__meta is inside .task__main, so it's fine; place a synthetic line */
  .task-list--lg .task .task__meta { margin-top: .15rem; }
}

/* Section head: better mobile wrap */
@media (max-width: 700px) {
  .section-head { flex-direction: column; align-items: stretch; gap: .5rem; }
  .section-head .actions { width: 100%; }
  .section-head .actions .btn { flex: 1; text-align: center; }
}

/* Filters: full-width on mobile, sane min on desktop */
@media (max-width: 700px) {
  .filters { gap: .4rem; }
  .filters input, .filters select { width: 100%; min-width: 0; }
}

@media (max-width: 700px) {
  .task { flex-wrap: wrap; }
  .task__side { width: 100%; justify-content: flex-start; padding-left: 0; }
}

/* KPI tiles: 2-up on small screens already, single column on very narrow */
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi__n { font-size: 1.4rem; }
}

/* Quick-grid: tighter min on mobile */
@media (max-width: 700px) {
  .quick-grid { grid-template-columns: 1fr; }
}

/* Hero card: scale down on mobile */
@media (max-width: 700px) {
  .hero-card { padding: 1.1rem 1.1rem; }
  .hero-card h2 { font-size: 1.3rem; }
  .hero-card .actions .btn { flex: 1; text-align: center; }
}

/* Empty state inside table cells (tasks/projects fallback) */
td > .empty { margin: .5rem 0; }

/* Make stand-alone tables (not wrapped in .card--flush) horizontally scrollable on mobile.
   .card--flush already scrolls at all sizes (see .card--flush rule above). Setting
   `display:block` on the table itself breaks header alignment, so we wrap with overflow
   on the parent .card instead. */
@media (max-width: 700px) {
  .card > .data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Minor: prevent long emails / subjects from forcing horizontal page scroll */
.app__main { overflow-x: hidden; }

/* =====================================================================
   Mobile app shell
   Bottom tab bar (.mnav) + slide-up "More" sheet (.msheet) make the
   portal feel like a native app on phones. Always rendered in markup;
   only visible ≤900px. Desktop continues to use the left rail.
   ===================================================================== */
.mnav { display:none; }
.msheet { display:none; }

@media (max-width: 900px) {
  /* The desktop left rail becomes a slide-out drawer that's still
     reachable via the topbar hamburger, but most navigation now happens
     through the bottom tab bar + More sheet. */
  body { background: var(--bg); }

  /* Reserve room at the bottom of every page for the fixed tab bar. */
  .app__main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)); }
  .footer { display:none; }

  /* ---------- Bottom tab bar ---------- */
  .mnav {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left:0; right:0; bottom:0; z-index: 70;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(27,42,74,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mnav__tab {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.15rem;
    padding:.5rem .25rem .55rem;
    color: var(--ink-soft);
    text-decoration:none;
    font-size: .68rem; font-weight: 600;
    letter-spacing:.02em;
    background: transparent; border:0; cursor: pointer;
    min-height: 56px;
    transition: color .12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mnav__tab svg { width:22px; height:22px; }
  .mnav__tab:hover { color: var(--navy); }
  .mnav__tab.is-active { color: var(--brick); }
  .mnav__tab.is-active::before {
    content:""; position:absolute; top:0; width:36px; height:3px;
    background: var(--brick); border-radius: 0 0 3px 3px;
  }
  .mnav__tab { position: relative; }

  /* ---------- More sheet ---------- */
  .msheet {
    display:block;
    position: fixed; inset: 0; z-index: 95;
    pointer-events: none;
    visibility: hidden;
  }
  .msheet.is-open { pointer-events: auto; visibility: visible; }
  .msheet__scrim {
    position: absolute; inset: 0;
    background: rgba(15, 22, 40, .55);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .msheet.is-open .msheet__scrim { opacity: 1; }
  .msheet__panel {
    position: absolute; left:0; right:0; bottom:0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2,.85,.3,1);
    box-shadow: 0 -10px 40px rgba(0,0,0,.25);
    display:flex; flex-direction:column;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .msheet.is-open .msheet__panel { transform: translateY(0); }
  .msheet__handle {
    width: 38px; height: 4px; background: var(--line-2); border-radius: 2px;
    margin: .55rem auto .25rem;
  }
  .msheet__head {
    display:flex; align-items:center; gap:.7rem;
    padding: .5rem 1rem .8rem;
    border-bottom: 1px solid var(--line);
  }
  .msheet__user { display:flex; align-items:center; gap:.7rem; flex:1; min-width:0; }
  .msheet__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--navy); color: var(--cream);
    display:flex; align-items:center; justify-content:center;
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem;
    flex: 0 0 auto;
  }
  .msheet__name { font-weight: 600; color: var(--navy); font-size: .98rem; line-height:1.2; }
  .msheet__sub { font-size: .76rem; color: var(--ink-soft); margin-top: .15rem; }
  .msheet__close {
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: var(--cream); color: var(--ink);
    font-size: 1.4rem; line-height: 1; cursor: pointer; flex: 0 0 auto;
  }
  .msheet__body { overflow-y: auto; padding: .5rem 0 1rem; -webkit-overflow-scrolling: touch; }
  .msheet__group {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-soft); font-weight: 700;
    padding: .9rem 1rem .35rem;
  }
  .msheet__item {
    display:flex; align-items:center; gap:.8rem;
    padding: .85rem 1rem;
    color: var(--ink); text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
    min-height: 52px;
  }
  .msheet__item:hover { background: #FCFAF1; color: var(--navy); }
  .msheet__item.is-active { background: var(--cream); color: var(--navy); font-weight: 600; }
  .msheet__item--danger { color: var(--brick); margin-top: .5rem; border-top: 1px solid var(--line); }
  .msheet__ico {
    width: 28px; text-align: center; font-size: 1.05rem;
    flex: 0 0 auto;
  }

  /* The hamburger in the topbar still opens the legacy left rail (kept for
     people who want the full menu in one place), but we de-emphasize it
     since the bottom tabs cover the common cases. */
  .menu-btn { opacity: .85; }
}

/* Lock body scroll while the More sheet is open. */
body.msheet-open { overflow: hidden; }

/* =====================================================================
   Mobile data presentation
   Turn dashboard task rows + audit log table into stacked cards on
   phones. The desktop table is preserved; we just restyle ≤700px so
   text never gets squished into 60px columns.
   ===================================================================== */
@media (max-width: 700px) {
  /* Dashboard task list — vertical card per task, no inline-style widths to fight. */
  .task-list .task,
  .task-list a.task {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title  pri"
      "proj   due"
      "stat   stat";
    gap: .25rem .6rem;
    padding: .75rem .85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: .55rem;
    box-shadow: var(--shadow);
  }
  .task-list .task .task__body { grid-area: title; min-width:0; display: contents; }
  .task-list .task .task__body strong { grid-area: title; font-size:.98rem; line-height:1.3; }
  .task-list .task .task__body .muted { grid-area: proj; font-size:.78rem; }
  .task-list .task > .stat,
  .task-list .task .stat { grid-area: stat; min-width: 0 !important; justify-self: start; font-size:.66rem !important; padding: .25rem .55rem !important; }
  .task-list .task .task__side { display: contents; }
  .task-list .task .task__side .pri { grid-area: pri; justify-self: end; }
  .task-list .task .task__side .task__due { grid-area: due; justify-self: end; font-size: .8rem; color: var(--ink-soft); }
  .task-list .task .task__side .task__assignee { display: none; }

  /* Recent activity (and any .data table outside .card--flush) becomes
     a stack of labeled rows. We use data-label attributes on TDs when
     present, and fall back to hiding the THEAD. */
  .card > .data,
  .card--flush > .data {
    display: block;
    overflow-x: visible;            /* override the earlier auto-scroll for THIS pattern */
    width: 100%;
  }
  .card > .data thead,
  .card--flush > .data thead { display: none; }
  .card > .data tbody, .card > .data tr, .card > .data td,
  .card--flush > .data tbody, .card--flush > .data tr, .card--flush > .data td {
    display: block; width: 100%;
  }
  .card > .data tr,
  .card--flush > .data tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: .55rem .6rem;
    padding: .65rem .8rem;
    box-shadow: var(--shadow);
  }
  .card--flush > .data tbody { padding: .3rem 0; }
  .card > .data tr:hover td,
  .card--flush > .data tr:hover td { background: transparent; }
  .card > .data td,
  .card--flush > .data td {
    border: 0; padding: .2rem 0;
    font-size: .9rem;
    text-align: left !important;
    word-break: break-word;
  }
  .card > .data td.nowrap,
  .card--flush > .data td.nowrap {
    font-size: .76rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
  }
  /* The "row actions" column should align right and pack into a chip strip. */
  .card > .data td.row-actions,
  .card > .data td.col-actions,
  .card--flush > .data td.row-actions,
  .card--flush > .data td.col-actions {
    text-align: right !important;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--line);
    display: flex !important;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
  }
  /* Empty-state TD inside table-card pattern: keep centered and muted. */
  .card > .data td[colspan],
  .card--flush > .data td[colspan] { text-align: center !important; color: var(--ink-soft); }

  /* Per-page tables that already hide columns via display:none — keep that working;
     hidden cells just won't render in their card. */
  .signups-table .data .col-id,
  .biz-table .data .col-id { display: none; }     /* IDs aren't useful in card view */
  .signups-table .data .col-when { display: block; }
  .signups-table .data .col-name { white-space: normal !important; min-width: 0 !important; font-size: 1rem; font-weight: 700; color: var(--navy); }
  .signups-table .data .col-email { max-width: none !important; }
  .biz-table .data .col-name { max-width: none !important; min-width: 0 !important; font-size: 1rem; font-weight: 700; color: var(--navy); }
  .biz-table .data .col-name strong { font-size: 1rem; }

  /* If a page wants the original horizontal-scroll table on mobile,
     opt it out with .data--keep on the table or .card--keep on the card. */
  .card--keep > .data,
  .data.data--keep {
    display: table !important; overflow-x: auto;
  }
  .card--keep > .data thead { display: table-header-group !important; }
  .card--keep > .data tr { display: table-row !important; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
  .card--keep > .data td { display: table-cell !important; padding: .5rem .55rem; border-bottom: 1px solid var(--line); }
}

/* =====================================================================
   Mobile override layer (inline-style guards)
   Catches ad-hoc inline styles on individual pages so phones never
   horizontally scroll. See docs/PORTAL-ARCHITECTURE.md §6.
   ===================================================================== */
@media (max-width: 700px) {
  .filters input,
  .filters select,
  .filters [type="text"],
  .filters [type="email"],
  .filters [type="search"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100%;
  }
  .filters .btn { flex: 0 0 auto; }
  .form-grid[style*="grid-template-columns"],
  .card[style*="grid-template-columns"],
  .grid2[style*="grid-template-columns"],
  .grid3[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .view-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .view-tabs a { white-space: nowrap; flex: 0 0 auto; }
  .save-bar { padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0)); }
  body.login .login__card { max-width: 100% !important; margin-inline: .6rem; }
  .hstack input[type="text"],
  .hstack input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  .mat-form, .mat-table, .file-uploader { width: 100%; }
  .progress-row[style*="max-width"] { max-width: 100% !important; }
  /* Inline-style task rows on the dashboard sometimes set min-width on
     the status pill — neutralize so the row card layout works. */
  .task[style*="text-decoration"] { text-decoration: none !important; }
  .task .stat[style] { min-width: 0 !important; }
  /* Inline grids/flex on cards (e.g. mail dialogs) get sane widths. */
  dialog.card[style*="max-width"] { max-width: calc(100vw - 1.5rem) !important; }
}

@media (max-width: 900px) {
  .btn, .btn--sm { min-height: 38px; }
  .btn { min-height: 44px; }
  .app__bar { padding-inline: .8rem; }
  /* All buttons + nav links get manipulation gestures (no 300ms delay on iOS). */
  .btn, .mnav__tab, a.kpi, a.task, a.msheet__item, .menu-btn { touch-action: manipulation; }
}

/* =====================================================================
   Mobile polish for individual page templates
   ===================================================================== */
@media (max-width: 700px) {
  /* Signup detail page uses a .kv key/value table — render as stacked rows. */
  .kv { width: 100%; border-collapse: collapse; }
  .kv th, .kv td { display: block; width: 100%; padding: .15rem 0; text-align: left !important; }
  .kv th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding-top: .55rem; }
  .kv td { font-size: .96rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .55rem; word-break: break-word; }
  .aside-card { margin-top: .9rem; }

  /* Analytics — chart gets full width and shorter; Maryland map sized to viewport. */
  .chart { width: 100%; min-width: 0 !important; height: 140px !important; }
  #mdmap, .mdmap { height: 320px !important; max-width: 100%; }
  /* Two side-by-side analytics cards stack. */
  .grid2[style*="grid-template-columns:1.4fr 1fr"],
  .grid2[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Dashboard hero card (owner listing) — phone-sized typography. */
  .hero-card { padding: 1rem 1.05rem; }
  .hero-card h2 { font-size: 1.25rem; }
  .hero-card .actions { display: flex; flex-direction: column; gap: .45rem; }
  .hero-card .actions .btn { width: 100%; text-align: center; }

  /* Newsletter compose / lists / templates — drop the 1fr 2fr split. */
  .grid2 { grid-template-columns: 1fr !important; }

  /* Mailbox 3-pane already collapses ≤720px — make sure the new bottom
     tab bar doesn't get hidden under the iframe. */
  .mail3 { height: auto !important; }
  .mail3__reader-frame { min-height: 60vh; }

  /* Project view: collapse the assignee popover to a sheet-like full-width box. */
  [data-pop] { left: 1rem !important; right: 1rem !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
}