/* Shared theme — identical tokens/components to the main Rillion site.
   Keep this in sync with rillion-site/index.html's inline <style>. */

:root{
  --onyx:#14110D; --espresso:#241C13; --ivory:#F3ECDD;
  --gold:#B8924F; --gold-bright:#D8B36C; --graphite:#948B7C;
  --cream:#F3ECDD; --cream-b:#EAE0C9;
}
@media (prefers-color-scheme: dark){
  :root{ --bg-a:var(--onyx); --bg-b:var(--espresso); --ink:var(--ivory); --hair: rgba(243,236,221,0.14); --hair-soft: rgba(243,236,221,0.06); --gold-fg:var(--gold-bright); }
}
@media (prefers-color-scheme: light){
  :root{ --bg-a:var(--cream); --bg-b:var(--cream-b); --ink:#1B1710; --hair: rgba(27,23,16,0.14); --hair-soft: rgba(27,23,16,0.06); --gold-fg:#8F6C33; }
}
:root[data-theme="dark"]{ --bg-a:var(--onyx); --bg-b:var(--espresso); --ink:var(--ivory); --hair: rgba(243,236,221,0.14); --hair-soft: rgba(243,236,221,0.06); --gold-fg:var(--gold-bright); }
:root[data-theme="light"]{ --bg-a:var(--cream); --bg-b:var(--cream-b); --ink:#1B1710; --hair: rgba(27,23,16,0.14); --hair-soft: rgba(27,23,16,0.06); --gold-fg:#8F6C33; }

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(ellipse 100% 60% at 50% 0%, var(--bg-b), var(--bg-a) 68%);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height:1.6;
  min-height:100vh; min-height:100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.app-bg{ background: var(--bg-a); } /* flat ground for dense app screens */

a{ color:inherit; }
.display{ font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, "Times New Roman", serif; }
.label{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.num{ font-variant-numeric: tabular-nums; }

.bg-tex{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image: radial-gradient(var(--hair-soft) 1px, transparent 1px); background-size:26px 26px; }
.bg-glow{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 55% 40% at 50% 8%, rgba(184,146,79,0.16), transparent 60%); }

.page{ position:relative; max-width:1040px; margin:0 auto; padding:30px 24px 0; }
.page.narrow{ max-width:920px; }
.page.app{ max-width:1160px; }

/* ---- header / nav ---- */
.site-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:40px; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-mark{ width:40px; height:40px; flex:0 0 auto; }
.brand-word{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:Didot,"Bodoni MT","Big Caslon",Georgia,serif; font-size:1.3rem; font-weight:600; letter-spacing:.08em; color:var(--ink); }
.brand-sub{ font-size:.58rem; letter-spacing:.28em; color:var(--graphite); margin-top:3px; }

.main-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.main-nav a{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.72;
  text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:opacity .15s ease, border-color .15s ease; }
.main-nav a:hover{ opacity:1; border-color: var(--gold-fg); }
.main-nav a.current{ opacity:1; color: var(--gold-fg); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:.7rem; letter-spacing:.14em; font-weight:600; text-transform:uppercase;
  padding:13px 26px; min-height:44px; border:1px solid var(--gold-fg); background:transparent; color:var(--gold-fg);
  cursor:pointer; text-decoration:none; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.btn:hover{ background:var(--gold-fg); color:var(--onyx); }
.btn:focus-visible{ outline:2px solid var(--gold-fg); outline-offset:2px; }
.btn.solid{ background:var(--gold-bright); color:var(--onyx); border-color:var(--gold-bright); }
.btn.solid:hover{ background:var(--gold); border-color:var(--gold); }
.btn.ghost{ border-color: var(--hair); color: var(--ink); opacity:.85; }
.btn.ghost:hover{ border-color: var(--gold-fg); color:var(--gold-fg); background:transparent; opacity:1; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-sm{ padding:9px 16px; min-height:40px; font-size:.64rem; }
/* Touch devices: hover-only affordances (border/color-only feedback) don't
   exist, so give every primary tap target a floor tall enough for a
   comfortable thumb tap (WCAG 2.5.5 / Apple HIG ~44px), without changing
   how anything looks on mouse/trackpad. */
@media (pointer:coarse){
  .btn-sm{ min-height:44px; }
  .app-nav a{ min-height:44px; display:flex; align-items:center; }
  .main-nav a{ min-height:44px; display:inline-flex; align-items:center; }
  .checkbox-row input, .radio-group input{ width:18px; height:18px; }
}

/* ---- type ---- */
.eyebrow{ font-size:.66rem; color:var(--gold-fg); margin:0 0 16px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
h1.headline{ font-family:Didot,"Bodoni MT","Big Caslon",Georgia,serif; font-size:clamp(2rem,5.6vw,3.4rem);
  line-height:1.12; font-weight:500; margin:0 0 20px; text-wrap:balance; color:var(--ink); }
h2.section-title{ font-family:Didot,"Bodoni MT","Big Caslon",Georgia,serif; font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:500; margin:0 0 12px; color:var(--ink); }
.lede{ max-width:60ch; font-size:1.02rem; color:var(--ink); opacity:.82; margin:0 0 8px; font-weight:300; }

/* ---- cards / panels ---- */
.panel{ border:1px solid var(--hair); padding:28px; position:relative; background: rgba(20,17,13,0.02); }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin:32px 0; }
/* Fixed 2/3-up variants as classes, not inline styles — an inline
   grid-template-columns has higher specificity than any class-based media
   query, so pages that hard-coded the column count in a style="" attribute
   were never actually collapsing to 1 column on a phone despite the rule
   below existing. Classes let the same @media rule win everywhere. */
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.card-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:700px){
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-5{ grid-template-columns:1fr; }
}
@media (min-width:701px) and (max-width:900px){
  .card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-5{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:901px) and (max-width:1100px){
  .card-grid.cols-4, .card-grid.cols-5{ grid-template-columns:repeat(3,1fr); }
}
.card{ background: var(--bg-a); padding:24px; }
.card h3{ font-family:Didot,"Bodoni MT","Big Caslon",Georgia,serif; font-weight:500; font-size:1.05rem; margin:0 0 8px; }
.card p{ font-size:.88rem; opacity:.78; margin:0; line-height:1.6; }

/* ---- status pills ---- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--hair); color:var(--ink); opacity:.85; white-space:nowrap; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--graphite); }
.pill-available{ border-color: rgba(184,146,79,0.5); color:var(--gold-fg); }
.pill-available .dot{ background: var(--gold-fg); }
.pill-review{ opacity:.7; }
.pill-unavailable{ opacity:.45; text-decoration: line-through; }

/* ---- tables ----
   Default pattern: horizontal scroll inside a bordered wrapper — every
   column stays reachable, nothing is ever cut off, which is the explicit
   floor for any table this file doesn't specifically convert to cards
   below. A soft edge-fade shows there's more to scroll before you touch it. */
.table-wrap{ overflow-x:auto; border:1px solid var(--hair); position:relative;
  background:
    linear-gradient(to right, var(--bg-a) 0%, rgba(0,0,0,0) 24px) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--bg-a) 0%, rgba(0,0,0,0) 24px) right / 24px 100% no-repeat local; }
table.data{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:520px; }
table.data th{ text-align:left; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite);
  font-weight:600; padding:14px 16px; border-bottom:1px solid var(--hair); white-space:nowrap; }
table.data td{ padding:14px 16px; border-bottom:1px solid var(--hair-soft); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:0; }

/* Opt-in per-table upgrade for the handful of tables people actually use
   from a phone (a public spaces list, the admin tenant roster): below
   700px the table itself restructures into a stack of cards — one per
   row, each cell labelled from its own `data-label` — rather than asking
   a thumb to pan a data grid sideways. */
@media (max-width:700px){
  table.data.stack{ min-width:0; }
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td{ display:block; width:100%; }
  table.data.stack thead{ display:none; }
  table.data.stack tr{ border:1px solid var(--hair); margin-bottom:12px; padding:6px 14px; background: rgba(20,17,13,0.02); }
  table.data.stack tr:last-child{ margin-bottom:0; }
  table.data.stack td{ display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:10px 0; border-bottom:1px solid var(--hair-soft); text-align:right; min-height:32px; }
  table.data.stack tr td:last-child{ border-bottom:0; }
  table.data.stack td::before{ content:attr(data-label); flex:0 0 auto; text-align:left;
    font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); }
  table.data.stack td[data-label=""]::before, table.data.stack td:not([data-label])::before{ content:none; }
  .table-wrap:has(table.data.stack){ overflow:visible; border:0; background:none; }
}

