/* A folder of apps, the way a phone shows them: rounded squares in colour, the name underneath. */
.folder { max-inline-size: 640px; margin: 0 auto; padding-block: 28px 40px; }
.folder-head { text-align: center; margin-block-end: 26px; }
.folder-back { display: inline-block; margin-block-end: 6px; color: var(--muted); text-decoration: none; font-size: .95rem; }
.folder-back:hover { color: var(--primary); }
.folder-head h1 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; }
.folder-head p { margin: 4px 0 0; color: var(--muted); font-size: 1.05rem; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 26px 14px; justify-items: center; }
@media (max-width: 420px) { .apps-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 8px; } }
.app { position: relative; display: grid; justify-items: center; gap: 9px; inline-size: 104px; text-decoration: none; color: var(--text); -webkit-tap-highlight-color: transparent; }
.app .ic { position: relative; inline-size: 76px; block-size: 76px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .38), transparent 55%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 10px 18px -8px color-mix(in srgb, var(--c2) 75%, transparent), inset 0 -3px 8px rgba(0, 0, 0, .12);
  transition: transform .3s var(--ease-river); }
.app .ic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-river);
  box-shadow: 0 16px 24px -10px color-mix(in srgb, var(--c2) 80%, transparent); }
.app:hover .ic::after { opacity: 1; }
.app .ic .icon { inline-size: 36px; block-size: 36px; stroke-width: 1.9; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.app .name { font-size: .98rem; font-weight: 500; text-align: center; line-height: 1.25; }
.app:hover .ic, .app:focus-visible .ic { transform: translateY(-3px) scale(1.04); }
.app:active .ic { transform: scale(.93); }
.app:focus-visible { outline: none; }
.app:focus-visible .ic { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--primary); }
.app .soon { position: absolute; inset-block-start: -6px; inset-inline-end: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 500;
  background: var(--card); color: var(--muted); border: 1px solid var(--line-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.app.later .ic { filter: saturate(.75); }
.apps-grid .app { animation: app-in .45s var(--ease-river) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes app-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .apps-grid .app { animation: none; } }

/* an app that is still to come */
.soon-page { max-inline-size: 460px; margin: 10vh auto 0; text-align: center; padding: 30px 24px; }
.soon-page .ic { margin: 0 auto 16px; inline-size: 96px; block-size: 96px; border-radius: 28px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .38), transparent 55%), linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 14px 24px -10px var(--c2); }
.soon-page .ic .icon { inline-size: 46px; block-size: 46px; stroke-width: 1.8; }
.soon-page h1 { margin: 0 0 6px; }
.soon-page p { color: var(--muted); margin: 0 0 18px; }

/* a folder whose apps are drawn tools (כלים): each a silhouette in a flat pastel fill with one even ink outline (the #tool-ink
   SVG filter from launcher.js), drawn in the text colour like the line icons of אוכל: dark by day, light at night */
