/*!
 * YourCVy — app.css
 * The interactive application on the home page: workspace (editor + live preview),
 * dialogs (upload progress, download/checkout, confirm), toasts, the resume banner
 * and the AI coach. Built on the tokens and components of site.css (.btn, .chip,
 * .callout, .check-list, .sr-only, focus ring); load it after site.css.
 *
 * Contents
 *   0.  App tokens
 *   1.  Page state while the workspace is open
 *   2.  Workspace shell: top bar, body grid, tabs
 *   3.  Panels and shared controls (headings, fields, segmented, range, hints)
 *   4.  Design tab: layout picker, colour swatches, format
 *   5.  Content tab: accordions, entries, tags, photo
 *   6.  Preview stage: toolbar, scaled paper, page-break guides
 *   7.  Tablet and phone layout (< 1024 px): bottom tab bar
 *   8.  Dialogs: shared, upload progress, download, confirm
 *   9.  Toasts
 *   10. Resume banner and drop targets
 *   11. AI coach (floating launcher and inline panel)
 *   12. Motion, forced colours
 *
 * Contrast (WCAG 2.2 AA) — all pairs use site.css tokens:
 *   ink / slate / muted on white and paper-warm ≥ 5.7:1; paper on ink 17:1;
 *   paper-muted on ink 9:1; gold (icons, rules) on ink 8.4:1; ai on ai-tint 5.5:1;
 *   selected states add an ink ring or outline (≥ 3:1 non-text), never colour alone.
 */

/* ==========================================================================
   0. App tokens
   ========================================================================== */

:root {
  --ws-bar-h: 60px;
  --ws-tabbar-h: 64px;
  --ws-panel-w: 400px;
  --ws-stage-bg: #e8e2d6;
  --ws-stage-dot: rgba(14, 14, 14, .07);
  --ws-z: 200;
  --coach-z: 150;
  --toast-z: 400;
  --ws-radius: 10px;
}

/* ==========================================================================
   1. Page state while the workspace is open
   ========================================================================== */

html.ws-open,
html.ws-open body {
  overflow: hidden;
}

/* The landing page stays in the DOM (inert) behind the full-viewport editor. */
html.ws-open #coachLauncher {
  display: none;
}

/* ==========================================================================
   2. Workspace shell
   ========================================================================== */

