/* Archive It additions on top of the shared app.css and classic.css. Everything else comes from the shared design system. */

/* Folder tree rows: a disclosure button, the folder link and its count share one nav row. */
.tree-row { display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.tree-row > a { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: inherit; text-decoration: none; padding: 4px 0; }
.tree-row > a:hover { text-decoration: none; }
.tree-toggle { flex: 0 0 18px; width: 18px; height: 22px; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
.tree-toggle:hover { color: var(--signal); }
.tree-toggle .ico { width: 12px; height: 12px; }

/* By-sender view: one heading per sender, pinned while that sender's mail scrolls past. */
.msg-group {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 8px 4px 12px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--hair);
    font-size: 13px;
}
.msg-group > .ellipsis { flex: 1; min-width: 0; }
.msg-group .muted { margin-left: 6px; }

/* Toolbars keep their full height in the list column; otherwise the list squeezes them and wrapped controls slide under it. */
.mail-list > .list-toolbar { flex-shrink: 0; }

/* The sort choice gets its own slim row under the title. */
.list-toolbar.arrange-bar { min-height: 0; padding-top: 4px; padding-bottom: 4px; flex-wrap: nowrap; overflow-x: auto; }
.list-toolbar.arrange-bar .label { white-space: nowrap; }

.list-notice {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--hair);
    background: var(--signal-soft);
    font-size: 12.5px;
}

/* Attachments page */
.att-row .from { display: flex; align-items: center; gap: 6px; }
.att-row .att-kind { flex: 0 0 auto; color: var(--signal); }
.att-row .preview a { color: var(--signal); }
.att-title { overflow-wrap: anywhere; }
.att-preview { border: 1px solid var(--hair); background: var(--reader-bg); }
.att-preview img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.att-preview iframe { display: block; width: 100%; height: 72vh; border: 0; background: #ffffff; }

.page-lede { max-width: 760px; margin: 0 0 18px; }
.headers-block { max-height: 260px; overflow: auto; margin: 0 0 6px; padding: 8px; background: var(--panel-2); border: 1px solid var(--hair); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.backstage-side form { margin: 0; }