/*
    Webmail's stylesheet, and the WebAssembly application's.

    One file for both, because they are meant to look the same: the application at /app draws
    webmail's markup with these classes, and a second copy of the rules would be the first thing
    to drift. Served from this library's static assets, so both reach it at the same address.

    The tokens are the console's, deliberately copied rather than shared. They are the same
    product and should look like it - but webmail is the surface a customer sees and the console
    is the one an operator sees, and the two will diverge. When they do, the divergence should be
    an edit here rather than a conditional in a shared file.
*/
:root {
    color-scheme: light;

    --bg:        #f5f7fb;
    --bg-2:      #ffffff;
    --panel:     #ffffff;
    --panel-2:   #f2f5fa;
    --panel-3:   #e8edf6;
    --line:      #d7dfec;
    --line-soft: #e6ebf4;

    --fg:        #101828;
    --muted:     #5a6b87;
    --accent:    #1d4ed8;
    --accent-2:  #1e40af;

    --ok:        #047857;
    --bad:       #b91c1c;
    --warn:      #a16207;

    --accent-rgb: 29, 78, 216;
    --bad-rgb:    185, 28, 28;

    --topbar-bg:  #ffffff;
    --sidebar-bg: #ffffff;
    --nav-active: #eef4ff;
    --unread-bg:  #ffffff;

    --shadow-sm: rgba(16, 24, 40, .06);
    --shadow-lg: rgba(16, 24, 40, .10);
    --scrim:     rgba(16, 24, 40, .45);
}

/* Not the light palette inverted: the accents are lightened rather than reused, because
   a hue that reads clearly on white is too dark on near-black to carry meaning. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:        #070b16;
    --bg-2:      #0b1220;
    --panel:     #111a2c;
    --panel-2:   #16203a;
    --panel-3:   #1b2745;
    --line:      #1e2b47;
    --line-soft: #17223a;

    --fg:        #eef2f9;
    --muted:     #8fa0bd;
    --accent:    #4d90fe;
    --accent-2:  #2563eb;

    --ok:        #34d399;
    --bad:       #f87171;
    --warn:      #fbbf24;

    --accent-rgb: 77, 144, 254;
    --bad-rgb:    248, 113, 113;

    --topbar-bg:  #0b1220;
    --sidebar-bg: #0b1220;
    --nav-active: #16223c;
    --unread-bg:  #131f36;

    --shadow-sm: rgba(0, 0, 0, .3);
    --shadow-lg: rgba(0, 0, 0, .55);
    --scrim:     rgba(4, 8, 18, .68);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- shell -------------------------------------------------------------------

   A fixed viewport with three columns that scroll independently, rather than one long
   page. Mail is a place you stay, not a document you read to the end: the folder list
   has to remain reachable while the reader is fifty messages down a folder. */
.shell {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 52px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--line);
}

/* The mark, on its own dark ground and already square, so it needs no tile behind it
   and no cropping — the file is the emblem rather than a wordmark it has to be cut out
   of. Its own element rather than an <img>, so the rounding and the size live with the
   rest of the chrome instead of being attributes on a tag. */
.topbar .logo {
    width: 28px; height: 28px; flex: none;
    border-radius: 7px;
    background: url("/brand/logo.png?v=realmmail-small") no-repeat center / cover;
}

/* A domain's own logo, rather than the product's.

   Two things change. It is contained rather than cropped: the built-in mark is a square
   emblem drawn to be cut into its tile, and a tenant's logo is whatever they had — a
   wordmark cropped to a square is unreadable. And the rounding and dark tile come off,
   because those belong to that particular emblem and would frame somebody else's badly.

   Set as background-image rather than the shorthand so the position and repeat above
   still apply; inline styles then supply the address, which is per domain and cannot
   live in a stylesheet. */
.topbar .logo.custom,
.signin-logo.custom {
    background-size: contain;
    background-color: transparent;
    border-radius: 0;
}

.signin-logo.custom { width: auto; max-width: 240px; height: 60px; }

/* Colour deliberately absent: it is the domain's, set inline on the element. A rule
   here would win over nothing and lose to everything, which is the confusing half. */
.topbar .product { font-weight: 600; letter-spacing: -.01em; }
.topbar .brand { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; }

.panes {
    display: grid;
    grid-template-columns: 232px 360px 1fr;
    min-height: 0;
}

/* With nothing open the list takes the space the reading pane would have had, rather
   than leaving a column of dead space beside it. */
.panes.no-reading { grid-template-columns: 232px 1fr; }

/* The calendar with an event open: sidebar, calendar, divider, editor.

   The calendar's width is the adjustable one and the editor takes what is left, rather
   than the other way round, because the calendar is what the reader is placing the
   event against — it is the half whose size they have an opinion about.

   The default is 60% of the pane. It used to be a fixed 360px against the editor's
   1fr, which on a wide window left the form occupying most of the screen to show
   eight fields. */
.panes.split {
    grid-template-columns: 232px var(--editor-width, 60%) 5px 1fr;
}

/* Four pixels of hit area is too few for a pointer and far too few for a finger, so
   the divider is wider than the line drawn inside it. */
.pane-resizer {
    position: relative;
    cursor: col-resize;
    background: var(--line);
    border: 0;
    padding: 0;
    touch-action: none;
}

.pane-resizer::after {
    content: "";
    position: absolute;
    inset: 0 -4px;
}

.pane-resizer:hover, .pane-resizer:focus-visible { background: var(--accent); }

/* While dragging, nothing else on the page should react to the pointer: text selects,
   buttons light up under the cursor, and the iframe-like feel of a drag disappears. */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { pointer-events: none; }
body.resizing .pane-resizer { pointer-events: auto; }

/* ---- folder list -------------------------------------------------------------- */
.folders {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    padding: 10px 8px;
}

.folder {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.folder:hover { background: var(--panel-2); }
.folder.active { background: var(--nav-active); color: var(--accent); font-weight: 600; }
.folder .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The unread count, and only when there is one. A column of zeroes is noise that makes
   the number that matters harder to find. */
.folder .count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.folder.active .count, .folder .count.unread { color: var(--accent); font-weight: 600; }

/* ---- message list ------------------------------------------------------------- */
.list {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: var(--bg-2);
    min-height: 0;
}

.list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.list-head .title { font-weight: 600; flex: 1; }
.list-head .sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.search { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }

input, select, textarea, button {
    font: inherit;
    color: var(--fg);
}

input[type=text], input[type=search], input[type=email], input[type=password], textarea, select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(var(--accent-rgb), .35);
    outline-offset: -1px;
    border-color: var(--accent);
}

.rows { flex: 1; overflow-y: auto; }

