/* Rent Ratchet design system
   One stylesheet. Tokens first (light, then dark via prefers-color-scheme),
   then base, layout, components, and the per-app sections. Every colour in
   the components comes from a token so both themes stay in step. */

:root {
  color-scheme: light;
  /* Warm neutral surfaces */
  --bg: #f6f1ea;
  --surface: #fffdf9;
  --surface-2: #f0e9df;
  --line: rgba(35, 28, 20, 0.1);
  --line-strong: rgba(35, 28, 20, 0.22);
  /* Text */
  --ink: #1f2430;
  --muted: #5b6270;
  --faint: #5f6774;
  /* Brand: workshop orange on a navy anchor */
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-ink: #9a3412;
  --accent-soft: #fde8d8;
  --on-accent: #ffffff;
  --accent2: var(--accent);
  --navy: #1f2a3a;
  --navy-hover: #2d3b50;
  --on-navy: #ffffff;
  /* Semantic */
  --success: #1c7a43;
  --success-soft: #e2f4e8;
  --warn: #7a5200;
  --warn-soft: #fff1cc;
  --warn-line: #e0a526;
  --danger: #a02b20;
  --danger-strong: #b03a2e;
  --danger-soft: #fdecea;
  --info: #1f4b99;
  --info-soft: #e3ecfb;
  --gold: #d98e04;
  --gold-soft: #fffdf5;
  --photo-bg: #e8e0d4;
  /* Shape, depth, motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35, 28, 20, 0.06), 0 2px 8px rgba(35, 28, 20, 0.05);
  --shadow-2: 0 2px 4px rgba(35, 28, 20, 0.07), 0 10px 28px rgba(35, 28, 20, 0.1);
  --shadow-3: 0 6px 12px rgba(35, 28, 20, 0.1), 0 20px 48px rgba(35, 28, 20, 0.16);
  --ring: 0 0 0 3px rgba(194, 65, 12, 0.3);
  --ease: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Space scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  /* Type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --fs-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.9rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.1rem, 1.05rem + 0.3vw, 1.2rem);
  --fs-h2: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-h1: clamp(1.9rem, 1.5rem + 2vw, 2.7rem);
  --fs-hero: clamp(2.2rem, 1.6rem + 3.4vw, 3.8rem);
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --measure: 44rem;
  --page: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15171c;
    --surface: #1e2229;
    --surface-2: #272c35;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.24);
    --ink: #ebe6df;
    --muted: #aab0bb;
    --faint: #8c939f;
    --accent: #f97316;
    --accent-hover: #fb923c;
    --accent-ink: #fb923c;
    --accent-soft: #3a2113;
    --on-accent: #1a1208;
    --navy: #e6ebf3;
    --navy-hover: #ffffff;
    --on-navy: #15171c;
    --success: #6fd394;
    --success-soft: #16301f;
    --warn: #f3c45c;
    --warn-soft: #3a2e0f;
    --warn-line: #b8862a;
    --danger: #ff9c91;
    --danger-strong: #c94b3f;
    --danger-soft: #3d1b18;
    --info: #9bb8f2;
    --info-soft: #1d2a45;
    --gold: #f0b84a;
    --gold-soft: #2a2416;
    --photo-bg: #2a2f39;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 6px 12px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(249, 115, 22, 0.4);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; width: 100%; }
img, svg, video { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); margin: 0.2rem 0 0.6rem; }
h2 { font-size: var(--fs-h2); margin: 1.5rem 0 0.5rem; }
h3 { font-size: var(--fs-h3); margin: 1rem 0 0.4rem; }
p { margin: 0 0 1rem; overflow-wrap: anywhere; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
small { font-size: var(--fs-sm); }

.site-header, .site-footer, main {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter);
}
main { padding-top: var(--s-6); padding-bottom: var(--s-7); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  padding: 0.65rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--surface); }
}
.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
/* The CSS glyph is the fallback brand, for a site with no live brand set. */
.brand:not(.has-set)::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: 30% 30% 30% 30% / 40%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: inset 0 0 0 0.18em var(--surface), inset 0 0 0 0.3em var(--accent);
  flex: none;
}
.brand:hover { color: var(--accent-ink); }
/* Brand set header: the wordmark lockup on wide screens, the square mark
   plus the name on phones. The wordmark's own notes say not to shrink it
   below about 320px; sized by width (not a 40px height, which rendered it
   75px wide and illegible) it runs 200 to 280px, the smallest the lettering
   still reads at, and the header grows to fit. Phones get the mark instead.
   base.html's sizes attribute mirrors this rule. */
