/* The charcoal theme for the app (theme/theme.js): the design's tokens and type on the app's own layout. Nothing here applies
   unless <html> has the class theme-charcoal. Only how things look: no size of a screen, no position of a work, no tool. */
html.theme-charcoal{
  --bg:#e9e6df; --ink:#1f1e1c; --ink-2:#5a5751; --muted:#5a5751; --rule:#c9c3b8; --card:#f2f0eb; --credit:#5a5751;
  --terracotta:#1f1e1c;   /* focus rings and the few accents: charcoal, as in the design */
  --f:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;   /* the text in the app's own face (the author, 7 November 2026: "ויליאם" still read wrong in Rubik on her phone) */
  --hand:"Secular One","Assistant",system-ui,sans-serif;
}
/* headings, the questions and the buttons in Secular One; the text in the app's own face (Assistant) */
html.theme-charcoal .pl-title,html.theme-charcoal .pl-text.pl-q,html.theme-charcoal .pl-q,html.theme-charcoal .k21-ask,
html.theme-charcoal .pl-primary,html.theme-charcoal .sh-primary,html.theme-charcoal .pl-choice,html.theme-charcoal .pl-inspire,
html.theme-charcoal .pl-secondary.pl-alt,html.theme-charcoal .pl-inspire-foot,html.theme-charcoal .sh-title,html.theme-charcoal h1,html.theme-charcoal h2{font-family:var(--hand);font-weight:400;letter-spacing:0}
html.theme-charcoal .pl-text.pl-q{color:var(--ink)}
/* the progress: a hatched line in a thin frame */
html.theme-charcoal .pl-progress{height:8px;background:transparent;box-shadow:inset 0 0 0 1.2px var(--ink);border-radius:2px}
html.theme-charcoal .pl-progress i{background:repeating-linear-gradient(45deg,var(--ink) 0 1.5px,transparent 1.5px 5px);border-radius:0}
/* "Continue": charcoal, small to look at, at the reading end (left in Hebrew, right in English), with its arrow; its hit area
   stays a finger's height */
html.theme-charcoal .pl-foot:not(.pl-foot-end):not(.pl-foot-mains) .pl-primary{align-self:flex-end;min-width:150px;min-height:48px;padding:0 22px;border-radius:4px;font-size:1.2rem}
html.theme-charcoal .pl-foot:not(.pl-foot-end):not(.pl-foot-mains) .pl-primary::after{content:"\00a0←"}
html.theme-charcoal [dir=ltr] .pl-foot:not(.pl-foot-end):not(.pl-foot-mains) .pl-primary::after,html.theme-charcoal.ltr .pl-foot:not(.pl-foot-end):not(.pl-foot-mains) .pl-primary::after{content:"\00a0→"}
html.theme-charcoal .pl-primary,html.theme-charcoal .sh-primary{border-radius:4px}
html.theme-charcoal .pl-primary:hover,html.theme-charcoal .sh-primary:hover{background:#000}
/* secondary buttons and choices: a pen line instead of a fill */
html.theme-charcoal .pl-secondary.pl-alt,html.theme-charcoal .pl-inspire,html.theme-charcoal .pl-secondary.pl-inspire-foot,html.theme-charcoal .ar-more summary{border:1.5px solid var(--ink);border-radius:4px;background:transparent}
html.theme-charcoal .pl-secondary.pl-inspire-foot svg,html.theme-charcoal .ar-more summary::before{color:var(--ink)}
html.theme-charcoal .pl-choice{border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--ink);background:transparent}
/* the works: square corners, a thin charcoal frame */
html.theme-charcoal .pl-board-img img,html.theme-charcoal .k21-pic,html.theme-charcoal .k21-pic img,html.theme-charcoal .pl-gal-frame img{border-radius:0}
html.theme-charcoal .k21-pic,html.theme-charcoal .pl-board-img{box-shadow:0 0 0 1.5px var(--ink)}
html.theme-charcoal .pl-cap-artist,html.theme-charcoal .k21-cap b{color:var(--ink)}

/* the hand-drawn frames (theme/theme.js): over the edge, never in the way */
html.theme-charcoal .th-sk-host{position:relative}
html.theme-charcoal canvas.th-sk{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none;z-index:1}
html.theme-charcoal .pl-progress.th-sk-host{position:absolute;overflow:visible;box-shadow:none}
html.theme-charcoal .pl-progress.th-sk-host i{position:relative}
html.theme-charcoal .k21-pic.th-sk-host,html.theme-charcoal .pl-board-img.th-sk-host{box-shadow:none}
html.theme-charcoal .pl-secondary.pl-alt.th-sk-host,html.theme-charcoal .pl-inspire.th-sk-host,html.theme-charcoal .pl-inspire-foot.th-sk-host,html.theme-charcoal .ar-more summary.th-sk-host{border-color:transparent}
html.theme-charcoal .pl-choice.th-sk-host{box-shadow:none}
/* a question in bold inside the words: in Secular One, as the design's questions */
html.theme-charcoal .pl-main p.pl-text > b{font-family:var(--hand);font-weight:400;color:var(--ink)}
/* the questions as large as the design's (Secular One, about 1.4 times the text) */
html.theme-charcoal .pl-main p.pl-text > b,html.theme-charcoal .pl-main p.pl-text.pl-q{font-size:1.38rem;line-height:1.22}
html.theme-charcoal .pl-main p.pl-text:has(> b:only-child){margin-bottom:10px}