/* ============================================================================
 * homecards.css — the recipe deck on the front door (js/homecards.js).
 *
 * EVERY class here is prefixed `hc-`. Nothing in this file styles an existing
 * app class, so it cannot reach any other screen, and js/homecards.js is the
 * only thing that renders these names.
 *
 * THE SIZES ARE THE DESIGN, so they are stated once here rather than in JS:
 *   · a card is 86% of the rail on a phone, so the NEXT card always shows —
 *     ~38px of it at 375px, ~30px at 320px. A carousel that looks like a single
 *     panel is one nobody swipes.
 *   · two cards from 680px, three from 1000px, and a peek at every width. There
 *     is no reason to hide cards on a screen that can show them.
 *   · every control is a real button, and mobile.css's 44px floor applies to all
 *     of them. The phone's pager dots are deliberately NOT buttons — nine dots
 *     18px apart cannot have honest 44px targets, so they indicate and the two
 *     arrows beside them control.
 *
 * Scrolling, snapping and momentum are the browser's (scroll-snap), not a
 * script's: it costs nothing per frame on a cheap Android and it can never fight
 * the page's own vertical scroll, because the compositor locks the axis.
 * ==========================================================================*/

.hc { margin: 0 2px 22px; }

.hc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.hc-h { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.25; }

/* ---- the line above the deck: the three states --------------------------- */

/* A brand-new school. The biggest thing on the screen, because it is the best
   chance the product gets to explain itself. */
