/* Walters Sentinel services: the shared shell and every service's pages.
   Built on the theme tokens in theme.css, so all five themes apply here too.
   --svc is the current service's own colour, set by shell.js. */

:root{ --svc: var(--accent); --svc-soft: color-mix(in srgb, var(--svc) 14%, transparent); }

body.svc-body{ margin:0; min-height:100vh; }
.svc-loading{ display:flex; align-items:center; justify-content:center; min-height:70vh; color:var(--text-faint); gap:10px; }

/* ---------------------------------------------------------------- header */
.svc-header{
  position:sticky; top:0; z-index:50; height:56px;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
}
.svc-header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, var(--svc), transparent 60%); opacity:.7; }
.svc-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  border-radius:10px; border:1px solid transparent; background:none; color:var(--text-dim); cursor:pointer;
}
.svc-iconbtn:hover, .svc-iconbtn[aria-expanded="true"]{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.svc-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); min-width:0; }
.svc-brand img{ width:30px; height:30px; object-fit:contain; flex:none; }
.svc-brand-word{ font-weight:700; letter-spacing:-.015em; white-space:nowrap; }
.svc-brand-sep{ width:1px; height:22px; background:var(--border); margin:0 4px; flex:none; }
.svc-brand-service{ font-weight:650; color:var(--svc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svc-header-spacer{ flex:1; }

.svc-orgbtn{
  display:flex; align-items:center; gap:8px; max-width:240px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; font:inherit; font-size:.84rem;
}
.svc-orgbtn:hover{ border-color:color-mix(in srgb, var(--svc) 50%, var(--border)); }
.svc-orgbtn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.svc-avatar{
  width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--svc), color-mix(in srgb, var(--svc) 55%, #000)); color:#fff;
  font-size:.72rem; font-weight:800; object-fit:cover;
}
.svc-avatar.lg{ width:44px; height:44px; font-size:.9rem; }
.svc-accountbtn{ padding:3px; border-radius:50%; border:2px solid transparent; background:none; cursor:pointer; }
.svc-accountbtn:hover, .svc-accountbtn[aria-expanded="true"]{ border-color:var(--svc); }

/* ---------------------------------------------------------------- popovers */
.svc-pop{
  position:absolute; top:52px; z-index:80; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 22px 50px -18px rgba(0,0,0,.55); padding:8px; animation:svcPop .12s ease-out;
}
@keyframes svcPop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.svc-pop-right{ right:12px; }
.svc-pop-left{ left:12px; }
.svc-pop h4{ margin:6px 10px 8px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }

.svc-launcher{ width:340px; }
.svc-apps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.svc-app{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px; border-radius:11px;
  text-decoration:none; color:var(--text); font-size:.78rem; font-weight:600; text-align:center;
}
.svc-app:hover{ background:var(--surface-2); }
.svc-app.is-current{ background:var(--svc-soft); }
.svc-app-icon{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; }
.svc-pop-foot{ border-top:1px solid var(--border); margin-top:6px; padding:8px 6px 2px; display:flex; justify-content:space-between; }
.svc-pop-foot a{ font-size:.82rem; color:var(--accent-2); text-decoration:none; }

.svc-accountmenu{ width:330px; }
.svc-acct-head{ display:flex; gap:12px; align-items:center; padding:10px; }
.svc-acct-id{ min-width:0; }
.svc-acct-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-acct-email{ font-size:.8rem; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-menu-sep{ height:1px; background:var(--border); margin:6px 4px; }
.svc-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:none;
  color:var(--text-dim); font:inherit; font-size:.86rem; text-align:left; text-decoration:none; cursor:pointer;
}
.svc-menu-item:hover{ background:var(--surface-2); color:var(--text); }
.svc-menu-item .svc-avatar{ width:28px; height:28px; font-size:.64rem; }
.svc-menu-item small{ display:block; color:var(--text-faint); font-size:.74rem; }
.svc-menu-item .grow{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.svc-orgmenu{ width:280px; max-height:60vh; overflow:auto; }
.svc-check{ color:var(--svc); flex:none; }

/* ---------------------------------------------------------------- layout */
.svc-layout{ display:grid; grid-template-columns:236px minmax(0, 1fr); min-height:calc(100vh - 56px); }
.svc-side{ border-right:1px solid var(--border); padding:18px 12px; position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto; }
.svc-side-title{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; }
.svc-side-title .svc-app-icon{ width:34px; height:34px; border-radius:10px; }
.svc-app-icon.is-logo{ background:none; overflow:hidden; flex:none; }
.svc-app-icon.is-logo img{ width:100%; height:100%; display:block; }
.svc-side-title strong{ font-size:1rem; }
.svc-side-title small{ display:block; color:var(--text-faint); font-size:.74rem; }
.svc-nav{ display:flex; flex-direction:column; gap:2px; }
.svc-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; text-decoration:none;
  color:var(--text-dim); font-weight:600; font-size:.88rem;
}
.svc-nav a:hover{ background:var(--surface-2); color:var(--text); }
.svc-nav a.is-active{ background:var(--svc-soft); color:var(--text); box-shadow:inset 3px 0 0 var(--svc); }
.svc-nav svg{ flex:none; opacity:.8; }
.svc-side-plan{ margin-top:22px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); font-size:.8rem; }
.svc-side-plan strong{ display:block; margin-bottom:3px; }
.svc-side-plan a{ color:var(--svc); font-weight:700; text-decoration:none; }
.svc-trial-btn{ background:none; border:0; padding:0; margin:2px 0; font:inherit; font-weight:700; color:var(--svc); cursor:pointer; text-align:left; }

.svc-main{ padding:28px 32px 80px; max-width:1180px; width:100%; }
.svc-pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.svc-pagehead h1{ margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.svc-pagehead p{ margin:4px 0 0; color:var(--text-faint); font-size:.9rem; }
.svc-crumb{ font-size:.82rem; margin-bottom:6px; }
.svc-crumb a{ color:var(--text-faint); text-decoration:none; }
.svc-crumb a:hover{ color:var(--text); }
.svc-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------------------------------------------------------------- building blocks */
.svc-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.svc-card h2{ margin:0 0 12px; font-size:1.05rem; }
.svc-card h3{ margin:0 0 8px; font-size:.95rem; }
.svc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.svc-card-head h2{ margin:0; }
.svc-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.svc-grid-2{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.svc-stats{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); margin-bottom:16px; }
.svc-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.svc-stat b{ display:block; font-size:1.5rem; letter-spacing:-.02em; }
.svc-stat span{ color:var(--text-faint); font-size:.8rem; }
.svc-tile{ display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; transition:border-color .15s, transform .15s; }
.svc-tile:hover{ border-color:color-mix(in srgb, var(--svc) 45%, var(--border)); transform:translateY(-1px); }
.svc-tile h3{ margin:0 0 6px; font-size:.98rem; }
.svc-tile p{ margin:0; color:var(--text-faint); font-size:.84rem; }
.svc-muted{ color:var(--text-faint); }
.svc-small{ font-size:.82rem; }
.svc-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.82rem; word-break:break-all; }
.svc-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.svc-spread{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.svc-stack > * + *{ margin-top:10px; }
.svc-hr{ height:1px; background:var(--border); margin:16px 0; border:0; }

.svc-badge{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap; background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border); }
.svc-badge.ok{ background:color-mix(in srgb, #22c55e 14%, transparent); color:#16a34a; border-color:color-mix(in srgb, #22c55e 35%, transparent); }
.svc-badge.warn{ background:color-mix(in srgb, #f59e0b 15%, transparent); color:#d97706; border-color:color-mix(in srgb, #f59e0b 35%, transparent); }
.svc-badge.danger{ background:color-mix(in srgb, #ef4444 14%, transparent); color:#dc2626; border-color:color-mix(in srgb, #ef4444 35%, transparent); }
.svc-badge.info{ background:color-mix(in srgb, #3b82f6 14%, transparent); color:#2563eb; border-color:color-mix(in srgb, #3b82f6 35%, transparent); }
.svc-badge.accent{ background:var(--svc-soft); color:var(--svc); border-color:color-mix(in srgb, var(--svc) 35%, transparent); }
:root[data-theme="dark"] .svc-badge.ok, :root[data-theme="midnight"] .svc-badge.ok, :root[data-theme="graphite"] .svc-badge.ok, :root[data-theme="aurora"] .svc-badge.ok{ color:#4ade80; }
:root[data-theme="dark"] .svc-badge.warn, :root[data-theme="midnight"] .svc-badge.warn, :root[data-theme="graphite"] .svc-badge.warn, :root[data-theme="aurora"] .svc-badge.warn{ color:#fbbf24; }
:root[data-theme="dark"] .svc-badge.danger, :root[data-theme="midnight"] .svc-badge.danger, :root[data-theme="graphite"] .svc-badge.danger, :root[data-theme="aurora"] .svc-badge.danger{ color:#f87171; }
:root[data-theme="dark"] .svc-badge.info, :root[data-theme="midnight"] .svc-badge.info, :root[data-theme="graphite"] .svc-badge.info, :root[data-theme="aurora"] .svc-badge.info{ color:#60a5fa; }

.svc-empty{ text-align:center; padding:48px 20px; color:var(--text-faint); }
.svc-empty svg{ color:var(--svc); opacity:.8; }
.svc-empty h3{ color:var(--text); margin:12px 0 6px; }
.svc-empty p{ margin:0 auto 16px; max-width:46ch; }

.svc-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.svc-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.svc-table th{ text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); }
.svc-table td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.svc-table tr:last-child td{ border-bottom:0; }
.svc-table tr.is-link{ cursor:pointer; }
.svc-table tr.is-link:hover td{ background:var(--surface-2); }

/* forms */
.svc-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; min-width:0; }
.svc-field > span{ font-size:.8rem; font-weight:650; color:var(--text-dim); }
.svc-field > small{ font-size:.76rem; color:var(--text-faint); }
.svc-input, .svc-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .svc-field select, .svc-field textarea{
  width:100%; box-sizing:border-box; padding:9px 11px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font:inherit; font-size:.9rem;
}
.svc-field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.svc-input:focus, .svc-field input:focus, .svc-field select:focus, .svc-field textarea:focus{ outline:none; border-color:var(--svc); box-shadow:0 0 0 3px var(--svc-soft); }
.svc-fields{ display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.svc-toggle{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem; margin-bottom:12px; cursor:pointer; }
.svc-toggle input{ margin-top:3px; accent-color:var(--svc); }
.svc-error{ color:var(--danger); font-size:.84rem; min-height:1.2em; margin:6px 0; }
.svc-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.svc-toolbar .svc-input{ max-width:280px; }
.svc-seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); }
.svc-seg button{ border:0; background:none; color:var(--text-dim); padding:7px 12px; font:inherit; font-size:.82rem; font-weight:650; cursor:pointer; }
.svc-seg button.is-active{ background:var(--svc-soft); color:var(--text); }

/* plan and usage */
.svc-plan{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--svc) 28%, var(--border)); background:linear-gradient(90deg, var(--svc-soft), transparent); margin-bottom:18px; font-size:.86rem; }
.svc-plan .grow{ flex:1; min-width:200px; }
.svc-meter{ height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:6px; max-width:260px; }
.svc-meter i{ display:block; height:100%; background:var(--svc); border-radius:6px; }
.svc-meter.full i{ background:var(--danger); }

/* ---------------------------------------------------------------- modal and toast */
.svc-backdrop{ position:fixed; inset:0; z-index:200; background:rgba(3,6,12,.55); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto; animation:svcFade .12s ease-out; }
@keyframes svcFade{ from{ opacity:0; } to{ opacity:1; } }
.svc-modal{ width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.svc-modal.wide{ max-width:820px; }
.svc-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.svc-modal-head h3{ margin:0; font-size:1.05rem; }
.svc-modal-body{ padding:18px 20px; }
.svc-modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); }
.svc-toasts{ position:fixed; right:16px; bottom:16px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.svc-toast{ padding:11px 16px; border-radius:11px; background:var(--surface); border:1px solid var(--border); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); font-size:.87rem; max-width:380px; animation:svcPop .15s ease-out; }
.svc-toast.ok{ border-left:4px solid #22c55e; }
.svc-toast.danger{ border-left:4px solid var(--danger); }

/* ---------------------------------------------------------------- mobile */
@media (max-width:880px){
  .svc-layout{ grid-template-columns:1fr; }
  .svc-side{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--border); padding:8px 10px; }
  .svc-side-title, .svc-side-plan{ display:none; }
  .svc-nav{ flex-direction:row; overflow-x:auto; scrollbar-width:none; }
  .svc-nav a{ white-space:nowrap; }
  .svc-main{ padding:20px 16px 60px; }
  .svc-brand-word, .svc-brand-sep{ display:none; }
  .svc-orgbtn{ max-width:140px; }
  .svc-grid-2{ grid-template-columns:1fr; }
  .svc-launcher, .svc-accountmenu{ width:calc(100vw - 24px); }
}

/* ---------------------------------------------------------------- public pages */
body.pub-body{ margin:0; min-height:100vh; }
.pub-wrap{ max-width:820px; margin:0 auto; padding:34px 18px 60px; }
.pub-wrap.narrow{ max-width:640px; }
.pub-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.pub-brand img.is-logo{ border:0; background:none; border-radius:11px; }
.pub-brand img{ width:44px; height:44px; border-radius:10px; object-fit:contain; background:var(--surface); border:1px solid var(--border); }
.pub-brand-name{ font-weight:700; font-size:1.05rem; }
.pub-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; margin-bottom:18px; box-shadow:0 18px 50px -30px rgba(0,0,0,.5); }
.pub-card h1{ margin:0 0 8px; font-size:1.6rem; letter-spacing:-.02em; }
.pub-card h2{ margin:0 0 12px; font-size:1.1rem; }
.pub-lead{ color:var(--text-dim); margin:0 0 18px; white-space:pre-line; }
.pub-foot{ text-align:center; font-size:.78rem; color:var(--text-faint); margin-top:26px; }
.pub-foot a{ color:inherit; }
.pub-done{ text-align:center; padding:20px 0; }
.pub-done svg{ color:#22c55e; }

/* status page */
.st-overall{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:14px; color:#fff; font-weight:700; font-size:1.08rem; margin-bottom:18px; }
.st-overall.operational{ background:linear-gradient(135deg, #16a34a, #22c55e); }
.st-overall.degraded, .st-overall.maintenance{ background:linear-gradient(135deg, #d97706, #f59e0b); }
.st-overall.partial_outage{ background:linear-gradient(135deg, #ea580c, #f97316); }
.st-overall.major_outage{ background:linear-gradient(135deg, #b91c1c, #ef4444); }
.st-component{ padding:14px 0; border-bottom:1px solid var(--border); }
.st-component:last-child{ border-bottom:0; }
.st-bars{ display:flex; gap:2px; margin-top:10px; height:30px; align-items:stretch; }
.st-bars i{ flex:1; border-radius:2px; background:var(--surface-2); min-width:2px; }
.st-bars i.good{ background:#22c55e; }
.st-bars i.mid{ background:#f59e0b; }
.st-bars i.bad{ background:#ef4444; }
.st-bars-legend{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-faint); margin-top:4px; }
.st-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.st-dot.operational{ background:#22c55e; } .st-dot.degraded, .st-dot.maintenance{ background:#f59e0b; } .st-dot.partial_outage{ background:#f97316; } .st-dot.major_outage{ background:#ef4444; } .st-dot.unknown{ background:var(--text-faint); }
.st-update{ border-left:2px solid var(--border); padding:2px 0 12px 14px; margin-left:4px; }
.st-update b{ text-transform:capitalize; }

/* booking page */
.bk-services{ display:grid; gap:10px; }
.bk-service{ text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; cursor:pointer; }
.bk-service:hover, .bk-service.is-active{ border-color:var(--svc); box-shadow:0 0 0 3px var(--svc-soft); }
.bk-cal{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.bk-cal .dow{ text-align:center; font-size:.72rem; color:var(--text-faint); font-weight:700; padding:4px 0; }
.bk-cal button{ aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:none; color:var(--text-faint); font:inherit; font-size:.88rem; cursor:default; }
.bk-cal button.open{ color:var(--text); background:var(--svc-soft); cursor:pointer; font-weight:700; }
.bk-cal button.open:hover, .bk-cal button.is-active{ border-color:var(--svc); }
.bk-slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.bk-slots button{ padding:10px 6px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-weight:650; cursor:pointer; }
.bk-slots button:hover, .bk-slots button.is-active{ border-color:var(--svc); background:var(--svc-soft); }
.bk-layout{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; }
@media (max-width:720px){ .bk-layout{ grid-template-columns:1fr; } }

/* signing page */
.sg-frame{ width:100%; height:70vh; min-height:420px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.sg-pad{ width:100%; height:180px; border:2px dashed var(--border); border-radius:12px; background:#fff; touch-action:none; cursor:crosshair; display:block; }
.sg-typed{ font-family:"Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size:2rem; }

/* chat thread (desk) */
.th-msg{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:var(--surface); }
.th-msg.mine{ background:var(--svc-soft); border-color:color-mix(in srgb, var(--svc) 30%, var(--border)); }
.th-msg.note{ background:color-mix(in srgb, #f59e0b 10%, var(--surface)); border-color:color-mix(in srgb, #f59e0b 35%, var(--border)); }
.th-meta{ display:flex; justify-content:space-between; gap:10px; font-size:.78rem; color:var(--text-faint); margin-bottom:6px; }
.th-body{ white-space:pre-wrap; word-break:break-word; font-size:.9rem; }

/* forms builder */
.fb-q{ border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px; background:var(--bg); }
.fb-q-head{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.fb-q-head .svc-input{ flex:1; }
.fb-bar{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:.84rem; }
.fb-bar .track{ flex:1; height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
.fb-bar .track i{ display:block; height:100%; background:var(--svc); }
.rating{ display:flex; gap:6px; }
.rating label{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); cursor:pointer; font-weight:700; }
.rating input{ display:none; }
.rating input:checked + span{ color:var(--svc); }
.rating label:has(input:checked){ border-color:var(--svc); background:var(--svc-soft); }

/* print */
@media print{
  .svc-header, .svc-side, .svc-actions, .svc-toolbar, .no-print{ display:none !important; }
  .svc-layout{ display:block; }
  .svc-main{ padding:0; max-width:none; }
  .svc-card{ break-inside:avoid; border-color:#ccc; }
  body{ background:#fff !important; color:#000 !important; }
}

/* Buttons that are links never look like underlined text. */
a.btn, a.btn:hover{ text-decoration:none; }

/* ---------------------------------------------------------------- notices */
.svc-banner{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:11px 14px; border-radius:12px; font-size:.88rem; border:1px solid var(--border); background:var(--surface-2); }
.svc-banner.info{ background:color-mix(in srgb, #3b82f6 10%, var(--surface)); border-color:color-mix(in srgb, #3b82f6 30%, var(--border)); }
.svc-banner.warn{ background:color-mix(in srgb, #f59e0b 12%, var(--surface)); border-color:color-mix(in srgb, #f59e0b 35%, var(--border)); }
.svc-banner.ok{ background:color-mix(in srgb, #22c55e 10%, var(--surface)); border-color:color-mix(in srgb, #22c55e 32%, var(--border)); }

/* ---------------------------------------------------------------- certificates (trust.) */
.tr-brand{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--text); text-decoration:none; }
.tr-brand img{ width:40px; height:40px; object-fit:contain; }
.tr-brand span{ display:flex; flex-direction:column; line-height:1.15; }
.tr-brand small{ color:var(--text-faint); font-size:.78rem; }
.tr-kicker{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--svc); }
.tr-cert{ padding:0; overflow:hidden; }
.tr-cert > :not(.tr-status){ margin-left:26px; margin-right:26px; }
.tr-cert > .svc-row{ margin-bottom:8px; }
.tr-status{ display:flex; align-items:center; gap:12px; padding:16px 26px; color:#fff; margin-bottom:22px; }
.tr-status b{ display:block; font-size:1.12rem; }
.tr-status span{ font-size:.86rem; opacity:.92; }
.tr-status.ok{ background:linear-gradient(135deg, #15803d, #22c55e); }
.tr-status.warn{ background:linear-gradient(135deg, #b45309, #f59e0b); }
.tr-status.off{ background:linear-gradient(135deg, #475569, #94a3b8); }
.tr-head{ display:flex; gap:20px; align-items:flex-start; }
.tr-head h1{ margin:2px 0 10px; font-size:1.75rem; letter-spacing:-.025em; }
.tr-seal{ flex:none; filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--svc) 35%, transparent)); }
.tr-subject small{ display:block; font-size:.74rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.tr-subject strong{ font-size:1.3rem; letter-spacing:-.01em; word-break:break-word; }
.tr-org{ display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--text-dim); font-size:.9rem; }
.tr-org img{ width:22px; height:22px; border-radius:6px; object-fit:contain; }
.tr-statement{ margin:18px 26px; line-height:1.6; color:var(--text-dim); }
.tr-cert h2{ font-size:1rem; margin-top:22px; }
.tr-facts{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
.tr-facts li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg); }
.tr-facts li svg{ flex:none; margin-top:2px; }
.tr-facts li.ok svg{ color:#16a34a; }
.tr-facts li.bad svg{ color:#dc2626; }
.tr-facts b{ display:block; font-size:.9rem; }
.tr-facts small{ color:var(--text-faint); }
.tr-details{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:18px 26px; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.tr-details dt{ font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.tr-details dd{ margin:3px 0 0; font-weight:650; font-size:.92rem; }
.tr-note{ font-size:.78rem; color:var(--text-faint); line-height:1.5; margin-bottom:24px !important; }
.tr-cta{ display:flex; gap:22px; align-items:center; justify-content:space-between; background:linear-gradient(135deg, color-mix(in srgb, #33d6a6 10%, var(--surface)), var(--surface)); }
.tr-cta h2{ margin:0 0 6px; }
.tr-cta p{ margin:0; color:var(--text-dim); font-size:.92rem; }
.tr-cta-actions{ display:flex; flex-direction:column; gap:8px; flex:none; }
.tr-centre-head{ display:flex; gap:18px; align-items:center; margin:8px 0 22px; }
.tr-centre-head h1{ margin:2px 0 6px; font-size:2rem; letter-spacing:-.03em; }
.tr-centre-head p{ margin:0; color:var(--text-dim); max-width:60ch; }
.tr-centre-logo{ width:72px; height:72px; border-radius:18px; object-fit:contain; background:var(--surface); border:1px solid var(--border); flex:none; }
.tr-initial{ display:grid; place-items:center; font-weight:800; font-size:2rem; color:#fff; background:linear-gradient(135deg, #33d6a6, #4f8cff); border:0; }
.tr-summary{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:18px; }
.tr-summary div{ padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); }
.tr-summary b{ display:block; font-size:1.4rem; letter-spacing:-.02em; }
.tr-summary span{ font-size:.8rem; color:var(--text-faint); }
.tr-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-bottom:18px; }
.tr-card{ display:flex; gap:14px; padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.tr-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -22px rgba(0,0,0,.45); }
.tr-card h3{ margin:0; font-size:1rem; }
.tr-card p{ margin:2px 0 8px; color:var(--text-dim); font-size:.9rem; word-break:break-word; }
.tr-card small{ display:block; margin-top:6px; color:var(--text-faint); font-size:.76rem; }
.tr-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:.74rem; font-weight:700; }
.tr-pill.ok{ background:color-mix(in srgb, #22c55e 14%, transparent); color:#15803d; }
.tr-pill.warn{ background:color-mix(in srgb, #f59e0b 16%, transparent); color:#b45309; }
.tr-pill.off{ background:var(--surface-2); color:var(--text-faint); }
.tr-row{ display:flex; gap:16px; align-items:center; }
.tr-link{ display:flex; align-items:center; gap:8px; padding:10px 0; color:var(--text); text-decoration:none; border-top:1px solid var(--border); }
@media (max-width:640px){
  .tr-head{ flex-direction:column; }
  .tr-cta{ flex-direction:column; align-items:stretch; }
  .tr-summary{ grid-template-columns:1fr; }
  .tr-centre-head{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------- the staff course */
.ln-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.ln-head img{ width:42px; height:42px; border-radius:10px; object-fit:contain; }
.ln-head small{ display:block; color:var(--text-faint); font-size:.8rem; }
.ln-hero h1, .ln-cert h1{ margin:0 0 8px; font-size:1.7rem; letter-spacing:-.025em; }
.ln-progress{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.ln-progress .svc-meter{ flex:1; margin:0; }
.ln-progress span{ font-size:.84rem; color:var(--text-dim); white-space:nowrap; }
.ln-cert{ display:flex; gap:22px; align-items:flex-start; background:linear-gradient(135deg, color-mix(in srgb, #4f8cff 10%, var(--surface)), var(--surface)); }
.ln-cert p{ color:var(--text-dim); }
.ln-list{ display:grid; gap:10px; }
.ln-item{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none; }
.ln-item:hover{ border-color:var(--svc); }
.ln-num{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:800; background:var(--surface-2); color:var(--text-dim); }
.ln-item.passed .ln-num{ background:#16a34a; color:#fff; }
.ln-item.retry .ln-num{ background:color-mix(in srgb, #f59e0b 20%, transparent); color:#b45309; }
.ln-body{ flex:1; min-width:0; }
.ln-body b{ display:block; }
.ln-body small{ color:var(--text-faint); }
.ln-meta em{ font-style:normal; font-size:.8rem; font-weight:700; color:var(--text-faint); white-space:nowrap; }
.ln-meta em.ok{ color:#16a34a; }
.ln-meta em.warn{ color:#b45309; }
.ln-back{ display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; color:var(--text-dim); text-decoration:none; font-size:.9rem; }
.ln-lesson{ line-height:1.65; }
.ln-lesson h1{ margin:4px 0 14px; font-size:1.7rem; letter-spacing:-.025em; }
.ln-lesson h3{ margin:22px 0 8px; }
.ln-tips{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.ln-tips li{ display:flex; gap:10px; align-items:flex-start; }
.ln-tips li svg{ color:var(--svc); flex:none; margin-top:5px; }
.ln-example{ margin:18px 0; padding:16px; border-radius:14px; border:1px dashed color-mix(in srgb, #ef4444 45%, var(--border)); background:color-mix(in srgb, #ef4444 5%, var(--surface)); }
.ln-example figcaption{ display:flex; align-items:center; gap:6px; font-weight:800; color:#dc2626; margin-bottom:10px; }
.ln-mail{ border-radius:10px; background:var(--bg); border:1px solid var(--border); padding:12px 14px; font-size:.9rem; }
.ln-mail .hdr{ color:var(--text-dim); font-size:.84rem; }
.ln-mail .btnish{ display:inline-block; margin-top:10px; padding:6px 14px; border-radius:8px; background:#2563eb; color:#fff; font-weight:700; }
.ln-example ul{ margin:10px 0 0; padding-left:20px; color:#b91c1c; font-size:.88rem; }
.ln-quiz h2{ font-size:1.2rem; }
.ln-q{ border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:0 0 12px; }
.ln-q legend{ display:flex; gap:10px; font-weight:700; padding:0 4px; }
.ln-q legend span{ width:24px; height:24px; border-radius:50%; background:var(--svc-soft); color:var(--svc); display:grid; place-items:center; font-size:.8rem; flex:none; }
.ln-opt{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-top:4px; }
.ln-opt:hover{ background:var(--surface-2); }
.ln-opt input{ margin-top:4px; accent-color:var(--svc); }
.ln-opt:has(input:checked){ border-color:var(--svc); background:var(--svc-soft); }
.ln-opt.answer{ border-color:#16a34a; background:color-mix(in srgb, #22c55e 12%, transparent); }
.ln-opt.chosen{ border-color:#dc2626; background:color-mix(in srgb, #ef4444 10%, transparent); }
.ln-why{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:.88rem; color:var(--text-dim); }
.ln-q.right .ln-why svg{ color:#16a34a; flex:none; margin-top:3px; }
.ln-q.wrong .ln-why svg{ color:#dc2626; flex:none; margin-top:3px; }
.ln-result{ padding:10px 14px; border-radius:10px; font-size:.92rem; }
.ln-result.ok{ background:color-mix(in srgb, #22c55e 14%, transparent); color:#15803d; }
.ln-result.bad{ background:color-mix(in srgb, #f59e0b 16%, transparent); color:#92400e; }
@media (max-width:640px){ .ln-cert{ flex-direction:column; } .ln-meta{ display:none; } }

/* ---------------------------------------------------------------- certificates in the account hub */
.ct-kinds{ display:grid; gap:16px; }
.ct-kind{ padding:0; overflow:hidden; }
.ct-kind-head{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--border); }
.ct-kind-head img{ width:40px; height:40px; flex:none; }
.ct-kind-head h2{ margin:0; font-size:1.05rem; }
.ct-kind-head p{ margin:2px 0 0; font-size:.86rem; color:var(--text-dim); }
.ct-item{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 2fr) auto; gap:14px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); }
.ct-item:last-child{ border-bottom:0; }
.ct-item strong{ word-break:break-word; }
.ct-checks{ display:flex; flex-wrap:wrap; gap:6px; }
.ct-check{ display:inline-flex; align-items:center; gap:4px; font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); }
.ct-check.ok svg{ color:#16a34a; }
.ct-check.bad{ color:#b91c1c; border-color:color-mix(in srgb, #ef4444 35%, var(--border)); }
.ct-check.bad svg{ color:#dc2626; }
.ct-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ct-empty{ padding:16px 20px; color:var(--text-dim); font-size:.9rem; }
.ct-embed{ width:100%; min-height:88px; font:12px/1.5 ui-monospace, Consolas, monospace; }
.ct-preview{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px; border-radius:12px; background:repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0/16px 16px; border:1px solid var(--border); }
@media (max-width:760px){ .ct-item{ grid-template-columns:1fr; } .ct-actions{ justify-content:flex-start; } }