/* =============================================================
   components.css — the component library
   -------------------------------------------------------------
   Mobile first. Base rules describe the phone; min-width media
   queries add the desktop. No inline <style> blocks anywhere in
   the application — if a rule is needed, it belongs here.
   ============================================================= */

/* ---- 1. reset ------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.018em;
}
p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid rgba(224, 64, 43, .35);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Visible only to assistive technology */
.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;
}

.skip-link {
    position: absolute; left: var(--s4); top: -100px; z-index: 200;
    background: var(--ink); color: #fff;
    padding: var(--s3) var(--s4); border-radius: var(--r-sm);
    font-weight: 650;
}
.skip-link:focus { top: var(--s4); color: #fff; text-decoration: none; }

/* ---- 2. icons ------------------------------------------- */

.i {
    width: 1em; height: 1em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.125em;
}

/* ---- 3. layout ------------------------------------------ */

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--s5) var(--s4) var(--s7);
}
@media (min-width: 760px) {
    .page { padding: var(--s6) var(--s5) var(--s8); }
}

.page-head { margin-bottom: var(--s5); }
.page-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--s2); }
.page-head p  { color: var(--ink-3); font-size: var(--fs-sm); max-width: 62ch; }
@media (min-width: 760px) {
    .page-head h1 { font-size: var(--fs-3xl); }
    .page-head p  { font-size: var(--fs-md); }
}

.eyebrow {
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: var(--s2);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
}

.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ---- 4. navigation -------------------------------------- */

.nav {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 40;
    padding: 0 var(--s4);
}
.nav-in {
    display: flex; align-items: center; gap: var(--s4);
    height: var(--nav-h);
    max-width: var(--page-max); margin: 0 auto;
}
@media (min-width: 760px) {
    .nav { padding: 0 var(--s5); }
    .nav-in { height: 64px; gap: var(--s5); }
}

.nav-logo img { height: 26px; width: auto; }
@media (min-width: 760px) { .nav-logo img { height: 28px; } }

.nav-links { display: none; gap: var(--s1); margin-left: var(--s3); list-style: none; }
@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-link {
    display: block;
    color: var(--ink-2); font-size: 14px; font-weight: 600;
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--ember); background: var(--ember-soft); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.nav-user {
    display: none; align-items: center; gap: var(--s2);
    padding: var(--s1) var(--s2) var(--s1) var(--s1);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface); cursor: pointer;
}
.nav-user:hover { border-color: var(--ink-3); }
.nav-user span.label {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 14ch;
}
@media (min-width: 900px) { .nav-user { display: flex; } }

.nav-burger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
    font-size: var(--fs-lg);
}
@media (min-width: 900px) { .nav-burger { display: none; } }

/* Off-canvas menu — the mobile navigation the old site never had */
.offcanvas { position: fixed; inset: 0; z-index: 100; display: none; }
.offcanvas[open], .offcanvas.is-open { display: block; }
.offcanvas-back { position: absolute; inset: 0; background: rgba(26, 26, 23, .45); }
.offcanvas-panel {
    position: absolute; inset: 0 0 0 auto;
    width: min(300px, 86vw);
    background: var(--surface); box-shadow: var(--e-3);
    padding: var(--s5) var(--s4);
    display: flex; flex-direction: column; gap: var(--s2);
    overflow-y: auto;
    animation: slide-in var(--t-base) var(--ease);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.offcanvas-panel .nav-link { font-size: var(--fs-md); padding: var(--s3); }
.offcanvas-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.offcanvas-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s4); }

/* ---- 5. language switcher ------------------------------- */

.langbar { display: flex; gap: 2px; background: var(--line-soft); border-radius: var(--r-sm); padding: 3px; }
.langbar a {
    padding: 5px 9px; border-radius: 6px;
    font-size: var(--fs-xs); font-weight: 650; color: var(--ink-3);
    text-decoration: none; line-height: 1;
    display: flex; align-items: center; gap: 4px;
}
.langbar a:hover { color: var(--ink); text-decoration: none; }
.langbar a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }

/* Compact variant for the nav: flag only, name for screen readers */
.langbar-compact a { padding: 5px 7px; }
.langbar-compact a > span[aria-hidden]:last-child { display: none; }

/* Unused legacy hook kept out of the way */
.lang-select {
    height: 40px; border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--r-sm); padding: 0 var(--s2); font-size: var(--fs-sm);
    font-weight: 600; color: var(--ink-2); cursor: pointer;
}

/* ---- 6. avatars ----------------------------------------- */
/* Generated in PHP from initials — no avatar service, no request */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; font-weight: 700;
    flex: none; user-select: none; line-height: 1;
    background: var(--pine);
}
.avatar-s { width: 30px; height: 30px; font-size: 11px; }
.avatar-m { width: 44px; height: 44px; font-size: 14px; }
.avatar-l {
    width: 88px; height: 88px; font-size: 28px;
    box-shadow: 0 0 0 4px var(--surface), var(--e-2);
}
@media (min-width: 760px) {
    .avatar-l { width: 104px; height: 104px; font-size: 32px; }
}

