/* ============================================================
   Try Alma — live demo
   A simulated Outlook owners corporation inbox with Alma
   running as the add-in panel (mirrors addin/taskpane.*).
   Neutral cool-grey client shell; Alma keeps her brand
   identity (navy anchor, mid-blue accent, Fraunces + Inter).
   ============================================================ */

:root {
  /* Alma brand */
  --green:        #1C2E4A;   /* anchor deep navy */
  --green-deep:   #0E1A2B;
  --bg:           #F6F7F9;
  --surface:      #FFFFFF;
  --surface-warm: #EDF1F6;
  --ink:          #1C1D22;
  --muted:        #595E68;
  --brass:        #3B6EA5;   /* legislative mid-blue accent */
  --brass-deep:   #2F5982;
  --line:         #DDE2EA;

  /* Outlook-style shell (cool greys) */
  --sh-bg:        #E9ECF0;
  --sh-rail:      #F3F5F7;
  --sh-surface:   #FFFFFF;
  --sh-line:      #E2E5EA;
  --sh-line-soft: #EDEFF3;
  --sh-text:      #2A2F3A;
  --sh-muted:     #6B7280;
  --sh-hover:     #EFF2F6;
  --sh-sel:       #E6EEF8;
  --sh-topbar:    #FBFCFD;

  --radius: 14px;
  --radius-sm: 9px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--sh-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; line-height: 1; }
.wordmark__icon { align-self: center; flex: 0 0 auto; border-radius: 8px; display: block; }
.wordmark__alma { font-family: var(--serif); font-weight: 600; color: var(--green); letter-spacing: -0.01em; }
.wordmark--sm .wordmark__alma { font-size: 20px; }
.wordmark--lg .wordmark__alma { font-size: 40px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 12px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); }
.btn--accent { background: var(--brass); color: #fff; }
.btn--accent:hover { background: var(--brass-deep); }
.btn--ghost { background: var(--surface); color: var(--green); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--green); }
.btn--block { width: 100%; }
.btn--sm { font-size: 13.5px; padding: 9px 15px; }
.btn--xs { font-size: 12.5px; padding: 6px 12px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: default; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   PASSCODE GATE
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(59,110,165,.25), transparent 60%),
    var(--green);
}
.gate__card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 30px;
  box-shadow: 0 24px 60px rgba(14,26,43,.35);
}
.gate__title { font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--green); margin: 22px 0 8px; }
.gate__sub { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.gate__form { display: flex; flex-direction: column; gap: 12px; }
.gate__input {
  width: 100%; font-family: var(--sans); font-size: 16px; text-align: center;
  letter-spacing: 0.04em; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
.gate__input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(59,110,165,.18); }
.gate__err { color: #B42318; font-size: 13.5px; margin: 2px 0 0; }
.gate__foot { color: var(--muted); font-size: 12.5px; margin: 20px 0 0; opacity: .85; }

/* ============================================================
   SHELL
   ============================================================ */
.shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--sh-bg); }

.topbar {
  flex: 0 0 auto; height: 54px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  background: var(--sh-topbar); border-bottom: 1px solid var(--sh-line);
}
.topbar__app { display: inline-flex; align-items: center; gap: 11px; }
.topbar__outlook { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #0F6CBD; color: #fff; font-size: 15px; font-weight: 700; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
.topbar__mail { font-size: 15px; font-weight: 600; color: var(--sh-text); }
.topbar__search {
  flex: 1 1 auto; max-width: 460px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--sh-hover); border: 1px solid var(--sh-line);
  color: var(--sh-muted); font-size: 14px;
}
.topbar__brand { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }

.livebadge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--brass); background: #E6EDF5; border: 1px solid #C5D5E8;
  padding: 5px 11px; border-radius: 999px;
}
.livebadge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.shell__grid {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr) 410px;
  grid-template-areas: "list reader almap";
}