.hc-start {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 14px; padding: 14px 15px; margin: 0 0 12px;
}
.hc-start-tx { flex: 1 1 240px; min-width: 0; }
.hc-start-t { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.hc-start-s { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.hc-start-b { flex: 0 0 auto; }

/* Half set up, and fully set up. One quiet line either way. */
.hc-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
}
.hc-next-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.hc-unused { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- the rail ------------------------------------------------------------ */

.hc-rail {
  position: relative;                 /* card.offsetLeft is read against this */
  display: flex; align-items: stretch; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;     /* a horizontal overscroll is not "go back" */
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 10px;
}
/* Dragged with a mouse: the pointer says so, and text must not select under it. */
.hc-rail.hc-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hc-rail.hc-dragging .hc-card { cursor: grabbing; }
}

/* A slim scrollbar is an affordance on desktop — it says "there is more" to
   somebody who will never swipe. The phone hides it; the finger is the scrollbar. */
.hc-rail::-webkit-scrollbar { height: 8px; }
.hc-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.hc-rail::-webkit-scrollbar-track { background: transparent; }
.hc-m .hc-rail { scrollbar-width: none; }
.hc-m .hc-rail::-webkit-scrollbar { display: none; }

/* ---- one card ------------------------------------------------------------ */

/* HALF A PAGE, NOT A THIRD OF ONE. 340px was three cramped columns on a laptop
   and the trees had to squeeze; the owner asked for one full or half page with
   room to breathe. A card is now up to 560px \u2014 two on a wide screen, one and a
   peek on a narrow one, and the peek is what tells a reader to swipe. */
/* ONE CARD, ONE PAGE. 560px was still narrow enough that five or seven children
   wrapped onto two and three rows \u2014 and a wrapped row is what pushed the trunk
   line down THROUGH the nodes below it, which looked broken because it was. At
   full width the children fit on one line and the diagram is a diagram again.
   The pager underneath (\u2039 \u203a and the dots) is what says there is more; a sliver
   of the next card would only reintroduce the crowding this fixes. */
.hc-card {
  flex: 0 0 100%; max-width: none; padding: 20px 22px;
  justify-content: flex-start;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; outline: none;
}
.hc-card:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.hc-card-wait { background: var(--panel); border-style: dashed; }

.hc-c-title {
  font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 2px;
  line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}

/* ==========================================================================
 * THE TREE
 *
 * Two rows and the space between them. Inputs on top, outputs underneath, the
 * lines drawn into an <svg> that fills the whole box and sits behind both rows.
 *
 * The svg is absolutely positioned and z-index 0 so the rows keep their normal
 * flow \2014 the layout decides where the nodes go, and the drawing follows the
 * layout, never the other way round. That ordering is what lets a node wrap to a
 * second line on a narrow phone without the diagram falling apart: the branches
 * are measured after the wrap has happened.
 *
 * min-height on the gap between the rows is the one magic number here. It is the
 * room the fan needs to look like a fan rather than a squeeze, and it is set in
 * ch units so it scales with the reader's own font size.
 * ======================================================================== */
/* The tree sits at the TOP of the card and does not stretch to fill it. flex:1
   made every card as tall as the tallest — nine cards deep, that is a column of
   empty white under a small diagram, and the deck looked broken rather than
   sparse. The rail gives all cards one height; the tree just does not have to
   use it. */
.hc-tree { position: relative; display: flex; flex-direction: column; gap: 54px; padding: 10px 2px 2px; align-self: flex-start; width: 100%; }
.hc-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hc-wire { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-wire-trunk { stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); stroke-width: 2; }
@keyframes hcDraw { to { stroke-dashoffset: 0; } }

/* ONE LINE. nowrap is the whole point of the wider card: seven children across
   one row read as one set, where the same seven over three rows read as a grid
   with a line drawn on it. */
.hc-row { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: 14px; }
/* A PHONE CANNOT HAVE ONE ROW OF SEVEN, so it wraps there and only there. The
   line-drawing code groups nodes by the row they actually landed on, so a wrapped
   row still gets its own fan off the trunk \u2014 that was fixed in 1.0.143 and is
   what makes this media query safe rather than a regression in miniature. */
@media (max-width: 760px) {
  .hc-row { flex-wrap: wrap; gap: 12px 10px; }
}
.hc-row-out { gap: 10px; }

/* ---- one node ------------------------------------------------------------
 * Inputs and outputs share a shape deliberately: what distinguishes them is the
 * row and the direction of the line, not two visual languages. The input row is
 * filled (it is a thing the school HAS) and the output row is outlined (it is a
 * thing the school can GO to), which is the smallest difference that still reads
 * at a glance.
 *
 * 44px minimum on both axes because every node is a tap target on a phone, and
 * a diagram you cannot reliably tap is a picture of an app rather than an app.
 * ------------------------------------------------------------------------ */
.hc-n {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-width: 112px; min-height: 88px; padding: 12px 14px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2);
  font: inherit; color: var(--ink); text-align: center; cursor: default;
  position: relative;
  animation: hcPop .32s cubic-bezier(.2,.9,.3,1.3) backwards;
}
button.hc-n { cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
button.hc-n:hover { transform: translateY(-2px); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); }
button.hc-n:active { transform: translateY(0); }
.hc-n:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.hc-n-ic { font-size: 27px; line-height: 1; }
.hc-n-l { font-size: 13.5px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

/* The input row carries the weight: these are the things without which the row
   below is empty. */
.hc-n-in { background: color-mix(in srgb, var(--brand) 9%, var(--panel-2)); border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); }
.hc-n-out { background: var(--panel); }

/* Dimmed = not there yet. It is never disabled: an output still opens its own
   page, which says for itself what it needs, and a missing input is a button
   that goes and gets it. Dimming says "not yet", it does not lock a door. */
.hc-n-dim { opacity: .55; border-style: dashed; }
button.hc-n-dim:hover { opacity: 1; }

/* The tick, and the plus that invites the tap. Corner-mounted so the label keeps
   the middle of the node and every node stays the same size whether or not it
   carries a mark. */
