/* The coins list's Tree (owner 2026-10-28, SPEC 5; Studio v0.1.45, the design's Coins · Tree; views/treeview.js): the
   collection beside the level from 1024 px (All coins, the top level's folders with small mosaics, the one on the path
   open), the path, the level's name and how it is split, then its folders (a mosaic in a soft square, the folder mark,
   a strong label, the count: two across on a phone) or its coins, the Grid's own cards (inventory.css .coin-grid). An
   unknown folder dashed, "Other ..." a small stack. */

.ctree { --chip-gap: 16px; }
/* the path: every level a link, the last one where you are; pinned under the bar, sideways on a narrow screen */
.ctree-path { position: sticky; top: var(--ctree-top, 0px); z-index: 1; margin: 0; padding: 2px 0; background: var(--bg);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ctree-path::-webkit-scrollbar { display: none; }
.ctree-path ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; white-space: nowrap; width: max-content; }
.ctree-path li { display: flex; align-items: center; }
.ctree-path .sep { color: var(--muted); padding: 0 2px; }
.ctree-path .sep svg { display: block; }
.ctree-path .crumb { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; color: var(--ink2);
  text-decoration: none; }
.ctree-path a.crumb:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ctree-path a.crumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ctree-path .crumb.here { color: var(--ink); }
.ctree .chip-n, .ctree .ct { font-variant-numeric: tabular-nums; color: var(--ink2); }
/* the top level's path says only what its name says: drawn from one level down */
.ctree[data-depth="0"] .ctree-path { display: none; }
/* the level's name, and how it is split beside it */
.ctree-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 14px; }
.ctree-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.ctree-sub { color: var(--ink2); font-size: 14px; }

/* the body: the collection beside the level (from 1024 px) */
.ctree-body { display: block; }
.ctree-main { min-width: 0; }
.ctree-side { display: none; }
@media (min-width: 1024px) {
  .ctree-body.has-side { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
  .ctree-side { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent); position: sticky; top: calc(var(--ctree-top, 0px) + 12px); }
  .ctree-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .ctree-side .side-rule { height: 1px; background: var(--rule); margin: 6px 4px; }
  .side-node { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
  .side-node:hover { background: var(--soft); }
  .side-node.on { background: var(--chip); }
  .side-node .lb { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-node .ct { font-size: 13px; }
  .side-node .folder, .side-node .chev { flex: none; color: var(--muted); }
  .side-node[aria-expanded="true"] .chev { transform: rotate(90deg); }
  .side-node.kid { padding: 5px 10px 5px 34px; gap: 10px; }
  .side-node.kid .lb { font-weight: 500; font-size: 13.5px; }
  .side-node.unknown .lb { color: var(--ink2); }
  /* the small mosaic of a top-level folder: 40 px, four coins */
  .side-node .smos { flex: none; width: 40px; height: 40px; }
  .side-node .smos .mosaic { gap: 1px; padding: 2px; border-radius: 7px; }
}

/* the folders: a mosaic in a soft square, the folder mark, a strong label and the count */
.ctree-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--chip-gap); }
.ctree-chips > li { min-width: 0; display: flex; }
.chip-tile { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; border-radius: 12px; background: var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease; }
.chip-tile:focus { outline: none; }
.chip-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .chip-tile:hover { background: color-mix(in srgb, var(--panel) 93%, var(--ink)); } }
/* unknown: the dashed outline says it without words */
.chip-tile.unknown { box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--muted) 75%, transparent); outline-offset: -1.5px; }
.chip-tile.unknown:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a folder's mosaic smaller than a coin's card: the folder reads as a container, the coins inside it as specimens */
.chip-tile .fmos { display: grid; place-items: center; padding: 14px; border-radius: 10px; background: var(--soft); }
.chip-tile .fmos .mosaic { width: min(100%, 132px); }
.chip-tile .chip-text { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.chip-tile .folder { flex: none; color: var(--muted); }
.chip-tile .chip-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip-tile .chip-n { margin-left: auto; font-size: 14px; }
.chip-tile.unknown .chip-label { color: var(--ink2); }

/* the mosaic: four coins, each round; "Other ..." a small stack of them */
.mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; aspect-ratio: 1; }
.chip-tile.other .fmos { box-shadow: 5px -5px 0 -1px var(--panel), 5px -5px 0 0 var(--rule), 10px -10px 0 -2px var(--panel), 10px -10px 0 -1px var(--rule);
  margin: 10px 10px 0 0; }
.side-node .mosaic { background: var(--soft); }
.side-node .cell-mark { display: none; }
/* the cell is the square; its picture is clipped to the circle (.cell-pic), so a mark in the cell's corner is never cut */
.mosaic .cell { position: relative; display: block; aspect-ratio: 1; min-width: 0; }
.mosaic .cell-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #000; }
.mosaic .cell-pic img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 50% 50%; }
.mosaic .cell.cell-none { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #9aa1ab 55%, transparent); }
.mosaic .cell.cell-phone .cell-pic img { object-fit: cover; }
.mosaic .cell.cell-empty { background: transparent; }
/* a chip of fewer than four coins: its coins centred, never one in a corner beside three empty places */
.mosaic.n-one .cell:first-child { grid-column: 1 / -1; grid-row: 1 / span 2; }
.mosaic.n-one .cell-empty, .mosaic.n-three .cell-empty { display: none; }
.mosaic.n-two .cell:nth-child(2) { grid-column: 2; grid-row: 2; }
.mosaic.n-three .cell:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 6px) / 2); }
.chip-tile.unknown .mosaic .cell.cell-none { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 60%, transparent); }
/* "Relief, no colour measured": the crossed droplet on a relief coin, never a tint; in the cell's corner, outside the
   circle (where the square's corner is free), on its own dark disc, whole however small the cell */
.mosaic .cell-mark { position: absolute; right: 0; bottom: 0; z-index: 1; width: 28%; max-width: 15px; min-width: 11px; aspect-ratio: 1; padding: 1.5px;
  border-radius: 50%; box-sizing: border-box; color: #e3e6ea; background: rgba(15, 17, 20, .86); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.mosaic .cell-mark svg { width: 100%; height: 100%; display: block; }

/* the leaf: the Grid's own tiles at the person's size, their columns filling the level (inventory.css .grid-box) */

@media (max-width: 640px) {
  .ctree { --chip-gap: 10px; }
  .ctree-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-tile { padding: 8px 8px 10px; gap: 8px; }
  .chip-tile .fmos { padding: 10px 8px; }
  .chip-tile .fmos .mosaic { width: min(100%, 100px); }
  .chip-tile .chip-label { font-size: 14px; }
  .ctree-head h2 { font-size: 20px; }
  .ctree-sub { font-size: 13px; }
}

/* the coins fly from a chip to the next level (View Transitions; treeview.js names them only when motion is allowed) */
::view-transition-group(*) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .chip-tile { transition: none; }
}