/* POWER VPL 2.1 · Interface only.
 * Loaded last. Theme colors, font preferences, GM block order/widths and every
 * GMP print layout remain owned by their original modules. No external assets.
 */
@media screen {
  :root {
    --vp-surface-soft: #f6f9fc;
    --vp-accent-soft: #edf5fb;
    --vp-border-soft: #dce5ed;
    --vp-shadow-card: 0 2px 4px #173b5b03, 0 10px 30px #173b5b06;
    --vp-shadow-raised: 0 4px 12px #173b5b08, 0 18px 40px #173b5b0b;
  }
  @supports (color: color-mix(in srgb, white, black)) {
    :root {
      --vp-surface-soft: color-mix(in srgb, var(--navy) 3%, white);
      --vp-accent-soft: color-mix(in srgb, var(--blue) 7%, white);
      --vp-border-soft: color-mix(in srgb, var(--navy) 15%, white);
    }
  }

  /* A calmer frame and a clear navigation hierarchy. */
  html { scroll-padding-top: 112px; }
  body { line-height: 1.45; }
  body.authenticated > main { min-width: 0; }
  .sidebar {
    padding: 22px 12px 16px;
    border-right: 1px solid #ffffff1f;
    box-shadow: 4px 0 24px #173b5b08;
  }
  .brand { padding: 0 12px 13px; }
  .brand-logo-wrap { padding: 12px 10px; border-radius: 13px; box-shadow: 0 5px 18px #001c3424; }
  .brand small { font-size: 10px; letter-spacing: .16em; color: #fff; opacity: .84; }
  .brand-version { font-size: 10px; padding: 4px 9px; letter-spacing: .05em; }
  .nav { gap: 4px; padding: 0 4px 12px 0; scroll-padding-block: 12px; }
  .nav-group-title { color: #fff; opacity: .7; font-size: 10px; letter-spacing: .12em; padding: 17px 12px 7px; }
  body.authenticated .nav button[data-go] {
    position: relative;
    min-height: 47px;
    padding: 8px 11px;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: left;
  }
  .nav button[data-go] > span:not(.nav-icon) { min-width: 0; overflow-wrap:break-word; }
  .nav button[data-go]:hover { background: #ffffff0e; border-color: #ffffff20; }
  .nav button[data-go].active {
    background: #ffffff20;
    border-color: #ffffff30;
    box-shadow: inset 3px 0 #fff, 0 4px 12px #00162712;
  }
  .nav-icon { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; background: #ffffff0e; }
  .nav button.active .nav-icon { background: #ffffff20; }
  .nav-icon svg { width: 20px; height: 20px; }
  .sidebar-footer { padding: 14px 10px 0; border-color: #ffffff24; }
  .sidebar-user { margin-bottom: 3px; font-size: 13px; overflow-wrap:break-word; }
  #sidebarRole { font-size: 11px; opacity: .84; }
  .sidebar-footer .btn.secondary { background: #ffffff10; border-color: #ffffff30; color: #fff; }
  .sidebar-footer .btn.secondary:hover { background: #ffffff20; }
  #customizeEnvironment, #designEnvironment { font-size: 11px; min-height: 36px; }
  #logoutBtn { min-height: 36px; }
  #shutdownBtn { min-height: 34px; }
  .topbar {
    height: auto;
    min-height: 88px;
    padding: 16px 30px;
    gap: 20px;
    background: #fffffffa;
    box-shadow: 0 3px 15px #173b5b03;
  }
  .topbar > div:first-child { min-width: 0; }
  .topbar h2 { font-size: calc(25px * var(--ui-scale, 1)); line-height: 1.2; letter-spacing: -.025em; }
  .topbar p { font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.5; margin-top: 6px; max-width: 80ch; }
  .status-dot { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cfe5d9; border-radius: 999px; background: #f3faf6; font-size: 11px; }
  .status-dot::before { width: 7px; height: 7px; flex: 0 0 7px; box-shadow: 0 0 0 3px #def5e9; }
  .content { padding-top: 26px; padding-bottom: 60px; }

  /* Surfaces with readable hierarchy; no overrides of grid widths or order. */
  body.authenticated .content .card {
    border-radius: 18px;
    padding: 23px;
    box-shadow: var(--vp-shadow-card);
  }
  body.authenticated .content .card > h3,
  body.authenticated .content .card-title-row h3 { font-size: calc(18px * var(--ui-scale, 1)); line-height: 1.35; letter-spacing: -.015em; }
  .card-title-row { align-items: flex-start; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; }
  .card-title-row > div { min-width: 0; }
  .card-title-row .subtitle { margin: 7px 0 0; }
  body.authenticated .content :is(.subtitle, .help, .ari-help, .med-help) { line-height: 1.6; }
  body.authenticated .content :is(.help, .subtitle):not(.stock-card *) { color: #566a7d; }
  .grid > *, .form-grid > *, .ari-settings > *, .med-settings > * { min-width: 0; }
  body.authenticated .content .flowmaker-frame-card { padding: 0; }
  .flowmaker-launch { background: var(--vp-surface-soft); }
  .flowmaker-launch .card-title-row { align-items: center; margin-bottom: 0; }
  .cards { gap: 16px; margin-bottom: 22px; }
  body.authenticated .content .metric { min-height: 143px; position: relative; padding: 19px 20px 17px; overflow: hidden; }
  body.authenticated .metric::before { inset: auto 18px 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; opacity: .5; }
  .metric .label { max-width: calc(100% - 27px); color: var(--navy); font-size: calc(11px * var(--ui-scale, 1)); letter-spacing: .045em; }
  .metric .number { font-size: calc(38px * var(--ui-scale, 1)); font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1.1; margin-top: 15px; }
  .metric .hint { font-size: calc(11px * var(--ui-scale, 1)); margin-top: 7px; line-height: 1.4; }
  .metric::after { content: ""; position: absolute; top: 19px; right: 16px; width: 24px; height: 24px; background-color: var(--blue); opacity: .6; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
  .metric:has(#mLots)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='m3 6 9-4 9 4v13l-9 3-9-3zM3 6l9 4 9-4M12 10v12M7 4l10 4v5'/%3E%3C/svg%3E"); }
  .metric:has(#mProducts)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M5 8h14v13H5zM8 3h8v5H8zM5 12h14M9 16h6'/%3E%3C/svg%3E"); }
  .metric:has(#mCompliant)::after { background-color: var(--green); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
  .metric:has(#mPending)::after { background-color: var(--orange); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
  .metric:has(#mClosed)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='m12 2 8 4v7c0 4-5 7-8 9-3-2-8-5-8-9V6zM8 12l3 3 5-6'/%3E%3C/svg%3E"); }
  .operational-item { padding: 17px 18px; border-radius: 15px; box-shadow: var(--vp-shadow-card); }
  .operational-icon { border-radius: 12px; width: 40px; height: 40px; flex-basis: 40px; }
  .operational-value, .timer-display, .stock-number, .med-timer > b { font-variant-numeric: tabular-nums; }
  .operational-label { font-size: calc(11px * var(--ui-scale, 1)); line-height: 1.4; }
  .stock-card { box-shadow: 0 8px 28px #173b5b13; }
  .stock-number { font-size: 52px; letter-spacing: -.04em; }
  .stock-state { border: 1px solid #ffffff20; padding: 13px 14px; line-height: 1.5; }
  .stock-label { color: #fff; opacity: .88; }

  /* Inputs remain visibly editable. Checkbox/radio targets stay beside labels. */
  body.authenticated :is(.field > label, .legend) { font-size: calc(13px * var(--ui-scale, 1)); line-height: 1.45; color: var(--ink); }
  .field { gap: 7px; }
  :is(.content, dialog, .modal, .auth-panel) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
    min-height: 43px;
    border-radius: 10px;
    padding: 10px 12px;
    line-height: 1.4;
    box-shadow: 0 1px 2px #173b5b03;
  }
  :is(.content, dialog, .modal, .auth-panel) input::placeholder,
  :is(.content, dialog, .modal, .auth-panel) textarea::placeholder { color: #687783; opacity: 1; }
  :is(.content, dialog, .modal, .auth-panel) input.entry,
  :is(.content, dialog, .modal, .auth-panel) select.entry,
  :is(.content, dialog, .modal, .auth-panel) textarea.entry { background: #fffbee; border-color: #d5c993; }
  :is(.content, dialog, .modal, .auth-panel) :is(input, select, textarea):focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--vp-accent-soft), 0 0 0 1px var(--blue);
  }
  :is(.content, dialog, .modal, .auth-panel) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-bg); }
  :is(.content, dialog, .modal, .auth-panel) input[type="file"] { border-style: dashed; background: var(--vp-surface-soft); padding: 7px; }
  :is(.content, dialog, .modal, .auth-panel) input[type="file"]::file-selector-button {
    padding: 8px 12px;
    margin-right: 11px;
    border: 1px solid var(--vp-border-soft);
    border-radius: 7px;
    background: var(--paper);
    color: var(--navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  body.authenticated .content .stock-card :is(h3, .field > label, .legend) { color: #fff; }
  body.authenticated .content .stock-card .help { color: #fff; }
  :is(.content, dialog, .modal) fieldset { min-width: 0; padding: 17px; border-radius: 13px; }
  :is(.content, dialog, .modal) legend { color: var(--navy); padding: 0 7px; font-size: calc(13px * var(--ui-scale, 1)); font-weight: 700; line-height: 1.45; max-width: 100%; }
  :is(.content, dialog, .modal) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--blue); }
  :is(.content, dialog, .modal) .check-pill,
  :is(.content, dialog, .modal) .radio-row label,
  #productionDialog .check-pill {
    cursor: pointer;
    min-height: 47px;
    padding: 11px 13px;
    gap: 10px;
    border-radius: 11px;
    background: #fffdf5;
    border-color: #ddd5b4;
    line-height: 1.5;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--ink);
  }
  :is(.content, dialog, .modal) .check-pill input,
  :is(.content, dialog, .modal) .radio-row input { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 0; padding: 0; box-shadow: none; }
  :is(.content, dialog, .modal) .check-pill > span { min-width: 0; overflow-wrap:break-word; }
  :is(.content, dialog, .modal) .check-pill:has(input:checked),
  :is(.content, dialog, .modal) .radio-row label:has(input:checked),
  #section-new .check-pill:has(input:checked), #section-new .radio-row label:has(input:checked),
  #productionDialog .check-pill:has(input:checked) { border-color: var(--blue); background: var(--vp-accent-soft); box-shadow: inset 0 0 0 1px var(--blue); color: var(--navy); }
  :is(.content, dialog, .modal) .check-pill:has(input:disabled),
  :is(.content, dialog, .modal) .radio-row label:has(input:disabled) { cursor: not-allowed; opacity: .68; }
  .radio-row { gap: 9px; }
  .check-grid { gap: 10px; }
  #productionDialog .prod-review { background: var(--vp-surface-soft); padding: 16px; margin-top: 21px; }
  #productionDialog .prod-review strong { font-size: calc(13px * var(--ui-scale, 1)); }
  #productionDialog .prod-review span span { line-height: 1.5; margin-top: 3px; }

  /* Strong primary actions and restrained secondary actions. */
  :is(.content, dialog, .modal, .auth-panel, .topbar) .btn {
    min-height: 42px;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: calc(13px * var(--ui-scale, 1));
    line-height: 1.4;
    text-decoration: none;
    text-align: center;
    max-width: 100%;
    white-space: normal;
  }
  :is(.content, dialog, .modal, .auth-panel) .btn.primary { box-shadow: 0 3px 8px #173b5b12; }
  :is(.content, dialog, .modal, .auth-panel, .topbar) .btn.secondary { background: var(--paper); color: var(--navy); border-color: var(--vp-border-soft); }
  :is(.content, dialog, .modal, .auth-panel, .topbar) .btn.secondary:hover:not(:disabled) { background: var(--vp-accent-soft); border-color: var(--blue); filter: none; }
  :is(.content, dialog, .modal, .auth-panel) .btn:active:not(:disabled) { transform: translateY(1px); }
  .actions { gap: 10px; margin-top: 21px; align-items: center; }
  :is(.content, dialog, .modal) .btn[aria-busy="true"] { cursor: progress; }
  :is(button, a, summary, [tabindex="0"], input, select, textarea):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .sidebar :is(button, a, input, select):focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .check-pill:focus-within, .radio-row label:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }

  /* Wide results are intentionally scrollable; text and actions stay readable. */
  .table-wrap { border-radius: 13px; border-color: var(--vp-border-soft); scrollbar-width: auto; scrollbar-color: #92a7b8 #eef3f7; overscroll-behavior-x: contain; }
  .table-wrap::-webkit-scrollbar { width: 11px; height: 11px; }
  .table-wrap::-webkit-scrollbar-track { background: #eef3f7; border-radius: 8px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #92a7b8; border-radius: 8px; border: 2px solid #eef3f7; }
  .table-wrap table { line-height: 1.55; }
  .table-wrap th { padding: 13px 12px; font-weight: 600; background: var(--navy); border-right: 1px solid #ffffff0e; }
  .table-wrap td { padding: 12px; border-color: #e5ecf2; }
  .table-wrap tbody tr:last-child td { border-bottom: 0; }
  .table-wrap tbody tr:hover { box-shadow: inset 3px 0 var(--blue); }
  .table-wrap tbody tr.row-closed:hover { background: var(--green-bg); }
  .table-wrap tbody tr.row-not-closed:hover { background: var(--red-bg); }
  .table-wrap tbody tr.row-pending:hover { background: #fffdf1; }
  body.authenticated .table-wrap td .btn { min-height: 35px; padding: 7px 10px; font-size: calc(11px * var(--ui-scale, 1)); }
  body.authenticated .table-wrap td .mini-select { min-height: 35px; padding: 7px 9px; }
  .tag { gap: 4px; align-items: center; font-size: calc(10px * var(--ui-scale, 1)); padding: 5px 9px; line-height: 1.3; }
  .empty { padding: 37px 22px !important; font-size: calc(13px * var(--ui-scale, 1)); line-height: 1.7; }
  .ari-empty, .chart-empty { line-height: 1.7; background: var(--vp-surface-soft); }
  .notice, .ari-note, .med-note { padding: 14px 16px; border-radius: 12px; line-height: 1.65; font-size: calc(12px * var(--ui-scale, 1)); overflow-wrap:break-word; }
  .notice.info { color: var(--navy); background: var(--vp-accent-soft); border-color: var(--vp-border-soft); }
  #toast { border: 1px solid #ffffff30; border-radius: 13px; padding: 16px 19px; box-shadow: var(--vp-shadow-raised); line-height: 1.6; }

  /* Each module keeps its own content, under the same visual language. */
  body.authenticated .med-hero,
  body.authenticated .bit-heading { border-radius: 18px; box-shadow: 0 10px 28px #173b5b0e; }
  .med-hero { padding: 25px 27px; border: 1px solid #ffffff20; }
  .med-hero-icon { width: 78px; height: 78px; border-radius: 17px; padding: 11px; }
  .med-hero-copy { min-width: 0; }
  .med-hero h2 { font-size: calc(31px * var(--ui-scale, 1)); line-height: 1.15; }
  .med-hero p { font-size: calc(13px * var(--ui-scale, 1)); line-height: 1.6; color: #fff; opacity: .91; }
  .med-user { color: #fff; opacity: .95; }
  .med-steps { gap: 12px; }
  .med-step { padding: 15px; border-radius: 13px; border-color: var(--vp-border-soft); align-items: flex-start; }
  .med-step > b { background: var(--vp-accent-soft); color: var(--navy); width: 31px; height: 31px; font-size: 13px; }
  .med-step strong { color: var(--navy); margin-bottom: 3px; line-height: 1.4; }
  .med-step span { color: var(--muted); line-height: 1.55; }
  body.authenticated .med-tab.active { background: var(--blue); border-color: var(--blue); }
  .med-tab, .ari-tab { min-height: 42px; border-radius: 11px; }
  .med-drop { background: var(--vp-surface-soft); border-color: var(--vp-border-soft); border-radius: 13px; padding: 20px 15px; }
  .med-drop:hover { border-color: var(--blue); }
  .med-lot-head { background: var(--vp-surface-soft); }
  .ari-stage-group { border-color: var(--vp-border-soft); box-shadow: 0 2px 8px #173b5b03; }
  .ari-group-name b { color: var(--navy); }
  .ari-expand, .med-count { color: var(--blue); }
  .ari-plan { border-color: var(--vp-border-soft); }
  .ari-plan summary, .ari-stage-group > summary { min-height: 46px; }
  .plan-card { border-radius: 17px; box-shadow: var(--vp-shadow-card); border-color: var(--vp-border-soft); border-top-color: var(--blue); }
  .plan-date { background: var(--vp-accent-soft); border: 1px solid var(--vp-border-soft); border-radius: 10px; font-size: 20px; }
  .plan-date.plan-unknown { background: var(--orange-bg); border-color: var(--status-yellow-edge); }
  .plan-personal-settings { background: var(--vp-surface-soft); }
  .plan-personal-settings .help { margin-bottom: 17px; }
  .plan-personal-choice { background: var(--vp-surface-soft); border-radius: 13px; }
  .plan-personal-choice.is-selected { background: var(--vp-accent-soft); }
  .plan-personal-choice .plan-personal-check { background: var(--paper); }
  .production-shortcut { padding: 15px 17px; background: var(--vp-surface-soft); border: 1px solid var(--vp-border-soft); border-radius: 13px; }
  .intake-hero { border-left: 4px solid var(--blue); }
  .intake-hero h2 { font-size: calc(27px * var(--ui-scale, 1)); letter-spacing: -.025em; line-height: 1.3; }
  .intake-hero p { font-size: calc(13px * var(--ui-scale, 1)); }
  .intake-hero > svg { opacity: .76; max-width: 30%; flex-shrink: 0; }
  .intake-code { padding: 7px 11px; border-radius: 9px; font-size: 12px; }
  .intake-steps span { border-radius: 12px; padding: 15px; font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.6; }
  .intake-steps b { background: var(--vp-accent-soft); color: var(--navy); }
  .intake-storage > div { background: var(--vp-surface-soft); border: 1px solid var(--vp-border-soft); padding: 13px; border-radius: 11px; }
  .intake-storage > div:has(input:checked) { border-color: var(--blue); background: var(--vp-accent-soft); }
  .intake-storage label { line-height: 1.5; font-size: calc(13px * var(--ui-scale, 1)); cursor: pointer; }
  .intake-storage input[type="checkbox"] { flex: 0 0 19px; width: 19px; height: 19px; min-width: 19px; }
  .intake-total { border-radius: 10px; border-left-color: var(--cyan); font-size: 17px; }
  .intake-workflow { gap: 8px; padding: 6px; border: 1px solid var(--vp-border-soft); border-radius: 13px; background: var(--vp-surface-soft); width: fit-content; max-width: 100%; }
  .intake-workflow .btn { min-height: 40px; }
  .content .intake-workflow .btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
  .content .intake-workflow .btn.active:hover { background: var(--navy-2); color: #fff; }
  .bit-photo-row { border-radius: 14px; background: var(--vp-surface-soft); }
  .bit-photo-row img { border-radius: 9px; border: 1px solid var(--line); }
  .experience-history-item { border-color: var(--vp-border-soft); }
  .experience-star { border-radius: 13px; min-height: 72px; }
  .experience-star.selected { box-shadow: inset 0 -2px var(--status-yellow-edge); }
  #followupJourney .journey-step { border-radius: 13px; }
  #followupJourney .journey-step.active { background: var(--vp-accent-soft); }
  #section-new .vp-guided-review { background: var(--vp-surface-soft); border-color: var(--vp-border-soft); border-radius: 14px; }
  #section-new .vp-guided-assistant { background: var(--vp-surface-soft); }
  #section-new .guide-active { background: var(--vp-accent-soft); border-color: var(--vp-border-soft); }
  .sampling-config { background: var(--vp-surface-soft); border-color: var(--vp-border-soft); border-radius: 12px; }
  .reactor-card { border-color: var(--vp-border-soft); }
  .sampling-preview { border-radius: 10px; padding: 13px 14px; line-height: 1.6; }
  .search-status-card { border-radius: 14px; background: var(--vp-surface-soft); }

  /* Dialogs retain their original form layout and native modal semantics. */
  dialog { box-shadow: 0 24px 90px #112e4c30; }
  dialog::backdrop { background: #10273c91; }
  .modal-backdrop { background: #10273c91; }
  .modal { border-radius: 19px; border: 1px solid #ffffff66; padding: 27px; }
  :is(.modal, dialog) :is(h2, h3) { line-height: 1.3; letter-spacing: -.02em; overflow-wrap:break-word; }
  :is(.modal, dialog) p { line-height: 1.6; }
  #productionDialog > .card-title-row, #productionDialog > form > .card-title-row { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
  #productionDialog details { background: var(--vp-surface-soft); padding: 16px; border-radius: 12px; }
  #productionDialog details > summary { min-height: 25px; line-height: 1.5; }

  /* Sign-in is scrollable on short screens and when the keyboard is open. */
  .auth-screen {
    overflow-y: auto;
    align-items: safe center;
    padding: 34px 20px;
    background: radial-gradient(ellipse at 13% 12%, #397da14a, transparent 40%), radial-gradient(ellipse at 92% 85%, #21a4a847, transparent 45%), linear-gradient(140deg, #0d213c, #123b5c 60%, #155e72);
  }
  .auth-panel { width: min(470px, 100%); padding: 36px; border: 1px solid #ffffff88; border-radius: 24px; box-shadow: 0 12px 35px #00162826, 0 35px 100px #00162840; margin-block: auto; }
  .auth-logo { width: 271px; margin-bottom: 15px; }
  .auth-heading { margin-bottom: 29px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
  .auth-heading p { font-size: 10px; letter-spacing: .13em; color: #526b80; }
  .auth-view h2 { font-size: 23px; letter-spacing: -.025em; }
  .auth-view > p { font-size: 13px; line-height: 1.6; margin-bottom: 23px; }
  .auth-panel .field label { font-size: 13px; }
  .auth-panel .field input { min-height: 46px; font-size: 15px; }
  .auth-panel .actions .btn { width: 100%; min-height: 46px; font-size: 14px; }
  .auth-panel .help { line-height: 1.6; }

  /* The original sidebar remains the non-JS fallback. */
  #vpNavToggle, #vpNavClose, #vpNavShade { display: none; }
  .vp-skip-link { position: fixed; left: 16px; top: 12px; z-index: 11000; padding: 12px 17px; border: 2px solid var(--blue); border-radius: 9px; background: #fff; color: var(--navy); font-weight: 700; text-decoration: none; transform: translateY(-180%); }
  .vp-skip-link:focus { transform: translateY(0); }
  body:not(.authenticated) .vp-skip-link { display: none; }
  #vpNavToggle { gap: 8px; }
  #vpNavToggle svg, #vpNavClose svg { width: 19px; height: 19px; flex: 0 0 19px; }
  #vpNavClose { align-items: center; justify-content: center; gap: 8px; background: #ffffff14; color: #fff; border: 1px solid #ffffff3a; border-radius: 10px; min-height: 39px; padding: 8px 12px; margin: 0 10px 14px; font: inherit; font-size: 12px; }
}

@media screen and (min-width: 761px) and (max-width: 1120px) {
  .content { padding: 23px 22px 50px; }
  .topbar { padding-inline: 22px; }
  .topbar h2 { font-size: calc(23px * var(--ui-scale, 1)); }
  .status-dot { max-width: 165px; font-size: 10px; }
  body.authenticated .content .card { padding: 20px; }
}

@media screen and (max-width: 760px) {
  .content { padding: 18px 14px 40px; }
  .topbar { min-height: 81px; gap: 10px; padding: 13px 14px; }
  .topbar h2 { font-size: calc(21px * var(--ui-scale, 1)); }
  .topbar p { font-size: calc(11px * var(--ui-scale, 1)); }
  .status-dot { font-size: 10px; padding: 5px 8px; }
  body.authenticated .content .card { padding: 18px; border-radius: 15px; }
  .cards { gap: 10px; }
  body.authenticated .content .metric { padding: 16px; min-height: 135px; }
  .metric .number { font-size: calc(32px * var(--ui-scale, 1)); }
  .metric::after { right: 12px; top: 16px; width: 21px; height: 21px; }
  .metric .label { max-width: calc(100% - 22px); font-size: calc(10px * var(--ui-scale, 1)); }
  .card-title-row { gap: 12px; }
  .table-wrap td { padding: 10px; }
  .table-wrap th { padding: 11px 10px; }
  .med-hero { gap: 15px; padding: 20px; }
  .med-hero-icon { width: 63px; height: 63px; border-radius: 14px; padding: 8px; }
  .med-hero h2 { font-size: calc(27px * var(--ui-scale, 1)); }
  .med-step { min-width: min(180px, 100%); }
  .intake-workflow { width: 100%; }
  .intake-workflow .btn { flex: 1 1 180px; }
  #toast { left: 14px; right: 14px; bottom: 14px; min-width: 0; max-width: none; }
  .modal-backdrop { padding: 10px; }
  .modal { padding: 20px; max-height: 94dvh; }

  /* An accessible drawer exposes every allowed module name at phone widths. */
  body.vp-polished-nav.authenticated > main { margin-left: 0; width: 100%; }
  body.vp-polished-nav.authenticated > .sidebar {
    width: min(304px, calc(100vw - 35px));
    height: 100dvh;
    padding: 19px 12px max(14px, env(safe-area-inset-bottom));
    z-index: 80;
    transform: translateX(-105%);
    visibility: hidden;
    box-shadow: 15px 0 60px #001a3840;
  }
  body.vp-polished-nav.vp-nav-open > .sidebar { transform: translateX(0); visibility: visible; }
  body.vp-polished-nav.vp-nav-open { overflow: hidden; }
  body.vp-polished-nav .sidebar .brand { padding: 0 12px 15px; }
  body.vp-polished-nav .sidebar .brand-logo-wrap { width: 215px; padding: 10px 12px; margin-bottom: 10px; }
  body.vp-polished-nav .sidebar .brand-logo { aspect-ratio: auto; height: 42px; object-fit: contain; }
  body.vp-polished-nav .sidebar .brand small { display: block; }
  body.vp-polished-nav .sidebar .brand-version { display: inline-block; }
  body.vp-polished-nav .sidebar .nav button[data-go] { justify-content: flex-start; font-size: calc(14px * var(--ui-scale, 1)); }
  body.vp-polished-nav .sidebar .nav button[data-go] > span:not(.nav-icon) { display: inline; }
  body.vp-polished-nav .sidebar .nav-group-title { text-align: left; font-size: 10px; letter-spacing: .1em; padding: 13px 12px 7px; }
  body.vp-polished-nav .sidebar-footer { padding: 13px 10px 0; }
  body.vp-polished-nav .sidebar-footer .sidebar-user,
  body.vp-polished-nav .sidebar-footer #sidebarRole { display: block; }
  body.vp-polished-nav .sidebar-footer > br { display: none; }
  body.vp-polished-nav .sidebar-footer #sidebarRole { margin-bottom: 10px; }
  body.vp-polished-nav .sidebar-footer :is(#logoutBtn, #shutdownBtn) { min-height: 38px; }
  body.vp-polished-nav .sidebar-footer .env-full { display: inline; }
  body.vp-polished-nav .sidebar-footer .env-short { display: none; }
  body.vp-polished-nav #vpNavToggle, body.vp-polished-nav #vpNavClose { display: inline-flex; }
  body.vp-polished-nav #vpNavShade:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: #10273c91; cursor: pointer; }
  body.vp-polished-nav .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  body.vp-polished-nav .topbar #vpNavToggle { grid-row: 1 / 3; padding: 10px; min-width: 44px; align-self: center; }
  body.vp-polished-nav .topbar > div { grid-column: 2; }
  body.vp-polished-nav .topbar > .status-dot { justify-self: start; }
  body.vp-polished-nav .topbar #vpNavToggle span { display: none; }
  body.vp-polished-nav .topbar p { margin-top: 4px; }
}

@media screen and (max-width: 430px) {
  .content { padding: 16px 12px 35px; }
  body.authenticated .content .card { padding: 16px; }
  .topbar { padding-inline: 12px; }
  .topbar h2 { font-size: calc(20px * var(--ui-scale, 1)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric .hint { font-size: calc(10px * var(--ui-scale, 1)); }
  .metric .number { font-size: calc(30px * var(--ui-scale, 1)); }
  .med-hero { padding: 17px; }
  .med-steps { gap: 8px; }
  .med-step { flex-basis: 100%; min-width: 0; }
  .intake-hero h2 { font-size: calc(24px * var(--ui-scale, 1)); }
  .production-shortcut { padding: 13px; }
  .production-shortcut .btn { width: 100%; }
  .auth-screen { padding: 20px 14px; }
  .auth-panel { padding: 27px 23px; border-radius: 20px; }
  .auth-logo { width: 250px; }
  .auth-heading { margin-bottom: 24px; padding-bottom: 19px; }
}

/* On short windows the entire menu can scroll, so account controls cannot
 * consume all the space available for modules (including GM design tools). */
@media screen and (max-height: 650px) {
  body.authenticated > .sidebar { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff66 transparent; }
  body.authenticated > .sidebar .nav { overflow: visible; flex-shrink: 0; }
  body.authenticated > .sidebar .sidebar-footer { margin-top: 14px; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  :is(.btn, .check-pill, .radio-row label, .nav button[data-go], .experience-star, .med-tab, .ari-tab) { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .section.active { animation: vp-section-enter .18s ease-out both; }
  @keyframes vp-section-enter { from { opacity: .5; } to { opacity: 1; } }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Presentation helpers never become part of a printed GMP document. */
@media print {
  #vpNavToggle, #vpNavClose, #vpNavShade, .vp-skip-link { display: none !important; }
}

/* Reports remain grouped with their source load in Base de datos. */
.intake-database-item { min-width:16rem; display:grid; gap:6px; padding:8px 0; }
.intake-database-item + .intake-database-item { border-top:1px solid #d6e1e9; }
.intake-database-item .btn { justify-self:start; }