/* The guide's dress -- the house's own, carried over from desk.css and
   login.html. Nothing here is new design: the palette is the ratified
   one, the four faces have their fixed jobs, every corner is square,
   and every control is a word.

   THE FONTS. Soehne is LICENSED, not open. It is served from
   maitland.app's own /fonts/ door and from nowhere else -- never a CDN,
   never another domain. Newsreader, Spectral and IBM Plex Mono are OFL
   and come from Google Fonts, as the app's own sheets take them. */

@font-face{font-family:"Sohne";font-weight:400;font-style:normal;font-display:block;
  src:url("/fonts/soehne-buch.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:500;font-style:normal;font-display:block;
  src:url("/fonts/soehne-kraftig.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:600;font-style:normal;font-display:block;
  src:url("/fonts/soehne-halbfett.woff2") format("woff2")}
@font-face{font-family:"Sohne";font-weight:700;font-style:normal;font-display:block;
  src:url("/fonts/soehne-dreiviertelfett.woff2") format("woff2")}

/* The day set: the Ultramarine hand on cream, exactly as face/look.js
   and ios/Dashboard/Look.swift print it. */
:root{
  --paper:#EFE8DB;
  --paper-hi:#F6F2E8;
  --card:#FFFEFA;
  --ink:#201F1B;
  --pen:#1A4BA8;
  --pencil:#6B6455;
  --rule:#D3CBB9;
  --clerk:#21684A;

  --ui:"Sohne",system-ui,-apple-system,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --mark:"Spectral",Georgia,serif;

  --folio-h:44px;
}

/* The same hand under the lamp: buff paper, the night ink set. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#161617;
    --paper-hi:#24221F;
    --card:#292724;
    --ink:#E8E4D8;
    --pen:#8AA4EE;
    --pencil:#A5A79A;
    --rule:#3A362C;
    --clerk:#63BC93;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
}
img,video{max-width:100%}

/* Squared, always. Nothing on the sheet has a rounded corner. */
a,button,input,figure,table,div,section{border-radius:0}

/* Keyboard focus is visible everywhere: the pen, 2px, and no offset
   games -- a person tabbing through the guide should always know where
   they are. */
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}

/* ---------- the three dresses every control wears ----------
   A word that ACTS: ink, 1px ink hairline beneath.
   A word that is a DOOR: pen, 1px dotted.
   A word that DECLINES: pencil, bare.
   No borders, no fills, no icons. */
.acts{font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  color:var(--ink);border-bottom:1px solid var(--ink);background:none;border-top:0;
  border-left:0;border-right:0;padding:0;cursor:pointer;text-decoration:none}
.door{color:var(--pen);border-bottom:1px dotted var(--pen);text-decoration:none;
  background:none;border-top:0;border-left:0;border-right:0;padding:0;cursor:pointer;
  font:inherit}
.declines{color:var(--pencil);border:0;background:none;padding:0;font:inherit}

/* ---------- the folio line ----------
   Frozen at the top of the sheet, as the phone's is. The paper's NAME
   at the left end in Spectral, the sheet's TOOL at the right end under
   its 2px pen bar. The page's own name does not print here. */
.folio{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 16px 9px;
}
@media (min-width:900px){
  .folio{padding-left:32px;padding-right:32px}
}
.folio .name{
  font-family:var(--mark);font-weight:500;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--pen);border-bottom:1px dotted var(--pen);text-decoration:none;
}
.folio .tools{display:flex;align-items:baseline;gap:20px}
/* The tool's 2px pen bar sits under the WORD alone -- never under the
   line, which keeps its own 1px rule. */
.folio .tool{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
  border-bottom:2px solid var(--pen);padding:0 0 3px;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
}
.folio .contents-door{font-family:var(--ui);font-size:12.5px;letter-spacing:.02em}
@media (min-width:900px){ .folio .contents-door{display:none} }

/* ---------- search ----------
   The house's own field: no box, a 1.5px rule beneath that takes the
   pen on focus. Nothing is sent anywhere; the index is a file. */
.search{display:none;border-bottom:1px solid var(--rule);padding:10px 16px 18px;
  background:var(--paper)}
