/* Public onboarding and help center. Loaded after the existing light theme. */
:root { --shortcut-height: 76px; }
.service-shortcuts { position: sticky; top: 0; z-index: 55; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(16px, 3vw, 42px); border-bottom: 1px solid #dce6f4; background: #fff; }
.service-brand { display: flex; align-items: center; gap: 10px; color: #172033; text-decoration: none; min-width: 0; }
.service-brand b { font-size: 18px; overflow-wrap: anywhere; }
.service-brand small { color: #77849a; font-size: 12px; }
.service-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #347fe3; color: white; font-size: 24px; }
.service-shortcut-buttons { display: flex; gap: 10px; min-width: 0; }
.service-primary-actions { display: flex; align-items: stretch; gap: 10px; min-width: 0; max-width: 100%; }
.service-primary-actions > .service-shortcut { flex: 1 1 0; min-width: 0; }
.service-shortcut { max-width: 260px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 20px; background: #f4f8fe; border: 1px solid #d6e4f8; border-radius: 11px; color: #245b9f; font: inherit; cursor: pointer; }
.service-shortcut b { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-shortcut > span { font-size: 20px; font-weight: 600; }
.service-shortcut:hover { background: #eaf2ff; }
.service-shortcut.recharge-shortcut { background: #347fe3; border-color: #347fe3; color: #fff; box-shadow: 0 5px 14px #347fe31c; }
.service-shortcut.recharge-shortcut:hover { background: #2469c5; }
.sidebar { top: var(--shortcut-height); height: calc(100dvh - var(--shortcut-height)); }
.topbar { top: var(--shortcut-height); min-width: 0; }
.main-area, .content-area, .send-layout, .send-form, .send-side, .panel { min-width: 0; }
.app-shell { min-height: calc(100dvh - var(--shortcut-height)); }
.auth-shell { min-height: calc(100dvh - var(--shortcut-height)); }
.auth-back-button { display: flex; align-items: center; min-height: 44px; color: #2469c5; margin: 0 0 12px; font-size: 13px; }
.auth-panel-wrap { min-height: calc(100dvh - var(--shortcut-height)); }
#guestLoginButton { min-height: 44px; padding: 10px 16px; white-space: nowrap; font-size: 13px; }
.guest-hint { display: flex; align-items: center; gap: 12px; margin: -6px 0 20px; padding: 12px 16px; background: #edf4ff; border: 1px solid #d9e7fb; border-radius: 11px; color: #425c80; font-size: 13px; }
.guest-hint > span:first-child { font-size: 20px; color: #347fe3; }
.guest-hint i { font-style: normal; margin: 0 8px; color: #7d97b9; }
.guest-hint button { margin-left: auto; min-height: 44px; border: none; background: transparent; color: #2469c5; cursor: pointer; white-space: nowrap; }
.send-form > .info-banner { margin: 12px 22px 0; }
.page-heading h2 { font-size: clamp(21px, 2.2vw, 27px); }
.page-heading p { max-width: 64ch; line-height: 1.7; font-size: 13px; }
.type-card b { font-size: 13px; line-height: 1.5; }
.type-card small { font-size: 11px; line-height: 1.5; }
.type-card { min-height: 76px; }
.type-card > span:not(.type-icon) { min-width: 0; overflow-wrap: anywhere; }
.type-card .type-icon { flex-shrink: 0; }
.type-description { overflow-wrap: anywhere; }
.nav-item, .icon-button, .text-button, .input-action, .table-action, .filter-tabs button, .auth-tabs button, .user-popover button, .send-evidence-status button { min-height: 44px; }
.icon-button { min-width: 44px; }
input, select, textarea { max-width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #347fe3; outline-offset: 3px; }
.stat-card strong { overflow-wrap: anywhere; }
.stat-card small + small { display: block; margin-top: 6px; }
#remainingRiskValue, #remainingVerifyValue { font-size: clamp(20px, 2vw, 27px); }
.tutorial-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.tutorial-toolbar label { display: grid; gap: 8px; font-size: 12px; font-weight: 600; color: #526078; }
.tutorial-toolbar input, .tutorial-toolbar select { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #d9e3ef; border-radius: 9px; background: #f8fafd; color: #172033; font: inherit; font-size: 15px; }
.tutorial-count { margin: 20px 0 12px; color: #69768b; font-size: 13px; }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tutorial-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 150ms, transform 150ms; }
.tutorial-card:hover { transform: translateY(-3px); border-color: #9ebfed; }
.tutorial-cover, .tutorial-cover-placeholder { width: 100%; height: 146px; object-fit: cover; }
.tutorial-cover-placeholder { display: grid; place-items: center; color: #347fe3; font-size: 38px; background: linear-gradient(135deg, #eaf3ff, #f4f8fe); border-bottom: 1px solid #e4ecf7; }
.tutorial-card:nth-child(3n+2) .tutorial-cover-placeholder { color: #159a78; background: linear-gradient(135deg, #e8f6f0, #f3faf8); }
.tutorial-card:nth-child(3n+3) .tutorial-cover-placeholder { color: #7458df; background: linear-gradient(135deg, #eeebff, #f8f6ff); }
.tutorial-card-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 22px; }
.tutorial-card-category, .tutorial-detail-category { align-self: flex-start; font-size: 12px; font-weight: 600; color: #2469c5; }
.tutorial-card h3 { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.tutorial-card p { flex: 1; margin: 0; font-size: 13px; line-height: 1.8; color: #67758b; overflow-wrap: anywhere; }
.tutorial-card-read { padding-top: 10px; color: #2469c5; font-weight: 600; font-size: 13px; }
.tutorial-empty { text-align: center; padding: 48px 22px; color: #647187; }
.tutorial-empty b { display: block; color: #344158; font-size: 18px; }
.tutorial-empty p { font-size: 14px; line-height: 1.8; }
.tutorial-detail { width: min(100%, 860px); margin-inline: auto; padding: clamp(20px, 4vw, 44px); }
.tutorial-detail > .text-button { display: inline-flex; align-items: center; margin-bottom: 22px; font-size: 14px; color: #2469c5; }
.tutorial-detail-category { margin: 0 0 12px; }
.tutorial-detail h2 { margin: 0 0 16px; font-size: clamp(23px, 3vw, 30px); line-height: 1.5; overflow-wrap: anywhere; }
.tutorial-detail-summary { color: #69768b; font-size: 15px; line-height: 1.9; border-bottom: 1px solid #e2e9f2; padding-bottom: 24px; overflow-wrap: anywhere; }
.tutorial-blocks { display: grid; gap: 24px; margin-top: 28px; }
.tutorial-text-block { margin: 0; color: #344158; font-size: 16px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.tutorial-blocks img { display: block; width: auto; max-width: 100%; max-height: 800px; margin: auto; border-radius: 10px; object-fit: contain; }
.tutorial-figure { margin: 0; }
.tutorial-figure figcaption { margin-top: 10px; font-size: 12px; color: #77849a; text-align: center; overflow-wrap: anywhere; }
.tutorial-resource-link { display: flex; align-items: center; min-height: 48px; padding: 14px 18px; background: #eef5ff; border: 1px solid #d7e6fa; border-radius: 10px; text-decoration: none; color: #2469c5; font-size: 15px; overflow-wrap: anywhere; }
.tutorial-detail-footer { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 30px; margin-top: 32px; border-top: 1px solid #e2e9f2; }
.content-action-dialog { width: min(470px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.content-action-heading { display: flex; justify-content: space-between; align-items: center; text-align: left; margin-top: -12px; }
.content-action-heading .icon-button { border: 1px solid #e0e7f0; border-radius: 10px; font-size: 22px; }
.content-action-dialog .dialog-card > p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-action-image { display: block; max-width: 100%; max-height: 350px; object-fit: contain; margin: 0 auto 22px; border-radius: 10px; }
.content-action-buttons { display: grid; gap: 12px; }
.content-action-buttons a { text-decoration: none; }
.content-action-unavailable { padding: 14px; background: #f5f8fc; border-radius: 10px; }
@media (max-width: 1240px) {
  .service-brand small { display: none; }
  .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  :root { --shortcut-height: 68px; }
  .service-shortcuts { min-height: 68px; padding: 10px 14px; gap: 10px; }
  .service-brand { display: none; }
  .service-shortcut-buttons { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .service-shortcut { min-width: 0; min-height: 48px; padding: 8px 4px; gap: 5px; border-radius: 9px; }
  .service-shortcut b { font-size: 13px; line-height: 1.35; }
  .service-shortcut > span { font-size: 17px; }
  .topbar { gap: 8px; }
  .topbar-actions { gap: 8px; }
  .topbar-title { min-width: 0; }
  .topbar-title .mini-label { display: none; }
  .topbar .mode-badge { display: none; }
  .page-heading { margin-bottom: 18px; gap: 10px; }
  .page-heading .policy-label { font-size: 10px; }
  .content-area { padding: 20px 14px; }
  .guest-hint { padding: 10px 12px; margin: 0 0 18px; gap: 8px; flex-wrap: wrap; font-size: 12px; }
  .guest-hint > span:first-child { display: none; }
  .guest-hint i { margin: 0 3px; }
  .guest-hint button { padding: 0; }
  .message-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px; }
  .type-card { min-height: 88px; padding: 12px 10px; gap: 8px; }
  .type-card .type-icon { width: 27px; height: 31px; font-size: 12px; }
  .type-card > i { display: none; }
  .type-card b { font-size: 12px; }
  .type-card small { font-size: 10px; }
  .send-form > .info-banner { margin-inline: 17px; }
  .tutorial-toolbar { grid-template-columns: minmax(0, 1fr) minmax(110px, .65fr); padding: 14px; gap: 10px; }
  .tutorial-toolbar input, .tutorial-toolbar select { font-size: 16px; }
  .tutorial-grid { gap: 12px; }
  .tutorial-card-body { padding: 16px; }
  .tutorial-card h3 { font-size: 16px; }
  .tutorial-card p { font-size: 13px; }
  .tutorial-detail-footer { flex-direction: column; }
  .tutorial-detail-footer .button { width: 100%; }
  input, select, textarea { font-size: 16px; }
  .auth-card-body { padding-inline: 22px; }
}
@media (max-width: 480px) {
  .tutorial-grid { grid-template-columns: minmax(0, 1fr); }
  .tutorial-cover, .tutorial-cover-placeholder { height: 128px; }
  .tutorial-toolbar { grid-template-columns: minmax(0, 1fr); }
  .guest-hint { justify-content: space-between; }
  .guest-hint button { margin-left: 0; }
  .guest-hint > span { font-size: 11px; }
  .type-card { gap: 6px; padding: 10px 8px; }
  .type-card .type-icon { width: 24px; }
  .panel-head .muted-text { font-size: 10px; }
  .service-shortcut b { font-size: 12px; }
  #guestLoginButton { padding-inline: 12px; }
  .content-action-buttons .button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-card { transition: none; }
  .tutorial-card:hover { transform: none; }
}

.service-shortcut b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 180px; }
/* Language stays reachable on small screens without moving form inputs. */
.language-picker{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0;color:#526078}
.language-picker select{min-height:44px;max-width:150px;border:1px solid #dbe2ee;border-radius:10px;background:#fff;color:#24324b;padding:8px}
code, input[inputmode="numeric"], input[type="tel"], input[autocomplete="one-time-code"] { direction:ltr; unicode-bidi:isolate; }
/* Content sets the header height; labels can wrap at every text size. */
.service-shortcut b{white-space:normal;text-overflow:clip;display:block;overflow-wrap:anywhere}
.service-shortcut-buttons{flex-wrap:wrap;justify-content:flex-end}
.language-picker{flex-shrink:0}
.language-picker select{font-size:16px}
.confirm-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
.dialog-card dl dd{overflow-wrap:anywhere;min-width:0}
input,select,textarea{scroll-margin-block-start:calc(var(--shortcut-height) + 90px)}
.service-shortcuts{padding-top:max(12px,env(safe-area-inset-top));padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
.content-area{padding-bottom:max(24px,env(safe-area-inset-bottom))}
body:not(.admin-body){font-size:16px}
body:not(.admin-body) .field>span:first-child,body:not(.admin-body) .consent-check{font-size:16px}
@media(max-width:1024px){
 :root{--shortcut-height:124px}
 .service-brand{display:none}
 .service-shortcut-buttons{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .language-picker{grid-column:1/-1;justify-content:flex-end}
 .language-picker select{max-width:180px}
 .service-shortcut{width:100%;max-width:none;min-height:48px;padding:8px 5px}
 .topbar-title{flex:1;min-width:0}
 .topbar-actions{min-width:0;flex-shrink:0}
 .topbar-title h1{overflow-wrap:anywhere}
}
@media(max-width:480px){
 .dialog-actions{grid-template-columns:1fr}
 .dialog-actions .button{min-height:48px}
 .auth-panel-wrap{min-height:calc(100dvh - var(--shortcut-height));padding:18px 12px}
 .service-shortcut>span{display:none}
 .service-shortcut b{font-size:14px}
 .page-heading p,.guest-hint,.info-banner p,.type-card b{font-size:14px}
 .send-side{margin-top:0}
}
@media(max-width:360px){.type-card .type-icon{display:none}}
 .service-shortcut.partner-entry{background:#3349c9;color:#fff;font-size:14px;font-weight:700;min-height:48px;white-space:normal;overflow-wrap:anywhere}
 @media(max-width:1024px){.service-primary-actions{grid-column:1/-1;order:1;width:100%;gap:8px}.service-shortcut-buttons .language-picker{order:0}.service-shortcut-buttons>.service-shortcut{order:2}}
 @media(max-width:1024px){.service-shortcuts .service-brand{display:flex;position:absolute;top:14px;left:14px;max-width:calc(100% - 184px);height:44px}.service-brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-brand-mark{flex:none}.language-picker>span{display:none}.language-picker select{width:150px}}

/* Let tall navigation scroll with the page so it cannot cover form controls. */
:root[data-navigation-flow] .service-shortcuts,:root[data-navigation-flow] .topbar{position:relative;top:auto}
:root[data-navigation-flow] .sidebar{top:0;height:100dvh}
:root[data-navigation-flow] input,:root[data-navigation-flow] select,:root[data-navigation-flow] textarea{scroll-margin-block-start:20px}
@media(max-height:600px){.service-shortcuts,.topbar{position:relative;top:auto}.sidebar{top:0;height:100dvh}input,select,textarea{scroll-margin-block-start:20px}}
.channel-choice{min-width:0;margin:0;padding:20px;border:0;border-bottom:1px solid var(--line,#e2e8f0)}
.channel-choice legend{padding:0;font-weight:700;font-size:1.05rem}
.channel-grid{display:flex;gap:12px;margin-top:10px}
.channel-card{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:76px;padding:14px;border:1px solid var(--line,#dbe3ed);border-radius:14px;cursor:pointer;background:var(--surface,#fff)}
.channel-card input{width:20px;height:20px;flex:none;accent-color:var(--primary,#477bda)}
.channel-card span{min-width:0}.channel-card b,.channel-card small{display:block;overflow-wrap:anywhere}
.channel-card small{margin-top:5px;color:var(--muted,#64748b);font-size:.8rem}
.channel-card.selected{border-color:var(--primary,#477bda);box-shadow:0 0 0 1px var(--primary,#477bda)}
.channel-card:focus-within{outline:3px solid var(--primary,#477bda);outline-offset:3px}
.channel-card.unavailable{opacity:.6;cursor:not-allowed}
.channel-choice p{margin:12px 0 0;font-size:.78rem;color:var(--muted,#64748b);line-height:1.6}
@media(max-width:380px){.channel-choice{padding:16px}.channel-grid{gap:8px}.channel-card{padding:10px;gap:7px;min-height:86px}.channel-card b{font-size:.85rem}}
.channel-admin-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:12px}
.channel-admin-types label{display:flex;align-items:center;gap:8px;min-height:44px;overflow-wrap:anywhere}
#externalApiSecret{box-sizing:border-box;width:100%;max-width:100%;min-height:160px;padding:12px;overflow-wrap:anywhere;font-family:monospace}
#channelPolicyForm select,#externalApiForm input,#externalApiForm select{min-width:0;width:100%;min-height:44px}