/* The hosted build's sign-in, consent and account screens (#auth-root) and the account menu over the hub (#auth-bar).
   Same colours and fonts as the start page (shell.css). Only the hosted build loads this file. */
#auth-root {
  --a-navy: #0B2D33; --a-ink: #0B2D33; --a-muted: #4F6B6E; --a-line: #D3E2E1; --a-bg: #EEF5F4; --a-card: #FFFFFF;
  --a-accent: #0B7A5C; --a-good-soft: #E2F6EE; --a-bad: #C03A2E; --a-bad-soft: #FDF0EE; --a-warn: #9A6516; --a-warn-soft: #FDF6EA;
  --a-font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --a-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  background: var(--a-bg); color: var(--a-ink); font-family: var(--a-font); font-size: 15px; line-height: 1.5; min-height: 100vh;
}
html[lang="km"] #auth-root, html[lang="km"] #auth-bar { --a-font: 'Manrope', 'Noto Sans Khmer', 'Segoe UI', system-ui, sans-serif; }
#auth-root[hidden], #auth-bar[hidden] { display: none; }
#auth-root .a-band { background: var(--a-navy); color: #FFFFFF; padding-top: env(safe-area-inset-top, 0px); }
#auth-root .a-in { max-width: 720px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
#auth-root .a-band .a-in { display: flex; align-items: center; gap: 10px; padding-block: 12px; }
#auth-root .a-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--a-accent); display: inline-flex; align-items: center; justify-content: center; }
#auth-root .a-lang { margin-left: auto; }
#auth-root .a-lang select { font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 8px; border: 1px solid #1E4A50; background: #123E45; color: #FFFFFF; }
#auth-root .a-main { padding-block: 24px 48px; }
#auth-root .a-main.a-wide { max-width: 1000px; }
#auth-root h1 { font-size: 26px; line-height: 1.25; margin: 4px 0 14px; }
#auth-root h1:focus { outline: none; }
#auth-root h2 { font-size: 18px; margin: 0 0 8px; }
#auth-root .a-lead { color: var(--a-muted); max-width: 64ch; }
#auth-root .a-small { color: var(--a-muted); font-size: 13.5px; }
#auth-root .a-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
#auth-root .a-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
#auth-root .a-form.a-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
#auth-root .a-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
#auth-root .a-form label.a-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
#auth-root .a-form input:not([type="checkbox"]), #auth-root .a-form select { font: inherit; font-weight: 400; font-size: 16px; padding: 9px 11px; border-radius: 9px; border: 1px solid #8FB3B5; background: #FFFFFF; color: var(--a-ink); min-width: 0; }
#auth-root .a-form input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; }
#auth-root .a-btn { font: 600 15px/1 var(--a-font); min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--a-line); background: #FFFFFF; color: var(--a-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#auth-root .a-btn.primary { background: var(--a-navy); border-color: var(--a-navy); color: #FFFFFF; }
#auth-root .a-btn.danger { color: var(--a-bad); }
#auth-root .a-btn.small { min-height: 34px; font-size: 13.5px; padding: 0 10px; }
#auth-root .a-btn:disabled { opacity: .55; cursor: wait; }
#auth-root .a-btn:focus-visible, #auth-root a:focus-visible, #auth-root input:focus-visible, #auth-root select:focus-visible { outline: 3px solid var(--a-accent); outline-offset: 2px; }
#auth-root .a-msg { padding: 10px 12px; border-radius: 9px; margin: 0 0 14px; }
#auth-root .a-msg.a-good { background: var(--a-good-soft); color: var(--a-accent); }
#auth-root .a-msg.a-info { background: var(--a-good-soft); color: var(--a-ink); }
#auth-root .a-msg.a-bad { background: var(--a-bad-soft); color: var(--a-bad); }
#auth-root .a-draft { background: var(--a-warn-soft); color: var(--a-warn); border: 1px dashed var(--a-warn); padding: 8px 12px; border-radius: 9px; font-weight: 700; }
#auth-root .a-list { padding-left: 20px; max-width: 70ch; }
#auth-root .a-list li { margin: 0 0 8px; }
#auth-root .a-steps { padding-left: 22px; }
#auth-root .a-qrbox { background: #FFFFFF; display: inline-block; padding: 10px; border-radius: 12px; border: 1px solid var(--a-line); }
#auth-root .a-qr { width: 220px; height: 220px; display: block; }
#auth-root .a-secret, #auth-root .a-ident { font-family: var(--a-mono); font-size: 15px; word-break: break-all; background: #FFFFFF; border: 1px solid var(--a-line); border-radius: 8px; padding: 4px 8px; }
#auth-root p.a-ident { display: inline-block; margin: 0 0 8px; }
#auth-root .a-link { word-break: break-all; font-size: 13px; }
#auth-root .a-back { color: var(--a-accent); font-weight: 600; text-decoration: none; }
#auth-root .a-table-wrap { overflow-x: auto; }
#auth-root .a-table { border-collapse: collapse; width: 100%; font-size: 14px; }
#auth-root .a-table th, #auth-root .a-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--a-line); vertical-align: top; }
#auth-root .a-table tr.a-closed td { color: var(--a-muted); }
#auth-root .a-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#auth-root .a-addr { word-break: break-all; }
#auth-root .a-rows { list-style: none; padding: 0; margin: 0 0 12px; }
#auth-root .a-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--a-line); }
#auth-root .a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the account menu over the hub, bottom right (the start page's own data button is bottom left) */
#auth-bar { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 2147483000; font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; font-size: 14px; }
#auth-bar .a-menu > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-end; padding: 8px 14px; border-radius: 999px; background: #0B2D33; color: #FFFFFF; box-shadow: 0 4px 16px rgba(11,45,51,.25); }
#auth-bar .a-menu > summary::-webkit-details-marker { display: none; }
#auth-bar .a-who { font-weight: 700; }
#auth-bar .a-role { font-size: 12px; color: #D3E2E1; }
#auth-bar .a-menu-body { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; color: #0B2D33; border: 1px solid #D3E2E1; border-radius: 12px; padding: 10px; min-width: 240px; box-shadow: 0 8px 24px rgba(11,45,51,.2); }
#auth-bar .a-btn { font: 600 14px/1.2 inherit; font-family: inherit; min-height: 38px; padding: 8px 12px; border-radius: 9px; border: 1px solid #D3E2E1; background: #FFFFFF; color: #0B2D33; cursor: pointer; text-align: left; text-decoration: none; }
#auth-bar .a-msg { margin: 0 0 4px; padding: 8px 10px; border-radius: 8px; background: #E2F6EE; color: #0B7A5C; }
#auth-bar .a-msg.a-bad { background: #FDF0EE; color: #C03A2E; }
@media print { #auth-bar { display: none !important; } }