/* ==========================================================================
   Olive Members: additions on top of the synced Olive Data sheets.
   Loads last. Everything the platform provides (shell, components, the
   interaction layer) comes from the synced files; this sheet only holds:
     1. the defaults for the --om-* brand variables the sync introduces, so an
        untouched tenant looks exactly like the platform;
     2. a few pieces this product needs that the platform does not have.
   A tenant's own colours arrive as a <style id="om-brand"> block after this.
   ========================================================================== */

/* ===== 1. Brand variables (Olive defaults) ================================ */
:root {
  --om-primary-rgb: 57, 29, 102;     /* #391D66, plum 900 */
  --om-secondary-rgb: 96, 78, 161;   /* #604EA1, plum 700 */
  --om-accent-rgb: 214, 228, 88;     /* #D6E458, lime 300 */
  --om-primary-hover: #2C1652;
  /* Sidebar and sign-in art panel */
  --om-side: #391D66;
  --om-side-top: #5B3FA0;
  --om-side-deep: #1F0F3D;
  --om-orb-a: #9C89CF;
  --om-orb-b: #D6E458;
  --om-orb-c: #604EA1;
}

/* ===== 2. Brand block in the top bar ====================================== */
/* A tenant with a logo shows the logo; one without shows the Olive icon and its name. */
.om-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none !important; }
.om-brand .om-brand-logo { max-height: 36px; width: auto; max-width: 180px; object-fit: contain; }
.om-brand .om-brand-icon { height: 32px; width: 32px; border-radius: 8px; background: #fff; padding: 2px; }
.om-brand .om-brand-name { font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.om-auth-logo { width: 44px !important; height: 44px !important; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; }

/* The sidebar user block uses an initials avatar rather than a photo. */
.sidenav-user .avatar-olive { width: 36px; height: 36px; }

/* ===== 3. Status pages ===================================================== */
.om-status { text-align: left; }
.om-status .om-status-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.25rem;
  background: var(--plum-50); color: var(--plum-900); font-size: 1.75rem;
}
.om-status a { font-weight: 600; }

/* ===== 4. Development link box ============================================ */
.om-devlink { border: 1px dashed var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); border-radius: 12px; padding: .9rem 1rem; }
.om-devlink .eyebrow { color: var(--warn-fg); }
.om-devlink code { word-break: break-all; }

