/* Palette, type and radii lifted from danieljruiz.com so this reads as the same
   person's work. Same font files, not a lookalike substitute. */

@font-face {
  font-family: 'Sora';
  src: url('fonts/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:   #FFFFFF;
  --paper-2: #F4F4F2;
  --ink:     #14161A;
  --ink-2:   #52585F;
  --ink-3:   #8A9098;
  --line:    #E4E4E0;

  --accent:      #4B36EF;
  --accent-deep: #3421C4;
  --accent-wash: #EFEDFE;
  --orange:      #E2571C;
  --orange-wash: #FCEFE8;
  --red:         #C82740;
  --green:       #12855A;
  --green-wash:  #E6F3ED;

  --display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --text:    'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-card: 18px;
  --r-ctrl: 12px;
}

* { box-sizing: border-box; }

/* The hidden attribute has to win, always.
   Browsers implement `hidden` as `display: none`, but that is a default and any
   author rule beats it. `.gate` below sets `display: grid`, which quietly
   overrode it and left the sign in card covering the dashboard forever, on
   every browser, looking for all the world like a broken login. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font: 16px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, .tab, .btn, .pill, .group-label {
  font-family: var(--display);
  letter-spacing: -.01em;
}

.muted { color: var(--ink-2); }
.small { font-size: .85rem; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper); color: var(--ink);
  font: 600 .92rem/1 var(--display);
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: #EAEAE6; color: var(--ink); }
.btn.skip { color: var(--ink-2); }
.btn.skip:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---------- sign in ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 44px; width: min(430px, 100%);
}
.gate-card h1 { font-size: 1.7rem; margin: 0; letter-spacing: -.03em; }
.gate-card p { margin: 12px 0 26px; color: var(--ink-2); }
#signin-form { display: flex; flex-direction: column; gap: 12px; }
#email, #password {
  min-height: 46px; padding: 0 14px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--paper);
}
#email:focus, #password:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gate-msg {
  margin-top: 20px; padding: 13px 15px; border-radius: var(--r-ctrl);
  background: var(--green-wash); color: var(--green); font-size: .92rem;
}
.gate-msg.error { background: #FBE9EC; color: var(--red); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px; background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.topbar-left { display: flex; align-items: baseline; gap: 16px; }
.topbar h1 { font-size: 1.15rem; margin: 0; letter-spacing: -.02em; }
.topbar-right { display: flex; gap: 8px; }

.banner {
  padding: 13px 32px; font-size: .92rem;
  background: var(--accent-wash); color: var(--accent-deep);
  border-bottom: 1px solid #DEDAFB;
}
.banner.warn { background: var(--orange-wash); color: var(--orange); border-bottom-color: #F5DDD0; }

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 2px; padding: 20px 32px 0; flex-wrap: wrap;
}
.tab {
  min-height: 42px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-ctrl);
  background: transparent; color: var(--ink-2);
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tab:hover { background: #EAEAE6; color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tab em {
  font-style: normal; margin-left: 7px; opacity: .55;
  font-variant-numeric: tabular-nums;
}

/* ---------- date groups ---------- */
.group-label {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  margin: 10px 0 -4px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
}
.group-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.group-label:first-child { margin-top: 0; }

/* ---------- the board ---------- */
.board {
  display: grid; gap: 20px; padding: 26px 32px 80px;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  align-items: start;
}

.job {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; display: grid; gap: 13px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.job:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 22, 26, .07);
}

.job h2 { font-size: 1.06rem; margin: 0; line-height: 1.35; letter-spacing: -.02em; }
.job h2 a { color: var(--ink); text-decoration: none; }
.job h2 a:hover { color: var(--accent); }

.job .meta {
  display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center;
  font-size: .84rem; color: var(--ink-2);
}
.job .company {
  font-family: var(--display); font-weight: 650; color: var(--ink);
  text-transform: capitalize;
}
.job .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

/* Two pills exist and both are solid, because a pill should mean something.
   Where a job came from is metadata, so it reads as plain text with the
   location instead of competing for attention as a third badge. */
.pill {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff;
}
.pill.fresh   { background: var(--accent); }
.pill.stretch { background: var(--orange); }

.job .snippet {
  font-size: .9rem; color: var(--ink-2); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.job .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.job .actions .spacer { flex: 1; }

.job select {
  min-height: 44px; padding: 0 12px;
  font: 600 .92rem/1 var(--display); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper); cursor: pointer;
}
.job select:focus, .job textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.job textarea {
  width: 100%; min-height: 60px; padding: 11px 13px;
  font: inherit; font-size: .89rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-2); resize: vertical;
}
.job textarea::placeholder { color: var(--ink-3); }

.empty {
  grid-column: 1 / -1;
  padding: 70px 32px; text-align: center; color: var(--ink-3);
  font-family: var(--display);
}

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 16px 20px; }
  .board, .tabs, .banner { padding-left: 20px; padding-right: 20px; }
  .board { grid-template-columns: 1fr; }
}

.build { margin-top: 22px; font-size: .72rem; color: var(--ink-3); text-align: right; }

.pill.usonly { background: var(--red); }