/* The opening disclaimer.
 *
 * Its own file, not a <style> block: the edge CSP for /phase/ is style-src 'self' with
 * NO 'unsafe-inline', so an inline block, and an inline style attribute, would both be
 * blocked and the dialog would render unstyled.
 *
 * This is a STRUCTURAL COPY of thermal-gui/disclaimer.css, by request: the two dialogs
 * should look like the same dialog. Only the colours are mapped onto this app's tokens,
 * so it does not sit in a cyan application wearing thermal's orange.
 *
 * That means it deliberately does NOT use this app's own heading idiom from
 * annotator.css (.panel h3: mono, uppercase, cyan, with a trailing rule). Headings here
 * are plain weighted sans in the body colour, matching thermal. Do not "restore" the
 * trailing rules to make it match the surrounding page -- it was changed away from that
 * on purpose.
 *
 * Every selector is prefixed `dsc-` so nothing here can collide with annotator.css.
 * Colours come from the :root tokens annotator.css already defines.
 */

.dsc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 5, 7, 0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.dsc-backdrop[hidden] { display: none; }

/* Locks the page behind the dialog while it is open. disclaimer.js adds this to <html>.
   Without it the wheel still scrolls the application underneath, which looks like the
   gate is leaking even though nothing back there can be clicked. */
.dsc-locked, .dsc-locked body {
  overflow: hidden;
}

.dsc-modal {
  background: var(--panel);
  color: var(--text);
  width: min(620px, 100%);
  max-height: min(86vh, 720px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: dsc-rise 180ms ease-out;
}

@keyframes dsc-rise {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .dsc-modal { animation: none; }
}

/* The same accent hairline .panel carries, so the dialog reads as part of the app. */
.dsc-modal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(33, 199, 199, 0.85), transparent);
}

/* ── header, pinned ── */
.dsc-head {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.dsc-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
}

.dsc-head h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dsc-sub {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── scrolling body ── */
.dsc-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.4rem;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sunk) transparent;
}

.dsc-body::-webkit-scrollbar { width: 10px; }

.dsc-body::-webkit-scrollbar-thumb {
  background: var(--sunk);
  border-radius: 6px;
  border: 3px solid var(--panel);
}

.dsc-body h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dsc-body h3:first-child { margin-top: 0; }

.dsc-body p {
  margin: 0 0 0.7rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(244, 246, 248, 0.82);
}

.dsc-body ul {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(244, 246, 248, 0.82);
}

.dsc-body li { margin-bottom: 0.4rem; }

.dsc-body strong { color: var(--text); font-weight: 650; }

/* ── the liability statement ── */
.dsc-alert {
  background: rgba(255, 92, 92, 0.07);
  border: 1px solid rgba(255, 92, 92, 0.42);
  border-radius: 11px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.3rem;
  box-shadow: 0 0 24px rgba(255, 92, 92, 0.07);
}

.dsc-alert-h {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  /* --red, not --cyan. Cyan is this app's ordinary accent, used on every button and
     every step heading, so a cyan box would read as one more piece of interface
     furniture. Red is the only one on the page, which is what makes it the alert. */
  color: var(--red);
}

.dsc-alert p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
}

.dsc-alert p + p {
  margin-top: 0.65rem;
  font-size: 0.86rem;
  color: rgba(244, 246, 248, 0.82);
}

/* ── pointer to the privacy notice ── */
.dsc-xref {
  background: var(--sunk);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: 9px;
  padding: 0.8rem 0.95rem;
  margin: 1.1rem 0 0;
}

.dsc-xref p { margin: 0; font-size: 0.84rem; color: rgba(244, 246, 248, 0.82); }

.dsc-xref a {
  color: var(--cyan-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 242, 238, 0.35);
}

.dsc-xref a:hover { border-bottom-color: var(--cyan-bright); }

/* ── footer, pinned ── */
.dsc-foot-wrap { position: relative; flex: 0 0 auto; }

.dsc-foot {
  padding: 0.95rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.dsc-hint {
  flex: 1;
  min-width: 150px;
  font-size: 0.76rem;
  color: var(--muted);
}

/* Reading progress. The bar is an indicator only: "I understand" is enabled from the
   start and is NOT disabled until you reach the bottom. The dialog gates the app, but it
   does not police whether the text was read, and it collects an acknowledgement rather
   than an agreement. */
.dsc-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
}

.dsc-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  transition: width 80ms linear;
}

.dsc-btn {
  padding: 0.55rem 1.35rem;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  transition: 120ms ease;
}

.dsc-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dsc-btn:active { transform: translateY(0); }

.dsc-btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04121A;
}

.dsc-btn-primary:hover { box-shadow: 0 0 16px rgba(33, 199, 199, 0.35); }

.dsc-btn:focus-visible,
.dsc-xref a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Disabled until the notice has been scrolled to the end. Kept clearly inert rather than
   merely faded, so it reads as "not yet" instead of as a broken button. */
.dsc-btn:disabled,
.dsc-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.dsc-btn:disabled:hover,
.dsc-btn-primary:disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--cyan);
}

/* The scroll region takes focus (tabindex="0") because the button starts disabled and
   cannot, so the arrow keys and Page Down have somewhere to act. */
.dsc-body:focus { outline: none; }
.dsc-body:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

@media (max-width: 560px) {
  .dsc-modal { max-height: 92vh; }
  .dsc-head, .dsc-body, .dsc-foot {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }
}