.ws {
  position: fixed;
  inset: 0;
  z-index: var(--ws-z);
  display: grid;
  grid-template-rows: var(--ws-bar-h) minmax(0, 1fr);
  background: var(--ws-stage-bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.5;
}

/* ---- Top bar ---- */

.ws-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.ws-bar .btn--sm {
  min-height: 40px;
}

.ws-bar__back {
  flex: none;
  padding-inline: .9em 1.1em;
}

.ws-bar__doc {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0;
}

.ws-bar__title {
  width: 100%;
  max-width: 440px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.ws-bar__title:hover {
  border-color: var(--line-strong);
}

.ws-bar__title:focus {
  border-color: var(--ink);
  background: var(--white);
}

.ws-bar__status {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 9px;
  color: var(--slate);
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
}

.ws-bar__status .icon {
  width: 14px;
  height: 14px;
  color: var(--success);
}

.ws-bar__status.is-warn .icon {
  color: var(--warn);
}

.ws-bar__status span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-bar__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* ---- Body grid (desktop ≥ 1024 px): panel | preview ---- */

.ws-body {
  display: grid;
  grid-template-columns: var(--ws-panel-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "tabs stage"
    "side stage";
  min-height: 0;
}

.ws-tabs {
  grid-area: tabs;
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.ws-tab {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--slate);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}

.ws-tab .icon {
  width: 18px;
  height: 18px;
}

.ws-tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.ws-tab:hover {
  color: var(--ink);
}

.ws-tab[aria-selected="true"] {
  color: var(--ink);
}

.ws-tab[aria-selected="true"]::after {
  background: var(--ink);
}

.ws-tab[aria-selected="true"] .icon {
  color: var(--gold-text);
}

.ws-tab:focus-visible {
  outline-offset: -3px;
  border-radius: 8px;
}

.ws-tab__short {
  display: none;
}

.ws-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--white);
}

/* ==========================================================================
   3. Panels and shared controls
   ========================================================================== */

.ws-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ws-panel__inner {
  display: grid;
  gap: 28px;
  padding: 20px 20px 48px;
}

.ws-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ws-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ws-h,
h2.ws-h {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ws-group__value {
  margin: 0;
  color: var(--slate);
  font-size: .875rem;
  font-weight: 600;
}

.ws-label {
  display: block;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.ws-hint {
  margin: 0;
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.5;
}

.ws-note {
  margin: 0;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
}

.ws-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than its cell (a range input's min-content is ~130 px) */
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.ws-field--wide {
  grid-column: 1 / -1;
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.ws-input,
.ws-select {
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--ink);
  font-size: 1rem;              /* ≥ 16px: no zoom on focus in iOS */
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-out);
}

.ws-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.ws-input:hover,
.ws-select:hover {
  border-color: #5f594d;
}

.ws-input:focus,
.ws-select:focus {
  border-color: var(--ink);
}

.ws-input:focus-visible,
.ws-select:focus-visible {
  outline-offset: 1px;
}

.ws-textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

/* Where supported, text areas grow with their content (bullets, profile), so the whole
   entry is visible without an inner scrollbar; elsewhere the rows attribute applies. */
@supports (field-sizing: content) {
  .ws-textarea {
    field-sizing: content;
    max-height: 26rem;
  }
}

.ws-select {
  appearance: none;
  padding-right: 36px;
  background-image: var(--icon-chevron);
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 18px;
  cursor: pointer;
}

/* Segmented control built from real radio buttons. */
.ws-seg {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ws-seg legend {
  margin-bottom: 6px;
  padding: 0;
}

.ws-seg__opts {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--cream);
}

.ws-seg__opt {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.ws-seg__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ws-seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--slate);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.ws-seg__opt input:hover + span {
  color: var(--ink);
}

.ws-seg__opt input:checked + span {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink), 0 1px 3px rgba(14, 14, 14, .12);
}

.ws-seg__opt input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ws-range {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.ws-range input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.ws-range__out {
  min-width: 44px;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ws-reset {
  min-height: 24px;
  font-size: .8125rem;
}

/* ==========================================================================
   4. Design tab
   ========================================================================== */

.ws-filter .chip {
  min-height: 32px;
  padding: .3em .9em;
  font-size: .8125rem;
}

.ws-layouts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px 10px;
}

.ws-layout {
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 4px;
  border-radius: var(--ws-radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ws-layout__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 240 / 339;
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(14, 14, 14, .18);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.ws-layout__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-layout:hover .ws-layout__media {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--line-strong), 0 10px 20px -10px rgba(14, 14, 14, .45);
}

.ws-layout[aria-checked="true"] .ws-layout__media {
  box-shadow: 0 0 0 2.5px var(--ink), 0 10px 22px -10px rgba(14, 14, 14, .5);
}

.ws-layout__tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--white);
}

.ws-layout__tick .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.ws-layout[aria-checked="true"] .ws-layout__tick {
  display: grid;
}

.ws-layout__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(14, 14, 14, .2);
}

.ws-layout__name {
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.ws-layout:focus-visible {
  outline-offset: 0;
}

.ws-layout-info {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--ws-radius);
  background: var(--paper-warm);
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.5;
}

.ws-layout-info p {
  margin: 0;
}

.ws-layout-info__desc {
  color: var(--ink);
  font-size: .875rem;
}

.ws-layout-info__label {
  color: var(--ink);
  font-weight: 700;
}

.ws-layout-info__tier {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

.ws-layout-info__tier::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.ws-layout-info__tier--2::before { background: var(--gold); }
.ws-layout-info__tier--3::before { background: var(--warn-rule); }

/* ---- Colour swatches ---- */

.ws-swatches {
  display: grid;
  gap: 12px;
}

.ws-swatches__family {
  display: grid;
  gap: 6px;
}

.ws-swatches__label {
  margin: 0;
  color: var(--slate);
  font-size: .75rem;
  font-weight: 600;
}

.ws-swatches__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-swatch {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.ws-swatch__chip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sw-bg);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .2);
}

.ws-swatch__side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: var(--sw-side);
  box-shadow: inset -1px 0 0 rgba(14, 14, 14, .08);
}

.ws-swatch__ac {
  position: absolute;
  top: 50%;
  right: 18%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--sw-ac);
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.ws-swatch:hover {
  border-color: var(--line-strong);
}

.ws-swatch[aria-checked="true"] {
  border-color: var(--ink);
}

