/* /_shared/css/pages/admin.css
 * Admin portal styles · sits on top of tokens.css + base.css.
 */

body.voc-scope.admin {
    background: var(--parchment);
    padding: 0;
    min-height: 100vh;
}

/* ─── Topbar ─── */
.admin-topbar {
    background: #28221c;
    color: var(--parchment);
    padding: 0 22px;
    border-bottom: 3px solid var(--terracotta);
}
.admin-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.admin-brand {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--parchment);
    text-decoration: none;
}
.admin-brand em { color: var(--ochre); }
.admin-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 0 1 auto;     /* don't greedily grow · let .admin-user sit beside it on desktop */
    align-items: center;
}
.admin-nav a {
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 236, 217, 0.7);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.admin-nav a:hover { color: var(--parchment); background: rgba(245, 236, 217, 0.08); }
.admin-nav a.active { color: var(--ochre); background: rgba(201, 147, 76, 0.12); }

/* ─── Submenu dropdown (Admin > Security · Audit log) ─── */
.admin-menu { position: relative; display: inline-block; }
.admin-menu-toggle {
    background: transparent; border: none; cursor: pointer;
    padding: 6px 12px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: rgba(245, 236, 217, 0.7);
    border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.admin-menu-toggle:hover { color: var(--parchment); background: rgba(245, 236, 217, 0.08); }
.admin-menu-toggle.active { color: var(--ochre); background: rgba(201, 147, 76, 0.12); }
.admin-menu-toggle .caret { font-size: 9px; margin-left: 4px; opacity: 0.7; }
.admin-menu-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--ink, #28221c);
    border: 1px solid rgba(245, 236, 217, 0.15);
    border-radius: 6px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
    z-index: 100;
}
.admin-menu:hover .admin-menu-dropdown,
.admin-menu:focus-within .admin-menu-dropdown {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    transition: opacity 0.12s, transform 0.12s, visibility 0s;
}
.admin-menu-dropdown a { display: block; padding: 8px 14px; border-radius: 4px; }

.admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;          /* push to the right edge of .admin-topbar-inner */
    flex-wrap: wrap;            /* if it has to wrap, keep right-aligned chunks */
    justify-content: flex-end;
    font-size: 13px;
    color: rgba(245, 236, 217, 0.85);
}
.admin-logout {
    color: var(--ochre);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(201, 147, 76, 0.4);
    border-radius: 999px;
}
.admin-logout:hover { background: rgba(201, 147, 76, 0.18); }

/* ─── Topbar · user dropdown menu ──────────────────────────────────────
   Reuses .admin-menu / .admin-menu-toggle / .admin-menu-dropdown structure
   (hover OR keyboard-focus to open · keyboard a11y via tabindex on container).
   Adds the user-specific bits: name display, mobile initials chip, and the
   header strip at the top of the dropdown that shows role + email.            */
.admin-user-menu { margin-left: 4px; }
.admin-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* keep the chip / name pair from breaking onto two lines awkwardly */
    white-space: nowrap;
    /* a touch more padding than the plain admin-menu-toggle so the user
       affordance reads as the rightmost element of the topbar */
    padding: 6px 10px 6px 12px;
}
.admin-user-name {
    text-transform: none;            /* keep capitalisation of the display name */
    letter-spacing: 0.02em;
    font-family: var(--font-body, Georgia, serif);
    font-size: 13px;
    color: rgba(245, 236, 217, 0.92);
}
.admin-user-chip {
    /* small circle showing initials · always visible · also the only
       affordance on narrow viewports where we hide the name */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(201, 147, 76, 0.18);
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.admin-user-dropdown {
    /* anchor to the right edge of the toggle · the user menu sits at the
       rightmost edge of the topbar, so dropping straight down would clip */
    left: auto;
    right: 0;
    min-width: 240px;
}
.admin-user-head {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(245, 236, 217, 0.10);
    margin-bottom: 4px;
}
.admin-user-head-name {
    font-family: var(--font-body, Georgia, serif);
    font-size: 14px;
    color: var(--parchment);
    margin-bottom: 2px;
}
.admin-user-head-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: lowercase;
    color: rgba(245, 236, 217, 0.55);
}
.admin-user-signout {
    /* visually distinct from the other items · pulled slightly · subtle
       top border so the user knows it's a different kind of action */
    margin-top: 4px;
    border-top: 1px solid rgba(245, 236, 217, 0.10);
    padding-top: 10px !important;
    color: var(--ochre) !important;
}

