/* Workbench (Page Lemon internal tool template): Saltmarket Studio, a 13-person Glasgow web and brand agency.
   Art direction: a workshop pegboard. The page is birch ply punched with peg holes; every panel hangs on it as a card tag
   with its own hole; panel titles are strips of masking tape; numbers sit on a yellow tape measure with tick marks.
   The rail is the dark green tool wall. Archivo (narrow widths) for headings and figures, IBM Plex Mono for labels and dates.
   kit.css is never edited here: it gives layout, behaviour and accessibility; colour, type and surfaces are set here. */
:root {
  --wb-ply: #E9DFCC;
  --wb-hole: rgba(74, 54, 26, .17);
  --wb-card: #FFFCF6;
  --wb-card-2: #F5EEDF;
  --wb-ink: #24211C;
  --wb-muted: #62594C;
  --wb-line: #DFD3BD;
  --wb-line-strong: #B5A586;
  --wb-orange: #C2461A;
  --wb-orange-ink: #FFFFFF;
  --wb-tape: #F1E2A6;
  --wb-tape-ink: #3B3220;
  --wb-wall: #22382F;
  --wb-wall-hole: rgba(239, 232, 218, .09);
  --wb-wall-ink: #EFE8DA;
  --wb-wall-muted: #B9C4B9;
  --wb-wall-current: #E2622C;
  --wb-measure: #F2C230;
  --wb-measure-ink: #24211C;
  --wb-late: #9E2A10;
  --wb-shadow: 0 1px 0 var(--wb-line-strong), 0 10px 20px -14px rgba(70, 45, 10, .45);
  --wb-c-grey: #5E6670; --wb-c-red: #B42318; --wb-c-orange: #B54708; --wb-c-yellow: #8A6A00; --wb-c-green: #237A3B;
  --wb-c-teal: #0E7470; --wb-c-blue: #1D5FB8; --wb-c-purple: #6941C6; --wb-c-pink: #B4246E; --wb-c-brown: #7A4E2D;
  --wb-display: Archivo, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --wb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --k-brand: var(--wb-orange);
  --k-brand-ink: var(--wb-orange-ink);
  --k-brand-soft: rgba(194, 70, 26, .12);
  --k-hero: var(--wb-wall);
  --k-hero-ink: var(--wb-wall-ink);
  --k-gold: var(--wb-measure);
  --k-bg: var(--wb-ply);
  --k-surface: var(--wb-card);
  --k-surface-2: var(--wb-card-2);
  --k-line: var(--wb-line);
  --k-line-strong: var(--wb-line-strong);
  --k-text: var(--wb-ink);
  --k-muted: var(--wb-muted);
  --k-faint: var(--wb-muted);
  --k-warn: var(--wb-c-orange);
  --k-danger: var(--wb-c-red);
  --k-ok: var(--wb-c-green);
  --k-info: var(--wb-c-blue);
  --k-font: var(--wb-display);
  --k-font-display: var(--wb-display);
  --k-r-s: 4px; --k-r-m: 6px; --k-r-l: 8px; --k-r-xl: 10px; --k-r-pill: 6px;
  --k-shadow-1: var(--wb-shadow);
  --pl-v-accent: var(--wb-orange);
  --pl-v-radius: 6px;
  --pl-v-font: var(--wb-display);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wb-ply: #1C1B18;
    --wb-hole: rgba(255, 245, 225, .07);
    --wb-card: #27251F;
    --wb-card-2: #312E27;
    --wb-ink: #F1EADC;
    --wb-muted: #B8AE9C;
    --wb-line: #3C382F;
    --wb-line-strong: #5A5446;
    --wb-orange: #F07A3E;
    --wb-orange-ink: #1C1B18;
    --wb-tape: #4E4527;
    --wb-tape-ink: #F6E9B4;
    --wb-wall: #121B17;
    --wb-wall-hole: rgba(239, 232, 218, .07);
    --wb-measure: #D9AE2B;
    --wb-measure-ink: #1C1B18;
    --wb-late: #6E1A06;
    --wb-shadow: 0 1px 0 #0E0D0B, 0 12px 24px -14px rgba(0, 0, 0, .7);
    --wb-c-grey: #AEB6BF; --wb-c-red: #FF8A7A; --wb-c-orange: #F9A55B; --wb-c-yellow: #E8C547; --wb-c-green: #6FCF8A;
    --wb-c-teal: #5CCFC6; --wb-c-blue: #7FB2FF; --wb-c-purple: #B69CFF; --wb-c-pink: #F58BC0; --wb-c-brown: #D2A07A;
    --k-brand-soft: rgba(240, 122, 62, .16);
    --wb-avatar: #4E4527;
    color-scheme: dark;
  }
}

