/* Shared theme for ENiGMA's standalone web pages (profile, OTP, password reset,
   errors). These are served by ENiGMA itself, not built by Astro, so this
   stylesheet is deployed alongside the site and linked from each page. If it
   fails to load the pages still function (forms are unstyled but work). */

@font-face {
    font-family: 'Grenze';
    src: url('/fonts/grenze.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --obsidian: #0d0605;
    --stone: #160a08;
    --stone-2: #20100d;
    --edge: #3d201b;
    --edge-lit: #6a2f24;
    --ink: #e6d3bd;
    --ink-bright: #ffe6d0;
    --dim: #a07d6c;
    --accent: #d8503a;
    --accent-deep: #7a2418;
    --gold: #e0a34b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--obsidian);
    background-image: radial-gradient(
        ellipse 120% 70% at 50% -10%,
        rgba(216, 80, 58, 0.1) 0%,
        transparent 70%
    );
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    -webkit-font-smoothing: antialiased;
}

.ep-wrap {
    width: 100%;
    max-width: 34rem;
}

.ep-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-decoration: none;
}
.ep-brand img {
    width: 46px;
    height: 46px;
    display: block;
}
.ep-brand b {
    font-family: 'Grenze', Georgia, serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.ep-brand small {
    display: block;
    font-family: 'Grenze', Georgia, serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--dim);
    text-transform: lowercase;
}

.ep-card {
    background: var(--stone);
    border: 1px solid var(--edge);
    padding: 1.6rem 1.7rem;
    position: relative;
}

/* stud corner accents, echoing the site */
.ep-card::before,
.ep-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-deep);
}
.ep-card::before {
    top: 6px;
    left: 6px;
    border-right: 0;
    border-bottom: 0;
}
.ep-card::after {
    bottom: 6px;
    right: 6px;
    border-left: 0;
    border-top: 0;
}

.ep-card h1 {
    font-family: 'Grenze', Georgia, serif;
    font-weight: 600;
    color: var(--gold);
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.ep-card p {
    margin: 0 0 1rem;
}

label,
legend {
    display: block;
    color: var(--dim);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    padding: 0;
}

input[type='text'],
input[type='password'] {
    width: 100%;
    background: #000;
    border: 1px solid var(--edge);
    color: var(--ink-bright);
    padding: 0.6em 0.75em;
    font: inherit;
    margin-bottom: 0.9rem;
}
input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

button {
    background: var(--stone-2);
    border: 1px solid var(--accent);
    color: var(--gold);
    font-family: 'Grenze', Georgia, serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
    padding: 0.5em 1.5em;
    cursor: pointer;
}
button:hover {
    background: var(--accent);
    color: var(--obsidian);
}

code,
.ep-secret {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    background: #000;
    border: 1px solid var(--edge);
    color: var(--gold);
    padding: 0.4em 0.6em;
    display: inline-block;
    word-break: break-all;
}

a {
    color: var(--accent);
}
a:hover {
    color: var(--ink-bright);
}

.ep-footer {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--dim);
    font-size: 0.85rem;
}
.ep-footer a {
    color: var(--dim);
}
.ep-footer a:hover {
    color: var(--gold);
}

/* profile card specifics */
.ep-profile {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ep-profile img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--edge);
    filter: sepia(0.3);
}
.ep-profile dl {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.8rem;
    font-size: 0.92rem;
}
.ep-profile dt {
    color: var(--dim);
}
.ep-profile dd {
    margin: 0;
    color: var(--ink-bright);
}

.ep-qr img {
    max-width: 200px;
    border: 4px solid #fff;
    margin: 0.5rem 0 1rem;
}