.search.open{display:block}
@media (min-width:900px){ .search{padding-left:32px;padding-right:32px} }
.search input{
  width:100%;max-width:640px;display:block;
  font-family:var(--body);font-size:17px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--rule);
  padding:8px 2px;
}
.search input:focus{outline:none;border-bottom-color:var(--pen)}
/* the browser's own clear glyph: a piece of chrome the house has no
   word for, and the one thing the field would otherwise wear */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search ol{list-style:none;margin:14px 0 0;padding:0;max-width:640px}
.search li{padding:9px 0;border-bottom:1px solid var(--rule)}
.search li a{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.01em;
  color:var(--pen);border-bottom:1px dotted var(--pen);text-decoration:none}
.search li p{margin:5px 0 0;font-size:15px;color:var(--pencil);line-height:1.45}
.search .none{font-family:var(--ui);font-size:12.5px;color:var(--pencil);margin:14px 0 0}

/* ---------- the sheet ---------- */
.sheet{padding:0 16px 80px;max-width:1080px;margin:0 auto}
@media (min-width:900px){
  .sheet{
    display:grid;
    grid-template-columns:232px minmax(0,1fr);
    gap:48px;
    padding:0 32px 120px;
  }
}

/* A sheet with no contents column -- the legal pages -- is one column,
   never the grid's first cell. */
.sheet.one{display:block}

/* ---------- the contents column ----------
   The numbered index, the rows in the instrument's own face, one 1px
   rule under each row, the page being read in the pen. */
.contents{display:none}
@media (min-width:900px){
  .contents{
    display:block;
    position:sticky;top:calc(var(--folio-h) + 18px);
    align-self:start;
    margin-top:38px;
  }
}
.contents ol{list-style:none;margin:0;padding:0;counter-reset:page}
.contents li{counter-increment:page;border-bottom:1px solid var(--rule)}
.contents a{
  display:grid;grid-template-columns:24px 1fr;gap:8px;
  font-family:var(--ui);font-weight:500;font-size:12.5px;line-height:1.35;
  color:var(--ink);text-decoration:none;padding:9px 0;
}
.contents a::before{content:counter(page,decimal-leading-zero);color:var(--pencil)}
.contents li.here a{color:var(--pen)}
.contents li.here a::before{color:var(--pen)}
.contents .eyebrow{margin:0 0 8px}

/* ---------- the page ---------- */
.page{max-width:66ch;padding-top:34px}
.page h1{
  font-family:var(--ui);font-weight:700;font-size:36px;letter-spacing:-.03em;
  line-height:1.03;margin:0 0 10px;
}
@media (max-width:560px){ .page h1{font-size:30px} }
.page .summary{font-size:19px;color:var(--pencil);margin:0 0 30px;line-height:1.45}
.page h2{
  font-family:var(--ui);font-weight:600;font-size:20px;letter-spacing:-.01em;
  margin:40px 0 10px;
}
.page h3{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:.01em;
  margin:28px 0 6px}
.page p{margin:0 0 18px}
.page ul,.page ol{margin:0 0 18px;padding-left:22px}
.page li{margin:0 0 7px}
.page a{color:var(--pen);border-bottom:1px dotted var(--pen);text-decoration:none}
.page hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.page strong{font-weight:600}

/* An eyebrow: small tracked caps in pencil. No rule beneath one --
   rules belong to the planner's head and lanes (ruled Sep 3, 2026). */
.eyebrow{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pencil);margin:34px 0 6px}

/* ---------- a control word ----------
   A word the app prints, printed here in the app's own hand: the
   acting word's dress, so `PICK IT UP` on the page looks like PICK IT
   UP on the phone. */
.page .word{
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  color:var(--ink);border-bottom:1px solid var(--ink);
  white-space:nowrap;
}

/* ---------- the clerk's hand ----------
   Her typescript, in her green. Bare: her hand is the mark, so no rule
   and no box stands beside it. */
.page blockquote{margin:24px 0;padding-left:16px;border-left:1px solid var(--rule);
  color:var(--pencil)}
.page blockquote.clerk{
  font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--clerk);
  border-left:0;padding-left:0;margin:24px 0;
}
.page blockquote p{margin:0 0 10px}
.page blockquote p:last-child{margin:0}