/* ---- forms ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.form-grid.single{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.span-2{ grid-column: 1 / -1; }
.field label{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); }
.field .hint{ font-size:.72rem; color:var(--graphite); opacity:.85; margin-top:2px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url],
.field input[type=number], .field input[type=date], .field input[type=password], .field select, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hair); padding:10px 2px;
  color:var(--ink); font-family:inherit; font-size:.92rem; outline:none; width:100%;
  transition:border-color .15s ease;
}
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23948B7C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:18px; padding-right:22px;
}
.field textarea{ resize:vertical; min-height:96px; border:1px solid var(--hair); padding:10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold-fg); }
.field input::placeholder, .field textarea::placeholder{ color:var(--graphite); opacity:.7; }
.field-file{ border:1px dashed var(--hair); padding:16px; font-size:.82rem; }
.field-file input{ font-size:.8rem; }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.82rem; opacity:.85; }
.checkbox-row input{ margin-top:3px; }

.radio-group{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-size:.86rem; cursor:pointer; }

.form-msg{ font-size:.82rem; margin:14px 0 0; min-height:1.2em; }
.form-msg.error{ color:#B85C3C; }
.form-msg.ok{ color:var(--gold-fg); }

.section-divider{ border:0; border-top:1px solid var(--hair); margin:36px 0; }

/* ---- footer ---- */
.site-foot{ border-top:1px solid var(--hair); padding:48px 0; margin-top:56px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.foot-meta{ font-size:.68rem; color:var(--graphite); }
.foot-meta a{ color:var(--gold-fg); text-decoration:none; }

/* ---- app shell (private portal + admin) ----
   ≥1024px: the original persistent sidebar — plenty of room for it beside
   real content, so nothing changes there.
   <1024px (phones through portrait iPad): the sidebar becomes an off-canvas
   drawer opened by a hamburger button fixed in the topbar. This is a real
   navigation-pattern swap, not the old edge-to-edge horizontally-scrolling
   pill bar — every nav item gets its full label, a visible current-page
   state, and a large tap target, exactly as it has on desktop. */
.app-shell{ display:flex; min-height:100vh; min-height:100dvh; }
.app-sidebar{ width:240px; flex:0 0 auto; border-right:1px solid var(--hair); padding:28px 20px;
  display:flex; flex-direction:column; gap:28px; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; }
.app-sidebar .brand{ padding-bottom:20px; border-bottom:1px solid var(--hair); }
.app-nav{ display:flex; flex-direction:column; gap:2px; }
.app-nav a{ font-size:.76rem; letter-spacing:.03em; color:var(--ink); opacity:.7; text-decoration:none;
  padding:10px 12px; border-left:2px solid transparent; transition: all .15s ease; }
.app-nav a:hover{ opacity:1; background: var(--hair-soft); }
.app-nav a.current{ opacity:1; color:var(--gold-fg); border-left-color:var(--gold-fg); background: var(--hair-soft); }
.app-nav .nav-group-label{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); padding:14px 12px 4px; }
.app-main{ flex:1 1 auto; min-width:0; padding:36px 40px 80px; }
.app-topbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.app-user{ font-size:.76rem; opacity:.75; display:flex; align-items:center; gap:12px; }
.app-user a{ color:var(--gold-fg); text-decoration:none; }

