@charset "UTF-8";
/* ==========================================================================
   AWGCOR — tools.css

   Loaded only on /tools pages. Everything here is scoped under .tl so it can
   never leak into the marketing pages, and it inherits the design tokens
   already defined in awgcor.css rather than redefining any colour.

   1. Shell & panels
   2. Fields, selects, sliders, switches
   3. Dropzone
   4. Output, previews, results
   5. Copy / download buttons
   6. Tool hub cards
   7. Responsive
   8. Business calculators
   ========================================================================== */

/* ==========================================================================
   1. SHELL & PANELS
   ========================================================================== */
.tl{
  position:relative;border-radius:var(--r-xl);
  border:1px solid var(--paper-line);background:var(--paper);
  box-shadow:var(--sh-2);overflow:hidden;
}
.tl-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--paper-line);background:var(--paper-soft);
}
.tl-head h2,.tl-head h3{
  font-family:var(--f-display);font-size:1rem;font-weight:600;letter-spacing:-.018em;
  display:flex;align-items:center;gap:9px;
}
.tl-head h2 svg,.tl-head h3 svg{
  width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.tl-badge{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 11px;border-radius:var(--pill);
  background:rgba(34,229,167,.14);color:#0E8A5F;border:1px solid rgba(34,229,167,.32);
}
.tl-body{padding:clamp(18px,2.6vw,30px);}
.tl-grid{display:grid;gap:clamp(16px,2.2vw,24px);}
.tl-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));}
.tl-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));}
.tl-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px clamp(18px,2.4vw,26px);
  border-top:1px solid var(--paper-line);background:var(--paper-soft);
  font-size:.82rem;color:var(--t-ink-low);
}
.tl-priv{display:inline-flex;align-items:center;gap:8px;}
.tl-priv svg{width:14px;height:14px;flex:none;fill:none;stroke:#0E8A5F;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   2. FIELDS
   ========================================================================== */
.tl-field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.tl-field > label,.tl-lab{
  font-size:.8rem;font-weight:600;color:var(--t-ink-mid);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.tl-lab b{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:700;}
.tl-hint{font-size:.78rem;color:var(--t-ink-low);line-height:1.5;}

.tl-in,.tl-ta,.tl-sel{
  width:100%;min-width:0;font-family:inherit;font-size:.95rem;color:var(--t-ink-hi);
  padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--paper-line);background:var(--paper);
  transition:border-color .3s,box-shadow .3s;
}
.tl-in:focus,.tl-ta:focus,.tl-sel:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,95,255,.13);
}
.tl-in::placeholder,.tl-ta::placeholder{color:var(--t-ink-low);}
.tl-ta{
  min-height:190px;resize:vertical;line-height:1.65;
  font-family:var(--f-mono);font-size:.86rem;
}
.tl-ta.is-prose{font-family:var(--f-body);font-size:.95rem;line-height:1.7;}
.tl-sel{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767F92' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
}
/* a full-width native colour input reads as a giant bar rather than a
   swatch; cap it so it looks like the control it is */
.tl-in[type="color"]{padding:5px;height:46px;cursor:pointer;max-width:160px;}
.tl-in[type="number"]{font-variant-numeric:tabular-nums;}

/* range */
.tl-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--paper-warm);outline:none;cursor:pointer;
}
.tl-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--blue);border:3px solid var(--paper);cursor:pointer;
  box-shadow:0 2px 8px -1px rgba(47,95,255,.6);transition:transform .25s var(--e-back);
}
.tl-range::-webkit-slider-thumb:hover{transform:scale(1.16);}
.tl-range::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--blue);
  border:3px solid var(--paper);cursor:pointer;
}

/* checkbox / switch */
.tl-check{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:.9rem;color:var(--t-ink-mid);user-select:none;
}
.tl-check input{position:absolute;opacity:0;width:0;height:0;}
.tl-box{
  flex:none;width:20px;height:20px;border-radius:6px;position:relative;
  border:1.5px solid var(--line-l2);background:var(--paper);
  transition:background .25s,border-color .25s;
}
.tl-box::after{
  content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border-right:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:rotate(45deg) scale(0);transition:transform .25s var(--e-back);
}
.tl-check input:checked + .tl-box{background:var(--blue);border-color:var(--blue);}
.tl-check input:checked + .tl-box::after{transform:rotate(45deg) scale(1);}
.tl-check input:focus-visible + .tl-box{box-shadow:0 0 0 4px rgba(47,95,255,.22);}

