/* core/assets/css/tools.css — /tools/ interactive utilities (v3).
   Direction: BRIGHT & warm (white cards, gold/green soft tints from the brand
   palette) on the full site width — no solid dark blocks. Product register:
   the tool serves the task; identity comes from the tinted tool medallions,
   the warm gold answer panel, and the site's pill CTAs. */

/* ── per-tool tint tokens (bright, from site palette) ── */
.tint-gold{--tint-bg:var(--gold-soft,#F6EAD6);--tint-fg:#8A5A1A}
.tint-green{--tint-bg:var(--green-soft,#E7F1E6);--tint-fg:#3E7A49}
.tint-brand{--tint-bg:var(--brand-soft,#EFE3D3);--tint-fg:var(--brand,#6A442A)}
.tint-rose{--tint-bg:#F7E7EC;--tint-fg:#A94F68}

/* ── page frame: fill the site width like every other page ── */
.toolpage{padding:0 14px}
.toolpage [hidden]{display:none!important} /* display classes must never beat [hidden] */
.toolpage .card{margin-left:0;margin-right:0} /* site.css .card carries 18px side margins */
.tool-head{display:flex;gap:14px;align-items:flex-start;margin:12px 0 18px}
.tool-ico{width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--tint-bg);color:var(--tint-fg)}
.toolpage h1{font-size:clamp(21px,5.2vw,25px);line-height:1.35;margin:2px 0 8px;text-wrap:balance}
.toolpage .intro{color:var(--muted);font-size:14.5px;line-height:1.8;max-width:72ch}
.tools-index h1{margin-top:10px}
.tools-index .intro{margin-bottom:18px}

/* two columns on desktop: tool + sticky sidebar (fills --maxw, no empty flanks) */
.tool-cols{display:block}
.tool-main{min-width:0}
.tool-side{margin-top:24px}
@media (min-width:1000px){
  .tool-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
  .tool-side{position:sticky;top:24px;margin-top:0}
  .tool-head{margin:14px 0 20px}
}

.tl-card{padding:18px 16px;margin-bottom:22px}
.tl-hint{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.65}

/* ── sidebar ── */
.tool-sidebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,18px);padding:16px;box-shadow:var(--shadow-s)}
.tool-sidebox>b{display:block;font-size:14px;margin-bottom:11px}
.tool-sidelist{display:flex;flex-direction:column;gap:7px}
.tool-sidelink{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);
  padding:9px 10px;border-radius:12px;transition:.13s;min-height:44px}
.tool-sidelink:hover{background:var(--surface-2)}
.tool-sidelink .ti{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--tint-bg);color:var(--tint-fg)}
.tool-sideall{display:block;margin-top:10px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--brand)}

/* ── form controls (16px = no iOS focus-zoom; ≥46px touch targets) ── */
.tl-grid{display:grid;grid-template-columns:1fr;gap:12px}
.tl-grid+.tl-grid{margin-top:12px}
.tl-grid>*{min-width:0}
.tl-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:0}
.tl-field>span{font-weight:600}
.tl-field select,.tl-field input{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;min-height:46px;min-width:0;width:100%;
  transition:border-color .15s}
.tl-field select:hover,.tl-field input:hover{border-color:var(--gold)}
.tl-field select:focus,.tl-field input:focus{outline:none;border-color:var(--brand)}
.toolpage button:focus-visible,.toolpage select:focus-visible,.toolpage input:focus-visible,.toolpage a:focus-visible{
  outline:2.5px solid var(--gold);outline-offset:2px}
.tl-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;
  font-family:inherit;font-weight:700;font-size:15.5px;min-height:48px;padding:12px 26px;border:none;
  border-radius:var(--r-pill,999px);cursor:pointer;box-shadow:var(--shadow-cta,0 6px 16px rgba(106,68,42,.22));transition:.15s}
.tl-cta:hover{transform:translateY(-1px);opacity:.94}
.tl-cta:active{transform:none}
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);
  border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-weight:600;font-size:14px;
  min-height:44px;padding:9px 16px;border-radius:var(--r-pill,999px);cursor:pointer;transition:.15s}
.tl-btn:hover{border-color:var(--brand);color:var(--brand)}

