/* v1.9.7 — Readable UI for every page, role, laptop and phone.
 * Default is LARGE. Users may choose STANDARD or EXTRA LARGE in the header.
 */
:root{--ui-base-font:18px;--ui-line:1.52;--ui-touch:46px}
html[data-ui-font="standard"]{--ui-base-font:16px}
html[data-ui-font="large"]{--ui-base-font:18px}
html[data-ui-font="xlarge"]{--ui-base-font:20px}
html{font-size:var(--ui-base-font);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{font-size:1rem!important;line-height:var(--ui-line);letter-spacing:.005em}
p,li,dd,dt,label,span,div{line-height:inherit}

/* Clear hierarchy without tiny supporting text. */
.head h1{font-size:1.62rem!important;line-height:1.2}.panel h2,.workspace-section-head h2{font-size:1.2rem!important;line-height:1.25}
h2{font-size:1.28rem;line-height:1.25}h3{font-size:1.08rem;line-height:1.3}
.muted{font-size:.9rem;line-height:1.5;color:#abc0d2}
.mini,small,.task-meta,.future-tag,.kpi-open-hint,.role-card-hint,.project-form-help,.project-readonly-note,.login-security-note,.sync-pre{font-size:.8rem!important;line-height:1.45!important}
.badge,.pill,.date-chip{font-size:.78rem!important;line-height:1.3;padding:6px 10px}
.card .label{font-size:.82rem!important;line-height:1.35}.card .value,.workspace-section .card .value{font-size:1.55rem!important;line-height:1.2}
.notice,.flow,.subtle,.v193-alert,.rbac-project-note{font-size:.92rem!important;line-height:1.55!important}
.rbac-project-note b{font-size:.82rem!important}

/* Buttons and form controls remain comfortable for mouse and touch. */
.btn,.tabs button,.stage-btn,.workspace-quick,.v180-quick,aside button{font-size:.92rem!important;line-height:1.35;min-height:var(--ui-touch);padding:10px 14px}
.btn.small,.btn.tiny{font-size:.82rem!important;min-height:42px;padding:9px 12px}
.modal-close,.mobile-nav-btn{min-width:48px!important;width:48px!important;height:48px!important;min-height:48px!important;font-size:1.45rem!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #65b5ff!important;outline-offset:2px!important}
button,input,select,textarea{font-size:1rem;line-height:1.35}
.field label,.top-controls label{font-size:.78rem!important;font-weight:700;line-height:1.35}
.field input,.field select,.field textarea,.search-input,.inline-edit,.inline-qty,.inline-price,.wh-qty-input{min-height:var(--ui-touch);font-size:1rem!important;padding:10px 12px}
textarea{min-height:110px}.field{min-width:0}

/* Navigation, header and account context. */
aside{font-size:1rem}aside button{padding:12px 14px;margin:4px 0}aside .nav-section{font-size:.75rem!important;font-weight:800;color:#86a4bd}
.brand strong{font-size:1.15rem!important;line-height:1.2}.brand span{font-size:.78rem!important;line-height:1.35}
.session-box{font-size:.86rem!important;min-height:var(--ui-touch);padding:8px 11px}
.top-controls select,.top-controls input{font-size:.86rem!important;min-height:42px;padding:8px 10px}
.strict-project-badge span,.strict-project-badge small{font-size:.7rem!important}.strict-project-badge b{font-size:.82rem!important}
.readable-control{min-width:142px!important}.readable-control select{min-width:142px;max-width:160px!important;border-color:#3d6b91!important;background:#102a40!important;font-weight:700}

/* Tables are readable everywhere; scrolling is explicit on small screens. */
table{font-size:.88rem!important;line-height:1.48}
th,td{padding:11px 12px;vertical-align:top}
th{font-size:.84rem;font-weight:800;letter-spacing:.01em}
td .btn{margin:2px}.table-wrap{scrollbar-gutter:stable;outline:none}
.ui-scroll-hint{display:none;margin:7px 0;padding:8px 10px;border-left:4px solid var(--blue);border-radius:7px;background:#0d2135;color:#c5daeb;font-size:.8rem;font-weight:700}
.audit-line{font-size:.86rem!important;line-height:1.45;padding:9px 0}

/* Existing role-specific small text is raised to a safe minimum. */
.workspace-quick b,.v180-quick b,.v180-task-main b,.project-service-card b{font-size:.95rem!important}
.workspace-quick span,.v180-quick span,.v180-context-strip,.superadmin-nav-note,.superadmin-perspective,.raa-order-selector{font-size:.8rem!important;line-height:1.45}
.qa-choice{min-height:var(--ui-touch);font-size:.9rem}.action-stack{gap:8px}
.toast{font-size:.92rem;line-height:1.45;padding:13px 17px}
.login-card{font-size:1rem}.login-card h1{font-size:1.5rem!important}.login-card .field label{font-size:.88rem!important}.login-btn{min-height:50px;font-size:1rem!important}

/* Laptop: remove the old 13 px compression and keep content flexible. */
@media (min-width:901px) and (max-width:1600px){
  body{font-size:1rem!important}
  .topbar{padding:11px 14px;gap:14px;flex-wrap:wrap}
  .top-controls{gap:9px;flex-wrap:wrap;overflow:visible}
  .top-controls label{font-size:.72rem!important}.top-controls select,.top-controls input{font-size:.8rem!important;min-height:40px;max-width:180px}
  .brand{min-width:240px;max-width:340px}.brand img{width:50px;height:50px}.brand span{font-size:.72rem!important;max-width:240px}
  main{padding:20px}.card,.panel{padding:16px}
}

/* Phone/tablet: larger text, single-column actions, large targets and clear table guidance. */
@media(max-width:900px){
  :root{--ui-touch:48px}
  body{font-size:1rem!important}
  .topbar{padding:10px 12px}.mobile-head-row{min-height:54px}
  .brand img{width:48px;height:48px}.brand strong{font-size:1.05rem!important}.brand span{font-size:.72rem!important;max-width:60vw}
  .top-controls{gap:10px;margin-top:10px;padding:2px 0 8px}.top-controls>label,.top-controls>.session-box{min-width:150px}
  .top-controls select,.top-controls input{min-height:46px;font-size:.9rem!important}
  aside#nav{width:min(90vw,370px);padding:80px 14px 22px}aside#nav button{font-size:1rem!important;min-height:52px;padding:13px 14px}
  main{padding:16px}.head{gap:12px}.head h1{font-size:1.48rem!important}.head .muted{font-size:.92rem}
  .btn,.tabs button,.stage-btn,.workspace-quick,.v180-quick{min-height:48px;font-size:.95rem!important}
  .btn.small,.btn.tiny{min-height:46px;font-size:.86rem!important}
  .table-wrap{max-height:62dvh}.ui-scroll-hint{display:block}
  table{font-size:.9rem!important}th,td{padding:12px}
  .modal-card{font-size:1rem}.modal-card h2{font-size:1.35rem}
  .v195-item-row{padding:14px;gap:12px}
}

@media(max-width:640px){
  main{padding:12px}.card,.panel{padding:15px}
  .head h1{font-size:1.42rem!important}.panel h2{font-size:1.18rem!important}
  .toolbar,.head .toolbar,.v195-tabs{gap:9px}
  .toolbar .btn,.head .btn,.action-stack .btn{width:100%;min-height:50px}
  .action-stack{display:grid;grid-template-columns:1fr}
  .tabs{display:grid;grid-template-columns:1fr;overflow:visible}.tabs button{width:100%;white-space:normal}
  .readable-control{min-width:160px!important}.readable-control select{min-width:160px}
  .login-card{padding:24px 18px}.login-card h1{font-size:1.4rem!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}