/* Shell styling. Palette values are the frozen OCB public set (ocb-website
   src/styles/tokens.css, --ocb-*), solidified the same way as the Ops Center's token block:
   the website's translucent surfaces become solid colours, and --accent is --ocb-ic-blue,
   darkened in light mode so text on it and beside it stays WCAG AA. */

/* Both palettes are named once, here. The light one is also the default set of names;
   the dark one carries a --d- prefix and is *applied* by the two rules below — one for
   "the system says dark and the user has not overridden it", one for "the user chose
   dark". Naming the values twice is how a theme toggle drifts from the media query. */
:root {
  --bg: #eef1f8; --fg: #1c2740; --muted: #56607a; --line: #dfe3ee;
  --accent: #3461d1; --ok: #1c7c4a; --bad: #b3261e; --card: #fff; --warn: #875700;
  /* Text ON the accent, not beside it. White reads 5.56:1 on the light accent and
     2.49:1 on the lighter dark-mode one, so it cannot be the same value in both. */
  --accent-fg: #ffffff;
  /* Website look (light): gradient pills, soft shadows, the ambient glow. White on both
     gradient ends is 5.6 and 6.3:1. Dark keeps the flat accent and no glow. */
  --accent-bg: linear-gradient(135deg, #3461d1, #6d3fd8);
  --shadow: 0 12px 32px rgba(40, 60, 120, .08);
  --ambient: radial-gradient(80% 50% at 78% 8%, rgba(120, 150, 255, .18), transparent 60%), radial-gradient(70% 45% at 12% 4%, rgba(170, 140, 255, .12), transparent 60%);

  --d-bg: #06070f; --d-fg: #eef1ff; --d-muted: #8b93b3; --d-line: #1f2335;
  --d-accent: #7aa2ff; --d-ok: #4ac07d; --d-bad: #f2857c; --d-card: #0d1124; --d-warn: #d9a13a;
  --d-accent-fg: #0d1124;
  --d-accent-bg: #7aa2ff; --d-shadow: none; --d-ambient: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg); --fg: var(--d-fg); --muted: var(--d-muted); --line: var(--d-line);
    --accent: var(--d-accent); --ok: var(--d-ok); --bad: var(--d-bad); --card: var(--d-card); --warn: var(--d-warn);
    --accent-fg: var(--d-accent-fg);
    --accent-bg: var(--d-accent-bg); --shadow: var(--d-shadow); --ambient: var(--d-ambient);
  }
}
/* An explicit choice wins over the system, in both directions: `data-theme="light"` is
   handled by the :not() above, and this handles the other one. */
:root[data-theme="dark"] {
  --bg: var(--d-bg); --fg: var(--d-fg); --muted: var(--d-muted); --line: var(--d-line);
  --accent: var(--d-accent); --ok: var(--d-ok); --bad: var(--d-bad); --card: var(--d-card); --warn: var(--d-warn);
  --accent-fg: var(--d-accent-fg);
  --accent-bg: var(--d-accent-bg); --shadow: var(--d-shadow); --ambient: var(--d-ambient);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ambient), var(--bg); background-attachment: fixed; color: var(--fg);
       font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 26rem; margin: 8vh auto; padding: 0 1rem; }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
p.sub { color: var(--muted); margin: 0 0 1.5rem; }
form { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; }
/* The lift is for a page-level form (sign-in, TOTP) only; inline forms are drawn flat. */
main > form { box-shadow: var(--shadow); }
label { display: block; font-size: .8rem; color: var(--muted); margin: .75rem 0 .25rem; }
input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
        background: var(--bg); color: var(--fg); font: inherit; }
button { margin-top: 1.1rem; width: 100%; padding: .65rem; border: 0; border-radius: 999px;
         background: var(--accent-bg); color: var(--accent-fg); font: inherit; font-weight: 600; cursor: pointer; }
.note { padding: .6rem .75rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem;
        border: 1px solid var(--line); }
