/* raised.css: every pressable control stands off the page, lifts further under the pointer and sinks when
   pressed. Loaded last on the website and in the Passport application (a shared asset), after styles.css,
   polish.css, theme.css and console.css; the "html" prefix lets it close their button rules whatever the
   order the stylesheets arrive in. The elevation is carried by four shadows (a light top edge, a darker
   floor, a close key shadow, a wide ambient shadow); the motion stays small. 26 October 2026. */
:root {
  --raise-ink: 8 46 71;
  --raise-edge: inset 0 1px 0 rgb(255 255 255 / 0.42);
  /* No inset floor line: on a light pill it drew a second rim under the border (the "double" button, 26 Oct). */
  --raise-floor: 0 0 0 0 transparent;
  --raise-key: 0 1px 2px rgb(var(--raise-ink) / 0.2);
  --raise-ambient: 0 10px 20px -8px rgb(var(--raise-ink) / 0.42);
  --raise-ambient-soft: 0 6px 14px -8px rgb(var(--raise-ink) / 0.32);
  --raise-key-hover: 0 4px 8px rgb(var(--raise-ink) / 0.16);
  --raise-ambient-hover: 0 20px 34px -12px rgb(var(--raise-ink) / 0.55);
  --raise-press: inset 0 3px 6px rgb(var(--raise-ink) / 0.22), 0 1px 1px rgb(var(--raise-ink) / 0.12);
  --raise-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme="dark"] {
  --raise-ink: 0 0 0;
  --raise-edge: inset 0 1px 0 rgb(255 255 255 / 0.14);
  --raise-floor: 0 0 0 0 transparent;
  --raise-key: 0 1px 2px rgb(0 0 0 / 0.5);
  --raise-ambient: 0 12px 22px -8px rgb(0 0 0 / 0.7);
  --raise-ambient-soft: 0 8px 16px -8px rgb(0 0 0 / 0.6);
  --raise-key-hover: 0 4px 8px rgb(0 0 0 / 0.45);
  --raise-ambient-hover: 0 22px 36px -12px rgb(0 0 0 / 0.8);
  --raise-press: inset 0 3px 6px rgb(0 0 0 / 0.55), 0 1px 1px rgb(0 0 0 / 0.4);
}

/* At rest: raised. */
html .btn,
html .icon-button,
html .theme-toggle,
html .save-button,
html .dialog-close,
html [data-language-open],
html .portal-tab,
html .pillar-fold > summary,
html .admin-nav-item,
html .c4-admin .icon-button,
html .admin-confirm-dialog .btn,
html .admin-auth-card .btn,
html .admin-confirm .btn,
html .admin-btn:not(.admin-btn-text),
html .c4voice-btn,
html .site-header .mobile-toggle,
html .site-header.menu-open .mobile-toggle,
html [data-slot="button"] {
  box-shadow: var(--raise-edge), var(--raise-floor), var(--raise-key), var(--raise-ambient);
  transform: translateY(0);
  transition: transform 180ms var(--raise-ease), box-shadow 220ms var(--raise-ease), background-color 180ms var(--raise-ease), border-color 180ms var(--raise-ease), color 180ms var(--raise-ease);
  will-change: transform;
}
/* Quieter controls: chips, list-style sidebar buttons, the website's question folds. */
html .portal-chip,
html .portal-sidebar-settings > .btn,
html main details:not([class]) > summary {
  box-shadow: var(--raise-edge), var(--raise-key), var(--raise-ambient-soft);
  transform: translateY(0);
  transition: transform 180ms var(--raise-ease), box-shadow 220ms var(--raise-ease), background-color 180ms var(--raise-ease), border-color 180ms var(--raise-ease), color 180ms var(--raise-ease);
}
/* Filled buttons carry a light-to-dark sheen and a shadow tinted with their own colour. */
html .btn-primary,
html .admin-confirm-dialog .btn-primary,
html .admin-auth-card .btn-primary,
html .admin-confirm .btn-primary,
html .admin-btn-primary,
html .portal-tab.is-active,
html .admin-nav-item[aria-current="page"],
html .admin-nav-item.is-current {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0.1));
  --raise-ambient: 0 12px 24px -8px color-mix(in srgb, var(--brand, #dc240c) 60%, rgb(var(--raise-ink)));
  --raise-ambient-hover: 0 22px 38px -12px color-mix(in srgb, var(--brand, #dc240c) 68%, rgb(var(--raise-ink)));
}
html .btn-primary:hover,
html .admin-confirm-dialog .btn-primary:hover,
html .admin-auth-card .btn-primary:hover,
html .admin-confirm .btn-primary:hover,
html .admin-btn-primary:hover {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0.08));
}
html .btn-danger,
html .admin-confirm-dialog .btn-danger,
html .admin-confirm .btn-danger {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0.12));
  --raise-ambient: 0 12px 24px -8px rgb(147 24 8 / 0.6);
  --raise-ambient-hover: 0 22px 38px -12px rgb(147 24 8 / 0.7);
  box-shadow: var(--raise-edge), var(--raise-floor), var(--raise-key), var(--raise-ambient) !important;
}
html .btn-dark,
html .btn-white {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0.1));
}
html .btn-glass {
  --raise-edge: inset 0 1px 0 rgb(255 255 255 / 0.28);
  --raise-floor: 0 0 0 0 transparent;
  --raise-ambient: 0 12px 24px -8px rgb(0 0 0 / 0.55);
  --raise-ambient-hover: 0 22px 38px -12px rgb(0 0 0 / 0.65);
}

