/* Knit Lab (آزمایشگاه بافت) — everything scoped to .araz-knit-lab. Tokens: spec §7.1. */
.araz-knit-lab {
  --akl-ink: #242424;
  --akl-steel: #5E6875;
  --akl-plate: #EDF0F4;
  --akl-rule: #D3D9E1;
  --akl-blue: #1C61E7;
  --akl-amber: #B46A00;
  --akl-red: #C62828;
  --akl-paper: #FFFFFF;
  --akl-ui: IRansansX, iranyekan, vazir, Tahoma, sans-serif;
  --akl-text: vazir, IRansansX, Tahoma, sans-serif;
  direction: rtl;
  max-width: 1400px;
  margin-inline: auto;
  padding-block: 8px 72px;
  color: var(--akl-ink);
  font-family: var(--akl-ui);
  font-size: 15px;
  line-height: 1.6;
  text-align: right;
}
.araz-knit-lab *, .araz-knit-lab *::before, .araz-knit-lab *::after { box-sizing: border-box; }
.araz-knit-lab button, .araz-knit-lab input, .araz-knit-lab select { font-family: var(--akl-ui); }
.araz-knit-lab :focus-visible { outline: 2px solid var(--akl-blue); outline-offset: 2px; }
.araz-knit-lab [hidden] { display: none !important; }
.araz-knit-lab .akl-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.araz-knit-lab .akl-loading, .araz-knit-lab .akl-noscript { padding-block: 48px; font-family: var(--akl-text); color: var(--akl-steel); }

/* Head */
.araz-knit-lab .akl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: end; margin-block-end: 28px; padding-block-end: 24px; border-block-end: 1px solid var(--akl-rule); }
.araz-knit-lab .akl-title { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.35; color: var(--akl-ink); }
.araz-knit-lab .akl-intro { margin: 0; max-width: 60ch; font-family: var(--akl-text); font-size: 15px; line-height: 1.9; color: var(--akl-steel); }
.araz-knit-lab .akl-structure { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--akl-steel); }
.araz-knit-lab .akl-structure select { min-width: 240px; min-height: 46px; padding: 8px 12px; font-size: 16px; font-weight: 500; color: var(--akl-ink); background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 6px; }

/* Body: machine plate at the start (right), fabric stage at the end (left) */
.araz-knit-lab .akl-body { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 32px; align-items: start; }
.araz-knit-lab .akl-plate { display: flex; flex-direction: column; background: var(--akl-plate); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--akl-rule); }
.araz-knit-lab .akl-plate > .akl-block { padding: 20px; }
.araz-knit-lab .akl-plate > .akl-block + .akl-block { border-block-start: 1px solid var(--akl-rule); }
.araz-knit-lab .akl-block-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--akl-ink); }
.araz-knit-lab .akl-hint { margin: 0 0 14px; font-family: var(--akl-text); font-size: 13px; line-height: 1.8; color: var(--akl-steel); }
.araz-knit-lab .akl-fineprint { margin: 10px 0 0; font-family: var(--akl-text); font-size: 12px; line-height: 1.8; color: var(--akl-steel); }

/* Buttons */
.araz-knit-lab .akl-btn { min-height: 40px; padding: 6px 14px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--akl-ink); background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 6px; cursor: pointer; }
.araz-knit-lab .akl-btn:hover:not(:disabled) { border-color: var(--akl-steel); }
.araz-knit-lab .akl-btn:disabled { opacity: 0.45; cursor: default; }
.araz-knit-lab .akl-btn--icon { min-width: 40px; padding: 0; font-size: 20px; line-height: 1; }
.araz-knit-lab .akl-seg { display: inline-flex; }
.araz-knit-lab .akl-seg > .akl-btn { border-radius: 0; }
.araz-knit-lab .akl-seg > .akl-btn:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.araz-knit-lab .akl-seg > .akl-btn:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.araz-knit-lab .akl-seg > .akl-btn + .akl-btn { margin-inline-start: -1px; }
.araz-knit-lab .akl-seg-btn[aria-pressed="true"] { position: relative; z-index: 1; color: #FFFFFF; background: var(--akl-blue); border-color: var(--akl-blue); }

/* Machine */
.araz-knit-lab .akl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-block-start: 16px; }
.araz-knit-lab .akl-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--akl-steel); }
.araz-knit-lab .akl-input { width: 100%; min-height: 44px; padding: 6px 12px; font-size: 16px; font-weight: 500; text-align: right; color: var(--akl-ink); background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 6px; }
.araz-knit-lab .akl-range { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.araz-knit-lab .akl-range input { flex: 1; accent-color: var(--akl-blue); }
.araz-knit-lab .akl-range output { min-width: 3ch; font-size: 16px; font-weight: 600; color: var(--akl-ink); }
.araz-knit-lab .akl-helper { margin-block-start: 14px; font-size: 13px; }
.araz-knit-lab .akl-helper summary { cursor: pointer; color: var(--akl-blue); }
.araz-knit-lab .akl-helper-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-block-start: 10px; }
.araz-knit-lab .akl-helper-row .akl-field { flex: 1 1 110px; }