/* segmented control */
.tl-seg{
  display:inline-flex;padding:4px;border-radius:var(--pill);gap:3px;
  border:1px solid var(--paper-line);background:var(--paper-soft);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.tl-seg::-webkit-scrollbar{display:none;}
.tl-seg button{
  flex:none;cursor:pointer;border:0;background:transparent;border-radius:var(--pill);
  padding:9px 17px;font-family:inherit;font-size:.84rem;font-weight:600;
  color:var(--t-ink-low);white-space:nowrap;transition:background .3s,color .3s;
}
.tl-seg button:hover{color:var(--t-ink-hi);}
.tl-seg button.is-on{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
  box-shadow:0 6px 16px -6px rgba(47,95,255,.7);
}

/* ==========================================================================
   3. DROPZONE
   ========================================================================== */
.tl-drop{
  position:relative;display:grid;place-items:center;gap:10px;text-align:center;
  padding:clamp(30px,5vw,54px) 22px;border-radius:var(--r-lg);
  border:2px dashed var(--line-l2);background:var(--paper-soft);
  cursor:pointer;transition:border-color .3s,background .3s,transform .35s var(--e-out);
}
.tl-drop:hover{border-color:var(--blue);background:rgba(47,95,255,.04);}
.tl-drop.is-over{border-color:var(--blue);background:rgba(47,95,255,.09);transform:scale(1.01);}
.tl-drop input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.tl-drop-ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(47,95,255,.14),rgba(0,224,255,.1));
  border:1px solid rgba(47,95,255,.22);
}
.tl-drop-ico svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.tl-drop b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;}
.tl-drop span{font-size:.85rem;color:var(--t-ink-low);}

/* ==========================================================================
   4. OUTPUT / PREVIEW / RESULTS
   ========================================================================== */
.tl-out{
  position:relative;border-radius:var(--r-md);border:1px solid var(--paper-line);
  background:var(--ink-850);color:#D6DCE8;overflow:hidden;
}
.tl-out pre{
  margin:0;padding:16px;max-height:420px;overflow:auto;
  font-family:var(--f-mono);font-size:.83rem;line-height:1.7;white-space:pre-wrap;
  word-break:break-word;-webkit-overflow-scrolling:touch;
}
.tl-out.is-empty pre{color:var(--t-dim);font-style:italic;}
.tl-out.is-bad{border-color:rgba(229,72,77,.55);}
.tl-err{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;
  background:rgba(229,72,77,.12);border-radius:var(--r-sm);
  color:#B7252A;font-size:.88rem;line-height:1.55;margin-top:12px;
}
.tl-err svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tl-err[hidden]{display:none;}

