/* Reboot Hire pages — built on Crew Check's styles.css, adding only what these pages need. */

[hidden] { display: none !important; }

input[type=email], input[type=tel] {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit;
}
input[type=email]:focus, input[type=tel]:focus { outline: none; border-color: var(--cyan); }
button:focus-visible, .chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button[disabled] { opacity: .55; cursor: default; }

/* .wrap carries 96px of bottom padding for page content; in the header that
   left an empty band, because Hire pages have no tab row to fill it. */
header.top .wrap { padding-bottom: 22px; }

.whobar { margin-left: auto; display: flex; gap: 12px; align-items: baseline; color: var(--dim); font-size: 13px; }
.linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.linkbtn:hover { color: var(--cyan); }

.narrow { max-width: 580px; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 66ch; margin: 0 0 16px; }
.signinrow { display: flex; gap: 10px; flex-wrap: wrap; }
.signinrow input { flex: 1 1 240px; }
.formerror { color: var(--warn); font-size: 14px; margin-top: 10px; }

.banner {
  border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 18px; background: var(--panel); font-size: 14px; line-height: 1.55;
}
.banner.draft { border-left-color: var(--line); color: var(--muted); }
.banner.declined { border-left-color: var(--warn); }

/* What the four levels mean, said once and up front — the meaning used to
   appear only after you had already picked a level. */
.levelkey { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
/* Not a grid: the level name is an element but the sentence after it is a loose
   text run, so grid put it in the 9px bullet column and broke it one word per
   line. The dot is positioned instead, and the text is left to flow. */
.levelkey li {
  position: relative; padding-left: 21px;
  font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 76ch;
}
.levelkey li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
}
.levelkey b { color: var(--text); font-weight: 650; }

/* A department you can open and close. The whole header is the control, so it
   is a real button — reachable by keyboard, not a div with a click handler. */
