:root{color-scheme:light;--control-height:48px;--ink:#213c35;--muted:#5f6c66;--visited:#5b4a6e;--green:#285c4b;--paper:#fff;--background:#f6f6f1;--border:#dde3db;--soft:#e7efe7;--warning:#765024;--warning-bg:#fbefd9}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--green);text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ad6c2d;outline-offset:4px}h1,h2,p{margin:0}h1{font-size:clamp(28px,4vw,42px);line-height:1.16;letter-spacing:-1.3px;font-weight:600;overflow-wrap:anywhere}h2{font-size:19px;font-weight:600;line-height:1.35}p{overflow-wrap:anywhere}.muted{color:var(--muted)}.small{font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:700;color:var(--green);margin-bottom:10px}.site-header{background:var(--paper);border-bottom:1px solid var(--border)}.header-inner{max-width:1200px;padding:20px 28px;margin:auto;display:flex;align-items:center;gap:30px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;white-space:nowrap;color:var(--ink)}.brand-mark{display:block;flex-shrink:0;width:40px;height:40px}.header-inner nav{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}.header-inner nav a{font-size:13px;color:var(--muted);text-decoration:none}.header-inner nav a[aria-current]{color:var(--green);font-weight:650}.language-form{display:flex;gap:3px;background:#f1f3ee;padding:3px;border:1px solid var(--border);border-radius:7px}.language-form button{border:0;background:transparent;color:var(--muted);padding:5px 9px;font-size:12px;border-radius:4px}.language-form button[aria-pressed=true]{background:var(--green);color:white}.shell{max-width:1120px;padding:38px 28px 64px;margin:auto;min-height:calc(100vh - 165px)}.site-footer{max-width:1120px;margin:auto;padding:20px 28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:12px 0 28px}.page-heading p.muted{margin-top:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--control-height);padding:10px 16px;background:white;color:var(--green);border:1px solid var(--border);border-radius:7px;text-decoration:none;font-size:14px;font-weight:550;text-align:center}.button:hover{border-color:var(--green);background:#f0f5ee}.button.primary{background:var(--green);color:white;border-color:var(--green)}.button.primary:hover{background:#1d493a}.full{width:100%}.panel{background:var(--paper);border:1px solid var(--border);border-radius:12px}.empty{text-align:center;padding:64px 24px;margin-top:20px}.empty p{max-width:430px;margin:12px auto 24px;color:var(--muted)}.empty-mark{display:inline-grid;place-items:center;background:var(--soft);border-radius:14px;width:52px;height:52px;font-size:29px;color:var(--green);margin-bottom:20px}.back-link{font-size:13px;text-decoration:none;display:inline-block;margin-bottom:16px}.inline-form{display:inline-flex;gap:16px;flex-wrap:wrap;margin:0}.text-button{background:none;border:0;color:var(--muted);font-size:13px;padding:0}.text-button:hover{text-decoration:underline}.text-button.danger{color:#934434}.badge{display:inline-block;font-size:12px;padding:5px 9px;border-radius:5px;background:var(--soft);color:var(--green);white-space:nowrap}.badge.draft{background:#f0efe8;color:#686448}.badge.cancelled{background:#f9eae4;color:#934434}.list-heading{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.manage-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;text-decoration:none;color:var(--ink)}.manage-row+.manage-row{border-top:1px solid var(--border)}.manage-row:hover{background:#f8faf6}.row-main{display:flex;align-items:center;gap:18px;min-width:0}.row-main h2{overflow-wrap:anywhere}.row-main p{font-size:13px;margin-top:5px}.row-end{display:flex;gap:20px;align-items:center}.date-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft);border-radius:8px;min-width:54px;min-height:62px;flex-shrink:0}.date-tile strong{font-size:23px;line-height:1.2;font-weight:500}.date-tile span{font-size:12px}.date-tile.large{background:transparent;min-width:90px}.date-tile.large strong{font-size:38px}.date-tile.large small{font-size:11px;color:var(--muted)}.login-layout{display:grid;grid-template-columns:1fr 400px;gap:70px;align-items:center;margin:60px 0}.intro h1{max-width:460px;font-family:Georgia,serif;font-size:clamp(32px,4.2vw,51px);font-weight:400;letter-spacing:-1.5px}.intro>p:last-child{margin-top:22px;max-width:390px;color:var(--muted)}.login-panel{padding:32px}.login-panel>p{margin:8px 0 26px}.field{margin-bottom:19px;min-width:0}.field label{display:block;font-size:13px;font-weight:550;margin-bottom:7px}.field label .muted{font-weight:400}.field input,.field textarea{border:1px solid #ccd6cd;background:#fff;color:var(--ink);border-radius:6px;width:100%;padding:10px 11px;font-size:16px;min-width:0}.field input{height:var(--control-height)}.field textarea{resize:vertical}.field input[aria-invalid=true]{border-color:#a44832}.field-help{font-size:12px;color:var(--muted);margin-top:6px}.errorlist{list-style:none;margin:7px 0 0;padding:0;color:#963e27;font-size:13px}.error-summary{color:#87381f;border:1px solid #e8c7ba;background:#fdf0e9;padding:12px;border-radius:6px;margin-bottom:22px;font-size:14px}.error-summary .errorlist{margin:0}.upload-panel{max-width:780px;padding:28px}.upload-zone{text-align:center;border:1px dashed #b2c3b5;background:#f8faf6;border-radius:8px;padding:35px 18px}.upload-zone label{display:block;font-size:20px;font-weight:600;margin:14px 0 8px}.document-label{display:inline-block;background:var(--soft);padding:8px 11px;border-radius:5px;font-size:14px;font-weight:700;letter-spacing:1px}.upload-zone input{margin-top:24px;width:100%;max-width:390px;font-size:14px}.upload-zone input::file-selector-button{background:var(--paper);border:1px solid var(--border);border-radius:5px;color:var(--ink);padding:9px 12px;margin-right:12px}.action-row{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:24px}.action-row p{font-size:13px}.editor-layout{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);gap:30px;align-items:start}.poster-panel{min-width:0}.poster-heading{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:15px}.poster-heading h2{font-size:14px}.poster-heading a{font-size:12px}.poster-image-link{display:block;border:1px solid var(--border);background:#e9ece3;padding:12px;border-radius:8px}.poster-image-link img{display:block;max-width:100%;width:100%;height:auto}.poster-panel>p{margin-top:12px}.editor-panel{padding:27px}.section-heading{margin-bottom:25px}.section-heading p{margin-top:8px;font-size:13px}#event-form{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}#event-form>.field:first-of-type,#event-form>.programme-field,#event-form>.field:has(#id_place),#event-form>.field:has(#id_public_contact),#event-form>.field:has(#id_organiser_name),#event-form>.field:has(#id_organiser_website),#event-form>.field:has(#id_updates_url),#event-form>.error-summary,#event-form>.editor-notice,#event-form>.form-actions{grid-column:1/-1}.editor-notice{background:#f1f4ed;border-radius:6px;padding:12px;color:var(--muted);font-size:12px;margin:2px 0 22px}.form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.published-actions{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:20px;margin-top:22px;font-size:13px}.public-heading{margin:18px 0 42px;max-width:760px}.public-heading h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(32px,4.8vw,52px)}.public-heading>p:last-child{color:var(--muted);margin-top:18px;text-wrap:pretty}.public-list{border-top:1px solid var(--border)}.public-event{display:flex;align-items:center;gap:28px;padding:25px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}.public-event:hover h2{text-decoration:underline;text-underline-offset:5px}.public-event-info{flex:1;min-width:0}.public-event-info h2{font-size:23px;margin:3px 0 9px;overflow-wrap:anywhere}.public-event-info p{font-size:14px;margin-top:4px}.event-thumb{width:82px;height:105px;object-fit:contain;background:#e9ece3;border:1px solid var(--border)}.event-arrow{font-size:23px;color:var(--green)}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.85fr);gap:65px;margin-top:20px;align-items:start}.event-story h1{font-family:Georgia,serif;font-size:clamp(32px,4.2vw,49px);font-weight:400}.event-facts{margin:30px 0}.event-facts>div{display:grid;grid-template-columns:85px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--border)}.event-facts dt{font-size:12px;color:var(--muted)}.event-facts dd{margin:0;overflow-wrap:anywhere}.programme{margin:28px 0}.programme p{margin-top:12px;white-space:normal}.detail-poster img{width:100%;height:auto;border:1px solid var(--border);border-radius:6px}.detail-poster p{margin-top:12px}.edit-link{display:block;margin-top:20px;font-size:13px}.cancellation{padding:18px 20px;background:#f9eae4;border:1px solid #e2bfae;border-radius:8px;margin:10px 0 24px;color:#873e2c}.cancellation p{font-size:14px;margin-top:5px}.messages p{padding:13px 18px;border:1px solid #bfd2bd;background:var(--soft);border-radius:7px;margin-bottom:20px;font-size:14px}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;font-size:13px}.staging-banner{margin:0;padding:6px 28px;background:var(--warning-bg);color:var(--warning);border-bottom:1px solid #e6cfa6;text-align:center;font-size:13px;font-weight:700;letter-spacing:.6px}.skip-link{position:absolute;left:16px;top:-80px;z-index:10;background:white;padding:10px}.skip-link:focus{top:10px}#language-error:not(:empty){background:#f9eae4;padding:10px;margin-bottom:15px}.whatsapp-attention{padding:18px 24px;margin-bottom:20px}.whatsapp-attention p{margin-top:4px}.whatsapp-attention ul{margin:10px 0 0;padding:0;list-style:none;font-size:14px}.whatsapp-attention li+li{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:900px){.header-inner{gap:18px}.header-inner nav{order:3;width:100%;margin:0}.language-form{margin-left:auto}.login-layout{gap:30px;grid-template-columns:1fr 360px;margin-top:30px}.editor-layout{gap:20px;grid-template-columns:minmax(200px,.7fr) minmax(0,1fr)}.detail-layout{gap:30px}.editor-panel{padding:20px}}
@media(max-width:650px){.header-inner{padding:15px 18px}.shell{padding:24px 18px 40px}.brand{font-size:14px}.header-inner nav{gap:18px}.site-footer{padding:20px 18px;flex-direction:column;gap:5px}.login-layout,.editor-layout,.detail-layout{grid-template-columns:1fr}.login-layout{margin:12px 0;gap:26px}.login-panel{padding:24px}.intro h1{font-size:34px}.intro>p:last-child{margin-top:12px}.poster-image-link img{max-height:360px;object-fit:contain}.editor-panel{padding:20px}.public-heading{margin:12px 0 28px}.public-event{gap:14px;padding:22px 0}.date-tile.large{min-width:62px}.date-tile.large strong{font-size:30px}.date-tile.large span{font-size:11px}.public-event-info h2{font-size:19px}.event-thumb{display:none}.manage-row{padding:18px 15px;align-items:flex-start;gap:10px}.row-main{gap:12px}.row-main h2{font-size:16px}.row-end{gap:5px}.row-end>span:last-child{display:none}.badge{font-size:11px}.list-heading{padding:14px 16px}.action-row{align-items:stretch;flex-direction:column;gap:15px}.upload-panel{padding:20px}.upload-zone{padding:25px 12px}.form-actions .button{flex:1}.event-facts>div{grid-template-columns:65px 1fr}.empty{padding:40px 20px}}
@media(max-width:380px){.language-form{margin-left:0}.row-main .date-tile{display:none}#event-form{grid-template-columns:1fr}.form-actions{flex-direction:column}.header-inner nav{font-size:12px}}
@media(pointer:coarse){button,.text-button,.language-form button{min-height:44px}.header-inner nav a{padding:8px 0}.whatsapp-attention a{display:inline-block;position:relative}.whatsapp-attention a::after{content:"";position:absolute;inset:-10px 0}.whatsapp-attention li+li{margin-top:20px}}

/* Assisted editing and period selection */
/* A tinted check box holds material to compare with the form: the organiser's
   replies, the poster reading. */
.check-box { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid #cdd9d1; border-radius: 12px; background: #f3f7f3; }
#extraction-panel [role=status]:empty { display: none; }
#organiser-replies { margin-bottom: 16px; }
#organiser-replies h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.reply-list { list-style: none; margin: 0; padding: 0; }
.reply-list li + li, details > .reply-list { border-top: 1px solid #cdd9d1; margin-top: 10px; padding-top: 10px; }
.reply-list p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.reply-list .badge { font-size: 11px; padding: 2px 7px; }
.reply-list blockquote { margin: 4px 0 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
/* "Send updated preview" under the replies (#111). */
.send-preview { border-top: 1px solid #cdd9d1; margin-top: 12px; padding-top: 12px; }
.send-preview-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.send-preview .field-help { margin: 8px 0 0; }
#send-preview-status { margin: 8px 0 0; font-size: 14px; }
#send-preview-status:empty { display: none; }
#send-preview-status[data-state="error"] { color: #963e27; }
/* It takes the focus once the answer comes: the site's own ring. */
#send-preview-status:focus-visible { outline: 3px solid #ad6c2d; outline-offset: 4px; }
/* Held for a reason the help line gives; the busy cursor only while sending. */
.send-preview button:disabled { cursor: default; }
.send-preview[data-sending] button:disabled { cursor: wait; }
.send-preview .button:disabled:hover { border-color: var(--border); background: white; }
/* "Suggest changes" and "This reply is about this draft" under a reply, and the
   rows of suggested changes under the box (#111). */
.reply-actions, .reply-list .reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; font-size: 13px; }
.reply-actions .text-button { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.reply-actions .text-button:disabled { text-decoration: none; cursor: wait; }
.suggest-box { border-top: 1px solid #cdd9d1; margin-top: 12px; padding-top: 12px; }
.suggest-box h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
#suggest-from { margin: 0 0 6px; }
#suggest-status { margin: 0 0 6px; font-size: 14px; }
#suggest-status:empty { display: none; }
#suggest-status[data-state="error"] { color: #963e27; }
#suggest-status:focus-visible { outline: 3px solid #ad6c2d; outline-offset: 4px; }
.suggest-list, .suggest-notes { margin: 0; padding-left: 1.2rem; font-size: 14px; }
#suggest-notes-label { margin: 6px 0 0; }
.suggest-notes { color: var(--muted); }
#suggest-notes:empty { display: none; }
.suggest-list li { margin: 6px 0; overflow-wrap: anywhere; }
/* A programme keeps its lines, as in the Read-poster review. */
.suggest-list del, .suggest-list ins { white-space: pre-wrap; }
.suggest-list del { color: var(--muted); }
.suggest-list ins { text-decoration: none; font-weight: 700; }
.suggest-list li.suggest-block del, .suggest-list li.suggest-block ins { display: block; margin: 2px 0 4px; }
.suggest-list li.suggest-block .suggest-caption { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.suggest-list li.suggest-block .button.small { margin-left: 0; }
.suggest-list .button.small { min-height: 32px; padding: 4px 12px; margin: 0 8px 0 2px; }
.suggest-list .button:disabled { cursor: default; }
.suggest-list .button:disabled:hover { border-color: var(--border); background: white; }
/* After the rule above, which would otherwise beat the site's touch size. */
@media (pointer: coarse) { .suggest-list .button.small { min-height: 44px; } }
.suggest-list li[data-state="changed"] .suggest-state, .suggest-list li[data-state="refused"] .suggest-state { color: #963e27; }
.suggest-list li[data-state="accepted"] .suggest-state { color: var(--green); font-weight: 600; }
#organiser-replies summary { margin-top: 10px; color: var(--green); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* The organiser's replies on the dashboard (#110): a chip, the words as in the
   editor's box, and the actions at the end of the item. */
.reply-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reply-head time { color: var(--muted); font-size: 13px; }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.reply-body { display: flex; align-items: flex-end; gap: 12px; margin-top: 6px; }
.reply-main { flex: 1 1 0; min-width: 0; }
.reply-event { margin: 0 0 4px; }
.reply-event a { margin-left: 8px; }
.reply-item blockquote { margin: 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.reply-item details { margin-top: 4px; }
.reply-item summary { color: var(--green); font-size: 13px; cursor: pointer; }
.reply-item details blockquote { margin-top: 6px; }
.attach-form { margin-top: 10px; }
.attach-form label { display: block; font-size: 13px; font-weight: 550; color: var(--ink); margin-bottom: 7px; }
.attach-row { display: flex; gap: 12px; }
.attach-row select { flex: 0 1 26rem; min-width: 0; height: var(--control-height); padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--ink); font-size: 16px; }
.read-form { flex: none; margin-left: auto; }
.read-form .text-button { display: block; min-height: var(--control-height); }
/* On touch screens the toggles get the tap area the dashboard's links have. */
@media (pointer: coarse) {
  .reply-item summary, #organiser-replies summary { position: relative; }
  .reply-item summary::after, #organiser-replies summary::after { content: ""; position: absolute; inset: -10px 0; }
}
@media (max-width: 650px) {
  .reply-body { display: block; }
  .attach-row { flex-direction: column; }
  .attach-row select, .attach-row .button { flex: none; width: 100%; }
  .read-form { margin-top: 12px; }
}
#extraction-fields dt { font-weight: 700; margin-top: .8rem; }
#extraction-fields dd { margin-left: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.period-controls { margin: 2rem 0; }
.period-form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.period-form label { display: block; margin-bottom: .3rem; font-weight: 600; }
.period-form > div { min-width: 0; }
.period-form select, .period-form input { display: block; width: 100%; max-width: 100%; min-width: 0; height: var(--control-height); padding: 0 .75rem; border: 1px solid #bec8c1; border-radius: 7px; background-color: white; color: var(--ink); font: inherit; }
/* WebKit positions date text at the content top; balance the inset explicitly. */
.period-form input[type=date] { padding-block: calc((var(--control-height) - 2px - 1.55em) / 2); }
/* Normalize the native macOS select while retaining keyboard/picker behavior. */
.period-form select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23213c35' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; }
.period-form .button { height: var(--control-height); }
@media (max-width: 650px) {
  .period-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-form .button { grid-column: 1 / -1; height: auto; }
}
.period-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.period-navigation nav { display: flex; gap: 1.5rem; }
.period-navigation h2 { margin: 0; }
.print-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.print-programme { max-width: 800px; margin: auto; }
.programme-header h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.programme-online { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 2rem; padding: 1rem 0; border-block: 1px solid #b5bfb6; }
.programme-online > div { min-width: 0; }
.programme-qr { width: 144px; height: 144px; flex-shrink: 0; image-rendering: pixelated; }
.calendar-url, .programme-event { overflow-wrap: anywhere; }
.programme-event { margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid #cbd0cb; }
.programme-event h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.programme-event-heading p { margin-top: .3rem; }
.programme-text { white-space: normal; }
.cancellation { color: #962d25; }
@media (max-width: 480px) { .programme-online { flex-direction: column; align-items: flex-start; } }
@page { size: A4; margin: 16mm; }
@media print {
  body { background: white !important; color: black !important; font-size: 10.5pt; }
  .site-header, .site-footer, .skip-link, .print-actions, #language-error, .messages { display: none !important; }
  main.shell { width: auto; max-width: none; margin: 0; padding: 0; }
  .print-programme { max-width: none; }
  .programme-header h1 { font-size: 23pt; }
  .programme-online { break-inside: avoid; display: flex; flex-direction: row; margin: 6mm 0; padding: 3mm 0; }
  .programme-qr { width: 32mm; height: 32mm; }
  .programme-event { break-inside: auto; margin-bottom: 5mm; padding-bottom: 4mm; }
  .programme-event-heading { break-inside: avoid; break-after: avoid; }
  .programme-event h2 { font-size: 14pt; }
  p, .programme-text { orphans: 3; widows: 3; }
  a { color: black; }
  .eyebrow, .small, .cancellation { color: black; }
}

.delete-panel { max-width: 700px; padding: 24px; }
.delete-panel h2 { overflow-wrap: anywhere; }
.delete-panel > p { margin: 1rem 0; }
.button.delete-button { color: white; background: #962d25; border-color: #962d25; }
.button.delete-button:hover { background: #74231d; }

/* Native picker stays keyboard accessible; visible text follows the app language. */
.file-chooser{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:100%}
.file-choose-button{position:relative;display:inline-block;padding:10px 16px;background:#fff;border:1px solid var(--line,#dbe3dc);border-radius:6px;overflow:hidden}
.file-choose-button:focus-within{outline:3px solid #285b4c;outline-offset:3px}
.file-choose-button .poster-file-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#selected-file{overflow-wrap:anywhere;min-width:0;max-width:100%}

/* Poster replacement in the editor's poster panel. */
.replace-poster { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.replace-poster h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.replace-poster .error-summary { margin-bottom: 14px; }
.replace-poster .file-chooser { justify-content: flex-start; margin: 14px 0; }
.replace-poster > .errorlist { margin: -6px 0 14px; }

/* Editor readout */
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.readout-panel { padding: 24px; margin-bottom: 20px; }
.readout-panel h2 { margin-bottom: 8px; }
.readout-panel > p { max-width: 70ch; }
.readout-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.readout-heading h2 { margin-bottom: 0; }
/* A safety valve only. The table restacks below the breakpoint and fits above
   it, so this should never actually scroll; it is not a focus stop, because a
   keyboard user would have nothing to do there. */
.readout-scroll { overflow-x: auto; margin-top: 14px; }
.readout-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.readout-table th, .readout-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.readout-table th[scope=col] { font-size: 12px; font-weight: 550; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.readout-table th[scope=row] { font-weight: 550; white-space: normal; overflow-wrap: anywhere; min-width: 14ch; max-width: 28ch; }
.readout-table th:first-child { text-align: left; }
.readout-table tfoot th, .readout-table tfoot td { font-weight: 650; border-bottom: 0; }
.readout-panel .form-actions { justify-content: flex-start; }
.readout-note { margin: 4px 0 24px; max-width: 70ch; }
/* The six-column table needs 686px of its own before it starts clipping, so
   it has to restack well above the 650px used elsewhere in this file: at 768px
   (iPad portrait) the panel offers 662px and Total fell off the right edge.
   Restack into one labelled block per row instead. */
@media (max-width: 850px) {
  .readout-panel { padding: 16px; }
  /* Nothing scrolls once it restacks, and `auto` would make this a scroll
     container: the focus ring on the event links sits 7px outside their
     border box, so its left side would be cut off. */
  .readout-scroll { overflow-x: visible; }
  /* Clipped, not display:none, so the column headers stay in the
     accessibility tree and keep their association with each cell. */
  .readout-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .readout-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .readout-table tfoot tr { border-bottom: 0; }
  .readout-table th, .readout-table td { border-bottom: 0; padding: 0; }
  .readout-table th[scope=row] { display: block; text-align: left; max-width: none; margin-bottom: 8px; font-size: 16px; }
  .readout-table td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; text-align: right; }
  /* The empty alternative text keeps the label visible but silent: the real
     column header already names the cell, and without this a screen reader
     reads the name twice. */
  .readout-table td::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--muted); font-weight: 400; text-align: left; }
  .readout-table tfoot td { font-weight: 650; }
}
/* Privacy notice: long-form reading, so a narrower measure than the app pages. */
.privacy { max-width: 72ch; }
.privacy section { margin-top: 32px; }
.privacy h2 { margin-bottom: 10px; }
.privacy p + p, .privacy ul + p, .privacy p + ul { margin-top: 10px; }
.privacy ul { margin: 0; padding-left: 20px; }
.privacy li + li { margin-top: 6px; }
.privacy-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.privacy-table th, .privacy-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.privacy-table thead th { font-size: 12px; font-weight: 550; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.privacy-table code { overflow-wrap: break-word; }
/* The footer's two parts wrap onto separate rows rather than squeezing.
   Up to 760px "Personal Tourister by Mariners Compass Ltd" takes its own line
   and the dot before it is hidden, so no line ends with the dot; there it may
   wrap like any text, so zoomed text never scrolls the page sideways. Above
   760px it shares the dot's line, so it never breaks inside; the whole first
   part fits there in any common font. The parts align on their first line's
   text, which the links' tap padding would otherwise push down. */
.site-footer { flex-wrap: wrap; align-items: baseline; }
@media (min-width: 761px) {
  .footer-company { white-space: nowrap; }
}
/* Up to 760px the footer's links (the privacy notice, whose only way in is
   here, and the company below it) get a finger-sized target, since the footer
   text is 12px and the two links sit one above the other. */
@media (max-width: 760px) {
  .footer-dot { display: none; }
  .footer-company { display: block; }
  .site-footer a { display: inline-block; padding: 12px 0; }
}
@media (max-width: 650px) {
  /* Restack the cookie table into one labelled block per cookie, as the
     readout table does, so each purpose reads as a sentence on a phone.
     Clipped rather than hidden, so the headers stay in the accessibility tree. */
  .privacy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .privacy-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .privacy-table th, .privacy-table td { display: block; border-bottom: 0; padding: 2px 0; }
  .privacy-table td::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; color: var(--muted); }
}
.field select { display: block; width: 100%; height: var(--control-height); padding: 0 2.25rem 0 11px; border: 1px solid #ccd6cd; border-radius: 6px; background-color: #fff; color: var(--ink); font-size: 16px; }
@media (max-width: 650px) { .period-form .town-field { grid-column: 1 / -1; } }
.field select[aria-invalid=true] { border-color: #a44832; }
.town-form { margin-top: .7rem; }

/* Links to other sites, and the event page's actions and poster thumbnail (#16, #26) */
.ext { width: .85em; height: .85em; vertical-align: -.05em; margin-left: .2em; flex-shrink: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cancellation a { color: inherit; }
.title-row { display: flex; gap: 14px; align-items: flex-start; }
.title-row h1 { min-width: 0; flex: 1; }
.poster-thumb { display: none; }
@media (max-width: 650px) {
  .event-story .heading-actions .button { flex: 1 1 100%; }
  .poster-thumb { display: block; flex: 0 0 72px; min-height: 44px; }
  .poster-thumb img { display: block; width: 72px; height: 100px; object-fit: contain; background: #e9ece3; border: 1px solid var(--border); border-radius: 4px; }
}
/* An invisible tap area around the links in running text, so a thumb can hit them. */
@media (pointer: coarse) {
  /* inline-block, so the area covers a link that wraps onto a second line */
  .event-facts dd a, .cancellation a { position: relative; display: inline-block; }
  .event-facts dd a::after, .cancellation a::after { content: ""; position: absolute; inset: -11px 0; }
}
/* Visited links are plum on screen. Buttons, the brand and the list rows keep their
   own colours; paper stays black. */
@media screen {
  main a:not(.button, .back-link, .public-event, .manage-row, .danger, .poster-image-link, .poster-thumb, .readout-table a):visited { color: var(--visited); }
  .public-event:visited h2 { color: var(--visited); }
}
.draft-preview{position:relative}.draft-band{margin:0;padding:12px 16px;background:#934434;color:#fff;text-align:center;font-size:15px;font-weight:700;letter-spacing:.3px}.draft-watermark{position:absolute;inset:0;z-index:5;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200'%3E%3Ctext x='130' y='110' text-anchor='middle' transform='rotate(-30 130 100)' font-family='sans-serif' font-size='30' font-weight='700' fill='%23934434' fill-opacity='.12'%3EBOZZA%3C/text%3E%3C/svg%3E") repeat}