/* Agave on Tranquil's screens. Every colour reads a token from
   tokens.css, which agave's web/style.css defines; no literal is restated
   here, and no rule reads one of Tranquil's own names (tokenCheck in
   ../theme.nix). Two blocks: the tokens Tranquil's own rules read, then
   the chrome of the sign-in and consent screens. */

/* --- The tokens. Tranquil declares its whole palette and type scale in
   one :root and reads it everywhere, so pointing each name at an Agave
   token recolours every screen with no selector work. This sheet loads
   after Tranquil's, so it wins at equal specificity, including over its
   @media (prefers-color-scheme: dark) block. */
:root {
  --bg-primary: var(--ground);
  --bg-secondary: var(--glass-dark);
  --bg-tertiary: var(--glass);
  --bg-hover: var(--glass-hover);
  --bg-card: var(--glass-dark);
  --bg-input: var(--glass);
  --bg-input-disabled: var(--sunk);

  --text-primary: var(--ink);
  --text-secondary: var(--mu);
  --text-muted: var(--mu);
  --text-inverse: var(--on-ink);

  /* Separation is by plane, never by a line (agave's DESIGN.md). */
  --border-color: transparent;
  --border-light: transparent;
  --border-dark: transparent;
  --border-color-light: transparent;

  /* The primary is white, and focus is a white outline. Tranquil paints
     every button with --accent and a secondary's ink with --secondary. */
  --accent: var(--on);
  --accent-hover: var(--on);
  --accent-muted: var(--glass);
  --accent-light: var(--on);
  --secondary: var(--ink);
  --secondary-hover: var(--ink);
  --secondary-muted: var(--glass);
  --shadow-focus: 0 0 0 2px var(--focus);

  /* A status box is an opaque fill and its own ink. */
  --success-bg: var(--ok-fill);
  --success-border: transparent;
  --success-text: var(--ok-fill-ink);
  --error-bg: var(--danger-fill);
  --error-border: transparent;
  --error-text: var(--danger-fill-ink);
  --warning-bg: var(--warn-fill);
  --warning-border: transparent;
  --warning-text: var(--warn-fill-ink);
  --danger-bg: var(--danger-on);
  --danger-bg-hover: var(--danger-on);
  --info-bg: var(--neutral-fill);
  --info-text: var(--neutral-fill-ink);

  --overlay-bg: var(--backdrop);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--lift-shadow);

  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-card);

  /* Two sizes and two weights (agave's DESIGN.md). */
  --text-xs: 0.875rem;
  --text-sm: 0.875rem;
  --text-base: 0.875rem;
  --text-lg: 0.875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.375rem;
  --text-4xl: 1.375rem;
  --font-normal: 400;
  --font-medium: 400;
  --font-semibold: 600;
  --font-bold: 600;
  --font-mono: var(--mono);
}

/* index.html paints the document a light grey of its own before any
   stylesheet loads, and the fixed panel below leaves the body empty. */
html {
  background: var(--ground);
}

body {
  font-family: "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--on);
  color: var(--on-ink);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* --- The chrome, on the OAuth screens only. mount.js sets data-agave on
   <html> there and removes it everywhere else. */

/* Sentence case (agave's DESIGN.md). The element name carries the weight
   that ties Tranquil's strongest text-transform rule, `.password-method
   h3`, so one selector covers every uppercase heading and badge without
   naming any of them. */
html[data-agave] * {
  text-transform: none;
}

/* Labels carry no size or case of their own, so colour sets them apart.
   Values and headings keep ink. */
[data-agave] label,
[data-agave] legend,
[data-agave] .subtitle {
  color: var(--mu);
  font-weight: 400;
}
[data-agave] h1,
[data-agave] h2,
[data-agave] h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: normal;
}
[data-agave] h1 {
  margin: 0;
  font-size: 22px;
}

/* An input is a light-glass well with a ring and no highlight; focus is
   the white ring (agave's .field in web/style.css). */
[data-agave] input:not([type="checkbox"], [type="radio"]),
[data-agave] select {
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px var(--glass-well-ring);
  color: var(--ink);
}
[data-agave] input:focus,
[data-agave] select:focus,
[data-agave] textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus);
}
[data-agave] input::placeholder {
  color: var(--mu);
  opacity: 1;
}
[data-agave] input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--on);
}