.depthead {
  width: 100%; background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.depthead:hover h2 { color: var(--cyan); }
.depthead .chev { color: var(--dim); font-size: 12px; margin-left: 4px; }
.panel.dept { padding-bottom: 16px; }
.panel.dept:not(.open) { padding-bottom: 14px; }
.panel.dept:not(.open) .depthead { padding: 2px 0; }

.skill { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.skill:last-child { border-bottom: none; padding-bottom: 4px; }
.skill .sl { font-weight: 600; font-size: 14.5px; }
.skill .ss { color: var(--dim); font-size: 13px; margin: 2px 0 10px; max-width: 72ch; }
.lvlpick { display: flex; flex-wrap: wrap; gap: 6px; }
.lvlpick button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.lvlpick button:hover { border-color: var(--cyan); color: var(--text); }
.lvlpick button.on { background: var(--grad); color: #06080B; border-color: transparent; font-weight: 650; }
/* "Not for me" is a choice to skip, and must never look like a low score. */
.lvlpick button.none.on { background: transparent; color: var(--text); border: 1px dashed var(--muted); font-weight: 400; }
.lvldesc { color: var(--muted); font-size: 13px; margin-top: 9px; max-width: 72ch; line-height: 1.5; }
.lvldesc b { color: var(--text); font-weight: 600; }
.count { color: var(--dim); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }

.stickybar {
  position: sticky; bottom: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(10,12,15,0), var(--bg) 35%);
  padding: 26px 0 calc(16px + env(safe-area-inset-bottom, 0px));
}
.stickybar .actions { margin-top: 0; }
.savestate { color: var(--dim); font-size: 13px; }
.savestate.error { color: var(--warn); }

/* ---- team list ---- */
.summaryline { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.appcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.appcard > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline;
}
.appcard > summary::-webkit-details-marker { display: none; }
.appcard > summary:hover { border-color: var(--cyan); }
.appcard .an { font-weight: 600; font-size: 15px; }
.appcard .am { grid-column: 1 / -1; color: var(--dim); font-size: 13px; }
.pill {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px;
  border-radius: 20px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.pill.submitted { border-color: var(--teal); color: var(--teal); }
.pill.draft { border-style: dashed; }
.pill.declined { border-color: var(--warn); color: var(--warn); }
.appbody { padding: 0 18px 16px; border-top: 1px solid var(--line-soft); }
.appbody .contact { color: var(--muted); font-size: 13px; margin: 12px 0 4px; }
.appbody .contact a { color: var(--cyan); }
.rgroup { margin-top: 14px; }
.rgroup h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.rrow { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.rrow:last-child { border-bottom: none; }
.rrow span:last-child { color: var(--muted); white-space: nowrap; }

/* The lit chip is the department you are in right now. A department that is on
   your application but not the one you are looking at keeps a faint outline —
   highlighting them all made pressing a new one look like nothing happened. */
.chip.has:not(.on) { color: var(--text); border-color: rgba(35,213,196,.35); }

/* Notes as the technician wrote them, on the review step and the team's list. */
.rnote { white-space: pre-wrap; color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; max-width: 72ch; }

/* CV and certificates. The button is a label so the real file input can stay
   hidden — browsers will not style it, and "Choose file / no file chosen" is
   not a sentence anyone wants on their application. */
.docrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.filebtn { cursor: pointer; display: inline-block; }
.doclist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.docitem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline;
  padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.docname { color: var(--cyan); text-decoration: none; font-size: 14px; overflow-wrap: anywhere; }
.docname:hover { text-decoration: underline; }
.docmeta { color: var(--dim); font-size: 13px; white-space: nowrap; }

/* ---- one applicant, whole ---- */
.backlink { margin: 0 0 14px; font-size: 13.5px; }
.backlink a { color: var(--muted); text-decoration: none; }
.backlink a:hover { color: var(--cyan); }

.personhead { padding-bottom: 18px; }
.personline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.personline h1 { font-size: 24px; margin: 0; letter-spacing: -0.01em; }
.personmeta { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }
.personhead .contact { font-size: 14px; margin: 10px 0 0; }
.personhead .contact a { color: var(--cyan); }
.personhead .hint { margin-top: 10px; }

/* The five numbers somebody wants before they decide to call. */
.atglance { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 18px; }
.glance {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.glance .gn { font-size: 26px; font-weight: 700; line-height: 1.1; }
.glance .gl { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }

.depttitle { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.depttitle h2 { margin: 0; }

.skillrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.skillrow:last-child { border-bottom: none; padding-bottom: 2px; }
.skillrow .sl { font-weight: 600; font-size: 14.5px; }
.skillrow .ss { color: var(--dim); font-size: 13px; margin-top: 2px; max-width: 62ch; }
/* Not `.lvl`: Crew Check already has one, in a monospace font, and a level
   here was quietly rendering in it. */
.skillrow .rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.stars { letter-spacing: 2px; font-size: 15px; line-height: 1; }
.stars .on { color: var(--teal); }
.stars .off { color: var(--line); }
.lvlword { color: var(--muted); font-size: 12.5px; font-family: inherit; }

/* On a phone the level belongs under the skill, not squeezed beside it. */
@media (max-width: 560px) {
  .skillrow { grid-template-columns: 1fr; }
  .skillrow .rating { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* The applicant list: a name you can open. */
.appcard .an a { color: inherit; text-decoration: none; }
.appcard .an a:hover { color: var(--cyan); text-decoration: underline; }
.openperson { font-size: 13px; }

/* ---- reading an applicant quickly ---- */

/* What they are strongest at, as the first thing after their name. Each one
   opens that department rather than making somebody hunt for it. */
.bestpanel h2 { margin-bottom: 2px; }
.bestrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.bestchip {
  text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; color: inherit; font: inherit; cursor: pointer;
}
.bestchip:hover { border-color: var(--cyan); }
.bestchip .bn { display: block; font-weight: 650; font-size: 14.5px; }
.bestchip .bm { display: block; color: var(--dim); font-size: 12.5px; margin-top: 3px; }

.toolbar { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.skillsearch {
  flex: 1 1 260px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px;
}
.skillsearch:focus { outline: none; border-color: var(--cyan); }

/* A department is shut until it is wanted: eleven of them open at once is a
   document, and nobody reads a document to make a booking. */
#pSkills .depthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 2px 0 6px;
}
#pSkills .panel.dept.open .depthead { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
#pSkills .dname { font-weight: 650; font-size: 15px; }
#pSkills .dsum { color: var(--dim); font-size: 12.5px; margin-left: 10px; }
#pSkills .dright { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
#pSkills .chev { color: var(--dim); font-size: 12px; }

@media (max-width: 560px) {
  #pSkills .depthead { flex-direction: column; align-items: flex-start; gap: 4px; }
  #pSkills .dsum { margin-left: 0; display: block; }
}

/* ---- Reboot's own read of a technician ---- */
.readhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.readhead h2 { margin: 0; }
.readgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 16px; }
.readblock { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.readblock .rt { font-weight: 650; font-size: 14px; }
.readblock .rs { color: var(--dim); font-size: 12.5px; margin: 2px 0 10px; }
.readnote { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 12px; }

.rolechips { display: flex; flex-wrap: wrap; gap: 6px; }
.rolechip {
  background: rgba(35,213,196,.08); border: 1px solid rgba(35,213,196,.35); color: var(--text);
  border-radius: 20px; padding: 4px 11px; font-size: 12.5px;
}
.rolechip .rc { color: var(--dim); margin-left: 6px; font-size: 11px; }

.gaplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gaplist li { font-size: 13.5px; }
.gaplist .gap { display: block; color: var(--dim); font-size: 12.5px; margin-top: 1px; }

.countlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.countlist li { display: block; }
.countlist .cn { font-weight: 700; font-size: 16px; color: var(--teal); text-align: right; }
.countlist .cl { font-size: 13.5px; }
.countlist .cs { display: block; color: var(--dim); font-size: 12px; }

/* The paragraph a hiring manager reads first. Every clause in it is a fact
   that also appears in the boxes underneath. */
.readsummary {
  font-size: 15px; line-height: 1.65; color: var(--text); margin: 14px 0 0; max-width: 78ch;
  border-left: 3px solid var(--teal); padding-left: 16px;
}

/* A role somebody holds only in a small room is marked as such: "A1" with no
   size on it is a lie in one direction or the other. */
.rolechip.small { background: transparent; border-style: dashed; border-color: var(--line); }
.rolechip.small .rc { color: var(--muted); }
.countlist .of { display: block; color: var(--teal); font-size: 12px; margin-top: 1px; }

/* The impression in one word, with the reason beside it — never a label on its
   own, because the person it describes is entitled to know why. */
.standing { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.standing .tag {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  border-radius: 20px; padding: 4px 11px; border: 1px solid var(--line); color: var(--muted);
}
.standing .tag.specialist { border-color: var(--teal); color: var(--teal); background: rgba(35,213,196,.08); }
.standing .tag.general-tech { border-color: var(--cyan); color: var(--cyan); }
.standing .tag.stagehand { border-color: var(--muted); color: var(--text); }
.standing .tag.green { border-style: dashed; }
.standing span { color: var(--muted); font-size: 13.5px; max-width: 70ch; }

/* Equipment named in somebody's own CV — what a booker scans for when they
   want to know if this person knows their kit. */
.rolechip.gear { background: var(--panel-2); border-color: var(--line); }
.rolechip.gear:hover { border-color: var(--cyan); }

/* ---------- where you can legally work ----------
   Two tick boxes and a free-text line. Deliberately plain: this is a fact
   being recorded, not a thing being sold, and a booker reads it as a yes or
   a no. */
.checkrow{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px;}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px;}
.check input{
  width:18px;height:18px;flex:0 0 auto;cursor:pointer;
  accent-color:var(--violet,#a02ef0);
}
@media (min-width:620px){.checkrow{flex-direction:row;gap:26px;flex-wrap:wrap;}}