/* HexOffice's look for office.hexwork.co.uk (layout_office.php), in Hexwork's family: Syne headings, Geist text,
   near-black with Hexwork's pink-red (#F0245E) as the one accent, like HexMail, Tally and Pact. The app pages fill
   the window like an app (Jason, 31 Oct: tools look like apps, not websites). The editor is PowerPoint's shape: a
   ribbon, the slides down the left, the slide in the middle on a dark board, notes underneath.
   Phone first: home works at 320px; the editor keeps working on a phone with the slides in a row along the top. */
:root {
  color-scheme: dark;
  --link: #FF4D6A;
  --link-hi: #FF7A90;
  --acc: #F0245E;
  --on-acc: #fff;
  --acc-deep: #CC1A4D;
  --ink: #F6F1F3;
  --muted: #ABA0A6;
  --paper: #09070A;
  --card: #120E13;
  --raised: #1A141C;
  --sunk: #0C090D;
  --rule: #2A222C;
  --rule-strong: #43374A;
  --tint: rgba(240, 36, 94, 0.12);
  --hover: #241B26;
  --hover-line: #5A4A60;
  --bad: #FF6B6B;
  --ok: #4ADE80;
  --warn: #F5B342;
  --display: "Syne", "Arial Black", system-ui, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--link);
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 var(--body); color: var(--ink); background: var(--paper); overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hi); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.5rem, 5.5vw, 2.1rem); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
.num, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 20; padding: 8px 12px; background: var(--raised); color: var(--ink); border-radius: 8px; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.fine { font-size: 0.86rem; color: var(--muted); }

/* ---- Buttons and fields ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--raised); color: var(--ink); font: 600 0.98rem/1.2 var(--body); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-align: center; }
.btn:hover { background: var(--hover, #2A211B); border-color: var(--hover-line, #6A5848); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.btn-primary:hover { background: var(--acc-deep); border-color: var(--acc-deep); color: var(--on-acc); }
.btn-quiet { background: transparent; }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0 0 6px; }
.field { margin: 0 0 14px; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.84rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--rule-strong); border-radius: 9px; background: var(--sunk); color: var(--ink); font: 400 1rem/1.4 var(--body);
}
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--link); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--acc); vertical-align: middle; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { flex-shrink: 0; margin-top: 2px; }
.grid2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ---- Flashes ---- */
.flash { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule-strong); background: var(--raised); }
.flash-ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.flash-error { border-color: color-mix(in srgb, var(--bad) 60%, transparent); }

/* ---- Hexwork's own confirm dialogs (dialog.js, served from the main host's copy) ---- */
.hx-dialog { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--raised); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(var(--shade-rgb, 0, 0, 0), calc(0.6 * var(--shade-k, 1))); animation: hx-dlg-in .14s ease-out; }
.hx-dialog::backdrop { background: rgba(5, 3, 5, 0.72); backdrop-filter: blur(3px); }
.hx-dialog.out { opacity: 0; transform: scale(.98); transition: opacity .12s, transform .12s; }
.hx-dlg-body { padding: 22px 22px 18px; margin: 0; }
.hx-dlg-title { font: 800 1.15rem/1.3 var(--display); margin: 0 0 8px; }
.hx-dlg-text { margin: 0 0 10px; color: var(--muted); overflow-wrap: anywhere; }
.hx-dlg-input { width: 100%; margin-top: 4px; }
.hx-dlg-err { color: var(--bad); font-size: .875rem; margin: 6px 0 0; min-height: 1em; }
.hx-dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-danger-solid { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.btn-danger-solid:hover { background: #991B1B; border-color: #991B1B; color: #fff; }
@keyframes hx-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Light mode extras (tokens come from theme.php) ---- */
:root[data-theme="light"] { --acc: #C2103F; --acc-deep: #A30D35; --on-acc: #fff; --tint: rgba(194, 16, 63, 0.07); --link: #B00D3A; --link-hi: #8A0A2D; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ---- Frame (pages that aren't the app: landing, messages) ---- */
.of-top { border-bottom: 1px solid var(--rule); background: var(--paper); }
.of-top-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.of-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 1.3rem/1 var(--display); }
.of-acct { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.of-acct form { margin: 0; }
.of-main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
.of-foot { border-top: 1px solid var(--rule); padding: 20px 16px; color: var(--muted); font-size: 0.86rem; text-align: center; }
.of-foot p { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.of-panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.of-hero { padding: clamp(24px, 6vw, 64px) 0 28px; max-width: 760px; }
.of-hero h1 { font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.02; }
.of-hero p { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.of-points { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 28px 0; padding: 0; list-style: none; }
.of-points li { border-top: 2px solid var(--acc); padding-top: 12px; }
.of-points strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.of-points span { color: var(--muted); font-size: 0.95rem; }
.of-note { padding: 10px 12px; border-radius: 10px; background: var(--tint); }

/* ---- The app ---- */
.of-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.of-app { display: flex; flex-direction: column; min-height: 100dvh; }
.of-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.of-app .skip { position: absolute; }
.of-cmd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--sunk); min-height: 52px; }
.of-cmd-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; margin-right: 4px; }
.of-cmd-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.of-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; text-decoration: none; }
.of-ib:hover { background: var(--hover); color: var(--ink); }
.of-search { flex: 1 1 320px; max-width: 560px; margin: 0 auto; }
.of-search input { min-height: 36px; padding: 6px 12px; border-radius: 8px; background: var(--raised); border-color: var(--rule); font-size: 0.94rem; }
.of-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.of-toasts .flash { margin: 0; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); transition: opacity .35s, transform .35s; }
.of-toasts .of-gone { opacity: 0; transform: translateY(8px); }

