/*
 * The mail client: folders, conversations, reader.
 *
 * The shape is unchanged — a sidebar and a main column, the sidebar becoming a
 * drawer on a phone. What changed is that the three regions now look like
 * three regions. Everything used to be one near-black with hairlines drawn on
 * it, so the eye had nothing to hold onto and every screen read as a wall of
 * text at the same weight.
 */

.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100dvh;background:var(--ink)}

/* ------------------------------- sidebar --------------------------------- */

.side{
  border-right:1px solid var(--line);
  padding:18px 14px 14px;
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface);
  /* Its own scroll, so a long storage panel or a pile of folders never pushes
     the list beside it around. */
  min-height:0;overflow-y:auto;
}

.brand{
  color:var(--hi);font-weight:800;letter-spacing:-.03em;font-size:1.2rem;
  padding:2px 8px 0;
}
.brand span{
  /* The gradient is on the second half of the word only, so the mark still
     reads as one word rather than as two coloured halves. */
  background:linear-gradient(100deg,var(--pink),var(--pink-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.compose{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 16px;font-weight:650;font-size:.95rem;
  background:linear-gradient(180deg,var(--pink),var(--pink-600));
  color:#fff;border:0;border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 22px -8px rgba(255,46,136,.65);
}
.compose:hover{background:linear-gradient(180deg,var(--pink-400),var(--pink));border:0}

.folders{display:flex;flex-direction:column;gap:1px}

.folder{
  position:relative;
  display:flex;align-items:center;gap:11px;
  background:none;border:0;border-radius:var(--r-sm);
  padding:9px 11px;color:var(--mid);text-align:left;font-weight:500;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.folder:hover{background:rgba(255,255,255,.045);border:0;color:var(--hi)}
.folder:active{transform:none}
.folder .ico{color:var(--lo);flex:none;transition:color var(--fast) var(--ease)}
.folder:hover .ico{color:var(--mid)}
.folder .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.folder[aria-current="true"]{background:var(--pink-tint);color:var(--hi);font-weight:600}
.folder[aria-current="true"] .ico{color:var(--pink)}
/* A bar on the leading edge, not just a tint. The tint alone is easy to miss
   against a dark sidebar, and it is the only thing telling somebody which of
   six identical rows they are looking at. */
.folder[aria-current="true"]::before{
  content:'';position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--pink);
}

/* Unread count. A pill, right-aligned, and absent entirely at zero — a "0"
   beside every folder is five pieces of furniture telling you nothing. */
.folder .count{
  font-size:.72rem;font-weight:650;color:var(--lo);
  background:rgba(255,255,255,.07);border-radius:999px;padding:1px 7px;min-width:22px;text-align:center;
}
.folder[aria-current="true"] .count{background:var(--pink-tint-strong);color:var(--pink-300)}
.folder .count:empty{display:none}

/* ------------------------------ the account ------------------------------ */

.me{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--lo);
  display:flex;flex-direction:column;gap:6px;
  /*
   * `word-break:break-all` used to live here, to stop a long address
   * overflowing. It broke EVERY word in the panel — "yo ur", "at tachments",
   * "mes sages" — because it does not care about word boundaries at all. The
   * pair below breaks long unbroken strings only, which is what was actually
   * wanted.
   */
  overflow-wrap:anywhere;word-break:normal;
}
.me .addr{
  color:var(--mid);font-weight:550;font-size:.86rem;
  display:block;padding:2px 0 6px;
}
#me button.ghost{
  background:none;border:1px solid var(--line);color:var(--mid);
  border-radius:var(--r-sm);padding:7px 11px;font-size:.83rem;font-weight:500;
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
}
#me button.ghost .ico{color:var(--lo);flex:none}
#me button.ghost:hover{color:var(--hi);background:rgba(255,255,255,.045);border-color:var(--line-strong)}
#me button.danger{color:var(--danger);border-color:rgba(255,122,147,.28)}
#me button.danger:hover{color:var(--danger);background:rgba(255,122,147,.10);border-color:var(--danger)}
#me button.danger .ico{color:var(--danger)}

/* --------------------------------- main ---------------------------------- */

/*
 * The main column: a header, and beneath it the list and the conversation.
 *
 * On a narrow screen one pane at a time; past 1100px both at once, which is
 * what a mail client looks like and what the empty two thirds of a desktop
 * window were asking for. `data-view` says what the reader is DOING — browsing
 * or reading — and each width decides what that looks like.
 */
.main{
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr;
  min-width:0;min-height:100dvh;height:100dvh;
}
.main > .bar{grid-column:1/-1}
.main[data-view="thread"] > .list{display:none}
.main[data-view="list"] > .reader{display:none}

.bar{
  display:flex;gap:10px;align-items:center;padding:12px 18px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  /* Translucent rather than opaque, so a list scrolling under it reads as
     depth rather than as the list simply ending. */
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
/* No `color-mix` (older Safari, older Firefox) means a transparent bar over
   scrolling text, which is unreadable rather than merely plain. */
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .bar{background:var(--surface)}
}

.search{flex:1;position:relative;display:flex;align-items:center}
.search .ico{position:absolute;left:12px;color:var(--lo);pointer-events:none}
.search input{padding-left:38px;border-radius:999px;background:rgba(255,255,255,.045)}

.icon{
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px;color:var(--mid);display:inline-flex;align-items:center;justify-content:center;
  flex:none;
}
.icon:hover{background:rgba(255,255,255,.06);color:var(--hi);border-color:var(--line-strong)}
#side-toggle{display:none}

/* ------------------------------ the list --------------------------------- */

.list{overflow:auto;flex:1;min-height:0}

.row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'avatar who meta' 'avatar subj meta';
  column-gap:12px;row-gap:1px;align-items:center;
  padding:12px 18px;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;background:none;width:100%;text-align:left;border-radius:0;
  transition:background var(--fast) var(--ease);
}
.row:hover{background:var(--raise);border:0;border-bottom:1px solid var(--line);transform:none}
.row:active{transform:none}

