/*
 * fridge.run - the public site's look. Same kitchen-fridge style as
 * go.fridge.run: enamel-white panels with a steel edge on the dark
 * fridge-and-cables wallpaper, mint for the main action, one colour per place.
 *
 * The older colour names (--panel, --line, --muted, --ink, --bg, --accent) are
 * kept and repointed, so pages with their own inline styles follow along.
 * No backdrop blur: it made scrolling repaint everything and lagged browsers.
 */
:root {
  color-scheme: light;
  --paper: #eceef1;
  --paper-2: #f7f8fa;
  --paper-3: #dfe2e7;
  --ink: #131419;
  --ink-2: #30333b;
  --dim: #585c67;
  --edge: #c9cdd5;
  --steel: linear-gradient(180deg, #f6f7f9 0%, #dde0e5 100%);
  --enamel: linear-gradient(180deg, #f3f4f6 0%, #e8eaee 100%);
  --mint-strong: #157a67;
  --mint: #2bb59c;
  --mint-dark: #1e8f7a;
  --orange: #f26b3a;
  --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -1px 0 rgba(0, 0, 0, .06) inset, 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --focus: 0 0 0 3px rgba(43, 181, 156, .45);
  /* places */
  --c-go: #f0a52a; --c-chat: #7c5cff; --c-account: #2f7de1; --c-status: #1f9d55; --c-report: #f26b3a; --c-invite: #2bb59c; --c-monkey: #22a846;
  /* older names, repointed */
  --bg: #15161a;
  --panel: var(--paper);
  --panel-strong: var(--paper);
  --line: var(--edge);
  --muted: var(--dim);
  --accent: var(--mint);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

* { box-sizing: border-box; }
html { background: #0e0f12; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
  background-color: #0e0f12;
  background-image:
    linear-gradient(180deg, rgba(14, 15, 18, .62) 0, rgba(14, 15, 18, .74) 600px, #0e0f12 1024px),
    url("/media/fridge-bg.jpg");
  background-image:
    linear-gradient(180deg, rgba(14, 15, 18, .62) 0, rgba(14, 15, 18, .74) 600px, #0e0f12 1024px),
    image-set(url("/media/fridge-bg.webp") type("image/webp"), url("/media/fridge-bg.jpg") type("image/jpeg"));
  background-repeat: no-repeat, repeat-x;
  background-size: 100% 1024px, 800px 1024px;
}
a { color: var(--mint-dark); }

/* ---- panels --------------------------------------------------------------------- */
.panel, .card {
  position: relative; background: var(--enamel); border: 1px solid var(--edge); border-radius: 18px;
  padding: 24px; box-shadow: var(--shadow);
}
.panel::before, .card::before {
  content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--place, #c9ced6);
}
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-dark); }
h1 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.muted { color: var(--dim); }

/* ---- buttons -------------------------------------------------------------------- */
.btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 700 15px/1 inherit; font-family: inherit;
  color: var(--ink); text-decoration: none; cursor: pointer; background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%); border: 1px solid #aeb3bd;
  border-radius: 11px; padding: 11px 17px; box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(0, 0, 0, .14); transition: transform .1s ease, border-color .1s ease;
}
.btn:hover, .button:hover { border-color: color-mix(in srgb, var(--place, #2bb59c) 70%, white); transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--place, #2bb59c) 22%, transparent), 0 4px 12px color-mix(in srgb, var(--place, #2bb59c) 25%, transparent); }
.btn:focus-visible, .button:focus-visible { outline: none; box-shadow: var(--focus); }
.btn.primary, .button.primary { background: linear-gradient(180deg, #1c8c77 0%, var(--mint-strong) 100%); border-color: #0f5f50; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 12px rgba(21, 122, 103, .45); }
.btn.primary:hover { background: linear-gradient(120deg, #157a67, #1f64c4); border-color: transparent; }
.btn.primary::after { content: "→"; font-size: 16px; }
.btn-ghost { background: var(--paper); }

/* ---- places: an icon bubble in the place's colour ------------------------------------ */
.ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-size: 18px;
  background: color-mix(in srgb, var(--place, #9aa0aa) 22%, white); border: 1px solid color-mix(in srgb, var(--place, #9aa0aa) 45%, white); }
.c-go { --place: var(--c-go); } .c-chat { --place: var(--c-chat); } .c-account { --place: var(--c-account); }
.c-status { --place: var(--c-status); } .c-report { --place: var(--c-report); } .c-invite { --place: var(--c-invite); } .c-monkey { --place: var(--c-monkey); }

/* ---- the artwork buttons ------------------------------------------------------------ */
.back-btn, .report-btn { display: inline-block; border-radius: 16px; transition: transform .12s ease; line-height: 0; }
.back-btn img { width: 200px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.report-btn img { width: 220px; height: auto; }
.back-btn:hover { transform: translateY(-2px) rotate(1deg); }
.report-btn:hover { transform: translateY(-2px) rotate(-1deg); }

/* ---- a page title sitting on the wallpaper -------------------------------------------- */
.on-wall { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .65); }
.on-wall-soft { color: #dfe2e8; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; animation: none !important; } }

/* ---- the top bar: the way home, at the top of every page ------------------------------ */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding: 8px 10px 8px 14px;
  border-radius: 16px; background: var(--steel); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.bar .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; }
.bar .brand img { width: 32px; height: 32px; border-radius: 9px; }
.bar .back-btn img { width: auto; height: 40px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }

/* links with flair: a gradient that slides to a third colour on hover, never dark */
.panel a:not([class]), .card a:not([class]), .note a:not([class]) {
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: rgba(47, 125, 225, .45);
  background-image: linear-gradient(90deg, #1e8f7a, #2f7de1 50%, #b0459b); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #1e8f7a;
  transition: background-position .35s ease, text-decoration-color .35s ease;
}
.panel a:not([class]):hover, .card a:not([class]):hover, .note a:not([class]):hover { background-position: 100% 0; text-decoration-color: #b0459b; }