/* ingrid.fyi hiring pages. Loads after base.css and story-pages/story.css, which style the shared tags
   (title, subtitle, lede, sections, labelled rows, companies, bridges, closing). One accent colour, teal. */

:root { --panel: min(34vw, 30rem); }

/* the signed-in reader's name in the header (preview: ?view=member) */
ig-header .reader { display: none; font-family: var(--sans); font-size: 0.85rem; }
body.member ig-header .reader { display: inline; }
body.member ig-header .signin { display: none; }

/* ---------- who gets hired ---------- */
ig-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.9rem 0 1.6rem; }
ig-chip a {
  display: inline-block; white-space: nowrap; font-family: var(--sans); font-size: 0.78rem; line-height: 1.2;
  color: var(--teal); border: 1px solid var(--teal); border-radius: 2px; padding: 0.38em 0.8em;
}
ig-chip a:hover { background: rgba(15, 107, 134, 0.08); text-decoration: none; }
ig-role { display: block; scroll-margin-top: 1.2rem; }
ig-role-label { color: var(--teal); font-weight: 600; }
ig-role-label a { color: inherit; }
ig-role.flash ig-role-label { animation: igflash 2.6s ease-out; }
@keyframes igflash { 0%, 35% { background: rgba(15, 107, 134, 0.18); } 100% { background: transparent; } }

/* ---------- skills: a term grid ---------- */
ig-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2.2rem; margin: 1.2rem 0 1.4rem; }
ig-term { display: block; }
ig-term-name { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.3rem; }
ig-term-text { display: block; line-height: 1.5; }

/* ---------- prose with a run-in bold opening ---------- */
ig-runin { display: block; margin: 0 0 1em; }
ig-runin-label { font-weight: 700; color: var(--ink); }

/* ---------- where the work is: stacked unit entries ---------- */
ig-entries { display: block; margin: 1.2rem 0 1.4rem; }
ig-entry { display: block; margin: 0 0 1.3rem; }
ig-entry p { margin: 0; }
ig-entry-kicker { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
ig-entry-name { font-weight: 600; }
ig-entry-kicker + p ig-entry-name { font-size: 1.12rem; }

/* ---------- terms: a footnote glossary ---------- */
/* the Terms section reads as a footnote: a hairline in place of the section rule, a smaller heading */
ig-section[kind="terms"] { border-top-color: var(--hair); }
ig-section[kind="terms"] ig-section-title { font-size: 1.15rem; margin-bottom: 0.7rem; }
ig-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.2rem; margin: 0; font-size: 0.9rem; line-height: 1.5; }
ig-gloss { display: block; }
ig-gloss-term { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

/* ---------- live postings ---------- */
ig-postings { display: block; margin-top: 2.8rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
ig-feed, ig-query { display: none; }
.widget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.widget-head .updated { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.8rem 0 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--hair); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.15rem 0; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.tab.on { color: var(--ink); border-bottom-color: var(--teal); }
.tab:disabled { color: var(--faint); cursor: default; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.posting { border: 1px solid var(--hair); padding: 0.8rem 1rem 0.75rem; }
.posting .top { display: flex; justify-content: space-between; gap: 0.6rem; font-family: var(--sans); }
.posting .co { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.posting .city { font-size: 0.78rem; color: var(--muted); }
.posting .role { font-weight: 600; margin: 0.45rem 0 0.15rem; }
.posting .skills { font-size: 0.92rem; line-height: 1.45; }
.posting .date { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); margin-top: 0.55rem; }
.more { margin-top: 1rem; background: none; border: 1px solid var(--ink); color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 0.82rem; padding: 0.55em 1.1em; border-radius: 2px; cursor: pointer; }
.placeholder { font-style: italic; color: var(--muted); margin: 0.6rem 0 0; }
ig-postings-locked { display: block; background: var(--card); padding: 1.3rem 1.4rem 1.4rem; }
ig-postings-locked h2 { margin: 0 0 0.45rem; font-size: 1.3rem; }
ig-postings-locked p { margin: 0 0 1rem; }
body.degraded .widget-head .label { color: var(--faint); }

/* ---------- back to the story (one rule above, none doubled below the postings) ---------- */
ig-backtostory { display: block; margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
ig-backtostory .label { margin-bottom: 0.6rem; }

/* ---------- the postings panel ---------- */
ig-panel {
  display: block; position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel); z-index: 30;
  background: var(--bg); border-left: 1px solid var(--hair); box-shadow: -6px 0 18px rgba(0, 0, 0, 0.06);
  padding: 1.5rem 1.4rem 4rem; overflow-y: auto; transform: translateX(100%); visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s;
}
ig-panel.open { transform: none; visibility: visible; }
ig-panel .close { position: absolute; right: 0.9rem; top: 0.9rem; background: none; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; }
ig-panel .handle { display: none; }
ig-panel .widget-head { flex-direction: column; gap: 0.3rem; padding-right: 1.5rem; }
ig-panel .cards { grid-template-columns: 1fr; }
body.panel-open ig-google-box { display: none; }
@media (min-width: 761px) {
  body.panel-open { padding-right: var(--panel); }
  body.panel-open ig-guest-bar { right: var(--panel); }
}
@media (min-width: 761px) and (max-width: 1400px) {
  body.panel-open .columns { grid-template-columns: minmax(0, var(--measure)); }
  body.panel-open main.wrap { max-width: calc(var(--measure) + 2rem); }
  body.panel-open ig-onthispage { display: none; }
  body.panel-open ig-header .tagline { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  ig-terms, ig-glossary, .cards { grid-template-columns: 1fr; }
  ig-panel {
    top: auto; left: 0; width: auto; height: 66vh; border-left: 0; border-top: 1px solid var(--hair);
    border-radius: 10px 10px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08); padding-top: 1.6rem; transform: translateY(100%);
  }
  ig-panel .handle { display: block; position: absolute; top: 0.55rem; left: 50%; width: 2.4rem; height: 4px; margin-left: -1.2rem; border-radius: 2px; background: var(--hair); }
  .widget-head { flex-direction: column; gap: 0.25rem; }
}