.brand.has-set { display: flex; align-items: center; gap: 0.5rem; }
.brand.has-set picture { display: block; line-height: 0; }
.brand-wordmark { width: clamp(200px, 20vw, 280px); height: auto; display: block; }
.brand-mark { display: none; width: 36px; height: 36px; }
/* The name stays in the DOM for screen readers while the picture shows. */
.brand.has-set .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Dark mode: the <picture> in base.html serves the wordmark-dark renders
   (paper-white lettering) under prefers-color-scheme: dark, and the SVG
   master flips its .ink paths the same way, so no backing chip is needed. */
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.25rem; margin-left: auto; }
nav a { color: var(--ink); text-decoration: none; margin-left: 1rem; }
.site-nav a { margin-left: 0; padding: 0.45rem 0.75rem; border-radius: var(--r-sm); font-weight: 500; transition: background var(--ease), color var(--ease); }
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a.cta { margin-left: 0.35rem; }
.nav-inbox { position: relative; }

/* ---------- Buttons ---------- */
nav a.cta, .button, button, input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-md);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: var(--shadow-1);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease), color var(--ease);
}
nav a.cta:hover, .button:hover, button:hover, input[type=submit]:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.button:active, button:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.button-quiet, button.button-quiet, a.button-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  box-shadow: none;
}
.button-quiet:hover, button.button-quiet:hover, a.button-quiet:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.button-ghost, button.button-ghost { background: transparent; color: var(--accent-ink); border-color: transparent; box-shadow: none; }
.button-ghost:hover, button.button-ghost:hover { background: var(--accent-soft); color: var(--accent-hover); }
.button-danger, button.button-danger { background: var(--danger-strong); color: #fff; }
.button-danger:hover, button.button-danger:hover { background: var(--danger); color: #fff; }
.button, .button-quiet { display: inline-flex; margin: 0 0.4rem 0.4rem 0; }
button.linklike { display: inline; background: none; border: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 400; box-shadow: none; }
button.linklike:hover { background: none; color: var(--accent-hover); transform: none; box-shadow: none; }
button.linklike.danger-link { color: var(--danger); }
.form-actions a:not(.button):not(.button-quiet) { color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  margin: 0 0 var(--s-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60rem 30rem at 110% -20%, var(--accent-soft), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.hero::after {
  content: "🔧";
  position: absolute;
  right: -0.15em;
  bottom: -0.35em;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 1;
  opacity: 0.08;
  transform: rotate(-18deg);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: var(--fs-hero); margin: 0.3rem 0 0.9rem; max-width: 20ch; letter-spacing: -0.025em; }
.hero .lede { margin-bottom: var(--s-5); }
.hero .button, .hero .button-quiet { padding: 0.75rem 1.4rem; font-size: 1.02rem; }
.eyebrow { letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; margin: 0 0 0.3rem; }
.tagline-line[hidden] { display: none !important; }
.lede { font-size: var(--fs-lg); max-width: var(--measure); color: var(--muted); line-height: 1.6; }

/* ---------- Generic cards and grids ---------- */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid article { background: var(--surface); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.grid article h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.price { font-weight: 600; color: var(--accent-ink); }

/* Contact / lead form */
.lead-form { max-width: 32rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow-1); }
.lead-form p { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 1rem; }
.lead-form label { font-weight: 600; font-size: 0.95rem; }
.lead-form input, .lead-form textarea {
  font: inherit; padding: 0.65rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.lead-form textarea { min-height: 7rem; resize: vertical; }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.lead-form button { margin-top: 0.25rem; }

/* Flash messages */
.messages, ul.messages { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: 0.5rem; }
.messages li { background: var(--success-soft); color: var(--ink); border-left: 4px solid var(--success); padding: 0.75rem 1rem; border-radius: var(--r-sm); box-shadow: var(--shadow-1); }

/* ---------- Footer ---------- */
.site-footer { font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line); margin-top: var(--s-6); padding-top: var(--s-6); padding-bottom: var(--s-6); background: transparent; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: var(--s-3); }
.footer-links a { color: var(--ink); margin-left: 0; text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.site-footer > p:last-child { margin: 0; }

/* ---------- Legal pages ---------- */
.legal-doc { max-width: var(--measure); }
.legal-head h1 { font-size: var(--fs-h1); margin: 0.2rem 0 0.3rem; }
.legal-meta { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.legal-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem 1.1rem; margin: 1.5rem 0; box-shadow: var(--shadow-1); }
.legal-toc h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.legal-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.legal-toc li { break-inside: avoid; padding: 0.1rem 0; }
.legal-body h2 { margin: 2rem 0 0.5rem; font-size: 1.35rem; scroll-margin-top: 5rem; }
.legal-body h3 { margin: 1.4rem 0 0.4rem; }
.legal-body ul { padding-left: 1.3rem; }
.legal-body li { margin: 0.3rem 0; }
.legal-body a, .legal-toc a, .legal-more a, .vc-notice a { color: var(--accent-ink); overflow-wrap: anywhere; }
.legal-more { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }

/* Short virtual-currency notice, shown wherever beer units appear */
.vc-notice { margin: var(--s-5) 0; padding: 0.8rem 1rem; background: var(--warn-soft); border-left: 4px solid var(--warn-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); color: var(--ink); }
.vc-notice p { margin: 0; }

/* Cookie banner */
#cookie-banner { display: none; position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 50; padding: 1rem 1.25rem; background: var(--navy); color: var(--on-navy); border-radius: var(--r-md); gap: 1rem; align-items: center; justify-content: space-between; box-shadow: var(--shadow-3); max-width: var(--page); margin: 0 auto; }
#cookie-banner.show { display: flex; flex-wrap: wrap; }
#cookie-banner p { margin: 0; }
#cookie-banner button { padding: .55rem 1.1rem; border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; }

/* ---------- Signed-in menu ---------- */
.user-menu { position: relative; }
.user-menu summary { cursor: pointer; list-style: none; padding: 0.5rem 0.9rem; border-radius: var(--r-md); background: var(--navy); color: var(--on-navy); font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background var(--ease); }
.user-menu summary:hover { background: var(--navy-hover); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::after { content: " \25BE"; }
.user-menu-items { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 0.35rem; }
.user-menu-items a, .user-menu-items button.linklike { display: block; width: 100%; text-align: left; padding: 0.55rem 0.75rem; border-radius: var(--r-sm); color: var(--ink); background: none; text-decoration: none; font-weight: 500; }
.user-menu-items a:hover, .user-menu-items button.linklike:hover { background: var(--surface-2); color: var(--ink); }
.user-menu-items form { margin: 0; }
@media (max-width: 560px) { .user-menu-items { right: auto; left: 0; } }

/* ---------- Forms ---------- */
main.auth { max-width: 40rem; }
main.auth h1 { font-size: var(--fs-h1); margin: 0.2rem 0 0.6rem; }
main.auth a, .account-links a, .nudge a, .profile-bio a, .plain-list a { color: var(--accent-ink); }
.site-form, main.auth form { margin: var(--s-5) 0; }
main.auth form.site-form, main.auth-entrance form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow-1); }
.field, main.auth form > p { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.field label, main.auth form > p label { font-weight: 600; font-size: 0.95rem; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field textarea, .field select,
main.auth form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) {
  font: inherit; width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.7rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus, main.auth form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field input::placeholder, .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--faint); }
.field input[type=file] { font: inherit; max-width: 100%; padding: 0.5rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); }
.field input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 0.75rem; padding: 0.4rem 0.9rem; border: 0; border-radius: var(--r-sm); background: var(--navy); color: var(--on-navy); cursor: pointer; }
.field-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.2rem 0.6rem; }
.field-check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--accent); }
.field-check label { font-weight: 400; }
.field-check .help, .field-check .field-error { grid-column: 2; }
.help { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.optional { font-weight: 500; font-size: 0.72rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.05rem 0.5rem; vertical-align: middle; letter-spacing: 0.02em; }
.field-error ul, .form-errors ul, ul.errorlist { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 0.92rem; }
.field-bad input:not([type=checkbox]), .field-bad textarea, .field-bad select { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.form-errors { background: var(--danger-soft); border-left: 4px solid var(--danger); padding: 0.7rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 1rem; }
.form-errors p { margin: 0 0 0.35rem; font-weight: 600; }
.form-errors a { color: var(--danger); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: var(--s-5); }
.form-actions .button { margin: 0; }
.form-section { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.6rem clamp(1rem, 3vw, 1.5rem) 0.4rem; margin: 0 0 var(--s-5); background: var(--surface); min-width: 0; box-shadow: var(--shadow-1); }
.form-section legend { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; padding: 0.2rem 0.6rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.form-section > .help { margin-bottom: 1rem; }

/* ---------- Profiles ---------- */
.profile-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin: 0.5rem 0 1.25rem; }
.profile-head h1 { font-size: var(--fs-h1); margin: 0.1rem 0 0.2rem; overflow-wrap: anywhere; }
.profile-area { margin: 0; font-weight: 600; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--photo-bg); flex: none; box-shadow: var(--shadow-1); border: 3px solid var(--surface); }
.avatar-blank { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 2.4rem; color: var(--accent-ink); background: var(--accent-soft); }
.profile-bio { max-width: 40rem; overflow-wrap: anywhere; }
.rating-pair { margin: 0; }
.rating-pair div { padding: 0.3rem 0; }
.rating-pair dt, .account-facts dt { font-size: 0.85rem; color: var(--muted); }
.rating-pair dd, .account-facts dd { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.account-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.nudge { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 0.7rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }

/* ---------- Tools: cards, browse, detail ---------- */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.tool-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: var(--s-4) 0; }
.tool-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.tool-card:hover, .tool-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.tool-card-link { color: var(--ink); text-decoration: none; display: block; }
.tool-card-link:hover h3 { color: var(--accent-ink); }
.tool-card-link:focus-visible { outline-offset: -3px; }
.tool-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--photo-bg); transition: transform 400ms ease; }
.tool-card:hover .tool-card-photo { transform: scale(1.03); }
.tool-card-link { overflow: hidden; }
.tool-card-nophoto { display: flex; align-items: center; justify-content: center; font-size: 2.8rem; background: linear-gradient(160deg, var(--surface-2), var(--photo-bg)); }
.tool-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; margin: 0.8rem 0.95rem 0.2rem; overflow-wrap: anywhere; line-height: 1.3; }
.tool-card p { margin: 0 0.95rem 0.35rem; }
.tool-card p:last-child { margin-bottom: 0.95rem; }
.tool-card-meta { font-size: var(--fs-sm); color: var(--muted); }
.tool-card-area { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.tool-card .risk-badge { position: absolute; top: 0.6rem; left: 0.6rem; margin: 0; box-shadow: var(--shadow-1); }
.risk-badge, .status-badge { display: inline-block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); width: fit-content; border: 1px solid var(--line); line-height: 1.5; }
.risk-medium { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.risk-high { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.status-listed { background: var(--success-soft); color: var(--success); border-color: transparent; }
.status-paused { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.browse-head { margin-bottom: var(--s-4); }
.browse-head h1, .tool-title { font-size: var(--fs-h1); margin: 0.2rem 0 0.6rem; overflow-wrap: anywhere; }
.tool-filter { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; margin: 0 0 var(--s-4); box-shadow: var(--shadow-1); }
.tool-filter .field { margin: 0; }
.tool-filter-actions { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.1rem; }
.tool-filter-actions a { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-4) 0; }
.chips a.chip { margin: 0; padding: 0.4rem 0.85rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); font-size: 0.92rem; color: var(--ink); font-weight: 500; transition: background var(--ease), border-color var(--ease), transform var(--ease); }
.chips a.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); transform: translateY(-1px); }
.result-count { color: var(--muted); font-size: var(--fs-sm); margin: 0.5rem 0 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: var(--s-5) 0; color: var(--muted); }
.pager a { margin: 0; }
.empty-state { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); text-align: center; margin: var(--s-4) 0; }
.empty-state::before { content: "🧰"; display: block; font-size: 2.5rem; margin-bottom: 0.4rem; opacity: 0.8; }
.empty-state h2, .empty-state h3 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.empty-state p { max-width: 34rem; margin: 0.4rem auto; color: var(--muted); }
.empty-state .button { margin: 0.6rem 0 0; }
.tool-detail { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin: var(--s-4) 0 var(--s-5); align-items: start; }
@media (max-width: 720px) { .tool-detail { grid-template-columns: minmax(0, 1fr); } }
.tool-gallery { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
/* Main photo: a fixed 4:3 box; the picture is fitted inside at its own
   shape and never stretched past its real pixels, so a portrait shot or a
   small upload shows at proper scale instead of filling the column. */
.tool-gallery-main { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--r-lg); background: var(--photo-bg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.tool-gallery-main img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.tool-gallery-thumb { display: block; border-radius: var(--r-md); overflow: hidden; transition: transform var(--ease), box-shadow var(--ease); }
.tool-gallery-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tool-gallery-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--photo-bg); border: 1px solid var(--line); }
.tool-gallery .tool-card-nophoto { grid-column: 1 / -1; border-radius: var(--r-lg); aspect-ratio: 4 / 3; font-size: 4rem; }
.tool-facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 3vw, 1.4rem); box-shadow: var(--shadow-1); }
.fact-list { margin: 0 0 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.fact-list dt { color: var(--muted); font-size: 0.9rem; }
.fact-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.safety-callout { background: var(--danger-soft); border-left: 4px solid var(--danger); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0.8rem 1rem; margin: 0 0 1rem; }
.safety-callout p { margin: 0; }
.safety-callout a, .tool-owner a, .owner-bar a, .recent-tools > p a, .list-it a { color: var(--accent-ink); }
.tool-text { max-width: var(--measure); overflow-wrap: anywhere; }
.tool-text h2, .tool-owner h2, .profile-tools h2, .recent-tools h2, .list-it h2 { font-size: var(--fs-h2); margin: var(--s-6) 0 0.5rem; }
.recent-tools h2 { margin-top: 0; }
.owner-bar p { margin: 0; }
.tool-owner { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ---------- Tools: owner pages ---------- */
.my-tools { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: 0.85rem; }
.my-tool { display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.9rem; align-items: flex-start; box-shadow: var(--shadow-1); transition: box-shadow var(--ease), border-color var(--ease); }
.my-tool:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.my-tool-photo { width: 96px; height: 96px; border-radius: var(--r-md); object-fit: cover; flex: none; background: var(--photo-bg); }
.my-tool-body { min-width: 0; flex: 1; }
.my-tool-body h2 { font-family: var(--font-sans); font-size: 1.1rem; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.my-tool-body h2 a { color: var(--ink); text-decoration: none; }
.my-tool-body h2 a:hover { color: var(--accent-ink); }
.my-tool-body p { margin: 0 0 0.5rem; }
.my-tool-actions, .photo-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.my-tool-actions form { margin: 0; }
.my-tool-actions .button-quiet, .photo-buttons .button-quiet { margin: 0; padding: 0.45rem 0.85rem; }
.my-tool-actions button:not(.button-quiet), .photo-buttons button { padding: 0.45rem 0.85rem; }
.danger-link { color: var(--danger); }
@media (max-width: 480px) { .my-tool-photo { width: 64px; height: 64px; } }
.photo-upload { max-width: 36rem; }
.photo-manager { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: 0.85rem; }
.photo-item { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.9rem; box-shadow: var(--shadow-1); }
.photo-item.photo-primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); }
.photo-item img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: var(--r-md); background: var(--photo-bg); }
.photo-item-body { flex: 1; min-width: 220px; display: grid; gap: 0.6rem; align-content: start; }
.photo-item-body p { margin: 0; }
.photo-alt { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.5rem; align-items: center; margin: 0; }
.photo-alt label { grid-column: 1 / -1; font-weight: 600; font-size: 0.9rem; }
.photo-alt input { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-width: 0; background: var(--surface); color: var(--ink); }
.photo-alt input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.photo-alt .button-quiet { margin: 0; }
.photo-buttons { margin: 0; }
.list-it { margin-top: var(--s-5); padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--success); border-radius: 0 var(--r-md) var(--r-md) 0; }
.list-it h2 { margin-top: 0; }