/* Name tooltip on hover and keyboard focus (the name is also the aria-label). */
.ws-swatch__name {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.ws-swatch:hover .ws-swatch__name,
.ws-swatch:focus-visible .ws-swatch__name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ws-swatch:focus-visible {
  outline-offset: 1px;
}

/* ---- Format ---- */

.ws-format {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 14px;
}

.ws-format .ws-seg,
.ws-format .ws-field--lang,
.ws-format .ws-fit1-row {
  grid-column: 1 / -1;
}

/* ==========================================================================
   5. Content tab
   ========================================================================== */

.ws-form {
  gap: 10px;
}

/* Upload a different CV (shown in the top bar on desktop instead). */
.ws-reupload {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--ws-radius);
  background: var(--paper-warm);
}

.ws-reupload p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}

.ws-reupload .icon {
  color: var(--gold-text);
}

/* ---- Accordions ---- */

.ws-acc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.ws-acc[open] {
  box-shadow: 0 1px 2px rgba(14, 14, 14, .04), 0 6px 18px -10px rgba(14, 14, 14, .18);
}

.ws-acc__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
}

.ws-acc__sum::-webkit-details-marker {
  display: none;
}

.ws-acc__sum:hover .ws-acc__title {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: .25em;
}

.ws-acc__text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.ws-acc__title {
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.ws-acc__hint {
  overflow: hidden;
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-acc__chev {
  flex: none;
  color: var(--slate);
  transition: transform var(--dur-2) var(--ease-out);
}

.ws-acc[open] > .ws-acc__sum .ws-acc__chev {
  transform: rotate(180deg);
}

.ws-acc__body {
  display: grid;
  gap: 14px;
  padding: 2px 16px 18px;
}

/* "Extra personal details" disclosure. */
.ws-sub {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

.ws-sub__sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 32px;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.ws-sub__sum::-webkit-details-marker {
  display: none;
}

.ws-sub__icon {
  width: 18px;
  height: 18px;
  color: var(--gold-text);
  transition: transform var(--dur-2) var(--ease-out);
}

.ws-sub[open] .ws-sub__icon {
  transform: rotate(45deg);
}

/* ---- Repeatable entries (experience, education, extra sections) ---- */

.ws-entries {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* long titles ellipsise instead of widening the panel */
  gap: 10px;
}

.ws-entry {
  border: 1px solid var(--line);
  border-radius: var(--ws-radius);
  background: var(--paper-warm);
}

.ws-entry.is-open {
  background: var(--white);
  border-color: var(--line-strong);
}

.ws-entry__head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px 4px 4px;
}

.ws-entry__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
}

.ws-entry__toggle:hover {
  background: var(--hover-wash);
}

.ws-entry__text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.ws-entry__title,
.ws-entry__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-entry__title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.ws-entry__sub {
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.4;
}

.ws-entry__sub:empty {
  display: none;
}

.ws-entry__chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--slate);
  transition: transform var(--dur-2) var(--ease-out);
}

.ws-entry.is-open .ws-entry__chev {
  transform: rotate(180deg);
}

.ws-entry__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

.ws-tool {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--slate);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.ws-tool .icon {
  width: 18px;
  height: 18px;
}

.ws-tool:hover {
  background: var(--hover-wash);
  color: var(--ink);
}

.ws-tool[data-entry-act="remove"]:hover {
  background: rgba(180, 35, 24, .08);
  color: var(--danger);
}

.ws-tool[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
}

.ws-tool[aria-disabled="true"]:hover {
  background: none;
  color: var(--slate);
}

.ws-entry__body {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--line);
}

.ws-add {
  justify-self: start;
}

.ws-empty {
  margin: 0;
  color: var(--slate);
  font-size: .875rem;
}

.ws-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-quick__btn {
  min-height: 32px;
  padding: .3em .85em .3em .6em;
  font-size: .8125rem;
}

.ws-quick__btn .icon {
  width: 14px;
  height: 14px;
}

/* ---- Tag input (skills, languages) ---- */

.ws-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  cursor: text;
}

.ws-tags:focus-within {
  border-color: var(--ink);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.ws-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  margin: 0;
}

.ws-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 30px;
  padding: 2px 2px 2px 11px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
}

.ws-tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-tag__x {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--slate);
}

.ws-tag__x .icon {
  width: 14px;
  height: 14px;
}

.ws-tag__x:hover {
  background: rgba(14, 14, 14, .08);
  color: var(--ink);
}

.ws-tags__input.ws-input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
}

.ws-tags__input.ws-input:focus-visible {
  outline: none; /* the whole box shows the focus ring */
}

/* ---- Photo ---- */

.ws-photo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ws-photo__img {
  display: grid;
  flex: none;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ws-photo__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-photo__ph .icon {
  width: 36px;
  height: 36px;
  color: var(--slate);
}

.ws-photo__body {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.ws-photo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.ws-photo__remove {
  font-size: .875rem;
}

/* ---- "Show this section on the CV" switch and its badge ---- */

.ws-show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 32px;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ws-show input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}

.ws-acc__off {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--slate);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}