/* ---------- the pegboard ---------- */
body.wb { background-color: var(--wb-ply); background-image: radial-gradient(circle at 12px 12px, var(--wb-hole) 2.4px, transparent 3px); background-size: 24px 24px; color: var(--wb-ink); font-family: var(--wb-display); }
.wb :focus-visible { outline: 3px solid var(--wb-orange); outline-offset: 2px; }
.wb ::selection { background: var(--wb-measure); color: var(--wb-measure-ink); }
.wb :is(h1, h2, h3) { font-family: var(--wb-display); }
.wb .k-pagehead h1 { font-size: clamp(2rem, 6vw, 2.875rem); font-weight: 800; font-stretch: 75%; letter-spacing: -.01em; line-height: 1; }
.wb .k-pagehead p { color: var(--wb-muted); }
.wb .k-back { color: var(--wb-orange); font-family: var(--wb-mono); font-size: .8125rem; }

/* masking tape: kickers and panel titles */
.wb .wb-tape, .wb .wb-card .k-panel-head h2 { display: inline-block; background: var(--wb-tape); color: var(--wb-tape-ink); font: 600 .75rem/1.3 var(--wb-mono); text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; transform: rotate(-1deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 94%, 100% 100%, 2% 96%, 0 100%); }
.wb .wb-card .k-panel-head h2 { font-size: .8125rem; }
.wb .k-pagehead .wb-tape { margin-bottom: 10px; }

/* buttons: a stamped orange plate */
.wb .k-btn { border-radius: 6px; font: 700 .9375rem/1 var(--wb-display); letter-spacing: .01em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.wb .k-btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18); }
.wb .k-btn-line { background: var(--wb-card); color: var(--wb-ink); box-shadow: inset 0 0 0 1.5px var(--wb-line-strong); }
.wb .k-btn-lg { font-size: 1.0625rem; }

/* ---------- shell: the tool wall ---------- */
.wb .k-top { background: color-mix(in srgb, var(--wb-ply) 88%, transparent); }
.wb .k-brand { font: 800 1.0625rem/1 var(--wb-display); font-stretch: 85%; color: var(--wb-ink); }
.wb .k-avatar { width: 38px; height: 38px; background: var(--wb-avatar, var(--wb-wall)); color: var(--wb-wall-ink); border-radius: 50%; font-family: var(--wb-mono); font-size: .875rem; }
.wb-me { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.wb .k-top .k-btn-s { min-height: 44px; padding: 0 14px; font-size: .8125rem; }
@media (max-width: 639px) { .wb-me-name { display: none; } }
.wb .k-tabs { background: var(--wb-wall); border-top: 0; }
.wb .k-tabs a { color: var(--wb-wall-muted); font-family: var(--wb-mono); font-weight: 500; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; }
.wb .k-tabs a[aria-current="page"] { color: #FFB089; }
@media (min-width: 1024px) {
  .wb .k-tabs { background-color: var(--wb-wall); background-image: radial-gradient(circle at 12px 12px, var(--wb-wall-hole) 2.4px, transparent 3px); background-size: 24px 24px; border-right: 0; }
  .wb .k-tabs .k-tabs-brand, .wb .k-tabs a.k-tabs-brand:hover { color: var(--wb-wall-ink); }
  .wb .k-tabs .k-tabs-brand img { border-radius: 8px; }
  .wb .k-tabs a { font-size: .8125rem; color: var(--wb-wall-ink); border-radius: 6px; }
  .wb .k-tabs a:hover { background: rgba(239, 232, 218, .08); color: #FFFFFF; }
  .wb .k-tabs a[aria-current="page"] { background: var(--wb-wall-current); color: #1C1B18; font-weight: 600; position: relative; }
  .wb .k-tabs a[aria-current="page"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--wb-wall); }
  .wb .k-tabs .k-tabs-foot { background: var(--wb-tape); color: var(--wb-tape-ink); border-radius: 2px; transform: rotate(-1deg); font-family: var(--wb-mono); }
  .wb .k-tabs .k-tabs-foot a { text-decoration: underline; text-transform: none; letter-spacing: 0; font-size: inherit; }
}

/* ---------- card tags hung on the board ---------- */
.wb-card { position: relative; background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 8px; box-shadow: var(--wb-shadow); }
.wb-card::before { content: ""; position: absolute; z-index: 1; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--wb-ply); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .35); pointer-events: none; }
.wb .wb-card .k-panel-head { min-height: 64px; padding-top: 16px; border-bottom: 1px dashed var(--wb-line-strong); }
.wb .wb-card .k-panel-head a { color: var(--wb-orange); font-family: var(--wb-mono); font-size: .8125rem; }
.wb .k-board { margin-top: 20px; }
.wb .k-main > .wb-card, .wb .k-main > .wb-drawer { margin-top: 20px; }
.wb-side > * + * { margin-top: 16px; }
.wb .k-help { color: var(--wb-muted); font-size: .875rem; }
.wb .k-metrics + .k-metrics { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--wb-line); }
.wb .k-metrics b { font-stretch: 75%; font-size: 2rem; }
.wb .k-metrics span { font-family: var(--wb-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; }
.wb .k-callout { border: 1px solid var(--wb-line); box-shadow: var(--wb-shadow); }

/* ---------- the tape measure ---------- */
.wb-measure { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); margin: 4px 0 8px; background-color: var(--wb-measure); color: var(--wb-measure-ink); border-radius: 6px; box-shadow: var(--wb-shadow);
  background-image: repeating-linear-gradient(90deg, var(--wb-measure-ink) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, var(--wb-measure-ink) 0 1px, transparent 1px 12px);
  background-size: 100% 16px, 100% 8px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; }
