/* Playground v0 — LAYOUT ONLY. Surface, type, buttons, chips and badges come from the Dandelion source
   (styles.css). Anything visual that is missing goes to vector, never gets drawn here. */

html, body { margin: 0; min-height: 100%; }

.backdrop { position: fixed; inset: 0; z-index: 10; pointer-events: none; } /* the grain lies over everything, so no band shows where the sticky title sits */
.feed {
  position: relative; z-index: auto; /* no stacking context: the sticky title must rise above the top glass */
  display: flex; flex-direction: column; gap: var(--space-8);
  box-sizing: border-box; min-height: 100dvh; /* today on top; older days continue below */
  max-width: 640px; margin: 0 auto;
  padding: 0 var(--space-4) calc(var(--sa-bot) + var(--space-24));
}
.feed__more { height: 1px; }

.day { display: flex; flex-direction: column; gap: var(--space-3); }
.day__head {
  position: sticky; top: 0; z-index: 3; margin: 0;
  /* same band as the reload button: 48px tall, from the same top, text centred in it */
  display: flex; align-items: center; box-sizing: content-box; height: 48px; padding: calc(var(--sa-top) + var(--space-1)) 0 var(--space-2) 0; /* higher, closer to the status bar (27-out) */
}

/* the page: a time gutter beside ONE editable surface per day — click anywhere and write */
.day__page { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-3); }
.day__gutter { position: static; }
.day__gutter time { position: absolute; left: 0; }
.day__lines { outline: none; min-height: calc(var(--lh-body) * 1em); caret-color: var(--ink); }
.line { margin: 0; min-height: calc(var(--lh-body) * 1em); white-space: pre-wrap; overflow-wrap: anywhere; }
.day__lines:empty::before { content: attr(data-placeholder); color: var(--ink-tertiary); }

.entry__tag { display: inline-flex; align-items: center; gap: var(--space-2); vertical-align: middle; margin: 2px 0; user-select: none; }

.tags { position: fixed; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: calc(100vw - var(--space-8)); }


/* SKIN "playground" — the two colours of his Obsidian playground (Journal/.obsidian/snippets/obsidian-custom-theme.css,
   read 26-out-2026): the green date pill (--mg-date-fg/-bg) and the violet tag (--tag-color/--tag-border-color).
   The palette is in the source (tokens/skins.css); here only how this screen uses it. */