.ws-acc__off[hidden] {
  display: none;
}

/* ---- "… removed · Undo" row in place of a removed entry ---- */

.ws-removed {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px 10px;
  min-height: 48px;
  padding: 4px 6px 4px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--ws-radius);
  background: var(--paper-warm);
}

.ws-removed__text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--slate);
  font-size: .875rem;
}

.ws-removed__text span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ws-removed__text .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.ws-removed__undo {
  flex: none;
  min-height: 36px;
  font-weight: 700;
}

/* ---- Tag notes (already in the list, limit reached, removed · Undo) ---- */

.ws-tags__msg {
  display: flex;
  min-width: 0;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: -4px;
  color: var(--ink);
  font-size: .8125rem;
}

.ws-tags__msg[hidden] {
  display: none;
}

.ws-tags__msg p {
  margin: 0;
}

.ws-tags__undo {
  min-height: 28px;
  font-size: .8125rem;
  font-weight: 700;
}

/* Backspace once in an empty box: the last tag is marked; a second press removes it. */
.ws-tag.is-armed {
  background: var(--ink);
  color: var(--paper);
}

.ws-tag.is-armed .ws-tag__x {
  color: var(--paper);
}

/* "Already in your list" / click-to-edit: point at the element for a moment. */
.ws-tag.is-flash,
.ws-field.is-flash,
.ws-tags.is-flash {
  box-shadow: 0 0 0 3px var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .ws-tag.is-flash,
  .ws-field.is-flash,
  .ws-tags.is-flash {
    animation: ws-flash 1.5s var(--ease-out) both;
  }
}

@keyframes ws-flash {
  0%, 60% { box-shadow: 0 0 0 3px var(--gold); }
  100% { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0); }
}

.ws-field.is-flash {
  border-radius: 8px;
}

/* ---- Improve with AI (profile, bullet points) ---- */

.ws-ai-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
  justify-items: start;
}

.ws-ai-btn {
  min-height: 36px;
  border-color: rgba(109, 40, 217, .45);
  color: var(--ai);
}

.ws-ai-btn:hover {
  border-color: var(--ai);
  background: var(--ai-tint);
}

.ws-ai-btn[aria-disabled="true"] {
  cursor: progress;
  opacity: .8;
}

.ws-ai {
  display: grid;
  min-width: 0;
  gap: 10px;
  justify-self: stretch;
  padding: 12px 14px 12px;
  border: 1px solid rgba(109, 40, 217, .28);
  border-left: 3px solid var(--ai);
  border-radius: 8px;
  background: var(--ai-tint);
}

.ws-ai[hidden] {
  display: none;
}

.ws-ai__label,
.ws-ai__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--ai);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.ws-ai__error {
  color: var(--ink);
}

.ws-ai__label .icon,
.ws-ai__error .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.ws-ai__text {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ws-ai__text p {
  margin: 0;
}

.ws-ai__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.ws-ai__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ws-ai__actions .btn--sm {
  min-height: 36px;
}

/* ---- Keep a copy of the draft (save / open a .json file) ---- */

.ws-keep {
  display: grid;
  min-width: 0;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 16px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--paper-warm);
}

.ws-keep__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.ws-keep__title .icon {
  color: var(--gold-text);
}

.ws-keep__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Fit to one page (Design › Format and the preview toolbar). */
.ws-fit1-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ws-fit1-row[hidden],
.ws-fit1[hidden] {
  display: none;
}

.ws-fit1 {
  min-height: 36px;
  background: var(--white);
}

/* ==========================================================================
   6. Preview stage
   ========================================================================== */

.ws-stage {
  grid-area: stage;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background-color: var(--ws-stage-bg);
  background-image: radial-gradient(var(--ws-stage-dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.ws-stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 20px 8px;
}

.ws-zoom {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}

.ws-zoom__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--slate);
  font-size: .8125rem;
  font-weight: 600;
}

.ws-zoom__btn .icon {
  width: 16px;
  height: 16px;
}

.ws-zoom__btn:hover {
  color: var(--ink);
}

.ws-zoom__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.ws-stage__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ws-stage__sep {
  color: var(--slate);
}

.ws-stage__scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;   /* the fit width must not change when a scrollbar appears */
  padding: 8px 0 56px;
}

.ws-stage__scroll:focus-visible {
  outline-offset: -4px;
}

