/* Staffroom (Page Lemon internal tool template): Meanwood Roasting Co., a Leeds coffee roaster with a roastery, two cafés
   and a small office, and its employee portal.
   Art direction: the staffroom noticeboard. Oat paper, index cards pinned with coffee-cherry, sage and mustard pins,
   tiles that sit very slightly askew, an espresso rail on desktop. Alegreya (a warm humanist serif) for headings and
   numbers, Rubik (rounded, friendly) for text. kit.css (never edited here) gives layout, behaviour and accessibility. */
:root {
  --s-oat: #F4ECDF;
  --s-card: #FFFBF4;
  --s-card-2: #F0E5D4;
  --s-line: #E1D2BC;
  --s-line-strong: #C9B497;
  --s-ink: #2B1D16;
  --s-muted: #6B5646;
  --s-cherry: #A23B2A;
  --s-cherry-soft: #F6DFD6;
  --s-sage: #3D6A4D;
  --s-sage-soft: #DDEBDF;
  --s-mustard: #8A5A06;
  --s-mustard-pin: #D79A25;
  --s-mustard-soft: #F7E7C2;
  --s-espresso: #2B1D16;
  --s-espresso-2: #3A2A21;
  --s-cream: #F7EEDF;
  --s-cream-dim: #CDBBA7;
  --s-serif: Alegreya, "Iowan Old Style", Georgia, serif;
  --s-sans: Rubik, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --s-tilt-a: -.6deg;
  --s-tilt-b: .5deg;

  --k-brand: var(--s-cherry);
  --k-brand-ink: #FFFFFF;
  --k-brand-soft: var(--s-cherry-soft);
  --k-hero: var(--s-espresso);
  --k-hero-ink: var(--s-cream);
  --k-gold: var(--s-mustard-pin);
  --k-bg: var(--s-oat);
  --k-surface: var(--s-card);
  --k-surface-2: var(--s-card-2);
  --k-line: var(--s-line);
  --k-line-strong: var(--s-line-strong);
  --k-text: var(--s-ink);
  --k-muted: var(--s-muted);
  --k-faint: var(--s-muted);
  --k-ok: var(--s-sage);
  --k-ok-soft: var(--s-sage-soft);
  --k-warn: var(--s-mustard);
  --k-warn-soft: var(--s-mustard-soft);
  --k-font: var(--s-sans);
  --k-font-display: var(--s-serif);
  --k-r-s: 10px; --k-r-m: 14px; --k-r-l: 18px; --k-r-xl: 24px;
  --k-shadow-1: 0 1px 0 var(--s-line), 0 6px 18px rgba(74, 46, 28, .07);
  --k-shadow-2: 0 2px 0 var(--s-line), 0 14px 30px rgba(74, 46, 28, .12);
  --pl-v-accent: var(--s-cherry);
  --pl-v-radius: 14px;
  --pl-v-font: var(--s-sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --s-oat: #1B1411;
    --s-card: #261C17;
    --s-card-2: #31251F;
    --s-line: #43352C;
    --s-line-strong: #5C4A3E;
    --s-ink: #F4EADD;
    --s-muted: #C4B09E;
    --s-cherry: #E8846B;
    --s-cherry-soft: rgba(232, 132, 107, .16);
    --s-sage: #8CC39E;
    --s-sage-soft: rgba(140, 195, 158, .15);
    --s-mustard: #E9B657;
    --s-mustard-soft: rgba(233, 182, 87, .15);
    --s-espresso: #120D0B;
    --s-espresso-2: #2A1F1A;
    --k-brand-ink: #1B1411;
    --k-shadow-1: 0 1px 0 rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
    --k-shadow-2: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 30px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
body.s-app { font-family: var(--s-sans); background: var(--s-oat); color: var(--s-ink); }
.s-app :is(h1, h2, h3) { font-family: var(--s-serif); letter-spacing: -.01em; }
.s-app :focus-visible { outline: 3px solid var(--s-cherry); outline-offset: 2px; }
.s-app ::selection { background: var(--s-mustard-soft); }
.s-app .k-main a:not(.k-btn):not(.s-tile) { color: var(--s-cherry); }
.s-app .k-top-end .k-btn { white-space: nowrap; }
@media (max-width: 559px) { .s-app .k-top .k-brand em { display: none; } }
.s-app .k-btn { border-radius: 999px; font-weight: 600; letter-spacing: .005em; }
.s-app .k-btn-line { box-shadow: inset 0 0 0 1.5px var(--s-line-strong); color: var(--s-ink); background: var(--s-card); }
.s-app .k-btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--s-cherry); }
.s-app .k-help { color: var(--s-muted); }

