/*!
 * ICI unified look, v1.5: Archie's look as a layer over the hub's ici-tokens.css and ici-components.css.
 * Spec: unified-look/design-spec.md in the "Unify the look" project files.
 *
 * Load it AFTER ici-tokens.css and ici-components.css (or after the tool's own copy of the tokens). Copy this file
 * whole and byte for byte into each tool; never edit a copy. The pinned hub files stay untouched. When the hub
 * adopts these rules in ici-components.css, this file is deleted.
 *
 * It does three things: sets the type (Jost for the app, Cormorant Garamond for the few display lines, Lato for
 * long reading), replaces the two uppercase label styles with Archie's one eyebrow, and adds the four pieces the
 * components file does not have (.ici-eyebrow, .ici-display, .ici-ornament, .ici-brand).
 *
 * Fonts are self-hosted by each tool (latin subsets; Jost 400, 500, 600; Cormorant Garamond 600; Lato 400, 700
 * only where long prose is read). The @font-face rules live in the tool, because the file paths differ per tool.
 */
:root {
    --ici-font: Jost, "Helvetica Neue", Arial, system-ui, sans-serif;
    --ici-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ici-font-reading: Lato, "Helvetica Neue", Arial, system-ui, sans-serif;
    --ici-radius-inner: 4px;
    --ici-radius-pill: 999px;
    --ici-space-1: 4px;
    --ici-space-2: 8px;
    --ici-space-3: 12px;
    --ici-space-4: 16px;
    --ici-space-5: 24px;
    --ici-space-6: 32px;
}

/* ---------- The one uppercase style ---------- */

.ici-eyebrow,
.ici-sidebar-label,
.ici-card-title {
    font-family: var(--ici-font, Jost, "Helvetica Neue", Arial, system-ui, sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Gold where it names a place (sidebar sections, the brand block, a page section). */
.ici-eyebrow,
.ici-sidebar-label {
    color: var(--ici-gold-text, #7A5F2A);
}

/* Quiet inside data (the title of a card or a stat). */
.ici-card-title,
.ici-eyebrow--muted {
    color: var(--ici-text-muted, #64625D);
}

/* ---------- Display lines ---------- */

.ici-display {
    font-family: var(--ici-font-display, "Cormorant Garamond", Georgia, "Times New Roman", serif);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.15;
}

/* A gold diamond between two hairlines: sign-in and empty first-run screens only. */
.ici-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ici-gold, #C3A265);
}

.ici-ornament::before,
.ici-ornament::after {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.ici-ornament > span {
    width: 6px;
    height: 6px;
    background: currentColor;
    transform: rotate(45deg);
}

/* ---------- Sidebar brand block ---------- */

/* First child of .ici-sidebar:
 *   <a class="ici-brand" href="/">
 *     <img class="ici-brand-icon" src="(the app's own icon)" alt="">
 *     <span class="ici-brand-text"><span class="ici-eyebrow">ICI Homes</span>
 *       <span class="ici-brand-name">Errors</span></span>
 *   </a>
 * The icon is the app's own existing one (its favicon / launcher icon), unchanged: never a new or shared mark.
 * The sidebar's own 12px top padding is cancelled so the block's rule meets the 56px toolbar's beside it. */
.ici-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 56px;
    margin: -12px 0 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ici-border, #E8E2D4);
    color: var(--ici-text, #1B2230);
    text-decoration: none;
}

/* The hub header already shows the ICI Homes logo, the app's icon and its name, so under it the brand block is a
 * duplicate and is not shown. It remains for pages with no hub header (a desktop app, a frame, the hub being down),
 * and the sidebar gets its 12px top padding back.
 * The signal is data-ici-hub-account on <html>, which hub-header.js sets once it is up (the same attribute that hides
 * .ici-own-account). The header renders into a shadow root, so its mount stays :empty and cannot be the signal; the
 * second selector only covers a header rendered as ordinary children. */
html[data-ici-hub-account] .ici-brand,
:root:has(#ici-hub-header:not(:empty)) .ici-brand {
    display: none;
}

.ici-brand-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--ici-radius-control, 6px);
}

.ici-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ici-brand-name {
    font-family: var(--ici-font-display, "Cormorant Garamond", Georgia, "Times New Roman", serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Long reading (AI replies, rendered Markdown, ticket bodies) ---------- */

.ici-reading {
    font-family: var(--ici-font-reading, Lato, "Helvetica Neue", Arial, system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.6;
}

.ici-reading code,
.ici-reading pre {
    font-family: var(--ici-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.ici-reading blockquote {
    margin-left: 0;
    padding-left: 12px;
    border-left: 3px solid var(--ici-gold, #C3A265);
    color: var(--ici-text-muted, #64625D);
}

/* ---------- Toolbar right side (spec 4b) ---------- */

/* The global utilities: always the last thing in .ici-toolbar, after the page's .ici-toolbar-actions. */
.ici-toolbar-utilities {
    display: flex;
    align-items: center;
    gap: var(--ici-space-1, 4px);
    flex: none;
    margin-left: auto;
}

/* After page controls: cancel the toolbar's 24px column gap down to 8px and draw the divider (8px either side). */
.ici-toolbar-actions + .ici-toolbar-utilities {
    margin-left: -16px;
}

.ici-toolbar-actions + .ici-toolbar-utilities::before {
    content: "";
    flex: none;
    width: 1px;
    height: 20px;
    margin-right: var(--ici-space-1, 4px);
    background: var(--ici-border, #E8E2D4);
}

.ici-toolbar-utilities .ici-btn {
    position: relative;
    color: var(--ici-text-muted, #64625D);
}

.ici-toolbar-utilities .ici-btn:hover,
.ici-toolbar-utilities .ici-btn[aria-expanded="true"],
.ici-toolbar-utilities .ici-btn[aria-pressed="true"] {
    background: var(--ici-c-hover, rgba(27, 34, 48, 0.06));
    color: var(--ici-text, #1B2230);
}

/* Archie's bust: the one mark here that is not a Lucide line icon. */
.ici-toolbar-archie {
    flex: none;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

/* Unread count on the bell: a 16px pill inside a 2px surface ring. Not rendered at zero; caps at "9+". */
.ici-toolbar-count {
    position: absolute;
    top: -2px;
    right: -4px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 3px;
    border: 2px solid var(--ici-surface, #FFFFFF);
    border-radius: var(--ici-radius-pill, 999px);
    background: var(--ici-primary, #1C3A63);
    color: var(--ici-on-primary, #FFFFFF);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    pointer-events: none;
}

.ici-toolbar-actions .ici-select {
    max-width: 200px;
}

@media (max-width: 767px) {
    .ici-hide-narrow {
        display: none;
    }

    /* Two rows: title + utilities, then the page's controls. */
    .ici-toolbar {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .ici-toolbar-heading {
        flex: 1 1 0;
        min-height: 56px;
    }

    .ici-toolbar-utilities,
    .ici-toolbar-actions + .ici-toolbar-utilities {
        margin-left: auto;
    }

    .ici-toolbar-actions + .ici-toolbar-utilities::before {
        display: none;
    }

    .ici-toolbar-actions {
        order: 1;
        flex: 1 0 100%;
        margin-left: 0;
        padding-bottom: var(--ici-space-3, 12px);
        overflow-x: auto;
    }

    .ici-toolbar-tabs {
        order: 2;
        flex: 1 0 100%;
        min-height: 40px;
    }
}