.ws-frame {
  position: relative;
  margin: 0 auto;
}

/* The CV keeps its true paper width; only this outer box is scaled (from JS). */
.ws-paper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: var(--white);
  box-shadow: var(--shadow-paper);
}

.ws-paper__doc {
  overflow: hidden;   /* cosmetic only; the CV itself is never altered */
}

.ws-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dark and light dashes in turn, so the break line shows on light and dark CVs alike. */
.ws-guide {
  position: absolute;
  left: -12px;
  right: -12px;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(14, 14, 14, .72) 0 8px, rgba(255, 255, 255, .9) 8px 16px);
}

.ws-guide__label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  transform: translateY(-50%);
}

.ws-stage__note {
  margin: 0;
  padding: 4px 20px 10px;
  color: var(--slate);
  font-size: .8125rem;
  text-align: center;
}

/* Click to edit: the preview jumps to the field that holds the clicked text. */
.ws-paper__doc .cv-doc {
  cursor: pointer;
}

/* ==========================================================================
   7. Tablet and phone (< 1024 px): compact top bar, bottom tab bar
   ========================================================================== */

@media (max-width: 1023.98px) {
  .ws {
    --ws-bar-h: 56px;
  }

  .ws-bar {
    gap: 8px;
    padding: 0 8px 0 6px;
  }

  .ws-bar__back {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-color: transparent;
  }

  .ws-bar__back-label,
  .ws-bar__dl-pdf {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .ws-bar__title {
    padding-inline: 6px;
    font-size: 16px; /* ≥ 16px, so iOS Safari doesn't zoom in when it is tapped */
  }

  .ws-bar__status {
    padding-left: 7px;
    font-size: .6875rem;
  }

  .ws-bar__upload {
    display: none !important;
  }

  .ws-bar__download {
    padding-inline: .9em 1.05em;
  }

  .ws-reupload {
    display: flex;
  }

  .ws-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "main"
      "tabs";
  }

  .ws-side,
  .ws-stage {
    grid-area: main;
  }

  .ws-side {
    border-right: 0;
  }

  .ws-tabs {
    z-index: 2;
    gap: 0;
    padding: 0 4px env(safe-area-inset-bottom);
    border-right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -4px 16px -8px rgba(14, 14, 14, .18);
  }

  .ws-tab {
    flex-direction: column;
    gap: 3px;
    min-height: var(--ws-tabbar-h);
    padding: 6px 2px;
    font-size: .75rem;
  }

  .ws-tab .icon {
    width: 22px;
    height: 22px;
  }

  .ws-tab::after {
    top: -1px;
    bottom: auto;
    left: 22%;
    right: 22%;
    border-radius: 0 0 3px 3px;
  }

  .ws-tab__long {
    display: none;
  }

  .ws-tab__short {
    display: inline;
  }

  /* Only the chosen view shows. The preview stays laid out (so its page count is
     always measured) but is invisible and inert (set from JS) while another tab is
     open. visibility alone is not enough: the CV root resets visibility:visible for
     itself, so the whole stage is also clipped away and made transparent. */
  .ws[data-view="preview"] .ws-side {
    display: none;
  }

  .ws:not([data-view="preview"]) .ws-stage {
    visibility: hidden;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
  }

  .ws-panel__inner {
    padding: 16px 16px 32px;
  }

  /* Tablets: keep forms and the chat at a comfortable reading width. */
  .ws-panel__inner,
  .ws-coach {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .ws-stage__bar {
    padding: 10px 12px 6px;
  }

  .ws-stage__scroll {
    padding-bottom: 24px;
  }
}

@media (max-width: 399.98px) {
  .ws-bar__status {
    display: none;
  }

  .ws-entry__tools .ws-tool {
    width: 32px;
  }
}

/* ==========================================================================
   8. Dialogs
   ========================================================================== */

/* site.css resets every margin to 0, which would pin modal dialogs to the top-left
   corner; margin:auto restores the browser's centring in the top layer. */
.yc-dialog {
  inset: 0;
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(14, 14, 14, .06);
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.55;
}

.yc-dialog::backdrop {
  background: rgba(14, 14, 14, .58);
}

.yc-dialog__inner {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.yc-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.yc-dialog__title,
h2.yc-dialog__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.yc-dialog__text {
  margin: 0;
  color: var(--slate);
}

.yc-dialog__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -6px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--slate);
}

.yc-dialog__close:hover {
  background: var(--hover-wash);
  color: var(--ink);
}

.yc-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Upload progress ---- */

.yc-dialog--progress {
  width: min(440px, calc(100vw - 32px));
}