/* ---------- a film ----------
   The house's card stock, a 1px rule around it, square. The caption in
   pencil beneath. It plays while it is being looked at and stops when
   it is not. */
.film{margin:30px 0;padding:0;background:var(--card);border:1px solid var(--rule)}
.film video{display:block;width:100%;height:auto;background:var(--paper-hi)}
.film figcaption{
  font-family:var(--ui);font-size:12.5px;line-height:1.4;color:var(--pencil);
  padding:10px 12px;border-top:1px solid var(--rule);
}

/* ---------- tables ----------
   The one thing on the sheet allowed its own sideways scroll; the page
   itself never has one. */
.scroller{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.page table{border-collapse:collapse;font-size:16px;min-width:100%}
.page th,.page td{text-align:left;padding:8px 16px 8px 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
.page th{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pencil)}

/* ---------- the index page's own run ---------- */
.run{list-style:none;margin:8px 0 0;padding:0;max-width:66ch;counter-reset:page}
.run li{counter-increment:page;border-bottom:1px solid var(--rule)}
.run a{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:16px 0;
  text-decoration:none;color:var(--ink);border:0}
.run a::before{content:counter(page,decimal-leading-zero);
  font-family:var(--ui);font-weight:500;font-size:12.5px;color:var(--pencil);
  padding-top:4px}
.run .t{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.01em;
  color:var(--ink);display:block}
.run .s{display:block;margin-top:4px;color:var(--pencil);font-size:16px;line-height:1.45}
.run a:hover .t{color:var(--pen)}

/* ---------- the foot ----------
   Two doors and nothing else. No dates, no counters, nothing asking
   whether this was helpful. */
.foot{display:flex;justify-content:space-between;gap:24px;margin:56px 0 0;
  padding-top:18px;border-top:1px solid var(--rule);max-width:66ch}
.foot a{font-family:var(--ui);font-size:12.5px;line-height:1.35;max-width:46%}
.foot .next{text-align:right;margin-left:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* The office's own additions, served after dress/guide.css -- which is
   the house's dress and is not copied here, so the two can never drift.
   Everything below is a surface the guide has no equivalent for: the
   folio's room words, the sign-in sheet, the listings, and the editor.

   Nothing here introduces a shape. Every control is still a word, every
   field is still the underline, and every corner is still square. */

:root{
  /* The one colour the guide never needed: the trouble line, which is
     login.html's own. It is said only where something failed. */
  --trouble:#A63D40;
}
@media (prefers-color-scheme:dark){
  :root{ --trouble:#D98A8C }
}

/* ---------- the folio's rooms ----------
   The room being stood in wears the 2px pen bar, exactly as a sheet's
   tool does; the rest are plain ink in the same hand. `sign out`
   declines, so it is pencil and bare. */
.folio .room{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:0;padding:0 0 3px;
}
.folio .tool{text-decoration:none}
.folio form.out{display:inline;margin:0}
.folio .declines{font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.folio .tools{flex-wrap:wrap}

/* ---------- the trouble line ----------
   Nothing says "saved". Only a failure earns a sentence. */
.trouble{
  font-family:var(--ui);font-size:12.5px;line-height:1.4;color:var(--trouble);
  margin:0 0 20px;
}
.page .trouble:empty{display:none}

/* ---------- a row of control words ---------- */
.stack{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;margin:0 0 24px}
.stack form.inline{display:inline;margin:0}

/* ---------- the listings ----------
   The index dress: one row each, a 1px rule under each, whatever
   annotates the row in pencil at its right end. */
.rows{list-style:none;margin:10px 0 30px;padding:0}
.rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:10px 0;border-bottom:1px solid var(--rule);
}
.rows li a{
  font-family:var(--ui);font-weight:500;font-size:14px;letter-spacing:.01em;
  color:var(--pen);border-bottom:1px dotted var(--pen);text-decoration:none;
}
.rows .note{
  font-family:var(--ui);font-size:11.5px;color:var(--pencil);
  white-space:nowrap;text-align:right;
}

/* what a page says about itself at its foot, in pencil */
.said{
  font-family:var(--ui);font-size:11.5px;color:var(--pencil);
  margin:40px 0 0;padding-top:14px;border-top:1px solid var(--rule);
}
.said a{margin-left:16px}

/* the cabinet's own map, which is a wiki page standing over the listing */
.map{margin:0 0 10px}

/* ---------- the editor ----------
   The house's underline grown to a page: no box, a rule beneath, the
   pen on focus. Newsreader, because these are the owner's own words --
   mono is the clerk's hand and hers alone. */
.editor{margin:8px 0 0}
.editor textarea{
  width:100%;min-height:62vh;display:block;resize:vertical;
  font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:6px 2px 12px;
}
.editor textarea:focus{outline:none;border-bottom-color:var(--pen)}
.editor .stack{margin-top:18px}

/* the page as it now stands, printed under the words that were typed
   when a save is refused */
.theirs{
  font-family:var(--body);font-size:15px;line-height:1.5;color:var(--pencil);
  white-space:pre-wrap;background:var(--paper-hi);border:1px solid var(--rule);
  padding:14px 16px;overflow-x:auto;
}

/* ---------- putting a file in ---------- */
.drop{margin:34px 0 0;padding:0}
.drop.over{outline:2px solid var(--pen);outline-offset:8px}
.put{margin:0 0 26px}
/* The browser's own file button is the one piece of chrome the office
   cannot replace without javascript standing between a person and their
   own file picker. So it is DRESSED as a word instead: the acting
   word's ink and hairline, no box, no fill. The name of the file the
   browser prints beside it stands in pencil, as a note does. */
.put input[type=file]{font-family:var(--ui);font-size:12.5px;color:var(--pencil);
  max-width:100%}
.put input[type=file]::file-selector-button{
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);
  border-radius:0;padding:0;margin:0 12px 0 0;cursor:pointer;
}
.put input[type=text]{
  width:100%;max-width:340px;display:block;
  font-family:var(--body);font-size:17px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--rule);
  padding:8px 2px;
}
.put input[type=text]:focus{outline:none;border-bottom-color:var(--pen)}
.put .stack{margin:14px 0 0}

/* a name asked for on its own page -- the new wiki page */
.named label{
  display:block;font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);margin:14px 0 5px;
}
.named input{
  width:100%;max-width:340px;display:block;
  font-family:var(--body);font-size:17px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--rule);padding:8px 2px;
}
.named input:focus{outline:none;border-bottom-color:var(--pen)}

