/* Shared Pages presentation, also used unchanged by the isolated local review. */
html[data-visual-variant="proposal"] body {
  --visual-button-shadow: 0 2px 3px #201c2214, inset 0 1px 0 #ffffffb3;
}
html[data-visual-variant="proposal"] :is(main, dialog) button:not(.link):not(.unit):not(.close) {
  min-height:48px;border-radius:10px;box-shadow:var(--visual-button-shadow);
}
html[data-visual-variant="proposal"] :is(main, dialog) button:not(.link):not(.unit):not(.close):active:not(:disabled) {
  transform:translateY(1px);box-shadow:inset 0 1px 2px #201c2226;
}
html[data-visual-variant="proposal"] .card {border-radius:14px;box-shadow:0 5px 16px #201c220d,0 1px 3px #201c220a}
html[data-visual-variant="proposal"] #loginForm {display:grid;gap:20px;margin-top:24px}
html[data-visual-variant="proposal"] .login .primary {margin-top:4px}
/* A single outer shadow avoids the pale inset edge looking like a second button. */
html[data-visual-variant="proposal"] #loginForm > button.primary {
  box-shadow:0 2px 4px #201c2226;
}
html[data-visual-variant="proposal"] #loginForm > button.primary:active:not(:disabled) {
  box-shadow:0 1px 2px #201c221a;
}
/* Keep the real labels available to assistive technology while showing native hints. */
html[data-visual-variant="proposal"] #loginForm .visual-login-label {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
html[data-visual-variant="proposal"] #loginForm input {min-height:48px;padding-inline:14px}
html[data-visual-variant="proposal"] #loginForm input::placeholder {color:var(--muted);opacity:1;font-weight:400}
html[data-visual-variant="proposal"] #enterPractice {margin-top:0!important}
html[data-visual-variant="proposal"] .login>.compact {margin-top:24px}
html[data-visual-variant="proposal"] :is(.grid,.field-row) {gap:20px}
html[data-visual-variant="proposal"] .actions {gap:12px}
html[data-visual-variant="proposal"] .companies {gap:12px;margin-block:24px}
html[data-visual-variant="proposal"] .companies button {min-height:76px}
html[data-visual-variant="proposal"] #app[data-visual-screen="company"] .companies button {
  min-height:76px;line-height:1.4;display:flex;align-items:center;
}
html[data-visual-variant="proposal"] #app[data-visual-screen="company"] > .grid {gap:24px}
html[data-visual-variant="proposal"] #app>.row {align-items:flex-start;margin-bottom:24px;gap:20px}
html[data-visual-variant="proposal"] .visual-navigation {
  padding:12px;border:1px solid var(--line);border-top-color:#ffffffcc;border-radius:14px;
  background:var(--bg);box-shadow:0 2px 8px #201c220a;
}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  html[data-visual-variant="proposal"] .visual-navigation {
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
}
html[data-visual-variant="proposal"] :is(#history,#manageDraft,#switchMode) {display:block;margin-top:12px!important}
html[data-visual-variant="proposal"] .bottom {margin-top:24px;padding-top:24px}
html[data-visual-variant="proposal"] .shared-sections {gap:16px}
html[data-visual-variant="proposal"] .sidebar {gap:12px}
html[data-visual-variant="proposal"] .unit {min-height:48px}
html[data-visual-variant="proposal"] #requiredNotice:empty {display:none}

/* Shared material system for every screen and dialog, excluding the approved login.
   ID scope deliberately outranks the original button exclusions, so primary actions
   cannot inherit the old bright inset edge. Selects keep their native DOM and popup. */
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) {
  --visual-raised:0 3px 7px #201c221c;
  --visual-primary:0 3px 7px #201c222b;
  --visual-pressed:0 1px 2px #201c221a;
  --visual-glass:linear-gradient(145deg,#fffffffa,#ffffffe8);
  --visual-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2369636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) button:not(.link):not(.close) {
  min-height:48px;border-radius:10px;background:linear-gradient(180deg,#fffffff7,#ffffffe6);
  box-shadow:var(--visual-raised);
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) button.primary:not(.link):not(.close) {
  color:white;background:var(--red);border-color:var(--red);box-shadow:var(--visual-primary);
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) button:not(.link):not(.close):active:not(:disabled) {
  box-shadow:var(--visual-pressed);transform:translateY(1px);
}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .card {
  background:var(--visual-glass);box-shadow:0 8px 22px #201c2212,0 2px 4px #201c220a;
}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .companies button {min-height:76px}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .unit {
  border:1px solid var(--line);margin:4px 0;padding:11px 12px;
}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) button.unit[aria-current="true"] {
  background:var(--red);border-color:var(--red);color:white;box-shadow:var(--visual-primary);
}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .visual-navigation {
  background:var(--visual-glass);border-top-color:#ffffff;
  box-shadow:0 5px 15px #201c2212;
}
html[data-visual-variant="proposal"] #modal {
  background:var(--visual-glass);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 60px #201c223d,0 5px 14px #201c2226;
  scroll-padding-top:72px;
}
html[data-visual-variant="proposal"] #modal::backdrop {background:#201c2273}
html[data-visual-variant="proposal"] #modal > form[method="dialog"] {
  background:transparent;border-radius:12px;margin-left:16px;margin-bottom:12px;
}
html[data-visual-variant="proposal"] #modal button.close {
  --close-depth:color-mix(in srgb,var(--red) 78%,var(--dark));
  --close-shadow:0 3px 0 var(--close-depth),0 6px 10px #201c2233,inset 0 1px 1px #ffffff33;
  position:relative;isolation:isolate;overflow:hidden;
  width:44px;height:44px;min-height:44px;padding:0;border:1px solid #201c2226;
  border-radius:12px;color:white;background-color:var(--red);
  background-image:radial-gradient(ellipse at 32% 12%,#ffffff52,transparent 58%),linear-gradient(155deg,var(--red) 30%,var(--close-depth));
  box-shadow:var(--close-shadow);display:grid;place-items:center;font-size:0;line-height:1;
}
/* Two symmetric strokes center the cross independently of the font's baseline. */
html[data-visual-variant="proposal"] #modal button.close::before,
html[data-visual-variant="proposal"] #modal button.close::after {
  content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;
  background:white;border-radius:2px;pointer-events:none;
  transform:translate(-50%,-50%) rotate(45deg);
}
html[data-visual-variant="proposal"] #modal button.close::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}
html[data-visual-variant="proposal"] #modal button.close:active {
  transform:translateY(1px);box-shadow:0 1px 0 var(--close-depth),0 3px 6px #201c2226;
}
html[data-visual-variant="proposal"] #modal button.close:focus-visible {
  outline:none;
}
/* Pointer-opened dialogs have no extra frame. Keyboard focus keeps a neutral ring. */
html[data-visual-variant="proposal"][data-visual-keyboard="true"] #modal button.close:focus-visible {
  outline:2px solid var(--muted);outline-offset:4px;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) :is(input:not([type="checkbox"]):not([type="radio"]),textarea) {
  min-height:48px;border-radius:10px;padding:12px 14px;font-size:16px;
  background:var(--visual-glass);box-shadow:inset 0 2px 3px #201c2209,0 2px 5px #201c2210;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) textarea {min-height:96px}
/* Only the closed face is restyled. Options, popup, keyboard and touch remain native. */
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) select:not([multiple]):not([size]) {
  appearance:none;-webkit-appearance:none;
  min-height:50px;padding:12px 44px 12px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:16px;line-height:1.5;color:var(--ink);cursor:pointer;
  background-color:var(--card);background-image:var(--visual-select-arrow),var(--visual-glass);
  background-repeat:no-repeat;background-position:right 16px center,0 0;background-size:18px 18px,100% 100%;
  box-shadow:var(--visual-raised);
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) select:disabled {
  opacity:.55;cursor:not-allowed;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) :is(input,textarea,select)[data-control-error][aria-invalid="true"] {
  background:#fff5f6;border-color:#b62a42;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) select[data-control-error][aria-invalid="true"] {
  background-image:var(--visual-select-arrow),linear-gradient(#fff5f6,#fff5f6);
  background-repeat:no-repeat;background-position:right 16px center,0 0;background-size:18px 18px,100% 100%;
}
/* Apply the same materials to reports, admin tabs and secondary detail views.
   Active tabs and danger controls retain their original semantic colors. */
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .tabs {
  padding:12px;gap:12px;background:var(--visual-glass);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 4px 12px #201c220d;
}
html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .tabs button[aria-selected="true"] {
  color:white;background:var(--dark);border-color:var(--dark);box-shadow:var(--visual-primary);
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) .table-wrap {
  border:1px solid var(--line);border-radius:12px;background:#ffffffeb;box-shadow:0 2px 5px #201c220a;max-width:100%;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) th {background:var(--bg)}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) details {
  padding:14px;margin-block:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--visual-glass);box-shadow:0 2px 5px #201c220a;
}
html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) input:is([type="checkbox"],[type="radio"]) {accent-color:var(--red)}
html[data-visual-variant="proposal"] #app .auth-access {max-width:520px;margin:16px auto}
html[data-visual-variant="proposal"] #app .auth-access form {display:grid;gap:8px;margin-top:24px}
html[data-visual-variant="proposal"] #app .auth-access form>input+label {margin-top:12px}
html[data-visual-variant="proposal"] #app .auth-access #activation {display:grid;gap:8px}
html[data-visual-variant="proposal"] #app .auth-access #activation input+label {margin-top:12px}
html[data-visual-variant="proposal"] #app .auth-access form>button {margin-top:16px}
@media(hover:hover) {
  html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) select:hover:not(:disabled):not([aria-invalid="true"]) {border-color:var(--red)}
}
@media(forced-colors:active) {
  html[data-visual-variant="proposal"] :is(#app:not([data-visual-screen="login"]),#modal) select:not([multiple]):not([size]) {
    appearance:auto;-webkit-appearance:menulist;background-image:none;box-shadow:none;padding-right:14px;
  }
}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  html[data-visual-variant="proposal"] #modal,
  html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .visual-navigation {
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  html[data-visual-variant="proposal"] #modal::backdrop {
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
}
@media(max-width:720px) {
  html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-visual-variant="proposal"] #app:not([data-visual-screen="login"]) .tabs button {min-width:0;padding-inline:10px}
  html[data-visual-variant="proposal"] .visual-navigation {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  html[data-visual-variant="proposal"] .visual-navigation button {min-width:0;white-space:normal;padding-inline:10px}
  html[data-visual-variant="proposal"] .visual-navigation .link {grid-column:1/-1;justify-self:start}
  html[data-visual-variant="proposal"] :is(.bottom.actions,.bottom .actions,dialog .actions) {display:flex;flex-direction:column;align-items:stretch;width:100%}
  html[data-visual-variant="proposal"] :is(.bottom.actions,.bottom .actions,dialog .actions) button {flex:initial;width:100%}
  html[data-visual-variant="proposal"] :is(#history,#manageDraft,#switchMode) {width:100%}
  html[data-visual-variant="proposal"] .steps {flex-wrap:wrap;gap:8px 16px}
  html[data-visual-variant="proposal"] .companies button {overflow-wrap:normal;padding-inline:12px}
}
@media(max-width:379px) {html[data-visual-variant="proposal"] .companies {grid-template-columns:1fr}}
@media(max-width:430px) {
  /* Keep the longest existing access-mode option readable at 360 px. */
  html[data-visual-variant="proposal"] #app .auth-access #mode {
    padding-inline:12px 32px;background-position:right 10px center,0 0;
  }
}
@media(prefers-reduced-motion:no-preference) {
  html[data-visual-variant="proposal"] :is(main,dialog) button {transition:box-shadow .12s,transform .12s,border-color .12s}
}
@media(prefers-reduced-motion:reduce) {
  html[data-visual-variant="proposal"] :is(main,dialog) button {transition:none!important;transform:none!important}
}