.up-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.up-head__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(201, 168, 76, .18);
  color: var(--gold-text);
}

.up-head__icon .icon {
  width: 24px;
  height: 24px;
}

.up-file {
  margin: 2px 0 0;
  color: var(--slate);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}

.up-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 4px 0;
}

.up-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  color: var(--slate);
}

.up-step__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
}

.up-step__mark .icon {
  display: none;
  width: 15px;
  height: 15px;
}

.up-step__label {
  min-width: 0;
}

.up-step__time {
  color: var(--slate);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.up-step__note {
  grid-column: 2;
  color: var(--warn);
  font-size: .8125rem;
  font-weight: 600;
}

.up-step__note:empty {
  display: none;
}

.up-step[data-state="active"] {
  color: var(--ink);
  font-weight: 600;
}

.up-step[data-state="active"] .up-step__mark {
  border-color: var(--gold);
}

.up-step[data-state="active"] .up-step__spin {
  display: block;
  color: var(--gold-text);
}

.up-step[data-state="done"] {
  color: var(--ink);
}

.up-step[data-state="done"] .up-step__mark {
  border-color: var(--success);
  background: var(--success);
  color: var(--white);
}

.up-step[data-state="done"] .up-step__check {
  display: block;
  stroke-width: 3;
}

.up-step[data-state="failed"] .up-step__mark {
  border-style: dashed;
}

.up-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--ws-radius);
  background: var(--paper-warm);
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.5;
}

.up-privacy .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ---- Download ---- */

.yc-dialog--download {
  width: min(520px, calc(100vw - 32px));
}

.dl-body {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.dl-body > p,
.dl-body .callout p {
  margin: 0;
}

.dl-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-warm);
}

.dl-thumb {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 3px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(14, 14, 14, .35);
}

.dl-thumb__paper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.dl-facts {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  min-width: 0;
  margin: 0;
}

.dl-facts dt {
  color: var(--slate);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dl-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dl-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.dl-price__amount {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.dl-price__terms {
  margin: 0;
  color: var(--slate);
  font-size: .9375rem;
  font-weight: 600;
}

.dl-price--loading .dl-price__amount {
  color: var(--slate);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
}

.dl-get {
  margin: 0;
  font-size: .9375rem;
}

.dl-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
}

.dl-guarantee .icon {
  flex: none;
  color: var(--success);
}

.dl-actions {
  display: grid;
  gap: 8px;
}

.dl-legal {
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.5;
}

.dl-status {
  min-height: 1.4em;
  color: var(--slate);
  font-size: .875rem;
}

.dl-status:empty {
  min-height: 0;
}

.dl-status.is-error {
  color: var(--danger);
  font-weight: 600;
}

.dl-paid .callout__title,
.dl-warn .callout__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-paid .callout__title .icon {
  color: var(--success);
}

.dl-verify__msg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.icon--spin {
  animation: yc-spin 1s linear infinite;
}

@keyframes yc-spin {
  to { transform: rotate(360deg); }
}

/* ---- Confirm ---- */

.yc-dialog--ask {
  width: min(420px, calc(100vw - 32px));
}

/* ---- Phones: every dialog becomes a bottom sheet, within thumb reach ----
   (after the variants above, so it wins over their widths) */

@media (max-width: 559.98px) {
  .yc-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .yc-dialog__inner {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   9. Toasts — bottom centre, never under the bottom tab bar
   ========================================================================== */

.toast-stack {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: var(--toast-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
  transform: translateX(-50%);
}

.toast-stack:empty {
  display: none;
}

@media (max-width: 1023.98px) {
  html.ws-open .toast-stack {
    bottom: calc(var(--ws-tabbar-h) + 12px + env(safe-area-inset-bottom));
  }
}

/* On the landing page, below ~860 px a centred toast would reach the floating coach
   button in the corner: sit above it instead. */
@media (max-width: 859.98px) {
  html:not(.ws-open) .toast-stack {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 10px 11px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-2);
  font-size: .9375rem;
  line-height: 1.45;
  pointer-events: auto;
  transition: opacity var(--dur-2) var(--ease-out);
  --focus-ring: var(--gold);
}

.toast__icon {
  display: grid;
  flex: none;
  padding-top: 1px;
  color: var(--paper-muted);
}

.toast--success .toast__icon { color: #6ee7a8; }
.toast--warn .toast__icon { color: var(--gold); }
.toast--error .toast__icon { color: #ff8a80; }

.toast--error {
  box-shadow: var(--shadow-2), inset 4px 0 0 #ff8a80;
}

.toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: 1px;
}

.toast__action {
  flex: none;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gold);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.toast__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--paper-muted);
}

.toast__close:hover {
  background: rgba(245, 240, 232, .1);
  color: var(--paper);
}

.toast__close .icon {
  width: 16px;
  height: 16px;
}

.toast.is-leaving {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: yc-toast-in var(--dur-2) var(--ease-out);
  }

  .yc-dialog[open] {
    animation: yc-fade-in var(--dur-2) var(--ease-out);
  }
}

@keyframes yc-toast-in {
  from { opacity: 0; translate: 0 8px; }
}

@keyframes yc-fade-in {
  from { opacity: 0; }
}

/* Phones: dialogs slide up as bottom sheets (after the fade above, so this one wins). */
@media (max-width: 559.98px) and (prefers-reduced-motion: no-preference) {
  .yc-dialog[open] {
    animation: yc-sheet-in .22s cubic-bezier(.2, .8, .2, 1);
  }
}

@keyframes yc-sheet-in {
  from { transform: translateY(24px); opacity: .4; }
  to { transform: none; opacity: 1; }
}

/* ==========================================================================
   10. Resume banner and drop targets
   ========================================================================== */

.resume-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 12px;
}

.resume-banner__text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
}

