/* Liquid glass, on every page. Vivid colour sits behind the page, and translucent layers blur it. Loaded after
   theme-app.css. The colours still come from theme.css: this only says how see-through things are.
   The colour holds still here, because many panes of glass over moving colour would redraw on every frame. Only the
   sign-in page, with one pane, moves it (login.css). Without glass support, or when a person asks for less
   transparency, panes are simply solid. */

/* ---- What the glass is made of. Solid to begin with, so a page reads well anywhere. ---- */
:root {
  --glass: var(--color-surface);
  --glass-strong: var(--color-surface);
  --glass-brand-a: var(--plum-900);
  --glass-brand-b: var(--magenta-700);
  --glass-edge: var(--color-border);
  --glass-shine: rgba(255, 255, 255, .85);
  --glass-shade: rgba(46, 16, 101, .1);
  --glass-field: var(--color-surface-alt);
  --glass-field-edge: var(--color-border);
  --glass-hover: var(--color-surface-alt);
  --glass-placeholder: var(--color-text-muted);
  --glass-light: rgba(255, 255, 255, .34);
  --glass-blur: none;
  --glass-blur-strong: none;
  --blob-a: var(--magenta-500);
  --blob-b: var(--gold-400);
  --blob-c: rgba(46, 16, 101, .4);
  --color-bg: var(--magenta-50);
}
:root[data-theme="dark"] { --blob-a: var(--magenta-600); --blob-b: rgba(244, 185, 66, .42); --blob-c: var(--plum-900); --color-bg: var(--plum-950); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --blob-a: var(--magenta-600); --blob-b: rgba(244, 185, 66, .42); --blob-c: var(--plum-900); --color-bg: var(--plum-950); }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(255, 255, 255, .6);
    --glass-strong: rgba(255, 255, 255, .84);
    --glass-brand-a: rgba(46, 16, 101, .78);
    --glass-brand-b: rgba(190, 24, 93, .9);
    --glass-edge: rgba(255, 255, 255, .62);
    --glass-field: rgba(255, 255, 255, .52);
    --glass-field-edge: rgba(46, 16, 101, .22);   /* white would not show on the pale panes */
    --glass-hover: rgba(255, 255, 255, .42);
    --glass-placeholder: rgba(31, 26, 36, .76);
    --glass-blur: blur(26px) saturate(170%);
    --glass-blur-strong: blur(34px) saturate(180%);

    /* Text sits over colour now, so it needs more strength than on plain white. Lines need to show on any of it. */
    --color-text-muted: rgba(31, 26, 36, .84);
    --color-border: rgba(46, 16, 101, .13);
    --color-link: #9D174D;
    --app-accent-text: #831843;
    --app-danger-text: #991B1B;
    --brand: #9D174D;
  }
  :root[data-theme="dark"] {
    --glass: rgba(26, 18, 42, .62);
    --glass-strong: rgba(26, 18, 42, .88);
    --glass-edge: rgba(255, 255, 255, .2);
    --glass-shine: rgba(255, 255, 255, .28);
    --glass-shade: rgba(0, 0, 0, .3);
    --glass-field: rgba(255, 255, 255, .09);
    --glass-field-edge: rgba(255, 255, 255, .2);
    --glass-hover: rgba(255, 255, 255, .08);
    --glass-placeholder: rgba(245, 238, 248, .74);
    --glass-light: rgba(255, 255, 255, .14);
    --color-text-muted: rgba(245, 238, 248, .84);
    --color-border: rgba(255, 255, 255, .16);
    --color-link: #F9A8D4;
    --app-accent-text: #F9A8D4;
    --app-danger-text: #FCA5A5;
    --brand: #F9A8D4;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --glass: rgba(26, 18, 42, .62);
      --glass-strong: rgba(26, 18, 42, .88);
      --glass-edge: rgba(255, 255, 255, .2);
      --glass-shine: rgba(255, 255, 255, .28);
      --glass-shade: rgba(0, 0, 0, .3);
      --glass-field: rgba(255, 255, 255, .09);
      --glass-field-edge: rgba(255, 255, 255, .2);
      --glass-hover: rgba(255, 255, 255, .08);
      --glass-placeholder: rgba(245, 238, 248, .74);
      --glass-light: rgba(255, 255, 255, .14);
      --color-text-muted: rgba(245, 238, 248, .84);
      --color-border: rgba(255, 255, 255, .16);
      --color-link: #F9A8D4;
      --app-accent-text: #F9A8D4;
      --app-danger-text: #FCA5A5;
      --brand: #F9A8D4;
    }
  }
}

