/* QRDATA·STORE — vermilion fold sequence (origami instruction plate) */

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

:root {
    --vermilion: #d83c2e;      /* washi surface — large fields only */
    --vermilion-ink: #c0331f;  /* darkened for text/buttons, ≥4.5:1 on paper */
    --vermilion-wash: #e07a6e;
    --fold-white: #f7f3ee;
    --paper-grey: #e6e2da;
    --gold: #d4af37;
    --sumi: #1a1a1a;
    --note: #6d655a;           /* secondary text, warm-tinted */
    --hairline: #d8d2c6;
    --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
    --font-kanji: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
    --font-data: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { color-scheme: light; }

body {
    background: var(--fold-white);
    color: var(--sumi);
    font-family: var(--font-body);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* washi fiber — a few long, faint kozo strands, not a pixel grid */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(104deg, transparent 49.7%, rgba(120, 100, 70, 0.05) 50%, transparent 50.4%) 0 0 / 340px 220px,
        linear-gradient(23deg, transparent 49.8%, rgba(120, 100, 70, 0.04) 50%, transparent 50.3%) 60px 40px / 460px 300px,
        linear-gradient(166deg, transparent 49.8%, rgba(120, 100, 70, 0.045) 50%, transparent 50.3%) 130px 90px / 520px 380px;
    z-index: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- plate frame ---------- */

.plate {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(22px, 4vh, 44px) clamp(18px, 4vw, 44px) clamp(18px, 3vh, 30px);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 4vh, 40px);
}

/* ---------- masthead ---------- */

.masthead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hairline);
}

.mark { width: 34px; height: 34px; flex: none; }

.mark rect { fill: var(--vermilion); }
.mark path { stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; fill: none; }
.mark circle { fill: var(--gold); }

.masthead h1, .masthead .h1 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sumi);
    text-decoration: none;
}

.masthead .tagline {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--note);
    text-transform: uppercase;
}

/* ---------- sequence layout ---------- */

.sequence {
    display: grid;
    grid-template-columns: minmax(190px, 240px) 1fr minmax(210px, 260px);
    gap: clamp(20px, 3.5vw, 48px);
    flex: 1;
    align-items: start;
}

/* steps margin */

.steps { display: flex; flex-direction: column; gap: 4px; }

.step {
    display: grid;
    grid-template-columns: 14px 30px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
}

.step__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--note);
    background: transparent;
    align-self: center;
}

.step[data-active] .step__dot { background: var(--gold); border-color: var(--gold); }

.step[data-done] .step__dot { background: var(--paper-grey); border-color: var(--paper-grey); }

.step__no {
    font-size: 13px;
    font-weight: 600;
    color: var(--note);
    font-variant-numeric: tabular-nums;
}

.step[data-active] .step__no { color: var(--sumi); }

.step__name { display: flex; flex-direction: column; gap: 2px; }

.step__kanji { font-family: var(--font-kanji); font-size: 15px; color: var(--sumi); letter-spacing: 0.2em; }

.step__en {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--note);
}

.step[data-active] .step__en { color: var(--vermilion-ink); }

/* ---------- the sheet (drop zone) ---------- */

.sheetwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    justify-self: center;
    width: 100%;
    max-width: 470px;
}

.sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    border: 0;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

.sheet:focus-visible { outline: 2px solid var(--vermilion-ink); outline-offset: 6px; }

.sheet__paper {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 120% at 28% 22%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(140deg, transparent 49.6%, rgba(255, 255, 255, 0.10) 50%, transparent 50.5%) 0 0 / 260px 200px,
        linear-gradient(38deg, transparent 49.7%, rgba(255, 255, 255, 0.08) 50%, transparent 50.4%) 40px 60px / 300px 260px,
        var(--vermilion);
    box-shadow: 0 14px 34px rgba(140, 40, 24, 0.28), 0 3px 8px rgba(140, 40, 24, 0.18);
    transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease-out, transform 0.25s ease-out;
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
}