.wb-stat { padding: 14px 18px 26px; border-left: 2px solid rgb(from var(--wb-measure-ink) r g b / .35); }
.wb-stat:first-child { border-left: 0; }
.wb-stat b { display: block; font: 800 2.75rem/1 var(--wb-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.wb-stat span { display: block; margin-top: 4px; font: 600 .75rem/1.3 var(--wb-mono); text-transform: uppercase; letter-spacing: .06em; }
.wb .wb-stat b { color: var(--wb-measure-ink); }
.wb .wb-stat-late b { color: var(--wb-late); }
@media (max-width: 639px) { .wb-stat { padding: 12px 12px 24px; } .wb-stat b { font-size: 2.25rem; } .wb-stat span { font-size: .6875rem; letter-spacing: .03em; } }

/* ---------- rows (the sample child of a table view) ---------- */
.wb-rows > .wb-row, .wb-tally-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 20px; border-top: 1px solid var(--wb-line); color: var(--wb-ink); text-decoration: none; }
.wb-rows > .wb-row:first-child, .wb-tally-row:first-child { border-top: 0; }
a.wb-row:hover { background: var(--wb-card-2); }
.wb-row-main { flex: 1 1 16rem; min-width: 0; }
.wb-row-main b { display: block; font-weight: 650; font-size: 1rem; line-height: 1.3; }
.wb-row-main small { display: block; margin-top: 2px; color: var(--wb-muted); font-size: .875rem; }
.wb-row-main small a { color: inherit; }
.wb-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wb-pill { --c: var(--wb-c-grey); display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); font: 600 .75rem/1 var(--wb-mono); white-space: nowrap; }
.wb-grey { --c: var(--wb-c-grey); } .wb-red { --c: var(--wb-c-red); } .wb-orange { --c: var(--wb-c-orange); } .wb-yellow { --c: var(--wb-c-yellow); } .wb-green { --c: var(--wb-c-green); }
.wb-teal { --c: var(--wb-c-teal); } .wb-blue { --c: var(--wb-c-blue); } .wb-purple { --c: var(--wb-c-purple); } .wb-pink { --c: var(--wb-c-pink); } .wb-brown { --c: var(--wb-c-brown); }
.wb-due { font: 500 .8125rem/1 var(--wb-mono); color: var(--wb-muted); white-space: nowrap; }
.wb-late { color: var(--wb-c-red); font-weight: 600; }
.wb-who { font-size: .875rem; color: var(--wb-muted); }
.wb-hours, .wb-tally-row b { font: 800 1.25rem/1 var(--wb-display); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.wb-tally-row { justify-content: space-between; }
.wb .wb-empty { padding: 28px 20px; }
.wb .wb-empty h3 { font-stretch: 85%; }

/* ---------- board: tasks as hanging tags ---------- */
.wb-wall { margin-top: 8px; }
.wb-tag { position: relative; display: grid; gap: 4px; max-width: 320px; padding: 26px 14px 12px; background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 8px; box-shadow: var(--wb-shadow); color: var(--wb-ink); text-decoration: none; }
.wb-tag::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--wb-ply); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .35); }
.wb-tag b { font-size: 1rem; font-weight: 650; line-height: 1.3; }
.wb-tag > span { color: var(--wb-muted); font-size: .875rem; }
.wb-tag .wb-tag-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.wb-add { margin-top: 24px; }

/* ---------- drawers and forms ---------- */
.wb-drawer { background: var(--wb-card); border: 1px solid var(--wb-line); border-radius: 8px; box-shadow: var(--wb-shadow); }
.wb-drawer > summary { display: flex; align-items: center; min-height: 52px; padding: 0 20px; cursor: pointer; font: 600 .8125rem/1 var(--wb-mono); text-transform: uppercase; letter-spacing: .07em; }
.wb-drawer[open] > summary { border-bottom: 1px dashed var(--wb-line-strong); }
.wb form[data-pl-view="new"] { min-height: 96px; }
.wb .wb-record { min-height: 160px; }
@media (prefers-reduced-motion: reduce) { .wb .k-btn { transition: none; } }

