/* Boncuk deseni aracı (/tools/bead-pattern-maker/). tools.css'in üstüne yüklenir. */
.bdtool { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); grid-template-areas: "chart opts"; grid-template-rows: auto; }
.bdtool .t-chart { grid-area: chart; } .bdtool .t-opts { grid-area: opts; }
.kw-btn.sm { padding: 8px 12px; font-size: 14px; min-height: 36px; }
.seg.sm span { padding: 8px 11px; font-size: 13.5px; }
.chk.sm { grid-template-columns: 18px auto; font-size: 14px; align-items: center; }
.chk.sm input { margin: 0; }

/* araç çubuğu */
.bdbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.bdbar-r { display: flex; gap: 6px; margin-left: auto; }
.bdbar-r .kw-btn { min-width: 40px; justify-content: center; }

/* grafik */
.bdbox { padding: 12px; max-height: min(78vh, 980px); overflow: auto; }
.bdbox canvas { display: block; margin: 0 auto; touch-action: manipulation; cursor: crosshair; } /* dokunmatikte sürükle = kaydır, dokun = boya */
.bdbox canvas[data-tool="pick"] { cursor: copy; }
.following .bdbox canvas { cursor: default; }
.bdtool .note#bd-stats { font: 500 12.5px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--c-ink-2); margin: 10px 0 0; }

.touchonly { display: none; }
@media (pointer: coarse) { .bdtool .touchonly { display: block; margin: 8px 0 0; font-size: 13.5px; color: var(--c-ink-2); } }

/* sekmeler */
.bdtabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 1.5px solid var(--c-line); }
.bdtabs button { font: 600 15px/1 var(--font-ui); padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; background: none; color: var(--c-ink-2); cursor: pointer; }
.bdtabs button[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.bdtabs button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.bdpane { padding: 14px 0 4px; }
.bdpane .note { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--c-ink-2); }
.bdpane .legend { display: block; margin-top: 6px; font: 500 12.5px/1.5 var(--font-mono); color: var(--c-ink); }

/* yazılı sıralar */
.sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(27, 33, 64, .35); vertical-align: -2px; margin: 0 4px 0 2px; }
.bdrows { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); }
.bdrows li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px; border-bottom: 1px solid var(--c-line); font: 500 13.5px/1.4 var(--font-mono); cursor: pointer; }
.bdrows li:last-child { border-bottom: 0; }
.bdrows li:hover { background: var(--c-surface-2); }
.bdrows li > b { min-width: 86px; font-weight: 700; }
.bdrows .dir { color: var(--c-accent); font-weight: 800; }
.bdrows em { font-style: normal; font-size: 12px; color: var(--c-ink-2); background: var(--c-surface-2); border-radius: 6px; padding: 2px 7px; }
.bdrows .run { white-space: nowrap; }
.bdrows .run b { font-weight: 700; }
.bdrows .turn { color: var(--c-accent); font-weight: 800; }
.bdrows li.more { cursor: default; color: var(--c-ink-2); }
.bdrows.static { max-height: none; }
.bdrows.static li { cursor: default; }

/* takip */
.follow { position: relative; }
.fhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.fhead b { font: 800 30px/1 var(--font-display); font-stretch: 108%; font-variation-settings: "wdth" 108; }
.fhead #bd-f-dir { font: 700 17px/1 var(--font-ui); color: var(--c-accent); }
.fhead #bd-f-count { font: 500 12.5px/1 var(--font-mono); color: var(--c-ink-2); margin-left: auto; }
.fruns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.frun { display: inline-flex; align-items: center; gap: 2px; padding: 8px 12px 8px 10px; border-radius: 12px; background: var(--c-surface); border: 1.5px solid var(--c-line); }
.frun > b { font: 800 26px/1 var(--font-display); min-width: 1.1em; text-align: right; margin-right: 4px; }
.frun .sw { width: 22px; height: 22px; border-radius: 6px; margin: 0 6px 0 2px; }
.frun span { font: 600 14px/1.2 var(--font-ui); }
.fstrip { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; }
.fstrip .sw { width: 12px; height: 15px; margin: 0; border-radius: 4px; }
.fhow { font-size: 15px; line-height: 1.5; color: var(--c-ink-2); margin: 0 0 12px; }
.fnav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.fnav .kw-btn { justify-content: center; }
.fnav .kw-btn[disabled] { opacity: .4; pointer-events: none; }
.fopts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 10px; }

