/* Knitting and crochet counter (row, stitch). Scoped to [data-craft]. */
[data-craft] .craft-proj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto; gap: 8px; align-items: center; }
[data-craft] .craft-sel { appearance: auto; min-height: 48px; }
[data-craft] .craft-name { background: var(--canvas); min-height: 48px; }
[data-craft] .craft-proj .pill { background: var(--canvas); }
[data-craft] .craft-proj .pill:hover { background: var(--pressed); }
@media (max-width: 560px) {
  [data-craft] .craft-proj { grid-template-columns: minmax(0, 1fr) auto auto; }
  [data-craft] .craft-name { grid-column: 1 / -1; grid-row: 2; }
}
[data-craft] .craft-info { display: flex; flex-wrap: wrap; gap: 8px; }
[data-craft] .craft-info:not(:has(:not([hidden]))) { display: none; }
[data-craft] .craft-tap { gap: 4px; text-align: center; }
[data-craft] .craft-lbl { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--body); }
[data-craft] .craft-sub { font-size: clamp(17px, 4.4vw, 24px); font-weight: 700; min-height: 1.3em; }
[data-craft] .craft-bar { height: 10px; border-radius: var(--pill); background: var(--canvas); overflow: hidden; }
[data-craft] .craft-bar span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: var(--pill); transition: width .15s; }
[data-craft] .craft-bar.is-done span { background: var(--signal); }

[data-craft] .craft-shape { display: flex; flex-direction: column; gap: 10px; }
[data-craft] .craft-shape-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
[data-craft] .craft-shape-row .pill { min-width: 84px; }
[data-craft] .craft-shape-text { text-align: center; font-size: 14px; color: var(--body); font-weight: 500; }
[data-craft] .craft-next { width: 100%; }

[data-craft] .craft-c2 { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(72px, auto) 56px auto; gap: 8px; align-items: center; }
[data-craft] .craft-c2 .pill.round { width: 56px; height: 56px; font-size: 26px; }
[data-craft] .craft-c2 .name { background: var(--soft); }
[data-craft] .craft-c2val { border: 0; background: var(--softer); border-radius: 10px; min-height: 56px; padding: 0 12px; cursor: pointer; color: var(--ink); }
[data-craft] .craft-c2val .big { font-size: 34px; }
[data-craft] .craft-c2val:active { background: var(--pressed); }
@media (max-width: 560px) {
  [data-craft] .craft-c2 { grid-template-columns: 56px minmax(0, 1fr) 56px auto; }
  [data-craft] .craft-c2 .name { grid-column: 1 / -1; }
}

[data-craft] .craft-hist { margin-top: 16px; }
[data-craft] .craft-h { font-size: 20px; margin: 0; }
[data-craft] .craft-hist p { margin: 8px 0; }
[data-craft] .craft-hist .scroll-x { max-height: 360px; overflow-y: auto; }
[data-craft] tr.craft-off td { background: var(--softer); }
[data-craft] .craft-notes { margin-top: 16px; }
[data-craft] .craft-ta { resize: vertical; min-height: 84px; font: inherit; margin-top: 6px; background: var(--soft); user-select: text; -webkit-user-select: text; }
[data-craft] .craft-notes .field { display: block; }

body.is-focus [data-craft] .craft-proj .pill, body.is-focus [data-craft] .craft-proj .craft-sel { display: none; }
body.is-focus [data-craft] .craft-proj { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { [data-craft] .craft-bar span { transition: none; } }
[data-craft] .craft-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
[data-craft] .craft-cap { margin: 0 0 8px; font-size: 14px; }