/* rehearsal.css  ·  Marrow  ·  The Rehearsal  ·  v1.0.0
   ---------------------------------------------------------------------------
   The Rehearsal has to be unmistakable. If a person ever confuses this with
   Heron, the whole guardrail fails, so everything here is built to read as a
   different room: square corners instead of soft ones, a cold slate accent that
   appears nowhere else in Marrow, a hatched band across the top that says
   practice and never scrolls away, and stage-style speaker labels above every
   line. Heron is warm, round and copper. This is flat, ruled and cold on
   purpose.

   Two rules govern the z-index. The overlay sits at 410: above the app, the
   arrival panel and the milestone bloom, and far below the SOS overlay (9000)
   and its escape hatch (9500), which nothing may ever cover. And because the
   overlay does occlude the header's own Crisis help button, it carries its own
   988 line in the top bar, pinned above every state.

   Palette comes from the app's custom properties. The one new value is the
   practice accent, declared once as a token and used only through var().
   --------------------------------------------------------------------------- */

/* the body-scroll lock. Removed on every exit path in close(), including the
   error path, so a crash can never leave the app unscrollable. */
body.rh-open { overflow: hidden !important; }

.rh-ov, .rh-card {
  /* the practice accent: cold slate, used nowhere else in the product */
  --rh-accent: #8AA4BE;
  --rh-line: rgba(138,164,190,.42);
  --rh-line2: rgba(138,164,190,.20);
  --rh-wash: rgba(138,164,190,.10);
  --rh-stage: rgba(10,19,17,.72);
  --rh-radius: 4px;
}

/* ===================== the overlay ===================== */
.rh-ov {
  position: fixed;
  inset: 0;
  z-index: 410;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(11,20,18,.99) 0%, var(--bg, #101C17) 40%, rgba(9,17,15,1) 100%);
  color: var(--body, #C4CCB8);
  font-family: inherit;
  /* The resting state is VISIBLE and interactive. The entrance drives transform
     only, with no fill-mode, so a frozen or never-run animation (backgrounded
     tab, embedded webview, parked rAF) still leaves the crisis line on screen
     and tappable. */
  opacity: 1;
  animation: rhRise .34s var(--ease, cubic-bezier(.22,.68,.2,1));
}
@keyframes rhRise { from { transform: translateY(10px); } to { transform: none; } }
.rh-ov.out { opacity: 0; pointer-events: none; transition: opacity .24s var(--ease, ease); }
.rh-ov:focus { outline: none; }

/* ---- top bar: what this is, and the number that is never covered ---- */
.rh-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--max, 540px);
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 12px;
}
.rh-eye {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rh-accent);
  font-weight: 500;
}
.rh-988 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(192,106,92,.5);
  border-radius: 100px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: #E6BDB4;
  white-space: nowrap;
  text-decoration: none;
  background: rgba(197,110,84,.08);
}
.rh-988:active { transform: scale(.96); }

/* ---- the practice band. Flex-none, so it cannot scroll away from anything. ---- */
.rh-band {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 22px;
  border-top: 1px solid var(--rh-line2);
  border-bottom: 1px solid var(--rh-line2);
  background:
    repeating-linear-gradient(135deg, var(--rh-wash) 0 7px, transparent 7px 15px),
    rgba(138,164,190,.04);
}
.rh-band-txt {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rh-accent);
  font-weight: 500;
  text-align: center;
}
.rh-plate { display: none; }
.rh-plate.on {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-stage);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink, #F2ECDB);
}

/* ---- the scrolling middle ---- */
.rh-shell {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.rh-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--max, 540px);
  margin: 0 auto;
  padding: 20px 22px 24px;
}
.rh-body.is-scene { gap: 12px; }

