/* ---------- tokens ---------- */
:root {
    --bg: #14110b;
    --bg-elevated: #1c1811;
    --bg-inset: #221c14;
    --border: #332919;
    --border-strong: #4a3c26;
    --text: #f2e9d8;
    --muted: #a89a7d;
    --accent: #d4af37;
    --accent-hover: #e6c65c;
    --lapis: #3565b0;
    --lapis-hover: #4a78c2;
    --carnelian: #b5432f;
    --carnelian-hover: #cf5138;
    --radius: 0px;
    --radius-lg: 0px;
    --maxw: 1300px;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    /* Spacing scale - a fixed set of steps used everywhere instead of ad-hoc values, so
       gaps and padding relate to each other consistently across the whole app rather than
       each component inventing its own numbers. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; color-scheme: dark; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.home-page { background: #0a0c16; }
/* Purely decorative, static background glyph for the homepage - reuses 𒀭 from the logo's
   own font subset (confirmed to render, unlike untested cuneiform characters) rather than
   introducing a new glyph. No animation: this is a zero-runtime-cost background layer,
   deliberately simpler than the canvas/CSS-3D floor attempts that preceded it.
   Plain text character, not SVG/clip-path. Centering accounts for this font's unusually
   large ascent/descent (relative to its nominal size): a naive top:50%/translate(-50%,-50%)
   centers the invisible line-box, not the visible ink, leaving it ~14% of the font-size too
   low. The -64.1% Y-translate (50% + that 14.1% offset) was derived from the font's own
   metrics and verified against a precise render before use - confirmed the ink's center
   lands exactly on the viewport's center, not just the line-box's. */
.bg-glyphs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-glyph {
    position: absolute;
    font-family: 'Noto Sans Cuneiform', serif;
    color: #262014;
    line-height: 1;
    user-select: none;
}
body.home-page .bg-glyph { color: #141d33; }
/* Outlined instead of solid-fill. -webkit-text-stroke has no standardized fallback, so the
   plain color rules above (a solid fill) are what non-supporting browsers see instead of
   nothing. The homepage override here must match the fallback's specificity (two classes)
   to actually win over it - a lower-specificity version was silently losing to the fallback
   above regardless of source order, which is why the homepage previously showed a solid
   glyph instead of an outline. */
@supports (-webkit-text-stroke: 1px black) {
    .bg-glyph {
        color: transparent;
        -webkit-text-stroke: 2px #262014;
    }
    body.home-page .bg-glyph {
        color: transparent;
        -webkit-text-stroke-color: #141d33;
    }
}
.bg-glyph-big {
    font-size: max(1000px, 200vmax);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--text); margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2.3rem, 1.7rem + 3vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.02rem; }
h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
/* A small solid wedge - the basic mark of a stylus pressed into clay, and the building
   block every cuneiform sign is made from - used as a recurring accent mark in place of
   a generic "//" prefix, which read as a developer-tool convention rather than anything
   tied to the actual theme. Drawn with plain borders rather than a Unicode cuneiform
   character so it renders identically everywhere without needing any font subset change. */
h5::before, .kicker::before, .hero-chip::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--accent);
    margin-right: 0.5em;
    flex: 0 0 auto;
}
p { margin: 0 0 var(--space-4); }
small { color: var(--muted); font-size: 0.85em; }
a { color: var(--accent); text-decoration-color: rgba(212,175,55,0.4); }
a:hover { color: var(--accent-hover); }
code {
    font-family: var(--font-mono);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.85em;
    color: #e8c078;
}

/* ---------- layout ---------- */
.container { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(3rem, 6vw, 7rem); }
.container-fluid { position: relative; z-index: 20; width: 100%; padding-inline: clamp(3rem, 6vw, 7rem); }
main.container { padding-top: var(--space-2); padding-bottom: var(--space-7); }

