/* Applyready side panel: 400 px of browser chrome, so density is tighter than the site. */

html,
body {
  height: 100%;
}

body.panel {
  display: flex;
  flex-direction: column;
  /* Chrome gives the side panel about 400px. Opened as a page - the screen map, a preview link -
     the same markup had the whole window, and a button stretched across it. */
  max-width: 440px;
  margin: 0 auto;
  border-right: 1px solid var(--line-200);
  border-left: 1px solid var(--line-200);
  background: var(--bg);
  font-size: var(--fs-small);
}

/* A failure looked exactly like a setup step: same ink, same white, same pair of buttons. The
   palette has a colour for it. */
#state-error > h1 {
  color: var(--stop-700);
}

.panel-warn {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--warn-100);
  color: var(--warn-700);
  font-size: var(--fs-micro);
  border: 1px solid var(--warn-600);
}

/* Head */

.panel-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line-200);
}

.panel-head-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-1);
}

/* Dragged this narrow, the row cannot hold the word, the count and both buttons at once, and what
   used to give way was the window: the whole panel scrolled sideways. The mark carries the name
   here, and a screen reader still reads it. */
@media (max-width: 289px) {
  .panel-brand .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.quota {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  color: var(--ink-700);
  white-space: nowrap;
}

.quota.is-out {
  background: var(--warn-100);
  color: var(--warn-700);
}

.quota.is-pro {
  background: var(--accent-100);
  color: var(--accent-700);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--ink-500);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink-900);
}

/* Body */

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  /* A tab holds more than its window: the match list runs to twice the height of the panel.
     On a Mac the bar only appears while the wheel turns, so the reader was given no sign that
     anything stood below the fold. This one stays. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-200) transparent;
}

.panel-body::-webkit-scrollbar {
  width: 10px;
}

.panel-body::-webkit-scrollbar-thumb {
  background: var(--line-200);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}

/* It takes the keyboard so a long tab can be read without a mouse, and it says so when it has
   it. Without the ring, the focus would be somewhere nobody could see. */
.panel-body:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: -2px;
}

.panel-state {
  animation: panel-in var(--dur-3) var(--ease-out) both;
}

.panel-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-top: 1px solid var(--line-200);
}

/* A button will not shrink below its own label plus its padding, so at 320px - the width this
   panel says it works at - the second one ran 10px past the edge and the whole panel scrolled
   sideways. It may shrink, and below 360 it wears less padding. */
.panel-foot .btn {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 360px) {
  .panel-foot .btn {
    padding: 0 var(--sp-3);
  }
}

/* Squeezed past this, "Download resume" no longer fits beside anything and its own box cut the
   word in half. Two rows, full width each. */
@media (max-width: 319px) {
  .panel-foot {
    flex-direction: column;
  }
}

/* Job card */

.job-card {
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--surface);
}

.job-title {
  /* It is the h1 of the screen it heads, and an h1 brings a margin of its own. */
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.job-meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.job-source {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

/* Run steps */

.run-steps {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.run-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-400);
  transition: color var(--dur-2) var(--ease);
}

.run-step .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-200);
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.run-step .dot svg {
  width: 12px;
  height: 12px;
  color: transparent;
}

.run-step.is-active {
  color: var(--ink-900);
}

.run-step.is-active .dot {
  border-color: var(--accent-600);
  border-right-color: transparent;
  animation: spin 900ms linear infinite;
}

.run-step.is-done {
  color: var(--ink-700);
}

.run-step.is-done .dot {
  background: var(--ok-600);
  border-color: var(--ok-600);
  animation: none;
}

.run-step.is-done .dot svg {
  color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
  .run-step.is-active .dot {
    animation: none;
    border-right-color: var(--accent-600);
  }
}

/* Tabs inside the panel */

.panel-tabs {
  position: sticky;
  /* The scrolling area has 16px of padding above these, so they pinned 16px down and a line of
     the letter slid through the band between the header and the tabs while the next line was
     sliced by their edge. */
  top: calc(var(--sp-4) * -1);
  z-index: 10;
  display: flex;
  gap: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-200);
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  padding: 0 var(--sp-2);
}

/* A label that outgrows its share of the row slides the row sideways under the finger. Folded
   in two it sat off the baseline of its neighbours and read as a different control. */
.panel-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.panel-tabs::-webkit-scrollbar {
  display: none;
}

.panel-tabs .tab {
  flex: 1 0 auto;
  padding: 0 var(--sp-1);
  font-size: var(--fs-micro);
  white-space: nowrap;
}