.mobile-nav-toggle{ display:none; }
.nav-backdrop{ display:none; }
.sidebar-close{ display:none; }

@media (max-width:1023px){
  .app-shell{ position:relative; }
  .app-main{ padding:20px 20px 60px; width:100%; }
  .app-topbar{ position:sticky; top:0; z-index:20; margin:-20px -20px 24px; padding:16px 20px;
    background:var(--bg-a); border-bottom:1px solid var(--hair); }

  /* Off-canvas by default; .nav-open slides it in. Fixed (not sticky) so
     it sits above page content regardless of scroll position. */
  .app-sidebar{ position:fixed; inset:0 auto 0 0; z-index:50; width:min(300px,84vw); height:100vh; height:100dvh;
    background:var(--bg-a); box-shadow:12px 0 32px rgba(0,0,0,0.3);
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
    padding:20px 20px calc(20px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top));
  }
  .app-shell.nav-open .app-sidebar{ transform:translateX(0); }
  .app-nav{ flex-direction:column; gap:2px; overflow-y:auto; }
  .app-nav a{ white-space:normal; font-size:.85rem; padding:12px; }

  .sidebar-close{ display:flex; align-items:center; justify-content:center; position:absolute;
    top:14px; right:14px; width:36px; height:36px; background:transparent; border:1px solid var(--hair);
    color:var(--ink); cursor:pointer; }

  .nav-backdrop{ display:block; position:fixed; inset:0; z-index:45; background:rgba(10,8,6,0.5);
    opacity:0; pointer-events:none; transition:opacity .25s ease; }
  .app-shell.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
  .app-shell.nav-open{ overflow:hidden; }
  .app-shell.nav-open .app-main{ visibility:hidden; } /* prevents focus/scroll leaking behind the drawer on small screens */
  @media (min-width:640px){ .app-shell.nav-open .app-main{ visibility:visible; } }

  .mobile-nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    flex:0 0 auto; background:transparent; border:1px solid var(--hair); color:var(--ink); cursor:pointer; }
  .mobile-nav-toggle svg{ width:18px; height:18px; }
}
@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }
  .app-topbar h1.section-title{ font-size:1.3rem; }
}