/* Under the pointer: it rises further. */
@media (hover: hover) and (pointer: fine) {
  html .btn:not(:disabled):not([aria-disabled="true"]):hover,
  html .icon-button:hover,
  html .theme-toggle:hover,
  html .save-button:hover,
  html .dialog-close:hover,
  html [data-language-open]:hover,
  html .portal-tab:hover,
  html .pillar-fold > summary:hover,
  html .admin-nav-item:hover,
  html .c4-admin .icon-button:hover,
  html .admin-confirm-dialog .btn:not(:disabled):hover,
  html .admin-auth-card .btn:not(:disabled):hover,
  html .admin-confirm .btn:not(:disabled):hover,
  html .admin-btn:not(.admin-btn-text):not(:disabled):hover,
  html .c4voice-btn:hover,
  html .site-header .mobile-toggle:hover,
  html .site-header.menu-open .mobile-toggle:hover,
  html [data-slot="button"]:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: var(--raise-edge), var(--raise-floor), var(--raise-key-hover), var(--raise-ambient-hover);
  }
  html .btn-danger:not(:disabled):hover,
  html .admin-confirm-dialog .btn-danger:not(:disabled):hover,
  html .admin-confirm .btn-danger:not(:disabled):hover {
    box-shadow: var(--raise-edge), var(--raise-floor), var(--raise-key-hover), var(--raise-ambient-hover) !important;
  }
  html .portal-chip:hover,
  html .portal-sidebar-settings > .btn:not(:disabled):hover,
  html main details:not([class]) > summary:hover {
    transform: translateY(-2px);
    box-shadow: var(--raise-edge), var(--raise-key-hover), var(--raise-ambient);
  }
}
/* Pressed: it sinks into the page. */
html .btn:not(:disabled):not([aria-disabled="true"]):active,
html .icon-button:active,
html .theme-toggle:active,
html .save-button:active,
html .dialog-close:active,
html [data-language-open]:active,
html .portal-tab:active,
html .pillar-fold > summary:active,
html .admin-nav-item:active,
html .c4-admin .icon-button:active,
html .admin-confirm-dialog .btn:not(:disabled):active,
html .admin-auth-card .btn:not(:disabled):active,
html .admin-confirm .btn:not(:disabled):active,
html .admin-btn:not(.admin-btn-text):not(:disabled):active,
html .c4voice-btn:active,
html .site-header .mobile-toggle:active,
html [data-slot="button"]:not(:disabled):active,
html main details:not([class]) > summary:active,
html .portal-chip:active,
html .portal-sidebar-settings > .btn:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
  box-shadow: var(--raise-press);
  transition-duration: 90ms;
}
html .btn-danger:not(:disabled):active,
html .admin-confirm-dialog .btn-danger:not(:disabled):active,
html .admin-confirm .btn-danger:not(:disabled):active {
  box-shadow: var(--raise-press) !important;
}
/* Keyboard focus keeps the halo on top of the elevation. */
html .btn:focus-visible,
html .icon-button:focus-visible,
html [data-language-open]:focus-visible,
html .portal-tab:focus-visible,
html .pillar-fold > summary:focus-visible,
html .admin-nav-item:focus-visible,
html .admin-btn:focus-visible,
html [data-slot="button"]:focus-visible {
  box-shadow: var(--raise-edge), var(--raise-floor), var(--raise-key), var(--raise-ambient), 0 0 0 3px var(--control-halo, rgb(220 36 12 / 0.2));
}
/* Disabled: on the page, not pressable. */
html .btn:disabled,
html .btn[aria-disabled="true"],
html .admin-btn:disabled,
html [data-slot="button"]:disabled {
  transform: none;
  box-shadow: var(--raise-key);
  background-image: none;
}
/* Less motion: the elevation stays, the movement goes. */
@media (prefers-reduced-motion: reduce) {
  html .btn, html .icon-button, html .theme-toggle, html .save-button, html .dialog-close, html [data-language-open], html .portal-tab, html .pillar-fold > summary, html .admin-nav-item, html [data-slot="button"], html .admin-btn, html .c4voice-btn, html .site-header .mobile-toggle, html main details:not([class]) > summary, html .portal-chip, html .portal-sidebar-settings > .btn {
    transition: box-shadow 200ms var(--raise-ease), background-color 180ms var(--raise-ease), border-color 180ms var(--raise-ease), color 180ms var(--raise-ease);
    transform: none !important;
  }
}

