1/* Whiskers' own styles, after the shared look (jev-ui's ui.css, which is linked first): only what
2   the shared sheet has no word for. Colours and type are its tokens. */
3.body p, .body ul, .body ol { margin: 0; }
4.lede { font: 500 1.35rem/1.25 var(--display); letter-spacing: -0.02em; }
5.body p { max-width: 44rem; }
6.body h3 { font: 1.35rem/1 var(--pixel); margin: 0 0 0.25rem; }
7
8.demo { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
9/* The stage is a dark window inside the light page: the cat's speech waves, thought cloud, stars,
10   z's, hearts and sweat are pale, and on paper they could not be seen. The colour is `cat::stage::STAGE`
11   (a test holds this to it, and holds every scene to it). The caption, the pills and the buttons stay
12   on the page's own light chrome beside it. */
13:root { --stage: #000000; }
14.stage { margin: 0; background: var(--stage); border: 1px solid var(--ink); padding: 0.5rem; touch-action: pan-y; }
15.cat { display: block; width: 100%; height: auto; max-height: 60vh; margin: 0 auto; }
16.side { display: grid; gap: 0.8rem; min-width: 0; align-content: start; }
17.caption { min-height: 4.6rem; }
18.caption p { margin: 0; }
19
20/* The stages a message passes through: a pill lit pink while the cat is busy with it. */
21.pipeline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
22.pipeline li { padding: 0.15rem 0.5rem; border: 1px solid var(--ink); background: var(--paper); font: 1.15rem/1.2 var(--pixel); }
23.pipeline li.on { background: var(--pink); }
24
25/* The pickers: a button is pressed in ink and the rest are ghosts. */
26.moods, .mascots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
27.mood, .mascot { background: var(--paper); color: var(--ink); font-size: 1.15rem; padding: 0.3rem 0.7rem; min-height: 2.2rem; }
28.mood.on, .mood[aria-pressed="true"], .mascot.on, .mascot[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
29.mood { position: relative; }
30.mood .chip { display: inline-flex; align-items: center; margin-left: 0.4rem; padding: 0 0.15rem; background: var(--paper); color: var(--ink); vertical-align: middle; }
31/* The beat's countdown: a bar along the foot of the playing pill that fills over the seconds the
32   page waits before the next mood, in four steps a second. Not shown for less motion: the hourglass,
33   which then stands still, says which one is playing. */
34.mood .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pink); transform-origin: left; animation: countdown var(--secs, 2s) steps(var(--ticks, 8), end) forwards; }
35@keyframes countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
36@media (prefers-reduced-motion: reduce) { .mood .fill { display: none; } }
37.tour { justify-self: start; display: inline-flex; align-items: center; gap: 0.2rem; }
38
39.points { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
40.points li { border: 1px solid var(--ink); background: var(--paper); padding: 0.6rem 0.8rem; }
41.flow { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 0.5rem; }
42.flow li { counter-increment: step; position: relative; padding: 0.4rem 0.8rem 0.4rem 3rem; border: 1px solid var(--ink); background: var(--paper); }
43.flow li::before { content: counter(step); position: absolute; left: 0; top: 0; bottom: 0; width: 2.2rem; background: var(--ink); color: var(--paper); font: 1.3rem/1 var(--pixel); display: grid; place-items: center; }
44.body a { color: inherit; }
45
46@media (min-width: 38rem) {
47  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
48}
49
50/* Where Jev is used (explain.rs). */
51.uses { list-style: none; counter-reset: use; padding: 0; display: grid; gap: 0.5rem; }
52.uses li { counter-increment: use; border: 1px solid var(--ink); background: var(--paper); padding: 0.5rem 0.8rem 0.5rem 3rem; position: relative; display: grid; gap: 0.2rem; }
53.uses li::before { content: counter(use); position: absolute; left: 0; top: 0; bottom: 0; width: 2.2rem; background: var(--pink); color: var(--ink); border-right: 1px solid var(--ink); font: 1.3rem/1 var(--pixel); display: grid; place-items: center; }
54.uses strong { font: 1.2rem/1 var(--pixel); }
55.topics { display: grid; border: 1px solid var(--ink); background: var(--paper); }
56.topic { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.1rem 0.8rem; padding: 0.4rem 0.7rem; border-top: 1px solid var(--grey); }
57.topic:first-child { border-top: 0; }
58.topic .t { font: 1.15rem/1.2 var(--pixel); }
59.topic .fine { grid-column: 2; }
60.case { display: grid; gap: 0.6rem; min-width: 0; }
61.case + .case { border-top: 1px dotted var(--ink); padding-top: 0.9rem; }
62.verdict { font: 1.2rem/1.15 var(--pixel); }
63.body code { font: 0.85em var(--mono); }
64@media (max-width: 34rem) { .topic { grid-template-columns: 1fr; } .topic .fine { grid-column: 1; } }
65
66/* Get it: three blocks, links that read as links. */
67#get .get-block { margin-top: 1rem; }
68#get h3 { margin: 0 0 .4rem; }
69#get a { text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
70#get .downloads { padding-left: 1.2rem; margin: 0; }
71#get .downloads li { margin: .3rem 0; }
72#get .needs { margin: 0; }
73#get .needs dt { margin-top: .4rem; font-weight: bold; }
74#get .needs dd { margin: 0 0 0 1rem; }
75#get code { overflow-wrap: anywhere; }
76
77/* Pixel icons: shuqikhor's 9 by 9 art, drawn inline at about four times a title-bar icon, in
78   their own colours and crisp. */
79.pic { display: inline-block; width: 3rem; height: 3rem; flex: none; }
80.pic svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
81
82/* The three-column table: icon, row header, description. Stacked at phone width, never sideways. */
83.facts { width: 100%; border-collapse: collapse; margin-top: .6rem; }
84.facts tr { border: 1px solid var(--ink); background: var(--paper); }
85.facts tr + tr { border-top: 0; }
86.facts th, .facts td { text-align: left; vertical-align: middle; padding: .5rem .7rem; overflow-wrap: anywhere; }
87.facts th { font-weight: bold; width: 30%; }
88.facts .icon-cell { width: 1%; padding-right: 0; }
89@media (max-width: 34rem) {
90  .facts, .facts tbody { display: block; }
91  .facts tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; margin-top: .5rem; border: 1px solid var(--ink); }
92  .facts .icon-cell { grid-row: 1 / span 2; padding: .5rem 0 .5rem .6rem; width: auto; }
93  .facts th, .facts td { width: auto; display: block; padding: .3rem .6rem; }
94}
95
96/* "Download for Android": a details that opens by tap or key, and by hover where CSS can. */
97.dl { margin-top: 1rem; }
98.dl-button { display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%; padding: .4rem .9rem .4rem .5rem; border: 2px solid var(--ink); background: var(--paper); font: 1.35rem/1.1 var(--pixel); cursor: pointer; list-style: none; }
99.dl-button::-webkit-details-marker { display: none; }
100.dl-button:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
101.dl-button .fold::before { content: "+"; }
102.dl[open] > .dl-button .fold::before { content: "\2013"; }
103.dl-menu { display: grid; gap: 0; margin-top: .4rem; border: 1px solid var(--ink); background: var(--paper); max-width: 34rem; padding-bottom: .5rem; }
104.dl-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
105.dl-row + .dl-row { border-top: 1px dotted var(--ink); }
106.dl-row:hover, .dl-row:focus-visible { background: var(--pink); }
107.dl-row:focus-visible, .dl-sums:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
108.dl-text { display: grid; min-width: 0; }
109.dl-name { font: 1.25rem/1.15 var(--pixel); overflow-wrap: anywhere; }
110.dl-sums { margin-left: .7rem; margin-top: .4rem; }
111.dl-menu .fine { margin-left: .7rem; }
112.dl-row .fine { margin-left: 0; }
113@media (hover: hover) {
114  @supports selector(::details-content) {
115    .dl:hover::details-content { content-visibility: visible; }
116  }
117}
118.pics { display: inline-flex; gap: .2rem; flex: none; }
119.pic.png img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
120.dl-button .pic { width: 2.4rem; height: 2.4rem; }