/* ---- 7. buttons ----------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 var(--s4);
    border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: 14px; font-weight: 650; cursor: pointer;
    white-space: nowrap; text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .06s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary   { background: var(--ember); color: #fff; }
.btn-primary:hover   { background: var(--ember-dark); color: #fff; }
.btn-secondary { background: var(--pine); color: #fff; }
.btn-secondary:hover { background: var(--pine-dark); color: #fff; }
.btn-ghost     { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover     { border-color: var(--ink-3); color: var(--ink); }
.btn-danger    { background: var(--surface); border-color: var(--line); color: var(--ember-dark); }
.btn-danger:hover    { background: var(--ember-soft); border-color: var(--ember); }

.btn-sm   { height: 36px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn-icon { width: 40px; padding: 0; }
.btn-block { width: 100%; }

/* ---- 8. chips and badges -------------------------------- */

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 650;
    background: var(--line-soft); color: var(--ink-2);
}
.chip-poc     { background: var(--pine-soft);  color: var(--pine-dark); }
.chip-sme     { background: var(--ember-soft); color: var(--ember-dark); }
.chip-admin   { background: var(--ink);        color: #fff; }
.chip-public  { background: var(--moss-soft);  color: var(--moss-dark); }
.chip-private { background: var(--amber-soft); color: var(--amber-dark); }
.chip-outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }

/* ---- 9. forms ------------------------------------------- */

.field { margin-bottom: var(--s5); }
.field-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 7px; gap: var(--s2);
}
.field-label label { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.field-hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
.field-req { color: var(--ember); font-weight: 700; }

.input, .select, .textarea {
    width: 100%; min-height: 46px;
    border: 1px solid var(--line); background: var(--paper);
    border-radius: var(--r-sm); padding: var(--s3) var(--s4);
    font-size: var(--fs-md); color: var(--ink);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--ember); background: var(--surface);
    box-shadow: 0 0 0 3px rgba(224, 64, 43, .13);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }

.select {
    appearance: none; cursor: pointer; padding-right: var(--s6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237C7C71' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--s3) center;
}

.field-icon { position: relative; }
.field-icon .i {
    position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
    color: var(--ink-3); font-size: var(--fs-lg); pointer-events: none;
}
.field-icon .input { padding-left: var(--s7); }

.input-affix { position: relative; }
.affix-btn {
    position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--ink-3);
    cursor: pointer; padding: var(--s2); border-radius: 6px;
    display: flex; align-items: center;
}
.affix-btn:hover { background: var(--line-soft); color: var(--ink); }

.check { display: flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.check input[type="checkbox"], .check input[type="radio"] {
    width: 18px; height: 18px; margin: 0; accent-color: var(--ember); cursor: pointer; flex: none;
}

.caps-warn {
    display: none; align-items: center; gap: 6px; width: fit-content;
    margin-top: var(--s2); padding: 5px 9px; border-radius: 6px;
    font-size: var(--fs-xs); font-weight: 650;
    color: var(--amber-dark); background: var(--amber-soft);
}
.caps-warn.is-on { display: flex; }

.form-actions {
    display: flex; gap: var(--s3); flex-wrap: wrap;
    padding-top: var(--s4); border-top: 1px solid var(--line-soft);
}
.form-actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .form-actions .btn { flex: 0 0 auto; } }

/* ---- 10. alerts and flash messages ---------------------- */

.alert {
    display: flex; gap: var(--s3); align-items: flex-start;
    padding: var(--s3) var(--s4); border-radius: var(--r-md);
    border-left: 4px solid var(--ink-3); background: var(--line-soft);
    font-size: var(--fs-sm); margin-bottom: var(--s4);
}
.alert .i { font-size: var(--fs-lg); flex: none; margin-top: 1px; }
.alert-success { background: var(--moss-soft);  border-left-color: var(--moss);  color: var(--moss-dark); }
.alert-error   { background: var(--ember-soft); border-left-color: var(--ember); color: var(--ember-dark); }
.alert-warning { background: var(--amber-soft); border-left-color: var(--amber); color: var(--amber-dark); }
.alert-info    { background: var(--pine-soft);  border-left-color: var(--pine);  color: var(--pine-dark); }
.alert-dismiss { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .6; padding: 2px; }
.alert-dismiss:hover { opacity: 1; }

/* ---- 11. login ------------------------------------------ */

.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .login { grid-template-columns: 1.05fr 1fr; } }