/* crease lines live inside the paper so they fold with it */
.sheet__paper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 49.65%, rgba(247, 243, 238, 0.55) 50%, transparent 50.35%),
        linear-gradient(-45deg, transparent 49.65%, rgba(247, 243, 238, 0.55) 50%, transparent 50.35%),
        linear-gradient(0deg, transparent 49.7%, rgba(247, 243, 238, 0.4) 50%, transparent 50.3%),
        linear-gradient(90deg, transparent 49.7%, rgba(247, 243, 238, 0.4) 50%, transparent 50.3%);
    opacity: 0.35;
    transition: opacity 0.2s ease-out;
}

.sheet__gold {
    position: absolute;
    top: 7%;
    left: 7%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 3px rgba(100, 70, 10, 0.35);
    transition: opacity 0.2s;
}

.sheet[data-state='armed'] .sheet__paper { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(140, 40, 24, 0.34), 0 6px 14px rgba(140, 40, 24, 0.2); }
.sheet[data-state='armed'] .sheet__paper::before { opacity: 1; }

/* fold states driven by upload progress */
.sheet[data-fold='1'] .sheet__paper { clip-path: polygon(0% 0%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%, 0% 50%); }
.sheet[data-fold='2'] .sheet__paper { clip-path: polygon(50% 0%, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0% 50%, 25% 25%); }
.sheet[data-fold='3'] .sheet__paper { clip-path: polygon(50% 10%, 72% 34%, 80% 50%, 72% 66%, 50% 90%, 28% 66%, 20% 50%, 28% 34%); }
.sheet[data-fold] .sheet__gold { opacity: 0; }

.sheet__caption {
    font-size: 15px;
    line-height: 1.65;
    color: var(--note);
    text-align: center;
    max-width: 40ch;
}

.sheet__caption strong { color: var(--sumi); font-weight: 600; }

.sheet__caption .pct { font-variant-numeric: tabular-nums; color: var(--vermilion-ink); font-weight: 600; }

.sheet[data-state='error'] + .sheet__caption { color: var(--vermilion-ink); }

/* ---------- retention margin ---------- */

.margin { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 28px); }

.notecard { border: 0; border-top: 2px solid var(--sumi); border-radius: 0; padding: 14px 0 0; min-inline-size: 0; }

.notecard legend { float: left; width: 100%; padding: 0; }

/* flex/grid children are BFCs — clear them under the floated legend */
.notecard legend ~ * { clear: both; }

.notecard .btn--primary { width: 100%; }

.notecard__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sumi);
    margin-bottom: 12px;
}

.keep { display: flex; flex-direction: column; }

.keep label {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 38px;
}

.keep label:hover { background: rgba(216, 60, 46, 0.06); }

.keep label:has(input:checked) { background: rgba(216, 60, 46, 0.07); }

.keep input { position: absolute; opacity: 0; }

.keep .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--note);
}

.keep input:checked + .dot { background: var(--gold); border-color: var(--sumi); }

.keep input:focus-visible + .dot { outline: 2px solid var(--vermilion-ink); outline-offset: 3px; }

.keep .keep__en { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }

.keep input:checked ~ .keep__en { color: var(--vermilion-ink); }

.keep .keep__kanji { font-family: var(--font-kanji); font-size: 14px; color: var(--note); }

.notecard__hint { font-size: 12.5px; line-height: 1.6; color: var(--note); margin-top: 10px; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--vermilion-ink);
    transition: background 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out;
}

.btn--primary {
    background: var(--vermilion-ink);
    color: #fff;
    box-shadow: 0 3px 10px rgba(192, 51, 31, 0.28);
}

.btn--primary:hover { background: #a92b19; border-color: #a92b19; }

.btn--ghost { background: transparent; color: var(--vermilion-ink); }

.btn--ghost:hover { background: rgba(216, 60, 46, 0.08); }

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

.btn:focus-visible { outline: 2px solid var(--sumi); outline-offset: 3px; }

.btn--copied { background: var(--sumi); border-color: var(--sumi); color: var(--fold-white); }

/* ---------- footer ---------- */

.colophon {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--note);
}

/* ---------- result plate ---------- */

.finish {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(300px, 400px) 1fr;
    gap: clamp(20px, 3.5vw, 48px);
    flex: 1;
    align-items: start;
}