/* ---------- nav ---------- */
.site-nav { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: var(--space-2); padding-block: var(--space-5); margin-bottom: var(--space-4); border-bottom: 2px solid var(--accent); }
.site-nav-lapis { border-bottom-color: var(--lapis); }
.site-nav ul { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a:not([role="button"]) { color: var(--text); text-decoration: none; font-size: 0.95rem; }
.site-nav a:not([role="button"]):hover { color: var(--accent); }
/* The general button style (0.7em padding, 4px shadow) is sized for prominent standalone
   CTAs and is noticeably taller than the plain nav links or the account-trigger square,
   which made the nav's bottom border sit lower only while logged out (when this button is
   the tallest thing in the row) and shift back up on login (when it disappears). Shrunk here
   specifically for the nav context so the row height - and the border under it - stays put
   regardless of login state. */
.site-nav .nav-links [role="button"] {
    padding: 0.3em 1em;
    box-shadow: 2px 2px 0 0 var(--text);
}
.site-nav .nav-links [role="button"]:hover { box-shadow: 1px 1px 0 0 var(--text); transform: translate(1px, 1px); }
.site-nav .nav-links [role="button"]:active { box-shadow: 0 0 0 0 var(--text); transform: translate(2px, 2px); }
.site-nav .nav-toggle,
.site-nav .nav-links {
    margin-left: auto;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 40px;
    flex: 0 0 auto;
    background: var(--accent) !important;
    border: 2px solid var(--bg);
    border-radius: var(--radius);
    box-shadow: 3px 3px 0 0 var(--text);
    cursor: pointer;
    padding: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.nav-toggle:hover { background: var(--accent-hover); transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--text); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: #0b0d10; transition: transform 200ms ease, opacity 200ms ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Account dropdown: a square "profile picture" using the same cuneiform glyph as the logo,
   in place of a real avatar. Desktop shows it as a trigger for a small dropdown; on mobile
   the trigger is hidden and its two links (Delete Account, Logout) simply become two more
   flat items inside the existing hamburger menu - see the mobile override below. */
.account-menu { position: relative; }
.account-trigger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans Cuneiform', serif;
    font-size: 1.1rem;
    line-height: 1;
    background: var(--accent);
    color: #0b0d10;
    border: 2px solid var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    box-shadow: 2px 2px 0 0 var(--text);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.account-trigger:hover { background: var(--accent-hover); transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--text); }
.site-nav .account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    background: var(--bg-elevated);
    border: 2px solid var(--text);
    border-radius: var(--radius);
    box-shadow: 4px 4px 0 0 var(--accent);
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.site-nav .account-dropdown.open { display: flex; }
.account-dropdown li { width: 100%; }
.account-dropdown a { display: block; padding: 0.6em 0.8em; border-radius: calc(var(--radius) - 2px); }
.account-dropdown a:hover { background: rgba(255,255,255,0.06); }
#deleteAccountBtn { color: #ff9d9d; }
#deleteAccountBtn:hover { color: #ffb8b8; background: rgba(255,90,90,0.12); }

/* Logo glyph. font-family matters here specifically - almost no font on earth covers the
   Cuneiform Unicode block, so without it this renders as a blank box in most browsers. */
.brand {
    display: inline-block;
    text-decoration: none;
    font-family: 'Noto Sans Cuneiform', serif;
    font-size: 1.85rem !important;
    line-height: 1.5;
    overflow: visible;
	margin-top: -9px;
}
.brand svg { display: block; flex: 0 0 auto; }

/* "Nisabascribe" wordmark next to the logo */
.brandtext {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

/* Shine INSIDE the glyphs rather than a glow around them: the color itself is a moving
   gradient clipped to the exact shape of the text, with the gradient's position drifting
   slowly back and forth - no text-shadow, no halo, just the letterforms themselves
   shimmering. Gold/bronze is the default everywhere except the homepage, which keeps its
   own lapis/blue identity - see .site-nav-lapis below. */
.brand,
.brandtext {
    background-image: linear-gradient(100deg, #6b5219 0%, #d4af37 30%, #f5e6a8 50%, #d4af37 70%, #6b5219 100%);
    background-size: 250% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: nisaba-shine 24s ease-in-out infinite;
}
.site-nav-lapis .brand,
.site-nav-lapis .brandtext {
    background-image: linear-gradient(100deg, #1e3a6e 0%, #3565b0 30%, #6d94d9 50%, #3565b0 70%, #1e3a6e 100%);
}
@keyframes nisaba-shine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .brand, .brandtext { animation: none; background-position: 50% 50%; }
}

/* ---------- hero ---------- */
.hero { text-align: center; padding: var(--space-7) var(--space-4) var(--space-5); }
.hero svg { display: block; margin: 0 auto var(--space-4); }
.hero h1 { margin-bottom: var(--space-2); }
.hero p.lead { max-width: 620px; margin: var(--space-4) auto var(--space-6); color: var(--muted); font-size: 1.05rem; }
.hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: var(--accent);
    color: var(--bg);
    border: 2px solid var(--text);
    box-shadow: 4px 4px 0 0 var(--text);
    padding: 0.4em 0.9em;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(-1.5deg);
    margin-bottom: var(--space-5);
}
.hero-chip::before { border-left-color: var(--bg); }

/* ---------- buttons ---------- */
button, [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.7em 1.3em;
    border-radius: var(--radius);
    border: 2px solid var(--bg);
    background: var(--accent);
    color: #0b0d10;
    box-shadow: 4px 4px 0 0 var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
button:hover, [role="button"]:hover { background: var(--accent-hover); color: #0b0d10; transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--text); }
button:active, [role="button"]:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--text); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 0 var(--text); }

button.secondary, [role="button"].secondary {
    background: var(--bg-inset);
    color: var(--text);
}
button.secondary:hover, [role="button"].secondary:hover { background: var(--border); color: var(--text); }

button.outline, [role="button"].outline {
    background: var(--bg-elevated);
    color: var(--accent);
}
button.outline:hover, [role="button"].outline:hover { background: var(--bg-inset); color: var(--accent-hover); }

button.secondary.outline, [role="button"].secondary.outline {
    background: var(--bg-elevated);
    color: var(--text);
}
button.secondary.outline:hover, [role="button"].secondary.outline:hover { background: var(--bg-inset); color: var(--text); }

/* Irreversible actions (delete, wipe) get their own color rather than looking identical to
   a routine action like "generate a key" - same shape and weight as every other button, so
   it still belongs to the same family, but carnelian instead of gold reads as "be careful"
   at a glance rather than requiring the user to actually read the label first. */
button.danger, [role="button"].danger {
    background: var(--carnelian);
    color: var(--text);
    border-color: var(--bg);
}
button.danger:hover, [role="button"].danger:hover { background: var(--carnelian-hover); color: var(--text); }
button.danger.outline, [role="button"].danger.outline {
    background: var(--bg-elevated);
    color: var(--carnelian);
    border-color: var(--bg);
    box-shadow: 4px 4px 0 0 var(--carnelian);
}
button.danger.outline:hover, [role="button"].danger.outline:hover { background: var(--bg-inset); color: var(--carnelian-hover); box-shadow: 1px 1px 0 0 var(--carnelian); }
button.danger.outline:active, [role="button"].danger.outline:active { box-shadow: 0 0 0 0 var(--carnelian); }

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.65);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--bg-elevated);
    border: 2px solid var(--text);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 0 var(--carnelian);
    padding: var(--space-5);
    max-width: 420px;
    width: 100%;
}
.modal h3 { margin-top: 0; }
.modal input[type="text"] { margin: var(--space-3) 0; }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }

[aria-busy="true"] { cursor: progress; pointer-events: none; opacity: 0.85; }
button[aria-busy="true"]::before, [role="button"][aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: xhi-spin 0.6s linear infinite;
}
@keyframes xhi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    button[aria-busy="true"]::before, [role="button"][aria-busy="true"]::before { animation: none; }
}

/* ---------- cards ---------- */
/* Shadow weight now signals hierarchy instead of every elevated surface looking equally
   important: primary content cards (article) carry the boldest, most saturated treatment;
   secondary/collapsible panels (details) are deliberately quieter so they read as
   subordinate to the page's main content rather than competing with it. */
article {
    background: var(--bg-elevated);
    border: 2px solid var(--text);
    border-radius: var(--radius-lg);
    box-shadow: 6px 6px 0 0 var(--lapis);
    padding: var(--space-5);
    margin: var(--space-5) 0;
}
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: var(--space-7) 0; }
@media (min-width: 1300px) {
    .feature-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1700px) {
    :root { --maxw: 1800px; }
}
.feature-card { padding: var(--space-5); margin: 0; }
.feature-card .kicker {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: var(--space-2);
}
.feature-card h3 { margin-top: 0; color: var(--text); font-size: 1.05rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin: var(--space-6) 0; }
.step { text-align: center; padding: var(--space-4); }
.step .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); color: #0b0d10; font-family: 'Noto Sans Cuneiform', serif; font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-3); }