/* The brand panel is decorative; on a phone it costs a screenful, so it is hidden */
.login-art { display: none; }
@media (min-width: 900px) {
    .login-art {
        display: flex; flex-direction: column; justify-content: space-between;
        position: relative; overflow: hidden;
        background: var(--ink); padding: var(--s7);
    }
    .login-art > * { position: relative; z-index: 2; }
    .login-art::after {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(160deg, rgba(26,26,23,.35) 0%, rgba(26,26,23,.88) 72%);
    }
    .login-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
    .login-art h2 { color: #fff; font-size: var(--fs-3xl); line-height: 1.22; margin-bottom: var(--s3); max-width: 15ch; }
    .login-art p  { color: rgba(255,255,255,.72); font-size: var(--fs-md); line-height: 1.65; max-width: 40ch; }
    .login-brandline {
        font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
        text-transform: uppercase; color: rgba(255,255,255,.6);
    }
    .login-stats { display: flex; gap: var(--s6); margin-top: var(--s6); }
    .login-stats span { display: block; font-size: var(--fs-2xl); font-weight: 700; color: #fff; letter-spacing: -.02em; }
    .login-stats small {
        font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em;
        text-transform: uppercase; color: rgba(255,255,255,.55);
    }
}

.login-side {
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s6) var(--s4);
}
@media (min-width: 560px) { .login-side { padding: var(--s7) var(--s6); } }

.login-form { width: 100%; max-width: 380px; }
.login-form > .logo { height: 32px; width: auto; margin-bottom: var(--s6); }
.login-form h1 { font-size: var(--fs-xl); margin-bottom: 6px; }
.login-form .sub { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--s6); }
.login-foot { text-align: center; margin-top: var(--s5); font-size: var(--fs-sm); color: var(--ink-3); }
.login-legal { margin-top: var(--s6); font-size: var(--fs-xs); color: var(--ink-3); text-align: center; line-height: 1.6; }
.login-langbar { display: flex; justify-content: center; margin-top: var(--s5); }

/* ---- 12. footer ----------------------------------------- */

.foot { border-top: 1px solid var(--line); background: var(--surface); padding: var(--s6) var(--s4); }
@media (min-width: 760px) { .foot { padding: var(--s6) var(--s5); } }

.foot-in {
    max-width: var(--page-max); margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--s6);
}
@media (min-width: 760px) { .foot-in { flex-direction: row; gap: var(--s7); } }

.foot img { height: 24px; width: auto; margin-bottom: var(--s3); }
.foot .copy { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--s6); }
@media (min-width: 760px) { .foot-cols { margin-left: auto; gap: var(--s7); } }
.foot-col a { display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; margin-bottom: 7px; }
.foot-col a:hover { color: var(--pine); }
.foot-col ul { list-style: none; }

/* ---- 13. error and maintenance pages -------------------- */

.centred {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s5) var(--s4); text-align: center;
}
.centred-inner { max-width: 44ch; }
.centred img.logo { height: 34px; width: auto; margin: 0 auto var(--s5); }
.centred .glyph {
    width: 60px; height: 60px; margin: 0 auto var(--s4);
    border-radius: 50%; background: var(--ember-soft); color: var(--ember);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl);
}
.centred h1 { font-size: var(--fs-xl); margin-bottom: var(--s3); }
.centred p  { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.centred pre {
    text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs);
    background: var(--line-soft); color: var(--ink-2);
    padding: var(--s3); border-radius: var(--r-sm);
    overflow-x: auto; margin-bottom: var(--s5); white-space: pre-wrap; word-break: break-word;
}

/* ---- 14. print ------------------------------------------ */

@media print {
    .nav, .foot, .offcanvas, .btn, .langbar, .skip-link { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid var(--line); }
    .page { padding: 0; max-width: none; }
}

/* ---- 15. home section cards ----------------------------- */

.section-grid {
    display: grid; gap: var(--s4);
    grid-template-columns: 1fr;
}
@media (min-width: 620px) { .section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .section-grid { grid-template-columns: repeat(3, 1fr); } }

.section-card {
    display: flex; gap: var(--s4); align-items: flex-start;
    padding: var(--s5);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.section-card h2 { font-size: var(--fs-lg); margin-bottom: 6px; }
.section-card p  { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s3); }
.section-card:not(.is-pending):hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.section-card.is-pending { opacity: .72; }

.section-icon {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-md);
    background: var(--pine-soft); color: var(--pine-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl);
}
.section-card:nth-child(2) .section-icon { background: var(--ember-soft); color: var(--ember-dark); }
.section-card:nth-child(3) .section-icon { background: var(--moss-soft);  color: var(--moss-dark); }
.section-card:nth-child(4) .section-icon { background: var(--amber-soft); color: var(--amber-dark); }

.flash-zone { margin-bottom: var(--s4); }
.nav-signout { display: flex; }

/* ---- 16. narrow-screen nav trimming --------------------- */
/* On a phone the nav holds only identity and the menu button.
   Language and sign-out live inside the off-canvas panel,
   where there is room to label them properly. */
@media (max-width: 899px) {
    .nav-right > .langbar,
    .nav-signout { display: none; }
}
.offcanvas-foot .langbar { width: fit-content; margin-bottom: var(--s2); }