/* the finished form — QR on its vermilion mat */

.qrmat {
    position: relative;
    background: var(--vermilion);
    padding: clamp(18px, 2.6vw, 30px);
    box-shadow: 0 16px 38px rgba(140, 40, 24, 0.26);
}

.qrmat::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, transparent 49.6%, rgba(255, 255, 255, 0.10) 50%, transparent 50.5%) 0 0 / 240px 190px,
        linear-gradient(38deg, transparent 49.7%, rgba(255, 255, 255, 0.08) 50%, transparent 50.4%) 30px 50px / 280px 240px;
    pointer-events: none;
}

.qrmat__gold {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--gold);
}

.qrcard {
    position: relative;
    background: #fff;
    padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) 12px;
    box-shadow: 0 6px 18px rgba(90, 25, 14, 0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qrcard svg { width: 100%; height: auto; display: block; }

.qrcard figcaption {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--sumi);
}

.qrcard figcaption .site { color: #7a736a; }

.qractions { display: flex; gap: 10px; margin-top: 14px; }

.qractions .btn { flex: 1; padding-inline: 8px; }

/* notes column */

.notes { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 24px); }

.fact { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }

.fact dt {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--note);
}

.fact dd { font-size: 15px; color: var(--sumi); overflow-wrap: anywhere; }

.fact dd.mono { font-family: var(--font-data); font-size: 13.5px; }

.linkline { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }

.linkline input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-data);
    font-size: 13.5px;
    color: var(--sumi);
    background: #fff;
    border: 1.5px solid var(--paper-grey);
    border-radius: 4px;
    padding: 11px 12px;
}

.linkline input:focus-visible { outline: 2px solid var(--vermilion-ink); outline-offset: 2px; }

/* countdown */

.count { display: inline-flex; align-items: flex-start; }

.count__cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.count__num {
    font-size: clamp(28px, 3.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--sumi);
}

.count__sep {
    font-size: clamp(28px, 3.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    color: var(--paper-grey);
    padding: 0 10px;
}

.count--soon .count__num { color: var(--vermilion-ink); }

.count__unit {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--note);
}

.eternal { display: flex; align-items: center; gap: 12px; }

.eternal .kanji { font-family: var(--font-kanji); font-size: 34px; color: var(--sumi); }

.eternal .en { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--sumi); }

/* downloads tally */

.tally { display: flex; align-items: baseline; gap: 12px; }

.tally__num { font-size: clamp(26px, 3vw, 34px); font-weight: 600; font-variant-numeric: tabular-nums; }

.tally__marks { font-family: var(--font-kanji); font-size: 19px; color: var(--vermilion-ink); letter-spacing: 0.12em; }

.notes__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.notes__actions .btn { flex: 1; min-width: 150px; }

/* ---------- admin ledger ---------- */

.plate--wide { max-width: 1240px; }

.masthead__logout { margin-left: 16px; }

.btn--small { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }

.btn--danger { border-color: var(--vermilion-ink); color: var(--vermilion-ink); }

.btn--danger:hover { background: var(--vermilion-ink); color: #fff; }

.banner {
    border-top: 2px solid var(--gold);
    padding: 12px 0;
    font-size: 14px;
    color: var(--sumi);
}

.statrow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
}

.stat__num {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sumi);
}

.searchline { display: flex; gap: 10px; margin-bottom: 18px; }

.searchline input {
    flex: 1;
    max-width: 380px;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--sumi);
    background: #fff;
    border: 1.5px solid var(--paper-grey);
    border-radius: 4px;
    padding: 10px 12px;
}

.searchline input:focus-visible { outline: 2px solid var(--vermilion-ink); outline-offset: 2px; }

.ledger { width: 100%; border-collapse: collapse; }

.ledger th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--note);
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 2px solid var(--sumi);
}

.ledger td {
    font-size: 14px;
    color: var(--sumi);
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}

.ledger .num { text-align: right; }

.ledger .mono { font-family: var(--font-data); font-size: 13px; }

.ledger .filecell { max-width: 340px; }