/* Home */
.of-work { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .of-work.of-homewrap { grid-template-columns: 220px minmax(0, 1fr); } }
.of-rail { padding: 12px; border-right: 1px solid var(--rule); background: var(--sunk); display: flex; flex-direction: column; gap: 10px; }
.of-rail .of-new { width: 100%; }
.of-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.of-rail a:not(.btn) { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.of-rail a:not(.btn):hover { background: var(--hover); }
.of-rail a[aria-current] { background: var(--tint); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc); }
@media (max-width: 859px) {
  .of-rail { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
  .of-rail .of-new { width: auto; flex: none; }
  .of-rail ul { display: flex; }
  .of-rail a:not(.btn) { white-space: nowrap; }
}
.of-home { padding: 20px clamp(16px, 3vw, 32px) 48px; min-width: 0; overflow: auto; }
.of-start { margin: 0 0 28px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.of-start-h { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 14px; }
.of-start-h h1 { font-size: 1.3rem; margin: 0; }
.of-themes { border: 0; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.of-themes legend { float: left; margin: 0 6px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 34px; }
.of-theme { margin: 0; display: inline-flex; align-items: center; cursor: pointer; }
.of-theme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.of-theme-n { display: none; }
.of-sw { position: relative; display: inline-grid; place-items: center; width: 44px; height: 32px; border-radius: 8px; font: 700 0.8rem/1 var(--body); border: 1px solid var(--rule-strong); overflow: hidden; }
.of-sw i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.of-theme input:checked + .of-sw { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--acc); }
.of-theme input:focus-visible + .of-sw { box-shadow: var(--focus); }
.of-tpls { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.of-tpl { display: grid; align-content: start; gap: 4px; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.of-tpl strong { font-size: 0.95rem; margin-top: 6px; }
.of-tpl small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.of-tpl:hover .of-thumb, .of-tpl:focus-visible .of-thumb { box-shadow: 0 0 0 2px var(--acc); }
.of-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--raised); border: 1px solid var(--rule); transition: box-shadow .15s; }
.of-list-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.of-list-h h2 { margin: 0; font-size: 1.1rem; }
.of-list-h p { margin: 0; }
.of-empty { color: var(--muted); padding: 24px; border: 1px dashed var(--rule-strong); border-radius: 12px; text-align: center; }
.of-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.of-doc { display: grid; gap: 8px; align-content: start; }
.of-doc form { margin: 0; }
.of-doc-a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.of-doc-a strong { margin-top: 6px; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-doc-a small { color: var(--muted); font-size: 0.8rem; }
a.of-doc-a:hover .of-thumb { box-shadow: 0 0 0 2px var(--acc); }

/* ---- The slide drawing (deck.js) ---- */
.hx-slide { position: relative; overflow: hidden; line-height: 1.25; text-align: left; overflow-wrap: break-word; }
.hx-box { position: absolute; box-sizing: border-box; }
.hx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-text { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6px 10px; overflow: hidden; }
.hx-text-in { outline: none; min-height: 1.2em; }
.hx-text-in p { margin: 0 0 0.35em; }
.hx-text-in p:last-child { margin-bottom: 0; }
.hx-text-in ul, .hx-text-in ol { margin: 0 0 0.35em; padding-left: 1.2em; }
.hx-text-in li { margin: 0 0 0.3em; }
.hx-text-in li::marker { color: var(--hx-accent); }
.hx-ph .hx-text-in { opacity: 0.45; }
.hx-line-in { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.hx-image img { width: 100%; height: 100%; display: block; }
.hx-noimg { display: grid; place-items: center; background: rgba(127, 127, 127, 0.2); color: var(--hx-muted); font-size: 18px; }
.hx-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: inherit; }
.hx-table td, .hx-table th { border: 1px solid; border-color: inherit; padding: 6px 10px; text-align: left; vertical-align: top; font-weight: inherit; overflow: hidden; }
.hx-table th { font-weight: 700; }

/* ---- The editor ---- */
.of-editor { height: 100dvh; overflow: hidden; }
.of-editor .of-shell { overflow: hidden; }
.of-deckbar { gap: 6px; }
.of-deckmark { flex: none; }
.of-title { flex: 0 1 380px; min-width: 80px; min-height: 36px !important; padding: 4px 10px !important; border-color: transparent !important; background: transparent !important; font-weight: 600 !important; font-size: 1rem !important; }
.of-title:hover, .of-title:focus { border-color: var(--rule-strong) !important; background: var(--raised) !important; }
.of-saved { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.of-saved.of-bad { color: var(--warn); }
.of-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.of-banner { margin: 0; padding: 8px 14px; background: var(--tint); border-bottom: 1px solid var(--rule); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.of-banner-bad { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.of-menu, .of-pop { position: relative; }
.of-menu > summary, .of-pop > summary { list-style: none; cursor: pointer; }
.of-menu > summary::-webkit-details-marker, .of-pop > summary::-webkit-details-marker { display: none; }
.of-menu-in, .of-pop-in { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; padding: 6px; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); }
.of-menu-in { left: auto; right: 0; }
.of-pop-r .of-pop-in { left: auto; right: 0; }
.of-menu-in a, .of-menu-in button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; }
.of-menu-in a:hover, .of-menu-in button:hover { background: var(--hover); }
.of-menu-in form { margin: 0; }
.of-danger { color: var(--bad) !important; }
.of-pop-h { margin: 6px 6px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Ribbon */
.of-ribbon { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 4px; padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--card); flex: none; position: relative; z-index: 30; }
.of-grp[data-needs=table].of-off { display: none; }
.of-grp { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-right: 1px solid var(--rule); flex: none; }
.of-grp:last-of-type { border-right: 0; }
.of-grp-end { margin-left: auto; }
.of-grp.of-off { opacity: 0.4; }
.of-tb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 500 0.88rem/1 var(--body); cursor: pointer; white-space: nowrap; }
.of-tb:hover:not([disabled]), .of-pop[open] > .of-tb { background: var(--hover); }
.of-tb[disabled], .of-tb[aria-disabled=true] { cursor: default; pointer-events: none; }
.of-tb-l { font-size: 0.95rem; }
.of-tb-main { font-weight: 600; }
.of-split { display: inline-flex; align-items: center; }
.of-tb-caret { min-width: 22px; padding: 0 2px; }
.of-ribbon select, .of-ribbon input[type=number] { width: auto; min-height: 32px; height: 32px; padding: 2px 8px; font-size: 0.88rem; border-radius: 7px; }
.of-ribbon input[type=number] { width: 64px; }
.of-a { position: relative; font-weight: 700; padding-bottom: 3px; }
.of-a i, .of-cbtn i { position: absolute; left: -2px; right: -2px; bottom: -2px; height: 4px; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule-strong); }
.of-cbtn { position: relative; display: inline-grid; padding-bottom: 4px; }
.of-cbtn i { bottom: -1px; }
.of-layouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 320px; }
.of-layouts button { display: grid; gap: 4px; justify-items: start; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left; }
.of-layouts button:hover { background: var(--hover); }
.of-lay { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--rule-strong); background: var(--sunk); position: relative; }
.of-lay::before, .of-lay::after { content: ''; position: absolute; background: var(--muted); border-radius: 2px; opacity: .7; }
.of-lay-title::before { left: 12%; right: 12%; top: 38%; height: 12%; } .of-lay-title::after { left: 25%; right: 25%; top: 58%; height: 6%; }
.of-lay-content::before { left: 8%; right: 8%; top: 10%; height: 12%; } .of-lay-content::after { left: 8%; right: 8%; top: 32%; bottom: 10%; opacity: .3; }
.of-lay-two::before { left: 8%; right: 8%; top: 10%; height: 12%; } .of-lay-two::after { left: 8%; right: 8%; top: 32%; bottom: 10%; opacity: .3; background: linear-gradient(90deg, var(--muted) 46%, transparent 46% 54%, var(--muted) 54%); }
.of-lay-section { background: var(--acc); } .of-lay-section::before { left: 10%; right: 30%; top: 40%; height: 14%; background: #fff; } .of-lay-section::after { display: none; }
.of-lay-picture::before { left: 6%; width: 40%; top: 12%; height: 14%; } .of-lay-picture::after { right: 6%; width: 40%; top: 10%; bottom: 10%; opacity: .35; }
.of-lay-quote::before { left: 15%; right: 15%; top: 30%; height: 26%; } .of-lay-quote::after { left: 35%; right: 35%; top: 66%; height: 6%; background: var(--acc); }
.of-lay-titleonly::before { left: 8%; right: 8%; top: 10%; height: 12%; } .of-lay-titleonly::after { display: none; }
.of-lay-blank::before, .of-lay-blank::after { display: none; }
.of-shapes { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; min-width: 0; }
.of-shapes button { width: 44px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.of-shapes button:hover { background: var(--hover); }
.of-shp { display: block; width: 26px; height: 18px; background: var(--ink); }
.of-shp-round { border-radius: 6px; } .of-shp-ellipse { border-radius: 50%; }
.of-shp-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .of-shp-arrow { clip-path: polygon(0 32%, 62% 32%, 62% 6%, 100% 50%, 62% 94%, 62% 68%, 0 68%); }
.of-shp-chevron { clip-path: polygon(0 4%, 70% 4%, 100% 50%, 70% 96%, 0 96%, 30% 50%); } .of-shp-star { clip-path: polygon(50% 3%, 62% 37%, 98% 37%, 69% 59%, 80% 95%, 50% 73%, 20% 95%, 31% 59%, 2% 37%, 38% 37%); }
.of-shp-line { height: 3px; }
.of-colours { min-width: 0; }
.of-pop-in.of-colours { width: 236px; }
.of-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.of-pal button { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--rule-strong); cursor: pointer; padding: 0; }
.of-pal button:hover { transform: scale(1.1); }
.of-pal-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.of-none { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rule-strong); background: none; color: var(--ink); cursor: pointer; font: inherit; font-size: 0.82rem; }
.of-custom { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.of-custom input { width: 30px; height: 26px; padding: 0; border: 0; background: none; }
.of-design { width: 300px; padding: 8px 10px 12px; }
.of-themes-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.of-themes-g button { display: grid; gap: 4px; justify-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; font: inherit; }
.of-themes-g button:hover { background: var(--hover); }
.of-themes-g small { font-size: 0.7rem; text-align: center; line-height: 1.2; }
.of-fonts { display: grid; gap: 6px; }
.of-fonts label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-weight: 500; font-size: 0.85rem; }
.of-fonts select { width: 170px; min-height: 32px; padding: 2px 8px; font-size: 0.85rem; }