/* ---------- the sheets that stand alone ----------
   Sign in, the reset, a claim: login.html's own shape, in the office's
   words. A card of the lit stock on the paper, and nothing else on the
   screen -- there is nowhere to go from here but in. */
.alone{display:flex;min-height:100vh;align-items:center;justify-content:center;
  padding:20px}
.sign{background:var(--paper-hi);border:1px solid var(--rule);padding:30px 32px;
  width:380px;max-width:100%}
.sign .mast{
  display:flex;justify-content:space-between;font-family:var(--ui);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pencil);border-bottom:2px solid var(--ink);
  padding-bottom:7px;margin-bottom:18px;
}
.sign h1{font-family:var(--ui);font-weight:700;font-size:34px;letter-spacing:-.03em;
  margin:0 0 4px}
.sign .sub{color:var(--pencil);font-size:15px;margin:0 0 20px;line-height:1.45}
.sign label{
  display:block;font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);margin:14px 0 5px;
}
.sign input{
  width:100%;font-family:var(--body);font-size:17px;padding:8px 2px;
  border:0;border-bottom:1.5px solid var(--rule);background:transparent;color:var(--ink);
}
.sign input:focus{outline:none;border-bottom-color:var(--pen)}
.sign .act{margin:22px 0 0}
.sign .reset{margin:14px 0 0}
.sign .trouble{margin:14px 0 0}

/* ---------- a backticked span in a wiki page ----------
   The wiki renders plain markdown, so a backticked word arrives as
   <code>. It wears the INSTRUMENT'S face, never mono: mono is the
   clerk's hand and hers alone, and a repository name is a machine
   string, which the pedant's jury ruled wears the instrument (Sep 3,
   2026). */
.page code{
  font-family:var(--ui);font-weight:500;font-size:.92em;letter-spacing:.01em;
  color:var(--ink);background:none;
}
.page pre code{font-size:14px}
.page pre{
  font-family:var(--ui);font-size:14px;line-height:1.5;
  background:var(--paper-hi);border:1px solid var(--rule);
  padding:12px 14px;overflow-x:auto;
}

