/* Shared look for the career tools (cover letter, interview prep, job tracker).
   Colour variables only; print uses Canvas and CanvasText so documents print dark on white. */
.tk-wide { max-width: 1320px; }
.tk-intro { padding-top: 32px; }
.tk-intro h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.2; margin: 16px 0 8px; }
.tk-intro p { max-width: 780px; }
.tk-private {
  background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 16px;
}

/* Form on the left, sticky preview on the right (wide screens) */
.tk-app { display: grid; gap: 24px; padding-bottom: 40px; }
@media (min-width: 1040px) {
  .tk-app.tk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .tk-split .tk-preview-col { position: sticky; top: 76px; max-height: calc(100vh - 88px); overflow: auto; }
}
.tk-app > * { min-width: 0; }

.tk-panel { margin: 0 0 20px; }
.tk-panel h2 { font-size: 1.25rem; margin: 0 0 8px; }
.tk-panel h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.tk-panel .hint, .tk-hint { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.tk-panel .field .hint { margin: -4px 0 0; }
.tk-panel textarea, .tk-panel select {
  font: inherit; font-weight: 400; color: var(--text); background: var(--bg);
  border: 1px solid var(--muted); border-radius: 8px; padding: 10px 12px; width: 100%;
}
.tk-panel textarea { resize: vertical; }
.tk-panel .field input { border-color: var(--muted); }
.tk-panel textarea:focus, .tk-panel select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tk-panel ::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
.tk-panel .check { margin: 0 0 12px; min-height: 44px; }
.tk-wide-field { grid-column: 1 / -1; }

.tk-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.tk-panel .btn, .tk-btn { border: 2px solid var(--accent); padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.tk-panel .btn-outline { background: transparent; color: var(--accent); }
/* Keep full contrast on hover (the template fades buttons to 0.9) */
.tk-panel .btn:hover { opacity: 1; text-decoration: underline; }
.tk-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-link {
  font: inherit; font-size: 0.92rem; background: none; border: 0; padding: 4px 0; min-height: 44px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.tk-status { min-height: 1.5em; margin: 12px 0 0; font-weight: 600; }

.tk-more { margin: 4px 0 12px; }
.tk-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 10px 0; min-height: 44px; }
.tk-more[open] > summary { margin-bottom: 8px; }

.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.tk-chip {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; min-height: 44px; text-align: left;
  color: var(--accent); background: var(--bg); border: 1px solid var(--accent); border-radius: 999px; padding: 8px 14px;
}
.tk-chip:hover { background: var(--badge-bg); color: var(--badge-text); }
.tk-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

.tk-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 0 0 16px;
}
.tk-card > legend { font-weight: 600; padding: 0 6px; }
.tk-badge {
  display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-text);
}

.tk-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tk-preview-head h2 { font-size: 1.25rem; margin: 0 0 10px; }
.tk-preview-head p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.tk-jump { margin: 8px 0 0; }
@media (min-width: 1040px) { .tk-jump { display: none; } }

/* A printable document (letter, answers) */
.tk-doc {
  --tk-ink: var(--text); --tk-muted: var(--muted); --tk-bg: var(--bg); --tk-line: var(--border);
  --tk-acc-raw: var(--accent); --tk-acc: var(--tk-acc-raw);
  background: var(--tk-bg); color: var(--tk-ink); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-radius: 6px; padding: clamp(18px, 4vw, 44px); font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere;
}
.tk-doc.A-travel { --tk-acc-raw: var(--t-travel); }
.tk-doc.A-health { --tk-acc-raw: var(--t-health); }
.tk-doc.A-academy { --tk-acc-raw: var(--t-academy); }
.tk-doc.A-money { --tk-acc-raw: var(--t-money); }
.tk-doc.A-mono { --tk-acc-raw: var(--text); }
.tk-doc.F-serif { font-family: Georgia, "Times New Roman", serif; }
.tk-doc p { margin: 0 0 0.9em; }

@media print {
  html, body { color-scheme: light; background: Canvas; }
  body > *:not(main), main > *:not(.tk-app), .tk-app > *:not(.tk-print), .tk-print > *:not(.tk-doc), .tk-noprint { display: none !important; }
  .tk-app, .container { display: block; max-width: none; padding: 0; margin: 0; }
  .tk-print { position: static !important; max-height: none !important; overflow: visible !important; }
  .tk-doc {
    --tk-ink: CanvasText; --tk-bg: Canvas;
    --tk-muted: color-mix(in srgb, CanvasText 72%, Canvas);
    --tk-line: color-mix(in srgb, CanvasText 28%, Canvas);
    color-scheme: light; border: 0; box-shadow: none; padding: 0; border-radius: 0; font-size: 11pt;
  }
}
@media print and (prefers-color-scheme: dark) {
  .tk-doc { --tk-acc: color-mix(in srgb, var(--tk-acc-raw) 45%, CanvasText); }
}