/* ============================================================
   Your Payroll Matters — tools portal (powered by Finnwood)
   Brand   teal #81dac8 · purple #948ae3 · deep teal ink #0e2f2a
   Display Baloo 2 · UI Inter · Data mono
   Token names kept from the Finnwood base theme; values retuned:
   "forest" = deep teal family, "moss" = YPM purple family.
   ============================================================ */

:root {
    --forest:#0e2f2a;
    --forest-1:#123832;
    --forest-2:#17443c;
    --forest-3:#245c52;
    --moss:#948ae3;
    --moss-bright:#a99bff;
    --moss-deep:#6c5bd4;
    --paper:#f4faf8;
    --paper-2:#e8f3ef;
    --paper-3:#dcece7;
    --ink:#142723;
    --ink-soft:#435953;
    --ink-faint:#71857f;
    --line:#d5e4df;
    --on-dark:#f1fbf8;
    --on-dark-soft:#bfe5dc;
    --on-dark-faint:#7fb9ac;

    --radius:14px;
    --radius-sm:10px;
    --radius-lg:22px;
    --pill:999px;

    --shadow-sm:0 1px 2px rgba(19,30,13,.05);
    --shadow:0 1px 2px rgba(19,30,13,.04), 0 14px 34px rgba(19,30,13,.10);
    --shadow-lg:0 30px 70px rgba(8,14,4,.50);

    --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display:'Baloo 2', 'Fraunces', Georgia, sans-serif;
    --font-mono:ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

    --maxw:1200px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }

body {
    font-family:var(--font-ui);
    color:var(--ink);
    background:var(--paper);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:0; background:none; }
img { display:block; max-width:100%; }
:focus-visible { outline:2.5px solid var(--moss); outline-offset:2px; border-radius:4px; }
::selection { background:rgba(148,138,227,.22); }

.eyebrow {
    font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--moss-deep); margin:0 0 6px;
}