.hc-n-mk {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; line-height: 1;
  border: 2px solid var(--panel);
}
.hc-n-mk-on { background: var(--good); color: #fff; }
.hc-n-mk-off { background: var(--line-strong); color: var(--panel); }

@keyframes hcPop { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
/* Stagger, so the tree assembles top-down instead of appearing all at once. */
.hc-row-in .hc-n:nth-child(1) { animation-delay: .02s; }
.hc-row-in .hc-n:nth-child(2) { animation-delay: .07s; }
.hc-row-in .hc-n:nth-child(3) { animation-delay: .12s; }
.hc-row-out .hc-n:nth-child(1) { animation-delay: .30s; }
.hc-row-out .hc-n:nth-child(2) { animation-delay: .36s; }
.hc-row-out .hc-n:nth-child(3) { animation-delay: .42s; }
.hc-row-out .hc-n:nth-child(4) { animation-delay: .48s; }
.hc-row-out .hc-n:nth-child(5) { animation-delay: .54s; }

/* Stillness when it is asked for. The lines are drawn instantly instead of
   walking out (js side checks the same query), and nothing pops. */
@media (prefers-reduced-motion: reduce) {
  .hc-n { animation: none; }
  button.hc-n:hover { transform: none; }
}

/* ---- the pager ----------------------------------------------------------- */

.hc-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 0; }
.hc-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hc-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.hc-arrow:disabled { opacity: .35; cursor: default; }
.hc-arrow:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.hc-m .hc-arrow { width: 44px; height: 44px; }

.hc-dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; min-width: 0; }
.hc-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--line-strong); border: none; padding: 0;
}
button.hc-dot { cursor: pointer; }
.hc-dot.on { background: var(--brand); transform: scale(1.35); }
button.hc-dot { position: relative; }
button.hc-dot::after { content: ''; position: absolute; inset: -6px; }
button.hc-dot:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.hc-count { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- "or go straight to" — the old thirteen doors, still one tap ---------- */

.hc-all-lbl { margin: 16px 0 8px; }
.hc-all { display: flex; flex-wrap: wrap; gap: 7px; }
.hc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; min-height: 40px;
}
/* THE KIT'S 16px IS FOR A PAGE ACTION, NOT FOR THIRTEEN SHORTCUTS.
   mobile.css puts `font-size: 16px` on every <button> — the right floor for a
   control you press once, and the wrong one here: at 16px a chip is wider than
   half a 375px rail, so the strip came out as ELEVEN near-full-width rows
   (measured), 554px tall, which pushed every one of the thirteen destinations
   the tiles used to offer ~300px further down the page than they were. Two
   classes beat one class + one element, so this wins without !important — and
   it touches the LABEL only. The 44px hit area the kit gives these is untouched
   and is still what a thumb lands on. */
.hc-m .hc-chip { font-size: 14px; }
.hc-chip:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.hc-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.hc-chip-ic { flex: 0 0 auto; font-size: 15px; display: inline-flex; align-items: center; }
.hc-chip-ic svg, .hc-chip-ic .lu { width: 17px; height: 17px; }
.hc-chip-l { white-space: nowrap; }

/* ---- widths: a peek at every size ---------------------------------------- */

/* THESE TWO USED TO SET THE CARD WIDTH AND THEY WON, SILENTLY.
   The base rule was changed to one card per screen; these came later in the file
   and put it back to 46% and then 30%, so a laptop still showed three narrow
   cards and the children still wrapped. The base rule is now the only thing that
   sizes a card, and the wide breakpoint keeps only what it was really for \u2014 a
   slightly larger heading. */
@media (min-width: 1000px) {
  .hc-h { font-size: 17px; }
}
/* 320px is the narrowest phone still in service in Mizoram. The card gives back
   a little width so the peek survives, and the padding tightens so the content
   does not. */
@media (max-width: 340px) {
  .hc-card { padding: 12px; }   /* width comes from the base rule; only the padding tightens */
  .hc-chip { padding: 8px 11px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-rail { scroll-behavior: auto; }
  .hc-out { transition: none; }
  .hc-dot.on { transform: none; outline: 2px solid var(--brand); outline-offset: 2px; }
}


/* ---- the one-liner under each tree --------------------------------------- */
.hc-desc {
  margin: 18px 4px 2px; text-align: center;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  max-width: 46ch; margin-left: auto; margin-right: auto;
}