/* ==========================================================================
NCERT Question Bank & Paper Builder — Stylesheet
Modern dashboard theme with light/dark support via [data-theme] on .
Print rules (.paper-*) are deliberately kept plain black-on-white and are
NOT affected by theme, since they define the actual printed exam paper.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:wght@600;700&display=swap');
:root{
/* ---- Light theme (default) ---- */
--ink:#181c25;
--ink-soft:#3a3f4b;
--muted:#6b7280;
--muted-2:#8b91a0;
--border:#e4e7ee;
--border-soft:#eef0f5;
--bg:#f4f5f9;
--bg-alt:#eceef4;
--panel:#ffffff;
--panel-2:#fbfbfe;
--accent:#5b5bf0;
--accent-dark:#4444d6;
--accent-light:#eeeeff;
--accent-ring:rgba(91,91,240,.18);
--ok-bg:#e3f7ec; --ok-fg:#0f8a4b; --ok-bd:#bfe9d2;
--warn-bg:#fff3e0; --warn-fg:#a65c00; --warn-bd:#f6dcaf;
--info-bg:#e8effe; --info-fg:#2455c9; --info-bd:#c9d9fb;
--danger-bg:#fdeaea; --danger-fg:#c0392b; --danger-bd:#f6cbc9;
--shadow-sm: 0 1px 2px rgba(20,20,45,.05);
--shadow-md: 0 4px 16px rgba(20,20,45,.07);
--shadow-lg: 0 16px 44px rgba(20,20,45,.14);
--radius-sm:8px;
--radius:12px;
--radius-lg:18px;
--font: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-serif: 'Lora', Georgia, serif;
}
[data-theme="dark"]{
--ink:#eef0f6;
--ink-soft:#c7cbdb;
--muted:#98a0b3;
--muted-2:#767e93;
--border:#2b2f3d;
--border-soft:#252938;
--bg:#12141c;
--bg-alt:#181b26;
--panel:#1a1d29;
--panel-2:#20232f;
--accent:#8686ff;
--accent-dark:#a5a5ff;
--accent-light:#25254a;
--accent-ring:rgba(134,134,255,.28);
--ok-bg:#123425; --ok-fg:#5fdb9c; --ok-bd:#1e5238;
--warn-bg:#3a2a10; --warn-fg:#f0b44e; --warn-bd:#5c451c;
--info-bg:#182a4a; --info-fg:#8ab1ff; --info-bd:#28406e;
--danger-bg:#3a1a19; --danger-fg:#f19b93; --danger-bd:#5c2724;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 4px 18px rgba(0,0,0,.35);
--shadow-lg: 0 20px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
body{
margin:0;
font-family: var(--font);
color:var(--ink);
background:
radial-gradient(1200px 480px at 12% -10%, var(--accent-light), transparent 60%),
var(--bg);
min-height:100vh;
-webkit-font-smoothing:antialiased;
transition:background-color .25s ease, color .25s ease;
}
h2{
font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
margin:0 0 14px; display:flex; align-items:center; gap:8px; font-weight:700;
}
.panel-icon{font-size:14px; filter:saturate(1.1);}
::selection{background:var(--accent); color:#fff;}
/* scrollbars */
*{scrollbar-width:thin; scrollbar-color: var(--muted-2) transparent;}
*::-webkit-scrollbar{width:8px; height:8px;}
*::-webkit-scrollbar-thumb{background:var(--muted-2); border-radius:8px;}
*::-webkit-scrollbar-track{background:transparent;}
/* ===================== Topbar ===================== */
/* Three-zone header: left branding, centered title, right actions. Both the
left and right zones are flex:1 with min-width:0, which forces them to
TRUE equal width regardless of how much content either side holds (a plain
grid 1fr/auto/1fr, tried first, doesn't do this - grid tracks default to
never shrinking below their content's min-width, so the much-wider actions
cluster ends up claiming more space than the slim logo, which drags the
title off-center. min-width:0 on flex children overrides that same default
behavior in flexbox, so this time the two sides are genuinely symmetric and
the title sits exactly between them - if the actions cluster ever needs
more room than its equal half, it wraps onto a second line instead of
stealing width from the other side.) */
.topbar{
position:sticky; top:0; z-index:20;
display:flex; align-items:center;
padding:12px 24px; background:var(--panel); background:color-mix(in srgb, var(--panel) 88%, transparent);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
}
/* ---- Left: The Blackboard branding (school-essentials-supplies identity,
distinct from the app's own NCERT Question Bank title in the center) ---- */
.topbar-left{display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0; justify-content:flex-start;}
.bb-header-logo{flex:0 0 auto; display:flex; line-height:0;}
.bb-header-logo svg{display:block; border-radius:50%;}
.bb-header-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.bb-header-title{font-size:12.5px; font-weight:800; letter-spacing:-.005em; color:var(--ink); white-space:nowrap;}
.bb-header-sub{font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;}
/* ---- Center: the app's own title, sitting exactly between the two equal-width side zones ---- */
.topbar-center{flex:0 0 auto; text-align:center; padding:0 12px;}
.brand{display:flex; align-items:center; gap:12px; justify-content:center;}
.brand-text{display:flex; flex-direction:column; line-height:1.25;}
.brand-title{font-size:16.5px; font-weight:800; letter-spacing:-.01em;}
.brand-sub{font-size:11.5px; color:var(--muted);}
.topbar-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 0; min-width:0; justify-content:flex-end;}
.pill{
background:var(--accent-light); color:var(--accent-dark); padding:7px 13px; border-radius:999px;
font-size:12px; font-weight:700; border:1px solid transparent; white-space:nowrap;
}
/* ===================== Buttons ===================== */
.btn{
border:1px solid transparent; border-radius:9px; padding:9px 15px; font-size:13px;
cursor:pointer; font-weight:600; font-family:inherit; transition:all .15s ease;
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; box-shadow:0 2px 10px var(--accent-ring);}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 4px 16px var(--accent-ring);}
.btn-outline{background:var(--panel); border-color:var(--border); color:var(--ink-soft);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-soft);}
.btn-ghost:hover{background:var(--bg-alt);}
.btn-small{padding:6px 11px; font-size:12px;}
.btn-icon{padding:8px 12px;}
.btn-block{flex:1; width:100%; justify-content:center;}
/* ===================== Layout ===================== */
.layout{
display:grid;
grid-template-columns: 300px 1fr 330px;
gap:18px;
padding:20px 24px 32px;
align-items:start;
max-width:1720px;
margin:0 auto;
}
.panel{
background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
padding:18px; box-shadow:var(--shadow-sm); transition:background-color .25s ease, border-color .25s ease;
}
.panel-settings{position:sticky; top:76px; max-height:calc(100vh - 96px); overflow-y:auto;}
.panel-cart{position:sticky; top:76px; max-height:calc(100vh - 96px); overflow-y:auto;}
.app-footer{
text-align:center; padding:14px 24px 26px; font-size:11px; color:var(--muted-2);
}
/* ===================== Form fields ===================== */
.field{margin-bottom:13px; display:flex; flex-direction:column; gap:5px;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.name-field-row .field-prefix{flex:0 0 88px;}
label{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.01em;}
input[type=text], input[type=number], input[type=date], input[type=tel], select, textarea{
padding:9px 11px; border:1px solid var(--border); border-radius:9px; font-size:13px;
font-family:inherit; width:100%; background:var(--panel-2); color:var(--ink);
transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{color:var(--muted-2);}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=tel]:focus, select:focus, textarea:focus{
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);
}
/* Mobile number fields: fixed +91 prefix box fused to the left edge of the input,
so it reads as one control (like a real phone-number widget) rather than a plain
text box asking for "just digits". */
.phone-input{
display:flex; align-items:stretch; border:1px solid var(--border); border-radius:9px;
background:var(--panel-2); overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease;
}
.phone-input:focus-within{
border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);
}
.phone-prefix{
display:flex; align-items:center; padding:0 10px; font-size:13px; font-weight:700;
color:var(--muted); background:var(--panel); border-right:1px solid var(--border);
letter-spacing:.02em; user-select:none;
}
.phone-input input[type=tel]{
border:none; border-radius:0; background:transparent; flex:1; min-width:0;
padding:9px 11px 9px 9px; box-shadow:none !important;
}
.phone-input input[type=tel]:focus{
outline:none; box-shadow:none;
}
select{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center; padding-right:28px;
}
textarea{resize:vertical;}
.checkbox-field label{display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink-soft); font-size:13px; cursor:pointer;}
input[type=checkbox]{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}
.hint{font-size:11px; color:var(--muted-2);}
hr{border:none; border-top:1px solid var(--border); margin:16px 0;}
.link-btn{background:none; border:none; padding:0; margin:0 0 12px; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:12.5px; font-family:inherit;}
.link-btn:hover{color:var(--accent-dark);}
.reg-login-toggle{margin-bottom:4px;}
.logo-upload{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.logo-preview{max-height:52px; max-width:110px; border:1px solid var(--border); border-radius:8px; padding:4px; background:var(--panel-2);}
.file-btn{
position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px;
padding:8px 13px; border:1px dashed var(--border); border-radius:9px; font-size:12px;
font-weight:600; color:var(--muted); cursor:pointer; background:var(--panel-2);
}
.file-btn:hover{border-color:var(--accent); color:var(--accent);}
.file-btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
/* ===================== Question Browser ===================== */
.filters{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px;}
.filters input{grid-column: span 5;}
.browser-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px;}
.question-list{display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 250px); overflow-y:auto; padding-right:4px;}
.qcard{border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--panel-2); transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;}
.qcard:hover{border-color:var(--accent); box-shadow:var(--shadow-sm);}
.qcard.added{border-color:var(--accent); background:var(--accent-light);}
.qcard-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.qtags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:7px;}
.tag{font-size:9.5px; padding:3px 8px; border-radius:999px; background:var(--bg-alt); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.tag-type{background:var(--info-bg); color:var(--info-fg);}
.tag-marks{background:var(--warn-bg); color:var(--warn-fg);}
.tag-difficulty-easy{background:var(--ok-bg); color:var(--ok-fg);}
.tag-difficulty-medium{background:var(--warn-bg); color:var(--warn-fg);}
.tag-difficulty-hard{background:var(--danger-bg); color:var(--danger-fg);}
.qtext{font-size:13px; line-height:1.5; margin:3px 0 7px; white-space:pre-line; color:var(--ink);}
.qmeta{font-size:11px; color:var(--muted-2); margin-bottom:7px;}
.qoptions{font-size:12px; color:var(--muted); margin:5px 0;}
.qdiagram{margin:7px 0; padding:9px; background:var(--panel); border:1px solid var(--border); border-radius:8px; display:inline-block;}
.qdiagram svg{display:block; max-width:220px; height:auto;}
.tag-diagram{background:#d9f2ef; color:#0f6b62;}
[data-theme="dark"] .tag-diagram{background:#123430; color:#5fd6c9;}
/* ===================== Cart ===================== */
.cart-summary{
font-size:13px; font-weight:700; margin-bottom:12px; color:var(--accent-dark);
background:var(--accent-light); padding:9px 12px; border-radius:var(--radius-sm);
}
.cart-list{display:flex; flex-direction:column; gap:9px;}
.cart-item{border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; font-size:12px; background:var(--panel-2); transition:border-color .15s ease, box-shadow .15s ease;}
.cart-item-top{display:flex; justify-content:space-between; gap:6px; align-items:flex-start;}
.cart-item-text{margin:5px 0; line-height:1.4; color:var(--ink);}
.cart-item-actions{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap;}
.icon-btn{background:var(--panel); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:11px; padding:4px 8px; color:var(--ink-soft); transition:all .12s ease;}
.icon-btn:hover{border-color:var(--accent); color:var(--accent);}
.icon-btn-accent{border-color:var(--accent); color:var(--accent); background:var(--accent-light);}
/* ===================== Internal Choice (OR) pairing ===================== */
.tag-bloom{background:#e3ecfd; color:#2f5da8;}
[data-theme="dark"] .tag-bloom{background:#182c4d; color:#8ab1ff;}
.cart-item.pairing-source{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);}
.cart-item.pairing-target{border-color:var(--ok-fg); box-shadow:0 0 0 3px var(--ok-bg);}
.or-badge{font-size:11px; background:#f1edfc; color:#5b3fb5; border:1px solid #ddd0f7; border-radius:8px; padding:6px 9px; margin:5px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
[data-theme="dark"] .or-badge{background:#241c3d; color:#c4aefc; border-color:#3a2d5e;}
.or-badge-active{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd);}
.or-badge em{font-style:normal; font-weight:700;}
/* ===================== Configurable threshold + Bloom chart ===================== */
.threshold-control{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:12px;}
.threshold-control label{display:block; margin-bottom:5px;}
.threshold-row{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
.threshold-row input{width:60px; padding:5px 7px;}
.threshold-row .hint{margin-left:4px;}
.bloom-chart{display:flex; flex-direction:column; gap:5px; margin:12px 0;}
.bloom-row{display:flex; align-items:center; gap:6px; font-size:10.5px;}
.bloom-label{width:70px; flex:0 0 auto; color:var(--muted);}
.bloom-bar{flex:1; height:8px; background:var(--bg-alt); border-radius:5px; overflow:hidden;}
.bloom-bar-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:5px;}
.bloom-pct{width:32px; flex:0 0 auto; text-align:right; color:var(--muted);}
/* ===================== Welcome Note Modal ===================== */
.modal-overlay{
position:fixed; inset:0; background:rgba(10,10,20,.6); backdrop-filter:blur(3px); z-index:50;
display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-box{
background:var(--panel); color:var(--ink); border-radius:var(--radius-lg); max-width:680px; width:100%;
max-height:88vh; overflow-y:auto; padding:34px 38px; position:relative;
box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.modal-close{
position:absolute; top:14px; right:16px; background:none; border:none;
font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:5px 9px; border-radius:8px;
}
.modal-close:hover{background:var(--bg-alt); color:var(--ink);}
.welcome-title{font-size:23px; margin:0 0 4px; font-family:var(--font-serif); font-weight:700;}
.welcome-sub{font-size:13px; color:var(--muted); margin:0 0 22px;}
.modal-box h3{font-size:13.5px; color:var(--accent-dark); margin:22px 0 7px; text-transform:none; letter-spacing:0; font-weight:700;}
.modal-box p{font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 4px;}
.welcome-closing{font-style:italic; color:var(--muted); margin-top:18px !important;}
.modal-box .btn-block{margin-top:26px;}
/* ---- Blackboard branding credit ---- */
.bb-credit{
display:flex; align-items:center; gap:9px; margin-bottom:18px;
padding:8px 12px; background:var(--bg-alt); border:1px solid var(--border);
border-radius:999px; width:fit-content;
}
.bb-logo{flex:0 0 auto; display:flex; line-height:0;}
.bb-logo svg{display:block; border-radius:50%;}
.bb-credit-text{font-size:11.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em;}
.bb-credit-text strong{color:var(--accent-dark);}
.app-footer{
display:flex; flex-direction:column; align-items:center; gap:9px;
}
.bb-credit-footer{margin-bottom:0;}
/* ---- Welcome modal: stat strip ---- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:18px 0 22px;}
.stat-chip{
text-align:center; background:var(--panel-2); border:1px solid var(--border);
border-radius:var(--radius-sm); padding:11px 6px;
}
.stat-chip strong{display:block; font-size:19px; font-weight:800; color:var(--accent-dark); font-family:var(--font-serif);}
.stat-chip span{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
/* ---- Welcome modal: NEP/NCF/CBSE infographic grid ---- */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 4px;}
.info-card{
background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm);
padding:12px 13px; display:flex; flex-direction:column; gap:3px;
}
.info-icon{font-size:17px; margin-bottom:2px;}
.info-card strong{font-size:12.5px; color:var(--ink);}
.info-card span{font-size:11px; color:var(--muted); line-height:1.4;}
.welcome-note{font-size:12px !important; color:var(--muted) !important; line-height:1.55 !important; margin-top:16px !important;}
@media (max-width: 560px){
.stat-strip{grid-template-columns:repeat(2,1fr);}
.info-grid{grid-template-columns:1fr;}
}
/* ---- Teacher registration / profile forms ---- */
.checkbox-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px;
}
.checkbox-grid label{
display:flex; align-items:center; gap:6px; font-weight:500; color:var(--ink-soft);
font-size:12px; cursor:pointer; text-transform:none; letter-spacing:0;
}
.field-error{
font-size:12px; color:var(--danger-fg); background:var(--danger-bg); border:1px solid var(--danger-bd);
border-radius:8px; padding:8px 10px; margin:4px 0 14px;
}
.field.has-error input, .field.has-error select{border-color:var(--danger-fg);}
@media (max-width: 560px){
.checkbox-grid{grid-template-columns:repeat(2,1fr);}
}
/* ---- Access-gate lock state (see "Access gate hardening" in app.js) ----
Applied to the main layout / topbar action buttons whenever no teacher is
registered on this device, so the app underneath the registration modal
is inert and unreadable rather than fully rendered-but-covered. ---- */
.layout.locked{
filter:blur(9px) saturate(.7);
pointer-events:none;
user-select:none;
}
.topbar-actions.locked-actions #btnClearPaper,
.topbar-actions.locked-actions #btnPreview{
pointer-events:none;
opacity:.35;
}
/* ===================== Blueprint & Compliance Panel ===================== */
.tag-cd{background:#e9e6fb; color:#5b3fb5;}
[data-theme="dark"] .tag-cd{background:#241c3d; color:#c4aefc;}
.blueprint-stats{display:flex; gap:8px; margin-bottom:12px;}
.blueprint-stat{flex:1; text-align:center; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 4px;}
.blueprint-stat strong{display:block; font-size:16px; color:var(--accent-dark);}
.blueprint-stat span{font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.donut-wrap{display:flex; flex-direction:column; align-items:center; gap:9px; margin:12px 0;}
.donut-svg{transform:rotate(0deg);}
.donut-legend{width:100%; font-size:11px; display:flex; flex-direction:column; gap:5px;}
.legend-item{display:flex; align-items:center; gap:6px; color:var(--ink-soft);}
.legend-swatch{width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto;}
.blueprint-messages{display:flex; flex-direction:column; gap:7px; margin-top:9px;}
.blueprint-msg{font-size:11.5px; line-height:1.45; padding:8px 10px; border-radius:8px; border:1px solid transparent;}
.blueprint-msg-ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd);}
.blueprint-msg-warn{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd);}
.blueprint-msg-info{background:var(--info-bg); color:var(--info-fg); border-color:var(--info-bd);}
.answerkey-valuepoints{margin:5px 0 0 16px; font-size:11px; color:var(--muted);}
.vp-row{margin-bottom:1px;}
/* ===================== Responsive ===================== */
@media (max-width: 1180px){
.layout{grid-template-columns:1fr; max-width:720px;}
.panel-settings, .panel-cart{position:static; max-height:none;}
.question-list{max-height:none;}
}
@media (max-width: 900px){
.filters{grid-template-columns:repeat(2,1fr);}
.filters input{grid-column:span 2;}
}
/* ---- Phone-width fixes ----
The layout already collapses to one column below 1180px; below this point
the remaining problems are: a topbar that doesn't wrap, a 5-column filter
grid that turns into unreadable slivers, two-field rows that get squeezed
too narrow to use, oversized modal padding eating half the screen, and
(the biggest one) 13px form inputs, which iOS Safari treats as "small
enough to zoom in on" every time a teacher taps a field - so the page jumps
and re-centers on every single tap. All fixed below. */
@media (max-width: 640px){
/* Sticky positioning + backdrop-filter is what causes the topbar to visually
fight with the mobile browser's own address bar during scroll (a known
rendering quirk on both iOS Safari and Android Chrome) - making it a plain,
non-sticky header on phones sidesteps the whole problem. viewport-fit=cover
(see index.html) plus this safe-area padding keeps it clear of notches too. */
/* The desktop 3-column grid (branding / title / actions side-by-side) doesn't
have room to breathe on a phone - stack the three zones instead, each
centered, in a simple column. */
.topbar{
position:static;
display:flex; flex-direction:column; align-items:center;
gap:8px; row-gap:8px; padding:10px 14px;
padding-top:calc(10px + env(safe-area-inset-top));
}
/* Reset the desktop equal-width flex:1 zones back to natural sizing for
the stacked mobile column layout. */
.topbar-left{flex:0 0 auto;}
.topbar-actions{flex:0 0 auto; width:100%; justify-content:center; gap:6px;}
.brand-sub{display:none;}
.layout{padding:14px 12px 26px; gap:14px;}
.panel{padding:14px;}
.filters{grid-template-columns:1fr;}
.filters input{grid-column:span 1;}
.field-row{flex-wrap:wrap;}
.field-row .field{flex:1 1 140px; min-width:140px;}
/* Prefix and First Name sit in the same row. A plain