/* ===== 5. Settings pages: a left rail of sections ========================== */
.om-settings { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; align-items: start; }
.om-settings .om-rail { position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); }
.om-settings .om-rail .nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: var(--radius); color: var(--ink-700); font-weight: 600; font-size: .92rem; }
.om-settings .om-rail .nav-link i { font-size: 1.1rem; color: var(--ink-500); }
.om-settings .om-rail .nav-link:hover { background: var(--plum-50); color: var(--plum-900); }
.om-settings .om-rail .nav-link.active { background: var(--plum-900); color: #fff; }
.om-settings .om-rail .nav-link.active i { color: var(--lime-300); }
@media (max-width: 991.98px) { .om-settings { grid-template-columns: 1fr; } .om-settings .om-rail { position: static; } }

/* ===== 6. Colour fields and the branding preview ========================== */
.om-colour { display: flex; gap: .5rem; align-items: center; }
.om-colour input[type=color] { width: 44px; height: 38px; padding: 2px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
.om-colour input[type=text] { font-family: var(--font-mono); text-transform: uppercase; width: 110px; }
.om-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 34% 1fr; min-height: 220px; background: var(--cream); }
.om-preview .side { background: radial-gradient(120% 90% at 20% 10%, var(--pv-side-top), var(--pv-side) 55%, var(--pv-side-deep)); color: #fff; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.om-preview .side .brand { display: flex; gap: .5rem; align-items: center; font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.om-preview .side .brand img { width: 26px; height: 26px; border-radius: 6px; background: #fff; padding: 2px; object-fit: contain; }
.om-preview .side .it { font-size: .78rem; padding: .35rem .5rem; border-radius: 8px; color: rgba(255, 255, 255, .78); }
.om-preview .side .it.on { background: color-mix(in srgb, var(--pv-accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-accent) 35%, transparent); color: #fff; }
.om-preview .main { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.om-preview .main .h { font-weight: 700; font-size: 1rem; }
.om-preview .main .btn-pv { align-self: flex-start; background: var(--pv-primary); color: #fff; border-radius: 10px; padding: .4rem .8rem; font-size: .8rem; font-weight: 600; }
.om-preview .main .chip { align-self: flex-start; background: var(--pv-accent); color: #1F2306; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; font-weight: 700; }
.om-logo-box { width: 120px; height: 72px; border: 1px dashed var(--line-2); border-radius: 12px; display: grid; place-items: center; background: #fff; }
.om-logo-box img { max-width: 100px; max-height: 56px; object-fit: contain; }

/* ===== 7. Style guide swatches ============================================= */
.om-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.om-swatch .chip { height: 56px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: .5rem; }

/* ===== 8. Definition lists on detail pages ================================= */
.om-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.om-facts dt { font-size: max(.72rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: .15rem; }
.om-facts dd { margin: 0; color: var(--ink-900); font-weight: 500; word-break: break-word; }

/* One-time link panels (invites, provisioning) */
.om-onetime { background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 12px; padding: 1rem 1.1rem; }
.om-onetime .link { font-family: var(--font-mono); font-size: .82rem; background: #fff; border: 1px solid var(--ok-line); border-radius: 8px; padding: .5rem .65rem; word-break: break-all; }

/* Filters bar above tables */
.om-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.om-filters .form-control, .om-filters .form-select { width: auto; min-width: 180px; }

/* ===== 9. Notifications (the bell) ========================================== */
.om-notif { display: flex; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-700); text-decoration: none; }
.om-notif:hover { background: var(--plum-50); color: var(--ink-900); }
.om-notif .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--plum-50); color: var(--plum-900); font-size: 1.1rem; }
.om-notif .tx { display: flex; flex-direction: column; min-width: 0; font-size: .86rem; }
.om-notif .tx strong { color: var(--ink-900); font-weight: 600; }
.om-notif .tx span { color: var(--ink-500); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.om-notif .tx small { color: var(--ink-300, #9A8FB0); margin-top: .15rem; }
.om-notif.unread .tx strong::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--plum-700); margin-right: .4rem; vertical-align: middle; }
#notCount.pulse { animation: om-pulse .6s ease 2; }
@keyframes om-pulse { 50% { transform: scale(1.35); } }

/* ===== 10. Lists and records ================================================ */
tr[data-href] { cursor: pointer; }
.om-type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: .35rem; vertical-align: middle; }
.om-record-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.om-record-head .avatar-olive.xl { width: 64px; height: 64px; font-size: 1.35rem; border-radius: 18px; }
.om-record-head .avatar-photo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; }
.om-record-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--ink-500); font-size: .88rem; }
.om-record-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.om-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.om-timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.om-timeline li { position: relative; display: flex; gap: .8rem; padding: .45rem 0; }
.om-timeline .dot { position: relative; z-index: 1; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--plum-700); font-size: 1.05rem; }
.om-timeline .what { font-weight: 600; color: var(--ink-900); }
.om-timeline .when { color: var(--ink-500); font-size: .8rem; }
.om-note { border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; background: #fff; margin-bottom: .6rem; }
.om-note.pinned { border-color: var(--lime-300); background: color-mix(in srgb, var(--lime-300) 12%, #fff); }
.om-note .meta { font-size: .78rem; color: var(--ink-500); margin-top: .35rem; display: flex; justify-content: space-between; gap: .5rem; }
.om-term { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.om-term:last-child { border-bottom: 0; }
.om-card-member { border-radius: 20px; color: #fff; padding: 1.4rem 1.5rem; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 10% 0%, var(--om-side-top), var(--om-side) 55%, var(--om-side-deep)); }
.om-card-member::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--om-accent-rgb), .45), transparent 70%); }
.om-card-member .label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.om-card-member .name { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .8rem; }
.om-card-member .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; position: relative; z-index: 1; }
.om-card-member .grid strong { display: block; font-size: 1rem; }
.om-card-member .chip { display: inline-block; background: var(--lime-300); color: #1F2306; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; }
.om-bars { display: grid; gap: .55rem; }
.om-bars .bar-row { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: .6rem; font-size: .86rem; }
.om-bars .track { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.om-bars .track i { display: block; height: 100%; border-radius: 99px; }
.om-email-frame { width: 100%; min-height: 640px; border: 1px solid var(--line); border-radius: 12px; background: #FFF8F1; }
.om-qr { width: 160px; height: 160px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; }

/* ===== 11. Public pages ===================================================== */
body.om-public .pub-top .om-brand-name { font-size: .95rem; }
body.om-public .pub-actions { margin-top: 1rem !important; }
.om-type-card { display: flex; flex-direction: column; height: 100%; border-top: 4px solid var(--type-colour, var(--plum-700)); }
.om-type-card .benefits { padding-left: 1.1rem; margin: .5rem 0 1rem; color: var(--ink-700); font-size: .92rem; }
.om-type-card .card-footer { margin-top: auto; background: transparent; }
/* A field for form-filling software only: off screen, never focused by people. */
.om-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* The platform marks required fields with a dot (.ol-req::after); the asterisk inside is for text-only readers. */
.ol-req { font-size: 0; }

/* ===== 12. Workflows ========================================================= */
/* The designer: steps in order on the left, the selected step on the right. */
.om-wf-designer { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1rem; align-items: start; }
.om-wf-designer .om-props { position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); max-height: calc(100vh - var(--topbar-h, 64px) - 2rem); overflow: auto; }
.om-wf-designer .om-props .form-label { font-size: .82rem; }
.om-props-h { font-size: max(.72rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin: .25rem 0 .6rem; }
.om-wf-card { border: 1px solid var(--line); border-left: 4px solid var(--plum-500); border-radius: 14px; background: #fff; padding: .75rem .9rem; margin-bottom: .75rem; cursor: pointer; }
.om-wf-card:hover { border-color: var(--plum-300, #B7A9E0); border-left-color: var(--plum-500); }
.om-wf-card.selected { box-shadow: 0 0 0 3px rgba(var(--om-secondary-rgb), .15); border-color: var(--plum-500); }
.om-wf-card.t-automatic { border-left-color: var(--violet-500, #7C6BC4); }
.om-wf-card.t-wait { border-left-color: #C98A1B; }
.om-wf-card.t-end { border-left-color: var(--olive-600); }
.om-wf-card .hd { display: flex; align-items: center; gap: .6rem; }
.om-wf-card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--plum-50); color: var(--plum-700); flex: 0 0 auto; font-size: 1.1rem; }
.om-wf-card .grow { flex: 1; min-width: 0; }
.om-wf-card .nm { font-weight: 700; color: var(--ink-900); }
.om-wf-card .ty { font-size: .78rem; color: var(--ink-500); }
.om-wf-card .ctl { display: flex; gap: .2rem; opacity: 0; transition: opacity .15s; }
.om-wf-card:hover .ctl, .om-wf-card.selected .ctl, .om-wf-card:focus-within .ctl { opacity: 1; }
.om-wf-card .ln { margin: .5rem 0 0 44px; font-size: .84rem; color: var(--ink-700); display: grid; gap: .15rem; }
.om-wf-card .ln i { color: var(--ink-500); }
.om-wf-card .rt { margin: .5rem 0 0 44px; display: grid; gap: .25rem; }
.om-wf-route { font-size: .84rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.om-wf-route .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--plum-700); flex: 0 0 auto; }
.om-wf-route .dot.success { background: #15803D; } .om-wf-route .dot.danger { background: #B42318; }
.om-wf-route .dot.warning { background: #C98A1B; } .om-wf-route .dot.light { background: var(--line-2); }
.om-wf-route .tag { font-size: .68rem; }
.om-wf-add { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .75rem; border: 1px dashed var(--line-2); border-radius: 14px; }
.om-wf-outcome { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; margin-bottom: .6rem; background: var(--cream, #FFF8F1); }
.om-wf-action { border: 1px dashed var(--line-2); border-radius: 10px; padding: .55rem .6rem; margin-bottom: .5rem; background: #fff; }
.om-wf-clause { display: grid; grid-template-columns: 1fr 120px 1fr auto; gap: .35rem; align-items: center; margin-bottom: .35rem; }
@media (max-width: 1199.98px) { .om-wf-designer { grid-template-columns: 1fr; } .om-wf-designer .om-props { position: static; max-height: none; } }

/* The workflow panel on an application: steps, the open task, waiting. */
.om-wf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.om-wf-steps li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--ink-500); }
.om-wf-steps .n { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--line); color: var(--ink-700); flex: 0 0 auto; font-size: .9rem; }
.om-wf-steps li.done { color: var(--ink-700); }
.om-wf-steps li.done .n { background: var(--lime-300); color: #1F2306; }
.om-wf-steps li.current { color: var(--plum-900); font-weight: 700; }
.om-wf-steps li.current .n { background: var(--plum-900); color: #fff; }
.om-wf-task { border: 1px solid var(--line); border-radius: 12px; padding: .75rem; background: var(--cream, #FFF8F1); }
.om-wf-task.late { border-color: #F3B8B3; background: #FFF6F5; }
.om-wf-wait { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem; border-radius: 12px; background: var(--warn-bg, #FFF7E6); }
.om-wf-wait > i { font-size: 1.3rem; color: #8A5A00; }
.justify-self-start { justify-self: start; }
tr.om-row-late > td:first-child { box-shadow: inset 3px 0 0 #D92D20; }
.side-nav-link .om-nav-count { font-size: .7rem; }
.pub-next { max-width: 380px; }

/* ===== 13. Show-password button ============================================== */
/* olive-ui.js marks icon-only buttons .btn-icon (a 40px square); beside a field it should be as tall as the field. */
.input-group > .btn-toggle { height: auto; align-self: stretch; width: 46px; }

/* ===== 14. Finance ============================================================ */
.om-bars.amounts .bar-row { grid-template-columns: 110px 1fr 110px; }
.om-bars.amounts .bar-row > :last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Twelve months: invoiced (light) beside collected. */
.om-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; height: 200px; }
.om-months .m { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: .35rem; min-width: 0; }
.om-months .cols { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.om-months .cols i { display: block; width: 44%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.om-months .cols i.inv { background: var(--plum-100); }
.om-months .cols i.col { background: var(--plum-500); }
.om-months .lbl { font-size: .72rem; color: var(--ink-500); text-align: center; }
.om-legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--ink-500); }
.om-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.money { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-lines tfoot td { border-bottom: 0; padding-top: .35rem; padding-bottom: .35rem; }
.om-lines tfoot tr.total td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--ink-900); padding-top: .6rem; }
.om-lines tfoot tr.due td { color: var(--plum-700); font-weight: 700; }
.om-paylink { font-family: var(--font-mono); font-size: .8rem; word-break: break-all; background: var(--cream-2); border: 1px dashed var(--line-2); border-radius: 8px; padding: .5rem .7rem; }
.om-trail { list-style: none; padding: 0; margin: 0; }
.om-trail li { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.om-trail li:last-child { border-bottom: 0; }
.om-trail .when { color: var(--ink-500); font-size: .78rem; }
.om-trail details summary { font-size: .78rem; color: var(--ink-500); cursor: pointer; }
.om-trail pre { font-size: .72rem; background: var(--cream-2); border-radius: 6px; padding: .5rem; margin: .35rem 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.om-line-row td { vertical-align: top; }
.om-line-row .form-control, .om-line-row .form-select { min-width: 0; }
.om-recon .suggest form { display: inline-block; margin: 0 .3rem .3rem 0; }
.om-recon tr.settled td { color: var(--ink-500); }
.om-gateway.off { opacity: .92; }
.om-gateway .card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.om-kv { display: grid; grid-template-columns: 140px 1fr; gap: .35rem .9rem; font-size: .9rem; margin: 0; }
.om-kv dt { color: var(--ink-500); font-weight: 600; }
.om-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .om-kv { grid-template-columns: 1fr; } .om-kv dd { margin-bottom: .4rem; } }

/* ===== 15. Pay page =========================================================== */
.om-pay-summary .due { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 600; color: var(--ink-900); line-height: 1.1; }
.om-pay-summary .lines { font-size: .88rem; }
.om-pay-summary .lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.om-payopts { display: grid; gap: .6rem; }
.om-payopt { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.om-payopt:hover { border-color: var(--plum-300); }
.om-payopt input { position: absolute; opacity: 0; pointer-events: none; }
.om-payopt .ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--plum-50); color: var(--plum-700); font-size: 1.35rem; flex: none; }
.om-payopt strong { display: block; color: var(--ink-900); }
.om-payopt small { color: var(--ink-500); }
.om-payopt:has(input:checked) { border-color: var(--plum-700); box-shadow: 0 0 0 4px rgba(var(--om-secondary-rgb, 57, 29, 102), .12); }
.om-payopt:has(input:focus-visible) { outline: 2px solid var(--plum-500); outline-offset: 2px; }
.om-paystatus .card-body { padding: 2.2rem 1.5rem; text-align: center; }
.om-paystatus h3 { font-size: 1.35rem; margin: .8rem 0 .4rem; }
.om-paystatus p { color: var(--ink-500); max-width: 42ch; margin: 0 auto 1rem; }
.om-paycode { font-family: var(--font-mono); font-size: 2rem; letter-spacing: .12em; font-weight: 700; color: var(--plum-900); background: var(--plum-50); border-radius: 12px; padding: .6rem 1rem; display: inline-block; margin-bottom: 1rem; }
.om-paystatus img.qr { width: 180px; height: 180px; display: block; margin: 0 auto 1rem; image-rendering: pixelated; }
.om-pay-sim { background: #FFF7E0; border: 1px dashed #E0B84C; color: #6B4E00; border-radius: 10px; padding: .6rem .9rem; font-size: .85rem; }
.om-card-sim { max-width: 440px; margin: 2rem auto 0; }
.om-card-sim .fake { background: linear-gradient(135deg, var(--plum-900), var(--plum-500)); color: #fff; border-radius: 16px; padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; font-family: var(--font-mono); letter-spacing: .08em; }
/* The public shell's progress label is only for forms; elsewhere it stays hidden. */
body.om-public .pub-top .status:empty { display: none; }

/* ---- Accreditation and certificates (Phase 5) ---------------------------------------------------------------- */
.om-ring { --p: 0; --size: 84px; width: var(--size); height: var(--size); border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: conic-gradient(var(--olive-600, #5B8A2E) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.om-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.om-ring span { position: relative; font-weight: 700; font-size: 1.05rem; color: var(--ink-900); }
.om-ring.sm { --size: 60px; } .om-ring.sm::before { inset: 7px; } .om-ring.sm span { font-size: .85rem; }
.om-ring.lg { --size: 132px; } .om-ring.lg::before { inset: 12px; } .om-ring.lg span { font-size: 1.5rem; }
.om-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.om-req-list li { display: flex; gap: .75rem; align-items: flex-start; }
.om-req-list li > i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--plum-50, #F3EFFA); color: var(--plum-700); font-size: 1.05rem; }
.om-builder-row { background: var(--surface-2, #FAFAF8); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }
.om-cert-preview iframe { width: 100%; height: min(78vh, 720px); border: 0; display: block; background: var(--ink-100, #EEE); border-radius: 0 0 var(--radius) var(--radius); }
.tag.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ---- Reports and dashboards (Phase 6) ------------------------------------------------------------------------ */
.om-tile { position: relative; overflow: hidden; }
.om-tile .delta.up { color: var(--olive-700, #3F6B1F); } .om-tile .delta.down { color: var(--bad-fg, #B42318); }
.om-spark { position: absolute; right: 10px; bottom: 8px; width: 96px; height: 28px; opacity: .55; }
.om-spark polyline { fill: none; stroke: var(--plum-700); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.om-chart { width: 100%; height: auto; display: block; }
.om-chart .grid { stroke: var(--line); stroke-width: 1; }
.om-chart .axis { font-size: 10px; fill: var(--ink-500); font-family: var(--font-sans); }
.om-donut { width: 160px; height: 160px; flex: 0 0 auto; }
.om-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.om-report-table th { white-space: nowrap; }

/* ---- The register: filters on the organisation's own fields ------------------------------------------------------ */
.om-field-filters { margin-top: .5rem; }
.om-field-filter-rows { display: flex; flex-direction: column; gap: .4rem; }
.om-field-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.om-field-filter > select { width: auto; min-width: 150px; max-width: 260px; }
.om-field-filter-value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.om-field-filter-value > input, .om-field-filter-value > select { width: auto; min-width: 160px; }
.om-lookup-inline { min-width: 260px; }
/* Stacked, for a narrow column: the field beside its remove button, then how, then the value, each full width. */
.om-field-filters-stacked .om-field-filter { padding: .5rem; border: 1px solid var(--bs-border-color, #E5E1EC); border-radius: .5rem; }
.om-field-filters-stacked .om-field-filter > select[name="ff"] { flex: 1 1 0; min-width: 0; max-width: none; }
.om-field-filters-stacked .om-field-filter > [data-ff-remove] { order: 1; }
.om-field-filters-stacked .om-field-filter > select[name="fo"] { order: 2; flex: 1 1 100%; min-width: 0; max-width: none; }
.om-field-filters-stacked .om-field-filter-value { order: 3; flex: 1 1 100%; }
.om-field-filters-stacked .om-field-filter-value > input, .om-field-filters-stacked .om-field-filter-value > select { flex: 1 1 110px; min-width: 0; }
.om-field-filters-stacked .om-field-filter-value:empty, .om-field-filters-stacked .om-field-filter-value:not(:has(:not([type="hidden"]))) { display: none; }
.om-field-filters-stacked .om-lookup-inline { min-width: 0; flex: 1 1 100%; }
.om-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; background: var(--plum-50, #F4F1FB);
    color: var(--plum-900, #391D66); font-size: .85rem; font-weight: 600; text-decoration: none; }
.om-chip:hover { background: var(--plum-100, #E6E1F7); color: var(--plum-900, #391D66); }