[data-skin="playground"] {
  /* the seven slots now live in the source: tokens/skins.css [data-skin="playground"] (vector, 26-out) */
  /* 26-out 23:0x, his order: the app goes LIME (gradient + grain). Lime is the house --tone-done; the skin's accent
     follows here until vector moves slots 4/5 of the source skin. */
  /* 27-out, his order: "improve the green… use the lime theme… get it out with the Design Lab". The lime is DesignLab's
     Mission Control scale (mission-control.astro --mc-lime-*, the Glow slices lime set): --mc-lime-6 bright, --mc-past-b ground.
     Asked vector to bring the scale to the source. */
  --pg-lime: #d9f28c; --pg-lime-ground: #16260d;
  --accent: var(--pg-lime); --ink-on-accent: var(--pg-lime-ground);
  --pg-green: var(--pg-lime); --pg-green-bg: var(--pg-lime-ground);
  --pg-violet: var(--skin-7); --pg-violet-line: #673d5a;  /* his tag-border-color */
}
[data-skin="playground"] .day--today .day__head { color: var(--pg-green); }
[data-skin="playground"] .day--today .day__gutter time { color: color-mix(in srgb, var(--pg-green) 70%, transparent); }
[data-skin="playground"] .day__lines { caret-color: transparent; } /* the block caret below draws it */
[data-skin="playground"] { --pg-grape: #a07cff; } /* grape, his word 26-out; not in Dandelion yet, asked vector */
[data-skin="playground"] .chip--bot { --bot-fg: var(--pg-grape); text-shadow: var(--glow-text-sm); }
/* glow only on dates and marks (his order 26-out 23:55); the writing itself stays clean even while focused */
.day__lines, .day__lines:focus-visible { text-shadow: none; }
[data-skin="playground"] .day__head, [data-skin="playground"] .day__gutter time { text-shadow: var(--glow-text-sm); }
[data-skin="playground"] ::selection { background: var(--pg-violet-line); color: var(--ink); }

/* the dictation button: quiet when idle, lit green while it listens — never the white disc */

/* reload, top right: clears the app's cache and opens the latest version */

/* the caret is a terminal block, grape, blinking hard (on/off, no fade) */
.caret { position: fixed; z-index: 2; width: .6em; height: 1.25em; font-size: var(--fs-body); pointer-events: none;
  background: var(--pg-grape, var(--ink)); animation: caret-blink 1.06s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* type presets — families are Dandelion's own (serif is retired in the source) */
[data-type="mono"] .day__lines .line { font-family: var(--font-mono); }
[data-type="tech"] .day__lines .line { font-family: var(--font-mono-tech); }
[data-type="clock"] .day__lines .line { font-family: var(--font-clock); }
.day__lines .line { font-size: var(--pg-size, var(--fs-body)); font-weight: var(--pg-weight, var(--weight-regular)); }

/* light: the same skin on paper — house paper and ink, a lime dark enough to read on paper */
[data-skin="playground"][data-theme="light"] {
  --skin-1: var(--c-paper); --skin-2: var(--c-paper-2); --skin-3: var(--c-gray-900); --skin-6: var(--c-gray-500);
  --pg-lime: #5f8f2c; --pg-lime-ground: #e6f7b8;  /* DesignLab --mc-lime-2 on --mc-lime-7: the same lime, readable on paper */
  --accent: var(--pg-lime); --ink-on-accent: var(--pg-lime-ground);
  --pg-green: var(--pg-lime); --pg-green-bg: var(--pg-lime-ground);
  color-scheme: light;
}

/* BUTTONS = Mission Control's grammar (his order 27-out: "the btns used now are a mess", "icons only", "pattern gaps"):
   the plain Dandelion .icon-btn--round — ink-0 disc, white glyph — 32px desktop / 40px phone, 18px glyph. One column at
   the top right, one gap (--space-2), the day title centred on its first button. Only placement lives here. */
.rail { position: fixed; z-index: 3; display: flex; flex-direction: row; gap: var(--space-2);
  top: calc(var(--sa-top) + var(--space-1) + 48px + var(--space-2)); left: max(var(--space-4), calc(50vw - 320px + var(--space-4))); } /* starts under the date, same left edge (his order 27-out) */
.rail .icon-btn--round { width: var(--space-8); height: var(--space-8); }
.mic { position: fixed; z-index: 2; width: var(--space-12); height: var(--space-12);
  right: max(var(--space-4), calc(50vw - 320px + var(--space-4))); bottom: calc(var(--sa-bot) + var(--space-4)); }
.mic :where(svg) { width: 22px; height: 22px; }
@media (max-width: 719px) {
  .rail .icon-btn--round { width: var(--space-10); height: var(--space-10); }
  .rail .icon-btn--round :where(svg) { width: 18px; height: 18px; }
}

/* TOP GLASS — the Grind App's "vidro do topo", same values (treino-app App.tsx: TOP = reach 18 · blur 16 · solid 38,
   the same mask ramp). Here it reaches past the day title so the writing dissolves under it instead of colliding.
   His order 27-out: "same gradient blur finish… do not invent". Asked vector to port it to the source. */
.top-glass { position: fixed; inset: 0 0 auto 0; z-index: 2; pointer-events: none;
  /* the title band is fully covered (solid), then Grind's ramp dissolves over the last stretch */
  --band: calc(var(--sa-top) + var(--space-1) + 48px + var(--space-2) + var(--space-10) + var(--space-2)); --ramp: var(--space-16); /* a longer fade (27-out) */
  height: calc(var(--band) + var(--ramp)); background: var(--surface-page);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  --top-mask: linear-gradient(to bottom, #000 0, #000 var(--band), rgba(0,0,0,0.88) calc(var(--band) + var(--ramp) * .24),
    rgba(0,0,0,0.62) calc(var(--band) + var(--ramp) * .45), rgba(0,0,0,0.34) calc(var(--band) + var(--ramp) * .66),
    rgba(0,0,0,0.12) calc(var(--band) + var(--ramp) * .83), transparent 100%);
  -webkit-mask-image: var(--top-mask); mask-image: var(--top-mask); }

/* LIGHT (his order 27-out: "the btn colours and the glow effects at the light theme feel cheap"): no glow anywhere, and the
   round buttons take Grind's light chip — --surface-chip ground, ink glyph, --surface-press on touch — instead of the black disc */
[data-theme="light"] .day__head, [data-theme="light"] .day__gutter time, [data-theme="light"] .chip--bot { text-shadow: none; }
[data-theme="light"] .icon-btn--round { background: var(--surface-chip); color: var(--ink); }
[data-theme="light"] .icon-btn--round:hover, [data-theme="light"] .icon-btn--round:active { background: var(--surface-press); color: var(--ink); box-shadow: none; }
[data-theme="light"] .icon-btn--round.icon-btn--lit[aria-pressed="true"] { background: var(--ink-on-accent); color: var(--accent); box-shadow: none; }

/* line height: one token for every preset (his order 27-out, "line height is too big now"): --lh-caption, 1.45 */
.day__lines .line { line-height: var(--lh-caption); }



/* the slot: the empty top line of today, tall enough to tap, the block cursor waiting in it until the page has focus */
.line--slot { min-height: var(--space-12); }
.line--slot::before { content: ""; display: inline-block; vertical-align: text-bottom; width: .6em; height: 1.25em;
  background: var(--pg-grape, var(--ink)); animation: caret-blink 1.06s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .line--slot::before { animation: none; } }
/* today's page starts below the top glass's fade, so the slot and its cursor are never dimmed by it */
.day--today .day__page { padding-top: calc(var(--space-12) + var(--space-2)); } /* just clears the button row (27-out: less room before the cursor) */ /* below the row and the glass fade */
/* entries never touch: one small step between lines (spacing scale) */
.day__lines .line + .line { margin-top: var(--space-2); }
/* on a phone the browser keeps :hover stuck after a tap, so the touched button kept a grey ring; touch screens get no hover */
@media (hover: none) {
  .rail .icon-btn--round:hover { background: var(--c-ink-0); color: var(--c-white); box-shadow: none; }
  [data-theme="light"] .rail .icon-btn--round:hover { background: var(--surface-chip); color: var(--ink); }
}

/* BOOT — Glow slices (his DesignLab piece, lab/glow-slices.astro), the plate look carried over verbatim; local until it is in
   Dandelion. Full black cover while the feed loads, fades out. */
/* the boot loader's rules live inline in index.html <head> since 27-out: here they waited for the 100 kB design system to arrive */

/* the greeting: one quiet line in the empty slot, beside the cursor — gone with the first letter */
.line--slot { position: relative; z-index: 3; } /* above the top glass, so the cursor and the hello are never dimmed by the fade */
.line--slot::after { content: attr(data-greet); position: absolute; left: calc(.6em + var(--space-2)); top: 0; color: var(--ink-tertiary); pointer-events: none; white-space: nowrap; }


/* one cursor in the empty slot, focused or not: the slot draws it, so a tap never moves it (27-out) */

/* THE SHEEP — the light/dark switch, top right (his order 27-out). The drawing is DesignLab's, verbatim (sheep.js); the rules
   below the button are DesignLab's sheep CSS copied as is (":global()" unwrapped). Only the button and its hop live here.
   Size: 37 px (his order 27-out: "add 5 more px" to the 32 px it had). */
.sheep { all: unset; position: fixed; z-index: 4; box-sizing: border-box; width: var(--space-10); height: var(--space-10);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  top: calc(var(--sa-top) + var(--space-1) + 4px); right: max(var(--space-4), calc(50vw - 320px + var(--space-4))); }
.sheep__slot { display: inline-flex; width: 37px; height: 37px; }
.sheep__slot svg { width: 100%; height: 100%; overflow: visible; }
.sheep.is-swap .sheep__slot { animation: sheep-swap .52s cubic-bezier(.3,1.5,.5,1); }
.sheep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
@keyframes sheep-swap { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-5px) scale(1.06, .94) rotateY(90deg); }
  60% { transform: translateY(-2px) scale(.98, 1.03) rotateY(0); } 100% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sheep.is-swap .sheep__slot { animation: none; } }