/* ---- Behind everything ---- */
body { background: var(--color-bg); position: relative; isolation: isolate; }
.glass-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Curved lines, drawn in _GlassBackground. Larger than the screen, so their ends never show. The wide ones give the glass colour to blur. */
.glass-aurora svg { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; -webkit-filter: blur(70px); filter: blur(70px); }   /* blurred to soft colour on every page */
.glass-aurora path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.glass-aurora svg:nth-child(1) path { stroke: var(--blob-a); }
.glass-aurora svg:nth-child(2) path { stroke: var(--blob-b); }
.glass-aurora svg:nth-child(3) path { stroke: var(--blob-c); }
.glass-aurora .aurora-wide { stroke-width: 330; stroke-opacity: .42; }
.glass-aurora .aurora-mid { stroke-width: 66; stroke-opacity: .26; }
.glass-aurora .aurora-thin { stroke-width: 9; stroke-opacity: .4; }
@media print { .glass-aurora { display: none; } }

/* A fading parent stops glass seeing the page, and it would snap in as the fade ended. So pages move in, without fading. */
@keyframes page-enter { from { transform: translateY(8px); } to { transform: none; } }

/* ---- Panes ---- */
.component-card, .stat-card, .empty-panel {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 26px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 18px 44px -30px rgba(46, 16, 101, .35);
}
.empty-panel { border-style: solid; }
.dash-empty { border-color: var(--glass-field-edge); }

/* ---- Menu and phone top bar ---- */
.app-sidebar { background-color: var(--glass) !important; -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); }
.app-topbar { background-color: var(--glass-strong) !important; -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); box-shadow: inset 0 -1px 0 var(--glass-edge); }
.app-sidebar-nav .nav-link:hover, .app-topbar .nav-link:hover, .app-page-top .nav-link:hover, .notification-bell.active { background: var(--glass-hover); }
/* A white edge would not show on the pale page in light mode, so there it is the brand colour */
.notification-bell { background: var(--glass-field); border: 1px solid rgba(190, 24, 93, .5); border-radius: 999px; box-shadow: inset 0 1px 0 var(--glass-shine); }
.app-sidebar-nav .nav-link, .nav-group-toggle { border-radius: 999px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notification-bell { border-color: var(--glass-field-edge); } }
:root[data-theme="dark"] .notification-bell { border-color: var(--glass-field-edge); }
.nav-group-toggle:hover { background: var(--glass-hover); }
.app-sidebar-nav .nav-link.active, .app-sidebar-nav .nav-link.active:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -10px rgba(190, 24, 93, .7); }
.app-sidebar-brand, .app-sidebar-account, .app-topbar { border-color: var(--glass-edge); }
@media (min-width: 992px) { .app-sidebar { border-right-color: var(--glass-edge); box-shadow: inset -1px 0 0 var(--glass-shine); } }
/* The slide-in menu lies over the page's text, so on a phone it is nearly solid */
@media (max-width: 991.98px) { .app-sidebar { background-color: var(--glass-strong) !important; } }

