/* Colours and frame follow SOAK Studio (soak-studio/app/globals.css). */
:root {
  --background: #f7f4ef;
  --foreground: #1c1e21;
  --muted: #928d82;
  --line: #edeae2;
  --mint: #86ecd7;
  --mint-soft: #d3f8ee;
  --mint-dark: #12805f;
  --amber-soft: #fdf0cd;
  --amber-dark: #a16a09;
  --blue: #50ccff;
  --blue-soft: #dcf4ff;
  --blue-dark: #0b6f99;
  /* status pills, from the muted palette: sage (live), seaweed (testing), nude (in development) */
  --live-bg: #dfe7e1; --live-fg: #43564b; --live-dot: #87a290;
  --test-bg: #dbe8ea; --test-fg: #376c77; --test-dot: #6fa3ad;
  --dev-bg: #ece5d6; --dev-fg: #7d6c4c; --dev-dot: #b4a384;
  --sun: #e2ff00; /* the one bright highlight */
  --sidebar: #121720;
  --sidebar-fg: #ffffff;
  --logo-filter: invert(1);
  --surface: #ffffff;
  --surface-hover: #fbf9f5;
}
/* LIGHT: all-light white/grey palette */
:root[data-theme="light"] {
  --background: #f2f3f5;
  --line: #e2e4e8;
  --muted: #878d96;
  --sidebar: #ffffff;
  --sidebar-fg: #1c1e21;
  --logo-filter: none;
  --surface-hover: #f5f6f8;
}
/* DARK: everything flips dark */
:root[data-theme="dark"] {
  --background: #17191d;
  --foreground: #e7e9ec;
  --muted: #8d939c;
  --line: #2c2f35;
  --mint-soft: #14352c;
  --mint-dark: #3ec79a;
  --amber-soft: #3a300f;
  --amber-dark: #e2b54a;
  --blue-soft: #10303f;
  --blue-dark: #6fd5ff;
  --live-bg: #253029; --live-fg: #a9c2b1;
  --test-bg: #1e3135; --test-fg: #93c3cc;
  --dev-bg: #332d23; --dev-fg: #d2c09c;
  --sidebar: #070809;
  --surface: #1f2228;
  --surface-hover: #262a31;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sidebar);
  color: var(--foreground);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Sidebar ----
   Icons only, and it opens on hover (or keyboard focus) to show labels, pushing the content
   panel across in step, as in Studio. The icons stay put while it opens. */
.sidebar, .app-frame { --side-ease: 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: 5.25rem;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 1rem 0.5rem 0.75rem; color: var(--sidebar-fg); background: var(--sidebar);
  transition: width var(--side-ease);
}
.sidebar:has(:focus-visible) { width: 14.5rem; transition-delay: 0.12s; }
.sidebar:has(:focus-visible) ~ .app-frame { left: 14.5rem; transition-delay: 0.12s; }
/* Hover only on devices that can hover. Keyboard focus uses :focus-visible, not :focus-within,
   so a clicked link (Theme, Website) doesn't leave the sidebar stuck open. */
@media (hover: hover) {
  .sidebar:hover { width: 14.5rem; transition-delay: 0.12s; }
  .sidebar:hover ~ .app-frame { left: 14.5rem; transition-delay: 0.12s; }
}
/* Inward-curving corners on the sidebar's right edge, matching the content panel's rounded
   corners (1rem radius, inset 0.25rem). Collapsed they sit exactly on the panel's own corners,
   so the open sidebar keeps the same shape as the closed one. */
.sidebar::before, .sidebar::after {
  content: ""; position: absolute; left: 100%; width: 1rem; height: 1rem; pointer-events: none;
}
.sidebar::before { top: 0.25rem; background: radial-gradient(circle at 100% 100%, transparent calc(1rem - 0.5px), var(--sidebar) 1rem); }
.sidebar::after { bottom: 0.25rem; background: radial-gradient(circle at 100% 0, transparent calc(1rem - 0.5px), var(--sidebar) 1rem); }
.sidebar-logo { display: block; width: 3.5rem; margin: 0 0 1.5rem 0.375rem; flex: none; }
.sidebar-logo img { width: 100%; display: block; filter: var(--logo-filter); }
.tile {
  width: 100%; padding: 0.75rem 0 0.75rem 1.25rem; margin-bottom: 0.3rem;
  display: flex; flex-direction: row; align-items: center; gap: 0.9rem;
  font-size: 14px; font-weight: 500; border-radius: 0.75rem; white-space: nowrap; text-align: left; overflow: hidden;
  transition: background 0.12s, color 0.12s;
}
.tile svg { width: 1.75rem; height: 1.75rem; flex: none; }
.tile span { opacity: 0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.18s ease; }
.sidebar:has(:focus-visible) .tile span { opacity: 1; transform: none; transition-delay: 0.14s; }
@media (hover: hover) { .sidebar:hover .tile span { opacity: 1; transform: none; transition-delay: 0.14s; } }
.tile:hover { background: var(--blue); color: #121720; }
.tile.website:hover { background: linear-gradient(110deg, #ffc56e 0%, #f3b4be 45%, #7cbfcb 100%); } /* the soak.co gradient */
.tile.active { background: var(--sun); color: #121720; } /* you are here: the yellow highlight */
.sidebar-foot { margin-top: auto; }

/* ---- Floating content panel ---- */
.app-frame {
  position: fixed; top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 5.25rem;
  overflow-y: auto; border-radius: 1rem; background: var(--background);
  box-shadow: -3px 0 16px rgba(18, 23, 32, 0.12); /* faint edge against the sidebar, as in Studio (Rob tuned 0.12) */
  transition: left var(--side-ease);
}
.page { padding: 1.25rem 1.5rem 2.5rem; max-width: 96rem; margin: 0 auto; }
.page-head {
  position: sticky; top: 0; z-index: 30; background: var(--background);
  margin: -1.25rem -1.5rem 0; padding: 1.25rem 1.5rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Pill tabs: black when selected */
.tabs { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; padding: 0.8rem 1.5rem; border-radius: 999px; font-size: 13px; font-weight: 400;
  background: transparent; border: 1px solid #cfccc6; color: var(--foreground);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tabs button:hover { border-color: var(--foreground); }
:root[data-theme="dark"] .tabs button:not([aria-selected="true"]), :root[data-theme="dark"] .view-toggle { border-color: #3a3e45; }
.tabs button[aria-selected="true"] { background: var(--foreground); border-color: var(--foreground); color: var(--background); }

/* Grid / List switch, like the SOAK site */
.view-toggle { display: flex; padding: 4px; border-radius: 999px; border: 1px solid #cfccc6; }
.view-toggle button { padding: 0.65rem 1.3rem; border-radius: 999px; font-size: 13px; color: var(--foreground); }
.view-toggle button[aria-pressed="true"] { background: var(--foreground); color: var(--background); }

/* ---- Bento grid ---- */
.bento {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 21rem; grid-auto-flow: dense;
}
.bento .hello, .bento .wide { grid-column: span 2; }
.bento .lg { grid-column: span 2; grid-row: span 2; }

/* Greeting panel */
.hello {
  grid-column: span 2; border-radius: 1.75rem; background: var(--surface);
  padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; justify-content: space-between;
}
/* SOAK Home mark (brand/home-*.svg): fills with the text colour, so black on light and light grey on dark */
svg.mark { fill: currentColor; stroke: none; }
.hello-logo { width: 2.5rem; height: 2.5rem; display: block; margin-bottom: 1.1rem; }
.hello-date { margin: 0; font-size: 14px; color: var(--muted); }
.hello h1 { margin: 0.1rem 0 0; font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.hello-sub { margin: 0.4rem 0 0; font-size: 15px; color: var(--muted); }
.stats { display: flex; }
.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
  text-align: left; padding: 0 1.75rem; border-left: 1px solid var(--line);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { font-size: 2.75rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.stat small { font-size: 13px; color: var(--muted); margin-left: 0.3rem; }
.stat:hover b { text-decoration: underline 3px var(--sun); text-underline-offset: 6px; }

/* Tool tiles: gradient, line art, big light name */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 1.75rem; padding: 1.6rem 1.75rem 1.75rem; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #3b4250; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* film grain, like the reference */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(18, 23, 32, 0.35); }
/* the drawing fades out towards the bottom left, where the name and blurb sit */
.art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transition: transform 0.6s ease; }
.art.lines {
  -webkit-mask-image: linear-gradient(to top right, transparent 25%, #000 80%);
  mask-image: linear-gradient(to top right, transparent 25%, #000 80%);
}
.art g { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art g * { vector-effect: non-scaling-stroke; }
.art .fill { fill: rgba(255, 255, 255, 0.35); stroke: none; }
.art .dot { fill: var(--sun); stroke: none; }
a.card:hover .art { transform: scale(1.04); }
.card.offline .art g { stroke-dasharray: 3 5; }
/* pale tiles: dark text, dark hairlines */
.card.ink-dark { color: #192021; }
.card.ink-dark .art g { stroke: rgba(25, 32, 33, 0.12); }
.card.ink-dark .art .fill { fill: rgba(25, 32, 33, 0.3); }
.card.ink-dark .pill { background: rgba(25, 32, 33, 0.08); color: #192021; }
.card.ink-dark .go { background: #192021; color: #fff; }
.card.ink-dark .icon.initials { color: #192021; box-shadow: inset 0 0 0 1.5px rgba(25, 32, 33, 0.35); }
.card.ink-dark .card-body { text-shadow: none; }

.card-top { display: flex; align-items: center; gap: 0.6rem; }
.card .icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; flex: none; overflow: hidden;
  display: grid; place-items: center; background: #fff;
}
.card .icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icon.initials { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.group { font-size: 13px; font-weight: 500; opacity: 0.85; }
.go {
  margin-left: auto; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: #fff; color: #121720; transition: transform 0.2s ease;
}
.go svg { width: 0.95rem; height: 0.95rem; stroke-width: 2.2; }
a.card:hover .go { transform: rotate(45deg); background: var(--sun); }

.card-body { }
.card h2 { margin: 0.75rem 0 0; font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.card.lg h2 { font-size: clamp(3rem, 5.5vw, 5.5rem); }
.card p { margin: 0.6rem 0 0; font-size: 15px; line-height: 1.45; opacity: 0.8; max-width: 24rem; }
.card.lg p { font-size: 16px; max-width: 28rem; }
.domain { display: block; margin-top: 0.6rem; font-size: 12px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; text-shadow: none;
}
.pill.live { background: var(--live-bg); color: var(--live-fg); }
.pill.testing { background: var(--test-bg); color: var(--test-fg); }
.pill.dev { background: var(--dev-bg); color: var(--dev-fg); }
/* on tiles, pills turn to frosted glass with a coloured dot */
.card .pill { background: rgba(255, 255, 255, 0.14); color: #fff; }
.card .pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--live-dot); }
.card .pill.testing::before { background: var(--test-dot); }
.card .pill.dev::before { background: var(--dev-dot); }

/* Cyan pill button, like Studio */
.open {
  flex: none; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--blue);
  color: #121720; font-size: 13px; font-weight: 700;
}
.open svg { width: 0.85rem; height: 0.85rem; stroke-width: 2.2; }
.open:hover { background: #2fbef7; }

/* ---- List (Studio table: grey canvas, white row bands) ---- */
.st-table { width: 100%; font-size: 14px; border-collapse: separate; border-spacing: 0 3px; }
.st-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); padding: 0.5rem 0.75rem;
}
.st-table tbody td { padding: 0.6rem 0.75rem; vertical-align: middle; background: var(--surface); }
.st-table tbody tr td:first-child { border-radius: 0.9rem 0 0 0.9rem; }
.st-table tbody tr td:last-child { border-radius: 0 0.9rem 0.9rem 0; text-align: right; }
.st-table tbody tr.link { cursor: pointer; }
.st-table tbody tr.link:hover td { background: var(--surface-hover); }
.st-table .name { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; white-space: nowrap; }
.swatch { width: 3.25rem; height: 2.5rem; border-radius: 0.7rem; display: grid; place-items: center; flex: none; }
.swatch .icon { width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; overflow: hidden; background: #fff; display: grid; place-items: center; }
.swatch .icon img { width: 100%; height: 100%; display: block; }
.swatch .icon.initials { background: transparent !important; box-shadow: none; font-size: 12px; }
.st-table .muted { color: var(--muted); }
.st-table td:nth-child(5) { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { margin-top: 3rem; text-align: center; color: var(--muted); }

/* ---- Narrower screens ---- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .bento .hello { grid-column: 1 / -1; }
  .bento .lg { grid-row: span 1; }
}
@media (max-width: 720px) {
  /* phones: a bottom bar with labels under the icons, no hover expansion */
  .sidebar, .sidebar:hover, .sidebar:has(:focus-visible) { inset: auto 0 0 0; width: auto; height: 4rem; flex-direction: row; align-items: center; justify-content: center; gap: 0.25rem; padding: 0 1rem; border-radius: 0; box-shadow: none; }
  .sidebar::before, .sidebar::after { display: none; }
  .sidebar-logo { width: 2.25rem; margin: 0 auto 0 0; }
  .sidebar-foot { margin: 0 0 0 auto; }
  .tile { width: 3.75rem; margin: 0; padding: 0.4rem 0.25rem; flex-direction: column; gap: 0.3rem; font-size: 10.5px; font-weight: 600; text-align: center; }
  .tile span { opacity: 1; transform: none; }
  .app-frame, .sidebar:hover ~ .app-frame, .sidebar:has(:focus-visible) ~ .app-frame { left: 0.25rem; bottom: 4rem; }
  .page { padding: 1rem 1rem 2rem; }
  .page-head { margin: -1rem -1rem 0; padding: 1rem 1rem 0.75rem; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(17rem, auto); gap: 1rem; }
  .bento .hello, .bento .wide, .bento .lg { grid-column: auto; grid-row: auto; }
  .bento .lg { min-height: 20rem; }
  .hello { gap: 1.5rem; }
  .stat { padding: 0 1rem; }
  .stat b { font-size: 2.25rem; }
  .st-table thead { display: none; }
  .st-table td:nth-child(2), .st-table td:nth-child(3), .st-table td:nth-child(5), .st-table td:nth-child(6) { display: none; }
  .st-table td:nth-child(4) { border-radius: 0 0.9rem 0.9rem 0; text-align: right; }
  .st-table .name { white-space: normal; }
}
.card.ink-dark .pill.live::before { background: #5f7d69; }
.card.ink-dark .pill.testing::before { background: #41818e; }
.card.ink-dark .pill.dev::before { background: #8f7d5c; }
.tile svg.mark { width: 1.55rem; height: 1.55rem; margin: 0.1rem; }
.tile svg.mark.studio { width: 1.75rem; height: 1.75rem; margin: 0; }
.tile b, .tile small { font: inherit; }
@media (max-width: 720px) { .theme-pre { display: none; } }