/* Kolam: dot grids (pulli) with looping lines, drawn by js/kolam.js. In this edition they are fine brass monolines:
   quiet, thin, never louder than the words. Tokens: --k-line (the line), --k-dot (the dots).
   Everything here is decorative and ignores the pointer unless it is the pad. */
:root {
  --k-line: var(--brass);
  --k-dot: var(--brass);
  --k-c0: #1d2647; --k-c1: #a8255f; --k-c2: #0b6b5f; --k-c3: #9a6a12;
}
@media (prefers-color-scheme: dark) {
  :root { --k-c0: #eee8d9; --k-c1: #f292bd; --k-c2: #5fcab6; --k-c3: #f0bd62; }
}

.kolam { display: block; overflow: visible; pointer-events: none; }
.k-ring, .k-flourish, .k-sweep { max-width: none; }
.kolam .k-line, .kolam .k-powder { fill: none; stroke: var(--k-line); stroke-linecap: round; stroke-linejoin: round; }
.kolam .k-powder { opacity: .08; }
.kolam .k-dot { fill: var(--k-dot); transform-box: fill-box; transform-origin: center; }
/* waiting to scroll into view: nothing drawn yet */
.k-wait .k-line, .k-wait .k-powder { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.02; }
.k-wait .k-dot { opacity: 0; }

/* the sticky bars stay solid so text over them reads cleanly */
.topbar, .jump-bar { background-color: var(--bg); }

/* ---------- heading fleuron: a small block-print buti before section headings ---------- */
.blk-h::before, .pad h2::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.06em;
  background-color: var(--brass);
  -webkit-mask: var(--orn-buti) center / contain no-repeat;
  mask: var(--orn-buti) center / contain no-repeat;
}
.call-block > .blk-h::before { display: none; }

/* ---------- card corners: a block-print corner sits under the text, bottom right ---------- */
:is(.card, .day, .phone-group, .soon-card, .blk-details) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23c9a868' stroke-width='.8'%3E%3Cpath d='M4 34.5H27M34.5 4V27' stroke-linecap='round'/%3E%3Cpath d='M34.5 29.2C36.1 30.8 36.1 32 34.5 33 32.9 32 32.9 30.8 34.5 29.2ZM34.5 39C36.1 37.4 36.1 36.2 34.5 35.2 32.9 36.2 32.9 37.4 34.5 39ZM29.6 34.1C31.2 32.5 32.4 32.5 33.4 34.1 32.4 35.7 31.2 35.7 29.6 34.1ZM39.4 34.1C37.8 35.7 36.6 35.7 35.6 34.1 36.6 32.5 37.8 32.5 39.4 34.1Z'/%3E%3Cg fill='%23c9a868' stroke='none'%3E%3Ccircle cx='20' cy='34.5' r='.9'/%3E%3Ccircle cx='34.5' cy='20' r='.9'/%3E%3Ccircle cx='12' cy='34.5' r='.6'/%3E%3Ccircle cx='34.5' cy='12' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 44px 44px;
  background-position: right 6px bottom 6px;
}
@media (prefers-color-scheme: dark) {
  :is(.card, .day, .phone-group, .soon-card, .blk-details) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%237d6a45' stroke-width='.8'%3E%3Cpath d='M4 34.5H27M34.5 4V27' stroke-linecap='round'/%3E%3Cpath d='M34.5 29.2C36.1 30.8 36.1 32 34.5 33 32.9 32 32.9 30.8 34.5 29.2ZM34.5 39C36.1 37.4 36.1 36.2 34.5 35.2 32.9 36.2 32.9 37.4 34.5 39ZM29.6 34.1C31.2 32.5 32.4 32.5 33.4 34.1 32.4 35.7 31.2 35.7 29.6 34.1ZM39.4 34.1C37.8 35.7 36.6 35.7 35.6 34.1 36.6 32.5 37.8 32.5 39.4 34.1Z'/%3E%3Cg fill='%237d6a45' stroke='none'%3E%3Ccircle cx='20' cy='34.5' r='.9'/%3E%3Ccircle cx='34.5' cy='20' r='.9'/%3E%3Ccircle cx='12' cy='34.5' r='.6'/%3E%3Ccircle cx='34.5' cy='12' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  }
}
/* folded stays and open summaries: the corner belongs to the open body only */
.stay-fold:not([open]), .blk-details:not([open]) { background-image: none; }

/* ---------- page header medallion: a kolam in a jharokha arch ---------- */
.page-icon.has-kolam {
  position: relative; width: 64px; height: 76px; padding: 13px 5px 5px; cursor: pointer; overflow: visible;
  background: var(--surface); border: 1px solid var(--brass); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px color-mix(in srgb, var(--brass) 45%, transparent);
}
@media (max-width: 520px) { .page-icon.has-kolam { width: 54px; height: 64px; padding: 11px 4px 4px; } .page-icon-badge { width: 28px; height: 28px; right: -8px; bottom: -8px; } }
.page-icon.has-kolam .k-medal { width: 100%; height: 100%; --k-line: var(--a); --k-dot: var(--brass); }
.page-icon.has-kolam .k-medal .k-line { stroke-width: .9; }
.page-icon-badge {
  position: absolute; right: -10px; bottom: -10px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--a-soft); color: var(--a); border: 1px solid var(--brass); box-shadow: 0 0 0 3px var(--bg);
}
.page-head { position: relative; }

