/* The free tools (/tools/ and /tools/<slug>/): loaded only by those pages. Site tokens (site.css), logical properties
   for /ar/ and /ur/, dark mode through the same tokens. Printing a sheet: tools.js fills #print-area (a child of body)
   and sets the paper; everything else is hidden while it prints. */

/* ---------- index */
.tools-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tool-card { padding: 0; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.tool-card a { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 1.2rem; color: inherit; text-decoration: none; height: 100%; }
.tool-card-text { display: grid; gap: .25rem; }
.tool-card strong { font-family: var(--font-head); font-size: 1.08rem; }
.tool-card .muted { font-size: .94rem; }
.tool-credits { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .4rem; font-size: .94rem; }
.tool-h { font-size: 1.25rem; margin-block-end: .5rem; }

/* ---------- a tool page */
.tool-hero { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) .5rem; }
.tool-hero-grid { display: grid; gap: 1rem; align-items: center; }
.tool-hero h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); }
.tool-hero .lead { margin-block-end: .75rem; }
.tool-hero-art { display: none; }
@media (min-width: 900px) {
  .tool-hero-grid { grid-template-columns: 1fr 220px; gap: 2.5rem; }
  .tool-hero-art { display: block; }
}
.tool-crumb { margin: 0 0 .4rem; }
.tool-crumb a { color: var(--fg-muted); }
.tool-private { display: flex; gap: .5rem; align-items: flex-start; color: var(--green-2); font-weight: 600; font-size: .95rem; margin: 0; }
.tool-private svg { width: 20px; height: 20px; flex: none; margin-top: .15em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool-private { color: #7FE3C4; } }
:root[data-theme="dark"] .tool-private { color: #7FE3C4; }
.tool-section { padding-block-start: 1rem; }
.tool-noscript { background: var(--amber-soft); border-radius: var(--radius-s); padding: .8rem 1rem; font-weight: 600; }

.tool-app { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) {
  .tool-2col { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .tool-2col .tool-out { position: sticky; top: 84px; }
}
.tool-form { display: grid; gap: 1rem; }
.tool-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tool-form legend, .tool-label { font-weight: 700; font-size: .92rem; color: var(--fg-strong); margin-block-end: .45rem; padding: 0; }
.tool-form .field input[type="color"] { padding: .25rem; height: 46px; cursor: pointer; }
.tool-form .field input[type="range"] { min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--green); }
.tool-form .field input[type="file"] { min-height: 0; padding: .45rem; }
.tool-form textarea { resize: vertical; }
.field output { font-weight: 700; color: var(--green-2); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 600; font-size: .92rem; min-height: 46px; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--green); }
.kind { display: grid; gap: .9rem; }
.tool-app [hidden] { display: none !important; }

/* segmented choice (radio buttons that look like tabs; still radios for the keyboard and screen readers) */
.seg { display: flex; flex-wrap: wrap; gap: .45rem; }
.seg legend { width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-block; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-card); font-weight: 700; font-size: .92rem; color: var(--fg-strong); }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg input:checked + span { background: var(--green); border-color: var(--green); color: #05241B; } }
:root[data-theme="dark"] .seg input:checked + span { background: var(--green); border-color: var(--green); color: #05241B; }
.seg input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }

.tool-preset { display: grid; gap: .4rem; padding: .9rem 1rem; border-radius: var(--radius-s); background: var(--green-soft); }
.tool-preset .btn { justify-self: start; }
.tool-preset p { margin: 0; }
.tool-more { border-block-start: 1px solid var(--line); padding-block-start: .75rem; }
.tool-more summary { cursor: pointer; font-weight: 700; color: var(--fg-strong); }
.tool-more-body { display: grid; gap: .9rem; margin-block-start: .9rem; }

.tool-out { display: grid; gap: .75rem; justify-items: stretch; }
.tool-out .btn-row { justify-content: flex-start; }
.code-preview { display: grid; place-items: center; background: repeating-conic-gradient(var(--slate-1) 0 25%, transparent 0 50%) 0 0 / 18px 18px; border-radius: var(--radius-s); padding: 1rem; min-height: 200px; }
.code-preview canvas, .code-preview svg, .code-preview img { width: auto; height: auto; max-width: min(100%, 320px); max-height: 360px; image-rendering: pixelated; box-shadow: var(--shadow); }
.code-preview.wide canvas { max-width: 100%; }
.tool-msg { margin: 0; font-weight: 600; min-height: 1.2em; }
.tool-msg:empty { display: none; }
.tool-msg.bad { color: var(--red); }
.tool-msg.good { color: var(--green-2); }
.tool-result { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); color: var(--fg-strong); margin: 0; line-height: 1.2; }
.num, .tool-out [data-num] { font-variant-numeric: tabular-nums; }
.tool-table td.num, .tool-table th.num { text-align: end; white-space: nowrap; }
.tool-table input:not([type="checkbox"]) { width: 100%; min-width: 4.5rem; min-height: 40px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--slate-3); border-radius: 8px; padding: .3rem .5rem; }