/* ---------- Loot: prices, trophy shelf, achievements, share pages ---------- */
.price-tag { margin: 0.25rem 0 0; font-weight: 600; color: var(--accent-ink); overflow-wrap: anywhere; }
.price-tag-big { font-size: 1.35rem; font-family: var(--font-serif); }
.price-box { margin: 1rem 0 0.5rem; padding: 0.9rem 1rem; background: var(--accent-soft); border: 1px solid transparent; border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; }
.price-box .help { margin-top: 0.3rem; }
.price-box a, .shelf a, .shelf-badges a, .badge a { color: var(--accent-ink); }
.shelf { margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-bottom: 6px solid #8a6238; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.shelf-head h2 { margin: 0; }
.shelf-list { list-style: none; margin: 0.8rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shelf-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); }
.shelf-emoji { font-size: 1.4rem; line-height: 1; }
.shelf-empty { color: var(--muted); }
.shelf-title { font-size: var(--fs-h1); margin: 0.2rem 0 0.8rem; overflow-wrap: anywhere; }
.shelf-list-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-bottom: 8px solid #8a6238; border-radius: var(--r-md); }
.shelf-list-big .shelf-item { border-radius: var(--r-md); align-items: flex-start; font-size: 1.05rem; }
.shelf-list-big .shelf-emoji { font-size: 2rem; }
.shelf-list-big small { color: var(--muted); font-size: 0.82rem; }
.badge-row { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badge-chip { display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--gold-soft); border: 1px solid var(--warn-line); text-decoration: none; font-size: 0.92rem; color: var(--ink); }
.badge-grid { list-style: none; margin: 0.8rem 0 1.5rem; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.badge { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem 1rem; box-shadow: var(--shadow-1); transition: transform var(--ease), box-shadow var(--ease); }
.badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.badge h3 { margin: 0.3rem 0 0.2rem; font-size: 1.1rem; }
.badge p { margin: 0.2rem 0; font-size: 0.93rem; }
.badge-emoji { font-size: 2rem; line-height: 1; }
.badge-unlocked { border-color: var(--warn-line); background: var(--gold-soft); }
.badge-locked .badge-emoji { filter: grayscale(1); opacity: 0.55; }
.badge-locked h3 { color: var(--muted); }
.badge-state { font-size: 0.85rem; color: var(--muted); }
.badge-hero { max-width: 34rem; padding: 1.5rem; text-align: center; margin: 0.5rem 0 1.25rem; }
.badge-hero .badge-emoji { font-size: 4rem; }
.badge-hero h1 { margin: 0.4rem 0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.progress { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line); }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.share-links { margin: 1.25rem 0; }
.share-links .help { margin-top: 0.2rem; }

/* ---------- Rentals: request box, list, status timeline, actions ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-badge { display: inline-block; min-width: 1.35rem; padding: 0 0.4rem; border-radius: var(--r-pill); background: var(--danger-strong); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.35rem; vertical-align: middle; }
.request-box { margin: 1rem 0 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.tool-facts .request-box { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.request-box h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.request-box a:not(.button):not(.button-quiet), .rental-main a:not(.button):not(.button-quiet), .rental-side a, .loot-gift a, .tabs + .empty-state a:not(.button) { color: var(--accent-ink); }
.request-form { margin: 0.5rem 0 0; }
.request-form input[type=date] { max-width: 14rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--line); margin: var(--s-4) 0; }
.tabs a { margin: 0 0 -2px; padding: 0.55rem 0.95rem; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 500; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--ease), background var(--ease); }
.tabs a:hover { color: var(--ink); background: var(--surface-2); }
.tabs a.tab-on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.rental-requested { background: var(--info-soft); color: var(--info); border-color: transparent; }
.rental-accepted, .rental-active { background: var(--success-soft); color: var(--success); border-color: transparent; }
.rental-overdue, .rental-flagged { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.rental-returned { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.timeline { list-style: none; margin: 1.25rem 0 0.75rem; padding: 0; display: flex; }
.timeline-step { flex: 1; position: relative; text-align: center; padding-top: 1.6rem; font-size: 0.9rem; color: var(--faint); min-width: 0; }
.timeline-step::before { content: ""; position: absolute; top: 0.5rem; left: -50%; width: 100%; height: 3px; background: var(--line-strong); }
.timeline-step:first-child::before { display: none; }
.timeline-dot { position: absolute; top: 0; left: 50%; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-strong); z-index: 1; }
.timeline-label { display: block; font-weight: 600; overflow-wrap: anywhere; }
.timeline-time { display: block; font-size: 0.78rem; }
.step-done, .step-current, .step-late, .step-stopped { color: var(--ink); }
.step-done::before, .step-current::before, .step-late::before, .step-stopped::before { background: var(--success); }
.step-done .timeline-dot { background: var(--success); border-color: var(--success); }
.step-current .timeline-dot { border-color: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent); animation: rr-pulse 1.8s ease-in-out infinite; }
.step-late .timeline-dot, .step-stopped .timeline-dot { background: var(--danger-strong); border-color: var(--danger-strong); }
.step-late .timeline-label, .step-stopped .timeline-label { color: var(--danger); }
@keyframes rr-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 8%, transparent); } }
@media (max-width: 560px) {
  .timeline { flex-direction: column; gap: 0.2rem; }
  .timeline-step { text-align: left; padding: 0 0 0.9rem 1.9rem; }
  .timeline-step::before { top: -100%; left: 0.45rem; width: 3px; height: 100%; }
  .timeline-dot { left: 0; margin-left: 0; top: 0.1rem; }
  .timeline-label, .timeline-time { display: inline; }
}
.rental-hint { background: var(--success-soft); border-left: 4px solid var(--success); padding: 0.7rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0 0 1rem; }
.rental-hint-warn { background: var(--danger-soft); border-left-color: var(--danger); }
.rental-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 720px) { .rental-grid { grid-template-columns: minmax(0, 1fr); } }
.rental-main h2, .rental-side h2 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
.rental-main h2:first-child, .rental-side h2:first-child, .rental-actions h2 { margin-top: 0; }
.rental-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; box-shadow: var(--shadow-1); }
.rental-side h3, .rental-actions h3 { font-size: 1rem; margin: 1.1rem 0 0.3rem; }
.rental-actions { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1.1rem; margin: 0 0 1.25rem; box-shadow: var(--shadow-1); }
.rental-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.rental-act .button-quiet { margin: 0; }
.rental-act .help { flex-basis: 100%; }
.rental-actions .photo-upload { margin: 0.6rem 0; }
.rental-note { background: var(--surface-2); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; overflow-wrap: anywhere; }
.rental-note p { margin: 0.2rem 0; }
.pickup-spot { border-left: 4px solid var(--success); }
.rental-safety-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.5rem 0; }
.condition-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.condition-photos img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-sm); background: var(--photo-bg); }
.rental-history { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.rental-history li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.rental-history time { color: var(--muted); font-size: 0.85rem; margin-right: 0.4rem; }
.block-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.block-list form { margin: 0; }

/* The price being "sent" to the owner's shelf when a rental closes */
.loot-gift { position: relative; overflow: hidden; background: var(--gold-soft); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: 0.9rem 1rem 0.9rem 4.2rem; margin: 0 0 1.25rem; min-height: 3.6rem; }
.loot-gift p { margin: 0; }
.loot-shelf { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; }
.loot-fly { position: absolute; left: 1rem; top: 50%; font-size: 1.8rem; line-height: 1; animation: rr-loot-fly 1.6s cubic-bezier(.3,.7,.3,1) 0.2s both; }
@keyframes rr-loot-fly {
  0% { transform: translate(60vw, -160%) rotate(40deg) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  80% { transform: translate(0, -50%) rotate(0) scale(1.25); opacity: 1; }
  100% { transform: translate(0, -50%) scale(0.2); opacity: 0; }
}

/* ---------- Inbox ---------- */
.inbox { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: 0.6rem; }
.inbox-item a { display: grid; gap: 0.15rem; margin: 0; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color var(--ease), box-shadow var(--ease); }
.inbox-item a:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.inbox-unread a { border-left: 4px solid var(--accent); background: var(--surface); }
.inbox-unread .inbox-title { font-weight: 600; }
.inbox-body { font-size: 0.93rem; color: var(--muted); }
.inbox-time { font-size: 0.8rem; color: var(--faint); }
.inbox-item a.inbox-extra { display: inline-block; margin-top: 0.3rem; padding: 0.3rem 0.7rem; font-size: 0.88rem; border-style: dashed; box-shadow: none; }
.calendar-link { margin: 0.8rem 0 0.2rem; }

/* ---------- Ratings ---------- */
.rating-badge { white-space: nowrap; }
.rating-star, .rating-stars { color: var(--gold); }
.rating-stars { font-size: 1.15rem; letter-spacing: 0.08em; }
.rating-new { display: inline-block; padding: 0.05rem 0.6rem; border-radius: var(--r-pill); background: var(--info-soft); color: var(--info); font-size: 0.85rem; font-weight: 600; }
.rating-summary { font-size: 1.2rem; margin: 0.5rem 0; }
.rating-tags { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rating-tag { padding: 0.15rem 0.65rem; border-radius: var(--r-pill); background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); font-size: 0.88rem; }
.rating-tag-minus { background: var(--surface-2); border-color: var(--line-strong); }
.rating-tag-count { color: var(--muted); font-size: 0.82rem; }
.rating-list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.6rem; }
.rating-item, .rating-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.8rem 1rem; overflow-wrap: anywhere; box-shadow: var(--shadow-1); }
.rating-card { margin: 0.6rem 0; }
.rating-card h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.rating-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; }
.rating-by { font-size: 0.88rem; color: var(--muted); }
.rating-comment p { margin: 0.3rem 0 0; }
.rating-panel { background: var(--gold-soft); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: 1rem; margin: 0 0 1.25rem; }
.rating-panel h2 { margin-top: 0; }
.rating-pending h2 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.profile-ratings { margin: 1rem 0; }
.profile-ratings a, .rating-item a, .rating-pending a, .tool-owner .legal-meta a { color: var(--accent-ink); }
.rating-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.rating-form legend { font-weight: 600; padding: 0; margin-bottom: 0.3rem; }
/* Radios in the order 5..1, laid out right to left, so "this star and every
   one after it in the markup" is "this star and every one to its left". */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.star-input input, .tag-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2.4rem; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 0 0.1rem; border-radius: 6px; transition: color var(--ease), transform var(--ease); }