/* ---- DesignLab sheep CSS, verbatim ---- */
 .sh-head{fill:var(--sh-head,#111);stroke:var(--sh-head,#111)}
 .sh-eye{fill:var(--sh-eye,#fff);stroke:var(--sh-eye,#fff);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 calc(var(--sh-glow,3px) * .4) var(--sh-eye,#fff)) drop-shadow(0 0 var(--sh-glow,3px) color-mix(in srgb,var(--sh-eye,#fff) 70%,transparent))}
 .sh-svg rect.sh-head{stroke:none}
 .sh-bar-glow{filter:drop-shadow(0 0 calc(var(--sh-glow,3px) * .4) color-mix(in srgb,var(--sh-eye,#fff) 60%,transparent))}   /* the line glows like the eyes; the grain lives on the line itself (svg filter), the glow on its group */
 .sh-svg rect.sh-eye{stroke:none}   /* a stroke on the eye rect added a whole unit of width: the eyes read fat next to the reference */
 html[data-motion="on"] .sh-svg[data-mood="work"] .sh-eyes{animation:sh-look 3.6s ease-in-out infinite}
 html[data-motion="on"] .sh-svg[data-mood="work"] .sh-eye,html[data-motion="on"] .sh-svg[data-mood="wait"] .sh-eye{animation:sh-blink 4.2s ease-in-out infinite}
 html[data-motion="on"] .sh-svg[data-mood="stuck"]{animation:sh-shake 2.4s ease-in-out infinite}
 html[data-motion="on"] .sh-svg[data-mood="done"]{animation:sh-hop 2.2s cubic-bezier(.3,1.6,.5,1) infinite}
 @keyframes sh-look{0%,40%,100%{transform:translateX(0)}50%,70%{transform:translateX(1.2px)}80%,90%{transform:translateX(-1px)}}
 @keyframes sh-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
 @keyframes sh-shake{0%,80%,100%{transform:translateX(0)}84%{transform:translateX(-1px)}88%{transform:translateX(1px)}92%{transform:translateX(-1px)}}
 @keyframes sh-hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-1.5px)}}
 @media(prefers-reduced-motion:reduce){.sh-svg,.sh-eyes,.sh-eye{animation:none!important}}
 .sh-bar-glow{transform-box:fill-box;transform-origin:center}
 html[data-motion="on"] .sh-bar-glow{animation:sh-breathe var(--sh-bar-dur,3.6s) cubic-bezier(.45,0,.55,1) infinite}
 @keyframes sh-breathe{0%,100%{transform:scaleX(calc(1 - var(--sh-bar-amp,.6) * .14));opacity:calc(1 - var(--sh-bar-amp,.6) * .25)}50%{transform:scaleX(1);opacity:1}}
 @media(prefers-reduced-motion:reduce){.sh-bar-glow{animation:none!important}}

/* ---- the app's motion, over DesignLab's (his order 27-out: "seamless organic subtle") ----
   DesignLab's look/blink/shake snap; here everything is one slow sine: the sheep floats and breathes, the eyes drift and
   blink softly, the line under her breathes with the float. Periods are coprime so the loop never reads as a loop. */
html[data-motion="on"] .sheep .sh-svg { animation: pg-float 7s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 50% 80%; }
html[data-motion="on"] .sheep .sh-svg .sh-eyes { animation: pg-drift 11s cubic-bezier(.45,0,.55,1) infinite; }
html[data-motion="on"] .sheep .sh-svg .sh-eye { animation: pg-blink 9s cubic-bezier(.45,0,.55,1) infinite; }
html[data-motion="on"] .sheep .sh-bar-glow { animation: pg-shadow 7s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pg-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.6px) scale(1.015, .99); } }
@keyframes pg-drift { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(.5px); } 65% { transform: translateX(-.4px); } }
@keyframes pg-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@keyframes pg-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.94); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .sheep .sh-svg, .sheep .sh-eyes, .sheep .sh-eye, .sheep .sh-bar-glow { animation: none !important; } }
/* the line under her takes the wool colour: DesignLab draws it in the eye colour on its dark band, which here is white on
   the light page and black on the dark one — invisible either way */