/* ---------- type badges ---------- */
.badge {
    display:inline-flex; align-items:center; height:20px; padding:0 8px;
    font-size:10.5px; font-weight:700; letter-spacing:.06em;
    border-radius:6px; font-family:var(--font-mono);
    background:var(--paper-3); color:var(--ink-soft);
}
.badge--web   { background:rgba(148,138,227,.16); color:var(--moss-deep); }
.badge--pdf   { background:rgba(193,58,43,.12);  color:#b23a2c; }
.badge--image { background:rgba(43,97,150,.12);  color:#2b6196; }
.badge--text  { background:var(--paper-3);       color:var(--ink-soft); }
.badge--other { background:var(--paper-3);       color:var(--ink-faint); }

/* ============================================================
   LOGIN
   ============================================================ */
.login {
    position:relative; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px 20px; overflow:hidden;
    background:radial-gradient(120% 90% at 50% -10%, var(--forest-2), var(--forest) 62%);
}
.login__bg {
    position:absolute; inset:0; pointer-events:none;
    background:url('/brand/finnwood-mark.svg') no-repeat;
    background-position:right -120px bottom -150px;
    background-size:560px;
    opacity:.05; transform:rotate(-4deg);
}
.login__card {
    position:relative; z-index:1; width:100%; max-width:404px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--forest-1);
    border:1px solid var(--forest-3); border-radius:var(--radius-lg);
    padding:40px 38px 34px; box-shadow:var(--shadow-lg);
}
.login__card::before {
    content:""; display:block; width:46px; height:4px; border-radius:4px;
    background:var(--moss); margin-bottom:26px;
}
.login__logo { height:64px; width:auto; margin-bottom:26px; }
.login__eyebrow {
    font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--moss); margin:0 0 10px;
}
.login__title {
    font-family:var(--font-display); font-optical-sizing:auto; font-weight:500;
    font-size:32px; line-height:1.05; letter-spacing:-.01em;
    color:var(--on-dark); margin:0 0 10px;
}
.login__sub { color:var(--on-dark-soft); font-size:14px; margin:0 0 26px; }
.login__form { display:flex; flex-direction:column; }
.login__label {
    font-size:12px; font-weight:600; color:var(--on-dark-soft);
    letter-spacing:.02em; margin-bottom:8px;
}
.login__input {
    height:48px; border-radius:12px; border:1.5px solid var(--forest-3);
    background:#0c2420; color:var(--on-dark);
    padding:0 15px; font-size:15px; font-family:var(--font-ui);
    transition:border-color .15s, box-shadow .15s;
}
.login__input::placeholder { color:#3f5a53; letter-spacing:.1em; }
.login__input:focus { outline:none; border-color:var(--moss); box-shadow:0 0 0 4px rgba(148,138,227,.18); }
.login__input.is-error { border-color:#c2503f; box-shadow:0 0 0 4px rgba(194,80,63,.16); }
.login__error {
    color:#f0a89a; font-size:13px; margin:10px 0 0;
    display:flex; gap:7px; align-items:center;
}
.login__btn {
    margin-top:22px; height:50px; border-radius:12px;
    background:var(--moss); color:#fff;
    font-size:15px; font-weight:700; letter-spacing:.01em;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    transition:background .15s, transform .05s;
}
.login__btn:hover { background:var(--moss-bright); }
.login__btn:active { transform:translateY(1px); }
.login__foot {
    position:relative; z-index:1; margin-top:26px;
    color:var(--on-dark-faint); font-size:12px; letter-spacing:.03em;
}

/* ============================================================
   SHELL (signed-in pages)
   ============================================================ */
.shell { min-height:100dvh; display:flex; flex-direction:column; background:var(--paper); }

.topbar {
    height:64px; flex:0 0 auto; background:var(--forest);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(16px, 4vw, 34px); position:sticky; top:0; z-index:20;
}
.topbar__brand { display:flex; align-items:center; }
.topbar__brand img { height:40px; width:auto; }
.topbar__nav { display:flex; align-items:center; gap:18px; }
/* The YPM header is a light teal, so topbar text sits dark (not the on-dark set). */
.topbar__tag {
    color:var(--forest-1); font-size:12.5px; font-weight:500; letter-spacing:.04em;
    padding-right:18px; border-right:1px solid rgba(14,47,42,.22);
}
.topbar__logoutform { margin:0; }
.topbar__logout {
    color:var(--forest); font-size:13px; font-weight:700;
    border:1.4px solid rgba(14,47,42,.28); border-radius:var(--pill);
    padding:8px 16px; transition:border-color .15s, color .15s;
}
.topbar__logout:hover { border-color:var(--moss-deep); color:var(--moss-deep); }

.content { flex:1 1 auto; width:100%; }
.content__inner {
    max-width:var(--maxw); margin:0 auto;
    padding:clamp(26px, 5vw, 46px) clamp(16px, 4vw, 34px) 60px;
}

.sitefoot {
    flex:0 0 auto; border-top:1px solid var(--line); background:var(--paper);
    max-width:var(--maxw); margin:0 auto; width:100%;
    padding:18px clamp(16px, 4vw, 34px);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    color:var(--ink-faint); font-size:12px; letter-spacing:.02em;
}

/* ---------- gallery head ---------- */
.gallery__head {
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-bottom:30px; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.gallery__title {
    font-family:var(--font-display); font-optical-sizing:auto; font-weight:500;
    font-size:clamp(28px, 4vw, 40px); line-height:1; letter-spacing:-.015em;
    color:var(--ink); margin:0;
}
.gallery__tools { display:flex; align-items:center; gap:16px; }
.search { position:relative; display:flex; align-items:center; }
.search svg {
    position:absolute; left:13px; width:16px; height:16px;
    color:var(--ink-faint); pointer-events:none;
}
.search input {
    height:42px; width:230px; max-width:46vw;
    border:1.5px solid var(--line); border-radius:var(--pill);
    background:#fff; padding:0 16px 0 38px;
    font-size:14px; font-family:var(--font-ui); color:var(--ink);
    transition:border-color .15s, box-shadow .15s;
}
.search input:focus { outline:none; border-color:var(--moss); box-shadow:0 0 0 4px rgba(148,138,227,.14); }
.count {
    font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono);
    white-space:nowrap; letter-spacing:.02em;
}

/* ---------- grid + cards ---------- */
.grid {
    display:grid; gap:24px;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.card {
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-sm);
    transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfd4c0; }
.card:focus-visible { transform:translateY(-4px); box-shadow:var(--shadow); }

.card__thumb {
    position:relative; width:100%; aspect-ratio:16 / 10; overflow:hidden;
    background:linear-gradient(135deg, var(--paper-2), var(--paper-3));
    border-bottom:1px solid var(--line);
}
/* the live miniature: width/height/scale are set by portal.js, revealed once scaled */
.thumb__frame {
    position:absolute; top:0; left:0; border:0;
    transform-origin:0 0; pointer-events:none; background:#fff;
    opacity:0; transition:opacity .25s ease;
}
.thumb__shade { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(19,30,13,.04); }
.thumb__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb__icon { position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-faint); }
.thumb__icon svg { width:44px; height:44px; opacity:.5; }

.card__open {
    position:absolute; left:12px; bottom:12px;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--forest); color:var(--on-dark);
    font-size:12px; font-weight:600; letter-spacing:.01em;
    padding:7px 12px; border-radius:var(--pill);
    opacity:0; transform:translateY(6px);
    transition:opacity .18s, transform .18s;
}
.card__open svg { width:14px; height:14px; }
.card:hover .card__open, .card:focus-visible .card__open { opacity:1; transform:translateY(0); }