.star-input label:hover { transform: scale(1.1); }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--gold); }
.star-input input:focus-visible + label, .tag-input input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.tag-input { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag-input label { display: inline-block; padding: 0.45rem 0.9rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; font-size: 0.95rem; user-select: none; transition: background var(--ease), border-color var(--ease); }
.tag-input label:hover { border-color: var(--accent); }
.tag-input input:checked + label { background: var(--success-soft); border-color: var(--success); font-weight: 600; }
.tag-input input:checked + label.tag-minus { background: var(--danger-soft); border-color: var(--danger); }

/* ---------- X / Facebook sign-in (M9) ---------- */
.social-login { margin: 1rem 0 1.25rem; }
.social-login form, .social-links form { margin: 0; }
.social-button, button.social-button { display: flex; width: 100%; padding: 0.7rem 1rem; margin: 0 0 0.6rem; border: 1px solid #10151c; border-radius: var(--r-md); background: #10151c; color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: center; justify-content: center; box-shadow: var(--shadow-1); }
.social-button.social-facebook { background: #1a56b8; border-color: #1a56b8; }
.social-button:hover, .social-button:focus-visible { filter: brightness(1.15); color: #fff; }
.social-or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: var(--fs-sm); margin: 1rem 0 0; }
.social-or::before, .social-or::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.account-section { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.account-section h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.social-links { padding: 0; list-style: none; }
.social-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.5rem 0; }
.social-links .social-button, .social-links .button-quiet { width: auto; margin: 0; padding: 0.45rem 0.9rem; display: inline-flex; }
.danger-zone h2 { color: var(--danger); }

/* ---------- iPhone app (M10): shown only once SiteSettings.app_store_url is set. ---------- */
.app-badge { display: inline-block; line-height: 0; border-radius: 10px; margin-left: 0; }
.app-badge svg { max-width: 100%; height: auto; }
.app-badge:hover, .app-badge:focus-visible { filter: brightness(1.25); }
.footer-app { margin: 0.75rem 0 0.25rem; }
.app-points { padding-left: 1.2rem; }
.app-points li { margin: 0.35rem 0; }
.social-button.social-apple { background: #000; border-color: #000; }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .site-header { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .brand { font-size: 1.3rem; }
  .brand.has-set picture, .brand-wordmark { display: none; }
  .brand-mark { display: inline-block; }
  .brand.has-set .brand-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; }
  .site-nav { width: 100%; margin-left: 0; gap: 0.1rem; justify-content: flex-start; }
  .site-nav a { padding: 0.4rem 0.55rem; font-size: 0.95rem; }
  .hero::after { font-size: 7rem; }
  .form-actions { gap: 0.6rem 1rem; }
  .tool-filter { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .site-nav a { padding: 0.35rem 0.45rem; font-size: 0.9rem; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .loot-fly, .step-current .timeline-dot { animation: none; }
  .loot-fly { display: none; }
  .tool-card:hover, .chips a.chip:hover, .button:hover, button:hover, .badge:hover, .tool-gallery-thumb:hover { transform: none; }
  .tool-card:hover .tool-card-photo { transform: none; }
}

/* Action rows under a heading or hero */
.hero-actions, .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0 0 var(--s-4); }
.hero-actions .button, .hero-actions .button-quiet, .page-actions .button { margin: 0; }