.resume-banner__text .icon {
  flex: none;
  color: var(--fg-accent, var(--gold-text));
}

.resume-banner__meta {
  color: var(--fg-muted, var(--slate));
}

.resume-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* Fallback highlight; home.css may style its own drop zone. */
:where([data-dropzone].is-dragover) {
  outline: 3px dashed var(--gold-text);
  outline-offset: 4px;
}

.ws.is-dragover::after {
  content: "Drop your CV to upload it";
  position: fixed;
  inset: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 3px dashed var(--gold);
  border-radius: 16px;
  background: rgba(14, 14, 14, .55);
  color: var(--paper);
  font-size: 1.25rem;
  font-weight: 700;
  pointer-events: none;
}

/* ==========================================================================
   11. AI coach
   ========================================================================== */

/* ---- Floating launcher (landing page) ---- */

.coach[data-mode="floating"] {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: var(--coach-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.coach[data-mode="floating"] > * {
  pointer-events: auto;
}

.coach__fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
  --focus-ring: var(--gold-text);
}

.coach__fab .icon {
  color: var(--gold);
}

.coach__fab:hover {
  background: #2a2a2a;
}

.coach__fab:active {
  transform: translateY(1px);
}

.coach__pill {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: min(330px, calc(100vw - 40px));
  padding: 3px 3px 3px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.coach__pill-text {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

/* Keyboard focus scrolled into view must clear the floating launcher (WCAG 2.4.11). */
html:has(#coachLauncher .coach[data-mode="floating"]) {
  scroll-padding-bottom: 88px;
}

.coach__pill-text:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.coach__pill-x {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--slate);
}

.coach__pill-x:hover {
  background: var(--hover-wash);
  color: var(--ink);
}

.coach__pill-x .icon {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .coach__pill:not([hidden]) {
    animation: yc-toast-in var(--dur-3) var(--ease-out);
  }
}

.coach[data-mode="floating"] .coach__panel {
  position: fixed;
  right: 20px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 40px));
  height: min(640px, calc(100dvh - 120px));
  border-radius: 16px;
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
}

/* While the panel is open the launcher and pill make way (the panel has its own ×). */
.coach[data-mode="floating"].is-open .coach__pill {
  display: none;
}

@media (max-width: 599.98px) {
  .coach[data-mode="floating"] {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .coach__pill {
    display: none;
  }

  .coach__fab {
    width: 52px;
    padding: 0;
    justify-content: center;
  }

  .coach__fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .coach[data-mode="floating"] .coach__panel {
    left: 8px;
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    height: min(78dvh, 640px);
  }
}

/* ---- Panel (shared by both modes) ---- */

.coach__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.5;
}

.coach__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: var(--ink);
  color: var(--paper);
  --focus-ring: var(--gold);
}

.coach__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201, 168, 76, .16);
  color: var(--gold);
}

.coach__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.coach__title,
h2.coach__title {
  margin: 0;
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.coach__sub {
  margin: 0;
  color: var(--paper-muted);
  font-size: .8125rem;
  line-height: 1.4;
}

.coach__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--paper-muted);
}

.coach__close:hover {
  background: rgba(245, 240, 232, .1);
  color: var(--paper);
}

.coach__disclosure {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ai-tint);
  color: var(--slate);
  font-size: .75rem;
  line-height: 1.45;
}

