/* Back office and sign-in. Colours come from theme.css. */
.office-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem;
    max-width: 1160px; width: 100%; margin: 0 auto; padding: 0.7rem 1rem;
}
.office-head .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.office-head .brand img { width: 52px; height: 52px; border-radius: 50%; border: var(--outline); }
.office-head .toon { font-size: clamp(1.4rem, 4vw, 2rem); }
.who { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; color: var(--white); text-shadow: 0 2px 0 var(--ink); }

.office { max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 1rem 2rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: -3px; padding-left: 0.6rem; position: relative; z-index: 2; }
.tab {
    padding: 0.4em 1.1em; font: 400 1.1rem var(--font-toon); color: var(--ink); cursor: pointer;
    background: var(--parch-2); border: var(--outline); border-bottom-width: 0; border-radius: 14px 14px 0 0;
}
.tab[aria-selected=true] { background: var(--parch-1); padding-bottom: 0.55em; }
.tab .count { display: inline-block; min-width: 1.5em; margin-left: 0.3em; padding: 0 0.35em; font-size: 0.85rem; color: var(--white); background: var(--red); border-radius: 999px; text-align: center; }
.panel { min-height: 320px; }
.panel h2 { margin: 0 0 0.8rem; font: 400 1.6rem var(--font-toon); color: var(--blue-2); }
.panel h3 { margin: 1.2rem 0 0.5rem; font: 400 1.25rem var(--font-toon); color: var(--blue-2); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.toolbar input[type=search] { flex: 1 1 200px; width: auto; margin: 0; }
.pill { padding: 0.15em 0.85em; font: 700 0.95rem var(--font-body); color: var(--ink); cursor: pointer; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; }
.pill.on { color: var(--white); background: var(--blue-2); }

.rows { display: grid; gap: 0.6rem; }
.row {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem;
    padding: 0.5rem 0.7rem; background: var(--white); border: 2px solid var(--ink); border-radius: 14px;
}
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: var(--parch-1); }
.row.off { opacity: 0.6; }
.row-thumb { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--ink); border-radius: 10px; background: var(--sea-mid); }
.row-main { min-width: 0; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
.row-sub { font-size: 0.9rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.row-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.row.no-thumb { grid-template-columns: minmax(0, 1fr) auto; }
.row select { width: auto; margin: 0; padding: 0.3em 0.5em; }
.message-text { margin: 0.4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.6rem; }
.button-row .push { margin-left: auto; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.7rem; margin: 0.6rem 0; }
.photo { position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo.cover::before { content: 'Cover'; position: absolute; top: 6px; left: 6px; padding: 0 0.5em; font: 400 0.8rem var(--font-toon); background: var(--gold-1); border: 2px solid var(--ink); border-radius: 999px; }
.photo-tools { display: flex; }
.photo-tools button { flex: 1; padding: 0.3em 0; font: 700 0.9rem var(--font-body); color: var(--ink); cursor: pointer; background: var(--parch-1); border: 0; border-top: 2px solid var(--ink); }
.photo-tools button + button { border-left: 2px solid var(--ink); }
.photo-tools button[data-remove] { flex: 2.4; }
.photo-tools button:disabled { opacity: 0.35; cursor: default; }
.drop { display: block; padding: 1rem; text-align: center; cursor: pointer; background: var(--white); border: 3px dashed var(--blue-2); border-radius: 14px; }
.drop input { display: none; }
.notice { margin: 0.8rem 0; padding: 0.7rem 0.9rem; font-weight: 700; background: var(--gold-1); border: 2px solid var(--ink); border-radius: 12px; overflow-wrap: anywhere; }
.notice code { font-size: 1.15rem; padding: 0.1em 0.4em; background: var(--white); border-radius: 6px; user-select: all; }
.quiet { color: var(--ink-soft); }

.toast {
    position: fixed; left: 50%; bottom: 1.2rem; z-index: 50; transform: translateX(-50%);
    max-width: calc(100vw - 2rem); padding: 0.5em 1.2em; font-weight: 700; color: var(--white);
    background: var(--ok); border: var(--outline); border-radius: 999px; box-shadow: var(--drop);
}
.toast.bad { background: var(--red-dark); }

.signin { max-width: 420px; width: calc(100% - 2rem); margin: 6vh auto 2rem; text-align: center; }
.signin-cast { display: inline-flex; gap: 0.8rem; }
.signin img { width: 120px; height: 120px; border-radius: 50%; border: var(--outline); box-shadow: var(--drop); }
.signin .toon { display: block; font-size: 2.4rem; margin: 0.6rem 0 1rem; }
.signin form { text-align: left; }
.signin .btn { width: 100%; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .row { grid-template-columns: 56px minmax(0, 1fr); }
    .row-thumb { width: 56px; height: 56px; }
    .row-side { grid-column: 1 / -1; justify-content: flex-start; }
    .row.no-thumb { grid-template-columns: 1fr; }
}