/* ---- Fields ---- */
.form-control, .form-select, .input-group-text {
  background-color: var(--glass-field); border-color: var(--glass-field-edge); color: var(--color-text); border-radius: 999px;
  box-shadow: inset 0 1px 2px var(--glass-shade), inset 0 -1px 0 var(--glass-shine);
}
.form-control, .form-select { padding-left: 1.1rem; }
.form-label { margin-left: .6rem; }   /* in line with the text inside a round field */
textarea.form-control, select[multiple].form-select { padding-left: .9rem; border-radius: 18px; }   /* too tall to be fully round */
.form-control::placeholder { color: var(--glass-placeholder); }
.form-control:focus, .form-select:focus { background-color: var(--glass-strong); border-color: var(--magenta-500); box-shadow: var(--focus-ring); color: var(--color-text); }
.form-control:disabled, .form-select:disabled { background-color: var(--glass-hover); color: var(--color-text-muted); }
.input-group > .form-control:not(:last-child) { border-radius: 999px 0 0 999px; }
.input-group > .btn:last-child { border-radius: 0 999px 999px 0; }
/* A browser's own list of options cannot be glass, so give it a plain background to sit on */
.form-select option { background-color: var(--color-surface); color: var(--color-text); }

/* ---- Buttons ---- */
.btn { border-radius: 999px; }
.btn-light, .btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: var(--glass-field); --bs-btn-border-color: var(--glass-field-edge);
  --bs-btn-hover-bg: var(--glass-strong); --bs-btn-hover-border-color: var(--glass-field-edge);
  --bs-btn-active-bg: var(--glass-strong); --bs-btn-active-border-color: var(--glass-field-edge);
  --bs-btn-disabled-bg: var(--glass-hover); --bs-btn-disabled-border-color: var(--glass-field-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
/* Stands out among the suggestions, without being the page's main button */
.btn-light.suggestion-action {
  --bs-btn-color: var(--app-accent-text); --bs-btn-hover-color: var(--app-accent-text); --bs-btn-active-color: var(--app-accent-text);
  --bs-btn-border-color: var(--magenta-500); --bs-btn-hover-border-color: var(--magenta-500); --bs-btn-active-border-color: var(--magenta-500);
  --bs-btn-border-width: 1.5px; font-weight: 600;
}
.btn-primary {
  border-color: rgba(255, 255, 255, .34);
  background-image: linear-gradient(180deg, var(--magenta-600), var(--magenta-700));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -6px 12px -6px rgba(255, 255, 255, .28), 0 12px 22px -12px rgba(190, 24, 93, .75);
}
.btn-danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---- Tables, badges, progress, paging ---- */
.table { --bs-table-hover-bg: var(--glass-hover); }
.table > thead > tr > th { background: transparent; }
.bg-light { background-color: var(--glass-hover) !important; }
.bg-white { background-color: transparent !important; }
.risk-not-high { background: var(--glass-strong); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.progress { --bs-progress-bg: var(--glass-field); box-shadow: inset 0 1px 2px var(--glass-shade); }
.pagination { --bs-pagination-border-radius: 999px; --bs-pagination-bg: var(--glass-field); --bs-pagination-border-color: var(--glass-field-edge); --bs-pagination-hover-bg: var(--glass-strong); --bs-pagination-hover-border-color: var(--glass-field-edge); --bs-pagination-focus-bg: var(--glass-strong); --bs-pagination-disabled-bg: var(--glass-hover); --bs-pagination-disabled-border-color: var(--glass-field-edge); }
.avatar, .empty-icon { background: var(--glass-strong); }
.invitation-email-preview, .company-image-editor, .company-image-preview { background: var(--glass-hover); border-color: var(--glass-field-edge); }

/* ---- Messages and pop-ups: they carry what matters most, so they are nearly solid ---- */
.alert { --bs-alert-bg: var(--glass-strong); border-color: var(--glass-field-edge); border-width: 1px; border-radius: 18px; }
.alert-success { border-color: var(--color-success); }
.alert-warning { background: var(--glass-strong); border-color: var(--color-warning); }
.alert-info { border-color: var(--color-info); }
/* Errors stand out: solid red with white text, the same in light and dark */
.alert-danger { --bs-alert-bg: #c62828; --bs-alert-color: #fff; --bs-alert-link-color: #fff; border-color: #8e1c1c; font-weight: 500; }
.alert-danger a, .alert-danger .alert-link { color: #fff; text-decoration: underline; }
.alert-danger .btn-close { filter: brightness(0) invert(1); opacity: .9; }
.modal { --bs-modal-bg: var(--glass-strong); --bs-modal-border-color: var(--glass-edge); --bs-modal-border-radius: 22px; --bs-modal-header-border-color: var(--color-border); --bs-modal-footer-border-color: var(--color-border); }
.modal-content { -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 30px 70px -24px rgba(46, 16, 101, .55); }
.dropdown-menu { --bs-dropdown-border-radius: 18px; --bs-dropdown-bg: var(--glass-strong); --bs-dropdown-border-color: var(--glass-edge); --bs-dropdown-link-hover-bg: var(--glass-hover); }
body > .dropdown-menu { -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 18px 40px -16px rgba(46, 16, 101, .5); }

/* ---- The login and survey footer: a small pill of glass, always at the bottom of the screen, with the page passing over it ---- */
.powered-by {
  position: fixed; z-index: -1; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
  width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto; padding: 6px 16px; border-radius: 999px;
  color: var(--color-text); 
}
/* Being behind the page, it would be unreachable. So the page's empty space lets clicks through to it, and everything in the page takes them as usual. */
.login-page > main, .survey-form, .survey-main, .survey-message { pointer-events: none; }
.login-float, .survey-form > *:not(.survey-main), .survey-main > *, .survey-message > * { pointer-events: auto; }
.powered-by { pointer-events: auto; }
/* After login it sits in the menu, just above the account button */
.app-sidebar .powered-by { position: static; z-index: auto; flex: none; width: auto; max-width: none; margin: 0; padding: 8px 12px; border-radius: 0; }

/* ---- Survey. People may answer on a phone, with many questions on the page, so choices are translucent without
   each having a blur of their own. The bars stay in view with text scrolling under, so they are nearly solid. ---- */
.survey-page { --color-surface: var(--glass); --survey-pane: rgba(255, 255, 255, .65); --survey-choice-edge: rgba(46, 16, 101, .24); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .survey-page { --survey-pane: rgba(24, 14, 38, .9); --survey-choice-edge: rgba(255, 255, 255, .3); } }
:root[data-theme="dark"] .survey-page { --survey-pane: rgba(24, 14, 38, .9); --survey-choice-edge: rgba(255, 255, 255, .3); }
/* What people read and answer sits on a nearly solid card, so the lines behind it do not get in the way */
.survey-main .screen, .survey-message {
  background: var(--survey-pane); border: 1px solid var(--glass-edge); border-radius: 20px;
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 18px 44px -22px var(--glass-shade);
}
.survey-main .screen { padding: 20px 18px; }
.band-option span, .scale-face, .review-item, .survey-facts, .pin-slot { border-color: var(--survey-choice-edge); border-radius: 18px; }
.survey-main .screen, .survey-message { border-radius: 26px; }
.pin-key { border-radius: 999px; }
.survey-page .btn-light { --bs-btn-border-color: var(--survey-choice-edge); --bs-btn-hover-border-color: var(--survey-choice-edge); --bs-btn-active-border-color: var(--survey-choice-edge); }
/* A legend is drawn across the top edge of its fieldset, which would put the statement half out of the card */
.survey-main fieldset.screen > legend { float: left; width: 100%; }
.survey-main .scale-yesno { padding-top: 16px; }   /* its margin does not count next to a floated legend */
@media (min-width: 576px) { .survey-main .screen { padding: 28px; } }
.survey-top, .survey-nav { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); border-color: var(--glass-edge); }
.survey-note { background: var(--glass-strong); }
.survey-progress { background: var(--glass-field); }

/* Asked for less transparency: solid, with no colour behind */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--color-surface); --glass-strong: var(--color-surface); --glass-brand-a: var(--plum-900); --glass-brand-b: var(--magenta-700);
    --glass-field: var(--color-surface-alt); --glass-hover: var(--color-surface-alt); --glass-light: transparent;
    --glass-blur: none; --glass-blur-strong: none;
  }
  .glass-aurora { display: none; }
}