.mono-avatar{
  grid-area:avatar;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.92rem;letter-spacing:-.01em;
  /* Hue comes from the address, so the same person is the same colour every
     time — that is what makes a list scannable before it is read. Saturation
     and lightness are fixed so no correspondent can land on something
     unreadable. */
  color:hsl(var(--h) 70% 78%);
  background:hsl(var(--h) 55% 20%);
  border:1px solid hsl(var(--h) 50% 32%);
}

.row .who{
  grid-area:who;color:var(--mid);font-size:.88rem;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.row .subj{
  grid-area:subj;color:var(--lo);font-size:.87rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.row .subj strong{color:var(--mid);font-weight:500}
.row .subj em{color:var(--lo);font-style:normal}

.row .meta{
  grid-area:meta;display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  color:var(--lo);
}
.row .when{font-size:.75rem;white-space:nowrap}
.row .clip{color:var(--lo);display:inline-flex}

/* Unread. Weight and colour, plus a dot — three signals, because the first two
   alone are invisible to anybody who reads the list at a glance. */
.row.unread .who{color:var(--hi);font-weight:700}
.row.unread .subj strong{color:var(--hi);font-weight:650}
.row.unread{background:linear-gradient(90deg,var(--pink-tint),transparent 42%)}
.row.unread .dot{width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none}

/*
 * The conversation currently open.
 *
 * Only meaningful once the list stays beside the reader — before that, opening
 * a thread replaced the list entirely and there was nothing to mark. With both
 * on screen, nothing otherwise says which of forty rows is the one being read.
 */
.row[aria-current="true"]{background:var(--raise-2)}
.row[aria-current="true"]::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pink);
}
.row{position:relative}

/* --------------------------- the empty state ----------------------------- */

/*
 * "Nothing here." in the middle of a black rectangle is technically an answer
 * and reads as a failure. An empty inbox is a GOOD state and should look like
 * one — and an empty search or a failed load are different states that were
 * being given the same sentence.
 */
.empty{
  padding:64px 24px;text-align:center;color:var(--lo);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.empty .ico{color:var(--line-strong);margin-bottom:10px}
.empty .empty-title{color:var(--mid);font-size:1.02rem;font-weight:600}
.empty .empty-sub{font-size:.87rem;max-width:34ch;line-height:1.5}

/* ------------------------------ the reader ------------------------------- */

.reader{overflow:auto;min-height:0;min-width:0;padding:22px 24px 48px}

/*
 * The measure.
 *
 * ONE container holds the whole conversation, rather than a `.reader > *` rule
 * setting a max-width on each child. That version was overridden by every
 * child that declared a `margin` shorthand of its own — the cards, the back
 * button, the heading — so those sat hard against the left edge while the
 * action bar, which declared no margin, floated centred a few hundred pixels
 * away from them. One container cannot disagree with itself.
 *
 * Prose set across 1600 pixels is prose nobody finishes.
 */
.thread{max-width:var(--read-max);margin-inline:auto}

.reader h2{color:var(--hi);margin:0 0 14px;font-size:1.4rem;line-height:1.3;letter-spacing:-.02em}

/* Nothing open yet. On a wide screen the reader is always on screen, so it
   needs something to say rather than being a black rectangle beside the list. */
.reader:empty::after{
  content:'Select a conversation to read it.';
  display:grid;place-items:center;height:100%;color:var(--lo);font-size:.92rem;
}

.back{
  margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--line);color:var(--mid);
  padding:7px 13px 7px 10px;font-size:.86rem;
}
.back:hover{background:rgba(255,255,255,.05);color:var(--hi)}

