/* Free tools: shared form fields, document preview and export bar. Layout reuses .calc / .calc-in / .calc-out from
   resources.css (grey input panel left, sticky output right, one column on phones). */

/* ---------- Form fields ---------- */
.tk-field { display: flex; flex-direction: column; gap: 6px; }
.tk-field label { font-size: 14px; font-weight: 600; color: var(--black); }
.tk-field small { font-size: 13px; line-height: 18px; color: var(--label); }
.tk-field input[type="text"], .tk-field input[type="email"], .tk-field input[type="date"], .tk-field input[type="time"],
.tk-field input[type="number"], .tk-field select, .tk-field textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--black); background: var(--white);
  border: 1px solid var(--line, #E4E4E7); border-radius: 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.tk-field textarea { min-height: 96px; resize: vertical; line-height: 22px; }
.tk-field input[type="text"], .tk-field input[type="email"], .tk-field input[type="date"], .tk-field input[type="time"], .tk-field input[type="number"] { min-height: 46px; }
.tk-field input:focus, .tk-field select:focus, .tk-field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(112, 76, 199, .15); }
.tk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-group { display: flex; flex-direction: column; gap: 16px; }
.tk-group > h3 { font-size: 15px; font-weight: 700; color: var(--black); }

/* Choice chips (single or multi select) */
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chips button { padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--body); background: var(--white);
  border: 1px solid var(--line, #E4E4E7); border-radius: 999px; cursor: pointer; transition: all .15s ease; }
.tk-chips button[aria-pressed="true"] { color: var(--white); background: var(--purple); border-color: var(--purple); }

/* Logo upload */
.tk-logo { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--white); border: 1px dashed var(--line, #D4D4D8); border-radius: 12px; }
.tk-logo img { max-height: 40px; max-width: 120px; object-fit: contain; }
.tk-logo img[hidden] { display: none; }
.tk-logo label.btn { cursor: pointer; }
.tk-logo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tk-logo .tk-clear { margin-left: auto; font: inherit; font-size: 13px; color: var(--label); background: none; border: 0; cursor: pointer; }

/* Repeatable rows (shot list, schedule) */
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-item { display: grid; gap: 8px; padding: 12px; background: var(--white); border-radius: 12px; position: relative; }
.tk-item .tk-remove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--label);
  background: none; border: 0; border-radius: 8px; cursor: pointer; }
.tk-item .tk-remove:hover { background: var(--grey); color: var(--black); }
.tk-add { align-self: flex-start; font: inherit; font-size: 14px; font-weight: 600; color: var(--purple); background: none; border: 0; cursor: pointer; padding: 4px 0; }

