/* QTS Community Hub
   Poppins 400 and 500 only. Weight never goes above 500.
   Emphasis comes from scale, letterspacing, gold, and contrast. */

:root {
  --navy: #0B1B3A;
  --navy-deep: #06122A;
  --ink: #14181F;
  --ink-soft: #4A4E57;

  --gold: #C08A3E;
  --gold-light: #E3C078;
  --gold-pale: #F0DCA8;
  --gold-deep: #8F6522;
  --gold-wash: #FBF4E6;
  --gold-line: #E0CB9C;

  --coal: #12100C;
  --coal-soft: #1B1810;
  --coal-line: #3A3324;
  --coal-text: #F7F3E9;
  --coal-muted: #8A8578;

  --paper: #F6F3EC;
  --card: #FFFFFF;
  --hair: #E4DFD2;
  --muted: #7A7466;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 24, 31, .04), 0 10px 28px rgba(20, 24, 31, .05);
  --tabh: 64px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--navy); }
img { max-width: 100%; display: block; }

/* Seal band */
.seal {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  padding-top: env(safe-area-inset-top);
}

.seal-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 11px 18px;
}

.back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border-radius: 50%;
  color: var(--navy);
  flex: none;
}
.back svg { width: 21px; height: 21px; }
.back:active { background: var(--paper); }

.seal-mark { display: flex; align-items: center; flex: none; }
.seal-mark img { height: 26px; width: auto; }
.seal-word {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--navy);
}

.seal-rule {
  width: 1px;
  height: 22px;
  flex: none;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-deep));
}

.seal-label {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-link { margin-left: auto; flex: none; }

.foil {
  height: 3px;
  background: linear-gradient(90deg,
    var(--gold-deep) 0%, var(--gold) 22%, var(--gold-pale) 46%,
    var(--gold) 70%, var(--gold-deep) 100%);
}

/* Dark tier band */
.crest-band {
  background: var(--coal);
  color: var(--coal-text);
}
.crest-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.crest-badge {
  width: 62px;
  height: 62px;
  object-fit: contain;
  flex: none;
}
.crest-text { min-width: 0; }
.crest-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.crest-eyebrow .tick { background: url("mark.png") center / contain no-repeat; }
.crest-title {
  margin: 0;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--coal-text);
}
.crest-blurb {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--coal-muted);
  line-height: 1.55;
}

/* Layout */
.shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px calc(var(--tabh) + 34px + env(safe-area-inset-bottom));
}
.shell-tight { padding-top: 18px; }
.shell-plain { padding-bottom: 44px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.tick {
  width: 15px;
  height: 15px;
  background: url("mark.png") center / contain no-repeat;
  flex: none;
}

h1 {
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.14;
  margin: 0 0 6px;
  color: var(--ink);
}
h2 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 8px;
}
.lede {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14.5px;
}

.section-gap { margin-top: 30px; }

/* Avatars */
.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-pale);
  font-size: 12.5px;
  letter-spacing: .05em;
  box-shadow: 0 0 0 1.5px var(--gold);
  flex: none;
}
.avatar.sm {
  width: 32px;
  height: 32px;
  font-size: 10.5px;
}

/* Room rail */
.rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 18px 16px;
  margin: 0 -18px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip.is-on {
  background: var(--coal);
  border-color: var(--coal);
  color: var(--gold-pale);
}

/* Cards */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 15px;
  box-shadow: var(--shadow);
}
.card.pinned::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale), var(--gold));
}

.room-card { display: block; text-decoration: none; color: inherit; }
.room-card .name { font-weight: 500; letter-spacing: -.015em; font-size: 15.5px; }
.room-card .blurb { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.room-card .meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-label {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}

.team-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
}
.team-badge {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
}

/* Post */
.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.post-head .who { min-width: 0; }
.post-head .name { font-weight: 500; font-size: 14px; letter-spacing: -.01em; }
.post-head .sub { color: var(--muted); font-size: 11.5px; }
.pin-flag {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  flex: none;
}

.post-body { font-size: 15px; }
.post-body p { margin: 0 0 12px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body a { word-break: break-word; }

.post-image {
  display: block;
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper);
}
.post-image img { width: 100%; height: auto; display: block; }

.doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--gold-line);
  background: var(--gold-wash);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.doc-card:hover { border-color: var(--gold); }
.doc-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--navy);
  color: var(--gold-pale);
  font-size: 9px;
  letter-spacing: .1em;
}
.doc-meta { min-width: 0; flex: 1; }
.doc-name {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-sub { font-size: 11.5px; color: var(--muted); }

.post-link {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--gold-pale);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .01em;
}
.post-link:active { background: var(--navy-deep); }

.post-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--hair);
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
}
.act svg { width: 18px; height: 18px; }
.act:hover { background: var(--paper); }
.act .count { font-variant-numeric: tabular-nums; }

/* Reactions */
.react-tally {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
}
.react-faces { display: inline-flex; align-items: center; }
.face { font-size: 15px; line-height: 1; }
.react-faces .face {
  margin-left: -4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff;
}
.react-faces .face:first-child { margin-left: 0; }
.react-total { font-variant-numeric: tabular-nums; }

.react-wrap { position: relative; }
.react-trigger.is-on {
  color: var(--gold-deep);
  border-color: var(--gold-line);
  background: var(--gold-wash);
}

.react-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(20, 24, 31, .18);
}
.react-menu[hidden] { display: none; }

.react-opt {
  border: none;
  background: none;
  font-size: 21px;
  line-height: 1;
  padding: 6px 7px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.react-opt:hover { transform: scale(1.22); background: var(--paper); }
.react-opt.is-on { background: var(--gold-wash); box-shadow: 0 0 0 1.5px var(--gold-line); }

/* Forms */
label.field { display: block; margin-bottom: 15px; }
label.field > span {
  display: block;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}
textarea { min-height: 116px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, .16);
}

.btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold-pale);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 8px;
  padding: 13px 20px;
  cursor: pointer;
  text-decoration: none;
}
.btn:active { background: var(--navy-deep); }

.btn.gold {
  color: #2C1E08;
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-light) 45%, var(--gold));
}
.btn.ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--hair);
}
.btn.ghost:hover { border-color: var(--gold); }
.btn.slim { width: auto; padding: 9px 16px; font-size: 13px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }

.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }

.flash {
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  color: #5C4211;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 14px;
}
.error {
  background: #FBEEEC;
  border: 1px solid #E4C2BC;
  color: #8A2B1B;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 14px;
}

.empty {
  text-align: center;
  padding: 46px 22px;
  border: 1px dashed var(--hair);
  border-radius: var(--radius);
  color: var(--muted);
  background: #fff;
}
.empty strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Composer extras */
.compose-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tool-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--hair);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.tool-pick:hover { border-color: var(--gold); color: var(--ink); }
.tool-pick svg { width: 18px; height: 18px; }

.photo-preview, .doc-chosen {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
}
.photo-preview img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: contain;
  background: var(--paper);
}
.doc-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--gold-wash);
  border-color: var(--gold-line);
  font-size: 13.5px;
}
.photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(18, 16, 12, .8);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.doc-chosen .photo-clear { position: static; margin-left: auto; }

.schedule-box {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper);
}
.schedule-box[hidden] { display: none; }

.queued-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Comments */
.comment {
  display: flex;
  gap: 11px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.comment:last-child { border-bottom: none; }
.comment .bubble { min-width: 0; flex: 1; }
.comment .name { font-size: 13.5px; font-weight: 500; }
.comment .when { color: var(--muted); font-size: 11px; }
.comment .text { font-size: 14px; margin-top: 3px; overflow-wrap: break-word; }

.composer {
  position: sticky;
  bottom: calc(var(--tabh) + env(safe-area-inset-bottom));
  background: var(--paper);
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.composer form { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 46px; height: 46px; padding: 12px 14px; }
.composer .btn { width: auto; flex: none; padding: 13px 18px; }

/* Sign in */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, #1E1A12 0%, var(--coal) 55%, #0A0906 100%);
}
.gate-card {
  width: 100%;
  max-width: 384px;
  background: #fff;
  border-radius: 16px;
  padding: 0 0 26px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}
.gate-foil {
  height: 4px;
  background: linear-gradient(90deg,
    var(--gold-deep), var(--gold) 22%, var(--gold-pale) 46%, var(--gold) 70%, var(--gold-deep));
}
.gate-body { padding: 30px 26px 0; }
.gate-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  transform: rotate(45deg);
  background: var(--navy);
  border: 2px solid var(--gold);
  border-radius: 6px;
}
.gate h1 { text-align: center; font-size: 22px; }
.gate .lede { text-align: center; font-size: 13.5px; margin-bottom: 24px; }
.gate .foot {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* Bottom navigation */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: var(--coal);
  border-top: 1px solid var(--coal-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  display: grid;
  place-items: center;
  gap: 3px;
  height: var(--tabh);
  color: var(--coal-muted);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .06em;
}
.tab svg { width: 21px; height: 21px; }
.tab.is-on { color: var(--gold-pale); }
.tab.is-on svg { stroke: var(--gold); }

/* Manage rows */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { font-weight: 500; font-size: 14.5px; }
.list-row .sub { color: var(--muted); font-size: 12.5px; }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.tag.admin { background: #EAEEF7; color: var(--navy); }
.tag.gold { background: var(--gold-wash); color: var(--gold-deep); }

code.invite {
  display: block;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  word-break: break-all;
  margin-top: 8px;
}

.badge-form { display: flex; gap: 8px; margin: 10px 0 4px; }
.badge-form input { flex: 1; font-size: 13px; padding: 9px 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 420px) {
  .crest-badge { width: 52px; height: 52px; }
  .crest-title { font-size: 24px; }
  .react-menu { left: -6px; }
  .react-opt { font-size: 19px; padding: 5px 5px; }
}

@media (min-width: 700px) {
  body { font-size: 15.5px; }
  h1 { font-size: 33px; }
  .crest-title { font-size: 31px; }
}

/* Layout: sidebar on desktop, bottom bar on phones */
.nav-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.layout { display: block; }
.main { min-width: 0; }

.side { display: none; }

.side-seal {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
}
.side-seal .seal-mark img { height: 24px; }

.side-nav { padding: 16px 10px 0; }

.side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #B5B0A2;
  text-decoration: none;
  font-size: 13.5px;
  margin-bottom: 3px;
}
.side-item svg { width: 20px; height: 20px; flex: none; }
.side-item:hover { background: #1B1810; color: var(--coal-text); }
.side-item.is-on {
  background: #241F14;
  color: var(--coal-text);
  box-shadow: inset 2px 0 0 var(--gold);
}
.side-count {
  margin-left: auto;
  background: var(--gold);
  color: #2C1E08;
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.side-heading {
  margin: 22px 14px 8px;
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6E6A5E;
}
.side-groups { padding: 0 10px; }
.side-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  color: #B5B0A2;
  text-decoration: none;
  font-size: 12.5px;
}
.side-group:hover { background: #1B1810; color: var(--coal-text); }
.side-group img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.side-group .orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #1B3A72, var(--navy));
  box-shadow: 0 0 0 1.5px var(--gold);
}

/* Bottom bar glyphs */
.tab-glyph { display: block; line-height: 0; }
.tab-glyph svg { width: 22px; height: 22px; }
.tab { position: relative; }
.tab-label { display: block; }
.tab-count {
  position: absolute;
  top: 9px;
  left: 50%;
  margin-left: 6px;
  background: var(--gold);
  color: #2C1E08;
  font-size: 9.5px;
  line-height: 1;
  border-radius: 999px;
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .layout {
    display: flex;
    align-items: flex-start;
    min-height: 100dvh;
  }
  .side {
    display: block;
    position: sticky;
    top: 0;
    z-index: 30;
    width: 232px;
    flex: none;

    /* Stretch would make this as tall as the whole page, which leaves
       sticky nothing to hold against, so it scrolled away with the
       content. Held to the top of the flex row and exactly one screen
       tall, it stays put while the page moves beside it. */
    align-self: flex-start;
    height: 100dvh;

    /* If the nav itself is taller than the screen, it scrolls inside
       its own column rather than pushing the page taller. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;

    background: var(--coal);
    padding-bottom: 24px;
  }
  .side::-webkit-scrollbar { width: 6px; }
  .side::-webkit-scrollbar-thumb { background: #2A2419; border-radius: 3px; }
  .side::-webkit-scrollbar-track { background: transparent; }
  .main {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #2A2419;
  }
  .main > .seal { padding-top: 0; }
  .seal-inner { max-width: none; padding: 13px 30px; }
  .crest-inner { max-width: none; padding: 26px 30px 28px; }
  .shell {
    max-width: 760px;
    margin: 0;
    padding: 26px 30px 60px;
  }
  .tabbar { display: none; }
  .main > .seal .seal-mark,
  .main > .seal .seal-rule { display: none; }
}

@media (min-width: 900px) {
  .rail {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 2px 0 18px;
  }
}

@media (min-width: 1240px) {
  .shell { max-width: 820px; }
}

.gate-mark-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
}

/* Admin editors */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.editor {
  margin: 12px 0 4px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper);
}
.editor > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--muted);
  list-style: none;
}
.editor > summary::-webkit-details-marker { display: none; }
.editor > summary::before { content: "+ "; color: var(--gold); }
.editor[open] > summary::before { content: "\2212  "; }
.editor[open] > summary { border-bottom: 1px solid var(--hair); color: var(--ink); }
.editor > form { padding: 14px; }
.editor > form + form { border-top: 1px solid var(--hair); }
.editor.tight { margin: 8px 0 0; }
.editor.tight > summary { padding: 6px 11px; font-size: 11.5px; }

.row-tools { display: flex; gap: 4px; flex: none; }
.act.danger { color: #9A3323; }
.act.danger:hover { background: #FBEEEC; }

/* Cosmetic fixes */
.doc-chosen[hidden], .photo-preview[hidden] { display: none !important; }

/* Install reminder */
.nudge {
  display: none;
  align-items: flex-start;
  gap: 14px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 18px;
}
.nudge[style*="block"] { display: flex !important; }
.nudge > div { flex: 1; min-width: 0; }
.nudge strong {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 3px;
}
.nudge p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.nudge .act {
  flex: none;
  font-size: 12px;
  border: 1px solid var(--gold-line);
  background: #fff;
  color: var(--gold-deep);
}

.foot-right {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex: none;
}
@media (max-width: 480px) {
  .post-foot { flex-wrap: wrap; }
  .foot-right { margin-left: 0; width: 100%; }
}

/* Events */
input[type=date] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  font-size: 14px;
}
.check-row input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }

.event-card { padding-top: 14px; }

.event-head { display: flex; gap: 14px; align-items: flex-start; }

.event-date {
  flex: none;
  width: 54px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  background: var(--gold-wash);
  text-align: center;
  padding: 7px 0 8px;
  line-height: 1.1;
}
.event-month {
  display: block;
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--gold-deep);
}
.event-day {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-top: 2px;
}

.event-title { min-width: 0; }
.event-title .name {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.015em;
  line-height: 1.35;
}
.event-title .when { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.event-title .where { color: var(--muted); font-size: 12.5px; }

.field-label {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px;
}

.remind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  margin-bottom: 12px;
}
.remind-grid .check-row { margin: 0; font-size: 13px; }

.remind-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 480px) {
  .remind-grid { grid-template-columns: 1fr; }
}

/* Seven tabs need a little more room on a narrow phone. */
@media (max-width: 420px) {
  .tab { font-size: 9.5px; padding-left: 2px; padding-right: 2px; }
  .tab-glyph svg { width: 20px; height: 20px; }
}

/* Invite signup records */
.signups {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.signups p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.signups p + p { border-top: 1px solid var(--hair); padding-top: 5px; margin-top: 5px; }
.signups span { color: var(--muted); }
.signups span + span { display: block; font-size: 11.5px; }

/* Seven reactions need to stay on one row on a narrow phone. */
@media (max-width: 400px) {
  .react-opt { font-size: 19px; padding: 6px 4px; }
  .react-menu { gap: 0; }
}

/* Admin tabs, search and paging */
.admin-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0 16px;
}
.admin-search input[type=search] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}
.admin-search input[type=search]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, .16);
}
.admin-search .btn { flex: none; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 18px;
}
.pager .hint { margin: 0; }

.sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.sort-picks { display: flex; gap: 2px; flex-wrap: wrap; }
.sort-picks .act { font-size: 12px; padding: 6px 10px; }
.sort-picks .act.is-sorted {
  color: var(--gold-deep);
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* A chosen reaction shows the emoji on its own, so the button needs
   to stay wide enough to tap comfortably. */
.react-trigger.is-on { padding: 7px 14px; }
.react-trigger.is-on .face { font-size: 17px; }

/* Comment reactions */
.creact-wrap { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.creact-trigger {
  border: none;
  background: none;
  padding: 3px 6px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.creact-trigger:hover { background: var(--paper); }
.creact-trigger.is-on { background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-line); }
.creact-trigger .face { font-size: 15px; }
.creact-add { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.creact-trigger:hover .creact-add { color: var(--ink); }

.creact-tally { display: inline-flex; align-items: center; gap: 2px; }
.creact-tally .face { font-size: 13px; }
.creact-total { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px; }

/* Messages */
.thread-row { display: flex; align-items: flex-start; gap: 11px; text-decoration: none; color: inherit; }
.thread-row .grow { flex: 1; min-width: 0; }
.thread-row .name { font-weight: 500; font-size: 14.5px; display: block; }
.thread-row .sub { color: var(--muted); font-size: 12.5px; display: block; }
.thread-last {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-box { display: flex; flex-direction: column; gap: 10px; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }

.msg {
  max-width: 78%;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 13px;
}
.bubble-row.mine .msg {
  background: var(--navy);
  border-color: var(--navy);
  color: #F3F1EA;
}
.msg-who { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.bubble-row.mine .msg-who { color: rgba(240, 220, 168, .8); }
.msg-text { font-size: 14.5px; }
.msg-text p { margin: 0 0 8px; }
.msg-text p:last-child { margin-bottom: 0; }
.bubble-row.mine .msg-text a { color: var(--gold-pale); }

/* Analytics */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 14px 12px;
  box-shadow: var(--shadow);
}
.stat-n {
  display: block;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--navy);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-l {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Eight items in the bottom bar on a phone. */
@media (max-width: 460px) {
  .tab { font-size: 9px; padding-left: 1px; padding-right: 1px; }
  .tab-glyph svg { width: 19px; height: 19px; }
  .tab-count { font-size: 9px; }
}

/* Profile photos */
img.avatar {
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--paper);
  flex: none;
  min-width: 0;
  aspect-ratio: 1 / 1;
}
img.avatar.sm { width: 34px; height: 34px; }
img.avatar.lg { width: 62px; height: 62px; }
.avatar.lg {
  width: 62px;
  height: 62px;
  font-size: 20px;
  flex: none;
}
.me-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.me-head h1 { font-size: 24px; }

input[type=file] {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Save a post. Navy so it cannot be missed against the cream card. */
.save-btn.is-on {
  color: #FFFFFF;
  background: var(--navy);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: inset 0 0 0 1px rgba(192, 138, 62, .45), 0 2px 8px rgba(11, 27, 58, .22);
}
.save-btn.is-on svg { fill: var(--gold); stroke: var(--gold-pale); }
.save-btn.is-on span { color: var(--gold-pale); letter-spacing: .02em; }

/* The little bookmark that flies down into You when a post is saved. */
.save-fly {
  position: fixed;
  z-index: 200;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(11, 27, 58, .35), inset 0 0 0 1px rgba(192, 138, 62, .5);
  pointer-events: none;
  transition: transform .62s cubic-bezier(.35, .05, .25, 1), opacity .62s ease;
}
.save-fly svg { width: 13px; height: 13px; }

/* The You tab receiving it. */
.tab.tab-caught .tab-glyph {
  animation: caught .5s ease;
}
@keyframes caught {
  0% { transform: scale(1); }
  35% { transform: scale(1.3); }
  60% { transform: scale(.92); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .save-fly { display: none; }
  .tab.tab-caught .tab-glyph { animation: none; }
}

/* Photo cropper */
.cropper { margin: 12px 0 6px; }
.crop-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper);
  touch-action: none;
  cursor: grab;
}
.crop-frame:active { cursor: grabbing; }
.crop-frame canvas { display: block; width: 100%; height: 100%; }
.crop-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2000px rgba(18, 16, 12, .30);
  -webkit-mask: radial-gradient(circle at center, transparent 0 46%, #000 46.5%);
  mask: radial-gradient(circle at center, transparent 0 46%, #000 46.5%);
}

.crop-zoom { display: flex; align-items: center; gap: 12px; margin-top: 12px; max-width: 460px; }
.crop-zoom > span {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.crop-zoom input[type=range] { flex: 1; accent-color: var(--gold); }

/* The support signature and the tech support notice */
.msg-support {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  color: var(--gold-deep);
}
.bubble-row.mine .msg-support { color: var(--gold-pale); }

.notice {
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
}
.notice a { color: var(--gold-deep); font-weight: 500; }

/* Room pictures */
.room-badge {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
  border-radius: 8px;
  background: var(--paper);
  padding: 3px;
}
.room-card { position: relative; }
.room-card .room-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
}
.room-card .name, .room-card .blurb, .room-card .meta { padding-right: 48px; }

/* Custom menu links */
.quick-block { margin: 0 0 24px; }

.quick-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.quick-note {
  margin-left: auto;
  letter-spacing: .06em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 9px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 13px 14px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  min-width: 0;
  transition: border-color .14s ease, transform .14s ease;
}
.quick-link:hover { border-color: var(--gold); transform: translateY(-1px); }
.quick-link:hover .quick-go { color: var(--gold-deep); transform: translateX(2px); }

.quick-tile {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--navy), #16294B);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px rgba(192, 138, 62, .35);
}

.quick-words { min-width: 0; flex: 1; display: block; }
.quick-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-host {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-go { flex: none; color: var(--hair-strong, #C9C2B2); transition: transform .14s ease, color .14s ease; }

.side-link-icon { display: block; line-height: 0; flex: none; }
.side-link-icon svg { width: 20px; height: 20px; }

.link-icon { display: block; line-height: 0; flex: none; color: var(--gold-deep); }
.link-icon svg { width: 22px; height: 22px; }

/* Icon picker */
.icon-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  margin-bottom: 15px;
  max-height: 216px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
}
.icon-opt {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-soft);
  background: #fff;
}
.icon-opt:hover { border-color: var(--gold); color: var(--ink); }
.icon-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-opt svg { width: 18px !important; height: 18px !important; display: block; }
.icon-opt:has(input:checked) {
  border-color: var(--gold-deep);
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
@media (max-width: 480px) {
  .icon-pick { grid-template-columns: repeat(5, 1fr); }
}

/* Admin sections */
.admin-item { padding-bottom: 6px; }
.admin-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.admin-item-head .grow { min-width: 0; }
.admin-item-head .sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-badge.blank {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold-pale);
  font-size: 12px;
  letter-spacing: .04em;
}

a.stat { text-decoration: none; display: block; transition: border-color .12s ease; }
a.stat:hover { border-color: var(--gold); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  background: #fff;
}
.tile:hover { border-color: var(--gold); background: var(--gold-wash); }
.tile svg { flex: none; color: var(--gold-deep); }

.editor.danger > summary { color: #8E2F2F; }

.check-list { margin: 0; padding-left: 18px; }
.check-list li { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* Any icon anywhere is sized by its own attributes, never left to default. */
svg[width][height] { flex: none; }

/* Several photos on one post */
.shot-grid { display: grid; gap: 4px; margin: 12px 0; border-radius: 12px; overflow: hidden; }
.shot-grid.shots-2 { grid-template-columns: 1fr 1fr; }
.shot-grid.shots-3 { grid-template-columns: 1fr 1fr 1fr; }
.shot-grid.shots-4 { grid-template-columns: 1fr 1fr; }
.shot { display: block; line-height: 0; background: var(--paper); }
.shot img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.shot-grid.shots-2 .shot img { aspect-ratio: 4 / 5; }

.photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(18, 16, 12, .78);
  color: #F3F1EA;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
}
.photo-preview { position: relative; }

/* Link preview */
.link-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 12px 0;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
}
.link-card:hover { border-color: var(--gold); }
.link-shot { flex: none; width: 108px; line-height: 0; background: #fff; }
.link-shot img { width: 108px; height: 100%; min-height: 92px; object-fit: cover; display: block; }
.link-words { display: block; padding: 12px 14px; min-width: 0; }
.link-site {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.link-title {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.link-desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 3px;
}

/* Replies */
.replies {
  margin-left: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--gold-line);
}
.replies .comment { margin-top: 8px; }

.replying {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  padding: 7px 11px;
  margin-bottom: 9px;
}
.replying strong { font-weight: 500; }
.replying .act { margin-left: auto; }

/* Activity log */
.log-row .name { font-weight: 400; font-size: 14px; line-height: 1.5; }
.log-did { color: var(--ink-soft); }
.log-subject { font-weight: 500; }

/* Announcement banner */
.banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0B1B3A 0%, #16294B 52%, #0B1B3A 100%);
  color: #F6F2E8;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 17px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: 0 6px 20px rgba(11, 27, 58, .22), inset 0 0 0 1px rgba(240, 220, 168, .16);
  overflow: hidden;
  animation: bannerIn .5s ease both, bannerNudge 5.5s ease-in-out 1s 3;
}

/* A gold sheen crossing the banner every few seconds. */
.banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -55%;
  background: linear-gradient(100deg, transparent, rgba(240, 220, 168, .16), transparent);
  animation: bannerSheen 5.5s ease-in-out 1.4s infinite;
  pointer-events: none;
}

@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bannerNudge {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-3px); }
  92% { transform: translateX(3px); }
  94% { transform: translateX(-2px); }
  96% { transform: translateX(2px); }
  98% { transform: translateX(-1px); }
}

@keyframes bannerSheen {
  0% { left: -55%; }
  55%, 100% { left: 115%; }
}

/* Anybody who has asked their device to keep still gets a still banner. */
@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
  .banner::after { animation: none; display: none; }
}
.banner-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  box-shadow: 0 0 0 3px rgba(192, 138, 62, .28);
  animation: bannerPulse 2.4s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(192, 138, 62, .28); }
  50% { box-shadow: 0 0 0 7px rgba(192, 138, 62, .05); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-mark { animation: none; }
}
.banner-words { flex: 1; min-width: 0; }
.banner-go {
  flex: none;
  color: #2C1E08;
  font-weight: 500;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-light) 45%, var(--gold));
  position: relative;
  z-index: 1;
}
.banner-words { position: relative; z-index: 1; }

/* Polls */
.poll { margin: 12px 0 4px; display: grid; gap: 6px; }
.poll-line { margin: 0; }
.poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 9px;
  padding: 11px 13px;
  cursor: pointer;
  overflow: hidden;
}
.poll-opt:hover { border-color: var(--gold); }
.poll-opt.is-on { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-line); }
.poll-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--gold-wash);
  transition: width .25s ease;
}
.poll-label { position: relative; flex: 1; min-width: 0; }
.poll-share {
  position: relative;
  font-size: 12.5px;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

/* Poll fields in the composer */
.poll-box { display: grid; gap: 7px; padding: 12px 0 4px; }
.poll-box input[type=text] {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
}
.poll-box input[type=text]:focus { border-color: var(--gold); }

/* Reports */
.report-reason {
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13.5px;
  margin: 10px 0;
}
.card.done { opacity: .62; }

/* Bulk actions */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  margin-bottom: 10px;
}
.bulk-count { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--gold-line);
  background: var(--gold-wash);
  border-radius: 10px;
  margin-bottom: 14px;
}
.bulk-actions select { flex: 1; min-width: 150px; }
.bulk-tick { width: 18px; height: 18px; accent-color: var(--gold); flex: none; margin-top: 4px; }

/* The welcome walkthrough */
.steps { margin: 0 0 6px; padding-left: 20px; }
.steps li { font-size: 14px; line-height: 1.8; }

/* Comments, rebuilt so each part gets its own line and nothing squashes */
.comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.comment:first-of-type { border-top: none; }

.cbody { flex: 1; min-width: 0; }