.ledger .filecell a {
    display: block;
    color: var(--sumi);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger .filecell a:hover { color: var(--vermilion-ink); }

.ledger .filecell .mono { color: var(--note); }

.ledger .is-expired td { color: var(--note); }

.endless-tag { font-weight: 600; }

.endless-tag span { font-family: var(--font-kanji); margin-right: 4px; }

.ledger .actions { display: flex; gap: 8px; justify-content: flex-end; padding-right: 0; }

.ledger__empty { padding: 40px 0; color: var(--note); font-size: 15px; }

.pager { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.pager__page { font-size: 13px; color: var(--note); font-variant-numeric: tabular-nums; }

.pager [aria-disabled='true'] { opacity: 0.4; pointer-events: none; }

.loginform {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(340px, 86vw);
    border-top: 2px solid var(--sumi);
    padding-top: 16px;
    text-align: left;
}

.loginform__input {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--sumi);
    background: #fff;
    border: 1.5px solid var(--paper-grey);
    border-radius: 4px;
    padding: 12px 14px;
}

.loginform__input:focus-visible { outline: 2px solid var(--vermilion-ink); outline-offset: 2px; }

.loginform__error { font-size: 13.5px; color: var(--vermilion-ink); }

@media (max-width: 900px) {
    .statrow { grid-template-columns: repeat(2, 1fr); }
    .ledger thead { display: none; }
    .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; }
    .ledger tr { border-bottom: 2px solid var(--sumi); padding: 12px 0; }
    .ledger td { border: 0; padding: 3px 0; }
    .ledger .num { text-align: left; }
    .ledger .actions { justify-content: flex-start; margin-top: 8px; }
}

/* ---------- error plates ---------- */

.errwrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

.blanksheet {
    position: relative;
    width: min(300px, 60vw);
    aspect-ratio: 1;
    background: #fdfbf7;
    border: 1px solid var(--paper-grey);
    box-shadow: 0 10px 26px rgba(90, 70, 40, 0.12);
}

/* crease scars of the unfolded sheet */
.blanksheet::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 49.6%, rgba(150, 130, 100, 0.28) 50%, transparent 50.4%),
        linear-gradient(-45deg, transparent 49.6%, rgba(150, 130, 100, 0.28) 50%, transparent 50.4%),
        linear-gradient(0deg, transparent 49.7%, rgba(150, 130, 100, 0.2) 50%, transparent 50.3%),
        linear-gradient(90deg, transparent 49.7%, rgba(150, 130, 100, 0.2) 50%, transparent 50.3%);
}

.seal {
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 74px;
    height: 74px;
    border-radius: 10px;
    background: var(--vermilion-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transform: rotate(-7deg);
    box-shadow: 0 4px 12px rgba(140, 40, 24, 0.35);
}

.errwrap h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.01em; }

.errwrap p { font-size: 15px; line-height: 1.7; color: var(--note); max-width: 46ch; }

/* ---------- motion ---------- */

/* one authored moment: the finished QR unfolds onto its mat */
.qrmat { animation: unfold 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes unfold {
    from { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: scale(0.92); }
    to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .qrmat { animation: none; }
    .sheet__paper { transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
    .sequence { grid-template-columns: 1fr; }
    .steps { flex-direction: row; overflow-x: auto; gap: 2px; padding-bottom: 4px; }
    .step { grid-template-columns: 10px auto; grid-template-rows: auto auto; padding: 8px 10px; flex: none; }
    .step__no { display: none; }
    .step__name { flex-direction: row; align-items: baseline; gap: 7px; }
    .step__kanji { font-size: 13px; }
    .sheetwrap { max-width: 420px; margin: 0 auto; }
    .margin { max-width: 420px; width: 100%; margin: 0 auto; }
    .finish { grid-template-columns: 1fr; }
    .finish .steps { order: 0; }
    .qrmat { max-width: 400px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
    .masthead { flex-wrap: wrap; }
    .masthead .tagline { margin-left: 48px; width: 100%; }
    .qractions { flex-direction: column; }
    .notes__actions { flex-direction: column; }
    .notes__actions .btn { width: 100%; }
    .colophon { flex-direction: column; gap: 4px; align-items: center; text-align: center; }
    .count__num { font-size: 26px; }
}