/* ---------- home hero: the seconds dot on the boarding-pass countdown ---------- */
.cd-pulse {
  display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px;
  background: var(--marigold); box-shadow: 0 0 0 1px var(--edge);
}

/* ---------- band dividers ---------- */
.k-divider { margin: var(--s5) auto 0; max-width: 560px; min-height: 12px; opacity: .8; }
.k-divider .k-band { width: 100%; height: auto; --k-line: var(--brass); --k-dot: var(--brass); }
.k-divider .k-band .k-line { stroke-width: .5; }
.k-divider .k-band .k-dot { r: .8px; }
.foot .k-divider { margin: 6px 0 14px; max-width: 560px; }
.foot .k-band { --k-line: var(--brass); }
.has-kolam .foot { border-top: 0; }

/* ---------- empty and "coming soon" states ---------- */
.k-empty { display: grid; place-items: center; margin: 4px auto 10px; cursor: pointer; }
.k-empty .k-art { width: min(200px, 60vw); height: auto; --k-line: var(--brass); --k-dot: var(--a); }
.k-empty-sm .k-art { width: min(140px, 44vw); }
.k-empty .k-line { stroke-width: .6; }
.k-empty-text { text-align: center; }

/* ---------- tiles: a hairline traces the outline on hover and keyboard focus ---------- */
.index-card, a.stat { position: relative; }
.k-trace { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; pointer-events: none; }
.k-trace rect {
  fill: none; stroke: var(--brass); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: 1 1.1; stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 1.1s cubic-bezier(.45, .05, .3, 1);
}
.index-card:hover .k-trace rect, .index-card:focus-visible .k-trace rect,
a.stat:hover .k-trace rect, a.stat:focus-visible .k-trace rect { stroke-dashoffset: 0; }
.stat.is-warn .k-trace rect { stroke: var(--warn); }

/* ---------- page change sweep ---------- */
.k-sweep {
  position: fixed; z-index: 31; left: 0; top: calc(var(--topbar-h, 62px) - 10px); width: 100%; height: 20px;
  opacity: 0; --k-line: var(--brass); --k-dot: var(--brass);
}

/* ---------- checklist tick flourish ---------- */
.k-flourish { position: fixed; z-index: 45; --k-line: var(--a); --k-dot: var(--brass); }

/* ---------- floating Contacts button ring (round button on phones only) ---------- */
.contacts-fab { overflow: visible; }
.k-ring { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; --k-line: var(--brass); --k-dot: var(--brass); }
@media (min-width: 720px) { .k-ring { display: none; } }
.sheet-open .k-ring { display: none; }

/* ---------- "Draw a kolam" pad ---------- */
.pad {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin: 24px 0 8px; padding: 18px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
@media (min-width: 760px) {
  .pad { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "copy board" "controls board"; align-items: start; padding: 24px 26px; }
  .pad-copy { grid-area: copy; } .pad-board { grid-area: board; align-self: center; } .pad-controls { grid-area: controls; }
}
.pad h2 { margin: 0 0 .3em; font-size: 1.5rem; }
.pad-kicker { margin: 0; font: italic 500 1.15rem var(--font-display); color: var(--a); }
.pad-help { color: var(--muted); font-size: 1rem; }
.pad-status { min-height: 2.6em; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--gold-soft); border: 0; font-size: .92rem; line-height: 1.45; }
.pad-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.pad-sizes { display: flex; gap: 6px; }
.pad-board {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1 / 1;
  background: var(--bg); border: 1px solid var(--brass); border-radius: 18px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pad-board .pad-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad-art .k-c0 { stroke: var(--k-c0); } .pad-art .k-c1 { stroke: var(--k-c1); } .pad-art .k-c2 { stroke: var(--k-c2); } .pad-art .k-c3 { stroke: var(--k-c3); }
.pad-art .k-line { stroke-width: .6; }
.pad-art .is-one .k-line { stroke: var(--ink); }
.pad-gaps { position: absolute; inset: 0; }
.pad-gap {
  position: absolute; width: calc(100% * 1.4142 / (2 * var(--pad-n, 5) + 2)); aspect-ratio: 1 / 1; padding: 0; margin: 0;
  transform: translate(-50%, -50%) rotate(45deg); border: 0; border-radius: 6px; background: transparent; cursor: pointer;
}
.pad-gap:hover { background: color-mix(in srgb, var(--a) 12%, transparent); }
.pad-gap[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 1px;
  background: var(--a); opacity: .55;
}
.pad-gap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; background: color-mix(in srgb, var(--a) 16%, transparent); }