.cmeta {
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.cname {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.cdot { color: var(--hair-strong, #D8D2C4); }

.ctext { font-size: 14.5px; line-height: 1.6; overflow-wrap: break-word; }
.ctext p { margin: 0 0 8px; }
.ctext p:last-child { margin-bottom: 0; }

.cedit textarea { min-height: 74px; }

.cactions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.cactions form { margin: 0; }
.cactions .act { padding: 5px 8px; font-size: 12px; }

.creact-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* Replies sit closer in on a phone so they never run out of room */
.replies {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--gold-line);
}
.replies .comment { padding: 10px 0; }
.replies .ctext { font-size: 14px; }

@media (max-width: 480px) {
  .replies { margin-left: 8px; padding-left: 10px; }
  .comment { gap: 8px; }
  .cactions .act { padding: 5px 6px; }
}

/* The reply banner sits above the box on its own line */
.composer form { flex-wrap: wrap; }
.replying {
  width: 100%;
  order: -1;
  margin-bottom: 8px;
}

.side-link { position: relative; }
.side-link .side-out { margin-left: auto; opacity: .5; flex: none; }
.side-link:hover .side-out { opacity: 1; color: var(--gold); }
.side-link-icon { color: var(--gold-pale); }

/* Icons with weight to them */
.glyph { display: block; overflow: visible; }
.glyph-gloss { pointer-events: none; }

/* The bottom bar on a phone. Inactive icons sit back, the active one lights up. */
.tab-glyph svg {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));
  transition: filter .18s ease, transform .18s ease;
}
.tab .tab-glyph svg { opacity: .82; }
.tab.is-on .tab-glyph svg,
.tab[aria-current="page"] .tab-glyph svg {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
  filter:
    drop-shadow(0 0 7px rgba(240, 220, 168, .55))
    drop-shadow(0 0 14px rgba(192, 138, 62, .30))
    drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.tab:active .tab-glyph svg { transform: scale(.94); }

/* A pool of light behind whichever tab you are on. */
.tab-glyph { position: relative; }
.tab.is-on .tab-glyph::before,
.tab[aria-current="page"] .tab-glyph::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 220, 168, .20) 0%, rgba(192, 138, 62, .08) 45%, transparent 70%);
  pointer-events: none;
}

/* The dark sidebar on a computer. */
.side-item svg, .side-group svg {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5));
  transition: filter .18s ease;
}
.side-item.is-on svg, .side-item:hover svg {
  filter:
    drop-shadow(0 0 6px rgba(240, 220, 168, .45))
    drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* Menu item icons in their navy tile, lit from above. */
.quick-tile {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, .22),
    inset 0 0 0 1px rgba(192, 138, 62, .38),
    0 2px 6px rgba(11, 27, 58, .28);
}
.quick-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .02) 48%, transparent 62%);
  pointer-events: none;
}
.quick-tile svg {
  position: relative;
  filter: drop-shadow(0 0 5px rgba(240, 220, 168, .38)) drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.quick-link:hover .quick-tile svg {
  filter: drop-shadow(0 0 9px rgba(240, 220, 168, .6)) drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

/* Menu item icons on a pale card. */
.link-icon svg, .tile svg {
  filter: drop-shadow(0 1px 1px rgba(140, 100, 40, .35));
}

@media (prefers-reduced-motion: reduce) {
  .tab-glyph svg, .side-item svg, .side-group svg { transition: none; }
  .tab.is-on .tab-glyph svg, .tab[aria-current="page"] .tab-glyph svg { transform: none; }
}

/* The previous wording of a post being reviewed */
.was-body {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--muted);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.was-body p { margin: 0 0 8px; }
.was-body p:last-child { margin-bottom: 0; }

/* Rooms, each one clearly its own thing on a phone */
.room-card {
  position: relative;
  border: 1px solid var(--hair);
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--card) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 10px rgba(11, 27, 58, .07),
    0 0 0 1px rgba(192, 138, 62, .10);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  overflow: hidden;
}
.room-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold), var(--gold-deep));
}
.room-card:hover, .room-card:active {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--gold-line),
    0 6px 20px rgba(192, 138, 62, .22),
    0 2px 10px rgba(11, 27, 58, .10);
}
.room-card .name { padding-left: 8px; }
.room-card .blurb, .room-card .meta { padding-left: 8px; }

@media (max-width: 900px) {
  .room-card { margin-bottom: 12px; }
}