/* ---- login pages (login.php, admin/login.php) — kept out of inline
   style="" for CSP ---- */
.login-page{ max-width:400px; padding-top:80px; text-align:center; }
.login-hero{ padding:60px 0; max-width:440px; margin:0 auto; text-align:center; }
.login-title{ text-align:center; font-size:2.2rem; }
.login-title-sm{ font-size:1.8rem; text-align:center; }
.login-lede{ margin:0 auto 32px; }
.login-lede-sm{ margin:0 auto 28px; }
.login-error{ margin-bottom:16px; }
.login-cta{ width:100%; display:block; }
.login-cta-mt{ width:100%; display:block; margin-top:20px; }
.login-note{ font-size:.72rem; opacity:.6; margin-top:16px; }
.login-note-mt32{ font-size:.72rem; opacity:.6; margin-top:32px; }
.login-hint{ font-size:.82rem; margin-top:32px; }

/* brand-mark SVG gradient stops (kept out of inline style="" for CSP) */
.stop-bright{ stop-color:var(--gold-bright); }
.stop-mid{ stop-color:var(--gold); }
.stop-dark{ stop-color:#8F6C33; }

/* ---- public site (index.php, opportunities.php, register-interest.php,
   thank-you.php) — kept out of inline style="" for CSP ---- */
.text-gold{ color:var(--gold-fg); }
.text-center{ text-align:center; }

.hero-home{ padding:56px 0 48px; }
.hero-standard{ padding:44px 0 8px; }
.hero-thanks{ padding:70px 0; text-align:center; }

.section-pad{ padding:0 0 40px; }
.section-pad-lg{ padding:0 0 48px; }

.panel-cta{ text-align:center; margin-bottom:48px; }
.panel-error{ border-color:#B85C3C; margin-bottom:24px; }

.eyebrow-center{ justify-content:center; display:flex; }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }
.cta-row.center{ justify-content:center; }

.lede.tight{ margin:0 auto 26px; }
.lede.mb-8{ margin:0 auto 8px; }
.lede.mb-28{ margin:0 auto 28px; }
.lede.fine{ font-size:.86rem; opacity:.7; }
.lede.fine.spaced{ margin-top:20px; }

.rate-figure{ font-size:1.1rem; color:var(--gold-fg); }

.form-pad-b{ padding-bottom:56px; }
.form-msg.tight{ margin:4px 0; }
.section-title.compact{ font-size:1.2rem; }
.form-grid.spaced{ margin-bottom:36px; }
.field.spaced{ margin-bottom:24px; }
.checkbox-row.spaced{ margin-bottom:28px; }

.check-circle{ width:64px; height:64px; border:1px solid var(--gold-fg); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 28px; }

/* ---- mail workspace (mail.php) ---- */
.hidden{ display:none !important; }

.mail-shell{ display:flex; flex-direction:column; height:100vh; height:100dvh; }
.mail-topbar{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--hair); flex:0 0 auto; flex-wrap:wrap; }