.row {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.row:hover { background: var(--panel-2); }

/* Selected wins over unread: the reader needs to see where they are more than they need
   to be reminded of a state they are in the act of changing. */
.row.selected { background: var(--nav-active); }

/* Unread is carried by weight and a bar down the edge rather than by colour alone —
   the same distinction has to survive a monochrome screen and a colour-blind reader. */
.row.unread { background: var(--unread-bg); box-shadow: inset 3px 0 0 var(--accent); }
.row.unread .from, .row.unread .subject { font-weight: 600; }

.row .line { display: flex; align-items: baseline; gap: 8px; }
.row .from { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { color: var(--muted); font-size: 12px; white-space: nowrap; }

.row .subject {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row.unread .subject { color: var(--fg); }

.more { margin: 10px; }

/* ---- reading pane ------------------------------------------------------------- */
.reading {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
}

.reading-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.reading-head h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.reading-head .field { color: var(--muted); font-size: 13px; }
.reading-head .field b { color: var(--fg); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* inline-flex rather than the default, so a button carrying an icon lines the glyph up
   with its label instead of sitting it on the text baseline. */
button.act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    cursor: pointer;
}

/* The icon must not shrink when the row runs out of room: a squashed glyph beside a
   full-width label reads as a rendering fault rather than as a tight fit. */
button.act svg { flex: none; }

button.act:hover { background: var(--panel-2); }
button.act.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.act.primary:hover { background: var(--accent-2); }
button.act.danger { color: var(--bad); border-color: rgba(var(--bad-rgb), .4); }
button.act:disabled { opacity: .5; cursor: default; }

/* The frame the message body renders in. Bordered and on its own ground, because what
   is inside it is not ours and should not look as though it is. */
.body-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

span.attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--fg);
    font-size: 13px;

    /* Double click opens it, so the text under the pointer should not be selected by
       the same gesture. */
    user-select: none;
    cursor: default;
}

span.attachment:hover { border-color: var(--accent); }
span.attachment .size { color: var(--muted); font-size: 12px; }

/* Kept quiet. Double clicking is the way to look at an attachment; this is for keeping
   one, and it should not compete with the file's own name for attention. */
span.attachment .save {
    color: var(--muted);
    font-size: 12px;
    padding-left: 2px;
    border-left: 1px solid var(--line);
    margin-left: 2px;
}

span.attachment .save:hover { color: var(--accent); }

/* ---- attaching files ---------------------------------------------------------
   The picker is the input wearing a label, so the file dialog opens from a real user
   gesture rather than from script clicking a hidden element. */
.clip-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.clip-button input[type="file"] {
    /* Not display:none. A hidden input is skipped by keyboard navigation, and the
       label would then be the only way in. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.compose-attachments { padding: 0 14px 10px; }

span.attachment .remove {
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 0 0 6px;
    margin-left: 4px;
}

span.attachment .remove:hover { color: var(--bad); }

/* The editor and the drop target share a box. The input sits over the whole of it and
   is invisible and inert until something is dragged in — otherwise it would take every
   click meant for the text underneath. */
.drop-area { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1; }

.drop-area .drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: copy;

    /* Off until a drag begins. Turned on by the dragenter handler through .dragging. */
    pointer-events: none;
}

.drop-area.dragging .drop-input { pointer-events: auto; }

.drop-area.dragging { outline: 2px dashed var(--accent); outline-offset: -6px; }

.drop-hint {
    position: absolute;
    inset: auto 0 16px 0;
    text-align: center;
    pointer-events: none;
    color: var(--accent);
    font-size: 13px;
}

/* The paperclip on a list row. Sits on the subject's baseline and takes its colour, so
   an unread row's weight carries it too. */
.row .clip {
    vertical-align: -1px;
    margin-right: 5px;
    color: var(--muted);
    flex: none;
}

.row.unread .clip { color: var(--fg); }

/* The offer to load what the sender wants loaded. Worded as a choice with a stated
   consequence, not a warning: most remote images are a newsletter's letterhead, and a
   reader told only that something is "blocked" learns nothing about whether to allow
   it. */
.remote-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(var(--accent-rgb), .07);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

/* ---- selecting and acting on several ----------------------------------------- */
.row { display: flex; align-items: flex-start; gap: 8px; padding: 0; }

.row-open {
    flex: 1;
    min-width: 0;
    padding: 10px 12px 10px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.row-check { margin: 13px 0 0 12px; flex: none; }

.bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}

.bulk-count { color: var(--muted); font-size: 13px; }
.bulk select { width: auto; max-width: 220px; }

/* Said in the list rather than as a toast. What just happened to somebody's mail should
   stay on screen until the next thing happens, not fade while they are still reading it. */
.notice {
    padding: 8px 12px;
    background: rgba(var(--accent-rgb), .08);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

/* ---- folder management -------------------------------------------------------- */
.compose-new { width: calc(100% - 4px); margin: 0 2px 10px; }

.folder-row { display: flex; align-items: center; }
.folder-row .folder { flex: 1; min-width: 0; }

/* The open/close arrow in front of a folder with folders inside it. Rows without one
   keep an empty column the same width, so names at one depth line up. */
.folder-expand {
    flex: 0 0 20px; width: 20px; height: 24px;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 5px;
    background: none; color: var(--muted); cursor: pointer;
}

button.folder-expand:hover { background: var(--panel-3); color: var(--fg); }
.folder-expand svg { width: 14px; height: 14px; display: block; }

/* Hidden until the row is under the pointer. A column of identical menu buttons down
   the sidebar competes with the folder names, which are what the list is for. */
.folder-menu {
    opacity: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.folder-row:hover .folder-menu, .folder-menu:focus { opacity: 1; }
.folder-menu:hover { background: var(--panel-3); color: var(--fg); }

/* Shown outright rather than on hover: it appears only on the folder the reader
   has open, which is a deliberate control on one row and not a column of them. */
.folder-delete { opacity: 1; color: var(--bad); }
.folder-delete svg { width: 15px; height: 15px; display: block; }

/* The row that names the list and carries the one control that adds to it. */
.folders-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 10px;
    margin: 14px 0 6px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.folders-head span { flex: 1; }

/* An icon and nothing else. The label it used to carry said what every plus in every
   application says, and it sat in a column where the words are folder names. */
.folder-add {
    display: flex;
    padding: 5px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.folder-add:hover { background: var(--panel-3); color: var(--fg); }
.folder-add svg { width: 16px; height: 16px; }

.folder-sheet .compose-field { margin-bottom: 12px; }
.folder-sheet .compose-field > span { width: 60px; }
.folder-preview { margin: 0 0 12px; }
.folder-preview strong { color: var(--fg); word-break: break-all; }

.folder-form { padding: 10px; margin-top: 8px; background: var(--panel-2); border-radius: 8px; }
.folder-form-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.folder-form .msg { margin: 8px 0 0; font-size: 12px; }

button.linkish {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

button.linkish:hover { text-decoration: underline; }

/* ---- compose ------------------------------------------------------------------ */
.compose {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
}

.compose-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.compose-head .spacer { flex: 1; }

.compose-title { font-weight: 600; }
.compose-fields { padding: 12px 18px; }
.compose-msg { margin: 12px 18px 0; }

.compose-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* A fixed label column so To, Cc and Subject line their inputs up down the form. */
.compose-field > span {
    width: 56px;
    flex: none;
    color: var(--muted);
    font-size: 13px;
}

/* ---- rich text editor ------------------------------------------------------------ */
.editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.editor-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}

.editor-gap { flex: 1; }

.editor-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px; height: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.editor-tool:hover { background: var(--panel-3); color: var(--fg); }

/* The editable region. Its own scroll, so the toolbar stays put while a long message
   is written under it. */
.editor-surface {
    flex: 1;
    min-height: 160px;
    padding: 12px;
    background: var(--panel);
    overflow-y: auto;
    line-height: 1.6;
    outline: none;
}

.editor-surface:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .35); outline-offset: -2px; }

/* A quoted original inside the editor, styled as the reading pane shows one so that
   what is being replied to is distinguishable from what is being written. */
.editor-surface blockquote {
    margin: 0 0 0 2px;
    padding-left: 12px;
    border-left: 2px solid var(--line);
    color: var(--muted);
}

.editor-surface a { color: var(--accent); }
.editor-surface img { max-width: 100%; height: auto; }

.compose-body {
    flex: 1;
    margin: 0 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    resize: none;
    font: inherit;
    line-height: 1.6;
}

/* Sits in the header beside the buttons rather than under them, so confirming a save
   does not move the buttons it is confirming. */
.compose-note { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---- top-bar navigation ------------------------------------------------------- */
.tabs { display: flex; gap: 4px; margin-left: 12px; }

.tab {
    padding: 6px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tab:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }

/* Filled rather than merely tinted. A coloured word beside an uncoloured one is easy to
   read the wrong way round, and this is the control that says which application you are
   looking at. */
.tab.active { background: var(--nav-active); color: var(--accent); font-weight: 600; }

/* ---- calendar ------------------------------------------------------------------ */
.cal-nav { display: flex; align-items: center; gap: 6px; margin: 4px 2px 8px; }
.cal-nav .act { padding: 4px 10px; }
.cal-month { flex: 1; text-align: center; font-weight: 600; font-size: 13px; }
.cal-today { margin: 0 0 12px 2px; }

.cal-heading {
    margin: 16px 0 6px 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.cal-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
}

.cal-toggle:hover { background: var(--panel-2); }
.cal-toggle .cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Quiet, and always visible rather than on hover. Somebody deciding whether they can
   move a meeting needs to know before they try, not after Save refuses. */
.cal-readonly {
    flex: none;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--panel-3);
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cal-grid-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
}

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal-weekday {
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Six equal rows filling whatever height is left, so the grid does not change shape as
   the reader pages between a five-week month and a six-week one. */
.cal-grid { flex: 1; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; }

.cal-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
}

/* Days from the neighbouring months. Dimmed rather than blank: an event on the 1st is
   still an event, and hiding it because the grid started on the 28th loses it. */
.cal-day.outside { background: var(--panel-2); }
.cal-day.outside .cal-daynum { opacity: .45; }

.cal-day-open {
    padding: 2px 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.cal-daynum { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.cal-day.today .cal-daynum {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.cal-event {
    display: flex;
    gap: 5px;
    padding: 2px 5px;
    border: 0;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--panel-2);
    color: var(--fg);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.cal-event:hover { background: var(--panel-3); }
.cal-event.cancelled { text-decoration: line-through; opacity: .55; }
.cal-event .cal-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cal-event .cal-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An event that runs past the end of this cell, or arrives already running. Square
   edges where it continues and round where it stops, so a five-day holiday drawn as
   five separate blocks reads as one bar rather than five identical events.

   The negative margins take each block to the very edge of its cell, closing the gap
   the grid leaves between days. Only on the side that continues: a block that ends
   here keeps its normal inset. */
.cal-event.continues {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -5px;
    padding-right: 8px;
}

.cal-event.continued {
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -5px;
    padding-left: 8px;
}

/* The carried-over marker, quieter than a time — it is punctuation rather than data. */
.cal-event .cal-carried { opacity: .5; }

.cal-more { padding: 0 6px; color: var(--muted); font-size: 11px; }

/* ---- calendar rows and sharing --------------------------------------------------- */
/* Positioned, so the colour popover below anchors to the row it belongs to rather
   than to whichever ancestor happens to be positioned. */
.cal-row { display: flex; align-items: center; position: relative; }
.cal-row .cal-toggle { flex: 1; min-width: 0; }

/* Hidden until the row is under the pointer, like the folder menu. A column of identical
   icons down the sidebar competes with the calendar names, which are what it is for. */
/* The share button's place in the row, occupied whether or not there is a button to
   put in it. Its width is the button's: a 15px icon inside 6px of padding either side.

   Without this the swatch to its left sat at a different place on every row, because
   the button is only drawn for a calendar this person may share — so a list of shared
   calendars lined its colours up only where two people happened to have granted the
   same access. */
.cal-share-slot {
    display: inline-flex;
    justify-content: center;
    flex: none;
    width: 27px;
}

.cal-share {
    opacity: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

/* The colour control, left of the share icon. Unlike that one it is always visible:
   it is also the swatch that says what colour the calendar is, and a legend that
   appears only on hover is not a legend. */
.cal-colour {
    position: relative;
    display: inline-flex;
    padding: 3px;
    margin-right: 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    flex: none;
}

.cal-colour:hover, .cal-colour:focus-visible { background: var(--panel-3); }

/* Over the sidebar rather than inside it: ten swatches will not fit a column sized for
   calendar names, and pushing the rows apart to make room would move the thing that
   was just clicked. */
.cal-palette {
    position: absolute;
    z-index: 40;

    /* Below the row and against the sidebar's left edge. Over the row would cover the
       calendar whose colour is being chosen, which is the one thing worth seeing while
       choosing it. */
    top: 100%;
    left: 0;
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.cal-palette button {
    width: 20px; height: 20px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
}

.cal-palette button.chosen { outline: 2px solid var(--fg); outline-offset: 2px; }

.cal-row:hover .cal-share, .cal-share:focus-visible { opacity: 1; }
.cal-share:hover { background: var(--panel-3); color: var(--fg); }

/* A dialog rather than a panel in the sidebar: deciding who can see a calendar is a task
   of its own, and a list of people does not fit a column sized for calendar names. */
.scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 30;
}

/* The same click-anywhere-to-close behaviour without the dimming. A popover the size of
   a postage stamp does not warrant darkening the page behind it, but it does need
   somewhere to catch the click that dismisses it. */
.scrim.scrim-clear { background: none; z-index: 39; }

.sheet {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 64px var(--shadow-lg);
    z-index: 31;
}

.sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.sheet-head h2 { margin: 0; font-size: 16px; }
.sheet-head .spacer { flex: 1; }

.sheet-body { padding: 16px 18px 20px; overflow-y: auto; }
.sheet-body h3 { margin: 18px 0 8px; font-size: 13px; }
.sheet-body h3:first-of-type { margin-top: 0; }

/* ---- Trace -----------------------------------------------------------------
   The route map a reader opens from a message. Verified steps take the accent, so they
   follow a domain's brand; claimed ones are amber, which reads as "take with a pinch of
   salt" rather than as an error. */

.trace-sheet {
    --trace-claimed: #f59e0b; --trace-claimed-ink: #b45309; --trace-claimed-soft: #fef3dc;
    --trace-ok: #16a34a; --trace-ok-ink: #15803d; --trace-ok-soft: #e7f6ec;
    --trace-sea: #dbe9f8; --trace-land: #f5f7fa; --trace-border: #cfd9e6;
    --trace-land-claimed: #fde5b4;
    width: min(1100px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 16px;
}
:root[data-theme="dark"] .trace-sheet {
    --trace-claimed: #fbbf24; --trace-claimed-ink: #fbbf24; --trace-claimed-soft: rgba(251, 191, 36, .14);
    --trace-ok: #34d399; --trace-ok-ink: #34d399; --trace-ok-soft: rgba(52, 211, 153, .13);
    --trace-sea: #0d1a2e; --trace-land: #1a2640; --trace-border: #2a3a5c;
    --trace-land-claimed: #5b4415;
}

.trace-sheet .mail-icon { flex: 0 0 auto; }

.trace-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px 14px; }
.trace-badge {
    display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px;
    border-radius: 50%; background: var(--nav-active); color: var(--accent);
}
.trace-badge .mail-icon { width: 28px; height: 28px; }
.trace-title { flex: 1; min-width: 0; }
.trace-title h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.trace-title p { margin: 2px 0 0; color: var(--muted); }
.trace-close { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.trace-close .mail-icon { width: 18px; height: 18px; }

.trace-body { padding: 0 22px 20px; overflow-y: auto; }
.trace-body > .empty { padding: 48px 18px; }

.trace-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
    padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft);
}
.trace-fact { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trace-fact .mail-icon { color: var(--muted); }
.trace-fact > div { display: flex; flex-direction: column; min-width: 0; }
.trace-fact span { color: var(--muted); font-size: 13px; }
.trace-fact strong { font-weight: 500; overflow-wrap: anywhere; }
.trace-fact + .trace-fact { padding-left: 22px; border-left: 1px solid var(--line); }
.trace-to-arrow { color: var(--muted); margin: 0 -10px; }
.trace-to-arrow + .trace-fact { border-left: 0; padding-left: 0; }
.trace-outcome {
    margin-left: auto; display: flex; flex-direction: column; align-items: center;
    padding: 10px 20px; border-radius: 10px; background: var(--trace-ok-soft); color: var(--trace-ok-ink);
}
.trace-outcome strong { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.trace-outcome > span { font-size: 13px; }
.trace-outcome.local { background: var(--nav-active); color: var(--accent); }
.trace-outcome .trace-info { width: 24px; height: 24px; flex-basis: 24px; }
.trace-outcome .trace-info .mail-icon { width: 16px; height: 16px; }

.trace-tick {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--trace-ok); color: #fff;
}
.trace-tick .mail-icon { width: 16px; height: 16px; stroke-width: 2.6; }
.trace-tick.big { width: 40px; height: 40px; flex: 0 0 40px; }
.trace-tick.big .mail-icon { width: 24px; height: 24px; }

/* The map. Its aspect ratio is TraceView.Aspect: the dots are placed by percentage of
   this box, which only matches the drawing when the two agree. */
.trace-stage { position: relative; margin-top: 14px; }
.trace-map {
    position: relative; aspect-ratio: 2.4; overflow: hidden;
    border-radius: 12px; background: var(--trace-sea); border: 1px solid var(--line-soft);
}
.trace-canvas { position: absolute; inset: 0; }
.trace-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trace-land { fill: var(--trace-land); stroke: var(--trace-border); stroke-width: .8; vector-effect: non-scaling-stroke; }
.trace-land.verified { fill: color-mix(in srgb, var(--accent) 42%, var(--trace-land)); }
.trace-land.claimed { fill: var(--trace-land-claimed); }
.trace-leg {
    fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 6;
    stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.trace-leg.claimed { stroke: var(--trace-claimed); }
.trace-head-arrow { fill: var(--accent); }
.trace-head-arrow.claimed { fill: var(--trace-claimed); }

.trace-dot {
    position: absolute; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 16px;
    border: 3px solid #fff; box-shadow: 0 2px 8px var(--shadow-lg);
}
.trace-dot.claimed { background: var(--trace-claimed); }
.trace-place {
    position: absolute; transform: translate(30px, -50%);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 4px 10px; border-radius: 8px; background: var(--panel); color: var(--fg);
    font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px var(--shadow-lg);
}
.trace-flag {
    width: 20px; height: 15px; border-radius: 2px; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .25);
}
.trace-flag.big { width: 36px; height: 27px; border-radius: 3px; }

.trace-card {
    position: absolute; top: 14px; width: min(290px, 27%);
    padding: 16px; border-radius: 12px; background: var(--panel);
    box-shadow: 0 4px 16px var(--shadow-lg); font-size: 13px;
}
.trace-card strong { display: block; font-size: 14px; }
.trace-legend { left: 14px; display: flex; flex-direction: column; gap: 16px; }
.trace-why { right: 14px; top: auto; bottom: 14px; display: flex; gap: 12px; }
.trace-why p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.trace-key { display: flex; gap: 12px; }
.trace-key span { color: var(--muted); }
.trace-key-mark { display: inline-flex; align-items: center; gap: 3px; height: 20px; flex: 0 0 auto; }
.trace-key-mark i { width: 16px; border-top: 3px dashed var(--accent); }
.trace-key-mark b { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.trace-key.claimed .trace-key-mark i { border-top-color: var(--trace-claimed); }
.trace-key.claimed .trace-key-mark b { background: var(--trace-claimed); }
.trace-info {
    display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--accent); color: #fff;
}
.trace-info .mail-icon { width: 20px; height: 20px; stroke-width: 2.6; }

/* The steps. The dotted line joining the numbers is drawn in two halves on each row -
   above its number and below it - so it meets up however tall a row turns out to be. */
.trace-hops { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trace-hop { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.trace-hop summary {
    position: relative; list-style: none; cursor: pointer;
    display: grid; align-items: center; gap: 16px; padding: 14px 16px;
    grid-template-columns: 44px 52px minmax(0, 1.6fr) minmax(150px, .8fr) minmax(200px, 1fr) 24px;
}
.trace-hop summary::-webkit-details-marker { display: none; }
.trace-hops li:not(:first-child) .trace-hop summary::before,
.trace-hops li:not(:last-child) .trace-hop summary::after {
    content: ""; position: absolute; left: 37px; border-left: 2px dotted var(--accent); opacity: .7;
}
.trace-hops li:not(:first-child) .trace-hop summary::before { top: -11px; height: calc(50% - 11px); }
.trace-hops li:not(:last-child) .trace-hop summary::after { top: calc(50% + 22px); bottom: -11px; }
.trace-hop[open] summary::after { display: none; }

.trace-num {
    position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; font-weight: 700;
}
.trace-num.claimed { background: var(--trace-claimed); }
.trace-kind {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px;
    background: var(--panel-2); color: var(--fg);
}
.trace-kind .mail-icon { width: 26px; height: 26px; }
.trace-what { display: flex; flex-direction: column; min-width: 0; }
.trace-what strong { font-size: 16px; font-weight: 600; }
.trace-what span { color: var(--muted); }
.trace-where { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.trace-globe { display: grid; place-items: center; width: 36px; }
.trace-globe .mail-icon { width: 30px; height: 30px; }
.trace-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12.5px; color: var(--muted); }
.trace-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px;
    background: var(--trace-ok-soft); color: var(--trace-ok-ink); font-size: 14px; font-weight: 600;
}
.trace-pill-icon {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--trace-ok); color: #fff;
}
.trace-pill-icon .mail-icon { width: 15px; height: 15px; stroke-width: 2.6; }
.trace-status.claimed .trace-pill { background: var(--trace-claimed-soft); color: var(--trace-claimed-ink); }
.trace-status.claimed .trace-pill-icon { background: var(--trace-claimed); }
.trace-chevron { color: var(--muted); transition: transform .15s ease; }
.trace-hop[open] .trace-chevron { transform: rotate(180deg); }

.trace-detail {
    display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px;
    margin: 0; padding: 12px 16px 16px 128px; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.trace-detail dt { color: var(--muted); }
.trace-detail dd { margin: 0; overflow-wrap: anywhere; }

.trace-banner {
    display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 20px;
    border-radius: 12px; background: var(--trace-ok-soft); border: 1px solid color-mix(in srgb, var(--trace-ok) 35%, transparent);
}
.trace-banner strong { display: block; font-size: 17px; }
.trace-banner span { color: var(--trace-ok-ink); }
.trace-banner.local { background: var(--nav-active); border-color: var(--line); }
.trace-banner.local span { color: var(--muted); }

.trace-sheet .country-attribution { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }
.trace-sheet .country-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Narrow screens: the cards leave the map for the space below it, and each step stacks.

   The map is framed with room at the sides for those cards. With the cards gone it is
   taller than it is framed for, and the drawing is cropped at the sides instead: the
   canvas keeps its own proportions, wider than the box, centred in it. The route sits
   in the middle of the canvas, which is the part still in view. */
@media (max-width: 860px) {
    .trace-map { aspect-ratio: 1.5; }
    .trace-canvas { inset: 0 auto; left: 50%; height: 100%; aspect-ratio: 2.4; transform: translateX(-50%); }
    .trace-badge, .trace-to-arrow { display: none; }
    .trace-head { padding: 14px 16px 10px; }
    .trace-title h2 { font-size: 20px; }
    .trace-body { padding: 0 14px 16px; }
    .trace-card { position: static; width: auto; margin-top: 10px; box-shadow: none; border: 1px solid var(--line); }
    .trace-hop summary { grid-template-columns: 44px minmax(0, 1fr) 24px; }
    .trace-kind { display: none; }
    .trace-where, .trace-status { grid-column: 2; }
    .trace-chevron { grid-column: 3; grid-row: 1; }
    .trace-detail { padding-left: 76px; }
    .trace-outcome { margin-left: 0; }
    .trace-fact + .trace-fact { border-left: 0; padding-left: 0; }
    .trace-hops li:not(:last-child) .trace-hop summary::after { top: 58px; }
    .trace-hops li:not(:first-child) .trace-hop summary::before { height: 25px; }
}

.share-table { width: 100%; border-collapse: collapse; }
.share-table td { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.share-table select { width: auto; }

/* The address can be long; the controls beside it must not be pushed off. */
.share-who { width: 100%; padding-right: 12px; word-break: break-all; }
.share-actions { text-align: right; white-space: nowrap; padding-left: 10px; }

.share-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-add input[type=email] { flex: 1; min-width: 200px; }
.share-add select { width: auto; }

/* The event form's fields are wider than the compose form's labels allow for. */
.cal-form .compose-field > span { width: 72px; }
.cal-check { width: auto; }

/* ---- account menu -------------------------------------------------------------- */

/* Visually hidden, still read aloud. The menu's only visible content is an icon, so
   without this a screen reader announces a button with no name at all. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.usermenu { position: relative; }

.usermenu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--muted);
    cursor: pointer;
    list-style: none;
}

/* Both, because the arrow is drawn by different pseudo-elements across browsers and a
   menu with a stray triangle beside a round avatar looks like a mistake. */
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary::marker { content: ""; }

.usermenu summary:hover { background: var(--panel-3); color: var(--fg); }
.usermenu[open] summary { background: var(--nav-active); color: var(--accent); }

.usermenu .menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 32px var(--shadow-lg);

    /* Above the panes, which scroll under it. */
    z-index: 20;
}

.usermenu .menu-who {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}

.usermenu .menu a,
.usermenu .menu button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--fg);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.usermenu .menu a:hover,
.usermenu .menu button:hover { background: var(--panel-2); text-decoration: none; }

/* ---- mailbox settings ------------------------------------------------------------ */
.settings-pane { overflow-y: auto; padding: 24px 16px 48px; }

.settings-who {
    padding: 0 10px;
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}

/* A control and the explanation of what it does, side by side. The switch has to sit
   beside its label rather than under it — a toggle whose meaning is a paragraph away is
   one people flip to find out what it does. */
.setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.setting-row .hint { margin-top: 4px; max-width: 46ch; }

/* The switch itself: a checkbox that is present for the keyboard and for assistive
   technology, with the visible control drawn by the track beside it. */
.switch { flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch .track {
    display: block;
    width: 40px; height: 23px;
    border-radius: 999px;
    background: var(--panel-3);
    transition: background .15s ease;
}

.switch .track::after {
    content: "";
    display: block;
    width: 17px; height: 17px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px var(--shadow-sm);
    transition: transform .15s ease;
}

.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* Visible focus, because the input it belongs to is off-screen and would otherwise take
   focus with nothing to show for it. */
.switch input:focus-visible + .track {
    outline: 2px solid rgba(var(--accent-rgb), .55);
    outline-offset: 2px;
}

.settings {
    max-width: 620px;
    margin: 0 auto;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.settings-head { margin-bottom: 18px; }
.settings-head h2 { margin: 0; font-size: 19px; }
.settings-address { color: var(--muted); font-size: 13px; }

.settings h3 {
    margin: 26px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.settings h3:first-of-type { border-top: 0; padding-top: 0; }

.settings label {
    display: block;
    margin: 12px 0 5px;
    font-size: 13px;
    font-weight: 600;
}

.settings textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.settings .hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.settings-actions { margin-top: 16px; }
.msg.ok { background: rgba(4, 120, 87, .12); color: var(--ok); }

.empty { padding: 32px 18px; color: var(--muted); text-align: center; }

.msg { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.msg.bad { background: rgba(var(--bad-rgb), .1); color: var(--bad); }

/* ---- sign-in ------------------------------------------------------------------ */
.signin {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.signin form {
    width: 100%;
    max-width: 360px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 28px var(--shadow-sm);
}

/* Larger here than in the top bar: on the sign-in page it is the only thing above
   the product name, and it is what tells somebody they are at the right server. */
.signin-logo {
    display: block;
    width: 56px; height: 56px;
    margin: 0 0 16px;
    border-radius: 13px;
    background: url("/brand/logo.png?v=realmmail-small") no-repeat center / cover;
}

.signin h1 { margin: 0 0 4px; font-size: 20px; }
.signin .sub { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.signin label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 600; }

.signin button {
    width: 100%;
    margin-top: 18px;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.signin button:hover { background: var(--accent-2); }

/* Below this the three columns cannot all be useful at once, so the reading pane takes
   the window and the list is reached by going back. Handled by the layout in markup
   rather than here, because it is a change of behaviour and not only of width. */
@media (max-width: 900px) {
    .panes, .panes.no-reading, .panes.split { grid-template-columns: 1fr; }
    .folders { display: none; }
    .pane-resizer { display: none; }
}
/* Webmail chrome follows a single grid: brand/sidebar, list, and reading pane.
   Flat throughout: every surface is one colour, separated by a hairline rather than a
   fade. The header and folder pane are --sidebar-bg, which is what a tenant's secondary
   colour replaces. */
:root:not([data-theme="dark"]) {
    --bg:#f4f8fe; --fg:#10133f; --muted:#62749e; --accent:#0064ff; --accent-2:#0055de;
    --accent-rgb:0,100,255; --line:#dce7f7; --line-soft:#e7eef8; --nav-active:#e2f0ff;
    --sidebar-bg:#f3f8ff;
}
body { font-family:"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.shell { --sidebar-width:270px; --header-height:68px; background:var(--bg); }
.topbar { display:flex; gap:0; height:var(--header-height); padding:0 22px 0 0; background:var(--sidebar-bg); border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:9px; width:var(--sidebar-width); padding:0 15px; flex:none; color:var(--fg); cursor:default; }
.topbar .logo { width:42px; height:48px; flex:none; border-radius:0; background:url('/brand/logo.png?v=realmmail-small') no-repeat center / 190%; }
.topbar .logo.custom { width:44px; height:44px; background-size:contain; }
.topbar .product { font-size:21px; font-weight:650; letter-spacing:-.8px; white-space:nowrap; }
.tabs { display:flex; height:100%; margin:0; gap:8px; flex:none; }
.tabs .tab { height:100%; display:flex; align-items:center; gap:12px; padding:0 18px; color:var(--muted); font-size:16px; background:transparent; border-radius:0; position:relative; }
.tabs .tab.active { color:var(--accent); font-weight:600; }
.tabs .tab.active:after { content:''; position:absolute; height:3px; background:var(--accent); bottom:0; left:12px; right:12px; border-radius:3px 3px 0 0; }
.mail-icon { flex:none; vertical-align:middle; }
.header-search-space { flex:1; min-width:20px; }
.storage-meter { width:210px; margin:0 36px 0 22px; flex:none; font-size:13px; line-height:1.5; }
.storage-track-row { display:flex; align-items:center; gap:10px; }
.storage-track-row progress { appearance:none; width:170px; height:11px; border:0; border-radius:20px; overflow:hidden; background:var(--line); accent-color:var(--accent); }
progress::-webkit-progress-bar { background:var(--line); border-radius:20px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:20px; }
.storage-track-row small { color:var(--muted); }
.usermenu summary { display:flex; width:auto; height:auto; gap:11px; padding:4px 0; background:transparent; border-radius:6px; }
.usermenu .avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-size:20px; flex:none; }
.account-label { width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:var(--fg); }
.account-label small { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin-top:3px; }
.status-dot { width:10px; height:10px; background:#25a749; border-radius:50%; }
.mail-workspace,.mail-workspace.no-reading { grid-template-columns:calc(var(--sidebar-width) - 10px) minmax(330px,30.6%) minmax(0,1fr); gap:10px; padding:10px 8px 14px 0; }
.mail-workspace .folders { padding:2px 15px 20px; background:var(--sidebar-bg); overflow:auto; border-right:1px solid var(--line); }
.mail-workspace button.compose-new { display:flex; align-items:center; justify-content:flex-start; gap:16px; padding:11px 20px; width:100%; height:46px; margin:0 0 16px; border-radius:7px; font-size:17px; font-weight:600; background:var(--accent); box-shadow:none; }
.mail-workspace .folder-row { margin-bottom:2px; }
.mail-workspace .folder { height:39px; gap:16px; border-radius:7px; font-size:13px; font-weight:400; }
.folder-icon { display:flex; width:25px; color:var(--muted); }
.folder-icon svg { width:24px; height:24px; }
.mail-workspace .folder.active { font-weight:600; color:var(--accent); background:var(--nav-active); }
.folder.active .folder-icon { color:var(--accent); }
.mail-workspace .folder .count { font-size:14px; min-width:31px; text-align:center; border-radius:20px; padding:2px 8px; color:var(--accent); background:var(--nav-active); }
.mail-workspace .folders-head { margin:16px 0 8px; }
.mail-workspace .folder-add svg { width:17px; height:17px; }
.upcoming { border-top:1px solid var(--line); margin:18px -15px 0; padding:15px 22px; }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:650; margin:0 0 15px; }
.sidebar-heading a { width:31px; height:31px; display:grid; place-items:center; color:var(--accent); background:var(--nav-active); border-radius:50%; }
.sidebar-heading a svg { width:18px; height:18px; }
/* A button now rather than a link, so it needs the resets a button brings with it —
   width, font and cursor — on top of the appearance it already had. */
.agenda-calendar { display:flex; align-items:center; gap:10px; width:100%; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:7px; text-decoration:none; color:var(--fg); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.agenda-calendar:hover { background:var(--panel-2); }

/* The list of calendars, over the sidebar. Positioned rather than inline because the
   agenda below it would otherwise jump down the page as the list opens, moving the
   events somebody had just been reading. */
.agenda-picker {
    position:absolute; z-index:40; left:15px; right:15px;
    margin-top:4px; padding:8px;
    border:1px solid var(--line); border-radius:9px; background:var(--panel);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    max-height:320px; overflow-y:auto;
}

.agenda-picker label { display:flex; align-items:center; gap:9px; padding:6px 5px; border-radius:6px; font-size:13px; cursor:pointer; }
.agenda-picker label:hover { background:var(--panel-2); }
.agenda-pick-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The section has to be the positioning context, or the list above would be placed
   against the page rather than against the sidebar it belongs to. */
.upcoming { position:relative; }
.agenda-calendar svg:first-child { color:var(--accent); }
.agenda-calendar svg:last-child { margin-left:auto; width:16px; }
.agenda-day { display:flex; align-items:center; gap:10px; margin:20px 0 10px; color:var(--muted); font-size:13px; }
.agenda-day strong { color:var(--fg); font-weight:600; }
.agenda-event { display:flex; gap:12px; margin:0 0 19px; text-decoration:none; color:var(--fg); font-size:13px; }
.agenda-time { width:52px; flex:none; font-size:14px; }
.agenda-time small { display:block; color:var(--muted); font-size:12px; margin-top:5px; }
.agenda-detail { border-left:6px solid var(--accent); border-radius:3px; padding-left:12px; min-width:0; }
.agenda-detail strong { display:block; font-weight:400; line-height:1.4; }
.agenda-detail small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.agenda-empty { color:var(--muted); font-size:13px; line-height:1.7; padding:10px 0; }
.mail-workspace .list,.mail-workspace .reading,.mail-workspace .compose { min-width:0; border:1px solid var(--line-soft); border-radius:13px; box-shadow:0 3px 20px #334d7405; background:var(--panel); }
.mail-workspace .list { overflow:hidden; }
.mail-workspace .list-head { gap:14px; padding:17px 20px; height:65px; flex:none; border:0; }
.list-head .title { font-size:25px; font-weight:650; letter-spacing:-.7px; flex:none; }
.list-head .sub { font-size:14px; white-space:nowrap; }
select.list-filter { width:64px; padding:4px; margin-left:auto; border:0; background:transparent; font-size:15px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; border:0; padding:6px; background:transparent; color:var(--muted); cursor:pointer; border-radius:5px; }
.icon-button:hover { background:var(--nav-active); color:var(--accent); }
.list-sort { border-left:1px solid var(--line); border-radius:0; padding-left:12px; }
.list-refresh { display:none; }
.mail-workspace .search { position:absolute; top:13px; left:575px; width:calc(100vw - 1090px); height:43px; padding:0; border:0; z-index:2; }
.search > svg { position:absolute; top:11px; left:13px; color:var(--muted); width:21px; }
.mail-workspace .search input { height:43px; padding:10px 12px 10px 44px; background:#eef4fb80; border:1px solid var(--line); border-radius:7px; font-size:15px; }
.mail-workspace .rows { padding:0 6px 12px; }
.mail-workspace .row { position:relative; min-height:104px; border:0; border-radius:7px; gap:0; padding:0 9px; align-items:center; background:transparent; box-shadow:none; }
.mail-workspace .row:after { content:''; position:absolute; bottom:0; left:16px; right:16px; border-bottom:1px solid var(--line-soft); }
.mail-workspace .row.selected { background:var(--nav-active); box-shadow:inset 3px 0 var(--accent); }
.mail-workspace .row.selected:after { display:none; }
.mail-workspace .row:hover { background:var(--nav-active); }
.mail-workspace .row-open { display:flex; align-items:flex-start; gap:19px; min-width:0; padding:14px 7px; width:100%; }
.sender-avatar { display:flex; align-items:center; justify-content:center; width:57px; height:57px; flex:none; border-radius:50%; color:white; background:#1f6bff; font-size:23px; font-weight:500; }
.tone-1 { background:#7c4fd6; } .tone-2 { background:#43944b; } .tone-3 { background:#ec3b5b; } .tone-4 { background:#00a3b4; } .tone-5 { background:#65789a; }
.message-copy { display:block; min-width:0; flex:1; }
.mail-workspace .row .line { align-items:center; gap:10px; }
.mail-workspace .row .from { font-size:17px; font-weight:600; line-height:1.4; }
.mail-workspace .row.unread .from { font-weight:700; }
.mail-workspace .row .when { font-size:13px; font-weight:400; }
.mail-workspace .row .subject { font-size:16px; font-weight:400; line-height:1.4; margin-top:4px; padding-right:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.message-meta { display:block; margin-top:5px; font-size:14px; color:var(--muted); padding-right:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-workspace .row-check { position:absolute; left:30px; top:35px; margin:0; width:20px; height:20px; z-index:2; opacity:0; accent-color:var(--accent); cursor:pointer; }
.row:has(.row-check:checked) .sender-avatar,.row:has(.row-check:hover) .sender-avatar,.row:has(.row-check:focus-visible) .sender-avatar { opacity:.15; }
.mail-workspace .row:hover .row-check,.mail-workspace .row-check:checked,.mail-workspace .row-check:focus-visible { opacity:1; }
.row-star { position:absolute; right:17px; top:49px; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; }
.row-star svg { width:20px; height:20px; } .flagged { color:#ffa500 !important; } .flagged svg { fill:currentColor; }
.mail-workspace .reading { overflow:hidden; }
.mail-workspace .reading-head { display:flex; flex-direction:column; padding:0 24px 20px; border:0; }
.reading-head .actions { order:-1; display:flex; align-items:center; flex-wrap:nowrap; gap:13px; height:66px; margin:0 -24px 25px; padding:12px 20px; border-bottom:1px solid var(--line); }
.reading-head .actions .act { display:inline-flex; align-items:center; gap:10px; padding:7px 3px; background:transparent; color:var(--muted); border:0; border-radius:4px; box-shadow:none; white-space:nowrap; font-size:14px; }
.reading-head .actions .act:hover { background:var(--nav-active); color:var(--accent); }
.message-title { display:flex; align-items:center; gap:12px; margin:0 0 27px; }
.reading-head h2 { margin:0; font-size:27px; line-height:1.25; font-weight:650; letter-spacing:-.6px; overflow-wrap:anywhere; }
.folder-chip { padding:4px 10px; color:var(--muted); background:var(--line-soft); border-radius:5px; font-size:13px; white-space:nowrap; }
.title-star { margin-left:auto; }
.sender-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.sender-addresses { flex:1; min-width:0; font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.sender-addresses strong { font-weight:650; }
.sender-addresses > span,.recipient-line { color:var(--muted); }
.recipient-line { font-size:13px; }
.sender-identity time { font-size:13px; color:var(--muted); white-space:nowrap; }
.message-more,.message-move { position:relative; }
.message-more { margin-left:auto; }
.message-more summary,.message-move summary { list-style:none; cursor:pointer; }
.message-more summary::-webkit-details-marker,.message-move summary::-webkit-details-marker { display:none; }
.message-more summary svg { stroke-width:4px; }
.move-options { position:absolute; z-index:15; top:100%; min-width:180px; max-height:260px; overflow:auto; background:var(--panel); padding:8px; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 25px #17264920; }
.message-more .move-options { right:0; }
.reading-head .move-options .act { display:block; width:100%; text-align:left; padding:9px; }
.reading-empty { display:grid !important; place-items:center; padding:30px; text-align:center; }
.reading-empty p { color:var(--muted); margin:12px 0 24px; }
.reading-empty h2 { margin-top:22px; font-size:24px; }
.empty-envelope { display:inline-grid; place-items:center; width:90px; height:90px; border-radius:24px; background:var(--nav-active); color:var(--accent); font-size:45px; }
.signin-logo { width:76px; height:84px; border-radius:0; background:url('/brand/logo.png?v=realmmail-small') no-repeat center / 190%; }
.signin-logo.custom { width:auto; max-width:260px; height:72px; background-size:contain; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:root[data-theme="dark"] .mail-workspace .row.selected { background:var(--nav-active); }
@media (max-width:1400px) {
    .shell { --sidebar-width:240px; }
    .topbar .product { font-size:19px; }
    .tabs .tab { padding:0 13px; }
    .storage-meter { width:150px; margin:0 20px; font-size:12px; }
    .storage-track-row progress { width:110px; }
    .account-label { width:115px; font-size:13px; }
    .mail-workspace .search { left:510px; width:calc(100vw - 940px); }
    .reading-head .actions { gap:9px; padding:12px 15px; }
    .reading-head .actions .act { font-size:12px; gap:6px; }
    .reading-head .actions svg { width:19px; height:19px; }
}
@media (max-width:1150px) {
    .storage-meter { display:none; }
    .mail-workspace .search { left:510px; width:calc(100vw - 760px); }
    .mail-workspace,.mail-workspace.no-reading { grid-template-columns:210px 310px minmax(0,1fr); }
    .reading-head .actions { flex-wrap:wrap; height:auto; min-height:66px; gap:7px 13px; }
    .mail-workspace .row-open { gap:12px; } .sender-avatar { width:44px; height:44px; font-size:19px; }
    .list-head .sub { font-size:12px; } .mail-workspace .list-head { padding:15px 14px; gap:8px; }
    .reading-head h2 { font-size:22px; } .folder-chip { display:none; }
}
@media (max-width:900px) {
    .shell { --sidebar-width:210px; }
    .brand-lockup { padding:0 10px; } .topbar .product { font-size:17px; }
    .mail-workspace,.mail-workspace.no-reading { grid-template-columns:210px minmax(0,1fr); }
    .mail-workspace .folders { display:block; grid-column:1; grid-row:1; }
    .mail-workspace > .list { display:none; } .mail-workspace.no-reading > .list { display:flex; }
    .mail-workspace.no-reading > .reading-empty { display:none !important; }
    .mail-workspace .reading,.mail-workspace .compose { grid-column:2; }
    .mail-workspace .search { position:relative; top:auto; left:auto; width:auto; margin:0 14px 12px; flex:none; }
    .header-search-space { min-width:5px; } .account-label { display:none; }
    .list-refresh { display:inline-flex; }
}
@media (max-width:580px) {
    .shell { --header-height:62px; --sidebar-width:auto; }
    .topbar { padding-right:10px; } .brand-lockup { gap:3px; } .topbar .product { max-width:85px; white-space:normal; line-height:1.1; font-size:14px; }
    .topbar .logo { width:32px; height:38px; } .tabs { gap:0; } .tabs .tab { padding:0 9px; font-size:13px; gap:5px; } .tabs svg { width:17px; }
    .usermenu .avatar { width:32px; height:32px; font-size:14px; } .usermenu summary > svg { display:none; }
    .mail-workspace,.mail-workspace.no-reading { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); padding:6px; gap:6px; }
    .mail-workspace .folders { display:flex; gap:6px; align-items:center; overflow:auto; grid-row:1; padding:0; border:0; }
    .mail-workspace .upcoming,.mail-workspace .folders-head,.mail-workspace .folder-menu { display:none; }
    .mail-workspace button.compose-new { width:auto; height:37px; padding:8px; margin:0; font-size:13px; gap:5px; flex:none; }
    .mail-workspace .folder-row { flex:none; margin:0; } .mail-workspace .folder { white-space:nowrap; font-size:13px; gap:5px; } .folder-icon { display:none; }
    .mail-workspace .list,.mail-workspace .reading,.mail-workspace .compose { grid-column:1; grid-row:2; }
    .mail-workspace .reading-head { padding:0 18px 18px; } .reading-head .actions { margin-left:-18px; margin-right:-18px; }
}
.mobile-back { display:none; }
.mail-workspace .folders,.mail-workspace .rows { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
@media (max-width:900px) { .mobile-back { display:inline-flex; } }

/* ==== header, shared by mail and calendar ================================================
   Brand, the two applications, one search box, storage, settings and the account. */
.topbar { gap: 0; padding-right: 22px; }
.brand-lockup { gap: 10px; }
.brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-words .product { font-size: 20px; }
.brand-words .tagline { font-size: 12px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.tabs { margin-right: 24px; }

.header-search {
    position: relative; flex: 1 1 auto; min-width: 180px; max-width: 540px;
    display: flex; align-items: center;
}
.header-search > svg { position: absolute; left: 13px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.header-search input {
    width: 100%; height: 42px; margin: 0; padding: 0 14px 0 42px;
    border: 1px solid var(--line); border-radius: 9px;
    background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); color: var(--fg);
    font: inherit; font-size: 14px;
}
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }

.storage-meter {
    display: flex; flex-direction: column; gap: 6px; width: 140px;
    margin: 0 20px 0 auto; padding-left: 28px; box-sizing: content-box;
    font-size: 12.5px; color: var(--muted);
}
.storage-meter progress {
    appearance: none; width: 100%; height: 5px; border: 0; border-radius: 5px;
    overflow: hidden; background: var(--line);
}
.storage-meter progress::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
.storage-meter small { font-size: 11.5px; }

.header-icon {
    display: grid; place-items: center; width: 40px; height: 40px; margin-right: 12px;
    border-radius: 10px; color: var(--muted);
}
.header-icon:hover { background: var(--nav-active); color: var(--accent); text-decoration: none; }

.usermenu summary { align-items: center; }
.account-label { font-weight: 600; }
.account-label small { font-weight: 400; }

/* ==== mail sidebar ======================================================================= */
.mail-workspace button.compose-new { justify-content: center; gap: 10px; font-size: 16px; }
.mail-workspace button.compose-new svg { width: 20px; height: 20px; }

.mail-workspace .folders-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 18px 0 6px; padding: 0 4px 0 6px;
}
.folders-toggle {
    display: flex; align-items: center; gap: 8px; flex: 1; padding: 4px 0;
    border: 0; background: none; color: var(--fg); font: inherit; font-size: 16px; font-weight: 650;
    text-align: left; cursor: pointer;
}
.folders-toggle span { flex: 1; }
.folders-toggle svg { width: 18px; height: 18px; color: var(--muted); }
.mail-workspace .folder { font-size: 14px; }
.mail-workspace .folder .count { font-size: 12px; min-width: 24px; padding: 1px 7px; background: var(--line-soft); color: var(--muted); }
.mail-workspace .folder .count.unread { background: var(--accent); color: #fff; font-weight: 600; }
.mail-workspace .folder { color: var(--fg); }
.mail-workspace .folder .folder-icon { color: var(--fg); }
.mail-workspace .folder.active .folder-icon { color: var(--accent); }

.upcoming { border-top: 1px solid var(--line); }
.sidebar-heading { gap: 8px; }
.sidebar-heading > span { flex: 1; font-size: 15px; }
.upcoming-pick {
    display: grid; place-items: center; width: 31px; height: 31px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.upcoming-pick:hover { background: var(--nav-active); color: var(--accent); }
.upcoming-pick svg { width: 17px; height: 17px; }

.agenda-card {
    display: flex; gap: 12px; align-items: stretch; margin: 0 0 12px;
    color: var(--fg); text-decoration: none;
}
.agenda-card:hover { text-decoration: none; }
.agenda-card:hover strong { color: var(--accent); }
.agenda-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 48px; height: 56px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel); line-height: 1.1;
}
.agenda-date strong { font-size: 20px; font-weight: 650; }
.agenda-date small { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.agenda-card .agenda-detail { border-left-width: 4px; padding-left: 10px; }
.agenda-card .agenda-detail strong { font-weight: 600; font-size: 14px; }
.agenda-card .agenda-detail small { margin-top: 2px; }
.agenda-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.agenda-all svg { width: 16px; height: 16px; }

/* ==== message list ======================================================================= */
.list-more { position: relative; }
.list-more summary { list-style: none; cursor: pointer; }
.list-more summary::-webkit-details-marker { display: none; }
.list-more .move-options { right: 0; }
.list-more .move-options .act { display: block; width: 100%; text-align: left; margin: 0; border: 0; background: none; }
.list-more .move-options .act:hover { background: var(--nav-active); }

.search-note {
    display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 8px 12px;
    border-radius: 8px; background: var(--nav-active); font-size: 13px; color: var(--muted);
}
.search-note span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-note strong { color: var(--fg); }

/* The left gutter holds the unread dot. The checkbox sits in the same place and takes
   over on hover or keyboard focus, and for every row once anything is selected, so
   picking several stays one click each. Still there, invisibly, for a touchscreen: a
   tap in the gutter selects, and the checkboxes then show. */
.mail-workspace .row { min-height: 92px; padding: 0 8px 0 14px; }
.mail-workspace .row-check {
    position: static; flex: none; opacity: 0; width: 18px; height: 18px; margin: 0 4px 0 0;
}
.mail-workspace .row:hover .row-check,
.mail-workspace .row-check:focus-visible,
.mail-workspace .rows:has(.row-check:checked) .row-check { opacity: 1; }
.mail-workspace .row > .unread-dot {
    position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
    border-radius: 50%; background: var(--accent); pointer-events: none;
}
.mail-workspace .row:hover > .unread-dot,
.mail-workspace .row:has(.row-check:focus-visible) > .unread-dot,
.mail-workspace .rows:has(.row-check:checked) .unread-dot { opacity: 0; }
.mail-workspace .row-open { gap: 16px; padding: 14px 10px; }
.sender-avatar { position: relative; width: 48px; height: 48px; font-size: 18px; }
.row:has(.row-check:checked) .sender-avatar,
.row:has(.row-check:hover) .sender-avatar,
.row:has(.row-check:focus-visible) .sender-avatar { opacity: 1; }
.mail-workspace .row .from { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-workspace .row .subject { font-size: 14.5px; margin-top: 2px; }
.mail-workspace .row.unread .subject { font-weight: 600; }
.mail-workspace .row .message-meta { font-size: 13.5px; margin-top: 3px; }
.mail-workspace .row.unread .when, .mail-workspace .row.selected .when { color: var(--accent); font-weight: 600; }
.row-mark { display: inline-flex; color: var(--muted); }
.row-mark svg { width: 16px; height: 16px; }
.row-star { top: auto; bottom: 16px; }

/* ==== nothing open ======================================================================= */
.reading-empty > div { max-width: 640px; }
.empty-art { width: min(360px, 80%); height: auto; display: block; margin: 0 auto; }
.reading-empty h2 { margin: 18px 0 6px; font-size: 28px; }
.reading-empty p { margin: 0 0 34px; font-size: 16px; }
.empty-features {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.empty-features li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.empty-features li > span {
    display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 8px;
    border-radius: 50%; background: var(--nav-active); color: var(--accent);
}
.empty-features strong { font-size: 14px; }
.empty-features small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ==== calendar =========================================================================== */
.cal-workspace {
    display: grid; min-height: 0;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: var(--bg);
}
.cal-workspace.with-side { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 320px; }
.cal-workspace.editing { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 380px; }

/* -- sidebar -- */
.cal-sidebar {
    overflow-y: auto; padding: 16px 18px 24px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
}
.cal-new { position: relative; display: flex; margin-bottom: 20px; }
.cal-new .act.primary {
    display: flex; align-items: center; height: 46px; margin: 0; border: 0;
    background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
}
.cal-new-main { flex: 1; gap: 10px; padding: 0 18px; border-radius: 8px 0 0 8px; }
.cal-new-more { padding: 0 12px; border-radius: 0 8px 8px 0; border-left: 1px solid rgba(255, 255, 255, .25) !important; }
.cal-new svg { width: 19px; height: 19px; }

.cal-menu {
    position: absolute; z-index: 40; display: flex; flex-direction: column; min-width: 190px; padding: 6px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.cal-menu button, .cal-menu a {
    padding: 8px 12px; border: 0; border-radius: 7px; background: none; color: var(--fg);
    font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap;
}
.cal-menu button:hover, .cal-menu a:hover { background: var(--nav-active); text-decoration: none; }
.cal-menu .danger { color: var(--bad); }
.cal-new-menu { top: calc(100% + 4px); left: 0; right: 0; }

.mini-cal { margin-bottom: 18px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.mini-head .icon-button svg { width: 16px; height: 16px; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-dow { font-size: 11.5px; color: var(--muted); padding: 4px 0; }
.mini-day {
    height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg);
    font: inherit; font-size: 13px; cursor: pointer; aspect-ratio: 1; justify-self: center;
}
.mini-day:hover { background: var(--nav-active); }
.mini-day.outside { color: var(--muted); opacity: .6; }
.mini-day.today { color: var(--accent); font-weight: 700; }
.mini-day.selected { background: var(--accent); color: #fff; font-weight: 600; opacity: 1; }
.mini-today {
    margin: 10px 0 0; padding: 7px 20px; border: 0; border-radius: 8px;
    background: var(--nav-active); color: var(--accent); font-weight: 600;
}

.cal-sidebar .cal-heading {
    margin: 18px 0 6px 2px; color: var(--fg); font-size: 15px; font-weight: 650;
    text-transform: none; letter-spacing: 0;
}
.cal-sidebar .cal-toggle { padding: 6px 4px; font-size: 14px; }
.cal-sidebar .cal-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.cal-sidebar .cal-swatch { width: 12px; height: 12px; border-radius: 3px; }
.cal-colour-fixed { cursor: default; }
.cal-colour-fixed:hover { background: none; }

/* -- toolbar -- */
.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 12px 12px 16px; }
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-toolbar .act {
    display: inline-flex; align-items: center; justify-content: center; height: 42px; margin: 0;
    padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
    color: var(--fg); font-size: 15px; font-weight: 500;
}
.cal-toolbar .act:hover { background: var(--nav-active); }
.cal-step { display: inline-flex; }
.cal-step .act { width: 42px; padding: 0; border-radius: 0; }
.cal-step .act:first-child { border-radius: 8px 0 0 8px; }
.cal-step .act:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.cal-step svg { width: 18px; height: 18px; }
.cal-title { flex: 1; min-width: 180px; margin: 0 0 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -.4px; }
.cal-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.cal-views button {
    height: 40px; padding: 0 20px; border: 0; background: none; color: var(--fg);
    font: inherit; font-size: 15px; cursor: pointer;
}
.cal-views button + button { border-left: 1px solid var(--line); }
.cal-views button:hover { background: var(--nav-active); }
.cal-views button.active { background: var(--accent); color: #fff; }
.cal-more-wrap { position: relative; }
.cal-more-btn { width: 42px; padding: 0 !important; }
.cal-more-menu { top: calc(100% + 4px); right: 0; }
.cal-main .search-note { margin: -4px 0 10px; }

/* -- month -- */
.cal-month-view {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.cal-month-view .cal-weekday {
    padding: 10px 6px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft);
    color: var(--fg); font-size: 14px; font-weight: 600; text-align: center; background: var(--panel);
}
.cal-month-view .cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month-view .cal-day {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 8px 6px;
    border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
    background: var(--panel); overflow: hidden; cursor: pointer;
}
.cal-month-view .cal-day:hover { background: color-mix(in srgb, var(--nav-active) 45%, var(--panel)); }
.cal-month-view .cal-day.outside { background: var(--panel); }
.cal-month-view .cal-day.outside .cal-daynum { color: var(--muted); opacity: .6; }
.cal-month-view .cal-day.selected { box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), .35); }
.cal-month-view .cal-daynum {
    align-self: flex-end; min-width: 30px; height: 30px; display: grid; place-items: center;
    margin-bottom: 2px; border-radius: 50%; color: var(--fg); font-size: 15px; font-weight: 500;
}
.cal-month-view .cal-day.today .cal-daynum { padding: 0; background: var(--accent); color: #fff; font-weight: 600; }

.cal-event {
    display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 4px 8px;
    border: 0; border-left: 3px solid var(--ev, var(--accent)); border-radius: 5px;
    background: color-mix(in srgb, var(--ev, var(--accent)) 14%, var(--panel));
    color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.cal-event:hover { background: color-mix(in srgb, var(--ev, var(--accent)) 24%, var(--panel)); }
.cal-event .cal-time { color: var(--muted); font-size: 12.5px; flex: none; }
.cal-event .cal-summary { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event.continues { margin-right: -9px; border-radius: 5px 0 0 5px; }
.cal-event.continued { margin-left: -9px; border-left-width: 0; border-radius: 0 5px 5px 0; padding-left: 11px; }
.cal-event.continued.continues { border-radius: 0; }
.cal-more { padding: 0 6px; color: var(--muted); font-size: 12px; }

/* -- day and week -- */
.cal-time-view {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.cal-time-head, .cal-allday-row, .cal-time-body {
    display: grid; grid-template-columns: 58px repeat(var(--days), minmax(0, 1fr));
}
.cal-time-head { border-bottom: 1px solid var(--line); }
.cal-gutter { font-size: 11.5px; color: var(--muted); padding: 6px 8px 0 0; text-align: right; }
.cal-time-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0;
    border: 0; border-left: 1px solid var(--line-soft); background: none; color: var(--fg);
    font: inherit; cursor: pointer;
}
.cal-time-day small { color: var(--muted); font-size: 12.5px; }
.cal-time-day strong {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    font-size: 17px; font-weight: 600;
}
.cal-time-day.today strong { background: var(--accent); color: #fff; }
.cal-time-day.selected:not(.today) strong { background: var(--nav-active); color: var(--accent); }
.cal-allday-row { border-bottom: 1px solid var(--line); min-height: 34px; }
.cal-allday-row .cal-gutter { padding-top: 9px; }
.cal-allday-cell { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-left: 1px solid var(--line-soft); min-width: 0; }
.cal-time-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-time-body { position: relative; height: calc(24 * var(--hour)); }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); }
.cal-column {
    position: relative; border-left: 1px solid var(--line-soft);
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px);
    background-size: 100% var(--hour);
}
.cal-column.today { background-color: color-mix(in srgb, var(--nav-active) 35%, transparent); }
.cal-block {
    position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 4px 7px; border: 0; border-left: 3px solid var(--ev); border-radius: 5px;
    background: color-mix(in srgb, var(--ev) 16%, var(--panel)); color: var(--fg);
    font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.cal-block:hover { background: color-mix(in srgb, var(--ev) 26%, var(--panel)); z-index: 2; }
.cal-block strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-block.cancelled, .cal-event.cancelled, .cal-card.cancelled { text-decoration: line-through; opacity: .55; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }

/* -- agenda -- */
.cal-agenda {
    flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.cal-agenda-day { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cal-agenda-day:last-child { border-bottom: 0; }
.cal-agenda-date {
    display: flex; align-items: center; gap: 10px; flex: 0 0 130px; align-self: flex-start;
    padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.cal-agenda-date strong {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px;
}
.cal-agenda-day.today .cal-agenda-date strong { background: var(--accent); color: #fff; }
.cal-agenda-date span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; }
.cal-agenda-date small { color: var(--muted); font-weight: 400; font-size: 12px; }
.cal-agenda-day ul { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-agenda-item {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%;
    padding: 8px 12px; border: 0; border-left: 4px solid var(--ev); border-radius: 6px;
    background: color-mix(in srgb, var(--ev) 9%, var(--panel)); color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.cal-agenda-item:hover { background: color-mix(in srgb, var(--ev) 18%, var(--panel)); }
.cal-agenda-when { font-size: 13px; color: var(--muted); }
.cal-agenda-what { display: flex; flex-direction: column; min-width: 0; }
.cal-agenda-what strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-agenda-what small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.cal-agenda-what small svg { width: 14px; height: 14px; }
.cal-agenda-cal { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* -- right-hand panel -- */
.cal-side {
    display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
    padding: 18px 18px 20px; background: var(--panel); border-left: 1px solid var(--line);
}
.cal-side-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.cal-side-head > div { flex: 1; min-width: 0; }
.cal-side-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.cal-side-head span { font-size: 13px; color: var(--muted); }
.cal-side-head .icon-button svg { width: 18px; height: 18px; }
.cal-side-empty { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }

.cal-timeline { position: relative; list-style: none; margin: 0 0 14px; padding: 0 0 0 26px; }
.cal-timeline::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.cal-timeline li { position: relative; margin-bottom: 12px; }
.cal-timeline-dot {
    position: absolute; left: -24px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ev); box-shadow: 0 0 0 3px var(--panel);
}
.cal-card {
    position: relative; border: 1px solid var(--line-soft); border-left: 4px solid var(--ev);
    border-radius: 8px; background: var(--panel); box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
}
.cal-card-open {
    display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 40px 12px 14px;
    border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.cal-card-open:disabled { cursor: default; }
.cal-card-open:not(:disabled):hover strong { color: var(--accent); }
.cal-card-open small { color: var(--muted); font-size: 12.5px; }
.cal-card-open strong { font-size: 15px; font-weight: 650; }
.cal-card-where { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.cal-card-where svg { width: 15px; height: 15px; }
.cal-card-cal { font-size: 11.5px; color: var(--muted); }
.cal-card-menu { position: absolute; top: 8px; right: 6px; }
.cal-card-menu svg { stroke-width: 3; }
.cal-card-actions { top: 40px; right: 6px; }
.cal-card-confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--line-soft); font-size: 13px;
}
.cal-card-confirm span { flex: 1 1 100%; }
.cal-card-confirm .act { margin: 0; }
.cal-side-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0;
    padding: 9px 12px; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--accent);
}
.cal-side-add svg { width: 16px; height: 16px; }

.cal-editor .msg { margin-bottom: 12px; }
.cal-editor .cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-editor .cal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.cal-editor .cal-form input[type=text], .cal-editor .cal-form input[type=date],
.cal-editor .cal-form input[type=datetime-local], .cal-editor .cal-form select, .cal-editor .cal-form textarea {
    width: 100%; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--fg); font: inherit; font-size: 14px;
}
.cal-editor .cal-form textarea { resize: vertical; }
.cal-editor .cal-form .cal-form-check { flex-direction: row; align-items: center; gap: 8px; color: var(--fg); font-size: 14px; }
.cal-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cal-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cal-form-actions .compose-note { flex: 1 1 100%; white-space: normal; }
.cal-form-actions .act { margin: 0; }

@media (max-width: 1400px) {
    .cal-workspace.with-side { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 280px; }
    .cal-views button { padding: 0 12px; }
    .cal-title { font-size: 20px; }
    .header-search { max-width: 380px; }
    .empty-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
    .cal-workspace, .cal-workspace.with-side, .cal-workspace.editing { grid-template-columns: 210px minmax(0, 1fr); }
    .cal-side { position: fixed; top: var(--header-height); right: 0; bottom: 0; width: min(360px, 90vw); z-index: 25; box-shadow: -12px 0 30px rgba(0, 0, 0, .12); }
    .brand-words .tagline { display: none; }
}

@media (max-width: 900px) {
    .cal-workspace, .cal-workspace.with-side, .cal-workspace.editing { grid-template-columns: minmax(0, 1fr); }
    .cal-sidebar { display: none; }
    .header-search { min-width: 0; }
    .tabs .tab { padding: 0 10px; }
}
    /* ---- two-factor sign-in ------------------------------------------------------ */
.two-factor form { max-width: 440px; }
.two-factor-steps { margin: 4px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.two-factor-steps li { margin-bottom: 12px; }
.two-factor-qr {
    display: block; width: 200px; height: 200px; margin: 10px 0 6px; padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.two-factor-qr svg { display: block; width: 100%; height: 100%; }
.two-factor-manual summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.two-factor-manual code {
    display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px;
    background: var(--panel-2); font-size: 15px; letter-spacing: .06em; word-break: break-all;
}
input.two-factor-code {
    font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums;
}

.two-factor-foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* The biometric step after it: one icon, one line saying what is happening. */
.biometric { max-width: 440px; }
.biometric-icon { display: grid; place-items: center; margin: 18px 0 6px; color: var(--accent); }
.biometric-status { min-height: 1.4em; margin: 8px 0 14px; text-align: center; font-size: 14px; color: var(--muted); }
.biometric-status.bad { color: var(--bad, #c0392b); }
.biometric-unsupported { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.biometric button[data-go] { width: 100%; }
.pill-status {
    flex: none; align-self: center; padding: 3px 10px; border-radius: 999px;
    background: var(--panel-3); color: var(--muted); font-size: 12px; font-weight: 600;
}
.pill-status.on { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.settings-subhead { margin: 22px 0 4px; font-size: 15px; }
.device-list { list-style: none; margin: 10px 0; padding: 0; }
.device-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.device-list li > div { display: flex; flex-direction: column; min-width: 0; }
.device-list .hint { margin: 2px 0 0; }

/* ---- contacts ------------------------------------------------------------------- */
a.act {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
    color: var(--fg); text-decoration: none; cursor: pointer;
}
a.act:hover { background: var(--panel-2); }
a.act.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
a.act .mail-icon, label.act .mail-icon { width: 16px; height: 16px; }

.contacts-workspace .folder-icon .mail-icon { width: 18px; height: 18px; }
.contacts-tools { display: flex; flex-direction: column; gap: 6px; margin: 16px 2px 0; }
.contacts-tools .act { justify-content: flex-start; font-size: 13px; }
label.act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); cursor: pointer; }
label.act:hover { background: var(--panel-2); }
.contacts-import input[type=file] { display: none; }
.contacts-hint { margin: 12px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.contacts-msg { margin: 10px 12px 0; }
.contacts-empty p { margin: 0; }

.contact-row { display: flex; align-items: center; gap: 10px; }
.contact-lines { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.contact-lines .from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.contact-lines .subject { margin-top: 1px; }

/* Secure email: green for a key pair somebody set up, accent for a public key somebody
   kept, muted for none. The words are there as well as the colour, so it is not the
   colour alone that says which. */
.contact-key {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--accent); background: rgba(var(--accent-rgb), .10);
}
.contact-key.pair { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.contact-key.none { color: var(--muted); background: var(--panel-2); }
.contact-key .mail-icon { width: 13px; height: 13px; }
.contact-secure { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.contact-key-note { color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .contact-row .contact-key-text { display: none; } }

.contact-avatar {
    display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(var(--accent-rgb), .14); color: var(--accent); font-size: 13px; font-weight: 700;
}
.contact-avatar.large { width: 52px; height: 52px; font-size: 19px; }

.contact-pane { overflow-y: auto; }
.contact-head { display: flex; flex-direction: column; gap: 4px; }
.contact-title { display: flex; align-items: center; gap: 14px; }
.contact-title h2 { margin: 0 0 2px; }
.contact-details { padding: 14px 18px 24px; }
.contact-detail { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.contact-detail .k { color: var(--muted); font-size: 13px; }
.contact-detail .v { color: var(--fg); overflow-wrap: anywhere; }
.contact-detail a.v { color: var(--accent); text-decoration: none; }
.contact-detail a.v:hover { text-decoration: underline; }
.contact-multiline { white-space: pre-line; }

.contact-form { padding: 14px 18px 28px; max-width: 760px; }
.contact-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.contact-grid .wide { grid-column: 1 / -1; }
.contact-section { margin: 20px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.contact-field { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.contact-field select { width: 120px; flex: none; }
.contact-address { margin-bottom: 12px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.contact-address textarea { margin-top: 2px; }
.contact-notes { margin-top: 10px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- recipient suggestions in compose ---------------------------------------------- */
.recipient-input { position: relative; flex: 1; min-width: 0; }
.recipient-input input { width: 100%; }
.recipient-suggestions {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.recipient-suggestions li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.recipient-suggestions li.active, .recipient-suggestions li:hover { background: var(--nav-active); }
.recipient-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-email { grid-column: 1; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-source { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 11px; }

/* ---- secure email ------------------------------------------------------------------------
   Drawn by the WebAssembly webmail at /app, which opens, checks and sends S/MIME on the reader's
   own device; webmail on the server cannot, because the keys never go there. Built from the
   notice bar above the message body, so a signed message reads as part of the same pane.
   Colour is never the only signal: every state says in words what it means. */
.secure-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 18px;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-size: 13px;
}
.secure-notice > span { display: inline-flex; align-items: center; gap: 6px; }
.secure-notice .mail-icon { width: 16px; height: 16px; flex: none; }
.secure-notice .is-bad { color: var(--bad); }
.secure-notice .is-warn { color: var(--warn); }
.secure-notice.is-error { background: rgba(var(--bad-rgb), .08); color: var(--bad); }
.secure-notice.is-question { background: rgba(var(--accent-rgb), .07); }
.secure-notice.is-pending { background: var(--panel-2); color: var(--muted); }
.secure-notice .secure-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.secure-notice a { color: inherit; font-weight: 600; }

.secure-part {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ok);
    font-size: 12px;
    font-weight: 600;
}
.secure-part.plain { color: var(--warn); }
.secure-part .mail-icon { width: 14px; height: 14px; }
.note-frame { width: 100%; height: 140px; border: 0; border-bottom: 1px solid var(--line); background: #fff; flex: none; }

.attachment.local { border-style: dashed; }
.attachment.local button.save { border: 0; background: none; padding: 0; cursor: pointer; }

/* Composing: the Secure switch in the compose head, and what it says under the fields. */
.compose-head .act.secure-toggle.on { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.compose-secure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--muted);
}
.compose-secure.on { color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.compose-secure .mail-icon { width: 15px; height: 15px; }
.compose-secure label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.compose-secure-missing { color: var(--bad); }
.compose-note-field { padding: 8px 18px; border-bottom: 1px solid var(--line-soft); }
.compose-note-field textarea { width: 100%; min-height: 60px; resize: vertical; }

/* Settings > Secure email. */
.secure-keys { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.secure-keys th, .secure-keys td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.secure-keys th { color: var(--muted); font-weight: 600; font-size: 12px; }
.secure-fingerprint { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.pairing-code { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 12px 0; }
.pairing-qr { width: 200px; height: 200px; background: #fff; border-radius: 10px; padding: 8px; border: 1px solid var(--line); }
.pairing-text { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 18px; letter-spacing: .08em; }
.secure-steps { padding-left: 1.3em; }
.secure-steps li { margin: .35em 0; }

/* Trace in the WebAssembly webmail: the server's own Trace view (TraceDocument), in a frame inside
   the same sheet, with the sheet's Close in the place the view's own would be. */
.trace-standalone { width: auto; max-height: none; }
.trace-sheet .trace-frame { display: block; width: 100%; height: min(760px, calc(100vh - 24px)); border: 0; background: var(--panel); }
.trace-sheet .trace-frame-close { position: absolute; top: 18px; right: 22px; }