.note.err { border-color: var(--bad); color: var(--bad); }
.note.ok  { border-color: var(--ok);  color: var(--ok); }
.muted { color: var(--muted); }
.shell { max-width: 60rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.25rem; box-shadow: var(--shadow); }

/* ---- mailbox: Gmail's default layout (owner's choice, 2026-10-20) ----------
   A top bar with search, a menu on the left, and one main area that shows the
   list OR the open message. Below 760 px the menu folds away under the top bar. */
body:has(.gm) main { max-width: none; margin: 0; padding: 0; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap; border: 0; padding: 0; margin: -1px; }

.gtop { display: flex; align-items: center; gap: 1rem; height: 4rem; padding: 0 1rem 0 1.25rem; }
.gbrand { width: 14rem; flex: none; font-weight: 700; font-size: 1.15rem; color: var(--fg);
          text-decoration: none; letter-spacing: -.01em; }
.gsearch { flex: 1; min-width: 0; max-width: 45rem; display: flex; align-items: center; gap: .6rem;
           background: var(--card); border: 1px solid var(--line); border-radius: 999px;
           padding: 0 1rem; margin: 0; box-shadow: none; height: 2.9rem; color: var(--muted); }
.gsearch:focus-within { box-shadow: var(--shadow); border-color: var(--accent); }
.gsearch input { border: 0; background: transparent; padding: 0; height: 100%; font-size: .95rem;
                 outline: none; box-shadow: none; margin: 0; }
.gavatar { margin-left: auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none;
           display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-fg);
           font-weight: 700; font-size: .95rem; }

.gm { display: grid; grid-template-columns: 16rem minmax(0, 1fr); height: calc(100vh - 4rem); }
.gnav { overflow-y: auto; padding: .25rem .75rem 1rem 0; }
.gcompose { display: inline-flex; align-items: center; gap: .75rem; margin: .25rem 0 1rem .75rem;
            padding: 1rem 1.5rem 1rem 1.1rem; border-radius: 16px; background: var(--card);
            color: var(--fg); text-decoration: none; font-weight: 600; box-shadow: var(--shadow);
            border: 1px solid var(--line); }
.gcompose:hover { background: var(--bg); }
.gfolder { display: flex; align-items: center; gap: 1rem; width: 100%; box-sizing: border-box;
           padding: 0 .75rem 0 1.4rem; height: 2.1rem; border-radius: 0 999px 999px 0;
           color: var(--fg); text-decoration: none; font-size: .9rem; font-weight: 400;
           background: none; border: 0; margin: 0; cursor: pointer; text-align: left; }
.gfolder:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.gfolder.on { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }
.gfolder .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfolder .badge { font-size: .75rem; font-weight: 700; }
.gnav .labelhead { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 1rem 0 .3rem 1.4rem; }
.gnav .clearlabel { display: block; font-size: .8rem; padding: .2rem 0 0 1.4rem; color: var(--accent); }
.gsep { height: 1px; background: var(--line); margin: .75rem 0 .75rem 1.4rem; }
.gnavform { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }

.gmain { background: var(--card); border-radius: 16px 16px 0 0; overflow-y: auto;
         margin-right: 1rem; box-shadow: var(--shadow); outline: none; }
.gbar { display: flex; align-items: baseline; gap: .75rem; padding: .9rem 1.25rem .6rem;
        border-bottom: 1px solid var(--line); }
.gtitle { font-weight: 700; }
.gcount { font-size: .8rem; color: var(--muted); }
.searchnote { font-size: .8rem; color: var(--muted); padding: .5rem 1.25rem;
              border-bottom: 1px solid var(--line); }

/* One line per message, full width: sender, subject, date. Unread is bold and white. */
.list a.msg { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto auto; align-items: center;
              gap: 1rem; height: 2.6rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line);
              color: var(--fg); text-decoration: none; font-size: .88rem;
              background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.list a.msg.unread { background: var(--card); font-weight: 700; }
.list a.msg:hover { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line),
                                0 1px 3px rgba(60, 64, 67, .2); position: relative; z-index: 1; }