/* Needle set-out: the blue tick sits at the height of the needle's butt track */
.araz-knit-lab .akl-setout-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.araz-knit-lab .akl-setout-row + .akl-setout-row { margin-block-start: 10px; }
.araz-knit-lab .akl-setout-label { min-width: 52px; font-size: 13px; font-weight: 600; color: var(--akl-steel); }
.araz-knit-lab .akl-pos { position: relative; width: 36px; height: 48px; padding: 0; font-size: 15px; font-weight: 700; color: var(--akl-ink); background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 6px; cursor: pointer; }
.araz-knit-lab .akl-pos::after { content: ""; position: absolute; inset-inline-start: -1px; bottom: var(--akl-butt, 7px); width: 8px; height: 3px; background: var(--akl-blue); border-radius: 2px; }
.araz-knit-lab .akl-pos[data-track="A"] { --akl-butt: 7px; }
.araz-knit-lab .akl-pos[data-track="B"] { --akl-butt: 17px; }
.araz-knit-lab .akl-pos[data-track="C"] { --akl-butt: 27px; }
.araz-knit-lab .akl-pos[data-track="D"] { --akl-butt: 37px; }
.araz-knit-lab .akl-pos[data-track=""] { color: var(--akl-steel); background: transparent; border-style: dashed; }
.araz-knit-lab .akl-pos[data-track=""]::after { display: none; }

/* Cam chart */
.araz-knit-lab .akl-scroll { overflow-x: auto; }
.araz-knit-lab .akl-cams { width: auto; margin: 0; border-collapse: separate; border-spacing: 4px; }
.araz-knit-lab .akl-cams th { padding: 0 2px 4px; font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; color: var(--akl-steel); background: none; border: 0; }
.araz-knit-lab .akl-cams td { padding: 0; text-align: center; vertical-align: middle; background: none; border: 0; }
.araz-knit-lab .akl-feeder-no { min-width: 28px; font-weight: 700; color: var(--akl-steel); }
.araz-knit-lab .akl-cell { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--akl-steel); background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 6px; cursor: pointer; }
.araz-knit-lab .akl-cell--K { color: var(--akl-blue); background: #EEF3FD; border-color: #B7CBF6; }
.araz-knit-lab .akl-cell--T { color: var(--akl-amber); background: #FBF3E6; border-color: #E6C99A; }
.araz-knit-lab .akl-cell--flag { box-shadow: 0 0 0 2px var(--akl-red); }
.araz-knit-lab .akl-glyph { width: 28px; height: 28px; }
.araz-knit-lab .akl-glyph-yarn { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.araz-knit-lab .akl-glyph-needle { fill: var(--akl-ink); }
.araz-knit-lab .akl-yarn-btn { width: 30px; height: 30px; padding: 0; background: var(--akl-yarn, #27375A); border: 2px solid var(--akl-paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--akl-rule); cursor: pointer; }
.araz-knit-lab .akl-yarn-picker { position: absolute; z-index: 20; display: flex; gap: 6px; padding: 8px; background: var(--akl-paper); border: 1px solid var(--akl-rule); border-radius: 8px; box-shadow: 0 6px 18px rgba(36, 36, 36, 0.14); }
.araz-knit-lab .akl-yarn-picker .akl-yarn-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--akl-blue); }
.araz-knit-lab .akl-cams td.akl-loops { padding-inline-start: 8px; color: var(--akl-blue); }
.araz-knit-lab .akl-notation { display: block; direction: ltr; }
.araz-knit-lab .akl-notation-yarn { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.araz-knit-lab .akl-notation-needle { fill: var(--akl-ink); }
.araz-knit-lab .akl-row-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }

/* Stage */
.araz-knit-lab .akl-stage { position: sticky; top: 24px; }
.araz-knit-lab .akl-swatch { overflow: hidden; line-height: 0; background: #151B26; border-radius: 6px; }
.araz-knit-lab .akl-canvas { display: block; max-width: 100%; }
.araz-knit-lab .akl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }
.araz-knit-lab .akl-toolbar-end { display: flex; gap: 8px; margin-inline-start: auto; }
.araz-knit-lab .akl-summary { margin: 10px 0 0; font-size: 13px; color: var(--akl-steel); }

/* Warning lamps */
.araz-knit-lab .akl-warnings { margin-block-start: 16px; padding-block-start: 12px; border-block-start: 1px solid var(--akl-rule); }
.araz-knit-lab .akl-lamps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.araz-knit-lab .akl-lamp-item { margin: 0; }
.araz-knit-lab .akl-lamp-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; padding: 6px 8px; font-family: var(--akl-text); font-size: 14px; line-height: 1.8; text-align: right; color: var(--akl-ink); background: transparent; border: 0; border-radius: 6px; }
.araz-knit-lab button.akl-lamp-row { cursor: pointer; }
.araz-knit-lab button.akl-lamp-row:hover, .araz-knit-lab button.akl-lamp-row[aria-pressed="true"] { background: var(--akl-plate); }
/* No .akl-lamp--ok rule: the "no problems" lamp deliberately shares this same base grey with an
   unlit lamp — off/grey is the correct, nothing-to-report state on a machine-panel metaphor. */
.araz-knit-lab .akl-lamp { width: 10px; height: 10px; margin-block-start: 8px; background: #9AA3AE; border-radius: 50%; }
.araz-knit-lab .akl-lamp--danger { background: var(--akl-red); box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18), 0 0 8px rgba(198, 40, 40, 0.55); }
/* #E59A1A, not --akl-amber (the tuck-cell tint) — a lit lamp needs to read as lit, not match the
   cam chart's tuck color, so it's deliberately brighter than that token. */
.araz-knit-lab .akl-lamp--caution { background: #E59A1A; box-shadow: 0 0 0 3px rgba(229, 154, 26, 0.2), 0 0 8px rgba(229, 154, 26, 0.5); }
.araz-knit-lab .akl-lamp--info { background: var(--akl-blue); }

/* Foot: notes + parts */
.araz-knit-lab .akl-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-block-start: 48px; padding-block-start: 28px; border-block-start: 1px solid var(--akl-rule); }
.araz-knit-lab .akl-notes, .araz-knit-lab .akl-parts { margin: 12px 0 0; padding: 0; list-style: none; }
.araz-knit-lab .akl-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin: 0; padding-block: 5px; font-family: var(--akl-text); line-height: 1.9; }
.araz-knit-lab .akl-note-dir { font-weight: 700; text-align: center; color: var(--akl-steel); }
.araz-knit-lab .akl-note-dir--up { color: var(--akl-blue); }
.araz-knit-lab .akl-note-dir--down { color: var(--akl-amber); }
.araz-knit-lab .akl-parts li { margin: 0; border-block-end: 1px solid var(--akl-rule); }
.araz-knit-lab .akl-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding-block: 12px; color: var(--akl-ink); text-decoration: none; }
.araz-knit-lab .akl-part-name { font-size: 16px; font-weight: 700; }
.araz-knit-lab .akl-part-sub { grid-column: 1; font-family: var(--akl-text); font-size: 13px; color: var(--akl-steel); }
.araz-knit-lab .akl-part-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; font-weight: 600; color: var(--akl-blue); }
.araz-knit-lab .akl-part:hover .akl-part-name { color: var(--akl-blue); }

