/* One skin per face, so the two read as different websites (the third, the Be Insiculous studio
   site they live inside, has its own layout and never loads this file):
     fort-knight — the treehouse and the knight's watch; Trebuchet MS, planks, ember amber.
     fork-knife  — the butcher's block; a dark flat-lay, the content on the kraft paper, sans-serif.
   Canonical here; the site mirrors it to public/app/shared/. Loaded after the app chrome CSS
   (faces.css), which owns the base :root palette. data-theme comes from the page's face
   (FACES[face].theme in src/lib/faces.js), set by the layout's boot script before first paint. */

/* Native controls (date inputs, calendar pickers) follow the dark panels. */
:root[data-theme="fort-knight"] { color-scheme: dark; }

/* Composite photograph (app/images/fort-knight.jpg, generated): Miryam León's treehouse on the
   left, Evija Martina's knight by the campfire on the right (both Unsplash License), feathered
   into a dark center that the content column sits on. Wood fort's plank skin and Bungee brand,
   the campfire's ember-amber accent. */
:root[data-theme="fort-knight"] {
  --background: #16120e;
  --panel: rgba(56, 48, 40, 0.93);
  --panel-soft: rgba(76, 66, 54, 0.95);
  --ink: #faf7ef;
  --muted: #ddd5c2;
  --line: #463b2e;
  --accent: #e09a40;
  --on-accent: #241c10;
  --flexible: rgba(255, 255, 255, 0.08);
  --plank: rgba(52, 44, 36, 0.94);
  --card: rgba(44, 37, 30, 0.94);
  --nav-ink: #e8e1d1;
  --grain: rgba(0, 0, 0, 0.16);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.5);
  --meals: #c98a3a; --cleaning: #6c8fa8; --working: #7f9a5c; --spirituality-development: #9a7fb0;
  --friends-family: #b86a6a; --health: #5f9a8b; --operations: #a09582;
}

[data-theme="fort-knight"] body {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  color: var(--ink);
  background-color: var(--background);
}
/* The photograph lives on a fixed pseudo-element so it can be darkened with a
   filter (a background-image on body can't take one). The negative z-index paints it
   above body's background-color but below all content. */
[data-theme="fort-knight"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(20, 16, 12, 0.3), rgba(20, 16, 12, 0.45) 60%, rgba(12, 9, 7, 0.7)),
    url("../images/fort-knight.jpg");
  background-size: cover, cover;
  background-position: center, center top;
  background-repeat: no-repeat;
  filter: brightness(0.7);
}
[data-theme="fort-knight"] h1, [data-theme="fort-knight"] h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
}
[data-theme="fort-knight"] .brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
[data-theme="fort-knight"] .site-nav, [data-theme="fort-knight"] .top-bar {
  /* a plank across the top: horizontal grain, dark seam below */
  border-bottom: 3px solid var(--line);
  background-color: var(--plank);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 30%, rgba(0, 0, 0, 0.06));
  backdrop-filter: blur(4px);
}
[data-theme="fort-knight"] .site-nav .nav-link { color: var(--nav-ink); }
[data-theme="fort-knight"] .site-nav .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.12); }
[data-theme="fort-knight"] .site-nav .nav-link.active { color: var(--on-accent); background: var(--accent); }
[data-theme="fort-knight"] .panel {
  /* planks: vertical boards with grain, a seam every board */
  border: 2px solid var(--line);
  border-radius: 6px;
  background-color: var(--panel);
  background-image:
    repeating-linear-gradient(90deg, var(--grain) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow);
}
[data-theme="fort-knight"] .day-card {
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 11px);
}
[data-theme="fort-knight"] .appointment-tag { background: var(--accent); color: var(--on-accent); }
[data-theme="fort-knight"] button, [data-theme="fort-knight"] .file-button, [data-theme="fort-knight"] .button { border-radius: 5px; border-color: var(--line); }
[data-theme="fort-knight"] .site-footer {
  /* the footer sits on the photograph: give the text a small plaque to sit on */
  color: var(--muted);
  width: fit-content; margin: 0 auto; padding: 0.35rem 1rem 0.45rem; border-radius: 999px;
  background: rgba(20, 16, 12, 0.75);
}
[data-theme="fort-knight"] .allocation-bar, [data-theme="fort-knight"] .block-bar { border: 1px solid var(--line); }

