/* ── Focus Service — Stylesheet ─────────────────────────────────────────── */

:root {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-hover: #f0f2f5;
    --border: #d8dce6;
    --text: #1e2a3a;
    --text-muted: #6b7a8d;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #16a34a;
    --warning: #d97706;
    --error: #dc2626;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}

.container.narrow {
    max-width: 480px;
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.center-card {
    text-align: center;
    margin-top: 15vh;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

h2 {
    font-size: 1.2rem;
    margin: 24px 0 12px;
}

.subtitle {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}

code {
    background: #e8ecf2;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    margin-top: 16px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select, textarea {
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 12px;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
    margin-top: 8px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--border);
    color: var(--text);
}
.btn-secondary:hover {
    background: var(--surface-hover);
}

/* The Google sign-in button.
   ---------------------------
   People recognise this button before they read it, so it has to look the way
   it looks everywhere else: the four-colour G, white, a grey hairline border,
   the words "Sign in with Google". A plain outlined button with our own
   wording reads as a link to something else, and someone who cannot find the
   familiar button assumes Google sign-in is not offered.

   Google's own guidance sets the colours and the wording; #747775 is the
   border it specifies for the light button, which is why it is a literal here
   and not one of our tokens. */
.btn-google {
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #747775;
    /* .btn sets no border, so take the border off the padding rather than
       letting this button stand 2px taller than the filled one below it. */
    padding: 9px 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-google:hover {
    background: #f7f8f8;
    border-color: #5f6061;
}

/* Fixed, not scaled with the text: the mark is artwork, and Google's guidance
   sizes it against the button rather than the font. */
.btn-google svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* A button that fills the column it is in. On a sign-in form a button only as
   wide as its words looks like an afterthought under a full-width field. */
.btn-wide {
    display: block;
    width: 100%;
}

/* A button that reads as a link. Used for "Sign out", which has to be a form
   post rather than a link — signing out on a GET means any image tag on any
   page can sign you out — but should not look like a thing to press by
   accident next to the real buttons.

   Everything here is an override: .btn gives it padding, a weight and a
   top margin that a run of text must not have. */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary);
    font-size: inherit;
    font-weight: 500;
    text-decoration: underline;
}
.btn-link:hover {
    color: var(--primary-hover);
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-danger {
    background: var(--error);
    color: white;
}

/* ── Flash messages ────────────────────────────────────────────────────── */

.flash-messages {
    margin-bottom: 16px;
}

.flash {
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.flash-error {
    background: #fef2f2;
    border: 1px solid var(--error);
    color: #991b1b;
}

.flash-success {
    background: #f0fdf4;
    border: 1px solid var(--success);
    color: #166534;
}

/* The way out, under the browser's own refusal. A block of its own and in
   the ordinary text colour, because the red sentence above it is the error
   and this is the thing to DO about it — run together they read as more
   bad news. */
.passkey-hint {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(153, 27, 27, 0.25);
    color: var(--text);
    font-weight: 500;
}
.passkey-hint .btn-link {
    margin-left: 4px;
}

/* ── Upload area ───────────────────────────────────────────────────────── */

.upload-area {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin: 24px 0;
}

.upload-area:hover, .upload-area.drag-over {
    border-color: var(--primary);
    background: #eff6ff;
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.upload-filename {
    font-weight: 600;
    margin-bottom: 12px;
}

.upload-status {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Progress bar ──────────────────────────────────────────────────────── */

.progress-bar {
    width: 100%;
    height: 28px;
    background: #e2e6ed;
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 14px;
    transition: width 0.5s ease;
    width: 0%;
}

/* ── Status banner ─────────────────────────────────────────────────────── */

.status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px 0;
    font-weight: 500;
}

.status-info     { background: #eff6ff;  border: 1px solid var(--primary); }
.status-warn     { background: #fffbeb;  border: 1px solid var(--warning); }
.status-success  { background: #f0fdf4;  border: 1px solid var(--success); }
.status-error    { background: #fef2f2;  border: 1px solid var(--error); }

.status-progress {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ── Identify CTA ──────────────────────────────────────────────────────── */

.identify-cta {
    text-align: center;
    padding: 24px;
    border: 1px solid var(--success);
    border-radius: 12px;
    background: #f0fdf4;
    margin: 16px 0;
}

/* ── Person cards ──────────────────────────────────────────────────────── */

.person-card {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.person-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.person-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.person-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.image-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 12px;
}

.clip-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 12px;
}

.person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.email-form,
.delivery-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
    min-width: 250px;
    flex-wrap: wrap;
}

.email-form input,
.delivery-form input {
    margin-bottom: 0;
    flex: 1;
    min-width: 140px;
}

.delivery-form input[type="tel"] {
    max-width: 180px;
}

/* Both boxes are above this line, so it reads as being about the pair.
   Filling in one and leaving the other blank is a normal thing to do, and
   nothing else on the page said so. */
.delivery-hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* The note sits on its own line under the address and the phone number: it is
   a sentence, not a field, and sharing a row with them left it too narrow to
   read back what you typed.  flex-basis 100% is what forces the wrap. */
.delivery-form textarea {
    flex: 1 1 100%;
    margin-bottom: 0;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.delivery-sent {
    font-size: 0.85rem;
    color: var(--success);
}

/* ── Debug panel ───────────────────────────────────────────────────────── */

.debug-panel {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.debug-panel summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.debug-log {
    background: #f1f3f7;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 8px;
}

/* ── Admin page ────────────────────────────────────────────────────────── */

.admin-grid {
    display: grid;
    gap: 16px;
}

/* Two tables, one set of rules: the admin list and the dashboard's events.
   .events had no styling at all, so its columns ran into each other — the
   headings read as "Where it has got toInvite code to share". Listed together
   rather than copied so they cannot drift apart. */
.admin-table, .events {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th, .admin-table td,
.events th, .events td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table th, .events th {
    color: var(--text-muted);
    font-weight: 500;
}

.admin-table tr:hover td, .events tr:hover td {
    background: var(--surface-hover);
}

/* The first column is the event's name and the one people scan for, so it
   takes the slack. Without this the browser shares the width evenly and a
   long name wraps while the date column sits half empty. */
.events td:first-child, .events th:first-child {
    width: 40%;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success { background: #dcfce7; color: #166534; }
.badge-warn    { background: #fef3c7; color: #92400e; }
.badge-error   { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #dbeafe; color: #1e40af; }

/* ── The dashboard's top line ──────────────────────────────────────────────
   Wordmark on the left, who you are and the way out on the right. The
   wordmark is centred everywhere else on the site, so its auto margins are
   undone here rather than changed at source.
   ------------------------------------------------------------------------ */

.studio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.studio-head .wordmark {
    margin: 0;
    height: 2rem;
}

.studio-who {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    /* The form is only here to make signing out a POST; it must not add a line
       break or a box of its own. */
    margin-left: auto;
}

.studio-who form {
    display: inline;
}

@media (max-width: 480px) {
    /* Narrow enough that the two halves stack. Keep them on one line by
       letting the name shrink rather than pushing Sign out onto its own row,
       where it reads as an action on whatever is below it. */
    .studio-head { flex-wrap: nowrap; }
    .studio-who { font-size: 0.8rem; gap: 8px; }
    .studio-who span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Sign-in page ──────────────────────────────────────────────────────────
   The sign-in page is the whole page, so it is NOT a .card. A bordered white
   box in the middle of a grey page reads as a fragment of something bigger
   that did not arrive. Here the page itself is the surface and the content
   sits on it, with room around it.
   ------------------------------------------------------------------------ */

body.signin-page {
    background: var(--surface);
}

.signin {
    max-width: 380px;
    margin: 0 auto;
    padding: 9vh 24px 64px;
}

.signin .wordmark {
    height: 2.8rem;
    margin-bottom: 1.6rem;
}

.signin-lead {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Labels and fields read down the page; only the lead and the divider are
   centred. Centred labels above left-aligned fields look misaligned. */
.signin-form label:first-child {
    margin-top: 0;
}

/* A hint here explains the field just above it, so it is pulled up against
   that field. Left at the default spacing it floats midway between two fields
   and reads as if it belongs to the next one. */
.signin-form .hint {
    margin-top: -8px;
    margin-bottom: 4px;
}

/* "or" with a rule either side, so the two ways in are plainly alternatives
   rather than steps to do in order. */
.or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.or::before, .or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.signin-register {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.signin-register summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
}

.signin-register summary:hover {
    color: var(--primary-hover);
}

.signin-register[open] summary {
    margin-bottom: 8px;
}

.optional {
    font-weight: 400;
    color: var(--text-muted);
}

.signin-guests {
    margin-top: 32px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .card { padding: 20px; }
    .center-card { margin-top: 8vh; }
    .signin { padding-top: 5vh; }
    .person-actions { flex-direction: column; }
    .email-form, .delivery-form { min-width: unset; width: 100%; }
}

/* ============================================================
   The wordmark. "moments" is a drawn logo, not a typed word —
   so it is always the artwork, never the letters in whatever
   font a page happens to use. Same file the website serves.
   ============================================================ */
.wordmark {
    display: block;
    height: 2.4rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto 1.1rem;
}

/* The guest link on the dashboard. A read-only input rather than text, so it
   can be tapped once and copied on a phone — selecting a long address by
   dragging across it is the step people get wrong. Monospace because the part
   that matters is the id at the end, and full width because a link truncated
   mid-id looks like the whole link. */
/* The link and its copy button sit on one line, with the field taking the
   slack so the button never drifts away from what it copies. */
.guest-link-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.copy-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.guest-link {
    flex: 1 1 auto;
    min-width: 12rem;
    padding: 4px 8px;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
}