/* Order of service booklet (A5 pages). Colours, fonts and corner ornaments come from the
   wedding-website themes in site.css (.w[data-theme=…]), so the booklet always matches the website. */
.oos-pg { width: 148mm; height: 210mm; min-height: 0; position: relative; overflow: hidden; box-sizing: border-box;
  --o-body: 'Cormorant Garamond', Georgia, serif; --o-size: 12pt;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.oos-pg[data-theme=barn] { --o-body: 'Libre Baskerville', Georgia, serif; --o-size: 9.5pt; }
.oos-pg[data-theme=gatsby] { --o-body: 'Jost', system-ui, sans-serif; --o-size: 9.5pt; }

/* covers use the website's hero colours */
.oos-cover { background: var(--hero-bg); color: var(--hero-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18mm 14mm; }
.oos-cover::after { content: ''; position: absolute; inset: 7mm; border: 1px solid var(--gold); opacity: .7; pointer-events: none; }
.oos-cover::before { content: ''; position: absolute; inset: 8.6mm; border: .5px solid var(--gold); opacity: .4; pointer-events: none; }
.oos-cover .o-orn { color: var(--gold); margin-bottom: 9mm; }
.oos-cover .o-orn svg { max-width: 46mm; height: auto; }
.oos-cover .o-title { font-family: var(--body); font-size: 9pt; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.oos-cover .o-intro { font-family: var(--head); font-size: 12pt; margin-top: 7mm; opacity: .85; text-transform: var(--head-case); letter-spacing: var(--head-track); }
.oos-cover .o-names { font-family: var(--names); font-style: var(--names-style); font-size: 34pt; line-height: 1.05; margin: 4mm 0 7mm; color: var(--hero-ink); }
.oos-cover .o-names .amp { display: block; font-size: .55em; color: var(--gold); margin: 1mm 0; }
.oos-cover .o-date { font-family: var(--head); font-size: 11pt; letter-spacing: .14em; text-transform: uppercase; }
.oos-cover .o-venue { font-family: var(--body); font-size: 10pt; margin-top: 3mm; opacity: .85; line-height: 1.5; }
.oos-back .o-thanks { font-family: var(--names); font-style: var(--names-style); font-size: 26pt; color: var(--hero-ink); margin-bottom: 6mm; }
.oos-back .o-text { font-family: var(--body); font-size: 10.5pt; line-height: 1.6; opacity: .9; max-width: 100mm; }
.oos-back .o-small { font-family: var(--body); font-size: 8.5pt; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: 9mm; }

/* inside pages */
.oos-in { background: var(--card); color: var(--ink); padding: 16mm 15mm 14mm; }
.oos-in[data-theme=gatsby] { --card: #FBF8F0; --ink: #1D1A14; --deep: #0D0D0D; --muted: #6A604C; --gold: #A8843A; }
.oos-in > .o-frame { position: absolute; inset: 6mm; border: .5px solid var(--gold); opacity: .55; pointer-events: none; }
/* corner ornaments (.deco in site.css), sized for paper */
.oos-in.deco::before, .oos-in.deco::after { width: 20mm; height: 20mm; }
.oos-in.deco::before { top: 3.5mm; left: 3.5mm; }
.oos-in.deco::after { bottom: 3.5mm; right: 3.5mm; }
.o-body { height: 100%; overflow: hidden; text-align: center; font-family: var(--o-body); font-size: var(--o-size); line-height: 1.45; }
.o-item { margin: 0 0 6mm; }
.o-item:last-child { margin-bottom: 0; }
.o-kind { font-family: var(--body); font-size: 7pt; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2mm; }
.o-item h3 { font-family: var(--head); font-weight: 400; font-size: 13.5pt; line-height: 1.2; margin: 0; color: var(--deep); text-transform: var(--head-case); letter-spacing: var(--head-track); }
.oos-pg[data-theme=manor] .o-item h3 { font-size: 11pt; }
.o-det { font-style: italic; color: var(--muted); margin: 1mm 0 0; font-size: .92em; }
.o-src { font-family: var(--body); font-size: 7pt; letter-spacing: .1em; color: var(--muted); margin: 1mm 0 0; text-transform: uppercase; }
.o-text { margin-top: 2.5mm; }
.o-text p { margin: 0 0 2.6mm; }
.o-text p:last-child { margin-bottom: 0; }
.o-empty { color: var(--muted); font-style: italic; padding-top: 70mm; }

/* editor */
.oos-grid { align-items: start; }
.oos-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; background: var(--paper); }
.oos-item-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.oos-tools { display: flex; align-items: center; gap: 4px; }
.oos-tools select { width: auto; padding: 5px 8px; font-size: 13px; }
.oos-tools .btn[disabled] { opacity: .3; pointer-events: none; }
.oos-item textarea { font-size: 14px; line-height: 1.5; }
.oos-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.oos-lib { display: grid; gap: 8px; margin: 14px 0; max-height: 46vh; overflow-y: auto; }
.oos-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); margin: 0; }
.oos-opt:has(input:checked) { border-color: var(--sage); background: var(--sage-wash); }
.oos-opt input { width: 18px; margin-top: 3px; accent-color: var(--sage-deep); }
.oos-opt b { display: block; font-weight: 500; }
.oos-opt small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 860px) { .oos-grid { grid-template-columns: 1fr; } .oos-prev { max-width: 340px; } }

/* editor previews: the real-size page is scaled down to fit the column */
.oos-prev { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.oos-prev .oos-pg { position: absolute; left: 0; top: 0; transform-origin: top left; box-shadow: 0 12px 34px rgba(44, 51, 46, .16); }
.oos-warn { display: none; margin-top: 12px; }
.oos-warn.show { display: block; }

/* print: one A5 page per sheet */
.oos-print { display: none; }
@media print {
  @page oos { size: A5; margin: 0; }
  /* on the order-of-service page, print only the booklet, edge to edge */
  body.route-service #toast, body.route-service .side, body.route-service .topbar, body.route-service main.main > *:not(.oos-print) { display: none !important; }
  body.route-service, body.route-service #app, body.route-service .shell, body.route-service main.main { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; display: block !important; background: none !important; min-height: 0 !important; }
  .oos-print { display: block; }
  .oos-print .oos-pg { page: oos; break-after: page; box-shadow: none; }
  .oos-print .oos-pg:last-child { break-after: auto; }
}