/* stat chips */
.tl-stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));}
.tl-stat{
  min-width:0;text-align:center;padding:15px 10px;border-radius:var(--r-md);
  border:1px solid var(--paper-line);background:var(--paper-soft);
}
.tl-stat b{
  display:block;font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.6rem);
  font-weight:600;letter-spacing:-.028em;color:var(--t-ink-hi);
  font-variant-numeric:tabular-nums;line-height:1;
}
.tl-stat span{
  display:block;margin-top:7px;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-ink-low);
}
.tl-stat.is-good b{color:#0E8A5F;}
.tl-stat.is-warn b{color:#9A6208;}

/* image preview grid */
.tl-files{display:grid;gap:12px;margin-top:18px;}
.tl-file{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px;border-radius:var(--r-md);
  border:1px solid var(--paper-line);background:var(--paper);
}
.tl-thumb{
  width:58px;height:58px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-warm);display:grid;place-items:center;
  background-image:
    linear-gradient(45deg,#E4E7EC 25%,transparent 25%,transparent 75%,#E4E7EC 75%),
    linear-gradient(45deg,#E4E7EC 25%,transparent 25%,transparent 75%,#E4E7EC 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;
}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tl-fmeta{min-width:0;}
.tl-fmeta b{
  display:block;font-size:.9rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tl-fmeta span{display:block;margin-top:4px;font-size:.79rem;color:var(--t-ink-low);}
.tl-save{font-weight:700;color:#0E8A5F;}
.tl-grow{color:#B7252A;font-weight:700;}
.tl-fbar{
  height:4px;border-radius:99px;background:var(--paper-warm);overflow:hidden;margin-top:7px;
}
.tl-fbar i{
  display:block;height:100%;width:var(--p,0%);border-radius:99px;
  background:linear-gradient(90deg,#2BD69B,#12A97A);
  transition:width .6s var(--e-out);
}

/* canvas / qr / colour swatch output */
.tl-canvas-wrap{
  display:grid;place-items:center;padding:clamp(18px,3vw,30px);border-radius:var(--r-md);
  border:1px solid var(--paper-line);background:var(--paper-soft);min-height:200px;
}
.tl-canvas-wrap canvas,.tl-canvas-wrap img{
  max-width:100%;height:auto;display:block;border-radius:8px;
  image-rendering:-webkit-optimize-contrast;
}
.tl-swatch{
  height:96px;border-radius:var(--r-md);border:1px solid var(--line-l2);
  transition:background .3s;
}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px;}
.tl-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--pill);
  border:1px solid var(--paper-line);background:var(--paper-soft);
  font-family:var(--f-mono);font-size:.8rem;color:var(--t-ink-mid);cursor:pointer;
  transition:border-color .3s,background .3s,color .3s;
}
.tl-chip:hover{border-color:var(--blue);color:var(--blue);background:rgba(47,95,255,.06);}

/* ==========================================================================
   5. ACTIONS
   ========================================================================== */
.tl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;}
.tl-actions .btn{flex:0 0 auto;}
.tl-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 18px;border-radius:var(--pill);font-family:inherit;
  font-size:.86rem;font-weight:600;
  border:1px solid var(--paper-line);background:var(--paper);color:var(--t-ink-hi);
  transition:border-color .3s,background .3s,transform .3s var(--e-out),color .3s;
}
.tl-btn:hover{border-color:var(--line-l2);background:var(--paper-soft);transform:translateY(-2px);}
.tl-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.tl-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.tl-btn-go{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  border-color:transparent;color:#fff;box-shadow:var(--sh-glow);
}
.tl-btn-go:hover{background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-color:transparent;}
.tl-btn.is-done{color:#0E8A5F;border-color:rgba(34,229,167,.45);background:rgba(34,229,167,.1);}

/* ==========================================================================
   6. TOOL HUB
   ========================================================================== */
.th-grid{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  margin-top:clamp(26px,3.4vw,40px);
}
.th-card{
  position:relative;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  padding:22px 22px 48px;border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
  color:var(--t-ink-hi);text-decoration:none;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.th-card[hidden]{display:none;}
.th-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:scaleX(0);
  transform-origin:left;transition:transform .55s var(--e-out);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.th-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent;}
.th-card:hover::after{transform:scaleX(1);}
.th-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;
  background:linear-gradient(140deg,rgba(47,95,255,.14),rgba(0,224,255,.1));
  border:1px solid rgba(47,95,255,.2);
}
.th-ico svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.th-card b{font-family:var(--f-display);font-size:1.06rem;font-weight:600;letter-spacing:-.02em;}
.th-card i{font-style:normal;font-size:.88rem;color:var(--t-ink-low);line-height:1.6;}
.th-go{
  position:absolute;left:22px;bottom:17px;display:inline-flex;align-items:center;gap:7px;
  font-size:.81rem;font-weight:600;color:var(--t-ink-mid);
  transition:gap .4s var(--e-out),color .3s;
}
.th-card:hover .th-go{gap:12px;color:var(--blue);}
.th-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.th-free{
  position:absolute;top:18px;right:18px;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#0E8A5F;
  padding:4px 9px;border-radius:var(--pill);
  background:rgba(34,229,167,.13);border:1px solid rgba(34,229,167,.3);
}

/* related tools strip on a tool page */
.tl-more{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.tl-more a{
  display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--paper-line);background:var(--paper);
  font-size:.9rem;font-weight:600;color:var(--t-ink-hi);text-decoration:none;
  transition:border-color .35s,transform .4s var(--e-out),box-shadow .4s;
}
.tl-more a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent;}
.tl-more svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
/* A segmented control that scrolls sideways hides its last option, and
   nothing signals that it can be scrolled — the QR error-correction picker
   lost "H · 30%" off the right edge at 390px. Wrap into a grid instead. */
@media (max-width:560px){
  .tl-seg{flex-wrap:wrap;border-radius:var(--r-md);overflow:visible;}
  .tl-seg button{flex:1 1 auto;min-width:calc(50% - 3px);text-align:center;}
}

@media (max-width:640px){
  .tl-file{grid-template-columns:auto minmax(0,1fr);row-gap:10px;}
  .tl-file > .tl-btn{grid-column:1 / -1;justify-content:center;}
  .tl-actions .btn,.tl-actions .tl-btn{flex:1 1 auto;justify-content:center;}
  .tl-ta{min-height:150px;}
}

@media (prefers-reduced-motion:reduce){
  .tl-drop,.tl-btn,.th-card,.tl-more a{transition:none !important;}
}

/* ==========================================================================
   8. BUSINESS CALCULATORS
   Line-item editor and the printable invoice preview used by
   /tools/invoice-generator.
   ========================================================================== */
.tl-item{
  display:grid;gap:8px;align-items:start;margin-bottom:10px;
  grid-template-columns:1fr;
}
.tl-item-x{
  width:42px;height:46px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--paper-line);background:var(--paper);
  color:#B7252A;font-size:20px;line-height:1;display:grid;place-items:center;
  transition:background .3s,border-color .3s;
}
.tl-item-x:hover{background:rgba(229,72,77,.07);border-color:rgba(229,72,77,.35);}
@media (min-width:620px){
  .tl-item{grid-template-columns:1fr 110px 140px 42px;}
}

