/* onboard module styles. Uses only helm.css v2 tokens and type scale. */
.ob-l{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:28px 40px 22px}
.ob-top{display:flex;align-items:center;gap:12px}
.ob-main{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:400px;margin:0 auto;padding:40px 0}
.ob-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.ob-form{display:flex;flex-direction:column;gap:16px}
.ob-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.ob-acts .btn-ink,.ob-acts .btn-line{min-height:40px;padding:9px 16px}
.ob-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12px;margin:6px 0}
.ob-or::before,.ob-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ob-prov{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border-radius:var(--r-md);
  border:1px solid var(--line)!important;background:var(--canvas);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .16s,border-color .16s}
.ob-prov:hover{background:var(--sel);border-color:var(--ink-faint)!important}
.ob-prov:active{transform:scale(.99)}
.ob-prov svg{width:18px;height:18px;flex:none}
.ob-list{display:flex;flex-direction:column;gap:8px}
.ob-switch{margin:20px 0 0;font-size:13px;color:var(--ink-3)}
.ob-switch button{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ob-static{min-height:36px;display:flex;align-items:center;padding:8px 11px;border-radius:var(--r-md);background:var(--sel);font-size:13.5px;color:var(--ink-2)}
.ob-agency{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px 14px;border:1px solid var(--line)!important;border-radius:var(--r-lg);background:var(--canvas);text-align:left;transition:border-color .16s,background .16s}
.ob-agency:hover{border-color:var(--ink-faint)!important;background:var(--sel)}
.ob-agency .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-agency .cx{color:var(--ink-3)}
.ob-mono{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.ob-status{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--raised)}
.ob-status .ico{color:var(--ink-3);margin-top:1px}
.ob-status.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.ob-status.warn .ico{color:var(--warn)}
.ob-status .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ob-copy{display:flex;gap:8px}
.ob-copy .inp2{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.ob-err-code{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
/* right panel: one real product moment */
.ob-r{background:var(--raised);border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:40px;min-height:0;overflow:hidden}
.ob-moment{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px}
.ob-cap{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.ob-card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-menu);overflow:hidden}
.ob-card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.ob-card-h .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ob-card-b{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.ob-msg{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ob-card .draft{margin:0}
.ob-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 16px}
.ob-row + .ob-row{border-top:1px solid var(--line-soft)}
.ob-row .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ob-row .t span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-row .time{font-size:12px;color:var(--ink-3)}
.ob-req{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.ob-req .grow{flex:1}
.ob-mark{width:84px;height:84px;color:var(--ink-faint)}
/* sign-in and sign-up: follows today's production page (app.html #signin):
   navy ground with a green glow, large wordmark, one centred card. Colours are the
   product's dark-theme --bg and --brand; the page looks the same in both themes. */
.ob.ob-auth{grid-template-columns:minmax(0,1fr);overflow:auto;
  background:radial-gradient(90% 70% at 8% -10%,rgba(33,201,140,.72),rgba(33,201,140,0) 58%),#021B42}
.ob-auth-stage{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(28rem,calc(100% - 32px));margin:auto;padding:40px 0}
.ob-auth-mark{font-size:44px;color:#FFFEFA}
.ob-auth-mark .wordmark-dot{color:#21C98C}
.ob-auth-card{width:100%;padding:22px;border-radius:var(--r-xl);background:#F7F6F0;color:#262626;border:1px solid rgba(38,38,38,.08);box-shadow:var(--shadow-float);
  display:flex;flex-direction:column;align-items:stretch;text-align:center;
  --ink:#262626;--ink-2:#5A5954;--ink-3:#6B6A63;--line:rgba(19,18,16,.12);--sel:#F0EFEA;--canvas:#FFFEFA}
.ob-auth-card .t-meta{margin-top:6px}
.ob-auth-prov{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ob-auth-card .ob-switch{margin-top:16px}
.ob-auth .toast{bottom:28px}
@media (max-width:820px){
  .ob-l{padding:22px 16px}
  .ob-r{display:none}
}