/* ==== fork knife: the butcher's block — a dark flat-lay, the content sitting on the paper ==== */
/* The photograph (app/images/fork-knife.jpg: cleaver, carving fork, garlic and herbs around a board,
   Sergey Kotenev on Unsplash) is dark and warm, with a crumpled sheet of kraft paper dead centre — the
   photographer's own blank space. The skin follows it: near-black ground, warm off-white type,
   frosted DARK glass for the panels, and the content column placed on the paper, between the whole
   garlic bulb on the left and the cleaver on the right. Serious, sans-serif, no ornament; the accent
   is the ink itself, as on a product page. */
:root[data-theme="fork-knife"] { color-scheme: dark; }

:root[data-theme="fork-knife"] {
  --background: #16130f;
  --panel: rgba(22, 19, 15, 0.62);
  --panel-soft: rgba(255, 255, 255, 0.06);
  --ink: #f3ede4;
  --muted: #b9b0a3;
  --line: rgba(243, 237, 228, 0.14);
  --accent: #f3ede4;
  --on-accent: #16130f;
  --flexible: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  /* The seven category colours keep their hues (a person switching faces still reads them), lifted so
     they hold up on the dark glass under white chip text. */
  --meals: #c08b4a; --cleaning: #6f97b3; --working: #86a25f; --spirituality-development: #a48bc2;
  --friends-family: #c47a7a; --health: #62a892; --operations: #a29a8c;
}

[data-theme="fork-knife"] body {
  font-family: Inter, "SF Pro Text", -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--background);
}
/* The photograph covers the viewport (it is a whole scene, not a hero object in a gutter), sharp,
   lifted a touch; the frosted panels do the softening where content sits and a faint vignette keeps
   the edges quiet. Missing file → the flat --background. */
[data-theme="fork-knife"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-color: var(--background);
  background-image:
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%),
    url("../images/fork-knife.jpg");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat;
  filter: brightness(1.1);
}
@media (max-width: 900px) {
  /* A portrait phone crops the landscape frame hard: centred on the paper it would show only the
     cleaver's edge and lose the carving fork off the right. The panels cover the paper here anyway,
     so anchor the crop on the silverware instead — the cleaver and fork both in view. */
  [data-theme="fork-knife"] body::before {
    background-position: center, 68% 40%;
  }
}
[data-theme="fork-knife"] h1, [data-theme="fork-knife"] h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-theme="fork-knife"] .brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-theme="fork-knife"] .site-nav, [data-theme="fork-knife"] .top-bar {
  border-bottom: 1px solid var(--line);
  background-color: rgba(22, 19, 15, 0.7);
  background-image: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="fork-knife"] .site-nav .nav-link { color: var(--muted); border-radius: 6px; }
[data-theme="fork-knife"] .site-nav .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
[data-theme="fork-knife"] .site-nav .nav-link.active { color: var(--on-accent); background: var(--ink); }
[data-theme="fork-knife"] .face-link:hover { background: rgba(255, 255, 255, 0.08); }
/* Frosted dark glass: a translucent charcoal that blurs the photograph behind it, so the board and paper read
   through the panels; a hair of light at the edge so the glass reads as a shape. */
[data-theme="fork-knife"] .panel {
  border: 1px solid rgba(243, 237, 228, 0.12);
  border-radius: 10px;
  background-color: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
[data-theme="fork-knife"] .day-card {
  border: 1px solid rgba(243, 237, 228, 0.12);
  border-radius: 8px;
  background: var(--panel-soft);
}
[data-theme="fork-knife"] .day-card:hover { background: rgba(255, 255, 255, 0.11); outline-color: var(--ink); }
[data-theme="fork-knife"] .day-card.today { outline-color: var(--ink); }
[data-theme="fork-knife"] .appointment-tag { background: var(--ink); color: var(--on-accent); }
[data-theme="fork-knife"] button, [data-theme="fork-knife"] .file-button, [data-theme="fork-knife"] .button {
  border-radius: 6px;
  border-color: var(--ink);
  font-weight: 500;
}
[data-theme="fork-knife"] button[type=button], [data-theme="fork-knife"] .file-button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="fork-knife"] .site-footer {
  color: var(--muted);
  border-top: 1px solid var(--line);
}
[data-theme="fork-knife"] .allocation-bar, [data-theme="fork-knife"] .block-bar {
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* Inputs and text areas sit on the frosted panels; a slightly firmer dark ground so what you type
   never fights the photograph behind. */
[data-theme="fork-knife"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-theme="fork-knife"] select,
[data-theme="fork-knife"] textarea,
[data-theme="fork-knife"] .file-row,
[data-theme="fork-knife"] .committed-items,
[data-theme="fork-knife"] .prompt-text,
[data-theme="fork-knife"] .paste-box textarea,
[data-theme="fork-knife"] .retry-box .retry-text { background-color: rgba(0, 0, 0, 0.35); }