/* ---- the footer: step out lives here, in every state ---- */
.rh-foot {
  flex: none;
  width: 100%;
  max-width: var(--max, 540px);
  margin: 0 auto;
  padding: 10px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--scribe, rgba(16,11,6,.42));
  box-shadow: 0 -1px 0 var(--line2, rgba(242,236,219,.06)) inset;
  background: rgba(10,19,17,.72);
}
.rh-footrow { display: flex; gap: 10px; justify-content: center; }
.rh-out, .rh-tooreal {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 100px;
  font-family: inherit;
  font-size: .94rem;
  cursor: pointer;
  border: 1px solid var(--rh-line);
  background: var(--rh-wash);
  color: var(--ink, #F2ECDB);
}
.rh-tooreal { border-color: rgba(197,110,84,.44); background: transparent; color: #E0BAB2; }
.rh-out:active, .rh-tooreal:active { transform: scale(.98); }

/* ---- the composer ---- */
.rh-composer { display: flex; gap: 9px; align-items: flex-end; margin-bottom: 10px; }
.rh-input {
  flex: 1 1 auto;
  min-height: 48px;
  max-height: 140px;
  padding: 13px 14px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line2);
  background: rgba(234,241,237,.04);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: none;
  outline: none;
}
.rh-input:focus { border-color: var(--rh-line); }
.rh-input::placeholder { color: var(--faint, #868C77); }
.rh-input:disabled { opacity: .6; }
.rh-send {
  flex: none;
  min-height: 48px;
  min-width: 84px;
  padding: 0 16px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: rgba(138,164,190,.16);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: .94rem;
  cursor: pointer;
}
.rh-send.off, .rh-send[disabled] { opacity: .45; cursor: default; }
.rh-send:active { transform: scale(.98); }

/* ===================== headings and shared text ===================== */
.rh-head { display: flex; flex-direction: column; gap: 8px; }
.rh-eyebrow {
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rh-accent);
  font-weight: 500;
}
.rh-title {
  font-family: var(--serif, inherit);
  font-weight: 520;
  color: var(--ink, #F2ECDB);
  font-size: 1.86rem;
  line-height: 1.1;
  letter-spacing: -.022em;
}
.rh-lead { font-size: 1rem; line-height: 1.58; color: var(--body, #C4CCB8); max-width: var(--measure, 33rem); }
.rh-note { font-size: .8rem; line-height: 1.5; color: var(--faint, #868C77); }
.rh-hint { font-size: .84rem; line-height: 1.5; color: var(--muted, #9AA088); }
.rh-warn { font-size: .86rem; line-height: 1.5; color: #E0BAB2; }
.rh-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #9AA088);
  margin-bottom: -6px;
}
.rh-caution {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--moon, #9FB6A8);
  border-left: 2px solid rgba(159,182,168,.4);
  padding-left: 12px;
}

/* ---- inputs ---- */
.rh-field {
  width: 100%;
  min-height: 96px;
  padding: 14px 15px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line2);
  background: rgba(234,241,237,.04);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  outline: none;
}
.rh-field:focus { border-color: var(--rh-line); }
.rh-field::placeholder { color: var(--faint, #868C77); }
.rh-field-one { min-height: 48px; }

/* ---- starting points ---- */
.rh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-chip {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px dashed var(--rh-line2);
  background: transparent;
  color: var(--body, #C4CCB8);
  font-family: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.rh-chip:active { transform: scale(.97); border-color: var(--rh-accent); color: var(--ink, #F2ECDB); }

/* ---- the primary and secondary moves ---- */
.rh-go {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: rgba(138,164,190,.14);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: 1.02rem;
  cursor: pointer;
}
.rh-go:active { transform: scale(.99); }
.rh-back {
  display: block;
  margin: 0 auto;
  min-height: 44px;
  padding: 0 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .9rem;
  color: var(--muted, #9AA088);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.rh-back:hover { border-bottom-color: var(--faint, #868C77); }

/* ===================== the brief ===================== */
/* the scene card carries stage ticks in its corners, so the room the person
   named looks like a set and not like a chat message */
.rh-scenecard {
  position: relative;
  padding: 16px 17px;
  border: 1px solid var(--rh-line2);
  border-radius: var(--rh-radius);
  background: var(--rh-stage);
}
.rh-scenecard::before, .rh-scenecard::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--rh-line);
  pointer-events: none;
}
.rh-scenecard::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rh-scenecard::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rh-scenetxt {
  font-family: var(--serif, inherit);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink, #F2ECDB);
  margin-top: 8px;
}
.rh-sceneplay { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.rh-playlab {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint, #868C77);
}
.rh-playwho { font-size: .96rem; color: var(--rh-accent); }

/* ---- the rules, visible before the scene and reachable inside it ---- */
.rh-rules { border-top: 1px solid var(--rh-line2); padding-top: 12px; }
.rh-rules-tog {
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rh-accent);
  cursor: pointer;
}
.rh-rules-tog::after { content: " +"; }
.rh-rules.on .rh-rules-tog::after { content: " –"; }
.rh-rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rh-rule {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--body, #C4CCB8);
}
.rh-tick {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border: 1px solid var(--rh-accent);
  background: var(--rh-wash);
  display: inline-block;
}

/* ---- what you said last time ---- */
.rh-last { border-left: 2px solid var(--rh-line2); padding-left: 14px; display: flex; flex-direction: column; gap: 8px; }
.rh-last-list { display: flex; flex-direction: column; gap: 7px; }
.rh-last-line { font-size: .93rem; line-height: 1.5; color: var(--body, #C4CCB8); }
.rh-last-keep { font-size: .93rem; line-height: 1.5; color: var(--ink, #F2ECDB); }

/* ---- past rehearsals ---- */
.rh-past { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rh-past-list { display: flex; flex-direction: column; gap: 8px; }
.rh-past-row { display: flex; gap: 8px; align-items: stretch; }
.rh-past-open {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-height: 56px;
  padding: 11px 13px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line2);
  background: var(--surface2, #20332B);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.rh-past-open:active { transform: scale(.995); }
.rh-past-sit { font-size: .95rem; color: var(--ink, #F2ECDB); line-height: 1.4; }
.rh-past-meta { font-size: .74rem; color: var(--muted, #9AA088); letter-spacing: .02em; }
.rh-past-keep { font-size: .84rem; color: var(--rh-accent); line-height: 1.45; }
.rh-past-del {
  flex: none;
  min-width: 64px;
  min-height: 44px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--line2, rgba(242,236,219,.06));
  background: transparent;
  color: var(--faint, #868C77);
  font-family: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.rh-past-del:active { transform: scale(.97); }

/* ===================== the scene ===================== */
.rh-scenetop { display: flex; flex-direction: column; gap: 8px; }
.rh-count { display: flex; align-items: center; gap: 11px; }
.rh-dots { display: flex; gap: 4px; }
.rh-dots i {
  width: 12px;
  height: 3px;
  border-radius: 0;
  background: var(--scribe, rgba(16,11,6,.42));
  box-shadow: 0 0 0 1px var(--rh-line2) inset;
  display: block;
}
.rh-dots i.on { background: var(--rh-accent); box-shadow: none; }
.rh-counttxt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #9AA088); }
.rh-scenetop .rh-rules { border-top: 0; padding-top: 0; }
.rh-scenetop .rh-rules-list { margin-bottom: 6px; }

.rh-thread { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.rh-line { display: flex; flex-direction: column; gap: 5px; max-width: 92%; }
.rh-who {
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
}
.rh-said { font-size: 1rem; line-height: 1.55; }

/* the other side: a ruled slab, left, cold. Nothing like a Heron bubble. */
.rh-line.is-them { align-self: flex-start; border-left: 2px solid var(--rh-accent); padding: 2px 0 2px 14px; }
.rh-line.is-them .rh-who { color: var(--rh-accent); }
.rh-line.is-them .rh-said { color: var(--ink, #F2ECDB); }

/* the person: right, square-shouldered, and quieter than the pressure */
.rh-line.is-me { align-self: flex-end; align-items: flex-end; text-align: right; padding: 2px 14px 2px 0; border-right: 2px solid var(--line, rgba(242,236,219,.14)); }
.rh-line.is-me .rh-who { color: var(--muted, #9AA088); }
.rh-line.is-me .rh-said { color: var(--body, #C4CCB8); }

/* the stage direction */
.rh-line.is-sys { align-self: center; max-width: 30ch; text-align: center; }
.rh-line.is-sys .rh-said { font-size: .84rem; line-height: 1.5; color: var(--faint, #868C77); letter-spacing: .01em; }

/* the other side is composing. Squares, not Heron's round dots. */
.rh-typing { display: flex; gap: 5px; align-self: flex-start; padding: 6px 0 6px 16px; }
.rh-typing i { width: 6px; height: 6px; background: var(--rh-line); display: block; animation: rhBeat 1.25s infinite; }
.rh-typing i:nth-child(2) { animation-delay: .18s; }
.rh-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes rhBeat { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* the read is being written */
.rh-pending { display: flex; gap: 5px; }
.rh-pending i { width: 6px; height: 6px; background: var(--rh-line); display: block; animation: rhBeat 1.25s infinite; }
.rh-pending i:nth-child(2) { animation-delay: .18s; }
.rh-pending i:nth-child(3) { animation-delay: .36s; }

/* ===================== the debrief ===================== */
.rh-read {
  border: 1px solid var(--rh-line2);
  background: var(--rh-stage);
  border-radius: var(--rh-radius);
  padding: 15px 17px;
}
.rh-read p { font-size: .96rem; line-height: 1.58; color: var(--body, #C4CCB8); margin-top: 8px; }
.rh-keep { display: flex; flex-direction: column; gap: 8px; }
.rh-keepline {
  font-family: var(--serif, inherit);
  font-size: 1.24rem;
  line-height: 1.45;
  color: var(--ink, #F2ECDB);
  border-left: 2px solid var(--rh-accent);
  padding-left: 14px;
}
.rh-readnote { font-size: .93rem; line-height: 1.55; color: var(--body, #C4CCB8); }
.rh-guard { display: flex; flex-direction: column; gap: 9px; }

.rh-lines { display: flex; flex-direction: column; gap: 9px; }
.rh-linerow {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  text-align: left;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line2);
  background: var(--surface2, #20332B);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.rh-linerow:active { transform: scale(.995); }
.rh-linetxt { font-size: .98rem; line-height: 1.5; color: var(--ink, #F2ECDB); }
.rh-linepick { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rh-accent); }

.rh-kept {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-wash);
  padding: 14px 16px;
}
.rh-kept p { font-size: .98rem; line-height: 1.5; color: var(--ink, #F2ECDB); }
.rh-kept .rh-note { color: var(--muted, #9AA088); }

.rh-endrow { display: flex; gap: 10px; }
.rh-again, .rh-done {
  flex: 1 1 0;
  min-height: 50px;
  padding: 0 16px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line2);
  background: rgba(234,241,237,.04);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: .96rem;
  cursor: pointer;
}
.rh-again:active, .rh-done:active { transform: scale(.99); }

/* ===================== out of the scene ===================== */
.rh-handoff-txt {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink, #F2ECDB);
  max-width: var(--measure, 33rem);
}
.rh-help { display: flex; flex-direction: column; gap: 10px; }
.rh-helplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 100px;
  border: 1px solid rgba(192,106,92,.5);
  background: rgba(197,110,84,.1);
  color: #F0D3CE;
  font-size: 1rem;
  text-decoration: none;
}
.rh-helplink:active { transform: scale(.99); }
/* the band changes its words when the scene ends, and stays where it is */
.rh-band.over { background: rgba(197,110,84,.07); border-color: rgba(192,106,92,.34); }
.rh-band.over .rh-band-txt { color: #E0BAB2; }

/* ===================== the embeddable card ===================== */
.rh-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line, rgba(242,236,219,.14));
  background: var(--surface, #1A2A23);
  border-radius: 14px;
  padding: 19px 20px;
  margin-bottom: 13px;
  box-shadow: 0 1px 0 var(--scribe, rgba(16,11,6,.42)) inset, 0 0 0 1px var(--scribe, rgba(16,11,6,.42));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rh-card-line { font-size: .95rem; line-height: 1.58; color: var(--body, #C4CCB8); }
.rh-card-go {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--rh-line);
  background: rgba(138,164,190,.14);
  color: var(--ink, #F2ECDB);
  font-family: inherit;
  font-size: .96rem;
  cursor: pointer;
}
.rh-card-go:active { transform: scale(.99); }
.rh-card-list { display: flex; flex-direction: column; gap: 8px; }
.rh-card-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--rh-radius);
  border: 1px solid var(--line2, rgba(242,236,219,.06));
  background: var(--surface2, #20332B);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.rh-card-row:active { transform: scale(.995); }
.rh-card-sit { font-size: .93rem; color: var(--ink, #F2ECDB); line-height: 1.4; }
.rh-card-meta { font-size: .74rem; color: var(--muted, #9AA088); }

/* ===================== screen reader channel ===================== */
.rh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================== focus, for anyone on a keyboard ===================== */
.rh-ov button:focus-visible,
.rh-ov a:focus-visible,
.rh-ov textarea:focus-visible,
.rh-ov input:focus-visible,
.rh-card button:focus-visible {
  outline: 2px solid var(--rh-accent);
  outline-offset: 2px;
}

/* ===================== reduced motion ===================== */
/* Nothing here is paced by animation, so all of it can go. The scene keeps its
   own rhythm, which is the person typing. */
@media (prefers-reduced-motion: reduce) {
  .rh-ov { animation: none !important; opacity: 1; }
  .rh-ov.out { transition: none; }
  .rh-typing i, .rh-pending i { animation: none !important; opacity: .7; }
  .rh-chip, .rh-out, .rh-tooreal, .rh-send, .rh-go, .rh-again, .rh-done,
  .rh-linerow, .rh-past-open, .rh-past-del, .rh-card-row, .rh-card-go, .rh-988 { transition: none !important; }
  .rh-chip:active, .rh-out:active, .rh-tooreal:active, .rh-send:active, .rh-go:active,
  .rh-again:active, .rh-done:active, .rh-linerow:active, .rh-past-open:active,
  .rh-past-del:active, .rh-card-row:active, .rh-card-go:active, .rh-988:active,
  .rh-helplink:active { transform: none; }
}

/* ===================== small and short screens ===================== */
@media (max-height: 640px) {
  .rh-title { font-size: 1.54rem; }
  .rh-body { gap: 12px; padding-top: 14px; }
  .rh-scenetxt { font-size: 1rem; }
  .rh-keepline { font-size: 1.1rem; }
}
@media (max-width: 360px) {
  .rh-bar, .rh-body, .rh-foot { padding-left: 16px; padding-right: 16px; }
  .rh-chip { font-size: .84rem; padding: 0 12px; }
  .rh-out, .rh-tooreal { padding: 0 16px; font-size: .9rem; }
}