.ink-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ink-defs .ink { flood-color: var(--icon-ink); }
.app .ic.art { background: none; box-shadow: none; border-radius: 0; overflow: visible; filter: url(#tool-ink); }
.app .ic.art .shape { display: block; inline-size: 100%; block-size: 100%; background: var(--tint);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  transform: rotate(-38deg) scale(1.32); transition: transform .35s var(--ease-river); }
.app:hover .ic.art, .app:focus-visible .ic.art { transform: translateY(-3px); }
.app:hover .ic.art .shape { transform: rotate(-28deg) scale(1.4); }
.app:focus-visible .ic.art { box-shadow: none; outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 18px; }

/* a folder of line icons with no tile (אוכל): the icon itself, large, its shapes filled with a pastel tint and drawn in ink */
.apps-grid.flat .app .ic { background: none; box-shadow: none; border-radius: 18px; color: var(--icon-ink); inline-size: 84px; block-size: 84px; }
.apps-grid.flat .app .ic .icon { inline-size: 72px; block-size: 72px; stroke-width: 1.5; filter: none;
  fill: var(--tint, color-mix(in srgb, var(--c1) 55%, #fff)); stroke-linejoin: round; stroke-linecap: round; transition: transform .35s var(--ease-river); }
.apps-grid.flat .app:hover .ic, .apps-grid.flat .app:focus-visible .ic { box-shadow: none; transform: translateY(-3px); }
.apps-grid.flat .app .ic::after, .app .ic.art::after { display: none; }   /* (no shadow under a flat icon or a drawn tool) */
.apps-grid.flat .app:hover .ic .icon { transform: rotate(-6deg) scale(1.06); }
.apps-grid.flat .app:focus-visible .ic { outline: 3px solid var(--primary); outline-offset: 4px; }

/* כלים: a rack of hand tools hanging over the title – each a silhouette from /assets/tool-icons in the colour of an app on the
   page, with a soft shadow on the wall behind it, from a thin wooden rail. Only on the tools folder (decoration, aria-hidden by nature) */
.folder:is(:has(> .apps-grid[aria-label="כלים"]), .tb) > .folder-head { position: relative; padding-block-start: 84px;
  --rack-img: url(/assets/tool-icons/hammer.webp), url(/assets/tool-icons/wrench.webp), url(/assets/tool-icons/pliers.webp), url(/assets/tool-icons/screwdriver.webp), url(/assets/tool-icons/combo-wrench.webp), url(/assets/tool-icons/pump-pliers.webp), url(/assets/tool-icons/ring-wrench.webp), linear-gradient(#000, #000);
  --rack-pos: -16px 6px, 18px 6px, 42.5px 6px, 72px 6px, 104px 6px, 124px 6px, 161px 6px, 0 0;
  --rack-size: 60px 60px, 48px 48px, 55px 55px, 52px 52px, 44px 44px, 60px 60px, 42px 42px, 100% 3px; }
.folder:is(:has(> .apps-grid[aria-label="כלים"]), .tb) > .folder-head::before,
.folder:is(:has(> .apps-grid[aria-label="כלים"]), .tb) > .folder-head::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  margin-inline: auto; inline-size: 196px; block-size: 66px; pointer-events: none;
  -webkit-mask-image: var(--rack-img); mask-image: var(--rack-img); -webkit-mask-position: var(--rack-pos); mask-position: var(--rack-pos);
  -webkit-mask-size: var(--rack-size); mask-size: var(--rack-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* the shadow: the same shapes, a little lower and to the side */
.folder:is(:has(> .apps-grid[aria-label="כלים"]), .tb) > .folder-head::before { background: color-mix(in srgb, var(--icon-ink) 34%, transparent); transform: translate(2px, 3px); }
/* the tools themselves; the rail in soil, over the colours */
.folder:is(:has(> .apps-grid[aria-label="כלים"]), .tb) > .folder-head::after {
  background: linear-gradient(var(--soil), var(--soil)) 0 0 / 100% 3px no-repeat, linear-gradient(to right, #ffc062 0px 28px, #8cc4f5 28px 56px, #ff9ab8 56px 84px, #ffd65c 84px 112px, #86d9a0 112px 140px, #b9a3ff 140px 168px, #ffb68a 168px 196px); }
/* The arrange mode (launcher.js): a long press, a right click or "סידור" – the tiles wiggle a little to say they can move,
   a finger drags them (the page does not scroll under it), and each has a pin for the home page's ring */
.apps-grid .app { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.folder-head .arrange-open { margin-block-start: 10px; } .folder-head .arrange-open[hidden] { display: none; }
.arrange-bar { position: sticky; inset-block-start: calc(var(--appbar-h) + 8px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-block-end: 18px; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--lift); font-size: .9rem; line-height: 1.5; }
.arrange-bar[hidden] { display: none; }
.apps-grid.arranging .app { touch-action: none; cursor: grab; animation: app-wiggle .9s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -137ms); }
.apps-grid.arranging .app:nth-child(even) { animation-direction: reverse; }
@keyframes app-wiggle { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.apps-grid .app.dragging { z-index: 10; cursor: grabbing; animation: none; }
.apps-grid .app.dragging .ic { box-shadow: 0 18px 30px -12px rgba(46, 42, 30, .45); }
.apps-grid.arranging .app:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; border-radius: 18px; }
/* the pin: faint when the tile is not on the ring, bright when it is */
.app-pin { position: absolute; inset-block-start: -8px; inset-inline-start: 0; z-index: 2; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: .95rem; line-height: 1; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
  filter: grayscale(1); opacity: .6; transition: opacity .2s, filter .2s, transform .2s var(--ease-river); touch-action: manipulation; }
.app-pin[aria-pressed="true"] { filter: none; opacity: 1; border-color: color-mix(in srgb, var(--olive) 70%, var(--line)); background: color-mix(in srgb, var(--olive) 22%, var(--card)); }
.app-pin:hover { opacity: 1; transform: scale(1.08); }
.app-pin:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .apps-grid.arranging .app { animation: none; } }
/* A folder's hero (H.folder({ hero })): the picture runs from edge to edge under the bar and fades into the page's own
   background, so it is part of the page and not a card on it; the title stands in the fade, in the page's ink, with a
   halo of the background behind its letters. It settles in with a slow, slight zoom (transform only). */
.folder.with-hero { max-inline-size: 860px; }
.folder-hero { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); isolation: isolate; overflow: hidden;
  margin-inline: calc(50% - 50vw); margin-block: 0 18px; block-size: clamp(270px, 44vw, 560px); }
.folder.with-hero:has(> .folder-hero:first-child) { padding-block-start: 0; }   /* the picture starts right under the bar */
.folder-hero img { grid-area: 1 / 1; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .18) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .18) 86%, transparent 100%);
  animation: hero-in 1.6s var(--ease-river) both; }
@keyframes hero-in { from { transform: scale(1.06); opacity: .6; } }
.folder-hero .folder-hero-cap { grid-area: 1 / 1; z-index: 2; align-self: end; justify-self: center; inline-size: min(100% - 32px, 860px);
  margin: 0; padding: 0 0 2px; text-align: start; display: grid; gap: 2px; color: var(--text);
  text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg), 0 0 2px var(--bg); }
.folder-hero .folder-hero-cap h1 { color: inherit; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem); }
.folder-hero .folder-hero-cap p { color: var(--muted); font-size: clamp(.98rem, .88rem + .4vw, 1.12rem); }
/* at night the daylit picture is dimmed a little, so it does not glare */
:root[data-theme="dark"] .folder-hero img { filter: brightness(.82) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .folder-hero img { filter: brightness(.82) saturate(.9); } }
@media (max-width: 600px) { .folder-hero { block-size: clamp(250px, 72vw, 340px); margin-block-end: 14px; } }
@media (prefers-reduced-motion: reduce) { .folder-hero img { animation: none; } }
/* H.strip: a slider of cards under a folder's head. The cards snap; the edges fade where there is more to see; arrows on a
   computer. A recipe or a place is a picture card; a note from the fridge is a small paper note. */
.strip { margin-block: 4px 26px; display: grid; gap: 10px; min-inline-size: 0; }
.strip[hidden] { display: none; }
.strip-head { display: flex; align-items: center; gap: 10px; }
.strip-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.strip-head .spacer { flex: 1; }
.strip-more { color: var(--primary); text-decoration: none; font-size: .92rem; }
.strip-more:hover { text-decoration: underline; }
.strip-arrows { display: none; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .strip-arrows { display: inline-flex; } }
.strip-arrow { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); font-family: inherit; font-size: 1.2rem; font-weight: 600; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: border-color var(--dur-quick), color var(--dur-quick), opacity var(--dur-quick); }
.strip-arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.strip-arrow:disabled { opacity: .35; cursor: default; }
.strip-arrow:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.strip-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 16px 12px; margin-inline: -16px; scroll-padding-inline: 16px; outline: none;
  --fade-s: 26px; --fade-e: 26px;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent); }
