/* TINFO Foundation — the suite in the Foundation's own palette and type.
   Loaded after suite.css; only tokens and a few chrome details are changed. */
:root {
  --bg: #FBF8F2;
  --card: #FFFFFF;
  --ink: #0A1A2F;
  --muted: #6B7A8C;
  --navy: #0A1A2F;
  --blue: #8A6D2E;
  --red: #B4653A;
  --green: #5F7A3E;
  --line: rgba(10,26,47,0.14);
  --r: 0px;
  --sh-sm: 0 2px 8px rgba(10,26,47,0.06);
  --sh-md: 0 10px 26px rgba(10,26,47,0.10);
  --sh-lg: 0 22px 50px rgba(10,26,47,0.16);
  --head: "Cormorant Garamond", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --gold: #C8A45C;
}
body { background: var(--bg); }
h1, h2, h3, .login__card h1 { letter-spacing: 0.005em; }
/* the header bar reads as the site's navy band */
.bar { background: #0A1A2F !important; color: #F6F3EC !important; border-bottom: 3px solid var(--gold) !important; }
.bar a, .bar .who, .bar__me .who { color: #C4CFDB !important; }
.bar .brand, .bar__brand, .bar h1 { color: #F6F3EC !important; font-family: var(--head); }
/* primary actions in the Foundation's gold */
.btn--primary, .btn.primary { background: var(--gold) !important; color: #0A1A2F !important; border-color: var(--gold) !important; font-weight: 700; }
.btn--primary:hover, .btn.primary:hover { background: #E3C489 !important; }
.tab.is-active, .nav a.is-active, .side a.is-active { border-color: var(--gold) !important; color: var(--ink) !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* unread count pills in the folder list pick up gold rather than blue */
.side .count, .folders .count { background: var(--gold) !important; color: #0A1A2F !important; }

/* ------------------------------------------------------------
   The template hardcodes a royal blue in a dozen states. These
   override every one of them with the Foundation's palette.
   ------------------------------------------------------------ */
.btn--primary, .btn.primary { box-shadow: 0 3px 0 #8A6D2E !important; }
.btn--primary:active, .btn.primary:active { box-shadow: 0 1px 0 #8A6D2E !important; }
.btn--ghost:hover, .tools button:hover { background: rgba(200,164,92,0.14) !important; border-color: rgba(200,164,92,0.55) !important; color: var(--ink) !important; }
.box:hover, .mrow:hover { background: rgba(200,164,92,0.10) !important; }
.box.is-on { background: rgba(200,164,92,0.16) !important; border-left-color: var(--gold) !important; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(200,164,92,0.22) !important; outline: none !important; }
.login { background: radial-gradient(1200px 600px at 50% -10%, rgba(200,164,92,0.18), transparent 70%), var(--bg) !important; }
.cell.has { background: rgba(200,164,92,0.14) !important; }
.cell.pick { background: var(--gold) !important; color: #0A1A2F !important; border-color: var(--gold) !important; }
.chip.is-on, .tag.is-on, .seg-opt.is-on { background: rgba(200,164,92,0.18) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
a { color: #8A6D2E; }
a:hover { color: #0A1A2F; }

/* square edges, like the rest of the site */
#compose, .btn, .search, .login__card, .card, .panel, input, select, textarea { border-radius: 0 !important; }

/* ------------------------------------------------------------
   Account: free hours and "who else is free" were stacking one
   word per line. Give the rows room and stop the wrapping.
   ------------------------------------------------------------ */
/* the real markup: #avMine / #avOthers rows of <span><b>DAY</b> 09:00 – 17:00</span><button> */
#avMine .row, #avOthers .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
#avMine .row > span, #avOthers .row > span {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}
#avMine .row > span b, #avOthers .row > span b {
  display: inline-block;
  min-width: 108px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  white-space: nowrap;
}
#avOthers .row > span b {
  display: block;
  min-width: 0;
  margin-bottom: 4px;
  font-family: var(--head);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
#avMine .row > .btn, #avOthers .row > .btn { flex: 0 0 auto; margin-left: auto; }
#avMine, #avOthers { display: flex; flex-direction: column; width: 100%; min-width: 0; }

.hours, .avail, .free { display: flex; flex-direction: column; }
.hours .row, .avail .row, .free .row,
.hour-row, .free-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.hour-row > *, .free-row > * { min-width: 0; }
.hour-row b, .hour-row strong, .free-row b, .free-row strong {
  flex: 0 0 clamp(96px, 12vw, 140px);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); font-weight: 800; white-space: nowrap;
}
.hour-row span, .free-row span { white-space: nowrap; }
.hour-row .btn, .free-row .btn, .hour-row button, .free-row button { margin-left: auto; flex: 0 0 auto; }

/* the person's name in "who else is free" reads as a heading, then their hours run on one line */
.free-name { flex: 1 1 100%; font-family: var(--head); font-size: 18px; font-weight: 700; color: var(--ink); }
.free-hours { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13.5px; color: var(--muted); }
.free-hours span { white-space: nowrap; }

/* ------------------------------------------------------------
   Forms sit inside their cards at every width
   ------------------------------------------------------------ */
.card, .panel, .pane, .col, .rows, .field { min-width: 0; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
.rows .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rows .row > span:first-child { flex: 0 0 clamp(64px, 8vw, 96px); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.rows .row > input, .rows .row > b { flex: 1 1 220px; min-width: 0; }
.grid, .two, .three { min-width: 0; }

@media (max-width: 900px) {
  .wrap, .app, .cols { grid-template-columns: 1fr !important; display: block !important; }
  .side, .aside { width: 100% !important; }
  .card, .panel { padding: 20px !important; }
  .tools { flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .rows .row { flex-direction: column; align-items: stretch; gap: 6px; }
  .rows .row > span:first-child { flex: none; }
  .hour-row b, .free-row b { flex: none; }
  .toolbar, .tools { gap: 6px; }
  .btn { padding: 10px 16px; font-size: 12.5px; }
}

/* the message itself: its own frame, so a sender's markup cannot reach the console */
#rBody { padding: 4px 0 0; }
#rBody iframe { width: 100%; border: 0; display: block; }

/* the phone app: standalone window, no browser chrome, so the status bar
   and the home indicator need their own room */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .bar { padding-top: calc(10px + env(safe-area-inset-top)) !important; }
}

/* ============================================================
   The phone: Mail as a mobile mail app, not a shrunken desktop.
   One thing on screen at a time, thumb-sized targets, the write
   button where a thumb can reach it.
   ============================================================ */
@media (max-width: 900px) {

  /* --- the header: brand, burger, and the tabs on their own scrolling row --- */
  .bar { padding: 10px 12px !important; gap: 8px 10px !important; }
  .bar__brand span, .bar h1 { font-size: 15px !important; }
  /* The tabs are already an off-canvas drawer at this width (suite.css), with
     46px targets. Nothing to add here — styling them as a header row only
     shrank those targets and gave a vertical drawer a sideways scroll. */

  /* --- the list: nothing above the messages until it is needed ---
     A phone mail app shows the box name, a search field, and then messages.
     The bulk-action panel appears only once something is ticked, and the
     box-level actions (Mark all read, Empty) move into the drawer. */
  #bulkBar { display: none !important; }
  body.has-picked #bulkBar {
    display: flex !important; position: sticky; top: 0; z-index: 14;
    flex-wrap: wrap; gap: 8px 10px; margin: 0 !important;
    padding: 10px 16px !important; background: #F3EDE1;
    border-bottom: 1px solid var(--line); border-radius: 0; }
  body.has-picked #bulkBar .bulk__hint { display: none; }
  body.has-picked #bulkBar .bulk__acts { display: flex; flex-wrap: wrap; gap: 8px; }
  #listCard .card__head #markAllRead,
  #listCard .card__head #emptyBox { display: none !important; }
  #listCard .card__head { flex-wrap: nowrap !important; gap: 10px !important; }
  #listCard .card__head h2 { flex: 0 0 auto; font-size: 1.05rem !important; }
  #listCard .card__head .search { flex: 1 1 auto; min-width: 0; }
  /* in the drawer they read as what they are: actions on this box */
  #mlSide [data-box-actions] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

  /* --- the list: a proper mail row, generous and tappable --- */
  .panel { padding: 0 0 88px !important; }
  /* Only the message list and the reading pane go edge to edge, as a phone
     mail app does. Every other card keeps its gutter — zeroing them all and
     handing padding back child by child left five views flush to the screen. */
  #listCard, #readCard {
    border-left: 0 !important; border-right: 0 !important; padding: 0 !important;
    box-shadow: none !important; }
  /* The composer keeps ONE gutter of its own, so every row inside it lines up
     whatever padding that row happens to carry; the action bar breaks out of
     it to sit full width at the foot. */
  #composeCard {
    border-left: 0 !important; border-right: 0 !important;
    padding: 0 16px !important; box-shadow: none !important; }
  /* No child-zeroing here: every unbordered row already sits at 0, and
     #cTools and #cBody are bordered boxes whose padding is interior — zeroing
     it welded their content to their own border. */
  #composeCard .toolbar {
    margin-left: -16px !important; margin-right: -16px !important;
    padding-left: 16px !important; padding-right: 16px !important; }
  .card { padding: 16px !important; }
  .card__head { padding: 14px 16px 10px !important; margin: 0 !important; }
  #mailList { padding: 0 !important; }
  /* the row, as Gmail and web.de set it: circle, sender · time, subject, preview */
  .mrow {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto;
    gap: 2px 12px !important;
    padding: 13px 16px !important; min-height: 76px; align-items: start; }
  .mrow__c { display: none; }                 /* the tick column: not on a phone */
  .mrow__i {
    grid-column: 1; grid-row: 1 / span 3; align-self: start;
    width: 44px; height: 44px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue); color: #FFFFFF;
    font-family: var(--head); font-size: 19px; font-weight: 700; line-height: 1;
    text-transform: uppercase; }
  .mrow__b { grid-column: 2; grid-row: 1 / span 3; min-width: 0;
             display: flex; flex-direction: column; gap: 2px; }
  .mrow__d { grid-column: 3; grid-row: 1; align-self: start;
             font-size: .78rem !important; color: var(--muted);
             white-space: nowrap; padding-top: 1px; }
  .mrow__t { margin: 0 !important; }
  .mrow__who { font-size: .97rem; font-weight: 600; color: var(--ink);
               display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mrow__s { font-size: .95rem; color: var(--ink);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mrow__p { font-size: .87rem; color: var(--muted);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* unread reads as weight, as it does everywhere else */
  .mrow.is-unread .mrow__who, .mrow.is-unread .mrow__s { font-weight: 800; }
  .mrow.is-unread .mrow__d { color: var(--ink); font-weight: 700; }
  .mrow:active { background: rgba(200,164,92,0.12); }

  /* --- reading a message: the whole screen, with the actions pinned --- */
  #readCard .toolbar { position: sticky; top: 0; z-index: 12; margin: 0 !important;
    padding: 10px 12px !important; background: var(--card);
    border-bottom: 1px solid var(--line); gap: 6px !important;
    overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important; }
  #readCard .toolbar::-webkit-scrollbar { display: none; }
  #readCard .toolbar .btn { flex: 0 0 auto; min-height: 46px; padding: 12px 14px !important; }
  #readCard .subject { padding: 14px 16px 0 !important; font-size: 1.18rem !important; }
  #rMeta, #readCard .meta { padding: 0 16px !important; }
  #rBody { padding: 0 16px 24px !important; }
  #rBody iframe { min-height: 120px; }

  /* --- writing: full width, 16px so the phone does not zoom in --- */
  #composeCard .field input, #composeCard .field textarea, #cBody {
    font-size: 16px !important; }
  #cBody { min-height: 220px; }
  /* The Send bar stays where a thumb can reach it. Send sits at the right
     of the first line with Back at the left and the status between them;
     Discard, Save draft, Signature and "to everyone" drop to a second,
     quieter line — so nine controls no longer fight for one row. */
  #composeCard .toolbar { position: sticky; bottom: 0; z-index: 12; background: var(--card);
    border-top: 1px solid var(--line); border-bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
  #composeCard #cCancel { order: 1; flex: 0 0 auto; }
  #composeCard #cMsg { order: 2; flex: 1 1 60px; min-width: 0;
    text-align: center; font-size: 12.5px; line-height: 1.3; }
  #composeCard #cSend { order: 3; flex: 0 0 auto;
    background: var(--gold) !important; border-color: var(--gold) !important;
    color: #0A1A2F !important; font-weight: 800; padding: 11px 22px; }
  /* the break that puts the rest on their own line */
  #composeCard .toolbar::after { content: ''; order: 4; flex: 0 0 100%; height: 0; }
  #composeCard #cDiscard { order: 5; }
  #composeCard #cDraft { order: 6; }
  #composeCard .field--inline { order: 7; flex: 1 1 150px; min-width: 0;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  #composeCard .field--inline select { width: 100%; min-width: 0; }
  #composeCard #cAudience { order: 8; }
  #composeCard .toolbar > button:not(#cSend) { padding: 9px 14px; font-size: 12.5px; }

  /* --- Write: a round button under the thumb.
         pwa.js moves this node to the body on a phone, so "fixed" is against
         the viewport and not the off-canvas drawer. --- */
  body > #compose { position: fixed !important; right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
    transition: bottom .2s ease;
    width: 60px; height: 60px; padding: 0 !important; border-radius: 999px !important;
    font-size: 22px !important; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(10,26,47,0.34) !important; }
  /* The Write label goes, and the newsletter button is hidden only where it
     was meant to be — in the aside. The copy carried into the drawer stays,
     or moving it there would achieve nothing. */
  body > #compose span { display: none; }
  .ml__side #nlStart { display: none; }

  /* --- the one drawer: the sections, a gold rule, then the mailboxes --- */
  /* hidden has to beat the display below, or the block never goes away */
  .tabs [data-mailboxes][hidden] { display: none !important; }
  .tabs [data-mailboxes] {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; min-width: 0;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(200,164,92,0.35); }
  .tabs [data-mailboxes] > * { width: 100%; min-width: 0; }
  /* the heading that names what is below the rule */
  .tabs [data-mailboxes] [data-mailboxes-head] {
    order: -1; margin-bottom: 2px;
    font: 800 10.5px/1 Manrope, system-ui, sans-serif;
    letter-spacing: .22em; text-transform: uppercase; color: #D9B978; }
  .tabs [data-mailboxes] #nlStart { display: inline-flex; margin-top: 2px; }
  .tabs [data-mailboxes] .field { display: flex; flex-direction: column; gap: 6px;
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: #8FA0B4; font-weight: 800; }
  .tabs [data-mailboxes] select { width: 100%; padding: 12px 14px;
    background: rgba(246,243,236,0.06); color: #F6F3EC;
    border: 1px solid rgba(200,164,92,0.4); font-size: 15px; }
  .tabs [data-mailboxes] .boxes { display: flex; flex-direction: column; gap: 2px; }
  .tabs [data-mailboxes] .box { width: 100%; text-align: left; min-height: 48px;
    padding: 12px 14px; background: transparent; color: #C4CFDB;
    border: 0; font-size: 15px; font-weight: 700; display: flex;
    align-items: center; justify-content: space-between; }
  .tabs [data-mailboxes] .box.is-on { background: rgba(200,164,92,0.22); color: #FFFFFF; }
  .tabs [data-mailboxes] .usage, .tabs [data-mailboxes] .usage__note { color: #8FA0B4; font-size: 12px; }
  .tabs [data-mailboxes] [data-box-actions] { display: flex; flex-wrap: wrap; gap: 8px; }
  .tabs [data-mailboxes] .btn { color: #C4CFDB; border-color: rgba(200,164,92,0.4);
    background: transparent; min-height: 42px; }
  .ml__side:empty { display: none !important; }

  /* --- reading: Back stays put, and says where it goes --- */
  #readCard .toolbar #back {
    position: sticky; left: 0; z-index: 2;
    background: var(--gold) !important; color: #0A1A2F !important;
    border-color: var(--gold) !important; font-weight: 800; }
  .box { min-height: 48px; display: flex; align-items: center; }
  .drawer-btn { min-height: 48px; }

  /* --- calendar: the month still readable, days still tappable --- */
  .cell { min-height: 52px !important; padding: 5px 4px !important; }
  .cell b { font-size: .8rem; }

  /* --- rows in contacts, mailboxes, team --- */
  .item { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .item .btn { justify-self: start; }
  .acct { grid-template-columns: minmax(0, 1fr) !important; gap: 2px 0 !important; }
  .acct dt { margin-top: 10px; }

  /* every tap target at least 44px, as the platforms ask */
  .btn, .tab { min-height: 46px; }
  .btn--sm { min-height: 44px; }
}

/* a very narrow phone */
@media (max-width: 380px) {
  .mrow { padding: 13px 13px !important; }
  #compose { width: 54px; height: 54px; }
}

/* ------------------------------------------------------------
   The install bar occupies the bottom strip of the viewport.
   Rather than teaching each control about it one at a time, the
   strip is reserved once: everything pinned to the bottom rises
   by the bar's measured height (published by pwa.js), and the
   page gains matching room so nothing is left underneath.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  body.has-install-bar > #compose,
  body.has-install-bar #composeCard .toolbar,
  body.has-install-bar .pager,
  body.has-install-bar [data-bottom-bar] {
    bottom: calc(var(--install-bar-h, 79px) + env(safe-area-inset-bottom)) !important;
  }
  /* Write keeps its own gap above the bar */
  body.has-install-bar > #compose {
    bottom: calc(14px + var(--install-bar-h, 79px) + env(safe-area-inset-bottom)) !important;
  }
  /* and the page can still be scrolled clear of both */
  body.has-install-bar .panel {
    padding-bottom: calc(88px + var(--install-bar-h, 79px)) !important;
  }
}

/* ------------------------------------------------------------
   Phone gestures: swipe a message away, hold to select several
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  #mailList .mrow {
    position: relative;
    touch-action: pan-y;
    transition: transform .22s cubic-bezier(.22,.8,.3,1), opacity .22s ease, background .18s ease;
    will-change: transform;
  }
  #mailList .mrow.is-dragging { transition: none; }

  /* The panel behind the message. It is a child of the row, so it is
     counter-translated to stay at the list edge, and it is exactly as wide
     as the row has moved — so it fills the gap and never sits under the
     text. Its z-index is 0, above the row's own background; the row's
     content is lifted to 2, so nothing is ever painted over. */
  #mailList .mrow > * { position: relative; z-index: 2; }
  #mailList .mrow::before,
  #mailList .mrow::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: var(--swipe, 0px);
    display: flex; align-items: center;
    font: 800 11px/1 Manrope, system-ui, sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
  #mailList .mrow::after {
    right: 0;
    transform: translateX(calc(-1 * var(--dx, 0px)));
    justify-content: flex-end; padding-right: 18px;
    background: #B4653A; color: #FFFFFF;
    content: 'Trash';
  }
  #mailList .mrow::before {
    left: 0;
    transform: translateX(calc(-1 * var(--dx, 0px)));
    justify-content: flex-start; padding-left: 18px;
    background: #8A6D2E; color: #FFFFFF;
    content: 'Spam';
  }
  #mailList .mrow.is-swiping-left::after,
  #mailList .mrow.is-swiping-right::before { opacity: 1; }
  #mailList .mrow.is-armed-left::after,
  #mailList .mrow.is-armed-right::before { font-size: 12px; letter-spacing: .2em; }
  #mailList .mrow.is-going { transform: translateX(-110%) !important; opacity: 0; }

  /* a message picked out while selecting */
  #mailList .mrow.is-picked { background: rgba(200,164,92,0.18) !important; }
  body.is-selecting #mailList .mrow__c { display: flex !important; }
}

/* the undo strip */
.gtoast {
  position: fixed; left: 50%; bottom: 22px;
  transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 16px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 14px 18px;
  background: #0A1A2F; color: #F6F3EC;
  border-top: 3px solid #C8A45C;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  font: 500 14px/1.4 Manrope, system-ui, sans-serif;
  opacity: 0; transition: opacity .24s ease, transform .24s cubic-bezier(.22,.8,.3,1);
  z-index: 1200;
}
.gtoast.is-in { opacity: 1; transform: translate(-50%, 0); }
.gtoast__t { flex: 1 1 auto; min-width: 0; }
.gtoast__u {
  flex: 0 0 auto; padding: 9px 18px;
  border: 0; background: #C8A45C; color: #0A1A2F;
  font: 800 12px/1 Manrope, system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.gtoast__u:hover { background: #E3C489; }
@media (max-width: 620px) {
  .gtoast { left: 14px; right: 14px; bottom: calc(14px + var(--tinfo-bottom-bar, 0px)); transform: translateY(20px); max-width: none; }
  .gtoast.is-in { transform: translateY(0); }
}

/* ------------------------------------------------------------
   Writing on a phone — the fields and the formatting strip.
   The Send bar itself is handled in the (max-width: 900px) block
   above, where it is pinned to the bottom within a thumb's reach;
   nothing here touches its geometry.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  /* each field under its own label */
  #composeCard .rows { padding: 4px 12px 0; }
  /* No !important: an author !important would beat the inline display:none
     that keeps Cc and Bcc hidden until asked for. The id already gives this
     rule the specificity it needs over .rows .row. */
  #composeCard .rows .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    transition: border-color .18s ease;
  }
  /* The field has no border of its own here, so the row's own rule carries
     the focus: it turns gold and the label above it lights with it. */
  #composeCard .rows .row:focus-within {
    border-bottom-color: var(--gold);
    box-shadow: 0 1px 0 var(--gold);
  }
  #composeCard .rows .row:focus-within > span:first-child { color: var(--gold); }
  #composeCard .rows .row > span:first-child {
    font: 800 10.5px/1 Manrope, system-ui, sans-serif;
    letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
  }
  #composeCard .rows .row > input {
    width: 100%; padding: 10px 0; border: 0; background: none;
    font-size: 16px; /* 16px stops the phone zooming on tap */
  }
  /* The glow belongs to the row now, not the borderless field. */
  #composeCard .rows .row > input:focus { box-shadow: none !important; }
  #composeCard .rows .row > input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* the formatting strip: one line that scrolls, not a wall of buttons */
  #composeCard .tools {
    display: flex; flex-wrap: nowrap;
    gap: 4px; margin: 0;
    padding: 8px 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  #composeCard .tools::-webkit-scrollbar { display: none; }
  #composeCard .tools button,
  #composeCard .tools select { flex: 0 0 auto; min-width: 38px; height: 38px; }

  /* room to write, and room to breathe under the keyboard */
  #composeCard .edit {
    min-height: 46vh;
    padding: 16px 14px 24px;
    border: 0; border-radius: 0;
    font-size: 16px; line-height: 1.7;
  }
}