/* ---------- the views kit's output, in the bench's own look ---------- */
.wb .k-pagehead h1.wb-tape { font: 600 .75rem/1.3 var(--wb-mono); letter-spacing: .07em; margin-bottom: 10px; }
.wb .wb-title .plv-title { margin: 0; font: 800 clamp(2rem, 6vw, 2.875rem)/1.05 var(--wb-display); font-stretch: 75%; letter-spacing: -.01em; color: var(--wb-ink); overflow-wrap: anywhere; }
.wb .wb-title .wb-title-fallback { margin: 0; font: 800 2rem/1.05 var(--wb-display); font-stretch: 75%; color: var(--wb-ink); }
.wb .wb-title + p { margin-top: 6px; }
.wb .wb-rows .plv-scroll { border: 0; border-radius: 0 0 8px 8px; background: transparent; }
.wb .wb-rows > .plv-tools, .wb .wb-drawer .plv-tools { padding: 12px 20px 0; }
.wb .plv-table thead th { font: 600 .6875rem/1.2 var(--wb-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--wb-muted); background: var(--wb-card-2); }
.wb .plv-table tbody th[scope=row] { font-weight: 650; }
.wb .plv-table time, .wb .plv-card time { font-family: var(--wb-mono); font-size: .8125rem; white-space: nowrap; color: var(--wb-muted); }
.wb .plv-table td.plv-num { font: 700 1rem/1.3 var(--wb-display); font-stretch: 85%; }
.wb .plv-table tfoot .plv-total > * { font-weight: 800; background: var(--wb-card-2); }
.wb .plv-group > *, .wb .plv-table .plv-group th { font: 600 .75rem/1.3 var(--wb-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--wb-tape); color: var(--wb-tape-ink); }
.wb .plv-pill { font: 600 .75rem/1 var(--wb-mono); }
.wb .plv-table a[href^="mailto:"] { overflow-wrap: anywhere; }
.wb .wb-record { padding: 32px 20px 20px; }
.wb .wb-record .plv-title { font: 800 1.5rem/1.1 var(--wb-display); font-stretch: 80%; }
.wb .wb-record h3 { font: 600 .75rem/1.3 var(--wb-mono); text-transform: uppercase; letter-spacing: .07em; }
.wb .wb-tally > .wb-tally-row:first-child { border-top: 0; }
.wb .wb-measure .plv-empty, .wb .wb-measure > .k-empty { grid-column: 1 / -1; }

/* board: each column is a strip of pegboard, each card a hanging tag */
.wb .plv-col { background: color-mix(in srgb, var(--wb-card-2) 70%, transparent); border: 1px solid var(--wb-line); border-radius: 8px; }
.wb .plv-col-head h3 { font: 600 .8125rem/1.2 var(--wb-mono); text-transform: uppercase; letter-spacing: .07em; }
.wb .plv-card { padding: 0; background: none; border: 0; box-shadow: none; }
.wb .plv-card .wb-tag { max-width: none; }
.wb .wb-tag-title { font-size: 1rem; font-weight: 650; line-height: 1.3; color: var(--wb-ink); text-decoration: none; }
.wb .wb-tag-title:hover { text-decoration: underline; color: var(--wb-orange); }
.wb .plv-card > .plv-move { margin-top: 6px; }
.wb .plv-new-form .plv-field + .plv-field, .wb form[data-pl-view="new"] .plv-field + .plv-field { margin-top: 12px; }

/* Phones: a record page leads with the record (fields, comments, history), then its tasks and time. */
@media (max-width: 1023px) { .wb .k-board > .wb-record, .wb .k-board > .k-sr { order: -1; } }

/* 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)); } }

/* Public project request page (request.html) */
.wb-public { margin: 0; min-height: 100vh; background: #E9DFCC; color: #1d1a16; font-family: "Archivo", system-ui, sans-serif; }
.wb-public-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; }
.wb-public-brand { display: flex; align-items: center; gap: 10px; color: inherit; font-weight: 700; text-decoration: none; }
.wb-public-link { color: inherit; }
.wb-public-main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.wb-public-kicker { font-family: "IBM Plex Mono", monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.wb-public-lede { font-size: 17px; line-height: 1.5; }
.wb-public-card { border: 2px dashed #1d1a16; padding: 16px; margin: 16px 0; background: #f6f0e4; }
.wb-request-form { display: grid; gap: 8px; }
.wb-request-form label { font-weight: 600; margin-top: 8px; }
.wb-request-form input { font: inherit; padding: 10px; border: 1px solid #1d1a16; background: #fff; max-width: 100%; }
.wb-public-foot { max-width: 560px; margin: 0 auto; padding: 16px; font-size: 13px; }