/* Slides down the left, the slide in the middle, notes underneath */
.of-editor-in { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.of-strip { border-right: 1px solid var(--rule); background: var(--sunk); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.of-thumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.of-th { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; }
.of-thn { color: var(--muted); font-size: 0.75rem; text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.of-tnb { display: block; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; width: 100%; }
.of-tn { display: block; position: relative; width: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); pointer-events: none; }
.of-cur .of-tnb { border-color: var(--acc); }
.of-cur .of-thn { color: var(--acc); font-weight: 700; }
.of-hidden .of-tn { opacity: 0.35; }
.of-hidden .of-thn { text-decoration: line-through; }
.of-dropat .of-tnb { box-shadow: 0 -4px 0 var(--acc); }
.of-tha { position: absolute; right: 4px; top: 4px; display: none; gap: 2px; }
.of-th:hover .of-tha, .of-cur .of-tha { display: flex; }
.of-tha button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border-radius: 5px; border: 0; background: rgba(9, 7, 10, 0.78); color: #fff; font-size: 12px; cursor: pointer; line-height: 1; }
.of-tha button:hover { background: var(--acc); }
.of-addslide { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px dashed var(--rule-strong); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; }
.of-addslide:hover { color: var(--ink); border-color: var(--acc); }
.of-stagewrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #1b161d; }
:root[data-theme="light"] .of-stagewrap { background: #E9E5E7; }
.of-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; position: relative; outline: none; }
.of-stage.of-drop { box-shadow: inset 0 0 0 3px var(--acc); }
.of-canvas { position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
.of-canvas .hx-slide { position: absolute; left: 0; top: 0; }
.of-live .hx-box { cursor: move; }
.of-live .of-editing { cursor: text; }
.of-live .of-editing .hx-text-in, .of-live .of-editing td, .of-live .of-editing th { cursor: text; }
.of-sel { position: absolute; pointer-events: none; box-shadow: 0 0 0 calc(1.5px * var(--of-hs, 1)) #3B82F6; z-index: 20; }
.of-sel-multi { box-shadow: 0 0 0 calc(1.5px * var(--of-hs, 1)) #93C5FD; }
.of-h { position: absolute; width: calc(10px * var(--of-hs, 1)); height: calc(10px * var(--of-hs, 1)); background: #fff; border: calc(1.5px * var(--of-hs, 1)) solid #3B82F6; border-radius: 2px; pointer-events: auto; transform: translate(-50%, -50%); }
.of-h-nw { left: 0; top: 0; cursor: nwse-resize; } .of-h-n { left: 50%; top: 0; cursor: ns-resize; } .of-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.of-h-e { left: 100%; top: 50%; cursor: ew-resize; } .of-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .of-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.of-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .of-h-w { left: 0; top: 50%; cursor: ew-resize; }
.of-guide { position: absolute; z-index: 25; pointer-events: none; background: #F0245E; }
.of-guide-v { top: 0; bottom: 0; width: calc(1px * var(--of-hs, 1)); }
.of-guide-h { left: 0; right: 0; height: calc(1px * var(--of-hs, 1)); }
.of-notes { flex: none; display: grid; gap: 4px; padding: 8px 14px 10px; border-top: 1px solid var(--rule); background: var(--card); }
.of-notes label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.of-notes textarea { min-height: 54px; height: 64px; resize: vertical; font-size: 0.92rem; background: var(--sunk); }
@media (max-width: 859px) {
  .of-editor { height: auto; overflow: visible; }
  .of-editor .of-shell { overflow: visible; }
  .of-saved, .of-chip, #of-present span { display: none; }
  .of-editor-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .of-strip { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; padding: 8px; }
  .of-thumbs { display: flex; gap: 8px; }
  .of-th { width: 120px; flex: none; grid-template-columns: minmax(0, 1fr); }
  .of-thn { position: absolute; left: 6px; top: 4px; z-index: 2; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 4px; padding: 0 4px; }
  .of-addslide { flex: none; width: 70px; }
  .of-editor-in { align-content: start; }
  .of-strip, .of-thumbs { align-items: flex-start; }
  .of-thn { top: auto; bottom: 6px; left: 6px; }
  .of-addslide { align-self: flex-start; height: 69px; padding: 4px; }
  .of-ribbon .of-design, .of-ribbon .of-layouts { width: auto; }
  .of-stage { height: 60vw; min-height: 200px; }
  .of-tha { top: 4px; right: 4px; }
  .of-tha button { width: 22px; height: 20px; }
  /* One compact ribbon: icons only, smaller boxes, no empty row for the end group. */
  .of-ribbon { padding: 4px 6px; gap: 2px; }
  .of-grp { padding: 0 3px; }
  .of-grp-end { margin-left: 0; }
  .of-tb { min-width: 32px; height: 32px; padding: 0 6px; }
  .of-tb > span:not(.visually-hidden):not(.of-a):not(.of-cbtn) { display: none; }
  .of-ribbon select { max-width: 112px; }
  .of-ribbon input[type=number] { width: 54px; }
  .of-ribbon .of-pop { position: static; }
  .of-ribbon .of-pop-in, .of-ribbon .of-pop-r .of-pop-in { left: 6px; right: 6px; top: calc(100% + 2px); max-height: 72vh; overflow-y: auto; }
}

/* ---- Presenting ---- */
.of-show { margin: 0; background: #000; overflow: hidden; height: 100dvh; color: #fff; }
.of-show-stage { position: fixed; inset: 0; display: grid; place-items: center; outline: none; cursor: none; }
.of-show-move .of-show-stage { cursor: default; }
.of-show-slide { position: relative; overflow: hidden; }
.of-show-slide .hx-slide { position: absolute; left: 0; top: 0; }
.of-show-end { color: #bbb; font: 500 1.1rem/1.4 var(--body); }
.of-show-notes { position: fixed; left: 16px; right: 16px; bottom: 64px; max-height: 32vh; overflow: auto; padding: 14px 16px; border-radius: 12px; background: rgba(18, 14, 19, 0.92); color: #f6f1f3; font: 400 1.05rem/1.5 var(--body); white-space: pre-wrap; z-index: 5; }
.of-show-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 12px; background: rgba(18, 14, 19, 0.85); opacity: 0; transition: opacity .2s; z-index: 6; }
.of-show-move .of-show-bar, .of-show-bar:focus-within, .of-show-bar:hover { opacity: 1; }
.of-show-bar button, .of-show-bar a { padding: 6px 12px; border-radius: 8px; border: 0; background: none; color: #fff; font: 500 0.9rem/1 var(--body); text-decoration: none; cursor: pointer; }
.of-show-bar button:hover, .of-show-bar a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.of-show-bar span { color: #bbb; font-size: 0.85rem; padding: 0 6px; font-variant-numeric: tabular-nums; }
@media (hover: none) { .of-show-bar { opacity: 1; } }

/* ---- Printing (Save as PDF): one slide per page ---- */
.of-print { margin: 0; background: #2a242c; color: #f6f1f3; font-family: var(--body); }
.of-print-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #09070A; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }
.of-print-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbb; }
.of-print-bar a { color: #f6f1f3; }
#of-print { display: grid; justify-items: center; gap: 20px; padding: 20px 16px 40px; }
.of-pp { width: 100%; max-width: 1000px; display: grid; justify-items: center; gap: 10px; }
.of-pp-slide { position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }
.of-pp-slide .hx-slide { position: absolute; left: 0; top: 0; }
.of-pp-notes { width: 100%; background: #fff; color: #111; padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.5; }
.of-pp-notes p { margin: 4px 0 0; white-space: pre-wrap; }
@media print {
  .of-print { background: #fff; color: #111; }
  .of-print-bar { display: none; }
  #of-print { display: block; padding: 0; }
  .of-pp { max-width: none; display: block; break-after: page; page-break-after: always; }
  .of-pp:last-child { break-after: auto; page-break-after: auto; }
  .of-pp-slide { box-shadow: none; }
  .of-print-notes .of-pp-slide { box-shadow: 0 0 0 1px #ccc; }
  .of-pp-notes { padding: 12px 0 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* "Make a meeting brief" */
.of-brief { max-width: 600px; margin: 32px auto; }
.of-brief h1 { margin: 0 0 12px; font: 800 1.4rem/1.25 var(--display); }
.of-brief h2 { margin: 22px 0 8px; font-size: 0.95rem; }
.of-brief-about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); }
.of-brief-about span { flex-basis: 100%; color: var(--muted); font-size: 0.9rem; padding-left: 28px; }
.of-brief-list { margin: 0 0 10px; padding-left: 1.2em; }
.of-brief-list li { margin: 4px 0; }
.of-brief-made { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.of-brief-made small { color: var(--muted); margin-left: 6px; }
@media (max-width: 859px) { .of-brief { margin: 16px; } }