.list a.msg .from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list a.msg .mid { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.list a.msg .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list a.msg .thread { font-size: .75rem; color: var(--muted); font-weight: 400; flex: none; }
.list a.msg .kw { font-size: .7rem; font-weight: 600; color: var(--accent); flex: none;
                  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
                  border-radius: 4px; padding: 0 .35rem; }
.list a.msg .clip { color: var(--muted); display: flex; }
.list a.msg .clip .ic { width: 1rem; height: 1rem; }
.list a.msg .when { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.list a.msg.unread .when { color: var(--fg); }

/* The open message replaces the list. */
.gtool { display: flex; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.gback { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem;
         border-radius: 999px; color: var(--fg); text-decoration: none; font-size: .88rem; }
.gback:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.reader .hdr { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.reader h2 { margin: 0 0 .75rem; font-size: 1.35rem; font-weight: 500; }
.reader .msgactions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.reader .msgactions > a, .reader .msgactions button { display: inline-flex; align-items: center; gap: .4rem;
         padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: none;
         color: var(--fg); text-decoration: none; font-size: .82rem; font-weight: 500; margin: 0;
         width: auto; cursor: pointer; }
.reader .msgactions .ic { width: 1rem; height: 1rem; }
.reader .hdr form { background: none; border: 0; border-radius: 0;
         padding: 0; margin: 0; box-shadow: none; }
.reader .msgactions > a:hover, .reader .msgactions button:hover { background: var(--bg); text-decoration: none; }
.reader .meta { font-size: .85rem; color: var(--muted); display: flex; gap: .4rem; flex-wrap: wrap; }
.reader .meta .name { color: var(--fg); font-weight: 700; }
.warn-line { margin-top: .6rem; font-size: .82rem; padding: .45rem .6rem; border-radius: 7px;
             border: 1px solid var(--warn, #b7791f); color: var(--warn, #b7791f); }
.warn-line.blocked { border-color: var(--line); color: var(--muted); }
.atts { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.att { display: block; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem;
       text-decoration: none; color: var(--fg); font-size: .8rem; }
.att .an { display: block; font-weight: 600; }
.att .at, .att .renamed { display: block; color: var(--muted); font-size: .72rem; }
.att .renamed { color: var(--bad); }
#body { width: 100%; border: 0; min-height: 24rem; display: block; }
.plain { padding: 0 1.5rem 1.5rem; }
.plain pre { white-space: pre-wrap; font-size: .82rem; color: var(--muted);
             background: var(--bg); padding: .75rem; border-radius: 8px; }
.empty { padding: 2rem 1.25rem; }

@media (max-width: 1024px) { .list a.msg { grid-template-columns: 9rem minmax(0, 1fr) auto auto; } }
@media (max-width: 760px) {
  .gbrand { width: auto; }
  .gtop { gap: .6rem; padding: 0 .75rem; }
  .gm { grid-template-columns: minmax(0, 1fr); height: auto; }
  .gnav { display: flex; overflow-x: auto; padding: 0 .5rem .5rem; gap: .25rem; }
  .gnav .gfolder { width: auto; border-radius: 999px; padding: 0 .8rem; flex: none; }
  .gnav .gcompose { margin: 0; padding: .5rem .9rem; flex: none; }
  .gnav .gsep, .gnav .labelhead, .gnav .clearlabel { display: none; }
  .gmain { margin: 0; border-radius: 0; }
  .list a.msg { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; height: auto;
                padding: .55rem 1rem; row-gap: .1rem; }
  .list a.msg .mid { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- composer (B1) ---------------------------------------------------- */
.msgactions { display: flex; gap: .75rem; margin: .5rem 0 .2rem; font-size: .82rem; }
.msgactions a { color: var(--accent); text-decoration: none; }
.msgactions a:hover { text-decoration: underline; }
.compose { max-width: 52rem; margin: 0 auto; padding: 1.25rem; }
.composehead { display: flex; justify-content: space-between; align-items: baseline; }
.composehead h1 { font-size: 1.1rem; margin: 0 0 .75rem; }
.composehead .back { font-size: .82rem; color: var(--muted); text-decoration: none; }
.compose .field { display: grid; grid-template-columns: 5rem 1fr; align-items: center;
                  gap: .5rem; margin-bottom: .4rem; }
.compose .field label { font-size: .8rem; color: var(--muted); }
.compose input, .compose select { width: 100%; padding: .45rem .55rem; font-size: .88rem;
                                  border: 1px solid var(--line); border-radius: 7px;
                                  background: var(--card); color: var(--fg); }
.compose > form > label { display: block; font-size: .8rem; color: var(--muted); margin: .8rem 0 .3rem; }
.editor { min-height: 14rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px;
          background: var(--card); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.editor:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor blockquote { margin: .5rem 0; padding-left: .75rem; border-left: 2px solid var(--line);
                     color: var(--muted); }
.attachbar { margin-top: .9rem; }
.attachbar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0;
                              overflow: hidden; }
.filebtn { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--line);
           border-radius: 7px; font-size: .82rem; cursor: pointer; background: var(--card); }
.filebtn:focus-within { outline: 2px solid var(--accent); }
.attachlist { list-style: none; margin: .6rem 0 .3rem; padding: 0; display: flex;
              flex-direction: column; gap: .3rem; font-size: .82rem; }
.attachlist li { border: 1px solid var(--line); border-radius: 7px; padding: .35rem .55rem; }
.attachlist li.failed { border-color: var(--bad); color: var(--bad); }
.attachlist .name { font-weight: 600; }
.attachlist .warn { color: var(--warn, #b7791f); }
.attachlist .forwarded .muted { font-style: italic; }
button.link { background: none; border: 0; padding: 0; margin: 0; width: auto; color: var(--accent);
              font-size: .78rem; text-decoration: underline; cursor: pointer; }
.composeactions { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.composeactions button { width: auto; margin: 0; padding: .5rem 1.1rem; font-size: .88rem; }
.composeactions button.secondary { background: var(--card); color: var(--fg);
                                   border: 1px solid var(--line); }
.composeactions #savestate { font-size: .78rem; }

/* ---- B2: labels, contacts, settings, keyboard help, autocomplete ------- */

/* The skip link is the first thing in the DOM and the first thing Tab reaches.
   Visible only when focused, but genuinely visible then — an off-screen link that
   stays off-screen when focused helps nobody. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; padding: .6rem .9rem;
        background: var(--accent); color: var(--accent-fg); border-radius: 0 0 8px 0; font-size: .9rem; }
.skip:focus { left: 0; }

/* Focus must be visible everywhere, including on elements a mouse user never sees
   focused. 3:1 against the background is the WCAG 2.2 requirement for the indicator. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .editor:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.list > a:focus-visible { outline-offset: -3px; }

.labelhead { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
             color: var(--muted); padding: 0 0 .25rem; }
.clearlabel { color: var(--muted); font-size: .78rem; }

.labelbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.labelbar .chip { display: inline-flex; align-items: center; gap: .15rem; font-size: .75rem;
                  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.labelbar .chip form { display: inline; }
.labelbar .chip button { font-size: .8rem; line-height: 1; }
.addlabel { display: inline-flex; gap: .3rem; align-items: center; }
.addlabel input { width: 9rem; padding: .25rem .45rem; font-size: .78rem;
                  border: 1px solid var(--line); border-radius: 6px;
                  background: var(--card); color: var(--fg); }
.restartnote { margin: 0 0 .75rem; }

/* Contacts and settings reuse the console's table and panel shapes. */
.contacts, .settings { max-width: 60rem; margin: 0 auto; padding: 1.25rem; }
.contactform { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
               gap: .5rem 1rem; align-items: end; margin-bottom: 1.25rem; }
.contactform .composeactions { grid-column: 1 / -1; }
.panel { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1.25rem 0;
         background: var(--card); }
.panel h2 { font-size: .95rem; margin: 0 0 .5rem; }
table.grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.grid caption { text-align: left; color: var(--muted); font-size: .78rem; padding-bottom: .4rem; }
table.grid th, table.grid td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
table.grid th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.importform { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.check { display: inline-flex; gap: .45rem; align-items: center; font-size: .88rem; margin-right: .75rem; }
.sigform { margin-bottom: 1.25rem; }
.sigform label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
.sigform textarea { width: 100%; padding: .55rem .6rem; font-size: .85rem; font-family: inherit;
                    border: 1px solid var(--line); border-radius: 8px;
                    background: var(--bg); color: var(--fg); }
.sigpreview { margin-top: .5rem; padding: .5rem .6rem; border-left: 2px solid var(--line);
              font-size: .85rem; }

/* The help overlay. A dialog, not a page: Escape closes it and focus goes back. */
.keyhelp { position: fixed; inset: 0; background: rgba(8, 14, 20, .6); display: none;
           align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.keyhelp.open { display: flex; }
.keyhelpbox { background: var(--panel, var(--card)); color: var(--fg); border: 1px solid var(--line);
              border-radius: 12px; padding: 1.25rem 1.5rem; max-width: 30rem; width: 100%;
              max-height: 80vh; overflow: auto; }
.keyhelpbox h2 { margin: 0 0 .75rem; font-size: 1rem; }
.keyhelpbox dl { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem .75rem;
                 margin: 0 0 1rem; font-size: .87rem; }
.keyhelpbox dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); }
.keyhelpbox dd { margin: 0; color: var(--muted); }

/* Recipient autocomplete. */
.field { position: relative; }
.suggest { list-style: none; margin: .15rem 0 0; padding: .25rem; position: absolute; z-index: 20;
           left: 5.5rem; right: 0; background: var(--card); border: 1px solid var(--line);
           border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-height: 14rem;
           overflow: auto; }
.suggest li { padding: .35rem .5rem; font-size: .85rem; border-radius: 6px; cursor: pointer; }
.suggest li.on, .suggest li:hover { background: var(--accent); color: var(--accent-fg); }

/* ---- B3: settings, step-up, secrets ----------------------------------- */
.inlineform { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.inlineform input[type=text], .inlineform input:not([type]) { flex: 1 1 14rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
          background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
          padding: .4rem .55rem; margin: .3rem 0; overflow-wrap: anywhere; }
.note.warn { border: 1px solid var(--warn, #b7791f); color: var(--fg); }
.btn { display: inline-block; padding: .45rem .9rem; border-radius: 8px; font-size: .88rem;
       font-weight: 600; text-decoration: none; background: var(--accent); color: var(--accent-fg); }
.settings .panel img { max-width: 100%; height: auto; background: #fff; padding: .5rem;
                       border-radius: 8px; }
.settings label { display: block; }
.settings .check { display: inline-flex; }

/* ---- pages inside the shell (web::shell) -------------------------------------
   Compose, Contacts, Settings and the rest share the mailbox's top bar and menu; their
   content sits in the white main area. Forms there are content, not the sign-in card. */
.gpage { padding: 1.25rem 1.75rem 2.5rem; }
.gpage .shell { max-width: 60rem; margin: 0; }
.gpage .compose { max-width: 56rem; margin: 0; padding: 0; }
.gpage form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.gpage .composehead { margin-bottom: .5rem; }
.gpage .composehead h1, .gpagehead h1 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .75rem; }
.gpage .composehead .back { display: none; } /* the menu is the way back */
.gpage .compose .field { border-bottom: 1px solid var(--line); padding: .15rem 0; margin: 0; }
.gpage .compose .field input, .gpage .compose .field select { border: 0; background: transparent; padding: .55rem .2rem; }
.gpage .compose .field input:focus, .gpage .compose .field select:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.gpage .panel { background: var(--card); }
.gpage button { width: auto; padding: .55rem 1.4rem; margin-top: .75rem; }
.gpage button.link { padding: 0; margin: 0; }
.gpage input[type=radio], .gpage input[type=checkbox] { width: auto; margin: 0 .35rem 0 0; }

/* ---- floating composer (web::compose::window) --------------------------------
   Bottom-right over the mailbox, as in Gmail. Minimised it is just the title bar.
   On a phone it takes the whole screen. */
.gwin { position: fixed; right: 4.5rem; bottom: 0; width: min(36rem, calc(100vw - 2rem));
        height: min(40rem, calc(100vh - 5rem)); background: var(--card); z-index: 20;
        border-radius: 12px 12px 0 0; box-shadow: 0 8px 28px rgba(29, 36, 51, .28);
        display: flex; flex-direction: column; }
.gwin.min { height: auto; width: 18rem; }
.gwin.min .gwinbody { display: none; }
.gwinbar { display: flex; align-items: center; gap: .5rem; height: 2.75rem; flex: none;
           padding: 0 .5rem 0 1rem; border-radius: 12px 12px 0 0;
           background: color-mix(in srgb, var(--accent) 10%, var(--card)); cursor: default; }
.gwin.min .gwinbar { cursor: pointer; }
.gwinbar b { font-size: .9rem; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gwinbtns { display: flex; gap: .15rem; }
.gwinbtns a, .gwinbtns button { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 6px;
           color: var(--fg); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.gwinbtns a:hover, .gwinbtns button:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.gwinbtns .ic { width: 1.1rem; height: 1.1rem; }
.gwinbody { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; }
.gwinbody form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.gwinbody .field { display: grid; grid-template-columns: 4rem 1fr; align-items: center;
                   border-bottom: 1px solid var(--line); margin: 0; }
.gwinbody .field label { font-size: .8rem; color: var(--muted); }
.gwinbody .field input, .gwinbody .field select { border: 0; background: transparent; padding: .55rem .2rem;
                   width: 100%; font-size: .9rem; }
.gwinbody .field input:focus, .gwinbody .field select:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.gwinbody > form > label[for=editor] { display: none; }
.gwinbody .editor { min-height: 12rem; border: 0; padding: .75rem .2rem; }
.gwinbody .composeactions { position: sticky; bottom: 0; background: var(--card); padding: .6rem 0 0;
                   display: flex; align-items: center; gap: .5rem; }
.gwinbody .composeactions button { width: auto; margin: 0; padding: .55rem 1.4rem; }
.gwinbody .attachbar p { font-size: .75rem; }
@media (max-width: 760px) {
  .gwin { right: 0; left: 0; width: 100%; height: 100%; border-radius: 0; }
  .gwin.min { height: auto; width: 100%; top: auto; }
}

/* ---- scale tokens (owner's Gmail sheet, 2026-10-20) ---------------------------
   Theme-independent, so they live in their own :root and are not restated for dark.
   Type 11/13/16 with 13 as body; a 4px spacing grid; Gmail's radii and motion. The font
   stays the OCB stack: Google Sans is Google's own typeface, not licensed for us to ship,
   and the shell's CSP serves fonts only from this origin. Everything below uses these. */
:root {
  --fs-sm: 11px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 22px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --lh-tight: 18px; --lh-base: 20px; --lh-loose: 24px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
  --ctl-sm: 28px; --ctl: 32px; --ctl-lg: 40px; --row: 32px;
  --elev-row: inset 0 -1px 0 0 rgba(100, 121, 143, .12);
  --elev-hover: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --elev-menu: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
  --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .15s; --dur-base: .218s;
}

/* ---- compact density (owner's request, 2026-10-20) ---------------------------
   Gmail's "compact": more mail on screen. Later rules here override the defaults above. */
.gm { font-size: var(--fs-base); line-height: var(--lh-base); }
.gtop { height: 56px; }
.gm { height: calc(100vh - 56px); }
.gcompose { padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
            border-radius: var(--r-lg); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.gfolder { height: var(--row); font-size: var(--fs-md); gap: var(--sp-3); border-radius: 0 var(--r-full) var(--r-full) 0;
           transition: background-color var(--dur-fast) var(--ease); }
.gfolder .ic { width: 18px; height: 18px; }
.gfolder .badge { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.gbar { padding: var(--sp-2) var(--sp-4); }
.gtitle { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.gcount, .searchnote { font-size: var(--fs-sm); }
.list a.msg { height: var(--row); font-size: var(--fs-base); padding: 0 var(--sp-4); gap: var(--sp-3);
              border-bottom: 0; box-shadow: var(--elev-row); transition: box-shadow var(--dur-fast) linear; }
.list a.msg:hover { box-shadow: var(--elev-hover); }
.list a.msg .when { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.list a.msg .thread, .list a.msg .kw { font-size: var(--fs-sm); }
.reader .hdr { padding: var(--sp-4) var(--sp-6) var(--sp-3); }
.reader h2 { font-size: var(--fs-xl); font-weight: var(--fw-regular); }
.reader .meta { font-size: var(--fs-base); }
.gpage .composehead h1, .gpagehead h1 { font-size: var(--fs-xl); font-weight: var(--fw-regular); }

/* ---- the account menu under the avatar ---------------------------------------- */
.gacct { position: relative; margin-left: auto; }
.gacct > summary { list-style: none; cursor: pointer; border-radius: var(--r-full); }
.gacct > summary::-webkit-details-marker { display: none; }
.gacct > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gacct .gavatar { margin-left: 0; width: var(--ctl); height: var(--ctl); font-size: var(--fs-md); }
.gacctmenu { position: absolute; right: 0; top: calc(100% + var(--sp-2)); width: 288px; z-index: 30;
             background: var(--card); border-radius: var(--r-xl); box-shadow: var(--elev-menu);
             padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.gacctwho { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
            padding: var(--sp-2) var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2);
            box-shadow: var(--elev-row); font-size: var(--fs-base); word-break: break-all; }
.gacctwho b { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.gacct .gavatar.big { width: 64px; height: 64px; font-size: var(--fs-xl); }
.gacctmenu .gfolder { border-radius: var(--r-md); padding: 0 var(--sp-3); height: var(--ctl-lg); }
.gacctmenu form { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }

/* ---- composer formatting toolbar --------------------------------------------- */
.rtb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--sp-1) 0; margin: var(--sp-2) 0 0;
       box-shadow: var(--elev-row); }
.rtb button { width: var(--ctl); height: var(--ctl); min-width: 0; margin: 0; padding: 0; border: 0;
              border-radius: var(--r-sm); background: none; color: var(--fg); display: grid; place-items: center;
              font-size: var(--fs-md); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.rtb button:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rtb button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.rtb .ic { width: 18px; height: 18px; }
.rtb select { width: auto; height: var(--ctl); padding: 0 var(--sp-2); margin: 0 2px 0 0; font-size: var(--fs-base);
              border: 0; border-radius: var(--r-sm); background: none; }
.rtb select:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rtsep { width: 1px; height: var(--sp-5); background: var(--line); margin: 0 var(--sp-1); }
.rtcolor { position: relative; width: var(--ctl); height: var(--ctl); display: grid; place-items: center; margin: 0;
           border-radius: var(--r-sm); cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.rtcolor:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rtcolor span { border-bottom: 3px solid var(--warn); line-height: 1.1; }
.rtcolor.hl span { border-bottom-color: var(--accent); }
.rtcolor input[type=color] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
           padding: 0; border: 0; margin: 0; }
.rtcolor:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor { font-size: var(--fs-md); line-height: var(--lh-base); }
.editor h2 { font-size: var(--fs-xl); margin: var(--sp-2) 0; }
.editor h3 { font-size: var(--fs-lg); margin: var(--sp-2) 0; }
.editor pre { background: color-mix(in srgb, var(--fg) 6%, transparent); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.gwinbody .rtb { position: sticky; top: 0; background: var(--card); z-index: 1; }

/* ---- contacts (Google-Contacts shape: search, group chips, list, card beside it) ---- */
.cbook { display: flex; flex-direction: column; gap: var(--sp-3); }
.cbookhead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cbookhead h1 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-regular); }
.csearch { flex: 1 1 280px; max-width: 480px; margin: 0; padding: 0; background: none; border: 0; }
.csearch input { height: var(--ctl-lg); border-radius: var(--r-full); padding: 0 var(--sp-4); font-size: var(--fs-md); }
.cbtn { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 var(--sp-4); margin: 0; width: auto;
        border-radius: var(--r-full); border: 1px solid var(--line); background: var(--card); color: var(--fg);
        font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease); }
.cbtn:hover { background: color-mix(in srgb, var(--fg) 6%, var(--card)); }
.cbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.cgroups { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cchip { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-sm); padding: 0 var(--sp-3);
         border-radius: var(--r-full); border: 1px solid var(--line); color: var(--fg); text-decoration: none;
         font-size: var(--fs-base); }
.cchip.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: transparent; font-weight: var(--fw-medium); }
.cchip.small { height: 20px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.ccount { font-size: var(--fs-sm); color: var(--muted); }
.cnewgroup { display: inline-flex; gap: var(--sp-1); align-items: center; margin: 0; padding: 0; background: none; border: 0; }
.cnewgroup input { height: var(--ctl-sm); width: 140px; padding: 0 var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-base); }
.cnewgroup .cbtn { height: var(--ctl-sm); }
.cbody { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.clist { flex: 999 1 480px; min-width: 0; }
.crow { display: grid; grid-template-columns: 36px minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, .9fr) auto;
        gap: var(--sp-3); align-items: center; min-height: 48px; padding: var(--sp-1) var(--sp-3);
        border-radius: var(--r-md); color: var(--fg); text-decoration: none; font-size: var(--fs-base);
        transition: background-color var(--dur-fast) var(--ease); }
.crow:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.crow.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cname { display: flex; flex-direction: column; min-width: 0; }
.cname b, .cname span, .cmail, .cphone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cname b { font-weight: var(--fw-medium); }
.cname span, .csrc { font-size: var(--fs-sm); }
.cav { width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; object-fit: cover;
       color: #fff; font-weight: var(--fw-medium); font-size: var(--fs-md); }
.cav.big { width: 64px; height: 64px; font-size: var(--fs-xl); }
.hue0 { background: #3461d1; } .hue1 { background: #19663a; } .hue2 { background: #8a3ffc; } .hue3 { background: #b3261e; }
.hue4 { background: #00727c; } .hue5 { background: #875700; } .hue6 { background: #c2185b; } .hue7 { background: #455a64; }
.ccard { flex: 1 1 360px; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
         padding: var(--sp-4); position: sticky; top: 0; box-shadow: var(--elev-menu); }
.ccardhead { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.ccardhead h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.ccardhead p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.cclose { margin-left: auto; align-self: flex-start; width: var(--ctl); height: var(--ctl); display: grid; place-items: center;
          border-radius: var(--r-full); color: var(--fg); }
.cclose:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cform fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: var(--sp-3) 0 var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.cform legend { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0; }
.cform label { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.cform label > span { color: var(--muted); font-size: var(--fs-sm); }
.cform input, .cform select, .cform textarea { height: var(--ctl); padding: 0 var(--sp-2); font-size: var(--fs-base); border-radius: var(--r-sm); }
.cform textarea { height: auto; padding: var(--sp-2); width: 100%; box-sizing: border-box; }
.crowfield { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-2); }
.cgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cgrid2 label { grid-template-columns: 1fr; gap: 2px; }
.cgroupchecks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.cgroupchecks label { display: inline-flex; grid-template-columns: none; }
.cactions { display: flex; gap: var(--sp-2); padding-top: var(--sp-3); }
.cactions .cbtn { margin: 0; }
.cphoto { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); margin-top: var(--sp-3); }
.cphoto label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.cdanger { display: flex; gap: var(--sp-4); padding-top: var(--sp-3); }
.cdanger form { margin: 0; padding: 0; background: none; border: 0; }
button.link.danger, .link.danger { color: var(--bad); }
@media (max-width: 760px) {
  .crow { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .crow .cmail, .crow .cphone { display: none; }
  .ccard { max-width: none; position: static; }
}