/* ---------- after the tool: the call to action, the embed snippet, more tools */
.tool-after-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-block-end: 2rem; }
.tool-cta { display: grid; gap: .75rem; align-content: start; }
.tool-cta p { font-size: 1.08rem; font-weight: 600; color: var(--fg-strong); margin: 0; }
.tool-cta .btn { justify-self: start; }
.tool-embed-box { display: grid; gap: .6rem; align-content: start; }
.tool-embed-box p { margin: 0; }
.tool-embed-box .btn { justify-self: start; }
.embed-code { font: .82rem/1.5 ui-monospace, Consolas, monospace; width: 100%; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 10px; padding: .6rem .7rem; resize: vertical; text-align: left; }
.tool-more-title { margin-block-start: .5rem; }
.tool-chips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-chips a { display: inline-flex; gap: .45rem; align-items: center; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg-strong); text-decoration: none; font-weight: 600; font-size: .94rem; }
.tool-chips a:hover { border-color: var(--green); }
.tool-chips .ico { width: 18px; height: 18px; color: var(--green-2); }
.tool-made { margin: 0; }

/* ---------- embed mode (?embed=1): the tool alone */
.tool-embed .site-header, .tool-embed .site-footer, .tool-embed .wa-float, .tool-embed .notice, .tool-embed .cta-band,
.tool-embed .tool-hero-art, .tool-embed .tool-crumb, .tool-embed .tool-hero .lead, .tool-embed .tool-after .tool-after-grid,
.tool-embed .tool-more-title, .tool-embed .tool-chips, .tool-embed main > section.tight:last-child { display: none !important; }
.tool-embed .tool-hero { padding-block: .75rem 0; background: none; }
.tool-embed .tool-hero h1 { font-size: 1.4rem; }
.tool-embed .tool-after { padding-block: .5rem; background: none; }

/* ---------- label sheets: printed (#print-area) and previewed (.sheet-preview) with the same markup, in mm */
.tool-sheet { margin-block-start: 1.25rem; display: grid; gap: .9rem; }
.tool-sheet p { margin: 0; }
.sheet { background: #fff; color: #000; position: relative; overflow: hidden; }
.sheet.a4 { width: 210mm; height: 297mm; }
.lab { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6mm;
  padding: 1.6mm 2mm; overflow: hidden; font-family: "Montserrat", "Cairo", "Noto Sans Devanagari", "Noto Nastaliq Urdu", Arial, sans-serif; color: #000; line-height: 1.15; text-align: center; }
.sheet.roll .lab { position: relative; }
.lab-code { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.lab-code svg { display: block; width: 100%; height: 100%; max-width: none; }
.lab-name { font-size: 7.5pt; font-weight: 700; max-height: 2.4em; overflow: hidden; width: 100%; overflow-wrap: anywhere; }
.lab-price { font-size: 13pt; font-weight: 800; white-space: nowrap; direction: ltr; }
.lab-price small { font-size: 6.5pt; font-weight: 700; margin-inline-end: .6mm; }
.lab-vat { font-size: 5.5pt; font-weight: 600; }
.lab-shop { font-size: 5.5pt; font-weight: 600; opacity: .8; }
.sheet-preview { overflow: auto; max-height: 520px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-alt); padding: .75rem; }
.sheet-preview .sheet { box-shadow: var(--shadow); margin-inline: auto; }
.sheet-preview .sheet.roll { display: inline-block; margin: .3rem; vertical-align: top; }
.sheet-preview .sheet.a4 { zoom: .62; }
@media (max-width: 760px) { .sheet-preview .sheet.a4 { zoom: .4; } }

/* ---------- printing a sheet */
#print-area { display: none; }
#print-area .sheet { page-break-after: always; break-after: page; }
#print-area .sheet:last-child { page-break-after: auto; break-after: auto; }
@media print {
  body.tool-printing > *:not(#print-area) { display: none !important; }
  body.tool-printing #print-area { display: block; }
  body.tool-printing { margin: 0; background: #fff; }
}

/* ---------- the price-tag page */
.tool-warnings { margin: 0; padding-inline-start: 1.1rem; color: #8A5A0B; display: grid; gap: .2rem; }
.tool-warnings:empty { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool-warnings { color: var(--amber); } }
:root[data-theme="dark"] .tool-warnings { color: var(--amber); }
.tool-out .sheet-preview .sheet.a4 { zoom: .5; }
@media (max-width: 760px) { .tool-out .sheet-preview .sheet.a4 { zoom: .4; } }

/* ---------- the calculators: figures, verdicts, tables */
.tool-figures { margin: 0; display: grid; gap: .5rem; }
.tool-figures > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .45rem; border-block-end: 1px solid var(--line); }
.tool-figures dt { color: var(--fg-muted); font-weight: 600; }
.tool-figures dd { margin: 0; font-weight: 700; color: var(--fg-strong); font-variant-numeric: tabular-nums; text-align: end; }
.tool-figures .big dd { font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; }
.tool-figures-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tool-figures-row > div { flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .8rem; }
.tool-figures-row dd { text-align: start; }
.tool-result.good { color: var(--green-2); }
.tool-result.bad { color: var(--red); }
.tool-result:empty { display: none; }
.tool-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hr-table input[type="time"] { min-width: 6.5rem; }
.hr-table input[type="number"] { max-width: 5.5rem; }
.hr-table input[type="checkbox"] { width: 1.2rem; min-width: 0; min-height: 0; accent-color: var(--green); }
.hr-table td, .hr-table th { padding: .45rem .5rem; vertical-align: middle; }
#cash-form .tool-table input { max-width: 7rem; }
.count-sheet { font-family: Arial, sans-serif; color: #000; }
.count-sheet table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.count-sheet th, .count-sheet td { border: 1px solid #999; padding: 4px 8px; text-align: start; }
.count-sheet .sign { margin-block-start: 3rem; }
.tool-form .field-row { align-items: start; }