/* Yeeba web app. Values come only from v7's tokens.css; the rules marked v7 are copied
   verbatim from the v7 freeze stamp (541e8e8c). */

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font-family:var(--ui-font);color:var(--ink-body);-webkit-font-smoothing:antialiased;background:var(--surface)}
button{font-family:inherit;cursor:pointer}

/* The theme reaches the browser too, so anything it still draws (scrollbars) follows it. */
body.theme-light{color-scheme:light}
body.theme-dark{color-scheme:dark}

/* Nothing is drawn by the browser itself: no native control look, no default focus ring, no
   autofill colours. The focus ring is v7's blue, as on the board. */
button,input,select,textarea{appearance:none}
:focus-visible{outline:var(--bw-2) solid var(--btn);outline-offset:var(--sp-2)}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink-body);caret-color:var(--ink-body);box-shadow:0 0 0 100vmax var(--surface) inset}

/* The screen is v7's .window (shell.html), filling the browser instead of a fixed mock size. */
.app{position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink-body)}

/* v7 shell.html: top bar */
.topbar{height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-16);background:var(--panel-top);border-bottom:var(--bw-1) solid var(--seam)}
.brand{font-size:var(--fs-16);font-weight:var(--fw-800);color:var(--ink-strong)}.topleft{display:flex;align-items:center;gap:var(--sp-14)}
.newpatient{padding:var(--sp-8) var(--sp-14);border:none;border-radius:var(--ctrl-radius);background:var(--btn);color:var(--on-fill);font-size:var(--fs-13);font-weight:var(--fw-600)}
.topright{display:flex;align-items:center;gap:var(--sp-14)}
.ava{width:var(--sz-ava);height:var(--sz-ava);border-radius:50%;background:var(--btn);color:var(--on-fill);font-size:var(--fs-12);font-weight:var(--fw-700);display:flex;align-items:center;justify-content:center}
/* v7 shell.html's avatar and caret, wrapped in one button so the menu opens from either;
   the caret's inline style moved into a class. */
.avabtn{display:flex;align-items:center;gap:var(--sp-14);padding:0;border:none;background:none;color:inherit}
.ava-caret{font-size:var(--g-ctrl);color:var(--ink-faint);margin-left:var(--caret-nudge)}

/* v7 shell.html: user menu, anchored under the avatar; the page beneath stays live */
.umenu{position:absolute;top:var(--menu-top);right:var(--menu-right);width:var(--w-menu);background:var(--menu-bg);border:var(--bw-1) solid var(--card-border);border-radius:var(--ctrl-radius);box-shadow:var(--menu-shadow-geom) var(--menu-shadow);padding:var(--sp-8) 0;z-index:5;font-size:var(--fs-13)}
.umenu .uh{padding:var(--sp-8) var(--sp-16) var(--sp-10);border-bottom:var(--bw-1) solid var(--seam);margin-bottom:var(--sp-6)}
.umenu .un{font-weight:var(--fw-700);color:var(--ink-strong)}.umenu .ur{font-size:var(--fs-11);color:var(--ink-muted);margin-top:var(--sp-2)}
.umenu .ui{display:flex;align-items:center;padding:var(--sp-8) var(--sp-16);color:var(--ink-body)}
.umenu .ui.out{color:var(--destructive)}
/* The theme's segment: the user menu's, at its row's end, and the same in the quiet foot of the page a phone asks
   from (/ask), where the foot places it. */
:is(.umenu,.ak-quiet,.id-strip) .th{display:flex;border-radius:var(--r-6);overflow:hidden;background:var(--seg-on-bg);font-size:var(--fs-11)}
.umenu .th{margin-left:auto}
.umenu .th span{padding:var(--sp-3) var(--sp-8);color:var(--ink-soft)}.umenu .th .on{background:var(--row);color:var(--ink-strong);font-weight:var(--fw-600)}
/* The menu's controls are real buttons; they take the look of v7's spans and rows. */
:is(.umenu,.ak-quiet,.id-strip) .th button{padding:var(--sp-3) var(--sp-8);border:none;background:none;color:var(--ink-soft);font-size:inherit}
:is(.umenu,.ak-quiet,.id-strip) .th button.on{background:var(--row);color:var(--ink-strong);font-weight:var(--fw-600)}
.umenu form{margin:0}
.umenu button.ui{width:100%;border:none;background:none;font-size:inherit;text-align:left}

/* v7 shell.html: the content area */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--page)}

/* v7 dashboard.html: the New patient form grammar, used for the sign-in card */
.np-h{padding:var(--sp-15) var(--sp-20);border-bottom:var(--bw-1) solid var(--seam);display:flex;justify-content:space-between;align-items:center}
.np-title{font-size:var(--fs-16);color:var(--ink-strong)}
.np-body{padding:var(--sp-16) var(--sp-20);overflow-y:auto}
.np-f label{display:block;font-size:var(--fs-12-5);font-weight:var(--fw-600);color:var(--field-ink);margin-bottom:var(--sp-5)}
.np-vfield{display:flex;align-items:center;border:var(--bw-1) solid var(--ctrl-border);border-radius:var(--ctrl-radius);background:var(--surface)}
/* Focus shows on the field's box, as the board's fields do. */
.np-vfield:focus-within{outline:var(--bw-2) solid var(--btn);outline-offset:0;border-color:var(--btn)}
.np-input:focus-visible{outline:none}
.np-input{width:100%;flex:1;min-width:0;padding:var(--sp-9) var(--sp-11);border:none;font-size:var(--fs-13);color:var(--ink-body);background:transparent;font-family:inherit}
.np-input::placeholder{color:var(--addnote)}
.np-full{margin-bottom:var(--sp-12)}
.np-foot{padding:var(--sp-13) var(--sp-20);border-top:var(--bw-1) solid var(--seam);display:flex;justify-content:flex-end;gap:var(--sp-10);background:var(--surface)}
.np-primary{padding:var(--sp-9) var(--np-btn-pad-x);border:none;border-radius:var(--ctrl-radius);background:var(--btn);color:var(--on-fill);font-size:var(--fs-13);font-weight:var(--fw-600)}

/* Sign-in: v7's modal card, standing on the page instead of over a scrim */
.login{align-items:center;padding:var(--modal-top) var(--sp-16) 0}
.login-card{width:var(--modal-w);max-width:100%;background:var(--surface);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-geom) var(--modal-shadow);display:flex;flex-direction:column;overflow:hidden}
.login-error{margin:0;font-size:var(--fs-12-5);color:var(--destructive)}