/* ============================================================================
   Spatial bento, Susin red — soft blush canvas, burgundy structure,
   brand-red gradient action. Claymorphism only, no translucency.

   A token + treatment layer. It redefines the palette the whole workspace reads
   through var(--*), then re-treats the recurring surfaces as clay: soft raised
   volumes and inset wells. Every surface is opaque. No markup or logic changes.

   Every text tone here is set for legibility at the sizes the app actually uses:
   the interface leans on 9.5–11px uppercase labels, so the mid neutrals are
   deliberately darker than a normal grey ramp would put them.

   Load LAST — after Industry styles.css and ds-type-premium.css.
   ============================================================================ */

:root {
  /* ---- 60% canvas: warm blush over paper ---- */
  --color-bg: #f1eded;
  --color-surface: #fdfafa;
  --color-divider: #e3d9da;

  /* ---- 30% structure: warm charcoal. The rail paints from --color-text. ---- */
  --color-text: #1f1a1b;
  --shell-900: #140f10;
  --shell-800: #1f1a1b;
  --shell-700: #2b2324;
  --shell-600: #3a2f31;

  /* ---- neutral ramp, warm. Mid steps run dark on purpose — see note above. ---- */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #f6f1f2;
  --color-neutral-300: #ece4e5;
  --color-neutral-400: #ded4d5;
  --color-neutral-500: #b0a4a6;
  --color-neutral-600: #6a5f61;
  --color-neutral-700: #4d4446;
  --color-neutral-800: #332c2d;
  --color-neutral-900: #1c1718;

  /* ---- 10% action: Susin red ---- */
  --color-accent: #c8102e;
  --color-accent-100: #fdecee;
  --color-accent-200: #f9d3d8;
  --color-accent-300: #f0a5ae;
  --color-accent-400: #e06375;
  --color-accent-500: #c8102e;
  --color-accent-600: #ae0e28;
  --color-accent-700: #8f0b20;
  --color-accent-800: #74091a;
  --color-accent-900: #560713;

  /* the second accent role resolves to the same family — this is a mono scheme */
  --color-accent-2: #c8102e;
  --color-accent-2-100: #fdecee;
  --color-accent-2-200: #f9d3d8;
  --color-accent-2-700: #8f0b20;
  --color-accent-2-800: #74091a;
  --color-accent-2-900: #560713;

  /* ---- clay: light from the upper left, volume below right ---- */
  --clay-raised:
    -5px -5px 12px rgba(255, 255, 255, 0.95),
    7px 9px 20px -6px rgba(31, 26, 27, 0.16),
    2px 3px 6px -2px rgba(31, 26, 27, 0.08);
  --clay-raised-lg:
    -7px -7px 18px rgba(255, 255, 255, 0.96),
    12px 16px 34px -8px rgba(31, 26, 27, 0.2),
    3px 4px 10px -3px rgba(31, 26, 27, 0.1);
  --clay-flat:
    -3px -3px 8px rgba(255, 255, 255, 0.9),
    4px 5px 12px -4px rgba(31, 26, 27, 0.12);
  --clay-inset:
    inset 3px 4px 8px -2px rgba(31, 26, 27, 0.15),
    inset -2px -2px 6px rgba(255, 255, 255, 0.92);
  --clay-inset-deep:
    inset 4px 5px 11px -2px rgba(31, 26, 27, 0.2),
    inset -2px -2px 7px rgba(255, 255, 255, 0.88);

  --shadow-sm: var(--clay-flat);
  --shadow-md: var(--clay-raised);
  --shadow-lg: var(--clay-raised-lg);

  /* ---- solid chrome. No translucency: every surface is opaque, so small type
     always sits on its own ground rather than on whatever scrolls beneath. ---- */
  --glass-light: #fdfafa;
  --glass-blush: #f6eeef;
  --glass-dark: #4a0610;
  --glass-hair: 1px solid var(--color-divider);

  /* ---- geometry: clay needs generous, even radii ---- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* the red gradients the app asks for by name */
  --grad-accent: linear-gradient(140deg, #e01d3c 0%, #c8102e 52%, #8f0b20 100%);
  --grad-accent-soft: linear-gradient(140deg, #fdf0f1 0%, #f9dde1 100%);
  --grad-card: linear-gradient(150deg, #ffffff 0%, #fdf9f9 58%, #f8f2f3 100%);
  /* the rail is brand burgundy rather than near-black — white type sits on a
     coloured ground, which reads warmer and keeps every white hairline working */
  --grad-shell: linear-gradient(165deg, #8f0b20 0%, #6d0917 48%, #4a0610 100%);

  /* container tiers */
  --tier-1: linear-gradient(150deg, #ffffff 0%, #fdfafa 60%, #f9f4f5 100%);
  --tier-2: linear-gradient(150deg, #fdf7f8 0%, #f9eef0 60%, #f5e8ea 100%);
  --tier-3: linear-gradient(150deg, #f9f2f3 0%, #f3eaec 100%);
  --tier-cool: linear-gradient(150deg, #fdfbfb 0%, #f6f1f2 100%);
  --edge-hair: inset 0 0 0 1px rgba(200, 16, 46, 0.1);
  --edge-accent: inset 3px 0 0 0 rgba(200, 16, 46, 0.55);
}

html,
body {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* No canvas wash — its white radial fell over the rail and hazed the whole
   top-left corner. The clay shadows carry the depth on their own. */

/* ============================================================
   Legibility pass — the interface runs on very small labels, so
   they are sized and toned for reading rather than for texture.
   ============================================================ */

/* micro caps: one step larger, tighter tracking, a tone that actually reads */
main [style*='text-transform: uppercase'][style*='letter-spacing'],
aside [style*='text-transform: uppercase'][style*='letter-spacing'],
header [style*='text-transform: uppercase'][style*='letter-spacing'] {
  font-size: 10.5px !important;
  letter-spacing: 0.11em !important;
  font-weight: 700 !important;
  color: var(--color-neutral-700) !important;
}

/* the smallest body sizes get a floor — 9.5px sub-labels were unreadable */
main [style*='font-size: 9.5px'],
main [style*='font-size: 10px'],
header [style*='font-size: 9.5px'] {
  font-size: 10.5px !important;
}

/* secondary copy carried at neutral-600 moves to a readable tone. The header is
   included explicitly — its kicker sits on glass and was the dimmest text here. */
main [style*='color: var(--color-neutral-600)'],
header [style*='color: var(--color-neutral-600)'] {
  color: var(--color-neutral-700) !important;
}

main [style*='color: var(--color-neutral-500)'],
header [style*='color: var(--color-neutral-500)'] {
  color: var(--color-neutral-600) !important;
}

/* accent text at body size needs the deep step, not the accent itself */
main [style*='color: var(--color-accent-700)'],
main [style*='color: var(--color-accent-800)'] {
  color: var(--color-accent-800) !important;
}

main input::placeholder,
main textarea::placeholder {
  color: var(--color-neutral-600);
  opacity: 1;
}

/* ============================================================
   Structure — the charcoal rail, lit from within
   ============================================================ */

aside {
  background: var(--grad-shell) !important;
  border-right: 0 !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    18px 0 44px -22px rgba(20, 15, 16, 0.6) !important;
}

/* nav labels sat at rgba white — pinned up so they read against the gradient */
aside button[title] {
  border-radius: var(--radius-sm) !important;
  transition: background 140ms ease;
}

aside button[title] span {
  color: rgba(255, 255, 255, 0.96);
}

aside button[title]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

aside [style*='text-transform: uppercase'][style*='letter-spacing'] {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* the brand mark only — matched on its own dimensions, so this cannot reach the
   selected nav row, which stays a solid accent fill with a white label */
aside div[style*='width: 34px'][style*='height: 38px'] {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--color-accent-800) !important;
}

/* hairlines set in white alpha need a touch more presence on a lighter ground */
aside div[style*='rgba(255,255,255,0.1)'] {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* the group labels that pin while the nav scrolls */
aside > div[style*='overflow-y'] > div > div:first-child {
  background: var(--glass-dark) !important;
}

/* ============================================================
   Chrome — header, dialogs, floating bars. Opaque throughout.
   ============================================================ */

header {
  position: relative;
  z-index: 4;
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  box-shadow: 0 14px 30px -26px rgba(31, 26, 27, 0.5) !important;
}

/* the screen title and its kicker, at full strength */
header > div:first-child > div:first-child {
  color: var(--color-accent-800) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.11em !important;
  font-weight: 700 !important;
}

header > div:first-child > div:last-child {
  color: var(--color-text) !important;
}

header button[title^='Search everything'] {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-neutral-200) !important;
  box-shadow: var(--clay-inset) !important;
  color: var(--color-neutral-700) !important;
}

header button[title^='Search everything']:hover {
  background: #ffffff !important;
}

header select {
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-neutral-200) !important;
  box-shadow: var(--clay-inset) !important;
  color: var(--color-text) !important;
}

/* modal shells: command palette, image preview, remap dialog */
[style*='position: fixed'][style*='z-index: 95'] > div,
[style*='position: fixed'][style*='z-index: 96'] > div,
[style*='position: fixed'][style*='z-index: 80'] > div {
  border-radius: var(--radius-lg) !important;
  border: var(--glass-hair) !important;
  background: var(--glass-light) !important;
  box-shadow: var(--clay-raised-lg) !important;
}

/* the bulk-selection action bar floats as a glass pill */
main [style*='position: fixed'][style*='bottom'] {
  border-radius: var(--radius-xl) !important;
  border: var(--glass-hair) !important;
  background: var(--glass-light) !important;
  box-shadow: var(--clay-raised-lg) !important;
}

/* ============================================================
   Clay — every panel becomes a soft raised volume
   ============================================================ */

main .blueprint,
main div[style*='background: var(--color-surface)'] {
  background: var(--tier-1) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--clay-raised) !important;
}

/* a clay volume needs no registration marks — that was the wireframe grammar */
main .blueprint .corner,
main .blueprint > i {
  display: none !important;
}

/* KPI tiles: the same volume, one tone deeper, with a red edge */
main div[style*='grid-template-columns'] > div.blueprint,
main div[style*='grid-template-columns'] > div[style*='background: var(--color-surface)'] {
  background: var(--tier-2) !important;
  box-shadow: var(--clay-raised), var(--edge-accent) !important;
}

/* a panel directly inside a panel recedes instead of stacking another shadow */
main .blueprint .blueprint,
main div[style*='background: var(--color-surface)'] > div[style*='background: var(--color-surface)'] {
  background: var(--tier-3) !important;
  box-shadow: var(--clay-inset) !important;
}

main div[style*='border: 1px solid var(--color-neutral-400)'],
main div[style*='border: 1px solid var(--color-divider)'] {
  border-color: transparent !important;
  border-radius: var(--radius) !important;
}

/* table shells: clipped so the header glass sits inside the radius */
main div[style*='overflow-x: auto'] {
  background: var(--tier-cool) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--clay-raised) !important;
}

/* drop zones stay dashed — the affordance depends on it — but soften */
main div[style*='dashed'] {
  border-radius: var(--radius-lg) !important;
  background: #ffffff !important;
}

/* ============================================================
   Tables — glass header bar, quiet rows
   ============================================================ */

main [data-thead] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-accent-100) !important;
  border-bottom: 1px solid var(--color-accent-200) !important;
}

main [data-thead],
main [data-thead] > div {
  color: var(--color-accent-900) !important;
}

main [data-row]:nth-of-type(even) {
  background: rgba(200, 16, 46, 0.026);
}

main [data-row][style*='background: var(--color-accent-100)'] {
  background: linear-gradient(90deg, #f9dde1 0%, #fdf1f2 100%) !important;
  box-shadow: inset 3px 0 0 0 var(--color-accent) !important;
}

/* ============================================================
   Controls — inset wells for entry, clay volumes for action
   ============================================================ */

main input,
main select,
main textarea {
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-neutral-200) !important;
  box-shadow: var(--clay-inset) !important;
  color: var(--color-text) !important;
}

main input:focus,
main select:focus,
main textarea:focus {
  outline: none;
  background: #ffffff !important;
  box-shadow: var(--clay-inset-deep), 0 0 0 2px rgba(200, 16, 46, 0.35) !important;
}

main button {
  border-radius: var(--radius-sm) !important;
  transition: box-shadow 130ms ease, transform 130ms ease, background 130ms ease;
}

/* the red fill is the one solid object — and its label stays white */
main button[style*='background: var(--color-accent)'],
main button[style*='background: var(--grad-accent'] {
  background: var(--grad-accent) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow:
    -3px -3px 8px rgba(255, 255, 255, 0.5),
    5px 7px 16px -4px rgba(116, 9, 26, 0.45) !important;
}

main button[style*='background: var(--color-accent)']:hover,
main button[style*='background: var(--grad-accent']:hover {
  box-shadow:
    -3px -3px 8px rgba(255, 255, 255, 0.55),
    7px 10px 22px -5px rgba(116, 9, 26, 0.5) !important;
  transform: translateY(-1px);
}

main button[style*='background: var(--color-accent)']:active,
main button[style*='background: var(--grad-accent']:active {
  box-shadow: var(--clay-inset-deep) !important;
  transform: translateY(0);
}

/* outlined and ghost buttons: flat clay that presses in */
main button[style*='background: transparent'] {
  border-color: transparent !important;
  background: #ffffff !important;
  box-shadow: var(--clay-flat) !important;
}

main button[style*='background: transparent']:hover {
  background: #ffffff !important;
  box-shadow: var(--clay-raised) !important;
}

main button[style*='background: transparent']:active {
  box-shadow: var(--clay-inset) !important;
}

/* segmented runs join on -1px margins, so only the outer ends round */
main button[style*='margin-left: -1px'],
main button[style*='margin: 0 -1px -1px 0'] {
  border-radius: 0 !important;
}

main button[style*='margin-left: -1px']:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

main button[style*='margin-left: -1px']:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* chips, tags and attribute pills: pill-shaped inset tokens, dark enough to read */
main span[style*='background: var(--color-neutral-200)'] {
  border-radius: 999px !important;
  background: var(--color-neutral-200) !important;
  box-shadow: inset 1px 2px 4px -1px rgba(31, 26, 27, 0.12) !important;
  color: var(--color-neutral-800) !important;
}

main span[style*='background: var(--color-accent-100)'],
main span[style*='background: var(--color-accent-200)'] {
  border-radius: 999px !important;
  color: var(--color-accent-900) !important;
}

main span[style*='background: var(--color-neutral-300)'] {
  border-radius: 999px !important;
  color: var(--color-neutral-800) !important;
}

/* progress troughs and their fills */
main span[style*='background: var(--color-neutral-200)'][style*='height'],
main div[style*='background: var(--color-neutral-200)'][style*='height'],
main div[style*='background: var(--color-neutral-300)'][style*='height'] {
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: var(--clay-inset) !important;
}

main span[style*='background: var(--color-accent)'][style*='height'],
main span[style*='background: var(--color-accent-700)'][style*='height'] {
  border-radius: 999px !important;
}

/* image plates */
main label[title*='photograph'],
main label[title*='Photograph'],
main span[role='img'] {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

main label[title*='photograph'],
main label[title*='Photograph'] {
  box-shadow: var(--clay-inset) !important;
}

/* ============================================================
   Bento — stronger grouping, more air between volumes
   ============================================================ */

main > div[style*='overflow-y: auto'] {
  position: relative;
  z-index: 1;
  padding: 26px 26px 36px !important;
}

main div[style*='grid-template-columns'][style*='gap: 9px'] {
  gap: 14px !important;
}

main div[style*='grid-template-columns'][style*='gap: 10px'] {
  gap: 16px !important;
}

main div[style*='grid-template-columns'][style*='gap: 12px'] {
  gap: 18px !important;
}

/* section rules give way to space, which is what separates bento cells */
main div[style*='border-bottom: 2px solid var(--color-divider)'] {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* toasts: dark glass, white type */
[style*='position: fixed'] > div[style*='background: var(--color-text)'] {
  border-radius: var(--radius) !important;
  background: var(--glass-dark) !important;
  box-shadow: var(--clay-raised-lg) !important;
  color: #fff !important;
}

/* ============================================================
   Links, selection, focus
   ============================================================ */

a {
  color: var(--color-accent-800);
  text-decoration-color: rgba(200, 16, 46, 0.4);
}

a:hover {
  color: var(--color-accent-900);
  text-decoration-color: var(--color-accent);
}

::selection {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   Responsive — the treatments soften as the canvas narrows
   ============================================================ */

@media (max-width: 1024px) {
  main > div[style*='overflow-y: auto'] {
    padding: 20px 18px 30px !important;
  }

  :root {
    --clay-raised:
      -4px -4px 9px rgba(255, 255, 255, 0.92),
      5px 7px 15px -5px rgba(31, 26, 27, 0.15);
    --radius: 14px;
    --radius-lg: 18px;
  }
}

@media (max-width: 720px) {
  main > div[style*='overflow-y: auto'] {
    padding: 16px 14px 26px !important;
  }

  main div[style*='grid-template-columns'][style*='gap: 12px'],
  main div[style*='grid-template-columns'][style*='gap: 10px'] {
    gap: 12px !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  main button {
    transition: none;
  }

  main button:hover {
    transform: none !important;
  }
}