/* ---------- pad tabs: Draw | Learn ---------- */
.pad [hidden] { display: none !important; }
.pad-tabs {
  display: inline-flex; gap: 2px; margin: 4px 0 0; padding: 3px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--brass);
}
.pad-tab {
  min-height: 38px; min-width: 84px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 .95rem var(--font-body); letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease;
}
.pad-tab:hover { color: var(--ink); }
.pad-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.pad-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pad-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 760px) {
  .pad-panel { display: contents; }
  .learn-stage { grid-area: board; align-self: start; position: sticky; top: calc(var(--topbar-h, 62px) + 16px); }
  .learn-controls { grid-area: controls; }
}

/* ---------- Draw: practising a Learn pattern ---------- */
.pad-practice { margin: 0 0 10px; }
.pad-practice-title { margin: 0 0 8px; font-size: .92rem; color: var(--muted); }
.pad-status.is-match { background: var(--ok-bg); color: var(--ok); }
.pad-art .k-ghost path { fill: none; stroke: var(--brass); stroke-linecap: round; stroke-linejoin: round; opacity: .32; }

/* ---------- Learn: pattern cards ---------- */
.learn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) and (max-width: 759px) { .learn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.learn-card {
  position: relative; display: grid; justify-items: start; gap: 2px; width: 100%; height: 100%; padding: 10px 12px 12px; text-align: left;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.learn-card:hover { border-color: var(--edge); background: var(--a-soft); }
.learn-card:active { transform: translateY(1px); }
.learn-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.learn-card.is-last { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.learn-card.is-last::after {
  content: "Last"; position: absolute; top: 8px; right: 10px; font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold);
}
.learn-thumb { width: 64px; height: 64px; margin: 0 0 4px; --k-line: var(--ink); --k-dot: var(--brass); }
.learn-thumb .k-line { stroke-width: 1.2; }
.learn-thumb .k-second { stroke: var(--k-c1); }
.learn-card-name { font: 600 1rem/1.2 var(--font-display); }
.learn-card-meta { font-size: .8rem; color: var(--muted); }
.learn-card-level { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .75rem; color: var(--muted); }
.learn-level { display: inline-flex; gap: 3px; }
.learn-pip { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--brass); }
.learn-pip.is-on { background: var(--brass); }

/* ---------- Learn: the player ---------- */
.learn-panel.is-list .learn-stage { display: none; }
@media (min-width: 760px) { .learn-panel.is-list .learn-stage { display: block; opacity: .55; } }
.learn-stage { cursor: pointer; }
.learn-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.learn-stage .learn-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.learn-art .learn-faint path { fill: none; stroke: var(--brass); stroke-linecap: round; opacity: .16; }
.learn-art .learn-seg { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.learn-art .learn-seg.is-second { stroke: var(--k-c1); }
.learn-art .learn-hint { fill: none; stroke: var(--a); stroke-linecap: round; stroke-dasharray: .9 1.3; opacity: .8; }
.learn-art .k-dot { fill: var(--brass); transform-box: fill-box; transform-origin: center; }
.learn-art .k-dots.is-waiting .k-dot { opacity: 0; }
.learn-pen-tip { fill: var(--a); }
.learn-pen-halo { fill: var(--a); opacity: .2; }
.learn-pen.is-hidden { display: none; }
.learn-ring { fill: none; stroke: var(--a); stroke-width: .7; stroke-dasharray: 1.2 1; opacity: 0; transition: opacity .3s ease; transform-box: fill-box; transform-origin: center; }
.learn-ring.is-second { stroke: var(--k-c1); }
.learn-ring.is-active { opacity: 1; animation: learn-ring 1.6s ease-in-out infinite; }
@keyframes learn-ring { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .learn-ring.is-active { animation: none; } }

.learn-back {
  display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 6px; padding: 0 2px; border: 0; background: none;
  color: var(--a); font: 600 .92rem var(--font-body); cursor: pointer;
}
.learn-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.learn-head { margin: 0 0 6px; }
.learn-title { margin: 0; font: 600 1.35rem/1.15 var(--font-display); }
.learn-sub { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.learn-tip { margin: 0 0 10px; font: italic 400 1rem/1.4 var(--font-display); color: var(--ink); }
.learn-say { min-height: 2.9em; margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--gold-soft); font-size: .92rem; line-height: 1.45; }
.learn-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.learn-count { flex: none; min-width: 7.5em; font-size: .82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.learn-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.learn-bar-fill { display: block; height: 100%; background: var(--brass); transform-origin: left center; transform: scaleX(0); }
.learn-transport { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin: 0 0 10px; }
.learn-transport .btn { padding: 0 10px; }
.learn-tempo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.learn-tempos { display: flex; gap: 6px; }
.learn-slider-wrap { display: flex; align-items: center; gap: 8px; flex: 1 1 150px; min-width: 0; font-size: .82rem; color: var(--muted); }
.learn-slider { flex: 1; min-width: 0; accent-color: var(--a); height: 28px; }
.learn-tempo-val { min-width: 3.2em; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.learn-actions { margin-bottom: 0; }
.learn-try { background: var(--ink); color: var(--bg); }