.mail-body{ flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:180px 200px 300px 1fr; }
.mail-col{ border-right:1px solid var(--hair); padding:16px; overflow-y:auto; min-width:0; }
.mail-col-detail{ border-right:0; padding:0; }
.mail-col-head{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
  margin-bottom:10px; }
.mail-list{ display:flex; flex-direction:column; gap:2px; }
.mail-row{ padding:8px 10px; font-size:.84rem; cursor:pointer; border-left:2px solid transparent; }
.mail-row:hover{ background:var(--hair-soft); }
.mail-row.active{ color:var(--gold-fg); border-left-color:var(--gold-fg); background:var(--hair-soft); }
.mail-empty{ font-size:.82rem; opacity:.6; padding:8px; }

.mail-search-row{ margin-bottom:12px; }
.mail-search-row input{ width:100%; background:transparent; border:1px solid var(--hair);
  padding:9px 10px; color:var(--ink); font-family:inherit; font-size:.86rem; outline:none; }
.mail-search-row input:focus{ border-color:var(--gold-fg); }

.mail-threads{ gap:0; }
.mail-thread-row{ padding:12px 8px; border-bottom:1px solid var(--hair-soft); cursor:pointer; }
.mail-thread-row:hover{ background:var(--hair-soft); }
.mail-thread-row.unread .mail-thread-subject, .mail-thread-row.unread .mail-thread-from{ font-weight:700; }
.mail-thread-from{ font-size:.78rem; opacity:.8; }
.mail-thread-subject{ font-size:.86rem; margin:2px 0; }
.mail-thread-date{ font-size:.66rem; color:var(--graphite); }

.mail-detail-empty{ padding:60px 24px; text-align:center; opacity:.5; font-size:.9rem; }
.mail-detail-head{ padding:24px 28px 16px; border-bottom:1px solid var(--hair); }
.mail-detail-head h2{ font-family:Didot,'Bodoni MT','Big Caslon',Georgia,serif; font-weight:500;
  font-size:1.3rem; margin:0 0 10px; }
.mail-detail-meta{ font-size:.78rem; color:var(--graphite); margin:0 0 14px; line-height:1.6; }
.mail-detail-actions{ display:flex; gap:8px; }
.mail-detail-body{ padding:24px 28px; font-size:.9rem; line-height:1.7; overflow-y:auto; }
.mail-detail-text{ white-space:pre-wrap; }
.mail-detail-attachments{ padding:16px 28px; border-top:1px solid var(--hair); font-size:.82rem; }
.mail-detail-attachments a{ color:var(--gold-fg); text-decoration:none; }
.mail-detail-attachments a:hover{ text-decoration:underline; }

.mail-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(10,8,6,0.55); padding:20px; }
.mail-modal-panel{ background:var(--bg-a); border:1px solid var(--hair); max-width:560px; width:100%;
  max-height:90vh; overflow-y:auto; padding:24px; }
.mail-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;
  font-family:Didot,'Bodoni MT','Big Caslon',Georgia,serif; font-size:1.15rem; }
.mail-modal-close{ background:transparent; border:0; font-size:1.4rem; line-height:1; color:var(--ink);
  cursor:pointer; opacity:.6; }
.mail-modal-close:hover{ opacity:1; }
.mail-modal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; }

@media (max-width:1024px){
  .mail-body{ grid-template-columns:140px 160px 260px 1fr; }
}
@media (max-width:800px){
  .mail-shell{ height:auto; }
  .mail-body{ grid-template-columns:1fr; }
  .mail-col{ border-right:0; border-bottom:1px solid var(--hair); max-height:240px; }
  .mail-col-detail{ max-height:none; }
}