/* ---------- shell ---------- */
.s-app .k-top { background: color-mix(in srgb, var(--s-oat) 90%, transparent); border-bottom: 1px dashed var(--s-line-strong); }
.s-app .k-brand { font: 700 1.125rem/1 var(--s-serif); color: var(--s-ink); gap: 10px; }
.s-app .k-brand em { font-style: italic; font-weight: 500; color: var(--s-cherry); }
.s-app .k-brand img { border-radius: 9px; }
.s-app .k-top-end { gap: 10px; }
.s-me { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; color: var(--s-ink); }
.s-app .k-avatar { background: var(--s-cherry-soft); color: var(--s-cherry); font-family: var(--s-serif); font-weight: 700; }
@media (max-width: 559px) { .s-me-name { display: none; } }

/* phones: a cream tab bar, the current tab on a cherry pin */
.s-app .k-tabs { background: color-mix(in srgb, var(--s-card) 94%, transparent); border-top: 1px solid var(--s-line); }
.s-app .k-tabs a { position: relative; color: var(--s-muted); font-weight: 500; font-size: .6875rem; }
.s-app .k-tabs a[aria-current="page"] { color: var(--s-cherry); font-weight: 600; }
.s-app .k-tabs a[aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--s-cherry); }

/* desktop: the espresso rail, the current tab a cream note */
@media (min-width: 1024px) {
  .s-app .k-tabs { background: var(--s-espresso); border-right: 0; color: var(--s-cream); }
  .s-app .k-tabs .k-tabs-brand { color: var(--s-cream); margin-bottom: 18px; }
  .s-app .k-tabs .k-tabs-brand em { color: var(--s-mustard-pin); }
  .s-app .k-tabs a { color: var(--s-cream-dim); font-size: .9375rem; font-weight: 500; border-radius: 12px; }
  .s-app .k-tabs a:hover { background: var(--s-espresso-2); color: var(--s-cream); }
  .s-app .k-tabs a[aria-current="page"] { background: var(--s-cream); color: #2B1D16; font-weight: 600; transform: rotate(-.8deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
  .s-app .k-tabs a[aria-current="page"]::before { top: 50%; left: -4px; width: 10px; height: 10px; margin-top: -5px; background: #C2452F; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2); }
  .s-app .k-tabs .k-tabs-foot { background: var(--s-espresso-2); color: var(--s-cream-dim); }
  .s-app .k-tabs .k-tabs-foot b { color: var(--s-cream); margin-bottom: 4px; }
  .s-app .k-top { border-bottom: 1px dashed var(--s-line-strong); }
}

/* ---------- page heads ---------- */
.s-app .k-kicker { color: var(--s-cherry); font: 600 .75rem/1.3 var(--s-sans); text-transform: uppercase; letter-spacing: .12em; }
.s-app .k-pagehead h1 { font: 800 clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem)/1.02 var(--s-serif); letter-spacing: -.02em; }
.s-app .k-pagehead h1 b { color: var(--s-cherry); }
.s-app .k-kicker b { font-weight: 700; }
.s-back { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-weight: 500; text-decoration: none; }

/* ---------- index cards ---------- */
.s-card { position: relative; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 16px; box-shadow: var(--k-shadow-1); margin-bottom: 20px; }
.s-card::before { content: ""; position: absolute; top: -7px; left: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--s-cherry); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .22), 0 2px 3px rgba(43, 29, 22, .25); }
.s-pin-sage::before { background: var(--s-sage); }
.s-pin-mustard::before { background: var(--s-mustard-pin); }
.s-pin-cherry::before { background: var(--s-cherry); }
.s-card .k-panel-head { border-bottom: 1px dashed var(--s-line); padding-top: 18px; }
.s-card .k-panel-head h2 { font: 700 1.25rem/1.2 var(--s-serif); }
.s-card .k-panel-head a { font-size: .875rem; font-weight: 500; }
.s-hr { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--s-mustard-soft); color: var(--s-mustard); font-size: .75rem; font-weight: 600; }
.s-sheet { overflow: hidden; }
.s-sheet::before { z-index: 1; }