.card__meta { position:relative; display:flex; flex-direction:column; gap:5px; padding:14px 16px 16px; }
.card__meta .badge { position:absolute; right:16px; top:14px; }
.card__name {
    font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
    padding-right:54px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__sub { font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); letter-spacing:.01em; }

/* ---------- empty / not found ---------- */
.empty {
    text-align:center; max-width:540px; margin:40px auto;
    padding:48px 28px; border:1.5px dashed var(--line); border-radius:var(--radius-lg);
    background:#fff;
}
.empty__mark { width:62px; height:62px; margin:0 auto 22px; }
.empty h2 { font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 10px; color:var(--ink); }
.empty p { color:var(--ink-soft); font-size:14.5px; margin:0 auto 8px; max-width:44ch; }
.empty code { font-family:var(--font-mono); font-size:13px; background:var(--paper-2); padding:2px 7px; border-radius:6px; color:var(--ink); }
.empty__path { font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-top:14px; word-break:break-all; }
.empty a { color:var(--moss-deep); font-weight:600; }

/* ============================================================
   VIEWER (preview)
   ============================================================ */
.viewer { height:100dvh; display:flex; flex-direction:column; background:var(--paper-2); }
.viewer__bar {
    height:56px; flex:0 0 auto; background:var(--forest);
    display:flex; align-items:center; gap:16px; padding:0 clamp(12px, 3vw, 22px);
}
.viewer__back {
    display:inline-flex; align-items:center; gap:7px;
    color:var(--on-dark); font-size:13.5px; font-weight:600;
    padding:8px 14px 8px 11px; border-radius:var(--pill);
    border:1.4px solid var(--forest-3); white-space:nowrap;
    transition:border-color .15s, color .15s;
}
.viewer__back svg { width:16px; height:16px; }
.viewer__back:hover { border-color:var(--moss); color:var(--moss); }
.viewer__id { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.viewer__name {
    color:var(--on-dark); font-size:13.5px; font-weight:500; font-family:var(--font-mono);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viewer__actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.vbtn {
    color:#fff; background:var(--moss);
    font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:var(--pill);
    white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
}
.vbtn:hover { background:var(--moss-bright); }
.vbtn--ghost { background:transparent; color:var(--on-dark); border:1.4px solid var(--forest-3); }
.vbtn--ghost:hover { border-color:var(--moss); color:var(--moss); }

.viewer__stage { flex:1 1 auto; position:relative; overflow:hidden; }
.viewer__frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; }
.viewer__imgwrap { position:absolute; inset:0; display:grid; place-items:center; padding:24px; overflow:auto; }
.viewer__img { max-width:100%; max-height:100%; border-radius:8px; background:#fff; box-shadow:var(--shadow); }
.viewer__missing {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:24px;
}
.viewer__missing h1 { font-family:var(--font-display); font-weight:500; font-size:26px; margin:0 0 8px; color:var(--ink); }
.viewer__missing p { color:var(--ink-soft); font-size:14.5px; margin:0; }
.viewer__missing a { color:var(--moss-deep); font-weight:600; }

/* ============================================================
   Responsive + motion
   ============================================================ */
@media (max-width:640px) {
    .gallery__head { flex-direction:column; align-items:flex-start; }
    .gallery__tools { width:100%; justify-content:space-between; }
    .search input { width:100%; max-width:none; }
    .topbar__tag { display:none; }
    .viewer__name { display:none; }
    .vbtn { padding:8px 11px; }
}

@media (prefers-reduced-motion:reduce) {
    * { transition:none !important; animation:none !important; }
}

/* ============================================================
   Finnwood Transfer — app surfaces (extends the tokens above)
   ============================================================ */

/* Brand hooks: client overrides --brand-accent / --brand-header in <head>. */
.topbar { background: var(--brand-header, var(--forest)); }
.topbar--public { justify-content:flex-start; }
.topbar__wordmark {
    color:#fff; font-family:var(--font-display); font-weight:600;
    font-size:18px; letter-spacing:-.01em;
}
.content__inner--narrow { max-width:780px; }

/* ---------- buttons ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-ui); font-weight:600; font-size:14.5px; line-height:1;
    padding:12px 20px; border-radius:var(--radius-sm); border:1.5px solid transparent;
    transition:background .15s, border-color .15s, color .15s, transform .05s;
    text-decoration:none; white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn--sm { padding:8px 14px; font-size:13px; }
.btn--primary { background:var(--brand-accent, var(--moss-deep)); color:#fff; }
.btn--primary:hover { background:color-mix(in srgb, var(--brand-accent, var(--moss-deep)) 86%, #000); }
.btn--primary:disabled { opacity:.45; cursor:not-allowed; }
.btn--ghost { background:#fff; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover { border-color:var(--brand-accent, var(--moss-deep)); color:var(--moss-deep); }
.btn--danger-ghost { background:#fff; border-color:#e7c9c2; color:#a23b28; }
.btn--danger-ghost:hover { border-color:#a23b28; }
.btn.is-copied { background:var(--moss); color:#fff; border-color:transparent; }

/* ---------- page headings ---------- */
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.pagehead__title { font-family:var(--font-display); font-optical-sizing:auto; font-weight:500;
    font-size:clamp(26px, 4vw, 38px); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:0; }
.muted { color:var(--ink-faint); font-size:14.5px; }
.dot { color:var(--ink-faint); }
.backrow { margin-bottom:18px; }
.backlink { color:var(--ink-soft); font-size:13.5px; font-weight:500; text-decoration:none; }
.backlink:hover { color:var(--moss-deep); }

/* ---------- request list ---------- */
.reqlist { display:flex; flex-direction:column; gap:12px; }
.reqrow { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 20px; box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.reqrow:hover { box-shadow:var(--shadow); }
.reqrow__main { text-decoration:none; flex:1 1 320px; min-width:0; }
.reqrow__title { font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--ink);
    margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reqrow__meta { color:var(--ink-faint); font-size:13px; display:flex; gap:8px; flex-wrap:wrap; }
.reqrow__side { display:flex; align-items:center; gap:10px; }

.pill { font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--pill); letter-spacing:.01em; }
.pill--on { background:rgba(148,138,227,.16); color:var(--moss-deep); }
.pill--off { background:var(--paper-3); color:var(--ink-faint); }

/* ---------- empty / notice ---------- */
.emptybox { text-align:center; padding:56px 28px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.emptybox--soft { background:var(--paper-2); border-style:dashed; box-shadow:none; }
.emptybox h2 { font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 8px; }
.emptybox p { color:var(--ink-soft); font-size:15px; max-width:420px; margin:0 auto 20px; }
.emptybox__mark { width:46px; height:46px; margin:0 auto 18px; border-radius:13px;
    background:radial-gradient(120% 120% at 30% 20%, var(--moss-bright), var(--moss-deep)); opacity:.9; }

.notice { text-align:center; padding:48px 28px; max-width:560px; margin:8vh auto 0; }
.notice--center { margin-top:12vh; }
.notice__mark { width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
    background:var(--paper-3); position:relative; }
.notice__mark::after { content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px;
    border-radius:50%; border:2.5px solid var(--ink-faint); border-top-color:transparent; }
.notice__title { font-family:var(--font-display); font-weight:500; font-size:clamp(24px,4vw,32px);
    margin:0 0 12px; letter-spacing:-.01em; }
.notice__text { color:var(--ink-soft); font-size:15.5px; line-height:1.55; margin:0 auto 22px; max-width:440px; }
.pagepad { padding:6vh 20px; }

/* ---------- forms ---------- */
.formwrap { max-width:600px; }
.formwrap__lead { margin:10px 0 26px; line-height:1.55; }
.form { display:flex; flex-direction:column; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field--inline { max-width:240px; }
.field__label { font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.field__opt { font-weight:400; color:var(--ink-faint); }
.field__input { font-family:var(--font-ui); font-size:15px; color:var(--ink); background:#fff;
    border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.field__input:focus { outline:none; border-color:var(--brand-accent, var(--moss-deep));
    box-shadow:0 0 0 4px rgba(148,138,227,.16); }
.field__input--area { resize:vertical; min-height:84px; }
.field__input--date { max-width:220px; }
.form__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.validation-message { color:#a23b28; font-size:13px; }

.successmark { width:46px; height:46px; border-radius:50%; margin-bottom:18px;
    background:var(--moss); position:relative; }
.successmark::after { content:""; position:absolute; left:16px; top:9px; width:9px; height:18px;
    border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }

.linkbox { display:flex; gap:10px; margin:8px 0 22px; }
.linkbox__input { flex:1 1 auto; font-family:var(--font-mono); font-size:13.5px; color:var(--ink-soft);
    background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }

/* ---------- send-to-client (shown once SMTP is configured) ---------- */
.sendbox { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:18px 20px; margin:0 0 26px; }
.sendbox__title { font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 4px; }
.sendbox__sub { color:var(--ink-faint); font-size:13px; margin:0 0 14px; }
.sendrow { display:flex; gap:10px; flex-wrap:wrap; }
.sendrow .field__input { flex:1 1 260px; }
.sentnote { display:inline-flex; align-items:center; gap:8px; margin-top:12px;
    color:var(--moss-deep); font-size:13.5px; font-weight:600; }

/* ---------- request detail ---------- */
.detailhead { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.detailhead__meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
    color:var(--ink-soft); font-size:14px; }
.detailhead__actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.inlineform { margin:0; }
.callout { background:var(--paper-2); border-left:3px solid var(--brand-accent, var(--moss-deep));
    border-radius:8px; padding:14px 16px; color:var(--ink-soft); font-size:14.5px; line-height:1.5; margin:0 0 26px; }
.folderhead { display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px;
    text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:26px 0 12px; }
.folderhead__icon { width:15px; height:12px; border-radius:2px 3px 3px 3px; background:var(--paper-3);
    border-top-left-radius:0; position:relative; }
.folderhead__icon::before { content:""; position:absolute; top:-3px; left:0; width:7px; height:3px;
    border-radius:2px 2px 0 0; background:var(--paper-3); }

/* ---------- file cards ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.filecard { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.filecard:hover { box-shadow:var(--shadow); }
.filecard--blocked { opacity:.85; }
.filecard__thumb { aspect-ratio:4/3; background:var(--paper-2); display:block; }
.filethumb__img { display:block; width:100%; height:100%; background-size:cover; background-position:center;
    cursor:zoom-in; }
.filethumb__icon { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--ink-faint);
    text-decoration:none; }
.filethumb__icon--warn { color:#a23b28; background:rgba(162,59,40,.06); }
.filecard__body { padding:11px 13px 14px; }
.filecard__name { font-size:13.5px; font-weight:500; color:var(--ink); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.filecard__sub { font-size:12px; color:var(--ink-faint); display:flex; gap:6px; margin-top:3px; }
.filecard__dl { position:absolute; top:10px; right:10px; background:rgba(19,30,13,.72); color:#fff;
    font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:var(--pill); text-decoration:none;
    opacity:0; transition:opacity .15s; backdrop-filter:blur(2px); }
.filecard:hover .filecard__dl { opacity:1; }
.warn { color:#a23b28; font-weight:500; }

/* ---------- public upload ---------- */
.uphead { margin-bottom:24px; }
.uphead__msg { color:var(--ink-soft); font-size:15.5px; line-height:1.55; margin:12px 0 0;
    padding:14px 16px; background:var(--paper-2); border-radius:10px; }
.uphead__hint { color:var(--ink-faint); font-size:13.5px; margin:14px 0 0; }

.dropzone { border:2px dashed var(--line); border-radius:var(--radius-lg); background:#fff;
    padding:40px 24px; text-align:center; transition:border-color .15s, background .15s; }
.dropzone.is-drag { border-color:var(--brand-accent, var(--moss-deep)); background:rgba(148,138,227,.05); }
.dropzone__mark { width:48px; height:40px; margin:0 auto 16px; border-radius:8px; position:relative;
    background:var(--paper-2); border:2px solid var(--paper-3); }
.dropzone__mark::after { content:""; position:absolute; left:50%; top:54%; width:14px; height:14px;
    border:solid var(--moss-deep); border-width:3px 3px 0 0; transform:translate(-50%,-50%) rotate(-45deg); }
.dropzone__lead { font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 4px; color:var(--ink); }
.dropzone__or { color:var(--ink-faint); font-size:13px; margin:6px 0 14px; }
.dropzone__btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.uploadlist { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ulrow { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; }
.ulrow__top { display:flex; align-items:center; gap:10px; }
.ulrow__name { flex:1 1 auto; font-size:14px; font-weight:500; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ulrow__size { font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.ulrow__x { width:24px; height:24px; border-radius:50%; color:var(--ink-faint); font-size:17px; line-height:1;
    background:var(--paper-2); }
.ulrow__x:hover { background:var(--paper-3); color:var(--ink); }
.ulrow__x:disabled { opacity:.3; cursor:default; }
.ulrow__track { height:6px; border-radius:4px; background:var(--paper-3); margin:10px 0 6px; overflow:hidden; }
.ulrow__fill { height:100%; width:0; background:var(--brand-accent, var(--moss-deep)); transition:width .2s ease; }
.ulrow__status { font-size:12px; color:var(--ink-faint); }
.ulrow.is-done .ulrow__fill { background:var(--moss); }
.ulrow.is-done .ulrow__status { color:var(--moss-deep); }
.ulrow.is-blocked .ulrow__fill { background:#a23b28; }
.ulrow.is-blocked .ulrow__status { color:#a23b28; }

.uploadbar { margin-top:18px; }
.uploadbar__track { height:8px; border-radius:5px; background:var(--paper-3); overflow:hidden; }
.uploadbar__fill { height:100%; width:0; background:var(--brand-accent, var(--moss-deep)); transition:width .25s ease; }
.uploadbar__fill.is-error { background:#a23b28; }
.uploadbar__label { font-size:13px; color:var(--ink-soft); margin-top:8px; font-variant-numeric:tabular-nums; }

.uploadactions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.uploaddone { text-align:center; padding:36px 24px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; }
.uploaddone h2 { font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 8px; }
.uploaddone .muted { max-width:380px; margin:0 0 18px; }

.prevbox { margin-top:26px; border-top:1px solid var(--line); padding-top:18px; }
.prevbox summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft); }
.prevlist { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; }
.prevlist li { display:flex; align-items:center; gap:12px; font-size:13.5px; }
.prevlist__name { flex:1 1 auto; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prevlist__size { color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.prevlist__dl { color:var(--moss-deep); font-weight:600; text-decoration:none; }
.prevlist__dl:hover { text-decoration:underline; }

/* ---------- footer Finnwood mark ---------- */
.finnmark { display:inline-flex; align-items:center; gap:8px; text-decoration:none; opacity:.85;
    transition:opacity .15s; }
.finnmark:hover { opacity:1; }
.finnmark__by { font-size:11px; color:var(--ink-faint); letter-spacing:.03em; }
.finnmark img { height:16px; width:auto; display:block; }

/* ---------- lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(8,12,4,.88); display:flex; flex-direction:column; }
.lightbox__bar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.lightbox__name { color:var(--on-dark); font-size:14px; font-weight:500; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.lightbox__close { color:var(--on-dark); font-size:13px; font-weight:600; border:1.4px solid rgba(255,255,255,.25);
    border-radius:var(--pill); padding:7px 15px; }
.lightbox__close:hover { border-color:var(--moss); color:var(--moss); }
.lightbox__stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:0 20px 28px; }
.lightbox__img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:var(--shadow-lg); }

@media (max-width:560px) {
    .pagehead { align-items:flex-start; }
    .reqrow__side { width:100%; justify-content:flex-start; }
    .detailhead__actions { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    * { transition:none !important; }
}

/* ============================================================
   Upload page — auto-upload, two-column layout, received panel
   ============================================================ */

/* Public layout is wider now; keep the upload page comfortably centred. */
.content__inner--public { max-width: var(--maxw); }
.uphead, .uploadgrid { max-width: 1040px; margin-left: auto; margin-right: auto; }

.uploadgrid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
.uploadmain { min-width: 0; }
@media (min-width: 900px) {
    .uploadgrid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; }
    .received { position: sticky; top: 82px; }   /* clears the 64px top bar */
}

/* In-progress list: cap height so a large batch can't push the page off-screen. */
.uploadlist { max-height: 320px; overflow-y: auto; margin-top: 16px; }
.uploadlist:empty { display: none; margin: 0; }
.ulrow.is-error .ulrow__fill { background: #a23b28; }
.ulrow.is-error .ulrow__status { color: #a23b28; }

/* Status line (auto-upload progress / result / errors). */
.uploadstatus {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
    font-size: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
}
.uploadstatus.is-info { background: var(--paper-2); color: var(--ink-soft); }
.uploadstatus.is-ok   { background: rgba(148,138,227,.12); color: var(--moss-deep); }
.uploadstatus.is-error{ background: rgba(162,59,40,.08); color: #a23b28; }
.uploadstatus .btn { margin-left: auto; }

/* "Files received" panel. */
.received {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 18px 18px 14px;
}
.received__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.received__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0; }
.received__count {
    font-size: 12.5px; font-weight: 600; color: var(--moss-deep);
    background: rgba(148,138,227,.14); border-radius: var(--pill);
    padding: 3px 10px; min-width: 24px; text-align: center;
}
.received__empty { color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; margin: 10px 2px 6px; }
.received__list {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 60vh; overflow-y: auto;
}
.rcv {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.rcv__info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.rcv__name { font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcv__size { font-size: 11.5px; color: var(--ink-faint); }
.rcv__actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.rcv__dl, .rcv__rm {
    font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: var(--pill);
    text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1;
}
.rcv__dl { color: var(--moss-deep); background: rgba(148,138,227,.12); }
.rcv__dl:hover { background: rgba(148,138,227,.22); }
.rcv__rm { color: #a23b28; background: #fff; border-color: #e7c9c2; }
.rcv__rm:hover { background: #a23b28; color: #fff; border-color: #a23b28; }
.rcv__rm:disabled { opacity: .5; cursor: default; }
.rcv--new { animation: rcvIn .25s ease; }
@keyframes rcvIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rcv--new { animation: none; } }

/* ============================================================
   Staff tools page
   ============================================================ */

/* Nav link in the (dark) internal top bar. */
.topbar__link {
    color: var(--forest); font-size: 13px; font-weight: 700; text-decoration: none;
    padding: 8px 4px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.topbar__link:hover { color: var(--moss-deep); }

.toolintro { max-width: 720px; margin: -8px 0 26px; line-height: 1.55; }

.toolgrid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 820px) { .toolgrid { grid-template-columns: 1fr 1fr; gap: 22px; } }

.toolcard {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 22px 22px 20px; display: flex; flex-direction: column;
}
.toolcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.toolcard__badge {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--moss-deep); background: rgba(148,138,227,.14); border-radius: var(--pill); padding: 4px 11px;
}
.toolcard__title { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 0; }
.toolcard__desc { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.toolcard__desc code {
    font-family: var(--font-mono); font-size: 12px; background: var(--paper-2);
    padding: 1px 5px; border-radius: 5px; color: var(--ink-soft);
}

.tooldrop {
    margin-top: auto; border: 2px dashed var(--line); border-radius: var(--radius);
    background: var(--paper); padding: 22px 18px; text-align: center;
    transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tooldrop.is-drag { border-color: var(--brand-accent, var(--moss-deep)); background: rgba(148,138,227,.06); }
.tooldrop.is-busy { opacity: .6; pointer-events: none; }
.tooldrop__lead { margin: 0; font-size: 14px; color: var(--ink-faint); }

.toolstatus { margin-top: 14px; font-size: 13.5px; padding: 10px 13px; border-radius: var(--radius-sm); line-height: 1.45; }
.toolstatus.is-info  { background: var(--paper-2); color: var(--ink-soft); }
.toolstatus.is-ok    { background: rgba(148,138,227,.12); color: var(--moss-deep); }
.toolstatus.is-error { background: rgba(162,59,40,.08); color: #a23b28; }

/* ============================================================
   FinnTools — launcher + version badge + tool field
   ============================================================ */

.topbar__ver {
    margin-left: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--forest-2);
    border: 1px solid rgba(14,47,42,.22);
    border-radius: var(--pill);
    padding: 2px 8px;
    line-height: 1;
}

/* Launcher landing */
.launchhead { margin: 6px 0 26px; }
.launchhead__title {
    font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500;
    font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin: 6px 0 8px; color: var(--ink);
}
.launchhead__sub { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

.launchgrid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px)  { .launchgrid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1040px) { .launchgrid { grid-template-columns: 1fr 1fr; gap: 22px; } }

.launchcard {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 26px 24px; box-shadow: var(--shadow-sm);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.launchcard:hover {
    transform: translateY(-2px); box-shadow: var(--shadow);
    border-color: var(--brand-accent, var(--moss-deep));
}
.launchcard__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(148,138,227,.12); color: var(--moss-deep); margin-bottom: 16px;
}
.launchcard__icon svg { width: 24px; height: 24px; }
.launchcard__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: 0 0 7px; }
.launchcard__desc { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }

/* Extra text input on a tool card (e.g. reorder page order) */
.toolfield { display: block; margin: 0 0 14px; }
.toolfield__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.toolfield__input {
    width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 14px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--ink);
}
.toolfield__input:focus {
    outline: none; border-color: var(--brand-accent, var(--moss-deep));
    box-shadow: 0 0 0 3px rgba(148,138,227,.14); background: #fff;
}
.js-toolgo { margin-bottom: 4px; }
.js-toolgo:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   FinnTools — admin (super-user) views
   ============================================================ */

.sectionhead {
    font-family: var(--font-display); font-weight: 500; font-size: 18px;
    margin: 30px 0 12px; color: var(--ink);
}

/* Summary stat cards */
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 680px)  { .statgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .statgrid { grid-template-columns: repeat(6, 1fr); } }
.statcard {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 16px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px;
}
.statcard__num { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--ink); line-height: 1.1; }
.statcard__label { font-size: 12px; color: var(--ink-faint); }

/* Admin tables */
.admintable { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.admintable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admintable th, .admintable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admintable thead th { background: var(--paper-2); color: var(--ink-soft); font-weight: 600; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.admintable tbody tr:last-child td { border-bottom: none; }
.admintable td.num, .admintable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.admintable .nowrap { white-space: nowrap; }
.admintable__detail td { padding-top: 0; }
.admintable__detail details { margin: 2px 0 6px; }
.admintable__detail summary { cursor: pointer; color: var(--moss-deep); font-size: 12.5px; }

.who { display: block; font-weight: 600; color: var(--ink); }
.who__email { display: block; font-size: 12px; color: var(--ink-faint); }

.filelist { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.filelist li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filelist__name { flex: 1 1 240px; color: var(--ink-soft); word-break: break-all; }
.filelist__size { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 12.5px; }
.filelist__link { color: var(--moss-deep); font-size: 13px; text-decoration: none; font-weight: 500; }
.filelist__link:hover { text-decoration: underline; }

/* Period selector */
.periodbar { display: inline-flex; gap: 4px; background: var(--paper-2); border-radius: var(--pill); padding: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.periodbar__btn { padding: 6px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.periodbar__btn:hover { color: var(--ink); }
.periodbar__btn.is-active { background: #fff; color: var(--forest); box-shadow: var(--shadow-sm); }

/* 14-day activity strip */
.daystrip { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 8px 2px 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.daystrip__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.daystrip__bar { width: 60%; min-height: 2px; background: var(--moss); border-radius: 3px 3px 0 0; }
.daystrip__lbl { font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Tool pills + outcome badges */
.toolpill { display: inline-flex; align-items: center; gap: 5px; background: var(--paper-2); border-radius: var(--pill); padding: 2px 9px; margin: 0 5px 5px 0; font-size: 12px; color: var(--ink-soft); }
.toolpill strong { color: var(--ink); }
.outcome { display: inline-block; padding: 2px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; }
.outcome--success { background: rgba(148,138,227,.14); color: var(--moss-deep); }
.outcome--partial { background: rgba(196,142,10,.16); color: #9a6b04; }
.outcome--failed  { background: rgba(162,59,40,.10); color: #a23b28; }