/* ─── Page body ─── */
.admin-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 22px 60px;
}
.admin-page-head { margin-bottom: 28px; }
.admin-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.admin-page-head h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.05;
}
.admin-page-head h1 em { color: var(--terracotta); font-style: italic; }
.admin-page-head .lead {
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.02rem;
    margin: 10px 0 0;
    max-width: 720px;
}

/* ─── Cards ─── */
.admin-card {
    background: var(--parchment-soft);
    border-left: 4px solid var(--terracotta);
    border-radius: 0 6px 6px 0;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.admin-card h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0 0 6px;
    color: var(--ink);
}
.admin-card h2 em { color: var(--terracotta); }
.admin-card p { margin: 0 0 8px; color: var(--ink-soft); }
.admin-card a.action,
.admin-card a.btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--terracotta);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.admin-card a.action:hover, .admin-card a.btn:hover { background: var(--terracotta-deep); }

/* ─── Cards grid for the dashboard ─── */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.admin-stat {
    background: var(--parchment-soft);
    border-radius: 6px;
    padding: 16px 20px;
    border-top: 3px solid var(--ochre);
}
.admin-stat .stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}
.admin-stat .stat-value {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2rem;
    color: var(--ink);
    line-height: 1;
}
.admin-stat .stat-sub {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* ─── Tables ─── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin: 14px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.admin-table th, .admin-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 13.5px;
}
.admin-table th {
    background: var(--parchment-deep);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
}
.admin-table tr:hover td { background: rgba(245, 236, 217, 0.4); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.n { text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.admin-table td a {
    color: var(--terracotta);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.admin-table td a:hover { color: var(--terracotta-deep); }
.admin-table .pill {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
}
.pill.active    { background: #c9e2c4; color: #1f4720; font-weight: 500; }
.pill.this_week { background: #fde6c4; color: #6b3e0a; }
.pill.today     { background: #f5d8d2; color: #6a2718; }
.pill.planning  { background: #e6e6e6; color: #4a4a4a; }
.pill.completed { background: #e8e0d2; color: #5d4b33; font-weight: 500; }   /* greyed-out · settled, finished · Quincy AA contrast fix */
.pill.done      { background: #d4e3f0; color: #1d4364; }
.pill.archived  { background: #e0e0e0; color: #3d3d3d; }                      /* Quincy AA contrast fix */
.pill.received  { background: #d8e8d4; color: #2e4d28; }
.pill.reviewed  { background: #d4e3f0; color: #1d4364; }
.pill.approved  { background: #c9e2c4; color: #245027; }
.pill.withdrawn { background: #f0d8d4; color: #6a2718; }
.pill.rejected  { background: #f5d8d2; color: #6a2718; }
.pill.pending   { background: #f5ecd2; color: #6b4a1b; }
.pill.active    { background: #d8e8d4; color: #2e4d28; }
.pill.used      { background: #e0e0e0; color: #555; }
.pill.revoked   { background: #f0d8d4; color: #6a2718; }

/* ─── Forms (inside admin) ─── */
.admin-form { background: var(--parchment-soft); padding: 18px 22px; border-radius: 6px; margin-bottom: 18px; }
.admin-form label { display: block; font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 10px 0 4px; }
.admin-form input[type=text],
.admin-form input[type=email],
.admin-form input[type=password],
.admin-form input[type=search],
.admin-form textarea,
.admin-form select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14.5px;
    background: #fff;
    color: var(--ink);
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 2px rgba(168, 86, 58, 0.18);
}
.admin-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .admin-form .row { grid-template-columns: 1fr; } }
.admin-form button {
    margin-top: 14px;
    padding: 10px 22px;
    background: var(--terracotta);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}
.admin-form button:hover { background: var(--terracotta-deep); }
.admin-form button.secondary { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }

/* ─── Flash messages ─── */
.admin-flash { padding: 12px 18px; border-radius: 6px; margin: 14px 0; font-size: 14px; }
.admin-flash.ok    { background: #d8e8d4; border-left: 4px solid var(--color-success); color: #2e4d28; }
.admin-flash.error { background: #f5d8d2; border-left: 4px solid var(--color-danger);  color: #6a2718; }
.admin-flash.info  { background: #d4e3f0; border-left: 4px solid #4477aa;              color: #1d4364; }

/* ─── Login page ─── */
.admin-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.admin-login-card {
    background: var(--parchment-soft);
    border-radius: 8px;
    padding: 36px 38px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 6px 24px rgba(40, 34, 28, 0.12);
}
.admin-login-card h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.9rem;
    margin: 0 0 6px;
    color: var(--ink);
    text-align: center;
}
.admin-login-card h1 em { color: var(--terracotta); }
.admin-login-card .lead {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 22px;
}

/* ─── Detail view ─── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.detail-field {
    background: #fff;
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    padding: 12px 14px;
}
.detail-field .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}
.detail-field .val {
    color: var(--ink);
    font-size: 14.5px;
    word-break: break-word;
    line-height: 1.45;
    white-space: pre-wrap;
}
.detail-field .val em { color: var(--ink-muted); font-style: italic; }

.agreement-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--rule-soft);
    font-size: 14px;
}
.agreement-row:last-child { border-bottom: none; }
.agreement-row .tick { font-weight: 600; }
.agreement-row .tick.yes { color: var(--color-success); }
.agreement-row .tick.no  { color: var(--color-danger); }

.admin-foot {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    padding: 24px;
    border-top: 1px solid var(--rule-soft);
    margin-top: 32px;
}

/* ─── Pagination ─── */
.admin-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}
.admin-pager a, .admin-pager span {
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-decoration: none;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.admin-pager a:hover { background: var(--parchment-soft); }
.admin-pager .current { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.admin-pager .disabled { opacity: 0.35; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE · everything below tunes the admin for phones + tablets.
   Breakpoints: 760px (tablet), 480px (phone).
   ═══════════════════════════════════════════════════════════════════ */

/* ── iOS safe-area (notch) padding ── */
.admin-topbar { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.admin-main   { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.admin-foot   { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ── Prevent iOS zoom on form-focus by keeping inputs ≥ 16px ── */
@media (max-width: 760px) {
    .admin-form input, .admin-form select, .admin-form textarea,
    input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], select, textarea {
        font-size: 16px;
    }
}

/* ── Topbar reflow ── */
@media (max-width: 760px) {
    .admin-topbar { padding-top: 4px; padding-bottom: 4px; }
    .admin-topbar-inner { gap: 10px; padding: 8px 0; }
    .admin-brand { font-size: 1.05rem; flex: 1 1 auto; }
    .admin-nav { order: 3; width: 100%; gap: 2px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-nav a { white-space: nowrap; padding: 8px 12px; font-size: 11.5px; min-height: 36px; display: inline-flex; align-items: center; }
    .admin-user { font-size: 12.5px; gap: 8px; flex-shrink: 0; }
    /* On narrow viewports hide the display-name text but KEEP the initials
       chip + caret · the chip is the affordance, dropdown still shows full
       name + email inside its header strip. */
    .admin-user-name { display: none; }
    .admin-user-toggle { padding: 4px 8px; gap: 4px; }
    .admin-logout { padding: 6px 12px; min-height: 32px; }
}

/* ── Page head ── */
@media (max-width: 760px) {
    .admin-main { padding-top: 18px; padding-bottom: 40px; }
    .admin-page-head { margin-bottom: 18px; }
    .admin-page-head h1 { font-size: 1.85rem; line-height: 1.1; }
    .admin-kicker { font-size: 10px; letter-spacing: 0.22em; }
}

/* ── Cards · tighter padding on phone ── */
@media (max-width: 760px) {
    .admin-card { padding: 14px 16px; }
    .admin-card h2 { font-size: 1.2rem; }
    .admin-card a.action, .admin-card a.btn { padding: 9px 16px; min-height: 40px; }
}

/* ── Tables · horizontal scroll on phone instead of squishing ── */
@media (max-width: 760px) {
    .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .admin-table th, .admin-table td { padding: 8px 10px; font-size: 13px; }
}

/* ── Login card ── */
@media (max-width: 480px) {
    .admin-login-card { padding: 24px 22px; }
    .admin-login-card h1 { font-size: 1.55rem; }
}

/* ── Tap targets · ensure clickable controls are at least 40-44px tall on touch ── */
@media (pointer: coarse) {
    .admin-form button, .admin-card a.action, .admin-card a.btn, .admin-logout { min-height: 44px; }
    a.btn, button { min-height: 40px; }
}

/* ─────────────────────────────────────────────────────────────────
   Ceremony page · assign board · mobile tuning
   ───────────────────────────────────────────────────────────────── */

/* Stack the bottom add-item form on small screens */
@media (max-width: 760px) {
    #add-item-form {
        grid-template-columns: 1fr 1fr !important;   /* qty + category share a row */
    }
    #add-item-form > div:first-of-type,             /* "New item" cell */
    #add-item-form > div:nth-of-type(3),            /* "Assign to" cell */
    #add-item-form > button {
        grid-column: 1 / -1;                         /* full-width */
    }
}
@media (max-width: 480px) {
    #add-item-form { grid-template-columns: 1fr !important; }
    #add-item-form > div, #add-item-form > button { grid-column: 1 / -1; }
}

/* Category filter chips · scroll horizontally on narrow screens */
@media (max-width: 760px) {
    #cat-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    #cat-filters .cat-chip { flex-shrink: 0; min-height: 32px; }
}

/* On touch devices, show the per-card "move" handle that the JS adds */
@media (hover: none), (pointer: coarse) {
    .assign-card .assign-move { display: inline-flex !important; }
    .assign-card { cursor: default !important; }    /* no grab cursor on touch */
}
/* The move button is hidden by default · revealed only on touch */
.assign-card .assign-move {
    display: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-muted);
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}
.assign-card .assign-move:hover { background: var(--parchment-soft); color: var(--ink); }

/* Move picker overlay (created by JS) */
.assign-picker-backdrop {
    position: fixed; inset: 0;
    background: rgba(40, 34, 28, 0.55);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.assign-picker {
    background: var(--parchment);
    border-radius: 14px 14px 0 0;
    padding: 18px 18px max(22px, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 480px;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp { from { transform: translateY(20%); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.assign-picker h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--ink);
}
.assign-picker .picker-sub {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0 0 14px;
}
.assign-picker .picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.assign-picker .picker-grid button {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.assign-picker .picker-grid button:hover,
.assign-picker .picker-grid button:focus { background: var(--parchment-soft); border-color: var(--terracotta); outline: none; }
.assign-picker .picker-grid button.is-current { border-color: var(--terracotta); background: var(--parchment-soft); }
.assign-picker .picker-grid button.is-current::after { content: '✓'; margin-left: auto; color: var(--terracotta); }
.assign-picker .picker-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.assign-picker .picker-close {
    margin-top: 14px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 10px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
}

/* People grid · gentler reflow on small screens */
@media (max-width: 480px) {
    .assign-people-grid { grid-template-columns: 1fr !important; }
}

/* ═════════════════════════════════════════════════════════════════
   Phase 3 mobile patches · audit-driven fixes
   ═════════════════════════════════════════════════════════════════ */

/* View-as banner (master users only) · wraps + smaller on phone */
@media (max-width: 600px) {
    .voc-view-as-banner {
        padding: 8px 12px !important;
        gap: 6px !important;
        font-size: 10.5px !important;
        letter-spacing: 0.10em !important;
    }
    .voc-view-as-banner > span:nth-child(3) { display: none; }   /* hide the "acting as" detail line */
    .voc-view-as-banner button { margin-top: 4px; }
}

/* View-as picker · hide on phones (acting-as can be set on desktop, persists in session) */
@media (max-width: 600px) {
    #voc-view-as-picker { display: none !important; }
}

/* Save-to-phone CTA banner on dashboard · stack on phone */
@media (max-width: 480px) {
    .voc-install-cta { flex-direction: column; align-items: stretch !important; text-align: center; padding: 16px !important; }
    .voc-install-cta > div:first-child { display: none; }       /* hide the icon · save vertical space */
    .voc-install-cta span { width: 100%; padding: 10px 16px !important; }
}

/* Tile-foot positioning · go inline on phones so it never overlaps content */
@media (max-width: 600px) {
    .tile .tile-foot { position: static !important; padding-top: 6px; margin-top: 6px; border-top: 1px dotted var(--rule); }
    .tile { padding-bottom: 12px !important; }
}

/* Dashboard hero pie · centre and shrink on phone */
@media (max-width: 720px) {
    .dash-hero-pie { display: flex; justify-content: center; }
    .pie-wrap { margin: 0 auto; }
}

/* Admin tables · allow the actions column to wrap on small phones so users
   don't have to scroll right · keeps action buttons visible */
@media (max-width: 480px) {
    .admin-table td:last-child { white-space: normal !important; }
    .admin-table td:last-child form { display: block !important; margin-bottom: 4px; }
}

/* Ceremony page · personal checklists were minmax(360px,1fr) and didn't fit · cap at viewport */
@media (max-width: 600px) {
    .personal-checklists { grid-template-columns: 1fr !important; }
}

/* Recipes public viewer · reduce vessel padding on phones */
@media (max-width: 600px) {
    .vessel { padding: 28px 16px 64px !important; }
    .ingredients-table { font-size: 14px; }
    .ingredients-table td:last-child, .ingredients-table th:last-child { white-space: normal !important; }
}

/* Wrap any heavy table in a scrollable region · use class .table-scroll */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
}

/* Touch hint · slim chevron at the right edge of overflow tables on mobile */
@media (max-width: 600px) {
    .admin-table { position: relative; }
}


/* ═══════════════════════════════════════════════════════════════════
   Quincy WCAG 2.1 AA patches · accessibility + design-system hygiene
   ═══════════════════════════════════════════════════════════════════ */

/* ── Focus rings · WCAG 2.4.7 Focus Visible.
   Inputs already have box-shadow on :focus · here we cover everything else
   that previously had `outline: none` with no replacement (buttons, links,
   tile anchors, pills, nav items, region chips). */
.admin-nav a:focus-visible,
.admin-logout:focus-visible,
.admin-brand:focus-visible,
.admin-card a.btn:focus-visible,
.admin-card a.action:focus-visible,
.admin-form button:focus-visible,
.admin-form .btn:focus-visible,
.admin-table a:focus-visible,
.tile:focus-visible,
.tile a:focus-visible,
button.js-cycle:focus-visible,
button.pill:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
    border-radius: 4px;
}
.admin-form input:focus-visible,
.admin-form textarea:focus-visible,
.admin-form select:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 1px;
}

/* ── Error / invalid styling · server-side validation hint surface ── */
.admin-form [aria-invalid="true"],
.admin-form .is-error {
    border-color: var(--color-danger, #a8453a);
    background: #fdf3f0;
}
.admin-form .field-error {
    color: var(--color-danger, #a8453a);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    margin-top: 0.35rem;
}

/* ── Hover-on-touch correction · prevents sticky hover state on phones ── */
@media (hover: none) {
    .admin-nav a:hover { background: transparent; }
    .admin-card a.btn:hover, .admin-card a.action:hover { transform: none; }
    .tile:hover { transform: none; box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.04)); }
}

/* ── prefers-reduced-motion · WCAG 2.3.3 Animation from Interactions ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .pie-prog { transition: none !important; }
    .tile-grid .tile { transition: none !important; transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════════
   View-as picker · readability fix (Quincy UX patch 2026-05-27)
   ═════════════════════════════════════════════════════════════════ */
/* The <select> sits in the dark topbar with cream-on-dark styling, but the
   <option> children render in the BROWSER's native dropdown which inherits
   the cream foreground and renders as cream-on-white = unreadable. Force the
   option panel to use dark parchment + dark ink so it's legible everywhere. */
#voc-view-as-picker {
    /* Custom caret since we set -webkit-appearance:none */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23fde6c4' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px !important;
}
#voc-view-as-picker option {
    background: #f5ecd9;
    color: #2a2622;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 8px;
}
/* Default placeholder option uses muted ink */
#voc-view-as-picker option[value="0"] {
    color: #8b7355;
    font-style: italic;
}
#voc-view-as-picker:hover { border-color: rgba(245,236,217,0.55); }
#voc-view-as-picker:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 2px;
}

/* ── Save-to-phone + push bell · match the new 36px select height ── */
#voc-install-btn, #voc-push-bell { min-height: 36px; vertical-align: middle; }