/* ---------- today tiles (status first) ---------- */
.s-today { display: grid; gap: 16px; margin: 4px 0 28px; }
@media (min-width: 720px) { .s-today { grid-template-columns: 1.3fr 1fr 1fr; } .s-today-2 { grid-template-columns: 1.4fr 1fr; } }
.s-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; border-radius: 16px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--k-shadow-1); color: var(--s-ink); text-decoration: none; }
a.s-tile:hover { box-shadow: var(--k-shadow-2); }
.s-tile::after { content: ""; position: absolute; top: -6px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: color-mix(in srgb, var(--s-mustard-pin) 45%, transparent); border-radius: 2px; transform: rotate(-2deg); }
.s-tile-allow { background: var(--s-cherry); color: #FFF8F0; border-color: transparent; }
.s-tile-allow .s-tile-k, .s-tile-allow .s-allow-label, .s-tile-allow .s-allow-of { color: #FBE3D9; }
@media (min-width: 720px) { .s-today > :nth-child(odd) { transform: rotate(var(--s-tilt-a)); } .s-today > :nth-child(even) { transform: rotate(var(--s-tilt-b)); } }
.s-tile-k { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--s-muted); }
.s-tile-n, .s-allow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.s-tile-n b, .s-allow b { font: 800 3rem/1 var(--s-serif); letter-spacing: -.02em; }
.s-tile-n > span { color: var(--s-muted); font-weight: 500; }
.s-tile-n b { color: var(--s-cherry); }
.s-allow-n { display: inline-flex; align-items: baseline; }
.s-allow-max b { font-size: 2rem; opacity: .85; }
.s-allow-of { font: italic 500 1.25rem/1 var(--s-serif); }
.s-allow-label { flex-basis: 100%; font-size: .9375rem; font-weight: 500; }
.s-zero { color: var(--s-muted); font-size: .9375rem; }

.s-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--s-card-2); color: var(--s-ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* ---------- person ---------- */
.s-person-card { display: flex; gap: 20px; align-items: center; padding: 22px 24px; margin: 8px 0 24px; border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--k-shadow-1); }
.s-person-av { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--s-cherry); color: #FFF8F0; font: 800 2.5rem/1 var(--s-serif); box-shadow: 0 0 0 6px var(--s-cherry-soft); }
.s-person-av .k-i { width: 40px; height: 40px; }
.s-person-card h1, .s-person-name .plv-title { margin: 0; font: 800 clamp(2rem, 1.5rem + 2vw, 3rem)/1.05 var(--s-serif); color: var(--s-ink); overflow-wrap: anywhere; }
.s-person-name .k-empty { padding: 0; text-align: left; }
.s-taken { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 14px; color: var(--s-muted); font-weight: 500; }
.s-taken b { font: 800 2rem/1 var(--s-serif); color: var(--s-ink); }
@media (max-width: 559px) { .s-person-card { flex-direction: column; align-items: flex-start; padding: 20px; } .s-person-av { width: 64px; height: 64px; font-size: 2rem; } .s-person-av .k-i { width: 30px; height: 30px; } }
.s-rule { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.s-hrnote, .s-rule-callout { margin-top: 16px; }
.s-rule-callout { margin-bottom: 24px; }

/* ---------- views kit ---------- */
@media (min-width: 640px) { .s-app .plv-table :is([data-pl-cell="from"], [data-pl-cell="to"], [data-pl-cell="due"], [data-pl-cell="start_date"], [data-pl-cell="phone"], [data-pl-cell="contact_phone"]) { white-space: nowrap; } }

/* ---------- forms ---------- */
.s-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.s-form .k-field, .s-form .k-pair > * { min-width: 0; }
.s-app .k-field > label { font-weight: 600; font-size: .875rem; color: var(--s-ink); }
.s-app .k-field :is(input, select, textarea) { background: var(--s-oat); border-color: var(--s-line-strong); border-radius: 12px; }

/* ---------- onboarding board ---------- */
.s-boardwrap { margin: 8px 0 24px; }
.s-task { position: relative; display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: 12px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--k-shadow-1); max-width: 340px; }
.s-task::before { content: ""; position: absolute; top: -5px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--s-mustard-pin); box-shadow: inset -1px -2px 0 rgba(0, 0, 0, .2); }
.s-task h3 { font: 700 1.0625rem/1.25 var(--s-serif); }
.s-task p { color: var(--s-muted); font-size: .875rem; }
.s-task .s-pill { justify-self: start; background: var(--s-cherry-soft); color: var(--s-cherry); }
.s-task-owner { display: flex; align-items: center; gap: 6px; }

/* ---------- empty states ---------- */
.s-app .k-empty h3 { font: 700 1.125rem/1.25 var(--s-serif); color: var(--s-ink); }
.s-app .k-empty p { margin: 6px auto 12px; max-width: 42ch; }
.s-app .s-tile .k-empty, .s-app .k-pagehead .k-empty { padding: 0; text-align: left; }

/* ---------- footer ---------- */
.s-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px dashed var(--s-line-strong); color: var(--s-muted); font-size: .8125rem; }
.s-foot a { color: inherit; }

@media (prefers-reduced-motion: reduce) { .s-app * { transition: none !important; } }
@media (prefers-color-scheme: dark) {
  .s-tile-allow { color: #1B1411; }
  .s-tile-allow .s-tile-k, .s-tile-allow .s-allow-label, .s-tile-allow .s-allow-of { color: #3A1F17; }
  .s-person-av { color: #1B1411; }
}
.s-addhere { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--k-line); }
.s-addhere h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.s-addhere .k-help { margin: 0 0 12px; }
.s-taken-of { flex-basis: 100%; font-size: .85rem; font-weight: 400; }
.s-form .k-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-span-4 .s-form .k-pair-stack { grid-template-columns: minmax(0, 1fr); }
.s-form .k-pair input { width: 100%; min-width: 0; }
.s-tile-n b, .s-allow b, .s-taken b { font-variant-numeric: lining-nums; }

/* The rail is as tall as the window less Page Lemon's demo bar (--plx-bar, set on a demo site), so the bar never covers the rail note. */
@media (min-width: 1024px) { .k-tabs { height: calc(100vh - var(--plx-bar, 0px)); } }