/* ---------- Left rail ---------- */
.rail {
  grid-area: rail; min-height: 0; overflow-y: auto;
  background: var(--sh-rail); border-right: 1px solid var(--sh-line);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.rail__account { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.rail__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.rail__acctext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rail__firm { font-size: 14px; font-weight: 600; color: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__who { font-size: 12px; color: var(--sh-muted); }
.rail__folders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail__folder {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--sh-text);
}
.rail__ficon { width: 16px; text-align: center; opacity: .7; font-size: 13px; }
.rail__folder.is-active { background: var(--sh-sel); color: var(--green); font-weight: 600; }
.rail__folder--muted { color: var(--sh-muted); cursor: default; }
.rail__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--brass); background: #E6EDF5; border-radius: 999px; padding: 1px 8px; }
.rail__note { margin-top: auto; padding: 12px 8px 4px; font-size: 11.5px; line-height: 1.5; color: var(--sh-muted); }

/* ---------- Message list ---------- */
.list {
  grid-area: list; min-height: 0; min-block-size: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sh-surface); border-right: 1px solid var(--sh-line);
}
.list__head {
  flex: 0 0 auto;
  padding: 14px 16px 11px; background: var(--sh-surface); border-bottom: 1px solid var(--sh-line-soft);
}
.list__headtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.list__title { font-size: 17px; font-weight: 700; color: var(--sh-text); }
.list__sub { display: block; font-size: 12px; color: var(--sh-muted); margin-top: 3px; }
.composebtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--brass-deep);
  background: #E6EDF5; border: 1px solid #C5D5E8; border-radius: var(--radius-sm);
  padding: 6px 11px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.composebtn:hover { background: #DAE6F4; border-color: var(--brass); }
.composebtn svg { display: block; }
/* Full flex-scroll recipe (E/U170): head stays put, the rows scroll. The .list
   column has definite height from the shell grid, so this holds the seeded
   emails plus however many are composed live. */
.list__items {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 0; min-height: 0; min-block-size: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.row {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 0 10px;
  padding: 12px 16px 12px 12px; border-bottom: 1px solid var(--sh-line-soft);
  cursor: pointer; transition: background .12s ease;
}
.row:hover { background: var(--sh-hover); }
.row.is-selected { background: var(--sh-sel); box-shadow: inset 3px 0 0 var(--brass); }
.row__dot { grid-row: 1 / span 4; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); margin-top: 2px; }
.row__dot.is-read { background: transparent; }
.row__line1 { grid-column: 2 / span 2; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.row__sender { font-size: 14px; color: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-unread .row__sender { font-weight: 700; }
.row__time { font-size: 11.5px; color: var(--sh-muted); white-space: nowrap; flex: 0 0 auto; }
.row__subject { grid-column: 2 / span 2; font-size: 13.5px; color: var(--sh-text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-unread .row__subject { font-weight: 600; }
.row__oc { grid-column: 2 / span 2; font-size: 11px; color: var(--brass-deep); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.row__preview { grid-column: 2 / span 2; font-size: 12.5px; color: var(--sh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Reading pane ---------- */
.reader {
  grid-area: reader; min-height: 0; overflow-y: auto;
  background: var(--sh-surface);
}
.reader__empty { max-width: 420px; margin: 14vh auto 0; padding: 0 28px; text-align: center; }
.reader__emptymark img { display: block; margin: 0 auto 16px; border-radius: 10px; opacity: .9; }
.reader__emptytitle { font-family: var(--serif); font-size: 22px; color: var(--green); margin: 0 0 8px; }
.reader__emptysub { font-size: 14.5px; color: var(--sh-muted); margin: 0; line-height: 1.6; }
.reader__steps {
  text-align: left; margin: 16px auto 14px; padding-left: 22px; max-width: 400px;
  font-size: 14.5px; color: var(--sh-muted); line-height: 1.6;
}
.reader__steps li { margin: 0 0 10px; }
.reader__steps li:last-child { margin-bottom: 0; }
.reader__steps strong { color: var(--green); font-weight: 600; }
.reader__msg { padding: 26px 32px 40px; max-width: 760px; }
.reader__back {
  display: none; align-items: center; gap: 4px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--brass);
  background: none; border: none; padding: 0 0 14px; cursor: pointer;
}
.reader__subject { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.2; color: var(--green); margin: 0 0 16px; }
.reader__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reader__oc { font-size: 12.5px; font-weight: 500; color: var(--brass-deep); margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--sh-line-soft); }
.reader__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 600;
  background: var(--brass);
}
.reader__metatext { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.reader__from { font-size: 14.5px; font-weight: 600; color: var(--sh-text); }
.reader__to { font-size: 12.5px; color: var(--sh-muted); }
.reader__time { margin-left: auto; font-size: 12.5px; color: var(--sh-muted); white-space: nowrap; }
.reader__body { font-size: 15.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; }

/* ============================================================
   ALMA ADD-IN PANEL (mirrors addin/taskpane)
   ============================================================ */
.almap {
  grid-area: almap; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 3px solid var(--brass);
  box-shadow: -6px 0 18px rgba(14,26,43,.05);
}
.almap__masthead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 11px;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--line);
  position: relative;
}
.almap__brandmark img { display: block; border-radius: 7px; }
.almap__brandtext { display: flex; flex-direction: column; line-height: 1.3; }
.almap__name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--green); }
.almap__tagline { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* SETTINGS dropdown next to the Alma icon: voice profile + building files + demo controls */
.almap__settings { margin-left: auto; flex: 0 0 auto; position: relative; }
.almap__gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.almap__gear:hover { color: var(--green); border-color: var(--green); }
.almap__gear[aria-expanded="true"] { color: var(--green); border-color: var(--brass); background: var(--surface-warm); }
.almap__gear svg { display: block; }

.settingsmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(360px, calc(100vw - 24px));
  max-height: min(72vh, 560px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(14,26,43,.18);
  overflow: hidden;
}
.settingsmenu[hidden] { display: none; }
.settingsmenu__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 11px; border-bottom: 1px solid var(--line);
}
.settingsmenu__title { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--green); }
.settingsmenu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1;
}
.settingsmenu__close:hover { color: var(--green); background: var(--surface-warm); }
.settingsmenu__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.settingsmenu__section + .settingsmenu__section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.settingsmenu__sectitle { margin: 0 0 4px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--green); }
.settingsmenu__secsub { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.settingsmenu__portfolio {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--brass-deep);
  background: rgba(59,110,165,.08); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; font-variant-numeric: tabular-nums;
}
.settingsmenu__sops { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.settingsmenu__sops li { margin: 0 0 7px; }
.settingsmenu__sops li:last-child { margin-bottom: 0; }
/* In-menu the voice panel sits flush (the section frames it), so drop its own margin */
.settingsmenu .voicepanel { margin-top: 0; }

.settingsmenu__buildings { display: flex; flex-direction: column; gap: 7px; }
.bcard {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.bcard.is-active { border-color: var(--brass); background: var(--sh-sel); }
.bcard__top { display: flex; align-items: center; gap: 8px; }
.bcard__name { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--green); }
.bcard__active {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--brass-deep);
  background: #E6EEF8; border: 1px solid #CFE0F1; border-radius: 999px; padding: 1px 8px;
}
.bcard__plan { font-size: 11.5px; color: var(--brass-deep); font-variant-numeric: tabular-nums; }
.bcard__meta { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.settingsmenu__empty { font-size: 12px; color: var(--muted); }

.almap__tabs {
  flex: 0 0 auto; display: flex; gap: 4px; margin: 14px 16px 0;
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.almap__tab {
  flex: 1; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: transparent; border: none; cursor: pointer; padding: 8px 10px; border-radius: 999px; transition: all .15s ease;
}
.almap__tab.is-active { background: var(--surface); color: var(--green); box-shadow: 0 1px 4px rgba(14,26,43,.12); }

.almap__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.almap__card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.almap__cardhead {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.almap__rsubject { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.almap__rsnippet {
  margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.almap__rsubject.is-empty { color: var(--muted); font-weight: 500; }

/* Sender (recipient doctrine) picker on the Reply control */
.almap__recip { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.almap__reciplabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.almap__recipsel {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; appearance: auto;
}
.almap__recipsel:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(59,110,165,.15); }
.almap__reciphint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.almap__qaarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--ink);
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); resize: vertical; min-height: 92px;
}
.almap__qaarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(59,110,165,.15); }
.almap__qacount { display: block; text-align: right; font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.almap__examples {  }
.almap__exlabel { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.almap__exrow { display: flex; flex-direction: column; gap: 7px; }
.almap__ex {
  text-align: left; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--green);
  background: #EEF3F8; border: 1px solid #D3E0EE; border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; transition: all .15s ease;
}
.almap__ex:hover { background: #E1EAF4; border-color: var(--brass); }

.almap__hint { font-size: 12px; color: var(--muted); margin: 0; text-align: center; line-height: 1.5; }

/* ---------- Train Alma on your voice (Piece 3) + before/after toggle (Piece 4) ---------- */
.voicepanel {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.voicepanel__summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--green);
}
.voicepanel__summary::-webkit-details-marker { display: none; }
.voicepanel__title { flex: 1 1 auto; }
.voicepanel__badge {
  font-size: 11px; font-weight: 600; color: var(--brass-deep);
  background: #E6EEF8; border: 1px solid #CFE0F1; border-radius: 999px; padding: 2px 9px;
}
.voicepanel__chevron {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease; margin-left: 2px;
}
.voicepanel[open] .voicepanel__chevron { transform: rotate(225deg); }
.voicepanel__body { padding: 0 14px 14px; }
.voicepanel__intro { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.voicepanel__area { min-height: 112px; }
.voicepanel__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.voicepanel__status { font-size: 12px; line-height: 1.45; margin: 10px 0 0; color: var(--muted); }
.voicepanel__status.is-ok { color: var(--brass-deep); }
.voicepanel__status.is-err { color: #B23A2E; }
.voicepanel__captured { margin-top: 12px; border-top: 1px solid var(--sh-line-soft); padding-top: 10px; }
.voicepanel__capsum { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--green); list-style: none; }
.voicepanel__capsum::-webkit-details-marker { display: none; }
.voicepanel__capbody {
  margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink);
  max-height: 260px; overflow: auto;
}
.voicepanel__capbody p { margin: 0 0 7px; }
.voicepanel__capbody ul { margin: 0 0 8px; padding-left: 18px; }

.voicetoggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.voicetoggle__label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.voicetoggle__note { flex-basis: 100%; font-size: 11px; line-height: 1.45; color: var(--muted); }
.voicetoggle__btns { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg); }
.voicetoggle__opt {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 0; background: transparent; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.voicetoggle__opt.is-active { background: var(--brass); color: #fff; }

.result__pending { font-size: 13.5px; color: var(--muted); font-style: italic; margin: 0 0 8px; }

/* ---------- Building profile ---------- */
.bprof { display: flex; flex-direction: column; gap: 12px; }
.bprof__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bprof__plan { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--green); }
.bprof__tier {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--green);
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.bprof__type { margin: -6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bprof__addr { margin: -8px 0 2px; font-size: 12px; color: var(--muted); }
.bprof__label {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 2px;
}
.bprof__boundary {
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.bprof__boundary p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.bprof__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bprof__table th {
  text-align: left; font-weight: 600; color: var(--ink); padding: 7px 8px 7px 0;
  vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--line); width: 42%;
}
.bprof__table td {
  padding: 7px 0 7px 8px; vertical-align: top; line-height: 1.4;
  border-bottom: 1px solid var(--line); color: var(--muted);
}
.bprof__table tr:last-child th, .bprof__table tr:last-child td { border-bottom: none; }
.bprof__table td.is-common { color: #1f6b4a; font-weight: 600; }
.bprof__table td.is-lot { color: #9a5a12; font-weight: 600; }
.bprof__table td.is-mixed { color: var(--ink); }
.bprof__rules { margin: 4px 0 0; padding-left: 18px; }
.bprof__rules li { font-size: 12.5px; line-height: 1.5; color: var(--ink); margin-bottom: 5px; }
.bprof__line { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.bprof__note {
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px;
}
.bprof__note p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.bprof__prov { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); font-style: italic; }
.bprof__empty { text-align: center; padding: 18px 8px; }
.bprof__emptytitle { font-family: var(--serif); font-size: 16px; color: var(--green); margin: 0 0 6px; }
.bprof__emptysub { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- Thinking ---------- */
.thinking { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 18px; text-align: center; }
.thinking__head { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.thinking__mark img { display: block; border-radius: 6px; }
.thinking__dots { display: inline-flex; gap: 5px; }
.thinking__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); animation: bounce 1.1s ease-in-out infinite; }
.thinking__dots span:nth-child(2) { animation-delay: .18s; }
.thinking__dots span:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.thinking__msg { font-family: var(--serif); font-size: 17.5px; color: var(--green); margin: 0 0 14px; min-height: 1.3em; transition: opacity .3s ease; }
.thinking__bar { height: 5px; background: var(--surface-warm); border-radius: 999px; overflow: hidden; }
.thinking__fill { height: 100%; width: 35%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brass), transparent); animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
.thinking__reassure { font-size: 12.5px; color: var(--muted); margin: 13px 0 0; line-height: 1.5; }

/* ---------- Result ---------- */
.result { display: flex; flex-direction: column; }
.result__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.result__tag {
  font-size: 11px; font-weight: 600; color: var(--brass-deep);
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
}
.result__grounding {
  font-family: inherit; font-size: 11px; font-weight: 600; color: #1f6b4a;
  background: rgba(31,107,74,.08); border: 1px solid rgba(31,107,74,.28); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap; cursor: pointer; margin-right: auto;
}
.result__grounding::before { content: '✓'; margin-right: 5px; font-weight: 700; }
.result__grounding:hover { background: rgba(31,107,74,.14); }
.result__body {
  font-size: 14.5px; line-height: 1.65; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px;
}
.result__body p { margin: 0 0 12px; }
.result__body p:last-child { margin-bottom: 0; }
.result__body strong { color: var(--green); }
.result__body ul { margin: 0 0 12px; padding-left: 18px; }
.result__body li { margin: 0 0 6px; }
.result__body .cite-section { color: var(--brass); font-weight: 600; }

.result__citebox { margin-top: 14px; padding: 14px 15px; background: var(--surface-warm); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--radius-sm); }
.result__citebox.is-flash { animation: citeflash 1.2s ease 1; }
@keyframes citeflash { 0% { background: #E6EDF5; border-color: var(--brass); } 100% { background: var(--surface-warm); } }
.result__citehead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 9px; }
.result__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.result__citelist { font-size: 13px; line-height: 1.6; color: var(--ink); }
.result__citelist:not(:empty) { margin-top: 11px; }
.result__citelist p { margin: 0 0 7px; }
.result__citelist p:last-child { margin-bottom: 0; }
.result__citelist ul { margin: 0; padding-left: 16px; }
.result__citelist li { margin: 0 0 6px; }
.result__citelist .cite-section { color: var(--brass); font-weight: 600; }
.result__citelist strong { color: var(--green); }
.chip {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--brass-deep); background: #E6EDF5; border: 1px solid #C5D5E8;
  border-radius: 999px; padding: 4px 10px;
}
.result__disc { font-size: 11.5px; color: var(--muted); margin: 13px 0 0; line-height: 1.5; }

/* ---------- Error (always offers retry) ---------- */
.errbox { background: #FEF3F2; border: 1px solid #FECDCA; border-radius: var(--radius-sm); padding: 15px 16px; display: flex; flex-direction: column; gap: 12px; }
.errbox__msg { margin: 0; color: #B42318; font-size: 14px; line-height: 1.5; }
.errbox .btn { align-self: flex-start; }

/* ---------- Alma panel footer ---------- */
.almap__foot { flex: 0 0 auto; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.almap__footline { margin: 0; font-size: 12px; font-weight: 500; color: var(--green); }
.almap__footmeta { margin: 4px 0 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Live typing caret ---------- */
.type-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--brass);
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============================================================
   ASK TAB — threaded conversation (stacked transcript + reply box)
   The transcript flows in the normal scroll of .almap__scroll (never pinned), so
   on a phone it scrolls with the page and the composer below stays reachable.
   ============================================================ */
.qathread { display: flex; flex-direction: column; gap: 14px; }
.qaturn { display: flex; flex-direction: column; }
.qaturn__who {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
}
.qaturn__who--alma { display: inline-flex; align-items: center; gap: 6px; color: var(--brass-deep); }
.qaturn__who--alma img { display: block; border-radius: 5px; }
.qaturn--user .qaturn__usertext {
  font-size: 14px; line-height: 1.55; color: var(--ink);
  background: #EEF3F8; border: 1px solid #D3E0EE; border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.qaturn__body {
  font-size: 14.5px; line-height: 1.65; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px;
}
.qaturn__body p { margin: 0 0 12px; }
.qaturn__body p:last-child { margin-bottom: 0; }
.qaturn__body strong { color: var(--green); }
.qaturn__body ul { margin: 0 0 12px; padding-left: 18px; }
.qaturn__body li { margin: 0 0 6px; }
.qaturn__body .cite-section { color: var(--brass); font-weight: 600; }
/* citations keep their own box on every Alma turn, never threaded inline */
.qaturn__citebox { margin-top: 12px; padding: 14px 15px; background: var(--surface-warm); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qaturn__citehead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 9px; }
.qaturn__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.qaturn__citelist { font-size: 13px; line-height: 1.6; color: var(--ink); }
.qaturn__citelist:not(:empty) { margin-top: 11px; }
.qaturn__citelist p { margin: 0 0 7px; }
.qaturn__citelist p:last-child { margin-bottom: 0; }
.qaturn__citelist ul { margin: 0; padding-left: 16px; }
.qaturn__citelist li { margin: 0 0 6px; }
.qaturn__citelist .cite-section { color: var(--brass); font-weight: 600; }
.qaturn__citelist strong { color: var(--green); }
/* per-turn thinking + error states */
.qaturn__thinking {
  display: inline-flex; align-items: center; gap: 11px; align-self: flex-start;
  padding: 13px 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.qaturn__dots { display: inline-flex; gap: 5px; }
.qaturn__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); animation: bounce 1.1s ease-in-out infinite; }
.qaturn__dots span:nth-child(2) { animation-delay: .18s; }
.qaturn__dots span:nth-child(3) { animation-delay: .36s; }
.qaturn__thinkmsg { font-family: var(--serif); font-size: 15px; color: var(--green); }
.qaturn__err { background: #FEF3F2; border: 1px solid #FECDCA; border-radius: var(--radius-sm); padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; }
.qaturn__errmsg { margin: 0; color: #B42318; font-size: 13.5px; line-height: 1.5; }
.qaturn__err .btn { align-self: flex-start; }
/* composer head: title + "New question" reset control */
.qacomposer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.qacomposer__head .almap__cardhead { margin: 0; }
.qathread__new {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--brass-deep);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; cursor: pointer; transition: all .15s ease;
}
.qathread__new:hover { border-color: var(--brass); background: var(--surface-warm); }

/* ============================================================
   COMPOSE (drop a test email into the inbox)
   ============================================================ */
.compose { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
.compose__backdrop { position: absolute; inset: 0; background: rgba(14,26,43,.45); }
.compose__dialog {
  position: relative; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(14,26,43,.4); padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.compose__head { display: flex; align-items: center; justify-content: space-between; }
.compose__title { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--green); }
.compose__close { font-size: 24px; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0 4px; }
.compose__close:hover { color: var(--ink); }
.compose__sub { margin: -4px 0 4px; font-size: 13px; color: var(--muted); }
.compose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.compose__field { display: flex; flex-direction: column; gap: 5px; }
.compose__field > span { font-size: 12px; font-weight: 600; color: var(--ink); }
.compose__field input, .compose__field textarea, .compose__field select {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); resize: vertical;
}
.compose__field select { cursor: pointer; appearance: auto; }
.compose__field input:focus, .compose__field textarea:focus, .compose__field select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(59,110,165,.15); }
.compose__err { margin: 0; color: #B42318; font-size: 13px; }
.compose__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop: drop the folder rail, keep list + reader + Alma panel */
@media (max-width: 1180px) {
  .shell__grid { grid-template-columns: 312px minmax(0, 1fr) 388px; grid-template-areas: "list reader almap"; }
  .rail { display: none; }
}

@media (max-width: 1024px) {
  .shell__grid { grid-template-columns: 284px minmax(0, 1fr) 364px; }
  .reader__msg { padding: 22px 24px 36px; }
}

/* Narrow / tablet: list on the left, reader and Alma panel stacked on the right */
@media (max-width: 900px) {
  .shell__grid {
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "list reader"
      "list almap";
  }
  .almap { border-left: none; border-top: 3px solid var(--brass); box-shadow: 0 -6px 18px rgba(14,26,43,.05); }
}

/* Phone: single scrolling column. Release the fixed-viewport pinning so the page
   flows as a normal scrolling document, the inbox list scrolls internally (capped),
   and the reader + Alma panel + footer are reachable by scrolling the page. */
@media (max-width: 680px) {
  .topbar__search { display: none; }
  .topbar { gap: 10px; }
  /* release the viewport-height lock so the document can grow and scroll natively */
  html, body { height: auto; }
  .shell { position: static; height: auto; min-height: 100%; }
  /* stack as a flowing flex column instead of a height-constrained grid */
  .shell__grid {
    display: flex; flex-direction: column;
    overflow: visible; min-height: 0;
  }
  .list { max-height: 60vh; border-right: none; border-bottom: 1px solid var(--sh-line); }
  /* In a flowing flex column .list has no definite height, so the rows track
     (flex: 1 1 0) would collapse to 0. Give it natural height with an internal
     scroll cap so the rows render and scroll while the page scrolls for the rest. */
  .list__items { flex: none; max-height: 52vh; }
  .reader, .almap { overflow: visible; min-height: 0; }
  .almap { border-top: 3px solid var(--brass); }
  .reader__empty { margin-top: 8vh; }
  .reader__back { display: inline-flex; }
  .reader__msg { padding: 20px 18px 30px; }
  .compose { padding: 4vh 12px; }
  .compose__grid { grid-template-columns: 1fr; }
}

/* ---- email → building relevance box (Building tab) ---- */
.bprof__rel {
  background: var(--surface-warm); border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm); padding: 12px 13px; display: flex; flex-direction: column; gap: 8px;
}
.bprof__relhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bprof__relkicker { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brass-deep); }
.bprof__relbadge { font-size: 11px; font-weight: 600; color: var(--green); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.bprof__rellist { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bprof__relitem { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.bprof__relitem.is-rule { font-weight: 500; }
.bprof__reltag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1f6b4a; background: rgba(31,107,74,.10); border-radius: 4px; padding: 1px 6px; margin-right: 4px; }
.bprof__relprov { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); font-style: italic; }
/* live Alma relevance note (the real pass landed) */
.bprof__rel.is-live { border-left-color: var(--green); }
.bprof__relnote { font-size: 12.5px; line-height: 1.55; color: var(--ink); display: flex; flex-direction: column; gap: 7px; }
.bprof__relnote p { margin: 0; }
.bprof__relnote .cite-section { font-weight: 600; color: var(--brass-deep); }
/* reading state: the keyword fallback is shown while the live pass computes */
.bprof__rel.is-loading { border-left-color: var(--brass); }
.bprof__relprov--pulse { color: var(--brass-deep); font-style: normal; font-weight: 600; animation: almaPulse 1.3s ease-in-out infinite; }

/* ---- tab dots: a background job running / ready on the open email ---- */
.almap__tab { position: relative; }
.almap__tab.has-run::after, .almap__tab.has-ready::after {
  content: ''; position: absolute; top: 5px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
}
.almap__tab.has-ready::after { background: var(--brass); }
.almap__tab.has-run::after { background: #1f6b4a; animation: almaPulse 1.1s ease-in-out infinite; }
@keyframes almaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- inbox row activity badge: concurrent jobs are legible in the list ---- */
.row__alma {
  grid-column: 2 / span 2; justify-self: start; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center;
}
.row.is-generating .row__alma { color: #1f6b4a; background: rgba(31,107,74,.10); }
.row.is-generating .row__alma::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1f6b4a;
  margin-right: 5px; animation: almaPulse 1.1s ease-in-out infinite;
}
.row.is-ready .row__alma { color: var(--brass-deep); background: rgba(59,110,165,.12); }
.row.is-ready .row__alma::before { content: '●'; margin-right: 5px; color: var(--brass); }
.row.is-failed .row__alma { color: #a23a2e; background: rgba(162,58,46,.10); }
.row.is-failed .row__alma::before { content: '!'; margin-right: 5px; font-weight: 800; color: #a23a2e; }

/* ---- confidence: review-order signal on ready rows (red first, amber next, green skims) ---- */
.row.is-ready.conf-red .row__alma { color: #a23a2e; background: rgba(162,58,46,.10); }
.row.is-ready.conf-red .row__alma::before { color: #a23a2e; }
.row.is-ready.conf-amber .row__alma { color: #8a6116; background: rgba(176,128,31,.13); }
.row.is-ready.conf-amber .row__alma::before { color: #b0801f; }

/* ---- first-run pointer: pairs with the three-step guide in the reading pane ---- */
.row__start {
  grid-column: 2 / span 2; justify-self: start; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center;
  color: #1f6b4a; background: rgba(31,107,74,.10); border: 1px solid rgba(31,107,74,.22);
}
.row__start::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1f6b4a;
  margin-right: 5px; animation: almaPulse 1.1s ease-in-out infinite;
}

/* ---- morning triage: "Draft all unread" + live batch strip in the list head ---- */
.triage { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.triage__btn { padding: 9px 14px; font-size: 13.5px; }
.triage__note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--sh-muted); }
.triage__strip {
  margin: 1px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.45;
  color: var(--brass-deep); background: rgba(59,110,165,.10);
  border: 1px solid var(--sh-line-soft); border-radius: var(--radius-sm);
  padding: 6px 10px; font-variant-numeric: tabular-nums;
}
.triage__strip.is-working::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #1f6b4a; margin-right: 6px; vertical-align: middle;
  animation: almaPulse 1.1s ease-in-out infinite;
}
.triage__strip.is-done { color: #1f6b4a; background: rgba(31,107,74,.10); }
.triage__strip.has-failed { color: #a23a2e; background: rgba(162,58,46,.09); }

@media (prefers-reduced-motion: reduce) {
  .livebadge__dot, .thinking__dots span, .thinking__fill, .type-caret, .qaturn__dots span { animation: none; }
  .almap__tab.has-run::after, .row.is-generating .row__alma::before,
  .triage__strip.is-working::before, .row__start::before { animation: none; }
  .result__citebox.is-flash { animation: none; }
  .btn:active { transform: none; }
}