/* =============================================================================
 * CAT MODE ,  app-wide, and it IS the cat aesthetic.
 * ===========================================================================
 * Keyed on [data-catmode] on <html>, which js/cat-mode.js sets from the same
 * event that Theme.apply() fires when the cat aesthetic is selected. There is no
 * separate switch: pick the cat theme and this comes with it, pick anything else
 * and it all goes away in one move.
 *
 *   1. TYPE   The UI face becomes Baloo 2, the display face Fredoka. Rounded and
 *             soft is what "cat" means typographically. The reading face and the
 *             mono face are deliberately untouched ,  a document you are studying
 *             should not get harder to read because you changed the toolbar's
 *             mood, and a study app that decorates its own body text has lost
 *             the plot.
 *
 *   2. ICONS  Roughly fifty of the most-seen controls are repainted as a paw or
 *             a cat's head. They are applied with `mask` rather than by swapping
 *             markup, so they stay in currentColor and recolour with whichever of
 *             the six aesthetics is active. A pasted-in colour emoji would sit in
 *             a toolbar of monochrome SVGs like a sticker and would go the wrong
 *             colour the moment the palette changed.
 *
 *             Silhouettes, not outlines: a 1.5px stroke is a smudge at 15px.
 *
 *             What is NOT mapped matters as much as what is. Close, delete,
 *             undo, chevrons, arrows, search and the media transport keep their
 *             own icons ,  a cat where a "close" should be is a bug, however
 *             charming.
 * =========================================================================== */

html[data-catmode]{
  /* A paw, drawn as one connected silhouette rather than four loose beans.

     The earlier version floated three toe ellipses clear of the pad so it would
     read at 80px. At the size these actually render ,  15px in a toolbar ,  those
     gaps are a third of a pixel, the four shapes merged into a brown rectangle,
     and every taskbar button came out as a plain square. The toes are now fat
     enough to overlap the pad and to read as three bumps, which is the whole
     silhouette at small sizes. Filled rather than outlined for the same reason:
     a stroke this size is a smudge. */
  --cat-paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cellipse cx='6.7' cy='8' rx='2.6' ry='3.4'/%3E%3Cellipse cx='12' cy='6.6' rx='2.7' ry='3.6'/%3E%3Cellipse cx='17.3' cy='8' rx='2.6' ry='3.4'/%3E%3Cellipse cx='12' cy='16.4' rx='5.6' ry='4.6'/%3E%3C/svg%3E");
  /* A cat's head: two ears over a wide-cheeked face. */
  --cat-head:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 10.6 3.3 3.9l5.4 3.2zM19.4 10.6l1.3-6.7-5.4 3.2z'/%3E%3Cpath d='M4.2 10.4a7.8 6.9 0 0 1 15.6 0v2a7.8 6.9 0 0 1-15.6 0z'/%3E%3C/svg%3E");
  /* A fish, for voice and audio. */
  --cat-fish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12c-3 3.9-6.3 5.9-10 5.9S4 15.9 3 12s3-5.9 8-5.9 7 2 10 5.9z'/%3E%3Cpath d='M3 12 1 8.6v6.8z'/%3E%3C/svg%3E");
}

/* ---- 1. type ---------------------------------------------------------- */
html[data-catmode]{
  --sans:'Baloo 2','Nunito',sans-serif;
  --serif:'Fredoka','Baloo 2',sans-serif;
}
/* Stated on <body> as well as in the token.
   core-styles-01.css sets `html,body{font-family:var(--sans)}`, but the Tailwind
   Play CDN builds its own `body{font-family}` from the config object in
   index.html and injects it at the end of <body>, after every stylesheet link.
   Specificity alone should settle it ,  `html,body` outranks a bare `body` ,  but
   the CDN's sheet lands late enough that it won in practice, and the page kept
   Space Grotesk while the token said Baloo 2. Stating it here, scoped to the mode
   and loaded late, settles it in the same place as everything else in this file. */