/* DISCLOSURES READ AS BUTTONS (founder, 1 November 2026: "this dropdown has to be clear; sweep the app and the website
   for all dropdowns, clear and professional"): a toggle is a pill with bold words and its arrow in a filled circle that
   turns when it opens; a FAQ question keeps its row and takes the same circle. */
:root{--c4-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E")}
html .security-more{gap:10px;min-height:44px;margin-top:10px;padding:6px 6px 6px 16px;border:1.5px solid color-mix(in srgb,var(--brand) 32%,var(--line));border-radius:999px;background:var(--surface-raised,#fff);color:var(--brand);font-weight:750;box-shadow:0 1px 2px #0c293e14,0 8px 16px -10px #0c293e40;transition:transform .2s,box-shadow .2s,border-color .2s}
html .security-more .icon{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--brand);color:#fff;stroke:#fff;stroke-width:3;box-shadow:0 4px 10px -4px var(--brand)}
html .security-more:hover{border-color:var(--brand);transform:translateY(-1px)}
html .security-more:active{transform:scale(.985)}
html .security-more:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
html .pillar-fold>summary{gap:10px;min-height:44px;padding:6px 6px 6px 16px;border-width:1.5px;font-weight:750;color:var(--text)}
html .pillar-fold>summary svg{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--pillar,var(--brand));color:#fff;stroke:#fff;stroke-width:3}
html .pillar-fold>summary:focus-visible{outline:3px solid var(--pillar,var(--brand));outline-offset:3px}
html .faq-list summary{font-weight:650;color:var(--text)}
html .faq-list summary::after,html .faq-list details[open] summary::after{content:"";flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--brand,#dc240c) var(--c4-chevron) center/16px no-repeat;box-shadow:0 4px 10px -4px var(--brand,#dc240c);transition:transform .25s cubic-bezier(.2,.8,.2,1);width:30px;height:30px;flex-basis:30px;margin-inline-end:6px;font-size:0}
html .faq-list details[open] summary::after{transform:rotate(180deg)}
html .faq-list summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:10px}
@media(prefers-reduced-motion:reduce){html .faq-list summary::after,html .pillar-fold>summary svg,html .security-more .icon{transition:none}}
/* The arrow stands at the far right of its pill (founder, 1 November 2026): the words left, the circle right. */
html .security-more,html .pillar-fold>summary{justify-content:space-between}
html .security-more{width:100%}