.msgcard{
  border:1px solid var(--line);border-radius:var(--r);margin:14px 0;
  overflow:hidden;background:var(--raise);box-shadow:var(--shadow);
}
.msghead{
  padding:14px 16px;
  display:flex;gap:10px;align-items:baseline;justify-content:space-between;
}
.msghead .from{color:var(--hi);font-weight:650;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msghead .to{color:var(--lo);font-size:.8rem;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msghead > span:first-child{min-width:0}
.msghead .when{color:var(--lo);font-size:.76rem;white-space:nowrap;flex:none}

/*
 * The authentication results, on a row of their own.
 *
 * Three chips reading "spf not checked", "dkim not checked", "dmarc not
 * checked" are wider than a phone. Inline with the sender and the timestamp
 * they wrapped into a run that put the date in the middle of a sentence.
 */
.authrow{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:0 16px 12px;border-bottom:1px solid var(--line);
}
.auth{
  font-family:var(--mono);font-size:.66rem;line-height:1.6;
  border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;color:var(--lo);white-space:nowrap;
}
.auth.pass{border-color:rgba(91,216,166,.35);color:var(--ok);background:rgba(91,216,166,.08)}
.auth.fail{border-color:rgba(255,122,147,.35);color:var(--danger);background:rgba(255,122,147,.08)}

/* Sender HTML keeps a white canvas — it was authored for one. A body we
   generated ourselves from plain text is drawn in the app's own theme, so the
   frame behind it must be see-through rather than white. */
/*
 * The message body.
 *
 * `overflow:hidden` because the frame is sized to its content by the document
 * itself — a scrollbar here could only ever be a second scroller inside the
 * page's, which is the thing that made mail unreadable on a touchscreen.
 *
 * Sender HTML keeps its white canvas; a body we generated from plain text is
 * drawn in the app's own theme, so the frame behind it is see-through.
 */
.body-frame{width:100%;border:0;display:block;background:#fff;overflow:hidden}
.body-frame[data-plain="true"]{background:transparent}

.banner{
  padding:10px 16px;background:var(--pink-tint);border-bottom:1px solid var(--line);
  font-size:.83rem;display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.banner button{padding:6px 11px;font-size:.78rem}

.atts{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.att{
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:7px 12px;font-size:.82rem;
  color:var(--mid);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.att:hover{background:var(--raise-2);border-color:var(--pink);color:var(--hi)}
.att .ico{color:var(--lo);flex:none}

/*
 * The action bar.
 *
 * Reply leads and is the only accent button; the rest are quiet. Six identical
 * buttons wrapping into two ragged rows made Trash as prominent as Reply and
 * left one stranded on a line of its own.
 *
 * On a narrow screen it scrolls sideways rather than wrapping, so the order
 * stays put — a control that jumps to a different line depending on how wide a
 * label happens to be is a control people press by accident.
 */
.replybar{
  display:flex;gap:8px;padding:16px 0 4px;flex-wrap:wrap;
}
.replybar::-webkit-scrollbar{display:none}
.replybar button{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.replybar button .ico{flex:none;color:var(--lo)}
.replybar button.primary .ico{color:currentColor}
.replybar button.ghost{background:none;border:1px solid var(--line);color:var(--mid)}
.replybar button.ghost:hover{background:var(--raise-2);color:var(--hi);border-color:var(--line-strong)}
.replybar button.ghost[aria-pressed="true"]{
  color:var(--warn);border-color:rgba(240,179,74,.4);background:rgba(240,179,74,.10);
}
.replybar button.ghost[aria-pressed="true"] .ico{color:var(--warn)}

/* ------------------------------- compose --------------------------------- */

.compose-dialog{
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface);color:var(--mid);
  width:min(660px,94vw);padding:0;box-shadow:var(--shadow-lg);
}
.compose-dialog::backdrop{background:rgba(4,4,8,.72);backdrop-filter:blur(3px)}
.compose-dialog form{padding:18px;display:flex;flex-direction:column;gap:12px}
.compose-dialog header{
  display:flex;justify-content:space-between;align-items:center;color:var(--hi);
  font-size:1.05rem;padding-bottom:4px;
}
.compose-dialog label{
  display:grid;gap:5px;font-size:.76rem;color:var(--lo);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.compose-dialog label input{text-transform:none;letter-spacing:normal;font-weight:400}
.compose-dialog textarea{resize:vertical;min-height:180px;line-height:1.6}
.compose-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}
.compose-dialog footer button[value="send"]{
  background:linear-gradient(180deg,var(--pink),var(--pink-600));color:#fff;border:0;font-weight:650;
}

/* ------------------------------ the setup -------------------------------- */

.addr-row{display:flex;align-items:stretch;gap:0}
.addr-row input{border-top-right-radius:0;border-bottom-right-radius:0}
.domain{
  display:flex;align-items:center;padding:0 13px;
  border:1px solid var(--line-strong);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--lo);font-size:.9rem;white-space:nowrap;background:rgba(255,255,255,.02);
}

/* -------------------------------- storage -------------------------------- */

/*
 * The shared Storage Unit panel.
 *
 * A full mailbox bounces mail without its owner seeing anything — the bounce
 * goes to whoever wrote to them — so this panel is the only warning there is.
 * It is coloured by state rather than left as plain text, and it collapses to
 * a summary until it matters.
 */
.section{display:flex;flex-direction:column}
.section h3{
  margin:14px 0 6px;font-size:.72rem;color:var(--lo);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;
}
.section p{margin:0 0 8px;line-height:1.5}
.section .why{font-size:.78rem;color:var(--lo);line-height:1.5}
/* The headline carries the state, so it can be coloured without the words
   having to shout. */
.section p[data-level="soft"]{color:var(--warn)}
.section p[data-level="hard"]{color:var(--danger);font-weight:600}

.meter{
  height:7px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:8px 0 10px;
}
.meter-fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--pink-600),var(--pink));
  transition:width var(--slow) var(--ease);
}
.meter-fill[data-level="soft"]{background:linear-gradient(90deg,#c98a1f,var(--warn))}
.meter-fill[data-level="hard"]{background:linear-gradient(90deg,#c14458,var(--danger))}
.meter-fill[data-level="unavailable"],
.meter-fill[data-level="unknown"]{background:var(--lo)}

.svclist{list-style:none;margin:2px 0 8px;padding:0;font-size:.8rem}
.svclist li{
  display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--line);
}
.svclist li:last-child{border-bottom:0}
.svcname{color:var(--mid)}
.svcsize{color:var(--lo);font-variant-numeric:tabular-nums}

/* -------------------------------- mobile --------------------------------- */

/*
 * A phone is not a narrow desktop.
 *
 * The rules below are about the things that actually bite on a handset: a
 * drawer that is genuinely gone when closed rather than parked off-screen, tap
 * targets a thumb can hit, inputs that do not make iOS zoom the page, and room
 * for the notch and the home indicator.
 */
@media (max-width:820px){
  .app{grid-template-columns:1fr}

  /* The folder drawer.
   *
   * `visibility` is animated alongside the transform, not left out of it. A
   * panel moved off-screen by `translateX` alone is still focusable and still
   * read by a screen reader — so a keyboard or VoiceOver user lands in a menu
   * that is not on screen and cannot be seen to be there. */
  .side{position:fixed;inset:0 auto 0 0;width:min(86vw,var(--side));z-index:40;
    background:var(--surface);border-right:1px solid var(--line-strong);
    box-shadow:var(--shadow-lg);
    padding-top:max(18px,env(safe-area-inset-top));
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-100%);visibility:hidden;
    transition:transform var(--slow) var(--ease),visibility var(--slow)}
  .side.open{transform:none;visibility:visible}

  /* Tapping the page behind the drawer closes it, which is what every phone
     user expects and what a keyboard user gets from Escape. */
  #side-scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.6);
    backdrop-filter:blur(2px);animation:scrimin var(--slow) ease}
  #side-scrim[hidden]{display:none}
  @keyframes scrimin{from{opacity:0}to{opacity:1}}
  body.drawer-open{overflow:hidden}

  #side-toggle{display:inline-flex}

  .bar{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}

  /* 44px is the smallest target a thumb hits reliably. These were sized by
     their glyph, which on a phone is roughly half that. */
  .icon{min-width:44px;min-height:44px}

  /* 16px or iOS zooms the whole page on focus, and the layout never recovers
     because the user then has to pinch back out by hand. */
  input,textarea,select{font-size:16px}

  /* A conversation row is the main thing being tapped, so it gets height, and
     the sender gets the width a name actually needs. */
  .row{padding:13px 14px;column-gap:11px}
  .mono-avatar{width:40px;height:40px}
  .row .who{max-width:none;font-size:.92rem}
  .row .subj{font-size:.86rem}

  .list,.reader{padding-bottom:max(16px,env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch}
  .reader{padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));padding-top:16px}
  .reader h2{font-size:1.2rem}
  .msgcard{margin:12px 0;border-radius:var(--r)}
  .msghead{padding:12px 14px;gap:8px}
  .authrow{padding:0 14px 10px}
  .replybar{padding-bottom:max(8px, env(safe-area-inset-bottom))}
  /* Reply is the one that has to be reachable with a thumb; the rest wrap
     beneath it rather than being squeezed onto one line. */
  .replybar button{flex:1 1 auto;justify-content:center}
  .replybar button.primary{flex-basis:100%}

  .empty{padding:56px 20px}

  /* Composing on a phone is a full-screen job. A centred card with a backdrop
     leaves a keyboard covering the message box. */
  .compose-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border:0;border-radius:0;margin:0}
  .compose-dialog form{height:100dvh;box-sizing:border-box;
    padding-top:max(16px,env(safe-area-inset-top));
    padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .compose-dialog textarea{flex:1;min-height:0}
}

/* ------------------------------- desktop --------------------------------- */

/*
 * Past 1100px, the list and the conversation are shown together.
 *
 * This is the change the empty two thirds of a desktop window were asking for.
 * Opening a message used to replace the whole list with a conversation set in
 * a 74-character column, leaving a field of black to the right of it and no
 * way to see what else had arrived without going Back.
 *
 * `data-view` still changes: it decides which pane the READER is attending to,
 * which at this width means which one is scrolled and highlighted rather than
 * which one exists.
 */
@media (min-width:1100px){
  .main{grid-template-columns:minmax(320px, 30%) 1fr}
  /* Both panes, always, whatever the view says. */
  .main[data-view="thread"] > .list,
  .main[data-view="list"] > .reader{display:block}

  .list{border-right:1px solid var(--line)}
  /* Each pane scrolls on its own, so reading a long message does not scroll
     the list of conversations out from under the pointer. */
  .list,.reader{overflow:auto;min-height:0}

  /* The list is a column now rather than a full-width table, so a row has to
     stack instead of spreading. */
  .row{grid-template-areas:'avatar who meta' 'avatar subj subj';row-gap:2px}
  .row .meta{flex-direction:row;align-items:center;gap:8px}

  /* Back is a phone control. With the list on screen there is nowhere to go
     back TO, and the row highlight already says where you are. */
  .back{display:none}
  .reader{padding:26px 28px 56px}

  /*
   * The reading column sits against the list rather than centred in the space
   * left over.
   *
   * Centred, it floated three hundred pixels clear of the list on a wide
   * screen — the message and the conversation it belongs to looked like two
   * unrelated things with a gap between them. Left-aligned, the eye goes from
   * the row to the message it opened.
   */
  .thread{margin-inline:0}
}

/* Wider still: the reading column gets room to breathe rather than the list
   growing into a third of a very large screen. */
@media (min-width:1500px){
  :root{--side:288px}
  .main{grid-template-columns:minmax(340px, 400px) 1fr}
  .list .row{padding-inline:20px}
}

/* Somebody who has asked for less motion gets the interface without the
   travel. Things still appear and disappear; they simply do not slide. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  button:active{transform:none}
}

/* ------------------------- things that went wrong ------------------------- */

/* In the document, not in #list. Opening a thread hides the list, and Reply is
   only reachable from an open thread — so a rejected reply was announced into
   a hidden section and the user was never told. */
.sendtrouble{
  position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:60;
  display:flex;align-items:center;gap:12px;max-width:min(92vw,40rem);
  background:#2A1016;border:1px solid rgba(255,122,147,.4);color:#FFD9E0;
  padding:12px 16px;border-radius:var(--r);box-shadow:var(--shadow-lg);
  animation:trouble .28s var(--ease);
}
@keyframes trouble{from{opacity:0;translate:-50% 12px}to{opacity:1;translate:-50% 0}}
.sendtrouble button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;
  padding:6px 13px}
.sendtrouble button:hover{background:rgba(255,255,255,.22)}

/* Older conversations. The server has always paged; the client sent no offset
   and offered no control, so the fifty-first thread was unreachable. */
.more-threads{
  display:block;width:100%;padding:15px;background:none;border:0;
  border-top:1px solid var(--line);color:var(--lo);font-weight:500;border-radius:0;
}
.more-threads:hover{background:var(--raise);color:var(--mid);border:0;border-top:1px solid var(--line)}

#blocked{max-width:36rem}
#blocked .crow{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}