.coach__disclosure .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--ai);
}

.coach__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-warm);
}

.coach__log:focus-visible {
  outline-offset: -3px;
}

.coach-msg {
  display: grid;
  gap: 6px;
  max-width: 90%;
  min-width: 0;
}

.coach-msg--user {
  align-self: flex-end;
  justify-items: end;
}

.coach-msg__body {
  min-width: 0;
  padding: 10px 14px;
  overflow-wrap: anywhere;
}

.coach-msg__body > * + * {
  margin-top: .55em;
}

.coach-msg__body ul,
.coach-msg__body ol {
  padding-left: 1.25em;
}

.coach-msg__body li + li {
  margin-top: .25em;
}

.coach-msg__body code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--f-mono);
  font-size: .875em;
}

.coach-msg--user .coach-msg__body {
  border-radius: 14px 14px 4px 14px;
  background: var(--ink);
  color: var(--paper);
}

.coach-msg--user .coach-msg__body code {
  background: rgba(245, 240, 232, .14);
}

.coach-msg--bot .coach-msg__body {
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  background: var(--white);
  color: var(--ink);
}

.coach-msg--error .coach-msg__body {
  border-color: rgba(217, 115, 46, .45);
  background: var(--warn-bg);
}

.coach-msg__note {
  margin: 0;
  color: var(--slate);
  font-size: .75rem;
}

.coach-msg__tools {
  display: flex;
  gap: 6px;
}

.coach-msg__copy,
.coach-msg__retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--slate);
  font-size: .75rem;
  font-weight: 600;
}

.coach-msg__copy:hover,
.coach-msg__retry:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.coach-msg__copy .icon,
.coach-msg__retry .icon {
  width: 14px;
  height: 14px;
}

.coach__typing {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  background: var(--paper-warm);
  color: var(--slate);
  font-size: .8125rem;
}

.coach__dots {
  display: inline-flex;
  gap: 4px;
}

.coach__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai);
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .coach__dots span {
    animation: yc-dot 1.2s ease-in-out infinite;
  }

  .coach__dots span:nth-child(2) { animation-delay: .15s; }
  .coach__dots span:nth-child(3) { animation-delay: .3s; }
}

@keyframes yc-dot {
  0%, 60%, 100% { opacity: .35; translate: 0 0; }
  30% { opacity: 1; translate: 0 -3px; }
}

.coach__chips {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 0;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.coach__chip {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid rgba(109, 40, 217, .32);
  border-radius: var(--radius-pill);
  background: var(--ai-tint);
  color: var(--ai);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

.coach__chip:hover {
  border-color: var(--ai);
}

.coach__form {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 6px;
  background: var(--white);
}

.coach__chips:not([hidden]) + .coach__form {
  padding-top: 10px;
}

.coach__chips[hidden] + .coach__form {
  border-top: 1px solid var(--line);
}

.coach__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 168px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
}

.coach__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.coach__input:focus {
  border-color: var(--ink);
}

.coach__send {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out);
}

.coach__send:hover {
  background: var(--gold-hover);
}

.coach__send:disabled {
  opacity: .5;
}

.coach__hint {
  flex: none;
  margin: 0;
  padding: 0 16px 10px;
  background: var(--white);
  color: var(--slate);
  font-size: .75rem;
}

/* ---- Inline (workspace AI coach tab) ---- */

.ws-panel--coach {
  display: flex;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.ws-panel--coach[hidden] {
  display: none;
}

.ws-coach,
.coach[data-mode="inline"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.coach[data-mode="inline"] .coach__panel {
  flex: 1 1 auto;
}

.coach[data-mode="inline"] .coach__head {
  padding-block: 12px;
}

/* ==========================================================================
   12. Forced colours (Windows high contrast)
   Box-shadows and background-only states disappear there: redraw them.
   ========================================================================== */

@media (forced-colors: active) {
  .ws-layout[aria-checked="true"] .ws-layout__media,
  .ws-seg__opt input:checked + span,
  .ws-zoom__btn[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: 1px;
  }

  .ws-swatch[aria-checked="true"] {
    border-color: Highlight;
  }

  .ws-swatch__chip {
    forced-color-adjust: none;
  }

  .ws-tab[aria-selected="true"]::after {
    forced-color-adjust: none;
    background: Highlight;
  }

  .ws-guide {
    height: 0;
    border-top: 2px dashed CanvasText; /* background images are dropped in forced colours */
  }

  .up-step[data-state="done"] .up-step__mark {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
}