.sheep #sh-bar stop { stop-color: var(--sh-head) !important; }
.sheep .sh-bar-glow { filter: none; }

/* AGENT CHIPS IN THE TEXT (his order 27-out): a name said in the line becomes its chip, in the agent's own tone. It arrives
   softly — rises and settles — once; chips already on the page don't move */
.entry__tag--said { margin: 0 1px; }
.entry__tag--new { animation: pg-chip-in .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pg-chip-in { 0% { opacity: 0; transform: translateY(3px) scale(.82); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .entry__tag--new { animation: none; } }

/* AGENT CHIPS, ALIVE (his order 27-out: "dá pra ele ficar animado? … as cores que a gente tinha … lime … o gradiente … lime,
   blue, white"). Tones and timings are DesignLab's: the lime ramp (--mc-lime-4..7) and the gloss blue #A9C8FF of Mission
   Control, the gloss chip's 5.2 s look-and-blink, the paper white. The ground is a slow lime → blue → white drift under the
   agent's tone; each chip starts at its own point so a line of chips never moves in step. Never asks for attention. */
.entry__tag .chip--bot[aria-pressed="true"] {
  background: linear-gradient(110deg, color-mix(in srgb, #c8ec7a 22%, transparent), color-mix(in srgb, #A9C8FF 20%, transparent) 50%, color-mix(in srgb, #f4f2ec 16%, transparent)) 0 0 / 220% 100%,
    color-mix(in srgb, var(--bot-fg) 10%, transparent);
  animation: pg-chip-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate; animation-delay: var(--chip-delay, 0s); }
@keyframes pg-chip-drift { from { background-position: 0 0, 0 0; } to { background-position: 100% 0, 0 0; } }
@keyframes pg-chip-blink { 0%, 90%, 100% { scale: 1 1; } 94% { scale: 1 .12; } }
@keyframes pg-chip-look { 0%, 35%, 100% { transform: translate(0, 0); } 45%, 60% { transform: translate(.8px, 0); } 70%, 85% { transform: translate(-.6px, .2px); } }
[data-theme="light"] .entry__tag .chip--bot[aria-pressed="true"] { color: color-mix(in srgb, var(--bot-fg) 40%, #0b0b0b); }
@media (prefers-reduced-motion: reduce) { .entry__tag .chip--bot, .entry__tag .bot-eye, .entry__tag .chip__face svg { animation: none !important; } }

/* PORTRAIT ONLY (his order 27-out): a phone turned sideways shows the loader — the lime slices floating — and nothing else */
@media (orientation: landscape) and (max-height: 540px) {
  body > *:not(.backdrop) { visibility: hidden !important; }   /* portrait only: sideways shows just the ground (the loader left 28-out) */
}

/* THE TIMES (his order 27-out): a rounded dark pill — Mission Control's button ground (--c-chip-dark with the faint top
   light of its pills) — holding the time in seven segments: lit segments lime with a glow, the unlit ones a ghost. The
   newest time of today breathes; the rest stay still. */
.day__page { grid-template-columns: 64px 1fr; }
.clock { position: absolute; left: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--c-chip-dark); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 1px 2px rgb(0 0 0 / .4); }
.clock svg { display: block; height: 12px; width: auto; overflow: visible; }
.clock__on { fill: var(--pg-lime); filter: drop-shadow(0 0 1.2px color-mix(in srgb, var(--pg-lime) 80%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--pg-lime) 45%, transparent)); }
.clock__off { fill: color-mix(in srgb, var(--pg-lime) 7%, transparent); }
.day:not(.day--today) .clock__on { fill: color-mix(in srgb, var(--pg-lime) 62%, #6f6b62); filter: none; }  /* past days: lit, but quiet */
.day--today .day__gutter .clock:first-child .clock__colon { animation: pg-colon 2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pg-colon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
[data-theme="light"] .clock { background: var(--c-chip-light); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
[data-theme="light"] .clock__on { fill: #5f8f2c; filter: none; }
[data-theme="light"] .clock__off { fill: color-mix(in srgb, #5f8f2c 9%, transparent); }
[data-theme="light"] .day:not(.day--today) .clock__on { fill: #6f6b62; }
@media (prefers-reduced-motion: reduce) { .clock__colon { animation: none !important; } }

/* APP MARKS (his order 27-out): a program said by name gets its own round mark — the brand's icon on its own disc — inside a
   pill of the same matter as the agent chips (height, ring, the slow lime/blue/white drift); the ring takes the brand tone */
.chip--app { --app: var(--ink); height: 32px; padding: 0 12px 0 5px; gap: 6px; border-radius: 999px; cursor: default;
  font-weight: var(--weight-medium); color: var(--ink);
  background: linear-gradient(110deg, color-mix(in srgb, #c8ec7a 14%, transparent), color-mix(in srgb, #A9C8FF 14%, transparent) 50%, color-mix(in srgb, #f4f2ec 12%, transparent)) 0 0 / 220% 100%,
    color-mix(in srgb, var(--app) 10%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app) 50%, #000);
  animation: pg-chip-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate; animation-delay: var(--chip-delay, 0s); }
.chip__app { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 6px color-mix(in srgb, var(--app) 40%, transparent); }
.chip__app svg { width: calc(22px * var(--k, .6)); height: calc(22px * var(--k, .6)); display: block; }
[data-theme="light"] .chip--app { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app) 55%, #fff); }
[data-theme="light"] .chip__app { box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
@media (prefers-reduced-motion: reduce) { .chip--app { animation: none; } }

/* 27-out, round 3 (his order: "a shape da ovelha dentro do rounded… não usa mais o robozinho… os olhinhos mexendo, a mesma
   animação… uma cor por agente"): the chip's face is the sheep — DesignLab's drawing and its own look-and-blink — in the
   agent's tone, dark eyes, no line under it */
.chip__face--sheep { --sh-head: var(--bot-fg); --sh-eye: #0b0b0b; --sh-glow: 0px; }
.chip__face--sheep .sh-bar-glow { display: none; }
.chip__face--sheep svg { transform: scale(1.12); }
/* program marks: the circle alone, the name beside it as plain text */
.entry__tag--app { display: inline; margin: 0; vertical-align: baseline; }   /* the name sits on the line like any word */
/* centred on the line (his order 28-out): 1.4em tall, its middle on the middle of the lowercase; ringed like the agent pills,
   in the brand's tone */
.entry__tag--app .chip__app { display: inline-grid; width: 1.4em; height: 1.4em; vertical-align: middle; position: relative; top: -.08em; margin-right: .3em;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app) 55%, #000), 0 0 6px color-mix(in srgb, var(--app) 35%, transparent); }
.entry__tag--app .chip__app svg { width: calc(1.4em * var(--k, .6)); height: calc(1.4em * var(--k, .6)); }
.entry__name { font: inherit; color: inherit; }

[data-theme="light"] .entry__tag--app .chip__app { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app) 55%, #fff); }

/* TWEAKS (his order 28-out: "add tweaks to edit pills and btns"): every pill and button size reads a variable; the
   defaults are today's values, the house Dock (tweaks.js, local only) moves them live */
.entry__tag .chip--bot { height: var(--pg-chip-h, 32px); padding-right: var(--pg-chip-pad, 8px); font-size: var(--pg-chip-text, 1em); --bot-ring: var(--pg-chip-ring, 2px); }
.entry__tag .chip--bot[aria-pressed="true"] .chip__bot { width: calc(var(--pg-chip-face, 22px) + 6px); }
.entry__tag .chip__face { width: var(--pg-chip-face, 22px); height: var(--pg-chip-face, 22px); }
.entry__tag--app .chip__app { width: var(--pg-app-size, 1.4em); height: var(--pg-app-size, 1.4em); margin-right: var(--pg-app-gap, .3em);
  box-shadow: inset 0 0 0 var(--pg-app-ring, 2px) color-mix(in srgb, var(--app) 55%, #000), 0 0 var(--pg-app-glow, 6px) color-mix(in srgb, var(--app) 35%, transparent); }
.entry__tag--app .chip__app svg { width: calc(var(--pg-app-size, 1.4em) * var(--k, .6)); height: calc(var(--pg-app-size, 1.4em) * var(--k, .6)); }
.clock { height: var(--pg-clock-h, 26px); padding: 0 var(--pg-clock-pad, 10px); }
.clock svg { height: var(--pg-clock-digit, 12px); }
.clock__on { filter: drop-shadow(0 0 calc(var(--pg-clock-glow, 3px) * .4) color-mix(in srgb, var(--pg-lime) 80%, transparent)) drop-shadow(0 0 var(--pg-clock-glow, 3px) color-mix(in srgb, var(--pg-lime) 45%, transparent)); }
.rail { gap: var(--pg-btn-gap, var(--space-2)); }
.rail .icon-btn--round { width: var(--pg-btn, var(--space-8)); height: var(--pg-btn, var(--space-8)); }
.rail .icon-btn--round :where(svg) { width: var(--pg-btn-glyph, 18px); height: var(--pg-btn-glyph, 18px); }
@media (max-width: 719px) { .rail .icon-btn--round { width: var(--pg-btn, var(--space-10)); height: var(--pg-btn, var(--space-10)); } }
.sheep__slot { width: var(--pg-sheep, 37px); height: var(--pg-sheep, 37px); }
/* the time pill is flat (his order 28-out: "remove the border or glass effect"): ground colour only, no top light, no shadow */
.clock, [data-theme="light"] .clock { box-shadow: none; }
/* the iPhone's inset, or the Spotter's (28-out, his order: "reproduce exactly how it is at web app view at my phone"):
   inside the Spotter's frame env(safe-area-inset-*) is 0, so the Spotter posts its own and the page keeps clear of the
   status bar the same way — DesignLab's --sat/--sab, the same contract */
:root { --sa-top: max(env(safe-area-inset-top, 0px), var(--sat, 0px)); --sa-bot: max(env(safe-area-inset-bottom, 0px), var(--sab, 0px)); }

/* SELECTION (his order 28-out: the grey on black was invisible): the cursor's grape, see-through, in both themes */
[data-skin="playground"] ::selection { background: color-mix(in srgb, var(--pg-grape) 45%, transparent); color: var(--ink); }
[data-skin="playground"][data-theme="light"] ::selection { background: color-mix(in srgb, var(--pg-grape) 30%, transparent); color: var(--ink); }
.caret { z-index: 5; }   /* above the top glass and the slot, so a tap near the top still shows it */

/* ONE CURSOR (28-out root fix): the native cursor, grape, everywhere — it is also what tints the selection on iOS.
   The slot keeps its hello; its drawn blinking block is gone (it read as a second cursor). */
[data-skin="playground"] .day__lines { caret-color: var(--pg-grape); }
.line--slot::before { display: none; }
.line--slot::after { left: 0; }
.caret { display: none !important; }

/* PASTED IMAGES (28-out): the image is the line — full column width, the house card radius, nothing around it */
.line--img { margin: var(--space-2) 0; }
.entry__img { display: block; max-width: 100%; max-height: 70vh; height: auto; border-radius: var(--radius-lg); user-select: none; -webkit-user-drag: none; }

/* PERFORMANCE (28-out, "tá carregando extremamente pesado"): on the phone every filter re-rasterises while something
   inside it moves. The chip sheep blink without a filter, the chips' ground stays still (the gradient stays), and the
   clock's colon lives outside the glowing group */
.chip__face--sheep .sh-eye, .chip__face--sheep .sh-bar-glow { filter: none !important; }
.entry__tag .chip--bot[aria-pressed="true"], .chip--app { animation: none !important; }
.clock__colon { filter: none; }

/* PERFORMANCE, round 2 (28-out): the grain stops lying OVER the page. Blended over everything at the top, the phone had
   to re-blend the whole screen on every blink, caret and scroll; behind the content it is painted once */
.backdrop { z-index: -1; }

/* AGENT CHIP, WHITE AND CLEAN (his order 28-out: "remove glow. bring me white clean version"): DesignLab's status-pill
   paper — a white pill, ink text, no ring, no glow, no gradient. The agent keeps its colour in its sheep. */
[data-skin="playground"] .entry__tag .chip--bot[aria-pressed="true"] {
  background: #ffffff !important; color: #0b0b0b !important; box-shadow: none !important; text-shadow: none !important; }
.entry__tag .chip__face--sheep { --sh-eye: #0b0b0b; }
/* 30 px of clear page between the end of the top fade and the first written line (his order 29-out). The fade ends 112 px
   below the title band's top edge (band 48 past the title + ramp 64); the first line under the empty top line started at 104,
   inside the fade. Measured in the iPhone simulator: 26 px makes the gap exactly 30. */
.day--today .line--slot { margin-bottom: 26px; }