/* Mobile jump-to-fabric button */
.araz-knit-lab .akl-jump { display: none; }

@media (max-width: 1023px) {
  .araz-knit-lab .akl-body { grid-template-columns: minmax(0, 1fr); }
  .araz-knit-lab .akl-stage { position: static; order: -1; }
  /* This corner of the viewport is owned by two of WoodMart's own fixed elements, both
     measured live at 375px and 768px: the sticky bottom toolbar (.wd-toolbar — لیست
     درخواست/علاقه‌مندی/مقایسه — 55px tall, z-index 350) and, whenever the theme's
     "sticky-toolbar-on" body class is present (it is, here), its scroll-to-top control
     (.scrollToTop, 40x40, lifted to bottom:67px by that class, also z-index 350). Our
     button sits above both (z-index 360) and clear of both — below the toolbar (base
     rule) and, when the toolbar is on, stepped inline past the scroll-to-top rather than
     stacked on top of it, so both stay tappable and ours stays in thumb reach. If the
     toolbar is ever switched off in Theme Settings, the base offsets alone keep the
     button correctly placed. */
  .araz-knit-lab .akl-jump.is-visible { position: fixed; z-index: 360; inset-block-end: 16px; inset-inline-end: 16px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-weight: 600; color: #FFFFFF; background: var(--akl-blue); border: 0; border-radius: 22px; box-shadow: 0 6px 18px rgba(28, 97, 231, 0.35); cursor: pointer; }
  /* WoodMart's own literals: .scrollToTop sits at inset-inline-end 12px and is 40px wide;
     leave a further 12px gap before our button starts. Level with it (bottom:67px) rather
     than stacked above the toolbar, since the two buttons no longer share a lane. */
  body.sticky-toolbar-on .araz-knit-lab .akl-jump.is-visible { inset-block-end: 67px; inset-inline-end: calc(12px + 40px + 12px); }
}

@media (max-width: 767px) {
  .araz-knit-lab .akl-head { grid-template-columns: minmax(0, 1fr); }
  .araz-knit-lab .akl-structure { grid-column: 1; grid-row: auto; }
  .araz-knit-lab .akl-structure select { width: 100%; min-width: 0; }
  .araz-knit-lab .akl-title { font-size: 26px; }
  .araz-knit-lab .akl-fields { grid-template-columns: minmax(0, 1fr); }
  .araz-knit-lab .akl-toolbar-end { width: 100%; margin-inline-start: 0; }
  .araz-knit-lab .akl-toolbar-end .akl-btn { flex: 1; }
  .araz-knit-lab .akl-foot { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}