/* ---------- Output: document preview + export bar ---------- */
.tk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-bar .btn { gap: 8px; }
.tk-bar .tk-status { font-size: 13px; color: var(--label); margin-left: 4px; }
.tk-paper { background: var(--white); border: 1px solid var(--line, #E4E4E7); border-radius: 16px; padding: 40px 44px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06); color: #18181B; font-size: 14px; line-height: 22px; }
.tk-paper h1 { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; }
.tk-paper h2 { font-size: 15px; line-height: 22px; font-weight: 700; margin: 22px 0 6px; }
.tk-paper p, .tk-paper li { margin-bottom: 6px; }
.tk-paper ul, .tk-paper ol { padding-left: 20px; }
.tk-paper table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.tk-paper th { text-align: left; font-weight: 700; color: #3F3F46; padding: 8px 10px; background: #F4F4F5; }
.tk-paper td { padding: 8px 10px; border-bottom: 1px solid #F0F0F2; vertical-align: top; }
.tk-paper .tk-meta { color: #71717A; font-size: 13px; }
.tk-paper .tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.tk-paper .tk-head img { max-height: 48px; max-width: 160px; object-fit: contain; }
.tk-paper .tk-blank { color: #A1A1AA; }
.tk-paper .tk-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.tk-paper .tk-sign div { border-top: 1px solid #A1A1AA; padding-top: 6px; font-size: 12px; color: #52525B; }
.tk-paper .tk-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid #F0F0F2; font-size: 11px; line-height: 16px; color: #A1A1AA; }

/* Result panel for calculators (big number + breakdown) */
.tk-result { padding: 28px; background: var(--white); border: 1px solid var(--line, #E4E4E7); border-radius: var(--r-panel); }
.tk-result .tk-big { font-size: 44px; line-height: 50px; font-weight: 800; letter-spacing: -1px; color: var(--black); }
.tk-result .tk-sub { font-size: 14px; color: var(--body); margin-top: 4px; }
.tk-result dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.tk-result dt { color: var(--body); }
.tk-result dd { font-weight: 600; color: var(--black); text-align: right; }

/* ---------- Free tools hub ---------- */
.tk-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tk-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--grey); border-radius: var(--r-card); color: inherit;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.tk-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
.tk-card .tk-cat { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--purple); }
.tk-card h3 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--black); }
.tk-card p { font-size: 15px; line-height: 22px; letter-spacing: -0.01em; color: var(--body); flex: 1; }
.tk-card .link-arrow { margin-top: 8px; }
.tk-card[hidden] { display: none; }

@media (max-width: 960px) {
  .tk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-row { grid-template-columns: 1fr; }
  .tk-paper { padding: 24px 20px; }
  .tk-paper .tk-sign { grid-template-columns: 1fr; }
}

/* ---------- Print: only the document ----------
   tools-kit.js copies the paper into #tk-print (a direct child of body) before printing, so everything else can be
   hidden with a plain selector */
#tk-print { display: none; }
@media print {
  html.tk-printing body > :not(#tk-print) { display: none; }
  html.tk-printing #tk-print { display: block; }
  #tk-print .tk-paper { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  @page { margin: 18mm; }
}

/* ---------- Talent release form + script length calculator (free-tools-b) ---------- */
.tk-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 14px; line-height: 20px; color: var(--black);
  background: var(--lavender, #EFEAFB); border-radius: 12px; }
.tk-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--purple); }
.tk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--body); cursor: pointer; }
.tk-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--purple); }
.tk-logo label.btn svg { width: 16px; height: 16px; margin-right: 6px; }
.tk-bar .btn svg { width: 16px; height: 16px; }
.tk-paper .tk-details { margin-bottom: 4px; }
.tk-paper .tk-details th { width: 120px; background: none; padding: 5px 10px 5px 0; color: #71717A; font-weight: 600; }
.tk-paper .tk-details td { padding: 5px 0; }
.tk-result .tk-fit { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 600; }
.tk-result dl:empty { display: none; }
.tk-field[hidden], .tk-group[hidden], .tk-row[hidden] { display: none; }
.tk-offscreen { position: absolute; left: -10000px; top: 0; width: 600px; }
.calc-out { min-width: 0; }
.tk-prose p, .tk-prose li { font-size: 16px; line-height: 26px; color: var(--body); }
.tk-prose p + p, .tk-prose h3 + p, .tk-prose p + ul, .tk-prose ul + p { margin-top: 12px; }
.tk-prose h3 { margin-top: 28px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--black); }
.tk-prose ul { padding-left: 20px; list-style: disc; }
.tk-prose li + li { margin-top: 6px; }
.tk-prose .shead { margin-bottom: 20px; }
.tk-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.tk-table th { text-align: left; font-weight: 700; color: var(--black); padding: 10px 12px 10px 0; }
.tk-table td { padding: 10px 12px 10px 0; color: var(--body); border-top: 1px solid #EBEBEF; }
@media (max-width: 640px) {
  .tk-table { font-size: 14px; }
  .tk-paper .tk-details th { width: 96px; }
}

/* ---------- Generators: how-to tips list (creative brief, shot list) ---------- */
.tk-tips ol { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.tk-tips li { font-size: 15px; line-height: 23px; color: var(--body); }
.tk-tips li b { color: var(--black); }
.tk-item select { width: 100%; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--black); background: var(--white);
  border: 1px solid var(--line, #E4E4E7); border-radius: 12px; }
.tk-item input { width: 100%; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--black); background: var(--grey);
  border: 1px solid transparent; border-radius: 12px; outline: none; }
.tk-item input:focus, .tk-item select:focus { border-color: var(--purple); }
.tk-item .tk-field { gap: 8px; padding-right: 28px; }
.tk-item .tk-row { gap: 8px; }
/* Phones: wide document tables (shot list has six columns) wrap instead of pushing the page sideways */
@media (max-width: 640px) {
  .tk-paper { overflow-x: auto; }
  .tk-paper th, .tk-paper td { padding: 6px; overflow-wrap: anywhere; }
}
/* ---------- Tool: video cost calculator + social video specs (shared bits) ---------- */
.tk-cost .tk-result .btn, .tk-specs .tk-result .btn { margin-top: 16px; }
.tk-cost .calc-note, .tk-specs .calc-note { margin-top: 14px; }
.tk-compare { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--body); }
.tk-compare b { color: var(--black); }
.tk-compare span { float: right; font-weight: 700; color: var(--black); }
.tk-compare small { display: block; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--label); }
.tk-compare a { color: var(--purple); font-weight: 600; }
.tk-prose h2 { margin-bottom: 16px; }
.tk-prose h2 + * { margin-top: 0; }
.tk-prose p, .tk-prose li { font-size: 17px; line-height: 28px; color: var(--body); }
.tk-prose p { margin-bottom: 16px; }
.tk-prose ul { padding-left: 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.tk-prose li b { color: var(--black); }
.tk-prose a { color: var(--purple); font-weight: 600; }
.tk-prose .h2:not(:first-child) { margin-top: 40px; }
.tk-sources li { font-size: 15px; line-height: 22px; }

/* Aspect ratio preview with safe zones */
.tk-frame-wrap { display: grid; place-items: center; height: 220px; padding: 12px; background: var(--white); border-radius: 16px; }
.tk-frame { position: relative; width: 100%; max-width: 300px; max-height: 100%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #EDE7FA, #DFD9F6); border: 2px solid var(--purple); border-radius: 10px; transition: aspect-ratio .3s ease; }
.tk-frame.is-tall { width: auto; height: 100%; }
.tk-frame span { position: relative; font-size: 15px; font-weight: 700; color: var(--purple); }
.tk-frame i { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(112, 76, 199, .16) 0 6px, transparent 6px 12px); }
.tk-frame .tk-safe-t { top: 0; height: var(--safe-t, 0%); }
.tk-frame .tk-safe-b { bottom: 0; height: var(--safe-b, 0%); }

/* Full specs table */
.tk-spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-spec-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tk-spec-table th, .tk-spec-table td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.tk-spec-table thead th { font-size: 13px; font-weight: 600; color: var(--label); }
.tk-spec-table tbody th { font-weight: 700; color: var(--black); white-space: nowrap; }
.tk-spec-table tbody th small { display: block; font-weight: 500; color: var(--label); }
.tk-spec-table td { color: var(--body); }
.tk-src-note { margin-top: 12px; }

/* ---------- Selects (all tools) ----------
   Last in the file so it wins over the tool blocks above that set the background shorthand */
.tk-field select, .tk-item select { -webkit-appearance: none; appearance: none; min-height: 46px; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; text-overflow: ellipsis; }

/* ---------- Letter spacing (all tools) ----------
   Plus Jakarta Sans runs loose at its default tracking; match the site's text (.lead, .post h3) */
.tk-card .link-arrow, .tk-field label, .tk-group > h3, .tk-chips button, .tk-prose p, .tk-prose li, .tk-tips li, .tk-result .tk-sub,
.tk-result dt, .tk-result dd, .tk-note { letter-spacing: -0.01em; }
.tk-prose h3, .tk-result .tk-big { letter-spacing: -0.025em; }