/* ---------- the metrics ----------
   Four numerals, three hairline charts, a grid of cohorts. Nothing here
   is red, nothing moves, and no arrow says whether a number is good --
   the house does not tell its owner how to feel about a count.

   The line under the head says when the snapshot was taken. It is a
   fact in pencil, not a heading. */
.counted{
  font-family:var(--ui);font-size:12.5px;line-height:1.4;color:var(--pencil);
  margin:0 0 20px;
}

/* The app's own day numeral, set exactly as Today sets it: Sohne 700,
   large, drawn in tight, and tabular so a column of them lines up. */
.numerals{display:flex;flex-wrap:wrap;gap:30px 48px;margin:10px 0 44px}
.numeral{min-width:88px}
.numeral .fig{
  font-family:var(--ui);font-weight:700;font-size:56px;letter-spacing:-.04em;
  line-height:1;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.numeral .eyebrow{margin:8px 0 0}
@media (max-width:560px){
  .numerals{gap:26px 34px}
  .numeral .fig{font-size:44px}
}

/* A chart: its name at the left, its maximum in pencil at the right, the
   drawing, then the run's first and last day beneath. The SVG is laid
   out by its viewBox, so it is the same drawing at every width. */
.chart{margin:0 0 34px;max-width:66ch}
.chart .cap{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin:0 0 8px}
.chart .cap .eyebrow{margin:0}
.chart .most{font-family:var(--ui);font-size:11.5px;color:var(--pencil);
  font-variant-numeric:tabular-nums}
.chart .plot{display:block;width:100%;height:auto;overflow:visible}
.chart .ends{display:flex;justify-content:space-between;gap:20px;
  font-family:var(--ui);font-size:11.5px;color:var(--pencil);margin:7px 0 0}

/* The cohorts: small tabular numerals, a rule under the head row and
   nowhere else. The share of the cohort stands beside the count in
   pencil, never instead of it. */
table.cohorts{border-collapse:collapse;font-family:var(--ui);font-size:12.5px;
  font-variant-numeric:tabular-nums;min-width:0}
table.cohorts th,table.cohorts td{border-bottom:0;padding:5px 14px 5px 0;
  text-align:left;white-space:nowrap}
table.cohorts tr:first-child th{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  color:var(--pencil);border-bottom:1px solid var(--rule);padding-bottom:7px;
}
table.cohorts tr th:first-child{font-weight:500;color:var(--pencil);
  text-transform:none;letter-spacing:.01em;font-size:12.5px}
table.cohorts tr:first-child th:first-child{border-bottom:1px solid var(--rule)}
table.cohorts .n{color:var(--ink)}
table.cohorts .pc{color:var(--pencil);margin-left:6px}

/* ---------- support ----------
   A ticket list and a ticket. Nothing here counts an age, nothing is
   red, and there is no badge: the counts at the head are the office's
   own bookkeeping, which the house allows here and nowhere in the app.

   A ticket row carries two things at its left -- who wrote, in pencil,
   and what they wrote about, which is the door. */
.rows.tickets li{align-items:baseline}
.rows.tickets .what{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;min-width:0;
}
.rows.tickets .who{
  font-family:var(--ui);font-size:11.5px;color:var(--pencil);white-space:nowrap;
}

/* The letter itself: the person's own words, in Newsreader, wrapped as
   they were typed. Nothing in them is a link -- the text is printed, not
   rendered, so a URL in a stranger's letter is a string and not a door
   somebody in the office can click by accident. */
.letter{
  font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 26px;
}

/* The rule over a later turn: a hairline, then who said it and when, in
   the same pencil a note wears. */
.turn{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pencil);
  border-top:1px solid var(--rule);padding-top:14px;margin:26px 0 12px;
}

/* The reply box: the editor's underline, shorter -- a reply is a note,
   not a page. */
.reply{margin:34px 0 0}
.reply textarea{
  width:100%;min-height:9em;display:block;resize:vertical;
  font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:6px 2px 12px;
}
.reply textarea:focus{outline:none;border-bottom-color:var(--pen)}
.reply .stack{margin-top:16px}