/* Shared style for the user guides (user-guide, admin-guide, image-maintenance-guide).
   Light and plain so they read well on screen and print cleanly to PDF (A4). */
:root {
    --text: #1d2330;
    --muted: #5a6272;
    --accent: #0b5cad;
    --accent-soft: #e8f1fb;
    --tip: #1f7a3d;
    --tip-soft: #e9f6ee;
    --warn: #9a5b00;
    --warn-soft: #fff4dd;
    --danger: #a32121;
    --danger-soft: #fdeaea;
    --rule: #d6dbe3;
    --code-bg: #f1f3f6;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}
main { max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* "← Back to the photos" (guide-back.js shows it when the site serves the guide): big enough to tap on
   the kiosk's touch screen, which has no Back button. */
.back-link[hidden] { display: none; }
.back-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.6rem 1.2rem;
    min-height: 2.75rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover { background: #084a8c; }
.back-link:focus-visible { outline: 4px solid #ffd400; outline-offset: 2px; }

.cover { border-bottom: 4px solid var(--accent); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.cover .kicker { margin: 0; color: var(--accent); font-weight: 700; letter-spacing: 0.04em;
                 text-transform: uppercase; font-size: 0.85rem; }
.cover h1 { margin: 0.25rem 0 0.5rem; font-size: 2.1rem; line-height: 1.2; }
.cover .who { margin: 0; color: var(--muted); font-size: 1.05rem; }

h2 { margin: 2.5rem 0 0.75rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--rule);
     font-size: 1.5rem; color: var(--accent); }
h3 { margin: 1.75rem 0 0.5rem; font-size: 1.15rem; }
p, ul, ol { margin: 0.5rem 0 0.9rem; }
li { margin-bottom: 0.35rem; }
a { color: var(--accent); }

nav.toc { background: var(--accent-soft); border-radius: 8px; padding: 0.9rem 1.25rem; }
nav.toc h2 { margin: 0 0 0.4rem; border: 0; font-size: 1.1rem; }
nav.toc ol { margin: 0; padding-left: 1.3rem; }
nav.toc li { margin: 0.15rem 0; }

figure { margin: 1rem 0 1.5rem; break-inside: avoid; }
figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule);
             border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
figure.small img { max-width: min(26rem, 100%); }
figure.tiny img { max-width: min(13rem, 100%); }
figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; }

.note { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 5px solid; border-radius: 4px;
        break-inside: avoid; }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note .label { font-weight: 700; }
.tip { border-color: var(--tip); background: var(--tip-soft); }
.tip .label { color: var(--tip); }
.warn { border-color: var(--warn); background: var(--warn-soft); }
.warn .label { color: var(--warn); }
.danger { border-color: var(--danger); background: var(--danger-soft); }
.danger .label { color: var(--danger); }

ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.05rem;
                        width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent);
                        color: #fff; font-weight: 700; text-align: center; line-height: 1.8rem; }

table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.92rem;
        break-inside: auto; }
th, td { padding: 0.45rem 0.6rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { background: var(--accent-soft); }
tr { break-inside: avoid; }

kbd { display: inline-block; min-width: 1.6em; padding: 0.05em 0.4em; border: 1px solid #b9c0cc;
      border-bottom-width: 3px; border-radius: 4px; background: #fafbfc; font-family: inherit;
      font-size: 0.85em; text-align: center; white-space: nowrap; }
code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--code-bg);
       font-family: Consolas, "DejaVu Sans Mono", monospace; font-size: 0.85em; overflow-wrap: anywhere; }
pre { padding: 0.75rem 1rem; border-radius: 6px; background: var(--code-bg); overflow-x: auto;
      font-size: 0.85rem; line-height: 1.45; break-inside: avoid; }
pre code { padding: 0; background: none; }
.button-look { display: inline-block; padding: 0.05em 0.55em; border-radius: 4px; background: #0066cc;
               color: #fff; font-size: 0.9em; font-weight: 600; white-space: nowrap; }
.button-look.red { background: #c0392b; }
.button-look.grey { background: #666; }
.button-look.amber { background: #8a6410; }

/* The maintenance guide's "how a photo gets onto the site" diagram. */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0; break-inside: avoid; }
.flow-box { flex: 1 1 8rem; padding: 0.6rem 0.75rem; border: 2px solid var(--accent); border-radius: 8px;
            background: var(--accent-soft); text-align: center; font-size: 0.85rem; line-height: 1.4; }
.flow-arrow { flex: 0 0 auto; color: var(--accent); font-size: 1.4rem; font-weight: 700; }

/* A pretend spreadsheet, for the image maintenance guide. */
.sheet { font-family: Calibri, Arial, sans-serif; font-size: 0.8rem; }
.sheet th { background: #e7e9ee; text-align: center; color: #555; font-weight: 600; }
.sheet td.rownum, .sheet th.rownum { width: 2.2rem; background: #e7e9ee; color: #555; text-align: center; }
.sheet tr.header td { font-weight: 700; background: #f7f7f7; }
.sheet td.key { background: #fff6c8; white-space: nowrap; }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: -1rem; margin-bottom: 1.25rem;
              font-family: Calibri, Arial, sans-serif; font-size: 0.75rem; }
.sheet-tabs span { padding: 0.15rem 0.6rem; border: 1px solid var(--rule); border-top: 0;
                   background: #f3f4f6; }
.sheet-tabs span.on { background: #fff; font-weight: 700; color: #1d6f42; border-bottom: 3px solid #1d6f42; }

.tree { font-family: Consolas, "DejaVu Sans Mono", monospace; font-size: 0.85rem; line-height: 1.5;
        background: var(--code-bg); border-radius: 6px; padding: 0.75rem 1rem; white-space: pre;
        overflow-x: auto; break-inside: avoid; }
.tree .hl { background: #fff6c8; font-weight: 700; }
.tree .dim { color: var(--muted); }

/* Text for screen readers only (e.g. the sample sheet's corner cell). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
                   white-space: nowrap; }

.page-footer { margin-top: 3rem; padding-top: 0.75rem; border-top: 1px solid var(--rule);
               color: var(--muted); font-size: 0.85rem; }

@media (max-width: 600px) {
    html { font-size: 16px; }
    main { padding: 1.25rem 16px 3rem; }
    .cover h1 { font-size: 1.7rem; }
}
@media print {
    .back-link { display: none; }
    html { font-size: 11.5pt; }
    main { max-width: none; padding: 0; }
    h2 { break-after: avoid; }
    h3 { break-after: avoid; }
    h2.new-page { break-before: page; }
    a { color: inherit; text-decoration: none; }
    figure img { box-shadow: none; max-height: 105mm; width: auto; }
    .tree { white-space: pre-wrap; font-size: 8.5pt; }
}
@page { size: A4; margin: 16mm 15mm 18mm; }