/* Original résumés and application workspaces. Uses the Daylight tokens set in jobs.css.
   Phones first in spirit: the @media (max-width: 760px) block at the end matches the point where base.css moves
   the main navigation (.rail) to the bottom of the screen. --ws-rail is that bar's height, measured by
   workspace.js (measureRail); the fallback below is used until it is measured. */
:root { --ws-rail: calc(72px + env(safe-area-inset-bottom, 0px)) }
.wrap.narrow { max-width: 520px }
.wrap.ws { grid-template-columns: minmax(0, 1fr) }
.ws > *, .ws .grid2 > * { min-width: 0 }
.ws .back { display: block; margin: 0 0 10px; text-align: left }
.ws .head .sub { color: var(--ink-2); margin: 4px 0 0 }
.callout { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 12px 0; font-size: 14px; line-height: 1.5 }
.callout.warn { background: var(--warn-soft); border-color: transparent; color: var(--ink) }

/* tabs: one segmented bar; when it is wider than the screen it scrolls, and a fade shows there is more */
.wstabs-wrap { position: relative; margin: 18px 0; width: fit-content; max-width: 100%; border-radius: 99px }
.wstabs-wrap::before, .wstabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1 }
.wstabs-wrap::before { left: 0; border-radius: 99px 0 0 99px; background: linear-gradient(90deg, var(--bg-2) 30%, transparent) }
.wstabs-wrap::after { right: 0; border-radius: 0 99px 99px 0; background: linear-gradient(270deg, var(--bg-2) 30%, transparent) }
.wstabs-wrap.more-l::before, .wstabs-wrap.more-r::after { opacity: 1 }
.wstabs { display: flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch }
.wstabs::-webkit-scrollbar { display: none }
.wstabs button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; scroll-snap-align: center }
.wstabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.wstabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wstabs .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6 }
.wstabs .dot.mid { background: linear-gradient(90deg, currentColor 50%, transparent 50%); opacity: 1 }
.wstabs .dot.done { background: currentColor; opacity: 1 }

/* folding headings: the fit groups and the suggestion list */
.fgtoggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.fgtoggle::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; opacity: .7 }
.fgtoggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px) }
.fgtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px }
.fgtoggle > span:first-child { flex: 1 }
.fgtoggle .count { font: 600 12px/1 var(--f); padding: 5px 9px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap }

.fitgroup { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: 0 0 20px }
.fitgroup.ok { border-color: var(--accent) }
.fitgroup.tip { border-color: var(--sun) }
.fitgroup.gap { border-color: var(--line-2) }
.fitgroup h3 { font-size: 15px; margin: 0 0 8px }
.fitgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.fitgroup li { display: grid; gap: 4px; font-size: 14px; line-height: 1.5 }
.fitgroup li .chip { justify-self: start; font-size: 11px }
.fitgroup q { color: var(--ink-2); font-size: 13px }
.scorecard .lift { display: flex; align-items: center; gap: 14px; margin: 10px 0 }
.scorecard .lift small { display: block; color: var(--muted); font-size: 12px }
.scorecard .lift b { font-size: 28px }
.posting { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-height: 420px; overflow: auto; margin-top: 10px }

.suggest { margin-bottom: 18px }
.suggest h3 { font-size: 16px; margin: 0 0 6px }
.sg { border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin: 10px 0; background: var(--surface); display: grid; gap: 8px }
.sg .ba { display: grid; gap: 4px }
.sg .ba small { color: var(--muted); font-size: 12px }
.sg .ba p { margin: 0 0 6px; color: var(--ink-2) }
.sg textarea { width: 100%; min-height: 72px; font: inherit; line-height: 1.5; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; background: var(--bg) }
.sg .need { color: var(--warn) }
.sg .need:empty { display: none }
.sg button:disabled { opacity: .45; cursor: not-allowed }

/* cover letter options fold */
.lopts { display: block }
.lopts > * + * { margin-top: 14px }
.lopts > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 32px; cursor: pointer; list-style: none }
.lopts > summary::-webkit-details-marker { display: none }
.lopts > summary::after { content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7 }
.lopts[open] > summary::after { transform: rotate(-135deg) }
.lopts[open] > summary .note { display: none }

.editor .edhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
textarea.doc { width: 100%; min-height: 240px; font: 15px/1.6 var(--f); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; background: var(--surface); color: var(--ink); resize: vertical; margin: 10px 0 }
textarea.doc:focus { outline: 2px solid var(--accent); outline-offset: 1px }
.doc.preview { font-size: 14px; line-height: 1.6; border: 1px dashed var(--line-2); border-radius: 14px; padding: 14px; max-height: 420px; overflow: auto; background: var(--bg-2) }
.savestate { font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--bg-2); color: var(--ink-2) }
.savestate.ok::before { content: "✓ " }
.savestate.bad { background: var(--no-soft); color: var(--no); cursor: pointer }
.savestate:empty { display: none }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none }
mark { background: var(--mark); color: inherit; border-radius: 4px; padding: 0 2px }
.proposal { border-color: var(--accent); margin-bottom: 14px }

.history { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px }
.history li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 8px }
.history li > div { min-width: 0 }
.history p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); white-space: pre-line; max-height: 4.5em; overflow: hidden; overflow-wrap: anywhere }

/* the action bar exists for phones only; wider screens use the same buttons where they sit in the page */
.wsbar { display: none }
.ws a.btn, .ws a.ghost, .rlib a.ghost { text-decoration: none }