/* --- printable invoice preview --- */
.tl-inv{
  border:1px solid var(--paper-line);border-radius:var(--r-md);
  background:var(--paper);padding:clamp(20px,3.2vw,34px);
}
.tl-inv-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px;}
.tl-inv-top h3{
  font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;
  word-break:break-word;
}
.tl-inv-num{margin-top:5px;font-size:.85rem;color:var(--t-ink-low);}
.tl-inv-dim{color:var(--t-ink-low);font-style:italic;}
.tl-inv-parties{
  display:grid;gap:20px;margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
.tl-inv-parties h4{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-ink-low);margin-bottom:7px;font-weight:700;
}
.tl-inv-parties p{font-size:.92rem;line-height:1.6;word-break:break-word;}
.tl-inv-meta{
  display:flex;flex-wrap:wrap;gap:22px;padding:14px 0;margin-bottom:22px;
  border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
}
.tl-inv-meta span{
  display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t-ink-low);font-weight:700;
}
.tl-inv-meta b{font-size:.92rem;}
.tl-inv-table{width:100%;border-collapse:collapse;margin-bottom:10px;}
.tl-inv-table th{
  text-align:left;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t-ink-low);padding:0 8px 10px 0;border-bottom:2px solid var(--t-ink-hi);
}
.tl-inv-table td{
  padding:11px 8px 11px 0;border-bottom:1px solid var(--paper-line);
  font-size:.92rem;vertical-align:top;word-break:break-word;
}
.tl-inv-table .n{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;}
.tl-inv-tot{
  margin-left:auto;max-width:300px;display:flex;flex-direction:column;gap:7px;
  padding-top:16px;
}
.tl-inv-tot .r{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;color:var(--t-ink-mid);}
.tl-inv-tot .r.g{
  font-size:1.12rem;font-weight:700;color:var(--t-ink-hi);
  padding-top:9px;border-top:1px dashed var(--paper-line);
}
.tl-inv-note{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--paper-line);
  font-size:.86rem;color:var(--t-ink-mid);line-height:1.6;
}

/* Print only the invoice. The body class is added just before print() and
   removed on afterprint, so the page is never left in this state. */
@media print{
  body.tl-printing *{visibility:hidden;}
  body.tl-printing .tl-inv,body.tl-printing .tl-inv *{visibility:visible;}
  body.tl-printing .tl-inv{
    position:absolute;left:0;top:0;width:100%;
    border:0;padding:0;border-radius:0;
  }
}