/* Read receipts, staff side only */
.msg-read {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 5px;
  color: rgba(240, 220, 168, .75);
}
.thread-seen {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* A short caution line rather than a full panel */
.caution {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.caution-mark { flex: none; color: #A8601C; line-height: 0; margin-top: 1px; }
.caution a { color: var(--gold-deep); font-weight: 500; }

/* A field somebody can read but not change */
.locked-field {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink);
}
.locked-note {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.poll-count {
  display: inline-block;
  margin-left: 5px;
  font-size: 10.5px;
  color: var(--muted);
  background: var(--paper);
  border-radius: 999px;
  padding: 1px 6px;
}

/* Resource library */
.shelf-row { align-items: flex-start; }
.shelf-mark {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.shelf-row .name { text-decoration: none; color: var(--ink); display: block; }
.shelf-row .name:hover { color: var(--gold-deep); }

/* Month view */
.month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
}
.month-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 1px;
}
.month-letter {
  background: var(--paper);
  text-align: center;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--muted);
  padding: 7px 0;
}
.month-cell {
  background: var(--card);
  min-height: 78px;
  padding: 5px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.month-cell.is-empty { background: var(--paper); }
.month-cell.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
.month-cell.has-events { background: linear-gradient(180deg, #FFFFFF, var(--gold-wash)); }
.month-number {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.month-cell.is-today .month-number { color: var(--gold-deep); font-weight: 500; }

.month-pip {
  display: block;
  text-decoration: none;
  background: var(--navy);
  color: #F3F1EA;
  border-radius: 5px;
  padding: 3px 5px;
  overflow: hidden;
}
.pip-time { display: block; font-size: 9px; color: var(--gold-pale); letter-spacing: .04em; }
.pip-name {
  display: block;
  font-size: 10.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-more { font-size: 9.5px; color: var(--muted); }

@media (max-width: 560px) {
  .month-cell { min-height: 62px; padding: 4px 3px; }
  .pip-name { font-size: 9.5px; }
}

/* Where somebody stands on their membership */
.lapse {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.lapse.is-out { background: #FBEDE9; border-color: #E7C3B7; }
.lapse-mark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-deep);
}
.lapse.is-out .lapse-mark { background: #A8452B; }
.lapse-go {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-deep);
  text-decoration: none;
  white-space: nowrap;
}
.tag.danger { background: #FBEDE9; color: #8E2F2F; box-shadow: inset 0 0 0 1px #E7C3B7; }

/* A message that arrived while you were looking */
.bubble-row.is-new .msg { animation: arrived .45s ease both; }
@keyframes arrived {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.side-count[hidden], .tab-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bubble-row.is-new .msg { animation: none; }
}

/* The slogan under the seal label */
.seal-words {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.seal-slogan {
  display: block;
  white-space: nowrap;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: .11em;
  font-size: clamp(7.4px, 2.1vw, 10px);
  background: linear-gradient(96deg, #8A6120 0%, #C08A3E 38%, #F0DCA8 62%, #A97528 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* A plain gold fallback where the gradient text is not supported. */
@supports not (background-clip: text) {
  .seal-slogan { color: var(--gold-deep); -webkit-text-fill-color: currentColor; }
}
.side-seal .seal-slogan { font-size: 9px; letter-spacing: .09em; }

@media (max-width: 380px) {
  .seal-slogan { letter-spacing: .06em; }
}

/* Reviews */
.dia-row { display: inline-flex; gap: 3px; flex: none; line-height: 1; }
.dia { line-height: 1; }
.dia-off { filter: grayscale(1) brightness(1.35); opacity: .32; }

.dia-pick {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin-bottom: 6px;
}
.dia-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.dia-pick label {
  cursor: pointer;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 10px;
  transition: transform .12s ease;
}
.dia-face {
  display: block;
  font-size: 30px;
  line-height: 1;
  filter: grayscale(1) brightness(1.35);
  opacity: .32;
  transition: filter .12s ease, opacity .12s ease, transform .12s ease;
}

/* Choosing one lights it and everything to its left. */
.dia-pick input:checked ~ label .dia-face,
.dia-pick label:hover .dia-face,
.dia-pick label:hover ~ label .dia-face {
  filter: none;
  opacity: 1;
}
.dia-pick label:hover .dia-face { transform: scale(1.12); }
.dia-pick label:active { transform: scale(.94); }
.dia-pick input:focus-visible + label { box-shadow: 0 0 0 2px var(--gold); }

.review-video {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  background: #12100C;
  display: block;
  margin: 10px 0;
}

.recorder { margin-bottom: 10px; }
.recorder-view {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  background: #12100C;
  display: block;
}
.recorder-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.recorder-clock {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: #A8452B;
  letter-spacing: .06em;
}

/* Looking at the hub as somebody else */
.asview {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #2B1E4A;
  color: #EDE7FA;
  border: 1px solid #6B54A8;
  border-radius: var(--radius);
  padding: 11px 15px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.asview strong { font-weight: 500; color: #FFFFFF; }
.asview-mark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B9A4F0;
  box-shadow: 0 0 0 3px rgba(185, 164, 240, .22);
}
.asview form { margin-left: auto; }
.asview-stop {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #2B1E4A;
  background: #EDE7FA;
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* When something goes wrong */
.trouble-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: .22em;
  color: var(--gold-deep);
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  margin: 4px 0 18px;
}

.trouble-log {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 9px;
  padding: 10px 12px;
  max-height: 260px;
  overflow-y: auto;
}
.trouble-log p {
  margin: 0 0 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.trouble-log p:last-child { margin-bottom: 0; }

/* Membership at a glance */
.member-card {
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 4px;
  background: var(--paper);
}
.plan-name {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.plan-tags { margin: 0 0 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.plan-dates { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.plan-note {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.tag.live {
  background: #EAF4EC;
  color: #2C6B3F;
  box-shadow: inset 0 0 0 1px #BFDCC7;
}
.member-form .field-label { margin-top: 14px; }
.member-form .field-label:first-of-type { margin-top: 0; }

/* The formatting toolbar, staff only */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--hair);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--paper);
}
.tool {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 7px;
  padding: 7px 9px;
  min-width: 32px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tool:hover { background: var(--gold-wash); color: var(--gold-deep); }
.tool:active { transform: scale(.94); }
.tool-split {
  width: 1px;
  height: 18px;
  background: var(--hair);
  margin: 0 4px;
  flex: none;
}
.swatch {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.swatch-mark { background: #F5E6C8; }

/* The area you write in */
.writer {
  min-height: 96px;
  max-height: 420px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 0 0 10px 10px;
  padding: 13px 14px;
  outline: none;
}
.writer:focus { border-color: var(--gold); }
.writer.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* How formatted words look, in the writer and in a post */
/* Browsers make a div per line inside a contenteditable, not a
   paragraph, so only styling p left every line flush against the next
   and intentional spacing disappeared once published. */
.writer p, .rich p,
.writer > div, .rich > div { margin: 0 0 10px; }
.writer p:last-child, .rich p:last-child,
.writer > div:last-child, .rich > div:last-child { margin-bottom: 0; }

/* A line left deliberately blank is an empty div holding only a break.
   It has no text to give it height, so it is given one, which is what
   makes a blank line actually look blank. */
.writer > div:empty, .rich > div:empty { min-height: 1em; }
.rich br + br { line-height: 1.9; }
.writer h3, .rich h3 {
  margin: 14px 0 7px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.writer h3:first-child, .rich h3:first-child { margin-top: 0; }
.writer ul, .writer ol, .rich ul, .rich ol { margin: 0 0 10px; padding-left: 22px; }
.writer li, .rich li { margin-bottom: 4px; line-height: 1.6; }
.writer blockquote, .rich blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  border-radius: 0 8px 8px 0;
  color: var(--ink-soft);
}
.writer mark, .rich mark {
  background: #F5E6C8;
  color: inherit;
  padding: 1px 3px;
  border-radius: 3px;
}
.rich a { color: var(--gold-deep); }

/* The four colours anybody may use */
/* QTS text colours.

   Royal blue is the value from the QTS brand palette, kept separate
   from the app's navy so changing one never disturbs the other. Light
   blue is a companion drawn from the same family. Both live here as
   single values, so correcting them to match the logo exactly is a one
   line change rather than a hunt. */
.ink-royal { color: #12306E; }
.ink-sky   { color: #4A8FD4; }

.ink-navy { color: #0B1B3A; }
.ink-gold { color: #A9762A; }
.ink-red  { color: #A8452B; }
.ink-grey { color: #8A8377; }

@media (max-width: 480px) {
  .tools { gap: 0; padding: 6px 5px; }
  .tool { padding: 7px 7px; min-width: 30px; font-size: 12.5px; }
  .tool-split { margin: 0 2px; }
}

/* ------------------------------------------------------------------ */
/* Weight and richness. Gold that reads as metal rather than a hairline */
/* ------------------------------------------------------------------ */

:root {
  --gold-edge: rgba(192, 138, 62, .55);
  --gold-deep-edge: rgba(138, 97, 32, .45);
}

/* Cards sit on a proper gold edge with depth beneath them. */
.card {
  border: 1.5px solid var(--gold-edge);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(192, 138, 62, .18),
    0 4px 16px rgba(11, 27, 58, .10),
    0 12px 32px rgba(11, 27, 58, .06);
}

.card.pinned {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(240, 220, 168, .55),
    0 4px 18px rgba(192, 138, 62, .22),
    0 12px 34px rgba(11, 27, 58, .08);
}

/* The foil rule under the header, now a struck band rather than a line. */
.foil {
  height: 4px;
  background:
    linear-gradient(90deg,
      #8A6120 0%, #C08A3E 18%, #F0DCA8 34%, #D6A254 50%,
      #F0DCA8 66%, #C08A3E 82%, #8A6120 100%);
  box-shadow: 0 2px 6px rgba(138, 97, 32, .28);
}

/* Buttons with a lip on them. */
.btn {
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 8px rgba(11, 27, 58, .18);
}
.btn.gold {
  background: linear-gradient(180deg, #F0DCA8 0%, #D6A254 42%, #C08A3E 100%);
  color: #2C1E08;
  border: 1.5px solid #A9762A;
  text-shadow: 0 1px 0 rgba(255, 246, 224, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 236, .7),
    inset 0 -1px 0 rgba(138, 97, 32, .35),
    0 3px 12px rgba(192, 138, 62, .32);
}
.btn.gold:hover { filter: brightness(1.04); }
.btn.gold:active { transform: translateY(1px); }

.btn.ghost {
  border: 1.5px solid var(--gold-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 4px rgba(11, 27, 58, .07);
}
.btn.ghost:hover { border-color: var(--gold); background: var(--gold-wash); }

/* Rooms, groups and quick links get the same weight. */
.room-card, .quick-link, .tile {
  border-width: 1.5px;
  border-color: var(--gold-edge);
  border-radius: 14px;
}
.room-card::before { width: 5px; }

/* Section headings sit under a gold rule rather than floating. */
.eyebrow {
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--gold-line);
  margin-bottom: 13px;
}

/* Chips and tags, firmer. */
.chip {
  border: 1.5px solid var(--gold-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.chip.is-on {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-light));
  border-color: var(--gold-deep);
  color: #2C1E08;
  box-shadow: inset 0 1px 0 rgba(255, 250, 236, .8), 0 2px 8px rgba(192, 138, 62, .28);
}
.tag { box-shadow: inset 0 0 0 1.5px rgba(192, 138, 62, .30); }

/* Fields, so typing feels solid. */
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=datetime-local], .field input[type=number],
.field input[type=search], .field select, .field textarea, .writer {
  border-width: 1.5px;
  border-radius: 11px;
}
.field input:focus, .field select:focus, .field textarea:focus, .writer:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, .14);
}

/* The seal band, weightier. */
.seal-rule { width: 2px; }

/* The bottom bar earns a gold edge. */
.tabs {
  border-top: 2px solid var(--gold-deep-edge);
  box-shadow: 0 -6px 22px rgba(11, 27, 58, .28);
}

/* Dividing lines inside cards. */
.list-row { border-top-width: 1.5px; }
.comment { border-top-width: 1.5px; }

/* ------------------------------------------------------------------ */
/* The new pieces                                                      */
/* ------------------------------------------------------------------ */

/* A poll, closed until asked for */
.poll-open {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF, var(--gold-wash));
  border: 1.5px solid var(--gold-edge);
  border-radius: 13px;
  padding: 13px 15px;
  margin: 12px 0 4px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 10px rgba(192, 138, 62, .14);
  transition: border-color .14s ease, transform .14s ease;
}
.poll-open:hover { border-color: var(--gold); transform: translateY(-1px); }
.poll-open-mark {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--navy), #16294B);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1.5px rgba(192, 138, 62, .4);
}
.poll-open-words { flex: 1; min-width: 0; }
.poll-open-title { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.poll-open-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.poll-open-go { flex: none; color: var(--gold-deep); }
.poll-opt { border-width: 1.5px; border-radius: 11px; }

/* Mentions */
.mention {
  background: var(--gold-wash);
  color: var(--gold-deep);
  border-radius: 5px;
  padding: 1px 5px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.mention-menu {
  position: absolute;
  z-index: 240;
  min-width: 220px;
  max-width: 300px;
  background: var(--card);
  border: 1.5px solid var(--gold-edge);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(11, 27, 58, .22);
  padding: 5px;
  overflow: hidden;
}
.mention-hit {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 11px;
  cursor: pointer;
}
.mention-hit:hover { background: var(--gold-wash); }
.mention-name { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.mention-where { display: block; font-size: 11.5px; color: var(--muted); }

/* Templates in the composer */
.shapes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.shapes-label {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.shape {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--gold-deep);
  background: var(--gold-wash);
  border: 1.5px solid var(--gold-line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.shape:hover { border-color: var(--gold); background: #fff; }

/* Search filters */
.narrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px solid var(--gold-line);
}
.narrow-bit { flex: 1; min-width: 130px; }
.narrow-bit span {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.narrow-bit select {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1.5px solid var(--hair);
  border-radius: 10px;
  background: #fff;
}

/* A streak, seen only by the person it belongs to */
.streak {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0B1B3A, #16294B);
  color: #F6F2E8;
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: 0 6px 22px rgba(11, 27, 58, .24);
}
.streak strong { color: var(--gold-pale); font-weight: 500; }
.streak-mark { font-size: 22px; flex: none; }

/* Anything marked hidden stays hidden, whatever else the styling says.
   Without this, a rule such as display: grid quietly overrides it. */
[hidden] { display: none !important; }

/* The light beside a name */
.light {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.light-on {
  background: #34C759;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, .20), 0 0 9px 2px rgba(52, 199, 89, .65);
  animation: beat 2.6s ease-in-out infinite;
}
.light-warm {
  background: #E8B33C;
  box-shadow: 0 0 0 2px rgba(232, 179, 60, .20), 0 0 9px 2px rgba(232, 179, 60, .62);
  animation: beat 2.6s ease-in-out infinite;
}
.light-off {
  background: #D64B36;
  box-shadow: 0 0 0 2px rgba(214, 75, 54, .18), 0 0 9px 2px rgba(214, 75, 54, .55);
}
@keyframes beat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: .82; }
}
.light-word {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .light-on, .light-warm { animation: none; }
}

/* The member directory */
.phone-note {
  display: none;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--gold-wash);
  border: 1.5px solid var(--gold-line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
@media (max-width: 760px) { .phone-note { display: block; } }

.dir { display: grid; gap: 8px; }

.dir-row {
  border: 1.5px solid var(--gold-edge);
  border-radius: 13px;
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 10px rgba(11, 27, 58, .07);
  overflow: hidden;
}
.dir-row[open] {
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(192, 138, 62, .18), 0 10px 30px rgba(11, 27, 58, .08);
}

.dir-head {
  display: grid;
  grid-template-columns: 18px 34px minmax(160px, 2fr) minmax(120px, 1.2fr) minmax(100px, 1fr) 90px 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}
.dir-head::-webkit-details-marker { display: none; }
.dir-row[open] .dir-head { border-bottom: 1.5px solid var(--gold-line); background: var(--paper); }

.dir-light .light { margin: 0; }
.dir-face { line-height: 0; }
.dir-who { min-width: 0; }
.dir-name {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-sub {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-plan { min-width: 0; }
.dir-plan-name {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-soft, .dir-role {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-go { color: var(--muted); transition: transform .16s ease; }
.dir-row[open] .dir-go { transform: rotate(180deg); color: var(--gold-deep); }

.dir-open { padding: 15px; }
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 20px;
}
.dir-bit { min-width: 0; }
.dir-wide { grid-column: 1 / -1; }
.dir-key {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.dir-val { display: block; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.dir-doing { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 900px) {
  .dir-head { grid-template-columns: 18px 34px 1fr 18px; }
  .dir-plan, .dir-soft, .dir-role { display: none; }
}

/* Searching for a person by typing */
.who-pick { position: relative; }
.who-pick input[type=text] {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 30px 9px 11px;
  border: 1.5px solid var(--hair);
  border-radius: 10px;
  background: #fff;
}
.who-clear {
  position: absolute;
  right: 6px;
  top: 6px;
  border: none;
  background: none;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
}
.who-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card);
  border: 1.5px solid var(--gold-edge);
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(11, 27, 58, .18);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.who-hit {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
}
.who-hit:hover { background: var(--gold-wash); }

/* The banner section */
.banner-state {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13.5px;
}
.banner-state.is-live { color: var(--ink); }

/* Add Button box */
.button-box { padding: 10px 0 2px; }
.rail-gap { width: 12px; flex: none; }

/* Filters behind a button, so the page stays quiet */
.picks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.pick { position: relative; }
.pick-head {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  background: var(--card);
  border: 1.5px solid var(--gold-edge);
  border-radius: 999px;
  padding: 8px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.pick-head::-webkit-details-marker { display: none; }
.pick-head:hover { border-color: var(--gold); }
.pick-head.is-set {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-light));
  border-color: var(--gold-deep);
  color: #2C1E08;
}
.pick-label {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick-head.is-set .pick-label { color: #6B4A12; }
.pick-now { font-weight: 500; }
.pick-go { flex: none; opacity: .6; transition: transform .14s ease; }
.pick[open] .pick-go { transform: rotate(180deg); }

.pick-open {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--card);
  border: 1.5px solid var(--gold-edge);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(11, 27, 58, .20);
  padding: 5px;
}
.pick-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.pick-hit:hover { background: var(--gold-wash); }
.pick-hit.is-on { background: var(--gold-wash); color: var(--gold-deep); font-weight: 500; }
.pick-clear {
  align-self: center;
  font-size: 12.5px;
  color: var(--gold-deep);
  text-decoration: none;
  padding: 8px 4px;
}

/* Somebody in the hub right now */
.live-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, .18);
  animation: pulse 1.8s ease-in-out infinite;
  vertical-align: middle;
  flex: none;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
  50% { box-shadow: 0 0 0 7px rgba(52, 199, 89, .04); }
}
.live-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.dir-light { display: flex; align-items: center; gap: 5px; }

/* How long until an event */
.soon {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 2px 0 6px;
}
.soon-soon {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-light));
  color: #2C1E08;
  box-shadow: inset 0 1px 0 rgba(255, 250, 236, .8), 0 2px 8px rgba(192, 138, 62, .3);
}
.soon-close {
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
}
.soon-near { background: var(--paper); color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--hair); }
.soon-far { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--hair); }

@media (prefers-reduced-motion: reduce) { .live-pip { animation: none; } }

/* A short grid of tick boxes */
.tick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
  margin: 6px 0 4px;
}

/* A field somebody has to answer */
.need {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8E2F2F;
  background: #FBEDE9;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  box-shadow: inset 0 0 0 1px #E7C3B7;
  vertical-align: middle;
}
.pick-flag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--card);
  border: 1.5px solid var(--gold-edge);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}
.pick-flag:hover { border-color: var(--gold); }
.pick-flag.is-on {
  background: #FBEDE9;
  border-color: #E7C3B7;
  color: #8E2F2F;
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* The admin system                                                    */
/* ------------------------------------------------------------------ */

.adminwrap { display: block; }

.adminrail { display: none; }

.rail-group {
  margin: 18px 0 6px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 12px;
}
.rail-group:first-child { margin-top: 0; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1.5px solid transparent;
}
.rail-item:hover { background: var(--gold-wash); color: var(--ink); }
.rail-item.is-on {
  background: linear-gradient(180deg, #FFFFFF, var(--gold-wash));
  border-color: var(--gold-edge);
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.rail-item.is-locked { opacity: .55; }
.rail-soon {
  margin-left: auto;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  border-radius: 999px;
  padding: 2px 7px;
  box-shadow: inset 0 0 0 1px var(--hair);
}

/* On a tablet the rail lies across the top. */
@media (min-width: 761px) {
  .adminrail {
    display: flex;
    gap: 4px;
    overflow-x: auto;

    /* On a tablet the rail is a row rather than a column, and it holds
       its place under the seal band the same way the column does on a
       larger screen. */
    position: sticky;
    top: var(--seal-h, 62px);
    z-index: 20;

    padding: 10px 14px;
    border-bottom: 1.5px solid var(--gold-line);
    background: var(--paper);
    align-items: center;
  }
  .adminrail .rail-group {
    margin: 0 4px 0 12px;
    padding: 0;
    white-space: nowrap;
    flex: none;
  }
  .adminrail .rail-item { white-space: nowrap; flex: none; padding: 7px 11px; }
}

/* On a real screen it stands down the left and the page uses the width. */
@media (min-width: 1080px) {
  .adminwrap {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .adminrail {
    display: block;
    position: sticky;

    /* The seal band above is itself sticky at the top, so the rail has
       to stop underneath it rather than sliding behind it. The height
       is measured at runtime and kept in --seal-h; the value here is
       only a fallback for the moment before that happens. */
    top: var(--seal-h, 62px);
    max-height: calc(100dvh - var(--seal-h, 62px));

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 22px 12px 40px;
    border-right: 1.5px solid var(--gold-line);
    border-bottom: none;
    background: var(--paper);
  }
  .adminrail::-webkit-scrollbar { width: 6px; }
  .adminrail::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }
  .adminrail::-webkit-scrollbar-track { background: transparent; }
  .adminbody { min-width: 0; }
  .shell-admin { max-width: none; padding-left: 28px; padding-right: 28px; }
  .shell-wide { max-width: 1500px; }
}

/* The Command Center */
.cmd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cmd-make { flex: none; }
.pick-wide { min-width: 240px; right: 0; left: auto; }
.pick-group {
  margin: 8px 0 3px;
  padding-left: 11px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick-group:first-child { margin-top: 2px; }
.pick-note {
  margin: 8px 11px 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.cmd-grid { display: grid; gap: 16px; }
@media (min-width: 1080px) {
  .cmd-grid { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
}
.cmd-main, .cmd-side { display: grid; gap: 16px; align-content: start; }

.cmd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.tile-n {
  display: block;
  padding: 15px 16px;
  border-radius: 13px;
  text-decoration: none;
  border: 1.5px solid var(--hair);
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .14s ease, border-color .14s ease;
}
.tile-n:hover { transform: translateY(-1px); }
.tile-num {
  display: block;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tile-what {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 4px;
}
.tile-hot { border-color: #E7C3B7; background: linear-gradient(180deg, #fff, #FBEDE9); }
.tile-hot .tile-num { color: #8E2F2F; }
.tile-warm { border-color: var(--gold-edge); background: linear-gradient(180deg, #fff, var(--gold-wash)); }
.tile-warm .tile-num { color: var(--gold-deep); }
.tile-cool { border-color: var(--hair); }
.tile-cool .tile-num { color: var(--ink); }

.cmd-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.cmd-later {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1.5px solid var(--hair);
  font-size: 11.5px;
}

/* Member health */
.health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.health-bit {
  display: block;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--hair);
  text-decoration: none;
  background: var(--card);
}
.health-bit:hover { border-color: var(--gold); }
.health-n {
  display: block;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.health-w {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.health-bar {
  display: flex;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  margin: 13px 0 4px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.health-run { display: block; height: 100%; }
.health-run.health-on { background: #34C759; }
.health-run.health-warm { background: #E8B33C; }
.health-run.health-off { background: #D64B36; }

/* Your day */
.cmd-date {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .02em;
}
.day-row {
  display: block;
  padding: 10px 0;
  border-top: 1.5px solid var(--hair);
  text-decoration: none;
}
.day-row:first-of-type { border-top: none; }
.day-when { margin-bottom: 4px; }
.day-what { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.day-sub { display: block; font-size: 11.5px; color: var(--muted); }

/* Member 360 */
.m360-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.m360-who { flex: 1; min-width: 220px; }
.m360-who h1 { margin: 0 0 4px; }
.m360-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.m360-dot { color: var(--muted); }
.m360-short { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.m360-doing { display: flex; gap: 8px; flex-wrap: wrap; }

.m360-grid { display: grid; gap: 16px; }
@media (min-width: 1080px) {
  .m360-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
}
.m360-main, .m360-side { display: grid; gap: 16px; align-content: start; }
.m360-facts { display: grid; gap: 11px; }
.m360-facts > div { min-width: 0; }

/* What somebody owes */
.owe-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1.5px solid var(--hair);
}
.owe-row:first-of-type { border-top: none; }
.owe-state {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.owe-hot { background: #FBEDE9; color: #8E2F2F; box-shadow: inset 0 0 0 1.5px #E7C3B7; }
.owe-warm { background: var(--gold-wash); color: var(--gold-deep); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.owe-ok { background: #EAF7EE; color: #276B3B; box-shadow: inset 0 0 0 1.5px #BEE0C8; }
.owe-cool { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--hair); }
.owe-doing { display: flex; gap: 6px; align-items: center; flex: none; }
.owe-waive summary { cursor: pointer; list-style: none; }
.owe-waive summary::-webkit-details-marker { display: none; }
.owe-waive[open] { width: 100%; margin-top: 8px; }

/* The requirements catalogue */
.req-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.req-counts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: baseline;
  flex: none;
}
.req-n {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.req-late { color: #8E2F2F; }
.req-w { font-size: 11px; color: var(--muted); }
.rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1.5px solid var(--hair);
  font-size: 13px;
}
.editor.tight { margin-top: 14px; }

/* Reading and signing an acknowledgment */
.ack-body { font-size: 14.5px; line-height: 1.7; }
.ack-name {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
}

/* Member 360 header */
.m360-health {
  flex: none;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  min-width: 190px;
}
.m360-health.health-watch { background: var(--gold-wash); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.m360-health.health-critical { background: #FBEDE9; box-shadow: inset 0 0 0 1.5px #E7C3B7; }
.m360-verdict {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}
.m360-verdict.big { font-size: 18px; margin: 0 0 10px; }
.m360-because { font-size: 11.5px; color: var(--muted); }
.m360-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.m360-quick .btn[disabled] { opacity: .45; cursor: default; }

/* Section rail */
.m360-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1.5px solid var(--hair);
  margin-bottom: 16px;
  scrollbar-width: none;
}
.m360-tabs::-webkit-scrollbar { display: none; }
.m360-tabs a {
  flex: none;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  white-space: nowrap;
}
.m360-tabs a:hover { color: var(--navy); }
.m360-tabs a.is-on { color: var(--navy); font-weight: 500; border-bottom-color: var(--gold); }
.tab-n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* Needs attention */
.att-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1.5px solid var(--hair);
  text-decoration: none;
  color: inherit;
}
.att-row:first-of-type { border-top: none; }
.att-row:hover .att-go { color: var(--gold-deep); }
.att-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.att-critical { background: #8E2F2F; }
.att-watch { background: var(--gold); }
.att-go { font-size: 12px; color: var(--muted); flex: none; }
.why-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Assigned work as a table */
.table-scroll { overflow-x: auto; }
.owe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.owe-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 12px 8px 0;
  border-bottom: 1.5px solid var(--hair);
  white-space: nowrap;
}
.owe-table td { padding: 12px 12px 12px 0; border-bottom: 1.5px solid var(--hair); vertical-align: top; }
.owe-table tr:last-child td { border-bottom: none; }
.owe-table .name { display: block; }
.owe-table .sub { display: block; margin-top: 2px; }
.owe-table td.thin { white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar-thin {
  display: block;
  height: 4px;
  margin: 6px 0 2px;
  background: var(--hair);
  border-radius: 999px;
  overflow: hidden;
  max-width: 120px;
}
.bar-thin > span { display: block; height: 100%; background: var(--gold); }
.pin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
  vertical-align: 1px;
}
.pin.quiet { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--hair); }

/* An empty section that is empty on purpose */
.quiet-state {
  padding: 22px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--paper);
  border-radius: 2px;
}
.quiet-state strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-weight: 500;
  font-size: 14px;
}

/* Private notes */
.note-write { padding-bottom: 6px; border-bottom: 1.5px solid var(--hair); margin-bottom: 4px; }
.note-row { padding: 14px 0; border-top: 1.5px solid var(--hair); }
.note-row.is-away { opacity: .55; }
.note-body { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.note-doing { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.was-row { padding: 10px 0 10px 12px; border-left: 2px solid var(--hair); margin-top: 8px; }
.was-body { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 4px; }

/* Lookup */
.lookup { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup input { flex: 1; min-width: 220px; }
.found-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--card);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  text-decoration: none;
  color: inherit;
}
.found-row:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.found-row .name { display: block; font-weight: 500; }
.found-row .sub { display: block; }
.found-tags { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.light-pair { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }

/* The member facing Action Center */
.act-card {
  padding: 18px;
  margin-bottom: 12px;
  background: var(--card);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
}
.act-card.is-urgent { box-shadow: inset 0 0 0 1.5px #E7C3B7; background: #FDF7F5; }
.act-card.is-done { opacity: .6; }
.act-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.act-top h2 { margin: 0; font-size: 16px; font-weight: 500; }
.act-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.act-dot { color: var(--hair); }
.act-pri {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
}
.act-urgent { background: #FBEDE9; color: #8E2F2F; box-shadow: inset 0 0 0 1.5px #E7C3B7; }
.act-important { background: var(--gold-wash); color: var(--gold-deep); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.act-said { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.act-more { margin-top: 10px; }
.act-more summary { cursor: pointer; font-size: 13px; color: var(--gold-deep); }
.act-more p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.act-doing { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* Reminders */
.task-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.note-flag { color: var(--gold-deep); }
.day-row .owe-state { flex: none; }

/* Quick Add */
.quick { position: relative; margin: 0 0 14px; }
.quick summary { list-style: none; cursor: pointer; }
.quick summary::-webkit-details-marker { display: none; }
.quick-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--navy);
  color: var(--cream);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
}
.quick-open:hover { background: #14264A; }
.quick-menu {
  position: absolute;
  z-index: 40;
  margin-top: 6px;
  min-width: 230px;
  padding: 10px 0;
  background: var(--card);
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(18,16,12,.14), inset 0 0 0 1.5px var(--hair);
}
.quick-for {
  margin: 0 0 6px;
  padding: 0 16px 8px;
  font-size: 12px;
  color: var(--gold-deep);
  border-bottom: 1.5px solid var(--hair);
}
.quick-head {
  margin: 8px 0 2px;
  padding: 0 16px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.quick-menu a, .quick-off {
  display: block;
  padding: 7px 16px;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--navy);
}
.quick-menu a:hover { background: var(--paper); }
.quick-off { color: var(--muted); opacity: .6; }
.act-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--gold-wash);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
  text-decoration: none;
  color: inherit;
}
.act-nudge.is-urgent { background: #FBEDE9; box-shadow: inset 0 0 0 1.5px #E7C3B7; }
.act-nudge .name { display: block; font-weight: 500; }
.act-nudge .sub { display: block; }

/* Pop up announcements. Separate from .banner, which is the other thing. */
.popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 27, 58, .55);
  backdrop-filter: blur(2px);
}
.popup-box {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 2px;
  padding: 26px 24px 22px;
  box-shadow: 0 20px 60px rgba(11, 27, 58, .3), inset 0 0 0 1.5px var(--hair);
  border-top: 3px solid var(--gold);
}
.popup-important { border-top-color: var(--gold-deep); }
.popup-urgent { border-top-color: #8E2F2F; }
.popup-image {
  display: block;
  width: calc(100% + 48px);
  margin: -26px -24px 18px;
  max-height: 190px;
  object-fit: cover;
}
.popup-flag {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: .11em;
  color: var(--gold-deep);
}
.popup-urgent .popup-flag { color: #8E2F2F; }
.popup-box h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.popup-said { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.popup-doing { display: flex; gap: 8px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.popup-doing .grow { flex: 1; min-width: 130px; }
.popup-doing .grow .btn { width: 100%; }
.popup-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 480px) {
  .popup-box { padding: 22px 18px 18px; }
  .popup-image { width: calc(100% + 36px); margin: -22px -18px 14px; }
  .popup-doing { flex-direction: column; align-items: stretch; }
  .popup-doing .btn { width: 100%; }
}

/* Segments */
.seg-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--gold-wash);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
}
.seg-n { font-size: 30px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.seg-w { font-size: 13px; color: var(--gold-deep); }
.rule-join {
  flex: none;
  width: 52px;
  font-size: 10.5px;
  letter-spacing: .09em;
  color: var(--muted);
}
.seg-helpers { display: grid; gap: 10px; }
@media (min-width: 720px) { .seg-helpers { grid-template-columns: 1fr 1fr; } }

/* Bulk actions: the two kinds of selection must never look alike */
.bulk-all, .bulk-some {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 2px;
}
.bulk-all { background: var(--gold-wash); box-shadow: inset 0 0 0 2px var(--gold); }
.bulk-loud { background: #FBEDE9; box-shadow: inset 0 0 0 2px #8E2F2F; }
.bulk-some { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--hair); }
.bulk-all-n {
  flex: none;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.bulk-all-w { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.bulk-all-w strong { display: block; color: var(--navy); margin-bottom: 3px; }

.warn-box {
  padding: 12px 14px;
  margin: 12px 0;
  background: #FBEDE9;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px #E7C3B7;
  font-size: 13px;
  color: #6E2525;
  line-height: 1.55;
}
.warn-box strong { display: block; margin-bottom: 3px; }

/* Result tallies */
.tally { display: flex; gap: 8px; flex-wrap: wrap; }
.tally-bit {
  flex: 1;
  min-width: 104px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 2px;
}
.tally-bit.is-on { box-shadow: inset 0 0 0 2px var(--gold); background: var(--gold-wash); }
a.tally-bit:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.tally-n { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.tally-bad { color: #8E2F2F; }
.tally-w { font-size: 11px; color: var(--muted); }

/* The workflow, read as words */
.flow { display: grid; gap: 4px; }
.flow-word {
  margin: 14px 0 4px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.flow-word:first-child { margin-top: 0; }
.flow-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--paper);
  border-left: 2px solid var(--gold-line);
  font-size: 14.5px;
  line-height: 1.5;
}
.flow-quiet { color: var(--muted); font-size: 13.5px; border-left-color: var(--hair); }
.flow-off { opacity: .5; }
.flow-join { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.flow-n {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.heavy-flag {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FBEDE9;
  color: #8E2F2F;
  box-shadow: inset 0 0 0 1.5px #E7C3B7;
}
.heavy-said { color: #8E2F2F; }

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1.5px solid var(--hair);
}
.step-row:first-of-type { border-top: none; }
.step-row.is-off { opacity: .5; }
.step-row.is-heavy { background: #FDF6F4; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.step-doing { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; }

/* The big red switch, and its calm cousin */
.stop-box {
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #FBEDE9;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #8E2F2F;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6E2525;
}
.stop-box strong { display: block; margin-bottom: 3px; font-size: 15px; }
.stop-box form { margin-top: 10px; }
.stop-calm {
  background: #EAF7EE;
  box-shadow: inset 0 0 0 2px #276B3B;
  color: #1F5730;
}

/* Test run, member by member */
.dry-row { padding: 12px 0; border-top: 1.5px solid var(--hair); }
.dry-row:first-of-type { border-top: none; }
.dry-row .name { display: block; margin-bottom: 6px; }
.dry-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 3px 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.att-ok { background: #276B3B; }

/* Choosing how an automation switches on */
.mode-pick {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mode-pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gold); background: var(--gold-wash); }
.mode-pick input { margin-top: 3px; flex: none; }
.mode-pick strong { display: block; color: var(--navy); margin-bottom: 2px; font-weight: 500; }

/* History rows */
.run-row { display: block; text-decoration: none; color: inherit; margin-bottom: 10px; }
a.run-row:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.run-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.run-row .name { font-weight: 500; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 16px 0; }

/* Clickable figures */
a.tally-bit { text-decoration: none; color: inherit; }
a.tally-bit:hover .tally-n { color: var(--gold-deep); }
a.tally-bit:hover .tally-w { color: var(--navy); }

/* The one place something cannot be undone */
.danger-area > summary { color: #8E2F2F; }
.btn.danger {
  background: #8E2F2F;
  color: #FFF;
  box-shadow: none;
}
.btn.danger:hover { background: #7A2727; }

/* Numbered steps, so a flow reads as a flow */
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  vertical-align: -3px;
}
.who-pick { margin-top: 4px; }
.who-pick .field { margin-left: 26px; }
.who-pick .btn.gold { margin-top: 6px; }

/* Badge urgency. Three levels only, so the loudest one still means
   something when it appears. */
/* Something the member has to do is not decoration. Red, white text,
   and big enough to catch the eye without shouting on every screen. */
.tab-count.count-open, .side-count.count-open,
.tab-count.count-soon, .side-count.count-soon,
.tab-count.count-late, .side-count.count-late {
  background: #C62828;
  color: #FFF;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-size: 11.5px;
  line-height: 19px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--cream);
  font-variant-numeric: tabular-nums;
}

/* Overdue gets a ring, so it reads as more pressing at a glance. */
.tab-count.count-late, .side-count.count-late {
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px rgba(198, 40, 40, 0.28);
}

/* The compact search on Home */
.home-find {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
}
.home-find:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); color: var(--navy); }
.home-find svg { flex: none; }
.home-find span { flex: 1; }

/* An action the member is being pointed straight at */
.act-card.is-focused {
  box-shadow: inset 0 0 0 2px var(--gold);
  background: var(--gold-wash);
}

/* Caught up */
.all-clear {
  padding: 20px 18px;
  margin-bottom: 16px;
  background: #EAF7EE;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px #B9DFC6;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1F5730;
}
.all-clear strong { display: block; margin-bottom: 3px; font-size: 15.5px; }
.all-clear-tick {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #276B3B;
  position: relative;
}
.all-clear-tick::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The simple builder: sections appear as they are needed */
.simple-build .card { margin-bottom: 12px; }
.simple-build .check-row { padding: 9px 0; }
.said-box {
  padding: 18px;
  margin-bottom: 14px;
  background: var(--gold-wash);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--gold-line);
}
.said-when, .said-will, .said-only {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 3px;
}
.said-line {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
}
.said-line:last-child { margin-bottom: 0; }

/* Action Center urgency. Red is kept for things that genuinely need
   dealing with, so it still means something when it appears. */
.act-card.is-late {
  box-shadow: inset 0 0 0 2px #C62828;
}
.act-card.is-late .owe-state,
.owe-state.owe-hot {
  background: #C62828;
  color: #FFF;
}
.act-card.is-soon {
  box-shadow: inset 0 0 0 2px var(--gold);
}
.act-card.is-soon .owe-state {
  background: var(--gold-deep);
  color: #2C1E08;
}

.check-row.tight { padding: 5px 0; }
.pick-many { display: block; }

/* Primary create buttons.

   A button that starts the main thing a page is for should look like
   it. These were the same weight as everything else, so on a busy page
   they disappeared. Secondary and danger styles are left alone, so the
   hierarchy is primary gold, secondary outlined, red only for
   destructive. */
.btn.gold {
  padding: 11px 20px;
  font-size: 14.5px;
  letter-spacing: .01em;
}
.m360-quick .btn.gold {
  padding: 12px 22px;
  font-size: 15px;
}

/* Member 360 quick actions: visible without competing with the name. */
.m360-acts .btn,
.m360-acts a.btn {
  padding: 10px 16px;
  font-size: 14px;
}

/* Notification state, said plainly */
.push-state {
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 2px;
  font-size: 13.5px;
  line-height: 1.55;
}
.push-state strong { display: block; margin-bottom: 2px; font-size: 15px; }
.push-on { background: #EAF7EE; box-shadow: inset 0 0 0 1.5px #B9DFC6; color: #1F5730; }
.push-setup { background: var(--gold-wash); box-shadow: inset 0 0 0 1.5px var(--gold-line); color: #6B4E16; }
.push-blocked { background: #FBEDE9; box-shadow: inset 0 0 0 1.5px #E7C3B7; color: #6E2525; }
.push-off { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--muted); }

/* The compact writing toolbar */
.writer-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 7px 0;
}
.writer-tools button {
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border: none;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  color: var(--navy);
  font-size: 14px;
  cursor: pointer;
}
.writer-tools button:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.writer-tools button.is-on { background: var(--gold-wash); box-shadow: inset 0 0 0 2px var(--gold); }
.writer-tools .tool-b { font-weight: 500; }
.writer-tools .tool-i { font-style: italic; }

.colour-pick {
  display: none;
  gap: 6px;
  align-items: center;
  padding: 4px 0 8px;
}
.colour-pick.is-open { display: flex; }
.colour-pick button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hair);
}
.colour-pick .dot-royal { background: #12306E; }
.colour-pick .dot-sky   { background: #4A8FD4; }
.colour-pick .dot-gold  { background: #A9762A; }
.colour-pick .dot-plain { background: var(--card); color: var(--muted); font-size: 11px; }

.swatch-plain {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  position: relative;
}
.swatch-plain::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1.5px;
  background: var(--muted);
  transform: rotate(-45deg);
}

/* Managing the QTS reaction numbers. Deliberately quiet: it is an
   admin control sitting on a member facing post, so it should not
   compete with the post itself. */
.react-admin { margin-top: 8px; }
.react-admin > summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.react-admin > summary::-webkit-details-marker { display: none; }
.react-admin > summary:hover { color: var(--navy); }
.react-admin form {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
}
.react-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13.5px;
}
.react-admin-row .grow { flex: 1; }
.react-admin-row .sub { font-size: 12px; color: var(--muted); }
.react-admin-row input {
  width: 78px;
  padding: 6px 8px;
  font-size: 13.5px;
  text-align: right;
}

/* An event that is happening right now */
.pin.live {
  background: #EAF7EE;
  color: #1F5730;
  box-shadow: inset 0 0 0 1.5px #B9DFC6;
}

/* The restricted access screen. Deliberately calm: this is somebody
   being told they cannot come in, so it should read as considered
   rather than as an error. */
.plain-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: var(--paper);
}
.gate {
  margin: auto;
  padding: 24px 18px;
  width: 100%;
  max-width: 520px;
}
.gate-card {
  padding: 34px 30px;
  background: var(--card);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(11, 27, 58, .06), inset 0 0 0 1.5px var(--hair);
  text-align: center;
}
.gate-mark { width: 132px; height: auto; margin-bottom: 18px; }
.gate-card h1 { margin: 2px 0 14px; font-size: 22px; line-height: 1.35; }
.gate-said {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.gate-reason {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--gold-wash);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy);
  text-align: left;
}
.gate-reason-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gate-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 14px;
  font-size: 14.5px;
}
.gate-contact a { color: var(--navy); text-decoration: none; }
.gate-contact a:hover { color: var(--gold-deep); }
.gate-foot {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* The membership access panel. Restrained on purpose: this is a
   serious control, not a dashboard widget. */
.access-now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--hair);
}
.access-bit { display: flex; flex-direction: column; gap: 4px; }
.access-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.access-said { font-size: 14.5px; color: var(--navy); }

.pin.access-active { background: #EAF7EE; color: #1F5730; box-shadow: inset 0 0 0 1.5px #B9DFC6; }
.pin.access-hold { background: var(--gold-wash); color: #6B4E16; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.pin.access-suspended { background: #FBEDE9; color: #6E2525; box-shadow: inset 0 0 0 1.5px #E7C3B7; }
.pin.access-removed { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--hair); }
.access-form .mode-pick { margin-bottom: 4px; }