/* converter unit row: from | swap | to on one line, ทุกขนาดจอ */
.uc-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;min-width:0}
.tl-swap{align-self:end;margin-bottom:1px;background:var(--gold-soft);border:none;color:#8A5A1A;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;transition:.15s}
.tl-swap:hover{background:var(--gold);color:#fff}
.tl-swap svg{transform:rotate(90deg)}

/* ── the answer panel — warm gold, bright (ไม่ใช่บล็อกน้ำตาลเข้ม) ── */
.tl-result{margin-top:16px;background:var(--gold-soft,#F6EAD6);border-radius:14px;padding:15px 17px}
.tl-result .big{display:block;color:var(--brand);font-weight:700;font-size:clamp(20px,4.8vw,27px);
  line-height:1.4;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.tl-result .big small{font-size:.6em;font-weight:600;color:#8A5A1A}
.tl-result .eq{margin-top:8px;font-size:13.5px;color:#6B5A4A;line-height:1.75;overflow-wrap:break-word}
.tl-result .eq b{color:var(--ink)}
.tl-result .big.rs-factor{font-size:18px;margin-bottom:6px}
.tl-warn{margin-top:14px;background:#FFF7EA;border:1.5px solid #F2D9AE;border-radius:12px;padding:12px 14px;
  font-size:13.5px;color:#6B4E14;line-height:1.65}

/* ── related category chips (revealed after a result) ── */
.tool-related{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.tool-related>b{display:block;font-size:13.5px;margin-bottom:9px}
.tool-chips{display:flex;flex-wrap:wrap;gap:8px}
.tool-chips .schip{min-height:40px;display:inline-flex;align-items:center}

/* ── tools index + cross-link cards (bright tinted medallions) ── */
.tl-cards{display:grid;grid-template-columns:1fr;gap:13px;margin-bottom:22px}
.tl-tool-card{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg,18px);padding:18px;box-shadow:var(--shadow-s);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.tl-tool-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(43,31,24,.09)}
.tl-tool-card .ti{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--tint-bg);color:var(--tint-fg)}
.tl-tc-body{min-width:0}
.tl-tool-card b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px;line-height:1.4}
.tl-tool-card .tl-tc-body>span{display:block;font-size:13px;color:var(--muted);line-height:1.65}
.tl-tc-go{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:13.5px;font-weight:700;
  color:var(--brand);margin-top:9px}
.tl-tool-card:hover .tl-tc-go{color:var(--gold)}
.tl-cards-lg .tl-tool-card{padding:20px}
.tl-cards-lg .ti{width:56px;height:56px}

/* ── plastic symbol checker ── */
.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pc-btn{font-family:inherit;background:var(--surface);border:1.5px solid var(--line);border-radius:13px;
  padding:13px 8px 11px;cursor:pointer;text-align:center;min-height:92px;transition:.15s}
.pc-btn:hover{border-color:var(--gold)}
.pc-btn.on{border-color:var(--gold);background:var(--gold-soft)}
.pc-tri{display:inline-grid;place-items:center;width:36px;height:33px;margin-bottom:6px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.5 22.5 20.5H1.5Z' fill='none' stroke='%23C88A3D' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-weight:700;font-size:13.5px;padding-top:7px;color:var(--ink);font-variant-numeric:tabular-nums}
.pc-btn b{display:block;font-size:13.5px;color:var(--ink)}
.pc-btn i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.pc-result{margin-top:16px}
.pc-head{background:var(--gold-soft);color:var(--brand-ink,var(--brand));border-radius:11px;padding:12px 16px;font-size:17px;font-weight:700;margin-bottom:10px}
.pc-sub{font-size:13.5px;color:var(--muted);margin:0 3px 12px;line-height:1.7}
.pc-badges{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.pc-badge{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.6}
.pc-badge .st{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none;color:#fff;margin-top:2px}
.pc-badge.ok .st{background:#3E9B57}.pc-badge.no .st{background:#C94F3D}.pc-badge.warn .st{background:#C98A22}
.pc-note{font-size:14px;line-height:1.75;color:var(--ink);margin:0 3px}
.pc-note b{color:var(--brand)}

/* ── kitchen timer ── */
.tm-groups{display:flex;flex-direction:column;gap:15px}
.tm-group>b{display:block;font-size:13.5px;margin-bottom:8px;color:var(--ink)}
.tm-presets{display:flex;flex-wrap:wrap;gap:8px}
.tm-preset{font-family:inherit;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill,999px);
  min-height:42px;padding:8px 15px;font-size:14px;color:var(--ink);cursor:pointer;transition:.15s}
.tm-preset:hover{border-color:var(--gold);background:var(--gold-soft)}
.tm-preset small{color:var(--muted);margin-left:5px;font-variant-numeric:tabular-nums}
.tm-custom{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.tm-c-name{grid-column:1 / -1}
.tm-c-btn{grid-column:1 / -1;align-self:end}
.tm-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.tm-item{background:var(--surface);border:1.5px solid var(--line);border-radius:13px;padding:13px 15px}
.tm-item.done{border-color:#C94F3D;animation:tmblink 1s ease-in-out infinite}
@keyframes tmblink{50%{background:#FDEBE7}}
.tm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm-name{font-weight:700;font-size:14.5px;flex:1;min-width:90px;overflow-wrap:anywhere}
.tm-clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:25px;color:var(--brand);letter-spacing:.01em}
.tm-item.done .tm-clock{color:#C94F3D}
.tm-bar{height:6px;background:var(--surface-3,var(--surface-2));border-radius:999px;margin-top:10px;overflow:hidden}
.tm-bar i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .5s linear}
.tm-item.done .tm-bar i{background:#C94F3D}
.tm-acts{display:flex;gap:7px}
.tm-acts button{font-family:inherit;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill,999px);
  min-height:38px;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--ink);transition:.15s}
.tm-acts button:hover{border-color:var(--brand);color:var(--brand)}

/* ── recipe scaler ── */
.rs-tabs{display:flex;gap:4px;background:var(--surface-3,#F1E8DC);border-radius:var(--r-pill,999px);padding:4px;margin-bottom:16px;width:fit-content;max-width:100%}
.rs-tab{font-family:inherit;background:transparent;border:none;border-radius:var(--r-pill,999px);
  min-height:40px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.rs-tab.on{background:var(--surface);color:var(--brand-ink,var(--brand));box-shadow:0 1px 5px rgba(43,31,24,.12)}
.rs-rows{display:flex;flex-direction:column;gap:9px;margin:16px 0 12px}
.rs-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(64px,.7fr) minmax(86px,1fr) 32px;gap:7px;align-items:center}
.rs-row input,.rs-row select{font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:11px;padding:10px 11px;min-height:46px;min-width:0;width:100%}
.rs-row input:focus,.rs-row select:focus{outline:none;border-color:var(--brand)}
.rs-del{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:4px;min-height:44px}
.rs-del:hover{color:#C94F3D}
.rs-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.rs-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.rs-table th{text-align:left;font-size:12.5px;color:#6B5A4A;padding:7px 10px;border-bottom:1.5px solid #EAD9BE}
.rs-table td{padding:10px;border-bottom:1px solid #EAD9BE;overflow-wrap:anywhere}
.rs-table tr:last-child td{border-bottom:none}
.rs-table td.num{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.rs-table td small{color:var(--muted);font-weight:400}

/* ── SEO content under the tool ── */
.tool-content{margin:26px 0 22px;line-height:1.85;font-size:15px}
.tool-content h2{font-size:18.5px;margin:26px 0 10px;text-wrap:balance}
.tool-content h3{font-size:16px;margin:18px 0 8px}
.tool-content p{margin:0 0 12px;color:var(--ink);max-width:75ch}
.tool-content ul,.tool-content ol{margin:0 0 14px;padding-left:22px}
.tool-content li{margin-bottom:6px}
.tool-content .tbl-scroll{overflow-x:auto;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;margin:12px 0 18px;-webkit-overflow-scrolling:touch}
.tool-content table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0}
.tool-content th{background:var(--surface-2);text-align:left;padding:10px 14px;border:none;border-bottom:1.5px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.tool-content td{padding:10px 14px;border:none;border-bottom:1px solid var(--line)}
.tool-content th+th,.tool-content td+td{border-left:1px solid var(--line)}
.tool-content tr:last-child td{border-bottom:none}
.tool-content tbody tr:nth-child(even) td{background:var(--surface-2)}
.tool-content>table{border:1.5px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;margin:12px 0 18px}

/* ── ≥640px: two-column forms, roomier card, 2×2 index cards ── */
@media (min-width:640px){
  .tl-card{padding:22px 20px}
  .tl-grid{grid-template-columns:1fr 1fr}
  .tl-grid .span2{grid-column:1 / -1}
  .pc-grid{grid-template-columns:repeat(4,1fr)}
  .pc-badges{grid-template-columns:1fr 1fr}
  .tl-cards{grid-template-columns:1fr 1fr;gap:16px}
  .tm-custom{grid-template-columns:1fr 96px 96px auto}
  .tm-c-name{grid-column:auto}
  .tm-c-btn{grid-column:auto}
  .toolpage .intro{font-size:15px}
  .tl-result{padding:17px 19px}
  .tool-ico{width:56px;height:56px}
}
/* ≥900px: the site's .wrap provides the 28px gutter — drop our own */
@media (min-width:900px){
  .toolpage{padding:0}
}
/* phones <480px: ingredient name gets its own full-width line */
@media (max-width:479px){
  .rs-row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 30px;row-gap:7px}
  .rs-row .rs-name{grid-column:1 / -1}
}
@media (max-width:360px){
  .tl-result .big{font-size:19px}
}

/* ── motion & accessibility ── */
@media (prefers-reduced-motion:reduce){
  .toolpage *,.toolpage *::before,.toolpage *::after{animation:none!important;transition:none!important}
  .tm-item.done{background:#FDEBE7}
}

/* ── tool SEO subpages (tool.subpages[]) — hub chips + subpage body ── */
.tool-subnav .tool-chips{margin-top:8px;margin-bottom:6px}
.tool-subnav-g{display:block;margin-top:14px;font-size:13.5px;color:var(--muted)}
.tool-subnav .schip.on{background:var(--tint-bg,#F6EAD6);color:var(--tint-fg,#8A5A1A);cursor:default}
.tool-sub-body table{width:100%}
.tool-open-cta{display:flex;justify-content:center;padding:18px}
.tool-open-cta .tl-cta{min-width:min(100%,340px);text-align:center}