/* ===========================================================================
   Tokens

   Every colour in the app resolves through these. The dark block redefines
   only the values, never the rules, so there is exactly one place to change
   a colour and no rule that exists in one theme but not the other.
   =========================================================================== */
:root {
  /* Every token is one light-dark(light, dark) pair, so a colour is defined
     exactly once. Which half applies is decided entirely by `color-scheme`
     below -- there is no duplicated dark block to keep in sync, and no rule
     that exists in one theme but not the other. */
  color-scheme: light dark;

  --bg:           light-dark(#f7f7f5, #101012);
  --surface:      light-dark(#ffffff, #18181b);
  --surface-sunk: light-dark(#fcfcfa, #151518);
  --border:       light-dark(#e5e5e1, #2a2a2e);
  --hair:         light-dark(#eeeee9, #232328);
  --text:         light-dark(#171716, #eaeae8);
  --muted:        light-dark(#6e6e69, #96968f);
  --faint:        light-dark(#a3a39c, #65656a);
  --accent:       light-dark(#3f6bd4, #8aa6ea);
  --accent-hover: light-dark(#2a4fa8, #a6bcf2);

  --success: light-dark(#14713a, #2f9c58);
  --danger:  light-dark(#b8503f, #d0705c);
  --warn:    light-dark(#8f5500, #e0aa54);

  /* Status, in three volumes: solid (act on these), tint or outline (in
     play), dot only (closed). */
  --st-interviewing:    light-dark(#a35c00, #c07a10);
  --st-interviewing-on: light-dark(#ffffff, #17120a);
  --st-offer:           light-dark(#14713a, #2f9c58);
  --st-offer-on:        light-dark(#ffffff, #06170d);
  --st-applied-bg:      light-dark(#e8effc, #1c2b49);
  --st-applied-fg:      light-dark(#2a5fc4, #93b3f0);
  --st-interested-fg:   light-dark(#56564f, #a9a9a2);
  --st-interested-bd:   light-dark(#dcdcd5, #3a3a3f);
  --st-closed-fg:       light-dark(#8f8f88, #7a7a74);
  --dot-rejected:  light-dark(#b8503f, #a4543f);
  --dot-ghosted:   light-dark(#c2c2b9, #55555a);
  --dot-withdrawn: light-dark(#8f8f88, #6d6d70);

  --quiet-bg: light-dark(#fdf3e0, #2e2413);
  --quiet-fg: light-dark(#8f5500, #e0aa54);
  --fail-bg:  light-dark(#fdfaf9, #1d1817);
  --fail-fg:  light-dark(#a8442f, #e79a86);
  --fail-bd:  light-dark(#e5cfc9, #4d3a35);

  --chip-bg: light-dark(#f1f1ec, #232328);
  --chip-fg: light-dark(#71716b, #a1a19a);

  /* The logo plate stays light in both themes on purpose: a great many
     company logos are near-black transparent PNGs that vanish on dark. */
  --plate: #ffffff;
  --plate-hair: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.14));

  --r-row: 10px;  --r-plate: 9px;  --r-pill: 999px;

  --mono-1: #9c5744;  --mono-2: #8a6b2f;  --mono-3: #4f7a4a;  --mono-4: #37767a;
  --mono-5: #45689e;  --mono-6: #6a5a9c;  --mono-7: #94507a;  --mono-8: #5c6470;
}

/* The user's saved preference, written onto <html> by the server so the page
   never renders in the wrong theme first and then corrects itself. Absent
   means follow the device. Setting color-scheme also fixes form controls,
   scrollbars and the canvas without any extra rules. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ===========================================================================
   Base
   =========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }

h1 { margin: 0.5rem 0 1rem; font-size: 1.5rem; letter-spacing: -0.015em; }
h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; letter-spacing: -0.01em; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.25rem;
}
.site-title { font-weight: 600; text-decoration: none; color: var(--text); letter-spacing: -0.01em; }
.site-header nav { display: flex; align-items: center; gap: 1.1rem; }
.site-header nav a { text-decoration: none; color: var(--muted); font-size: 0.92rem; }
.site-header nav a:hover { color: var(--accent); }
.site-header nav form { margin: 0; }

.flash {
  padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.93rem;
}
.flash-notice { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.flash-alert  { background: var(--fail-bg); color: var(--fail-fg); border: 1px solid var(--fail-bd); }

/* ===========================================================================
   Buttons, forms, cards
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 32px; padding: 0 0.8rem;
  background: var(--accent); color: #fff;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 0.81rem; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); color: var(--text); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 80%, #000); }
.btn-small { height: 26px; padding: 0 0.55rem; font-size: 0.78rem; }

.toolbar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.card h2:first-child { margin-top: 0; }

.auth-card { max-width: 26rem; margin: 3rem auto; }
.auth-card h1 { margin-top: 0; }
.auth-card .btn { width: 100%; justify-content: center; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 500; margin-bottom: 0.3rem; font-size: 0.9rem; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.field select,
.field textarea {
  width: 100%; padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.93rem; font-family: inherit;
  background: var(--surface); color: var(--text);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }

.error-summary {
  background: var(--fail-bg); color: var(--fail-fg); border: 1px solid var(--fail-bd);
  padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem;
}
.error-summary ul { margin: 0.3rem 0 0 1.25rem; padding: 0; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hair); font-size: 0.92rem; }
th { background: var(--surface-sunk); font-weight: 600; color: var(--muted); }
tr:last-child td { border-bottom: none; }

/* ===========================================================================
   Applications list — header
   =========================================================================== */
.list-header {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin: 0.25rem 0 0.85rem;
}
.list-header h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.list-header-spacer { flex: 1; }

.segmented {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface-sunk); border: 1px solid var(--hair); border-radius: 9px;
}
.segment {
  padding: 4px 11px; border-radius: 7px; text-decoration: none;
  font-size: 0.79rem; font-weight: 500; color: var(--muted);
}
.segment .count { color: var(--faint); }
.segment.is-on {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.segment.is-on .count { color: var(--faint); }

.tag-filter { margin: 0; }
.tag-filter input {
  height: 32px; padding: 0 0.65rem; min-width: 170px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 0.81rem; font-family: inherit;
}

.paste-target {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  height: 38px; margin-bottom: 0.5rem;
  border: 1px dashed var(--border); border-radius: 9px;
  background: var(--surface-sunk);
  font-size: 0.81rem; color: var(--muted);
}
.paste-target .keys { display: flex; gap: 3px; }
.paste-target kbd {
  font: 0.7rem ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; color: var(--muted);
}

/* ===========================================================================
   Applications list — rows

   One markup, two layouts. The desktop grid becomes a two-line card below
   640px; nothing is hidden or duplicated.
   =========================================================================== */
/* No overflow:hidden here. It would clip the status panel to the bottom of
   the list, which hid the closed statuses on the last few rows. The corners
   are rounded on the end rows instead. */
.app-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-row);
}
.app-row:first-child {
  border-top-left-radius: var(--r-row); border-top-right-radius: var(--r-row);
}
.app-row:last-child {
  border-bottom-left-radius: var(--r-row); border-bottom-right-radius: var(--r-row);
}

.app-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 148px 92px;
  grid-template-areas: "plate identity tags status age";
  align-items: center; gap: 14px;
  padding: 11px 16px 11px 15px;
  border-top: 1px solid var(--hair);
}
.app-row:first-child { border-top: 0; }

/* Volume 1 earns a stripe. Nothing else does, which is what makes it read. */
.app-row.volume-act { box-shadow: inset 3px 0 0 var(--st-interviewing); }
.app-row.volume-act:has(.status-offer) { box-shadow: inset 3px 0 0 var(--st-offer); }
.app-row.is-fetching { background: var(--surface-sunk); }
.app-row.is-failed { background: var(--fail-bg); box-shadow: inset 3px 0 0 var(--danger); }

.app-plate { grid-area: plate; }
.app-identity { grid-area: identity; min-width: 0; }
.app-tags { grid-area: tags; display: flex; gap: 4px; }
.app-status { grid-area: status; }
.app-age { grid-area: age; text-align: right; }

.app-company { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; }
.app-company a { color: var(--text); text-decoration: none; }
.app-company a:hover { color: var(--accent); }
.app-role,
.app-url {
  font-size: 0.81rem; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--faint); }

/* Closed applications recede: dimmed plate, lighter name. */
.app-row.volume-closed .app-plate { opacity: 0.55; }
.app-row.volume-closed .app-company { font-weight: 500; }
.app-row.volume-closed .app-company a { color: var(--muted); }
.app-row.volume-closed .app-role { color: var(--faint); }
.app-row.volume-closed .chip { background: transparent; color: var(--faint); }

.is-failed .app-company a { color: var(--fail-fg); }

.skeleton {
  display: block; height: 11px; width: 132px; border-radius: 3px;
  background: var(--hair); animation: pulse 1.6s ease-in-out infinite;
}

.chip {
  padding: 2px 7px; border-radius: 5px;
  background: var(--chip-bg); color: var(--chip-fg);
  font-size: 0.7rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.chip:hover { color: var(--text); }

.btn-fix {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border: 1px solid var(--fail-bd); border-radius: 7px; background: var(--surface);
  font-size: 0.76rem; font-weight: 600; color: var(--fail-fg); text-decoration: none;
  white-space: nowrap;
}

.app-age-days { font-size: 0.79rem; font-weight: 600; color: var(--muted); }
.app-age-date { display: block; font-size: 0.7rem; color: var(--faint); margin-top: 1px; }
.app-age-faint { font-size: 0.73rem; color: var(--faint); }
.volume-closed .app-age-days { font-weight: 500; color: var(--faint); }

.quiet-chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px;
  background: var(--quiet-bg); color: var(--quiet-fg);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}

/* ===========================================================================
   Logo plate — three states
   =========================================================================== */
.plate {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-plate);
  overflow: hidden; flex: none;
}
.plate img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 4px;
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--plate-hair);
  border-radius: var(--r-plate);
}
.plate-mono { color: #fff; font-size: 0.94rem; font-weight: 600; letter-spacing: 0.02em; }
.plate-mono { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09); }

.plate-waiting { border: 1px dashed var(--border); background: var(--surface-sunk); }
.plate-waiting .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--faint);
  grid-area: 1 / 1; animation: dots 1.2s ease-in-out infinite;
}
.plate-waiting .dot:nth-child(1) { transform: translateX(-7px); }
.plate-waiting .dot:nth-child(2) { animation-delay: 0.2s; }
.plate-waiting .dot:nth-child(3) { transform: translateX(7px); animation-delay: 0.4s; }

.plate-failed {
  border: 1px dashed var(--fail-bd); background: var(--fail-bg);
  color: var(--danger); font-size: 0.95rem; font-weight: 700;
}

.hue-1 { background: var(--mono-1); }  .hue-2 { background: var(--mono-2); }
.hue-3 { background: var(--mono-3); }  .hue-4 { background: var(--mono-4); }
.hue-5 { background: var(--mono-5); }  .hue-6 { background: var(--mono-6); }
.hue-7 { background: var(--mono-7); }  .hue-8 { background: var(--mono-8); }

/* ===========================================================================
   Status — pills at three volumes, and the one-gesture editor
   =========================================================================== */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 600; line-height: 1.45;
  border: 1px solid transparent; white-space: nowrap;
}
.status-pill .dot { display: none; width: 5px; height: 5px; border-radius: 50%; }
.status-pill .caret { font-size: 0.55rem; opacity: 0.65; }

.status-interviewing { background: var(--st-interviewing); color: var(--st-interviewing-on); }
.status-offer        { background: var(--st-offer);        color: var(--st-offer-on); }
.status-applied      { background: var(--st-applied-bg);   color: var(--st-applied-fg); }
.status-interested   { background: transparent; color: var(--st-interested-fg); border-color: var(--st-interested-bd); }

/* Volume 3: no fill at all, just a dot. */
.status-rejected, .status-ghosted, .status-withdrawn {
  background: transparent; color: var(--st-closed-fg); font-weight: 500; padding-left: 2px;
}
.status-rejected  .dot { display: block; background: var(--dot-rejected); }
.status-ghosted   .dot { display: block; background: var(--dot-ghosted); }
.status-withdrawn .dot { display: block; background: var(--dot-withdrawn); }

.status-fetching { background: var(--chip-bg); color: var(--muted); }
.status-needs-review { background: transparent; color: var(--fail-fg); border-color: var(--fail-bd); }
.status-needs-review .dot { display: block; background: var(--danger); }

.ellipsis { display: inline-flex; gap: 1.5px; }
.ellipsis span {
  width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor;
  animation: dots 1.1s infinite;
}
.ellipsis span:nth-child(2) { animation-delay: 0.18s; }
.ellipsis span:nth-child(3) { animation-delay: 0.36s; }

/* The editor is a <details> living inside the row, so a Turbo Stream
   replacing that row cannot strand an open menu or a dead listener. */
.status-menu { position: relative; display: inline-block; }
.status-menu > summary { cursor: pointer; list-style: none; user-select: none; }
.status-menu > summary::-webkit-details-marker { display: none; }
.status-menu[open] > summary { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Anchored to the right edge of the pill. The status column sits near the
   right of the row, so opening leftwards is what keeps the panel on screen
   instead of pushing the page sideways. */
.status-menu-panel {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  min-width: 190px; max-width: calc(100vw - 2rem); padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.status-menu-rule { height: 1px; background: var(--hair); margin: 4px 7px; }

.status-menu-panel form { margin: 0; }
.status-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 0.79rem; text-align: left; cursor: pointer;
}
.status-menu-item:hover { background: var(--surface-sunk); }
.status-menu-item .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.status-menu-item .current { margin-left: auto; font-size: 0.7rem; color: var(--faint); font-weight: 500; }
.status-menu-item.is-current { font-weight: 600; }

.status-menu-item.status-interested   { color: var(--muted); }
.status-menu-item.status-applied      { color: var(--st-applied-fg); background: transparent; }
.status-menu-item.status-interviewing { color: var(--st-interviewing); }
.status-menu-item.status-offer        { color: var(--st-offer); }
.status-menu-item.status-rejected     { color: var(--st-closed-fg); }
.status-menu-item.status-rejected .dot { background: var(--dot-rejected); }
.status-menu-item.status-ghosted      { color: var(--st-closed-fg); }
.status-menu-item.status-ghosted .dot { background: var(--dot-ghosted); }
.status-menu-item.status-withdrawn    { color: var(--st-closed-fg); }
.status-menu-item.status-withdrawn .dot { background: var(--dot-withdrawn); }

/* Resume generation states keep their own scale. */
.status-resume-pending    { background: var(--chip-bg); color: var(--muted); }
.status-resume-generating { background: var(--quiet-bg); color: var(--quiet-fg); }
.status-resume-ready      { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.status-resume-failed     { background: var(--fail-bg); color: var(--fail-fg); border-color: var(--fail-bd); }

.tag {
  display: inline-block; padding: 2px 7px; margin-right: 3px; border-radius: 5px;
  background: var(--chip-bg); color: var(--chip-fg); font-size: 0.72rem; font-weight: 500;
}

/* ===========================================================================
   Mobile — the same rows as cards
   =========================================================================== */
@media (max-width: 640px) {
  .container { padding: 0.75rem 0.75rem 3rem; }

  .site-header .container { flex-wrap: wrap; gap: 0.5rem; }
  .site-header nav { gap: 0.9rem; font-size: 0.88rem; }
  .site-header nav .site-email { display: none; }

  /* Title on its own line, then tabs beside the new-application button, then
     the tag filter full width. */
  .list-header { gap: 0.5rem; }
  .list-header h1 { flex: 1 1 100%; order: 1; font-size: 1.25rem; }
  .list-header-spacer { display: none; }
  .segmented {
    order: 2; flex: 1 1 auto; min-width: 0;
    background: none; border: 0; padding: 0; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segment {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  }
  .segment.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
  .segment.is-on .count { color: color-mix(in srgb, var(--bg) 65%, var(--text)); }
  .list-header .btn { order: 3; flex: none; }
  .tag-filter { order: 4; flex: 1 1 100%; }
  .tag-filter input { width: 100%; min-width: 0; }

  .app-list { background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 8px; }

  /* Flex rather than grid here. A two-row grid would force status to share a
     column with the 44px plate, which squashes it; letting the identity fill
     the first line exactly makes everything after it wrap cleanly. */
  .app-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 10px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
  }
  .app-row.volume-act { border-left: 3px solid var(--st-interviewing); }
  .app-row.volume-act:has(.status-offer) { border-left-color: var(--st-offer); }
  .app-row.is-failed { border-left: 3px solid var(--danger); }
  .app-row.volume-closed { opacity: 0.82; }

  .app-plate { flex: none; align-self: flex-start; }
  .plate { width: 44px; height: 44px; border-radius: 10px; }

  .app-identity { flex: 1 1 calc(100% - 54px); }
  .app-company { font-size: 0.95rem; }
  .app-role { white-space: normal; }

  /* Status leads the second line. Tags must not grow, or a row with no tags
     shoves the pill into the middle of the card. */
  .app-status { order: 1; flex: none; }
  .app-tags { order: 2; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .app-age { order: 3; flex: none; margin-left: auto; text-align: right; }

  /* Bigger tap target on the control that gets used most. */
  .status-menu > summary { display: flex; align-items: center; }
  .app-status .status-pill { height: 32px; padding: 0 12px; font-size: 0.78rem; }
  .status-menu-panel { min-width: 230px; }
  .status-menu-item { padding: 10px; font-size: 0.88rem; }

  .resume-preview { padding: 0; }
  .resume-preview iframe { width: 100%; height: 60vh; }
}

/* ===========================================================================
   Resume rendering
   =========================================================================== */
.resume-rendered {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.75rem 2rem; margin-bottom: 1rem;
}
.resume-rendered h1 { text-align: center; font-size: 1.4rem; margin: 0 0 0.25rem; }
.resume-rendered h1 + p { text-align: center; color: var(--muted); margin: 0 0 1rem; font-size: 0.9rem; }
.resume-rendered h2 {
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; margin: 1.1rem 0 0.4rem;
}
.resume-rendered h3 { font-size: 1rem; margin: 0.75rem 0 0.15rem; }
.resume-rendered h3 + p { color: var(--muted); margin: 0 0 0.35rem; font-size: 0.88rem; font-style: italic; }
.resume-rendered ul { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
.resume-rendered li { margin-bottom: 0.2rem; }
.resume-rendered p { margin: 0.35rem 0; }
.resume-rendered a { color: var(--text); text-decoration: underline; }
.resume-rendered hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* The preview is the print view in an iframe, at real page width, so what is
   on screen is what comes out of the printer. */
.resume-preview {
  overflow: auto; background: var(--surface-sunk); padding: 1rem;
  border: 1px solid var(--border); border-radius: 12px;
}
.resume-preview iframe {
  display: block; width: 8.5in; height: 11in; margin: 0 auto;
  border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ===========================================================================
   Resume section editor
   =========================================================================== */
.doc-editor { margin-bottom: 1rem; }

.doc-section { padding: 0.85rem 1rem; }
.doc-section-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.doc-heading-input {
  flex: 1 1 12rem; min-width: 0;
  padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.98rem; font-weight: 600;
}
.doc-layout-select {
  padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 0.78rem;
}
.doc-section-actions, .doc-item-actions { display: flex; gap: 2px; }

.icon-btn {
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--muted);
  font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--faint); }
.icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); }

.doc-items { display: grid; gap: 8px; margin-bottom: 0.6rem; }

.doc-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 0.6rem; border: 1px solid var(--hair); border-radius: 9px;
  background: var(--surface-sunk);
}
.doc-item-grid { flex: 1; min-width: 0; display: grid; gap: 6px; grid-template-columns: repeat(6, 1fr); }
.doc-item-grid input, .doc-item-grid textarea {
  width: 100%; padding: 0.4rem 0.55rem;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.84rem;
}
.doc-item-grid textarea { resize: vertical; }

/* Which fields a section shows is decided here rather than by rendering four
   different partials. Hidden fields keep their values, so switching a section
   to prose and back does not lose the entries. */
.doc-item-grid > * { display: none; }
[data-layout="entries"] .f-title    { display: block; grid-column: span 3; }
[data-layout="entries"] .f-org      { display: block; grid-column: span 3; }
[data-layout="entries"] .f-dates    { display: block; grid-column: span 3; }
[data-layout="entries"] .f-location { display: block; grid-column: span 3; }
[data-layout="entries"] .f-meta     { display: block; grid-column: span 6; }
[data-layout="entries"] .f-bullets  { display: block; grid-column: span 6; }
[data-layout="prose"]   .f-text     { display: block; grid-column: span 6; }
[data-layout="list"]    .f-text     { display: block; grid-column: span 6; }
[data-layout="labeled"] .f-label    { display: block; grid-column: span 2; }
[data-layout="labeled"] .f-text     { display: block; grid-column: span 4; }

.doc-add {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0.75rem 0; margin-bottom: 0.5rem;
}
.doc-save { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.doc-raw summary { cursor: pointer; }
.doc-raw p { margin: 0.5rem 0; }

/* ===========================================================================
   Template picker
   =========================================================================== */
.template-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.template-picker form { margin: 0; }
.template-option {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer;
}
.template-option:hover { border-color: var(--faint); }
.template-option.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.template-name { font-size: 0.82rem; font-weight: 600; }
.template-tagline { font-size: 0.72rem; color: var(--muted); }

@media (max-width: 640px) {
  .doc-item-grid { grid-template-columns: 1fr; }
  .doc-item-grid > *[class*="f-"] { grid-column: span 1 !important; }
}

/* ===========================================================================
   Settings
   =========================================================================== */
.settings { max-width: 34rem; margin: 0 auto; }
.settings .card h2:first-child { margin-top: 0; }
.settings .card p { margin: 0 0 0.5rem; }

.theme-choices { border: 0; margin: 0.9rem 0 1.1rem; padding: 0; display: grid; gap: 8px; }

/* The swatches are painted from fixed values, not tokens: each one has to
   show its own theme while sitting on a page rendered in another. */
.theme-choice {
  display: grid;
  grid-template-columns: auto 46px 1fr;
  grid-template-areas: "radio swatch label" "radio swatch desc";
  align-items: center; gap: 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer;
}
.theme-choice:hover { border-color: var(--faint); }
.theme-choice.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-choice input { grid-area: radio; accent-color: var(--accent); margin: 0; }
.theme-label { grid-area: label; font-weight: 600; font-size: 0.92rem; }
.theme-desc  { grid-area: desc; font-size: 0.8rem; color: var(--muted); }

.theme-swatch {
  grid-area: swatch; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; width: 46px; height: 32px; padding: 6px;
  border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
  overflow: hidden;
}
.theme-swatch .bar { height: 4px; border-radius: 2px; }
.theme-swatch .bar.short { width: 60%; }

.theme-swatch-light { background: #f7f7f5; }
.theme-swatch-light .bar { background: #c7c7c0; }
.theme-swatch-dark { background: #101012; }
.theme-swatch-dark .bar { background: #4a4a50; }
/* Split down the middle, because "System" is genuinely both. */
.theme-swatch-doc { background: light-dark(#fff, #f4f4f2); }
.theme-swatch-doc .bar { background: #b9b9b2; }
.theme-swatch-auto { background: linear-gradient(100deg, #f7f7f5 0 50%, #101012 50% 100%); }
.theme-swatch-auto .bar { background: linear-gradient(100deg, #c7c7c0 0 50%, #4a4a50 50% 100%); }

/* An email change that has been asked for but not confirmed yet. Called out
   rather than left as body text because it is a half-finished action the
   reader has to either complete elsewhere or abandon. */
.pending-change {
  margin: 0.9rem 0 1.1rem; padding: 0.85rem 1rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface);
}
.settings .pending-change p { margin: 0 0 0.7rem; font-size: 0.9rem; }
.pending-change form { display: inline; }

/* ===========================================================================
   Odds and ends
   =========================================================================== */
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.prose { white-space: pre-wrap; }

.empty {
  padding: 2.5rem 1rem; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 12px; margin-top: 0.5rem; font-size: 0.92rem;
}

@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
@keyframes dots  { 0%, 20% { opacity: 0.25; } 50% { opacity: 1; } 80%, 100% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}