/* 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; text-decoration:none; }
.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; } }
/* The dialog always fits the screen: its title and Save/Cancel stay in view
   and only the form between them scrolls, which matters most on a phone. */
.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);
  display:flex; flex-direction:column; max-height:calc(100vh - 12vh); max-height:calc(100dvh - 12vh); }
.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; overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto; min-height:0; }
.svc-modal-head, .svc-modal-foot{ flex:none; }
@media (max-width:600px){
  .svc-backdrop{ padding:10px; align-items:center; }
  .svc-modal{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); border-radius:14px; }
  .svc-modal-head{ padding:14px 16px; }
  .svc-modal-body{ padding:14px 16px; }
  .svc-modal-foot{ padding:12px 16px; }
  .svc-modal-foot .btn{ flex:1; justify-content:center; }
}
.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){
  /* minmax(0, 1fr), not 1fr: a plain 1fr column is at least as wide as its
     widest content, so one table made the whole page scroll sideways. The
     table scrolls inside its own box instead. The tab strip keeps its own
     height and the page takes the rest, or a short page left a tall empty
     band under the tabs. */
  .svc-layout{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 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; }
  /* The tabs scroll sideways; the fade on the right says so. */
  .svc-nav{ flex-direction:row; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .svc-nav::-webkit-scrollbar{ display:none; }
  .svc-nav a{ white-space:nowrap; }
  /* top:auto, because the desktop sidebar's sticky offset (top:56px) would
     otherwise push this strip 56px down, on top of the page heading. */
  .svc-side{ position:relative; top:auto; }
  .svc-side::after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:26px; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--bg));
  }
  .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; }
}
/* On a narrow phone the organization button keeps only its icon (the name is
   in the menu it opens), so the service's own name is never cut short. */
@media (max-width:440px){
  .svc-orgbtn{ padding:6px 8px; gap:4px; }
  .svc-orgbtn span{ display:none; }
  .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:0; }
/* Ninety days have to fit a phone: the gaps shrink before the page widens. */
@media (max-width:520px){ .st-bars{ gap:1px; } .st-bars i{ border-radius:1px; } }
.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-row > div{ min-width:0; }
/* Long addresses (a security contact, a link) wrap instead of widening the page. */
.pub-card a{ overflow-wrap:anywhere; }
.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; } }

/* Small print is still something people tap, so give it room on a phone. */
@media (max-width:680px){
  .pub-foot a, .svc-foot a{ display:inline-block; padding:6px 3px; }
}