html[data-catmode] body,
html[data-catmode] button,
html[data-catmode] input,
html[data-catmode] textarea,
html[data-catmode] select{
  font-family:var(--sans);
}
/* Numerals, code and documents keep their own faces. */
html[data-catmode] :is(code,kbd,pre,samp,.mono,[data-mono]){
  font-family:var(--mono);
}
/* Wordmark and tool-card headings get the display face, which is where a
   typeface actually reads as "the theme changed" rather than "a font loaded". */
html[data-catmode] :is(.tool-card h3,.brand,.hero-title,.tool-title,.vtitle){
  font-family:var(--serif);
  letter-spacing:-.01em;
}
html[data-catmode] .skin-name,
html[data-catmode] .pref-sec h4{
  font-family:var(--sans);
  font-weight:600;
}

/* ---- 2. icons ---------------------------------------------------------
   The cat shapes live in JS now, not here ,  see js/cat-mode.js.

   They were first done with mask + ackground-color, which is elegant on
   paper and terrible in practice: a mask paints the element's BACKGROUND, so if
   the data URI fails to parse the button is a solid square of currentColor
   with no icon in it. That is what every taskbar button looked like. Swapping
   the SVG's children for a drawn path has no failure mode ,  the icon is either
   there or the original is. */

/* ---- 3. the assistant -------------------------------------------------
   The assistant's own mark is NOT masked. The widget draws that cat itself, in
   currentColor, so it already themes correctly and already belongs to the icon
   set; masking it hid its own strokes and left the button blank. */

/* The voice, for completeness: the speaker label takes the display face so it
   is visibly the same creature as the mark in the header. */
html[data-catmode] .uchat-who{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.02em;
}

/* ---- the sidebar's mark -------------------------------------------------
   The study drawer is the one large panel in the app that opens with a bare
   title and nothing to identify it by, so in cat mode it gets a paw where a
   logo would sit ,  before the title, after the drag grip, in the accent.

   It is a `::before` on the existing <b> rather than a new element: the drawer
   is rebuilt in JS (js/study/270-settings.js) on every settings open, so
   anything injected into its markup has to be re-injected forever. A
   pseudo-element cannot rot that way.

   `mask-image` needs url() ,  a bare string is not a valid <mask-source> and is
   dropped silently, which is exactly how the taskbar paws ended up as plain
   squares. --cat-paw-mask is already wrapped. */
html[data-catmode] .lsk-drawer-head b::before{
  content:'';
  display:inline-block;
  vertical-align:-2px;
  width:15px;
  height:15px;
  margin-right:8px;
  background-color:var(--accent);
  -webkit-mask-image:var(--cat-paw-mask);
  mask-image:var(--cat-paw-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
/* The collapsed tab in the wall is the only part of the drawer visible when it
   is shut, so it gets the mark too ,  a paw you can see without opening it.

   Sized explicitly and centred with a translate rather than `inset`. The nub is
   a 30x74 grid cell, so `inset:4px` left a 22x66 box and `mask-size:contain`
   fitted a 22px paw against the TOP of it ,  the paw was not offset by accident,
   it was scaled into the wrong box.

   The grip line on `.lsk-drawer-nub::before` is suppressed here. It is a 2px
   accent bar down the leading edge, and leaving it under the paw meant the
   nub showed a stripe and a paw at once. The paw carries the meaning on its
   Only the grip line is suppressed here ,  there is deliberately NO position
   override. There used to be `position:relative` on this selector, added when
   the paw first landed to give `::after` something to anchor to, and it broke
   the tab: `html[data-catmode] .lsk-drawer-nub` outranks the plain
   `.lsk-drawer-nub` that sets `position:fixed`, so in cat mode the tab stopped
   being fixed and fell back into normal flow ,  putting it on the LEFT of the
   screen while every other theme put it on the right. Cat mode was the only
   theme with the sidebar in the wrong place.

   The override was never needed: `position:fixed` already establishes a
   containing block for an absolutely positioned child, which is all `::after`
   asked for. */
html[data-catmode] .lsk-drawer-nub::before{
  display:none;
}
html[data-catmode] .lsk-drawer-nub svg{
  opacity:0;
}
html[data-catmode] .lsk-drawer-nub::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  background-color:var(--accent);
  -webkit-mask-image:var(--cat-paw-mask);
  mask-image:var(--cat-paw-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}