/* One white primary per screen (agave's DESIGN.md), so every button is a
   glass secondary and only the footer's confirm is white: the button of
   .actions that is no cancel, or registration's button.primary. Tranquil's
   base rule paints every button with --accent; this demotes them. Its
   buttons also grow to fill the row, which would leave justify-content
   nothing to place. */
[data-agave] button {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-well-ring);
  color: var(--ink);
}
[data-agave] button:hover:not(:disabled) {
  background: var(--glass-hover);
  color: var(--ink);
}
[data-agave] button:disabled {
  background: var(--glass);
  box-shadow: none;
  color: var(--mu);
  opacity: 1;
}
[data-agave] :is(.actions, .form-actions) {
  justify-content: flex-end;
  gap: 8px;
}
[data-agave] :is(.actions, .form-actions) button {
  flex: 0 0 auto;
}
[data-agave] :is(.actions button:not(.cancel, .ghost, .secondary), button.primary) {
  background: var(--on);
  box-shadow: none;
  color: var(--on-ink);
}
[data-agave] :is(.actions button:not(.cancel, .ghost, .secondary), button.primary):hover:not(:disabled) {
  background: var(--on);
  color: var(--on-ink);
  filter: brightness(1.1);
}
[data-agave] :is(.actions button:not(.cancel, .ghost, .secondary), button.primary):disabled {
  background: var(--glass);
  color: var(--mu);
}

/* The sign-in panel, to agave.technology's own numbers (agave's
   frontend/src/lib/Panel.svelte): dark glass, 96px from the left edge. It
   is fixed rather than absolute so that it and the plant behind it stay on
   the same spot. Registration is .page, the rest .page-sm. */
[data-agave] .page,
[data-agave] .page-sm,
[data-agave] .consent-container {
  position: fixed;
  top: 50%;
  left: 96px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  width: 360px;
  max-width: none;
  max-height: calc(100vh - 96px);
  margin: 0;
  padding: 32px;
  border-radius: var(--radius-panel);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-dark-blur);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  box-shadow: var(--glass-dark-edge);
  z-index: 1;
  /* On the panel a group is set apart by space, not by one more plane
     under it: nothing is deep enough inside 360px to carry two. */
  --bg-secondary: transparent;
  --bg-card: transparent;
}

/* Tranquil puts the passkey and the password side by side above 768px,
   which is the viewport, not this panel. Stacked, the divider between
   them is a line of text again. */
[data-agave] .auth-methods,
[data-agave] .split-layout {
  grid-template-columns: 1fr;
}
/* With no plane under them, the two groups' padding is only an indent. */
[data-agave] .auth-methods > * {
  padding: 0;
}
[data-agave] .method-divider {
  flex-direction: row;
  padding: 0;
}
[data-agave] .method-divider span {
  writing-mode: horizontal-tb;
  transform: none;
  padding: 0;
}
[data-agave] .page,
[data-agave] .page-sm {
  overflow-y: auto;
}
[data-agave] .page-header {
  margin-bottom: 0;
}

/* Consent: only the scopes scroll, the buttons stay visible. .actions is a
   direct child of .consent-container, a sibling of the two-column layout,
   so its siblings are the scrolling part. No class is named for the layout
   itself. */
[data-agave] .consent-container {
  overflow: hidden;
}
[data-agave] .consent-container > :not(.actions):not(.agave-brand):not(.agave-source) {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
[data-agave] .consent-container > .actions {
  flex: none;
}

/* The mark and the name, as agave.technology's panel opens. */
[data-agave] .agave-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mu);
  font-weight: 400;
}
[data-agave] .agave-brand svg {
  flex: none;
  width: 18px;
  height: 18px;
}
[data-agave] .help-links,
[data-agave] .agave-source {
  margin: 0;
  color: var(--mu);
}
[data-agave] .agave-source a,
[data-agave] .help-links a {
  color: var(--mu);
  text-decoration: none;
}
[data-agave] .agave-source a:hover,
[data-agave] .help-links a:hover {
  color: var(--ink);
}

.agave-plant {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
html:not([data-agave]) .agave-plant {
  display: none;
}

/* Under 960px the panel sits at the top and the plant drops behind it
   (agave's frontend/src/lib/Panel.svelte). */
@media (max-width: 959.98px) {
  [data-agave] .page,
  [data-agave] .page-sm,
  [data-agave] .consent-container {
    top: 48px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: calc(100vh - 64px);
    padding: 24px;
    transform: none;
  }
}