/* The bar is sticky and the panel scrolls under it, so the first line of a tab arrived hard
   against the rule above it and read as cut off. Measured: nothing was hidden, the gap was zero. */
.tabpanel {
  padding-top: var(--sp-2);
}

/* Match */

.score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.score-text b {
  display: block;
  font-size: var(--fs-body);
}

.req-item {
  border-top: 1px solid var(--line-100);
  padding: var(--sp-3) 0;
}

.req-item:first-child {
  border-top: 0;
}

.req-item {
  display: grid;
  /* One column for the badge, wide enough for the longest of the three, so the line under it
     starts at the same place on every row. Sized to the badge, the proof lines stood on three
     different left edges down one list. */
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: var(--sp-2);
  row-gap: var(--sp-2);
}

.req-head {
  display: contents;
}

.req-head .badge {
  align-self: start;
  margin-top: 1px;
}

.req-text {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.req-proof {
  grid-column: 2;
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.advice {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--warn-100);
  color: var(--warn-700);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.advice ul {
  display: grid;
  gap: var(--sp-2);
}

.edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.edit-bar .panel-note {
  flex: 1 1 100%;
}

/* Resume edits */

.edit-card {
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.edit-card + .edit-card {
  margin-top: var(--sp-3);
}

.edit-card.is-off {
  background: var(--surface);
  opacity: 0.72;
}

.edit-card.is-blocked {
  border-color: var(--stop-100);
  background: var(--stop-100);
}

.edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.edit-block {
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.edit-was {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  text-decoration: line-through;
  text-decoration-color: var(--ink-400);
}

.edit-now {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.edit-why {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.edit-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Letter */

.letter-tools {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Two groups of buttons stacked one above the other, 190px and 158px wide, their right edges
   disagreeing for no reason a reader could name. Each group takes the panel's width and its
   buttons share it. */
.letter-tools .segmented {
  display: flex;
}

.letter-tools .segmented button {
  flex: 1;
}

.letter-area {
  /* A letter of two hundred words did not fit the three hundred pixels this used to be, and the
     text broke off mid-sentence with the counter under it. */
  min-height: 340px;
  height: auto;
  /* The box grew to its text and then stopped at seventy per cent of the window, so a long
     letter scrolled inside a panel that was scrolling as well: two bars, one on top of the
     other, and the wheel moved whichever one the pointer happened to be over. The panel grows
     the box to its content instead, and then there is nothing left to scroll.
     The bar stays available rather than switched off: hiding it meant that the one time the
     growing did not happen - the tab was still closed, so the height read as zero - a letter of
     631 px sat in a box of 338 with no way to reach the rest of it. */
  overflow-y: auto;
  font-size: var(--fs-small);
  line-height: 1.55;
}

.word-count {
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.word-count.is-off {
  color: var(--warn-700);
}

/* People */

.person-card {
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.person-card + .person-card {
  margin-top: var(--sp-3);
}

.person-top {
  display: flex;
  gap: var(--sp-3);
}

.person-rank {
  font-size: var(--fs-micro);
  color: var(--people-700);
  background: var(--people-100);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
  display: inline-block;
  margin-bottom: var(--sp-2);
}

/* One shade for three different roles told the reader nothing. The hiring manager stands first
   on the tab, so the strongest of the three is theirs. */
.person-rank.is-manager {
  color: var(--people-700);
  background: var(--people-100);
}

.person-rank.is-department {
  color: var(--ink-700);
  background: var(--line-100);
}

/* Green on this screen means a requirement your history covers. A role is not a status, so the
   third chip takes the brand's own colour instead of borrowing that meaning. */
.person-rank.is-recruiter {
  color: var(--accent-700);
  background: var(--accent-100);
}

/* Three buttons on a 400px card wrapped to two lines and left a 213px tail on every person.
   Two to a row, and whichever is left spans the width. */
.person-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.person-actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.draft-box {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line-100);
  padding-top: var(--sp-3);
}

/* Grown to its content by the panel, like the letter above it, and with the bar left available
   for the moment the growing cannot happen. */
.draft-box .textarea {
  overflow-y: auto;
}

/* Paste state */

.paste-area {
  min-height: 180px;
}

/* Small helpers */

.panel-note {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  line-height: 1.5;
}

/* At 320px the label of this button broke over two lines. The row is a sentence and a way
   out of it; the way out reads as one word. */
#moved-row .btn {
  white-space: nowrap;
}

.lock-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--line-200);
  border-radius: var(--r-md);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

@media (max-width: 359px) {
  .panel-body {
    padding: var(--sp-3);
  }

  .panel-tabs {
    margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3);
  }
}