.strip-track::-webkit-scrollbar { display: none; }
.strip.at-start .strip-track { --fade-s: 0px; }
.strip.at-end .strip-track { --fade-e: 0px; }
.strip-card { flex: 0 0 auto; inline-size: 220px; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-align: start;
  border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font: inherit; padding: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(46, 42, 30, .06); transition: transform var(--dur-quick) var(--ease-river), border-color var(--dur-quick); }
.strip-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.strip-card:active { transform: scale(.98); }
.strip-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.strip-pic { display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--olive) 18%, var(--card)); overflow: hidden; }
.strip-pic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.strip-pic.emoji { display: grid; place-items: center; font-size: 3rem; }
.strip-body { display: grid; gap: 3px; align-content: start; padding: 10px 12px 12px; min-inline-size: 0; }
.strip-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--olive-ink); }
.strip-card.kind-recipe .strip-kicker { color: var(--primary); }
.strip-card.kind-place .strip-kicker { color: #9a4a2a; }
:root[data-theme="dark"] .strip-card.kind-place .strip-kicker { color: #f0a080; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strip-card.kind-place .strip-kicker { color: #f0a080; } }
.strip-title { font-weight: 600; font-size: .98rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strip-sub { color: var(--muted); font-size: .84rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a note from the fridge: no picture, a warm paper with a folded corner */
.strip-card.kind-fridge { inline-size: 200px; grid-template-rows: 1fr; align-self: start; border-color: color-mix(in srgb, var(--olive) 45%, var(--line));
  background: linear-gradient(225deg, color-mix(in srgb, var(--olive) 30%, var(--card)) 0 14px, transparent 14px), color-mix(in srgb, var(--olive) 12%, var(--card)); }
.strip-card.kind-fridge .strip-body { padding: 14px 14px 14px; gap: 5px; }
.strip-card.kind-fridge .strip-kicker { color: var(--text); font-size: .8rem; }
/* what is urgent: about to go off (amber), already gone off (the danger colour) */
.strip-card.tone-soon { border-color: color-mix(in srgb, #e0a83a 65%, var(--line)); }
.strip-card.tone-soon .strip-kicker { color: #8a5a0c; }
.strip-card.tone-gone { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.strip-card.tone-gone .strip-kicker { color: var(--danger); }
:root[data-theme="dark"] .strip-card.tone-soon .strip-kicker { color: #f0c47c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strip-card.tone-soon .strip-kicker { color: #f0c47c; } }
.strip-pic.emoji { color: var(--olive-ink); font-weight: 600; }
/* while the page fetches: quiet cards that breathe */
.strip-card.waiting { cursor: default; pointer-events: none; }
.strip-card.waiting .strip-pic { background: color-mix(in srgb, var(--text) 6%, var(--card)); }
.strip-card.waiting i { display: block; block-size: 10px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.strip-card.waiting i + i { inline-size: 60%; }
.strip-card.waiting { animation: strip-breathe 1.4s ease-in-out infinite alternate; }
@keyframes strip-breathe { to { opacity: .55; } }
@media (max-width: 600px) { .strip-card { inline-size: min(72vw, 240px); } .strip-card.kind-fridge { inline-size: min(60vw, 210px); } }
@media (prefers-reduced-motion: reduce) { .strip-card:hover { transform: none; } .strip-card.waiting { animation: none; } }

/* ---- The toolbox (כלים) shows every app, with a sort switch (the owner, 2026-11-14). The markup is ai-features', the contract
   is docs/design/toolbox.md. Every class here carries tb- so nothing reaches other folders. The folder itself gets .tb, which
   keeps the tool rack over the title when the grid sits inside the category sections. */

/* the sort switch: a three-way segmented control (ידני · לפי שם · לפי קטגוריה). The chosen one is a vine stone; on a change a pale
   trail of it slides from the old choice to the new (transform only). The JS only sets aria-checked; the trail follows by :has */
:is(.tb-sort, .tools-sort) { --s: -1; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); inline-size: min(100%, 380px);
  margin: 0 auto 26px; padding: 4px; border-radius: 999px; box-sizing: border-box;
  background: color-mix(in srgb, var(--text) 5%, var(--card)); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
:is(.tb-sort, .tools-sort):dir(ltr) { --s: 1; }
:is(.tb-sort, .tools-sort)::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc((100% - 8px) / 3);
  border-radius: 999px; background: color-mix(in srgb, var(--primary) 45%, transparent);
  transition: transform .34s var(--ease-river, ease), opacity .2s ease; }
:is(.tb-sort, .tools-sort):has(> :nth-child(2)[aria-checked="true"])::before { transform: translateX(calc(var(--s) * 100%)); }
:is(.tb-sort, .tools-sort):has(> :nth-child(3)[aria-checked="true"])::before { transform: translateX(calc(var(--s) * 200%)); }
:is(.tb-sort, .tools-sort):not(:has(> [aria-checked="true"]))::before { opacity: 0; }
:is(.tb-sort, .tools-sort) > button { position: relative; z-index: 1; min-block-size: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: .95rem; font-weight: 500; line-height: 1.2; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(.tb-sort, .tools-sort) > button:hover { color: var(--text); }
:is(.tb-sort, .tools-sort) > button[aria-checked="true"] { color: var(--primary-ink); font-weight: 600; cursor: default; background: var(--primary);
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--primary) 55%, transparent); }
:is(.tb-sort, .tools-sort) > button:active:not([aria-checked="true"]) { transform: scale(.96); }
:is(.tb-sort, .tools-sort) > button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
:is(.tb-sort, .tools-sort) > button[aria-checked="true"]:focus-visible { outline-color: var(--text); }
/* the arrange button means something only in ידני: the JS hides it in the other two (hidden), and the sort waits while arranging */
.folder:has(.apps-grid.arranging) :is(.tb-sort, .tools-sort) { opacity: .45; pointer-events: none; }

/* by category: one section per H.CATS entry, a quiet header (a vine leaf, the name, how many, a line fading away) over its grid */
.tb-cats { display: grid; gap: 36px; }
:is(.tb-cat, .tools-cat) { display: grid; gap: 18px; min-inline-size: 0; }
:is(.tb-cat-head, .tools-cat-h) { display: flex; align-items: center; gap: 10px; margin: 0; padding-inline: 4px;
  font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--text); }
:is(.tb-cat-head, .tools-cat-h)::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 0 50%; rotate: -45deg;
  background: var(--primary); }
:is(.tb-cat-head, .tools-cat-h)::after { content: ""; flex: 1; min-inline-size: 24px; block-size: 1px;
  background: linear-gradient(to left, var(--line-strong), transparent); }
:is(.tb-cat-head, .tools-cat-h):dir(ltr)::after { background: linear-gradient(to right, var(--line-strong), transparent); }
.tb-cat-count { flex: none; min-inline-size: 24px; padding: 0 7px; border-radius: 999px; box-sizing: border-box; text-align: center;
  font-size: .78rem; font-weight: 600; line-height: 1.6; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, var(--card)); }
:is(.tb-cat, .tools-cat) { animation: tb-cat-in .5s var(--ease-river, ease) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes tb-cat-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { :is(.tb-cat, .tools-cat), :is(.tb-sort, .tools-sort)::before { animation: none; transition: none; } }
:root[data-motion="reduce"] :is(.tb-cat, .tools-cat) { animation: none; }
:root[data-motion="reduce"] :is(.tb-sort, .tools-sort)::before { transition: none; }
/* tools.js (ai-features) shipped the switch as .tools-sort > button.chip and the sections as .tools-cat > h2.tools-cat-h + nav.apps-grid,
   with an inline style on .tools-sort as a stopgap. The !important beats that stopgap; ai-features drops it (decisions.md). */
.tools-sort { display: grid !important; gap: 0 !important; margin: 0 auto 26px !important; }
.tools-sort > button.chip, .tools-sort > button.chip:hover { border: 0; transition: color .2s ease; }
.tools-sort > button.chip:not([aria-checked="true"]):hover { background: none; color: var(--text); }
.tools-cat { margin-block-end: 36px; }

/* בעתיד: an idea for later (H.FUTURE and the 'soon:x' items) – drawn, not opened. A pale icon in a dashed ring, the name, and the
   "בעתיד" pill in the corner in the dusk blue of בקרוב (.tag-soon). A tap may show its line (the JS: H.toast(line)). */
button.app.tb-future { border: 0; background: none; padding: 0; font: inherit; cursor: default; }
.app.tb-future .ic { outline: 1.5px dashed color-mix(in srgb, var(--soon) 55%, transparent); outline-offset: 3px; }
.app.tb-future .ic > * { opacity: .5; }
.app.tb-future .name { color: var(--muted); }
.app > .tag-soon { position: absolute; inset-block-start: -6px; inset-inline-end: 0; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); pointer-events: none; }
.app.tb-future:hover .ic, .apps-grid.flat .app.tb-future:hover .ic { transform: none; }
.apps-grid.flat .app.tb-future:hover .ic .icon { transform: none; }
.app.tb-future:hover .ic::after { opacity: 0; }
.app.tb-future:focus-visible .ic { outline: 3px solid var(--primary); outline-offset: 4px; box-shadow: none; }
/* the future item's picture (vision batch 19): the batch 15 "soon" drawing, /assets/soon/<id>.svg (kitchen, breath, howto),
   in place of the line icon. A little quieter than a real tool, dimmed with the night like the side pages. */
.app.tb-future .ic.tb-pic { inline-size: 96px; block-size: 84px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--soon) 6%, var(--card)); box-shadow: none; }
.app.tb-future .ic.tb-pic > img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; transform: scale(1.18); opacity: .92; filter: saturate(.85); }
:root[data-theme="dark"] .app.tb-future .ic.tb-pic > img { filter: saturate(.85) brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app.tb-future .ic.tb-pic > img { filter: saturate(.85) brightness(.88); } }

/* The drawn app icons (the owner's sheet 38, 2026-11-14; docs/design/art/cut-tool-icons-38.py): for the tools that had a borrowed
   line icon, a colour picture in the flat look's own style (a pastel fill, a round ink outline), by the tile's address.
   /assets/app-icons/ also holds tools, hill and garage for when they get a tile. No JS: the line icon stays underneath, hidden. */
.apps-grid.flat .app[data-href="/family/"] { --pic: url(/assets/app-icons/family.webp); }
.apps-grid.flat .app[data-href="/settings/"] { --pic: url(/assets/app-icons/settings.webp); }
.apps-grid.flat .app[data-href="/news/"] { --pic: url(/assets/app-icons/news.webp); }
.apps-grid.flat .app[data-href="/songs/"] { --pic: url(/assets/app-icons/songs.webp); }
.apps-grid.flat .app[data-href="/messages/"] { --pic: url(/assets/app-icons/messages.webp); }
.apps-grid.flat .app[data-href="/mail/"] { --pic: url(/assets/app-icons/mail.webp); }
.apps-grid.flat .app[data-href="/food/diet/habits/"] { --pic: url(/assets/app-icons/habits.webp); }
.apps-grid.flat .app[data-href="/food/restaurants/"] { --pic: url(/assets/app-icons/restaurant.webp); }
.apps-grid.flat .app[data-href="/tools/parnasa/"] { --pic: url(/assets/app-icons/parnasa.webp); }
.apps-grid.flat .app[data-href="/pc/"] { --pic: url(/assets/app-icons/pc.webp); }
.apps-grid.flat .app[data-href="#soon-kitchen"] { --pic: url(/assets/app-icons/kitchen.webp); }
.apps-grid.flat .app[data-href="#soon-howto"] { --pic: url(/assets/app-icons/howto.webp); }
.apps-grid.flat .app[data-href="#soon-garden"] { --pic: url(/assets/app-icons/garden.webp); }
.apps-grid.flat .app[data-href="#soon-home"] { --pic: url(/assets/app-icons/home.webp); }
.apps-grid.flat .app[data-href="#soon-translate"] { --pic: url(/assets/app-icons/translate.webp); }
.apps-grid.flat .app[data-href="#soon-eye"] { --pic: url(/assets/app-icons/eye.webp); }
.apps-grid.flat .app[data-href="#soon-homework"] { --pic: url(/assets/app-icons/homework.webp); }
.apps-grid.flat .app[data-href="#soon-breath"] { --pic: url(/assets/app-icons/breath.webp); }
.apps-grid.flat .app:is([data-href="/family/"], [data-href="/settings/"], [data-href="/news/"], [data-href="/songs/"], [data-href="/messages/"], [data-href="/mail/"], [data-href="/food/diet/habits/"], [data-href="/food/restaurants/"], [data-href="/tools/parnasa/"], [data-href="/pc/"], [data-href="#soon-kitchen"], [data-href="#soon-howto"], [data-href="#soon-garden"], [data-href="#soon-home"], [data-href="#soon-translate"], [data-href="#soon-eye"], [data-href="#soon-homework"], [data-href="#soon-breath"]) .ic .icon { display: none; }
.apps-grid.flat .app .ic::before { content: ""; position: absolute; inset: 4px; background: var(--pic, none) center / contain no-repeat;
  transition: transform .35s var(--ease-river); }
.apps-grid.flat .app:hover .ic::before { transform: rotate(-6deg) scale(1.06); }
.apps-grid.flat .app.tb-future:hover .ic::before { transform: none; }
/* at night the pastels are dimmed a little, like the side pages' pictures */
:root[data-theme="dark"] .apps-grid.flat .app .ic::before { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .apps-grid.flat .app .ic::before { filter: brightness(.92); } }
@media (prefers-reduced-motion: reduce) { .apps-grid.flat .app .ic::before { transition: none; } }