input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Self-hosted brand fonts: the CSP keeps font-src 'self' data:, so never link
   Google Fonts (amarra-cais doctor --mobile checks this). */
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/static/fonts/material-symbols-outlined.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

@layer base {
  /* CloudStore palette as variables: `html.light` (toggled by the header button
     through amarra-hook="theme") swaps the whole console. Channels, not hex, so
     Tailwind's /opacity modifiers keep working. */
  :root {
    --cs-surface: 3 20 39;
    --cs-surface-dim: 3 20 39;
    --cs-surface-bright: 42 58 79;
    --cs-surface-container-lowest: 0 15 33;
    --cs-surface-container-low: 11 28 48;
    --cs-surface-container: 16 32 52;
    --cs-surface-container-high: 27 43 63;
    --cs-surface-container-highest: 38 54 74;
    --cs-surface-variant: 38 54 74;
    --cs-on-surface: 211 228 254;
    --cs-on-surface-variant: 194 198 214;
    --cs-outline: 140 144 159;
    --cs-outline-variant: 66 71 84;
    --cs-primary: 173 198 255;
    --cs-on-primary: 0 46 106;
    --cs-primary-container: 77 142 255;
    --cs-on-primary-container: 0 40 93;
    --cs-primary-fixed: 216 226 255;
    --cs-primary-fixed-dim: 173 198 255;
    --cs-inverse-primary: 0 90 194;
    --cs-secondary: 78 222 163;
    --cs-on-secondary: 0 56 36;
    --cs-secondary-container: 0 165 114;
    --cs-on-secondary-container: 0 49 31;
    --cs-secondary-fixed: 111 251 190;
    --cs-secondary-fixed-dim: 78 222 163;
    --cs-on-secondary-fixed: 0 33 19;
    --cs-on-secondary-fixed-variant: 0 82 54;
    --cs-tertiary: 255 185 95;
    --cs-on-tertiary: 71 42 0;
    --cs-tertiary-container: 202 129 0;
    --cs-on-tertiary-container: 62 36 0;
    --cs-tertiary-fixed: 255 221 184;
    --cs-tertiary-fixed-dim: 255 185 95;
    --cs-on-tertiary-fixed: 42 23 0;
    --cs-on-tertiary-fixed-variant: 101 62 0;
    --cs-error: 255 180 171;
    --cs-on-error: 105 0 5;
    --cs-error-container: 147 0 10;
    --cs-on-error-container: 255 218 214;
    --cs-background: 3 20 39;
    --cs-on-background: 211 228 254;
    --cs-inverse-surface: 211 228 254;
    --cs-inverse-on-surface: 33 49 69;
    --cs-surface-tint: 173 198 255;
  }

  html.light {
    --cs-surface: 246 248 252;
    --cs-surface-dim: 233 238 246;
    --cs-surface-bright: 255 255 255;
    --cs-surface-container-lowest: 255 255 255;
    --cs-surface-container-low: 250 251 254;
    --cs-surface-container: 240 244 250;
    --cs-surface-container-high: 231 237 246;
    --cs-surface-container-highest: 221 229 240;
    --cs-surface-variant: 221 229 240;
    --cs-on-surface: 16 26 40;
    --cs-on-surface-variant: 70 83 106;
    --cs-outline: 107 120 137;
    --cs-outline-variant: 195 203 216;
    --cs-primary: 37 99 235;
    --cs-on-primary: 255 255 255;
    --cs-primary-container: 59 130 246;
    --cs-on-primary-container: 255 255 255;
    --cs-primary-fixed: 29 78 216;
    --cs-primary-fixed-dim: 96 165 250;
    --cs-inverse-primary: 173 198 255;
    --cs-secondary: 5 150 105;
    --cs-on-secondary: 255 255 255;
    --cs-secondary-container: 16 185 129;
    --cs-on-secondary-container: 255 255 255;
    --cs-secondary-fixed: 5 150 105;
    --cs-secondary-fixed-dim: 16 185 129;
    --cs-on-secondary-fixed: 255 255 255;
    --cs-on-secondary-fixed-variant: 6 95 70;
    --cs-tertiary: 180 83 9;
    --cs-on-tertiary: 255 255 255;
    --cs-tertiary-container: 245 158 11;
    --cs-on-tertiary-container: 255 255 255;
    --cs-tertiary-fixed: 120 53 15;
    --cs-tertiary-fixed-dim: 180 83 9;
    --cs-on-tertiary-fixed: 255 255 255;
    --cs-on-tertiary-fixed-variant: 120 53 15;
    --cs-error: 185 28 28;
    --cs-on-error: 255 255 255;
    --cs-error-container: 254 226 226;
    --cs-on-error-container: 127 29 29;
    --cs-background: 246 248 252;
    --cs-on-background: 16 26 40;
    --cs-inverse-surface: 16 26 40;
    --cs-inverse-on-surface: 246 248 252;
    --cs-surface-tint: 37 99 235;
  }

  /* Tailwind display utilities beat the `hidden` attribute (equal specificity,
     later in the sheet), so the console's panels/bulk bar hide explicitly. */
  [hidden] {
    display: none !important;
  }

  /* Theme toggle icon: shows what the next click switches to. */
  html.light .cs-theme-icon-light {
    display: none;
  }

  html:not(.light) .cs-theme-icon-dark {
    display: none;
  }

  /* Amarra Drive paints its loading chrome inline with the scaffold copper
     (amarra.js); repaint the bar and the spinner with the console palette so
     they follow the theme. Inline styles need !important to be overridden. */
  #amarra-progress {
    background: rgb(var(--cs-primary-container)) !important;
  }

  #amarra-veil > div {
    border-color: rgb(var(--cs-primary-container) / 0.25) !important;
    border-top-color: rgb(var(--cs-primary-container)) !important;
  }

  body {
    @apply bg-surface font-sans text-on-surface antialiased;
  }

  /* Console-session scrollbars: quiet until hovered, 10px hit area. */
  * {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.surface-container-highest") transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: theme("colors.surface-container-highest");
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: theme("colors.surface-bright");
    background-clip: content-box;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@layer components {
  /* Material Symbols icon font (variable axes: FILL/GRAD via modifiers). */
  .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings:
      "FILL" 0,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  .material-symbols-outlined.msi-fill {
    font-variation-settings:
      "FILL" 1,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
  }

  /* Progressive native select (#219). Unsupported browsers keep the current
     OS picker. Do not add a JS listbox here — Drive/iOS keep a real <select>. */
  @supports (appearance: base-select) {
    select {
      appearance: base-select;
    }
  }

  /* Client-side invalid after interaction; server 422 still uses .Error. */
  .amarra-field:user-invalid,
  input:user-invalid,
  select:user-invalid,
  textarea:user-invalid {
    border-color: rgb(255 180 171);
  }

  .cais-nav-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .cais-skeleton {
    @apply animate-pulse rounded-lg bg-surface-container;
  }

  .cais-auth-screen {
    @apply min-h-screen bg-surface text-on-surface;
  }

  /* Auth screens breathe: taller controls than the dense console tables. */
  .auth-card input:not([type="checkbox"]),
  .auth-card select {
    height: 2.5rem;
  }

  .auth-card button[type="submit"] {
    height: 2.25rem;
  }

  .cais-password-wrap {
    @apply relative;
  }

  .cais-password-wrap input {
    padding-right: 2.5rem;
  }

  .cais-password-toggle {
    @apply absolute right-0 top-0 flex h-full items-center px-3 text-outline hover:text-on-surface;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .cais-password-toggle svg {
    width: 1rem;
    height: 1rem;
  }

  .relative > [data-cais-password-toggle] {
    @apply absolute right-0 top-0 flex h-full items-center px-3 text-outline hover:text-on-surface;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .relative > input[type="password"] {
    padding-right: 2.5rem;
  }

  .cais-select-search {
    position: relative;
  }

  .cais-select-search-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .cais-select-search-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid theme("colors.surface-bright");
    background: theme("colors.surface-container");
    color: theme("colors.on-surface");
    padding: 0.5rem 0.75rem;
    text-align: left;
    outline: none;
  }

  .cais-select-search-trigger:focus {
    box-shadow: 0 0 0 2px theme("colors.primary-container");
  }

  .cais-select-search-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .cais-select-search-panel {
    position: absolute;
    z-index: 20;
    margin-top: 0.25rem;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid theme("colors.surface-bright");
    background: theme("colors.surface-container-high");
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4);
  }

  .cais-select-search-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid theme("colors.surface-bright");
    background: transparent;
    color: theme("colors.on-surface");
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: none;
  }

  .cais-select-search-list {
    max-height: 12rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
  }

  .cais-select-search-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
  }

  .cais-select-search-option:hover {
    background: theme("colors.surface-container-highest");
  }

  .cais-select-search-option.is-selected {
    background: theme("colors.surface-container-highest");
    font-weight: 500;
    color: theme("colors.primary");
  }

  .cais-select-search-option.is-highlighted {
    background: theme("colors.surface-container-highest");
  }

  .cais-select-search-option.is-hidden {
    display: none;
  }

  .cais-select-search-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: theme("colors.outline");
  }

  /* Amarra Drive toast stack: fixed top-right, stacked, animated in/out. */
  #amarra-toast-host {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
    max-width: min(24rem, calc(100vw - 2.5rem));
  }

  #amarra-toast-host > * {
    pointer-events: auto;
    width: 100%;
  }

  .amarra-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid theme("colors.surface-bright");
    background: theme("colors.surface-container-high");
    box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.6);
    color: theme("colors.on-surface");
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .amarra-toast-enter {
    animation: amarra-toast-in 240ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
  }

  .amarra-toast-leave {
    animation: amarra-toast-out 180ms ease-in forwards;
  }

  .amarra-toast-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    line-height: 1;
  }

  .amarra-toast-success .amarra-toast-icon {
    background: rgb(78 222 163 / 0.25);
    color: rgb(111 251 190);
  }

  .amarra-toast-error .amarra-toast-icon {
    background: rgb(255 180 171 / 0.22);
    color: rgb(255 218 214);
  }

  .amarra-toast-info .amarra-toast-icon {
    background: rgb(77 142 255 / 0.25);
    color: rgb(173 198 255);
  }

  .amarra-toast-warning .amarra-toast-icon {
    background: rgb(255 185 95 / 0.25);
    color: rgb(255 221 184);
  }

  .amarra-toast-close {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(194 198 214 / 0.7);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
  }

  .amarra-toast-close:hover {
    color: theme("colors.on-surface");
  }

  @keyframes amarra-toast-in {
    from {
      opacity: 0;
      transform: translateY(-0.75rem) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes amarra-toast-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(0.97);
    }
    to {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.97);
    }
  }

  /* Page transitions for Amarra Drive morphs (fallback to CSS fade). */
  @keyframes amarra-page-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .amarra-page-enter {
    animation: amarra-page-in 260ms ease-out both;
  }

  @keyframes amarra-fade-out {
    to {
      opacity: 0;
    }
  }

  ::view-transition-old(root) {
    animation: amarra-fade-out 140ms ease-in both;
  }

  ::view-transition-new(root) {
    animation: amarra-page-in 280ms ease-out both;
  }

  /* Marketing page ambient effects kept for the scaffold home page. */
  .amarra-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  @keyframes amarra-rise {
    from {
      opacity: 0;
      transform: translateY(1.15rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .amarra-rise {
    animation: amarra-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .amarra-rise,
    .amarra-toast-enter,
    .amarra-page-enter {
      animation: none;
    }
  }
}