/* original résumés (Profile) */
.rlib .dropbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700 }
.rlib .drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px }
.rlib .rpaste > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px }
.origcard { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 10px }
.origcard.current { border-color: var(--accent) }
.origcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap }
.origcard .top > div { min-width: 0 }
.origcard .sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere }
.origcard .state { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap }
.origcard .state.warn { background: var(--warn-soft); color: var(--warn) }
.reviewbox { margin-top: 0 }
.upbar { height: 32px; position: relative; border-radius: 10px; background: var(--bg-2); overflow: hidden; margin: 8px 0 }
.upbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); transition: width .2s }
.upbar span { position: relative; font-size: 13px; line-height: 32px; padding: 0 12px; color: var(--ink) }
@media (hover: none) { .rlib .dropnote { display: none } }   /* no dragging files on a phone */

@media (max-width: 980px) {
  /* stacked: the score comes before the lists, and the letter options before the letter */
  .wsfit .side, .wsletter .side { order: -1 }
}

@media (max-width: 760px) {
  .ws { gap: 18px }
  .ws .panel { padding: 16px; gap: 14px }
  .ws .head .row { width: 100% }
  .ws .head .row a { flex: 1 1 auto; justify-content: center; min-height: 44px }
  .ws .note, .rlib .note { font-size: 14px; line-height: 1.5 }
  .ws .chip, .rlib .chip { white-space: normal }

  /* 16px keeps iOS from zooming into a field */
  .ws select, .ws input, .ws textarea, .rlib textarea, .rlib input { font-size: 16px }

  /* touch targets */
  .ws .ghost.small, .ws .btn.small, .rlib .ghost.small, .rlib .btn.small { min-height: 44px; justify-content: center }
  .ws .row, .rlib .row { gap: 8px }
  .ws .back { min-height: 44px; display: inline-flex; align-items: center; margin: 0 }
  .ws .linkish, .rlib .linkish { padding-block: 8px }
  .ws .check, .rlib .check { min-height: 44px; font-size: 15px }
  .ws .check input { width: 22px; height: 22px }
  .ws .stages button { min-height: 44px }
  .ws .desk { display: none }

  /* tabs fill the width and scroll sideways when they don't fit */
  .wstabs-wrap { width: 100%; margin: 4px 0 }
  .wstabs button { flex: 1 0 auto; min-height: 44px; padding: 10px 14px; font-size: 14.5px }

  .fitgroup { margin: 0 0 14px }
  .fitgroup h3 { font-size: 16px; margin: 0 0 4px }
  .fgtoggle { min-height: 48px }
  .fitgroup li { font-size: 15px }
  .fitgroup q { font-size: 14px }
  .posting { max-height: none; font-size: 15px }

  .sg { padding: 14px 12px }
  .sg .ba p { font-size: 15px }
  .sgacts > button { flex: 1 1 100%; min-height: 48px }

  /* editor: full width, sized to the screen, with the save state kept in view at the top */
  .ws .panel.editor { padding: 12px; gap: 8px }
  .editor .edhead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; flex-wrap: wrap; align-items: center; margin: -12px -12px 0; padding: 12px; background: var(--surface); border-radius: 24px 24px 0 0 }
  .editor .edhead .savestate { font-size: 13px; padding: 6px 12px }
  textarea.doc { font-size: 16px; line-height: 1.55; padding: 12px; margin: 6px 0; min-height: 300px; height: max(300px, calc(100dvh - var(--ws-rail) - 230px)); resize: none }
  .edtools > button { flex: 1 1 0 }
  .doc.preview { max-height: 50dvh; font-size: 15px }
  .proposal .row > button { flex: 1 1 100% }

  .history li { flex-direction: column; gap: 8px }
  .history li > button { width: 100% }
  .history p { font-size: 14px; max-height: 6em }

  /* the main action for the tab, just above the bottom navigation */
  #wsbody { padding-bottom: 76px }
  .wsbar { display: block; position: fixed; left: 0; right: 0; bottom: var(--ws-rail); z-index: 19;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line) }
  .wsbar .row { flex-wrap: nowrap }
  .wsbar .btn { flex: 1 1 0; min-height: 48px; padding: 12px 16px; font-size: 15px; text-align: center }
  body:has(.ws textarea:focus, .ws input:focus, .ws select:focus) .wsbar { display: none }   /* the keyboard is up */
  body:has(.wsbar) #toast { bottom: calc(var(--ws-rail) + 80px) }

  /* résumé library */
  .rlib .drop { padding: 18px 16px }
  .rlib .dropbtn { width: 100%; min-height: 52px; font-size: 16px }
  .rlib .upbar { height: 40px; border-radius: 12px }
  .rlib .upbar span { line-height: 40px; font-size: 14px }
  .rlib .rpaste > summary { min-height: 44px; display: flex; align-items: center; font-size: 15px }
  .rlib .origcard { padding: 14px 12px }
  .rlib .origcard .row > a, .rlib .origcard .row > button { flex: 1 1 auto; white-space: nowrap }
  .rlib .rvacts { position: sticky; bottom: var(--ws-rail); z-index: 2; margin: 0 -12px; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line) }
  .rlib .rvacts > button { flex: 1 1 0; min-height: 48px }
  .rlib .field > button { width: 100% }
}
@media (prefers-reduced-motion: reduce) { .wstabs-wrap::before, .wstabs-wrap::after, .fgtoggle::after, .upbar i { transition: none } }