/* malzeme */
.bdmat { width: 100%; border-collapse: collapse; font-size: 15px; }
.bdmat th, .bdmat td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--c-line); }
.bdmat th { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.bdmat .n { text-align: right; font-family: var(--font-mono); }
.bdmat tfoot td { font-weight: 700; border-bottom: 0; }
.bdmat td b { margin-right: 6px; }

/* renkler */
.bdpal { display: grid; gap: 8px; }
.bdpal .pc { display: grid; grid-template-columns: 40px 34px minmax(0, 1fr) minmax(0, .9fr) auto auto; gap: 6px; align-items: center; }
.bdpal .sel { width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--c-line); cursor: pointer; display: grid; place-items: center; }
.bdpal .sel b { font: 700 14px/1 var(--font-mono); }
.bdpal .pc.on .sel { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-canvas), 0 0 0 4px var(--c-ink); }
.bdpal input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--c-line); border-radius: 8px; background: none; cursor: pointer; }
.bdpal input[type="text"] { min-width: 0; width: 100%; box-sizing: border-box; font: 500 14px/1 var(--font-ui); padding: 9px 9px; border: 1.5px solid var(--c-line); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); }
.bdpal input.cd { font-family: var(--font-mono); font-size: 13px; }
.bdpal input[type="text"]:focus { border-color: var(--c-ink); outline: none; }
.bdpal .cnt { font: 500 12px/1 var(--font-mono); color: var(--c-ink-2); min-width: 3ch; text-align: right; }
.bdpal .rm { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--c-ink-2); font-size: 18px; cursor: pointer; }
.bdpal .rm:hover { background: var(--c-surface-2); color: var(--c-ink); }
.bdpal #bd-addc { justify-self: start; margin-top: 4px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.t-opts select.numin { font-family: var(--font-ui); font-size: 15px; }
.bdphoto { margin-top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bdphoto .filebtn { cursor: pointer; justify-self: start; }
.bdphoto:has(input:focus-visible) .filebtn { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.bdtool .h3x { margin: 26px 0 10px; font-size: 21px; }
.bdphoto .grp { margin: 0; font-weight: 600; color: var(--c-ink); }
#bd-fit b { color: var(--c-ink); }
.verdict .kw-btn { margin-left: auto; }
#bd-dropbox { margin-top: 12px; }
#bd-dropbox .grp { margin: 0 0 6px; }
.t-opts .note.err { color: oklch(0.5 0.17 27); font-weight: 600; }
.t-opts input#bd-text { font: 700 19px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }

/* renk listesi (katalog) */
.catbar { display: grid; gap: 6px; margin: 8px 0 12px; }
.catbar .note { margin: 0; font-size: 12.5px; }
.bdpal .cdw { display: flex; min-width: 0; gap: 4px; }
.bdpal .cdw input { flex: 1; }
.bdpal .find { flex: none; width: 34px; border: 1.5px solid var(--c-line); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); font-size: 17px; cursor: pointer; }
.bdpal .find:hover { border-color: var(--c-ink); }

/* pencereler (katalog seçici + grafik içeri alma) */
.bddlg { overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 22px; padding: 0; background: var(--c-canvas); color: var(--c-ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .45); }
.bddlg::backdrop { background: rgba(20, 22, 35, .55); }
.dlghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: var(--c-canvas); z-index: 1; }
.dlghead b { font: 800 20px/1.1 var(--font-display); }
.dlghead .x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--c-surface-2); font-size: 22px; cursor: pointer; color: var(--c-ink); }
.bdcatdlg { width: min(860px, 94vw); max-height: 88vh; }
.bdcatdlg > input, .bdcatdlg > .catfam, .bdcatdlg > .note { margin: 14px 20px 0; }
.bdcatdlg > input { width: calc(100% - 40px); box-sizing: border-box; }
.bdcatdlg > .note { margin-bottom: 18px; font-size: 12.5px; color: var(--c-ink-2); }
.catfam { display: flex; flex-wrap: wrap; gap: 6px; }
.catfam button { font: 600 13px/1 var(--font-ui); padding: 8px 11px; border: 1.5px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); cursor: pointer; }
.catfam button.on { background: var(--c-ink); color: var(--c-canvas); border-color: var(--c-ink); }
.catgrid { margin: 14px 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 52vh; overflow: auto; padding: 2px; }
.catgrid button { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-surface); cursor: pointer; color: var(--c-ink); }
.catgrid button:hover, .catgrid button.on { border-color: var(--c-ink); }
.catgrid i { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(27, 33, 64, .3); }
.catgrid b { font: 700 13px/1.2 var(--font-mono); }
.catgrid span { font-size: 11.5px; line-height: 1.25; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdimp { width: min(1200px, 96vw); max-height: 94vh; }
.impbody { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; padding: 16px 20px 20px; }
.impview { max-height: calc(94vh - 110px); overflow: auto; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }
.impview canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.impopts { display: grid; align-content: start; gap: 4px; }
.impopts .steps { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--c-ink-2); }
.impopts .grp { margin: 8px 0 6px; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.impopts .note { font-size: 13.5px; min-height: 2.6em; margin: 8px 0; }
.impopts .kw-btn.primary { justify-content: center; }
@media (max-width: 860px) { .impbody { grid-template-columns: 1fr; } .impview { max-height: 55vh; } }

@media (max-width: 860px) {
  .bdtool { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "opts"; }
  .bdbox { max-height: 62vh; }
  /* takip modunda kart ekranın altına yapışır: grafik kayarken de sıra görünür */
  .following .follow { position: sticky; bottom: 0; z-index: 3; background: var(--c-canvas); border-top: 1.5px solid var(--c-line); margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 30px -24px rgba(0, 0, 0, .35); }
  .following .follow .note { display: none; }
  .fhead b { font-size: 24px; }
  .frun > b { font-size: 22px; }
  .bdpal .pc { grid-template-columns: 40px 34px minmax(0, 1fr) minmax(0, .9fr) auto auto; }
}
@media (max-width: 420px) {
  .bdpal .pc { grid-template-columns: 40px 34px minmax(0, 1fr) auto; }
  .bdpal input.cd { grid-column: 3 / 4; }
  .bdpal .cnt { display: none; }
}

/* yazdır → PDF: yalnız #bd-printout */
#bd-printout { display: none; }
@media print {
  body[data-print="beads"] main > section.tool-hero { display: block; }
  body[data-print="beads"] .tool-hero .sechead, body[data-print="beads"] .bdtool { display: none !important; }
  body[data-print="beads"] #bd-printout { display: block; }
  #bd-printout h2 { font-size: 16pt; margin: 0 0 2mm; }
  #bd-printout p { font-size: 10pt; margin: 0 0 3mm; }
  #bd-printout .pchart { margin: 2mm 0 5mm; break-inside: avoid; }
  #bd-printout .pchart svg { max-width: 100%; height: auto; max-height: 235mm; }
  #bd-printout .bdmat { font-size: 9.5pt; margin-bottom: 4mm; break-inside: avoid; }
  #bd-printout .bdmat th, #bd-printout .bdmat td { padding: 1.5mm 2mm; }
  #bd-printout .prows { columns: 2; column-gap: 8mm; font: 500 8.5pt/1.45 var(--font-mono); padding-left: 0; list-style: none; margin: 0 0 4mm; }
  #bd-printout .prows li { break-inside: avoid; }
  #bd-printout .verify li { font-size: 9.5pt; }
  #bd-printout .pfoot { font: 500 8.5pt var(--font-mono); color: #555; margin-top: 4mm; }
}