/* ---------- forms ---------- */
form { margin-top: var(--space-4); }
fieldset { border: none; padding: 0; margin: var(--space-4) 0; }
label {
    display: block;
    margin: var(--space-4) 0 var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
input[type="text"], input[type="password"], input[type="date"], textarea, select {
    width: 100%;
    margin-bottom: var(--space-4);
    padding: 0.75em 0.9em;
    background: var(--bg-inset);
    border: 2px solid var(--text);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
}
/* Deliberately excludes textarea: input[type=date] renders its mm/dd/yyyy segments and
   calendar icon through browser-internal shadow DOM parts that aren't fully governed by
   the outer element's own padding/font-size the way a plain text input or select is - so
   matching those two properties alone (the previous fix) isn't sufficient to guarantee an
   identical rendered height. An explicit height sidesteps that entirely. The value matches
   what select/text inputs already compute to naturally from their own padding above, so
   this constrains date inputs down to match them rather than changing how the others look. */
input[type="text"], input[type="password"], input[type="date"], select {
    height: 2.8rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
}
input[type="date"] {
    color-scheme: dark;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201L6%206L11%201'%20stroke='%23d4af37'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
input[type="number"] {
    margin-bottom: var(--space-4);
    padding: 0.75em 0.9em;
    background: var(--bg-inset);
    border: 2px solid var(--text);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
}
textarea { min-height: 160px; resize: vertical; font-family: var(--font-mono); font-size: 0.9rem; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }
input:read-only { cursor: pointer; }

/* ---------- details / accordion ---------- */
/* Deliberately lighter than article's shadow (3px muted-border vs article's 6px lapis) -
   this is a secondary, collapsible panel, not primary page content, and the softer
   treatment now reflects that instead of competing with it at equal visual weight. */
details { background: var(--bg-elevated); border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: 3px 3px 0 0 var(--border-strong); margin: var(--space-5) 0; overflow: hidden; padding-inline: var(--space-5); }
details[open] { padding-bottom: var(--space-5); }
details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-inline: calc(var(--space-5) * -1);
    padding: var(--space-4) var(--space-5);
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    -webkit-user-select: none;
    user-select: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
    content: "▸";
    flex: 0 0 auto;
    color: var(--accent);
    transition: transform 150ms ease;
}
details[open] > summary::after { transform: rotate(90deg); }
details > summary:hover { background: var(--bg-inset); }
details[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
details.renewal-panel > summary { color: var(--accent); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.filter-grid > div { display: flex; flex-direction: column; }
.filter-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- alerts ---------- */
.alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius); margin: var(--space-4) 0; font-size: 0.95rem; }
.alert-success { background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.4); color: #5eeaa0; }
.alert-error { background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.4); color: #ff9d9d; }

/* ---------- misc ---------- */
.centered-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 60vh; justify-content: center; }
.notes-list { list-style: none; padding: 0; margin: var(--space-5) 0; }
.notes-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.notes-list code { word-break: break-all; }
.note-cid-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; min-width: 0; }
.note-cid-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-meta-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.copy-btn.copy-btn-ghost, .copy-btn.copy-btn-ghost:hover, .copy-btn.copy-btn-ghost:active {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}
.copy-btn.copy-btn-ghost {
    color: var(--muted);
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.copy-btn.copy-btn-ghost:hover { color: var(--accent); }
.note-swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0; border: 1px solid var(--border-strong); vertical-align: middle; }
.note-swatch-gold { background: var(--accent); }
.note-swatch-lapis { background: var(--lapis); }
.note-swatch-carnelian { background: var(--carnelian); }
.note-swatch-turquoise { background: #c97a28; }
.note-swatch-malachite { background: #2f7d4a; }
.note-swatch-amethyst { background: #7b4fb8; }
.note-swatch-ivory { background: var(--text); }

.copy-row { display: flex; align-items: stretch; gap: var(--space-2); margin-bottom: var(--space-4); }
.copy-row input[type="text"] { margin-bottom: 0; flex: 1; min-width: 0; }
.copy-row code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
    background: var(--bg-inset);
    border: 2px solid var(--text);
    padding: 0.75em 0.9em;
    display: block;
}
.copy-btn {
    flex-shrink: 0;
    width: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}
.copy-btn-done { background: var(--accent) !important; color: var(--bg) !important; }
.copy-btn-error { background: #ff9d9d !important; color: var(--bg) !important; }

.color-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.color-swatch-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--border-strong);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: transform 100ms ease, border-color 100ms ease;
}
.color-swatch-btn:hover { transform: translate(1px, 1px); }
.color-swatch-btn.selected { border-color: var(--text); box-shadow: 3px 3px 0 0 var(--accent); }
.color-swatch-none, .color-swatch-none:hover { background: var(--bg-inset); position: relative; }
.color-swatch-none::after {
    content: "";
    position: absolute;
    left: 10%; right: 10%; top: 50%;
    height: 2px;
    background: var(--muted);
    transform: rotate(-45deg);
}
.color-swatch-gold, .color-swatch-gold:hover { background: var(--accent); }
.color-swatch-lapis, .color-swatch-lapis:hover { background: var(--lapis); }
.color-swatch-carnelian, .color-swatch-carnelian:hover { background: var(--carnelian); }
.color-swatch-turquoise, .color-swatch-turquoise:hover { background: #c97a28; }
.color-swatch-malachite, .color-swatch-malachite:hover { background: #2f7d4a; }
.color-swatch-amethyst, .color-swatch-amethyst:hover { background: #7b4fb8; }
.color-swatch-ivory, .color-swatch-ivory:hover { background: var(--text); }
.note-category {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    border: 1px solid var(--border-strong);
    padding: 0.1em 0.5em;
    border-radius: var(--radius);
}
.note-expiry { color: var(--muted); }
.no-select { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
footer.site-footer { position: relative; z-index: 1; text-align: center; padding: var(--space-7) var(--space-4); margin-top: var(--space-6); color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); }
footer.site-footer.no-border-top { border-top: none; }

.cookie-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--bg-elevated);
    border-top: 2px solid var(--accent);
    padding: var(--space-4) var(--space-5);
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    text-align: center;
}
.cookie-banner.visible { display: flex; }
.cookie-banner p { margin: 0; font-size: 0.9rem; color: var(--muted); max-width: 700px; }
.cookie-banner a { color: var(--accent); }
.cookie-banner button {
    flex: 0 0 auto;
    background: var(--accent);
    color: #0b0d10;
    border: 2px solid var(--text);
    border-radius: var(--radius);
    padding: 0.5em 1.2em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 2px 2px 0 0 var(--text);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.cookie-banner button:hover { background: var(--accent-hover); transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--text); }
body.home-page .cookie-banner {
    background: #141a2e;
    border-top-color: var(--lapis);
}
body.home-page .cookie-banner a { color: var(--lapis); }
body.home-page .cookie-banner button {
    background: var(--lapis);
    color: #f2e9d8;
    box-shadow: 2px 2px 0 0 var(--text);
}
body.home-page .cookie-banner button:hover { background: #4676c1; }
.footer-links { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-3); flex-wrap: wrap; }
.footer-links a { font-size: 0.85rem; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

@media (max-width: 700px) {
    .feature-grid { grid-template-columns: 1fr; }
    .site-nav { flex-wrap: nowrap; }
    .nav-toggle { display: flex; }
    .site-nav .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + var(--space-3));
        left: 0;
        right: 0;
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg-elevated);
        border: 2px solid var(--text);
        border-radius: var(--radius);
        box-shadow: 6px 6px 0 0 var(--accent);
        padding: var(--space-2);
    }
    .site-nav-lapis .nav-links {
        box-shadow: 6px 6px 0 0 var(--lapis);
    }
    .site-nav .nav-links.open { display: flex; }
    .site-nav .nav-links li { width: 100%; }
    .site-nav .nav-links a:not([role="button"]) { display: block; padding: 0.85em 0.9em; border-bottom: 1px solid var(--border); }
    .site-nav .nav-links li:last-child a:not([role="button"]) { border-bottom: none; }
    .site-nav .nav-links [role="button"] { display: flex; width: 100%; margin: var(--space-2) 0 0; }
    .account-trigger { display: none; }
    .site-nav .account-dropdown {
        display: flex;
        position: static;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    .container, .container-fluid { padding-inline: 1.1rem; }
    .hero { padding-inline: 0.25rem; }
    .hero-actions a, .hero-actions button { width: 100%; max-width: 24rem; }
    .notes-list li { flex-direction: column; align-items: stretch; }
    .notes-list li > span:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); }
}