/* ============================================================
   Tool-page chrome - shared by every tool page (invoice, time card, ...).
   Extracted from invoice.css so a tool page links what it actually uses
   instead of borrowing "invoice" styles. Holds: the tool header, the
   .iinput form-control primitive, the editorial/SEO prose block, the toast.
   Invoice-only styles (editor panels, A4 paper render, watermark/signature,
   .isteps) stay in invoice.css.
   ponytail: class names keep their legacy "i" prefix on purpose - renaming
   every .iinput/.iprose across the JS + both pages is pure churn for no gain.
   The file name is what makes the dependency honest.
   ============================================================ */

/* ---------- tool header ---------- */
.itool-head{ padding-block:clamp(2.25rem,5vw,3.75rem) var(--space-7); max-width:1340px; }
.itool-head__cat{ color:var(--cat-money, var(--brand)); font-weight:700; }
.itool-head h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(2.25rem,1.6rem+2.6vw,3.25rem); line-height:1.04; color:var(--text-strong); margin:var(--space-4) 0 var(--space-4); }
.itool-head p{ font-size:var(--text-lg); line-height:1.55; color:var(--text-muted); max-width:54ch; margin:0; }
.itool-badges{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); margin:var(--space-6) 0 0; padding:0; }
.itool-badges li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); }
.itool-badges svg{ width:17px; height:17px; color:var(--brand); flex:0 0 auto; }

/* ---------- form input primitive ---------- */
.iinput{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:var(--text-md); font-weight:500; color:var(--text-strong);
  background:var(--surface); border:1.6px solid var(--border-strong); border-radius:var(--r-ctrl); padding:10px var(--space-3); min-height:44px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
textarea.iinput{ min-height:unset; line-height:1.55; resize:vertical; }
.iinput::placeholder{ color:var(--text-subtle); font-weight:400; opacity:.9; }
.iinput:hover{ border-color:var(--text-subtle); }
.iinput:focus{ outline:none; border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.iinput[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
select.iinput{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-3) center; padding-right:34px; }
[data-theme="dark"] .iinput{ background:#18233a; border-color:#3a486b; }
[data-theme="dark"] .iinput::placeholder{ color:#6b7890; }
[data-theme="dark"] .iinput:focus{ background:#212e44; }

/* ---------- editorial content (breathing room) ---------- */
.iprose{ padding-block:clamp(3.5rem,7vw,5.5rem); max-width:var(--container-narrow, 760px); }
.iprose__intro .eyebrow{ display:block; margin-bottom:var(--space-4); }
.iprose h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.025em; font-size:var(--text-2xl); color:var(--text-strong); margin:clamp(3rem,6vw,4.5rem) 0 var(--space-5); }
.iprose__intro h2{ margin-top:0; }
.iprose p{ font-size:var(--text-md); line-height:1.75; color:var(--text-body); margin:0 0 var(--space-5); }
.ifeatures{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-8); }
.ifeature{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-6); box-shadow:var(--shadow-xs); }
.ifeature h3{ font-family:var(--font-body); font-size:var(--text-md); font-weight:700; color:var(--text-strong); margin:0 0 var(--space-2); }
.ifeature p{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); margin:0; }
.ifaq{ margin-top:var(--space-7); display:flex; flex-direction:column; gap:var(--space-3); }
.ifaq details{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-xs); }
.ifaq summary{ font-weight:700; color:var(--text-strong); cursor:pointer; list-style:none; }
.ifaq summary::-webkit-details-marker{ display:none; }
.ifaq p{ margin:var(--space-3) 0 0; font-size:var(--text-sm); line-height:1.65; color:var(--text-muted); }
@media (max-width:560px){ .ifeatures{ grid-template-columns:1fr; } }

/* ---------- toast ---------- */
.itoast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px); z-index:60;
  background:var(--surface-inverse, #0b1220); color:var(--text-on-dark, #fff); font-size:var(--text-sm); font-weight:600;
  padding:10px var(--space-5); border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); opacity:0; transition:opacity var(--dur-base), transform var(--dur-base); }
.itoast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }