/* Pifilabs Coloring, in the Pifilabs brand (tokens.css, loaded first; the rules are in
   brand/guides/foundations/visual.md). Black and white first: paper and ink, grey only for secondary
   text, red only for deleting. Identity stays square (the mark, icons, stamps); everything you touch
   is soft, from the radius tokens. Only what floats has a shadow. Archivo for reading, IBM Plex Mono
   for numbers, dates and status, and Coloring's own display face (a Georgia italic) for titles. One
   accent, violet, only for the main button, selection, progress and links. The coloring pages and
   the palettes are content: they keep all their colour. */
:root {
  --pl-font-display: Georgia, "Times New Roman", serif;
  /* the names the pages use, mapped onto the brand */
  --bg: var(--pl-bg); --card: var(--pl-surface); --ink: var(--pl-fg); --ink2: var(--pl-fg); --muted: var(--pl-fg-muted);
  --line: var(--pl-separator); --chip: var(--pl-fill);
  --brand: var(--pl-accent); --brand-hover: var(--pl-accent); --brand-ink: var(--pl-on-accent); --brand-text: var(--pl-accent);
  --brand-soft: var(--pl-fill); --brand-glow: transparent; --lake: var(--pl-accent);
  --shadow: none; /* cards never have one (ST4) */
  --ring: 0 0 0 var(--pl-hairline) var(--pl-separator); /* the soft edge of a card, as in .pl-card */
  --serif: var(--pl-font-display); --mono: var(--pl-font-mono);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 var(--pl-text-md)/var(--pl-leading-body) var(--pl-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--pl-font-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* Buttons: a soft fill you can tap, the same as .pl-btn; the main one is filled violet (one per screen) */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pl-2); min-height: var(--pl-control); padding: 0 var(--pl-button-pad); font: var(--pl-button-weight) var(--pl-button-size)/1.1 var(--pl-font); letter-spacing: var(--pl-tracking-control); color: var(--ink); background: var(--pl-fill); border: 0; border-radius: var(--pl-radius-control); text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color var(--pl-fast) var(--pl-ease), color var(--pl-fast) var(--pl-ease), opacity var(--pl-fast) var(--pl-ease); }
button:active, .btn:active { opacity: .7; transition-duration: 0ms; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }
button.primary, .btn.primary, a.primary, .btnlink { background: var(--pl-accent); color: var(--pl-on-accent); }
@media (hover: hover) {
  button:not(.primary):not(:disabled):hover, a.btn:not(.primary):hover { background: var(--pl-fill-hover); }
  button.primary:not(:disabled):hover, a.btn.primary:hover, .btnlink:hover { background: color-mix(in srgb, var(--pl-accent) 90%, transparent); }
}
.ghost { background: transparent; }
.danger { color: var(--pl-signal); background: transparent; }
@media (hover: hover) { button.danger:not(:disabled):hover { background: color-mix(in srgb, var(--pl-signal) 10%, transparent); } }
input, textarea { caret-color: var(--pl-accent); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--pl-accent); }
button:disabled { background: var(--pl-fill); color: color-mix(in srgb, var(--pl-fg) 38%, transparent); cursor: default; }
.pl-btn--icon:disabled { background: transparent; }
a { color: var(--pl-accent); }

/* The lockup (black and white, always first) */
.logo { margin: 0; line-height: 0; }
.logo img { height: 30px; width: auto; display: block; }

/* Segmented switches are .pl-seg (tokens.css); the pages' code marks the chosen one with .active */
.pl-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pl-seg button { display: block; min-width: 44px; }
.pl-seg button.active::before { background: var(--pl-segment); box-shadow: var(--pl-shadow-thumb); }

/* ST6 mono keeps the records, in sentence case */
.mono, .eyebrow { font-family: var(--pl-font-mono) !important; font-weight: 400; font-size: var(--pl-text-xs); }

/* Icons: thin square-capped strokes (identity) */
.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; flex: none; vertical-align: -4px; }

/* the shell's round profile button, and the Settings rows inside it (BH1, BH8). Its space is kept
   while its script loads, so nothing jumps. */
pifilabs-profile:not(:defined) { display: inline-block; width: var(--pl-control); height: var(--pl-control); }
pifilabs-profile:not(:defined) > * { display: none; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-4); min-height: var(--pl-control); padding: 0 var(--pl-4); background: var(--pl-surface); color: var(--ink); border-radius: var(--pl-radius-control); box-shadow: var(--ring); font: 400 var(--pl-text-md)/1.3 var(--pl-font); text-decoration: none; cursor: pointer; }
.setrow + .setrow { margin-top: var(--pl-3); }
.setrow small { color: var(--muted); font-size: var(--pl-text-sm); }
.setrow .go { color: var(--muted); }

/* the public site (coloring.pifilabs.com, see site.js) has no Mac server: no projector, no making */
.public .mac-only { display: none !important; }
:root:not(.public) .public-only { display: none !important; }

/* the public site as an app (pwa.js): "Get the app" and "Use it offline" */
.appbox { display: flex; align-items: center; gap: var(--pl-4); margin: 0 0 var(--pl-6); padding: var(--pl-4); background: var(--card); border-radius: var(--pl-radius-control); box-shadow: var(--ring); }
#v-mine .appbox { margin: var(--pl-6) 0 0; }
.appbox .appico { display: grid; place-items: center; width: var(--pl-touch); height: var(--pl-touch); flex: none; background: var(--pl-fill); border-radius: var(--pl-radius); }
.appbox .grow { flex: 1; display: flex; flex-direction: column; gap: var(--pl-1); min-width: 0; }
.appbox strong { font-size: var(--pl-text-lg); }
.appbox span { color: var(--muted); line-height: 1.45; max-width: var(--pl-measure); }
.appbox span b { color: var(--ink); }
.appbox span .ico { width: 17px; height: 17px; vertical-align: -3px; }
@media (max-width: 600px) { .appbox { flex-wrap: wrap; } .appbox .grow { flex-basis: calc(100% - 60px); } }