/* ==========================================================================
   EachEntry portal prototype — auth + app shell
   --------------------------------------------------------------------------
   Self-contained on purpose. The marketing pages are styled by a Tailwind
   bundle that was compiled for the original site's markup only: a utility the
   original never used has no rule and silently does nothing (this is what left
   404.html with no padding). Rather than guess which utilities survived, the
   app ships its own CSS and borrows only the design tokens below, read out of
   the site's own :root — same font, same near-black, same border grey, same
   radius — so it reads as the same product.
   ========================================================================== */

:root {
  --app-bg: #fafafa;
  --app-surface: #ffffff;
  --app-fg: #0a0a0a;
  --app-muted: #737373;
  --app-subtle: #f5f5f5;
  --app-border: #e5e5e5;
  --app-border-strong: #d4d4d4;
  --app-accent: #0891b2;
  --app-accent-hover: #0e7490;
  --app-accent-soft: #ecfeff;
  --app-danger: #e40014;
  --app-danger-soft: #fef2f2;
  --app-ok: #15803d;
  --app-ok-soft: #f0fdf4;
  --app-warn: #b45309;
  --app-warn-soft: #fffbeb;
  --app-radius: 0.625rem;
  --app-radius-lg: 0.875rem;
  --app-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 1px 3px rgb(0 0 0 / .06);
  --app-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
  --app-sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body.eachentry-app {
  margin: 0;
  font-family: var(--app-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--app-fg);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

.eachentry-app :focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Visible only to screen readers, but focusable (skip links). */
.app-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.app-skip:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: .5rem .875rem; background: var(--app-fg); color: #fff;
  border-radius: var(--app-radius); font-weight: 600;
}

/* ----------------------------------------------------------------- controls */
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5625rem 1rem; border-radius: var(--app-radius);
  border: 1px solid transparent; background: var(--app-fg); color: #fff;
  font: inherit; font-weight: 600; font-size: .875rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              opacity .15s ease;
}
.app-btn:hover { background: #262626; }
.app-btn[disabled], .app-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.app-btn--accent { background: var(--app-accent); }
.app-btn--accent:hover { background: var(--app-accent-hover); }
.app-btn--ghost {
  background: transparent; color: var(--app-fg); border-color: var(--app-border);
}
.app-btn--ghost:hover { background: var(--app-subtle); }
.app-btn--danger { background: transparent; color: var(--app-danger); border-color: var(--app-border); }
.app-btn--danger:hover { background: var(--app-danger-soft); border-color: var(--app-danger); }
.app-btn--sm { padding: .375rem .625rem; font-size: .8125rem; }
.app-btn--block { width: 100%; }

.app-field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.app-field > label { font-size: .8125rem; font-weight: 600; }
.app-field input, .app-field select, .app-field textarea {
  width: 100%; padding: .625rem .75rem; font: inherit; font-size: .9375rem;
  color: var(--app-fg); background: var(--app-surface);
  border: 1px solid var(--app-border); border-radius: var(--app-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-field input:focus, .app-field select:focus, .app-field textarea:focus {
  outline: none; border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgb(8 145 178 / .13);
}
.app-field input[aria-invalid="true"] { border-color: var(--app-danger); }
.app-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(228 0 20 / .12); }
.app-hint { font-size: .75rem; color: var(--app-muted); }
.app-error { font-size: .75rem; color: var(--app-danger); font-weight: 500; min-height: 1rem; }

/* Password strength meter */
.app-meter { display: flex; gap: 4px; margin-top: .125rem; }
.app-meter span {
  height: 4px; flex: 1; border-radius: 999px; background: var(--app-border);
  transition: background-color .2s ease;
}
.app-meter[data-score="1"] span:nth-child(-n+1) { background: var(--app-danger); }
.app-meter[data-score="2"] span:nth-child(-n+2) { background: var(--app-warn); }
.app-meter[data-score="3"] span:nth-child(-n+3) { background: #ca8a04; }
.app-meter[data-score="4"] span { background: var(--app-ok); }

/* ------------------------------------------------------------------- auth */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .auth-wrap { grid-template-columns: 1fr 1fr; } }

.auth-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem 1.5rem; background: var(--app-surface);
}
@media (min-width: 640px) { .auth-main { padding: 3rem 3.5rem; } }

.auth-inner { width: 100%; max-width: 26rem; margin: 0 auto; }
.auth-mark {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.25rem;
  font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em;
  color: var(--app-fg); text-decoration: none;
}
.auth-mark img { width: 22px; height: 22px; }
.auth-inner h1 {
  margin: 0 0 .5rem; font-size: 1.625rem; letter-spacing: -.025em; line-height: 1.2;
}
.auth-lede { margin: 0 0 1.75rem; color: var(--app-muted); font-size: .9375rem; }
.auth-alt { margin-top: 1.5rem; font-size: .875rem; color: var(--app-muted); }
.auth-alt a { color: var(--app-accent); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-aside {
  display: none; padding: 3.5rem; background: var(--app-fg); color: #fafafa;
  flex-direction: column; justify-content: center;
}
@media (min-width: 900px) { .auth-aside { display: flex; } }
.auth-aside h2 {
  margin: 0 0 1.25rem; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em;
  max-width: 22ch;
}
.auth-aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .875rem; }
.auth-aside li { display: flex; gap: .625rem; font-size: .9375rem; color: #d4d4d4; }
.auth-aside li svg { flex-shrink: 0; margin-top: .1875rem; color: #22d3ee; }

/* The prototype notice. Deliberately plain and always visible: this is a
   client-side demo and must never read as real account security. */
.app-notice {
  display: flex; gap: .625rem; padding: .75rem .875rem; margin-bottom: 1.5rem;
  background: var(--app-warn-soft); border: 1px solid #fde68a;
  border-radius: var(--app-radius); font-size: .8125rem; line-height: 1.45;
  color: #78350f;
}
.app-notice svg { flex-shrink: 0; margin-top: .125rem; }
.app-notice strong { font-weight: 700; }

/* ------------------------------------------------------------- app shell */
.app-shell { display: flex; min-height: 100vh; }

.app-side {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: 15rem;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem .75rem; background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  transform: translateX(-100%); transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.app-side[data-open="true"] { transform: translateX(0); }
@media (min-width: 1024px) { .app-side { transform: none; } }

.app-side__mark {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem 1rem;
  font-weight: 700; letter-spacing: -.02em; color: var(--app-fg); text-decoration: none;
}
.app-side__mark img { width: 20px; height: 20px; }
.app-side__group {
  padding: .875rem .5rem .375rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--app-muted);
}
.app-nav-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .5rem; border-radius: var(--app-radius);
  font-size: .875rem; font-weight: 500; color: #404040; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.app-nav-link:hover { background: var(--app-subtle); color: var(--app-fg); }
.app-nav-link[aria-current="page"] {
  background: var(--app-accent-soft); color: #155e75; font-weight: 600;
}
.app-nav-link svg { flex-shrink: 0; opacity: .7; }
.app-nav-link[aria-current="page"] svg { opacity: 1; }
.app-nav-count {
  margin-left: auto; padding: .0625rem .375rem; border-radius: 999px;
  background: var(--app-subtle); font-size: .6875rem; font-weight: 700;
  color: var(--app-muted);
}
.app-nav-link[aria-current="page"] .app-nav-count { background: #cffafe; color: #155e75; }

.app-side__foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--app-border); }
.app-whoami { display: flex; align-items: center; gap: .625rem; padding: .5rem; }
.app-avatar {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0;
  border-radius: 999px; background: var(--app-fg); color: #fff;
  font-size: .75rem; font-weight: 700;
}
.app-whoami__text { min-width: 0; }
/* Both are spans, so they need an explicit block to stack. */
.app-whoami__text > span { display: block; }
.app-whoami__name {
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.app-whoami__mail {
  font-size: .75rem; color: var(--app-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.app-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgb(10 10 10 / .4);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.app-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .app-scrim { display: none; } }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .app-main { margin-left: 15rem; } }

.app-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; background: rgb(255 255 255 / .85);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--app-border);
}
@media (min-width: 640px) { .app-topbar { padding: .75rem 1.5rem; } }
.app-burger {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: transparent; border: 1px solid var(--app-border);
  border-radius: var(--app-radius); cursor: pointer; color: var(--app-fg);
}
@media (min-width: 1024px) { .app-burger { display: none; } }
.app-topbar__title { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.app-topbar__spacer { margin-left: auto; }

.app-content { padding: 1.5rem 1rem 4rem; }
@media (min-width: 640px) { .app-content { padding: 2rem 1.5rem 4rem; } }
.app-content > header { margin-bottom: 1.5rem; }
.app-content > header h1 {
  margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.025em;
}
.app-content > header p { margin: 0; color: var(--app-muted); font-size: .9375rem; }

/* -------------------------------------------------------------- surfaces */
.app-card {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow);
}
.app-card__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.125rem; border-bottom: 1px solid var(--app-border);
}
.app-card__head h2 { margin: 0; font-size: .9375rem; font-weight: 600; }
.app-card__head .app-topbar__spacer { margin-left: auto; }
.app-card__body { padding: 1.125rem; }

.app-grid { display: grid; gap: 1rem; }
.app-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .app-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.app-grid--split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .app-grid--split { grid-template-columns: 1.6fr 1fr; } }

.app-stat { padding: 1rem 1.125rem; }
.app-stat__label {
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--app-muted);
}
.app-stat__value {
  margin-top: .375rem; font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.app-stat__note { margin-top: .25rem; font-size: .75rem; color: var(--app-muted); }

/* ---------------------------------------------------------------- tables */
.app-table-wrap { overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.app-table th, .app-table td {
  padding: .6875rem .875rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--app-border); white-space: nowrap;
}
.app-table th {
  font-size: .75rem; font-weight: 600; color: var(--app-muted);
  background: #fcfcfc; position: sticky; top: 0;
}
.app-table tbody tr { transition: background-color .12s ease; }
.app-table tbody tr:hover { background: #fcfcfc; }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table td.app-td-wrap { white-space: normal; min-width: 14rem; }
.app-table .app-num { text-align: right; font-variant-numeric: tabular-nums; }
.app-row-btn {
  padding: 0; background: none; border: 0; font: inherit; font-weight: 600;
  color: var(--app-fg); cursor: pointer; text-align: left;
}
.app-row-btn:hover { color: var(--app-accent); text-decoration: underline; }

/* ---------------------------------------------------------------- badges */
.app-badge {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.3;
  background: var(--app-subtle); color: #404040;
}
.app-badge::before {
  content: ""; width: .375rem; height: .375rem; border-radius: 999px;
  background: currentColor; opacity: .75;
}
.app-badge--new      { background: #eff6ff; color: #1d4ed8; }
.app-badge--review   { background: var(--app-warn-soft); color: var(--app-warn); }
.app-badge--interview{ background: #faf5ff; color: #7e22ce; }
.app-badge--accepted { background: var(--app-ok-soft); color: var(--app-ok); }
.app-badge--rejected { background: var(--app-danger-soft); color: #b91c1c; }
.app-badge--open     { background: var(--app-ok-soft); color: var(--app-ok); }
.app-badge--closed   { background: var(--app-subtle); color: var(--app-muted); }
.app-badge--draft    { background: var(--app-subtle); color: var(--app-muted); }
.app-badge--active   { background: var(--app-ok-soft); color: var(--app-ok); }
.app-badge--invited  { background: #eff6ff; color: #1d4ed8; }
.app-badge--paused   { background: var(--app-warn-soft); color: var(--app-warn); }

/* ----------------------------------------------------------- empty states */
.app-empty { padding: 3rem 1.5rem; text-align: center; }
.app-empty svg { color: var(--app-border-strong); margin-bottom: .75rem; }
.app-empty h3 { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; }
.app-empty p { margin: 0 auto 1.25rem; max-width: 30ch; color: var(--app-muted); font-size: .875rem; }

/* -------------------------------------------------------------- activity */
.app-feed { margin: 0; padding: 0; list-style: none; }
.app-feed li {
  display: flex; gap: .75rem; padding: .75rem 0;
  border-bottom: 1px solid var(--app-border); font-size: .875rem;
}
.app-feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.app-feed__dot {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--app-subtle); color: #525252;
}
.app-feed__text { min-width: 0; }
.app-feed__when { font-size: .75rem; color: var(--app-muted); }

/* ----------------------------------------------------------------- drawer */
.app-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(30rem, 100%);
  display: flex; flex-direction: column; background: var(--app-surface);
  border-left: 1px solid var(--app-border); box-shadow: var(--app-shadow-lg);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.app-drawer[data-open="true"] { transform: translateX(0); }
.app-drawer__head {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.125rem; border-bottom: 1px solid var(--app-border);
}
.app-drawer__head h2 { margin: 0; font-size: 1.0625rem; letter-spacing: -.015em; }
.app-drawer__head p { margin: .1875rem 0 0; font-size: .8125rem; color: var(--app-muted); }
.app-x {
  margin-left: auto; display: grid; place-items: center;
  width: 2rem; height: 2rem; flex-shrink: 0;
  background: transparent; border: 1px solid var(--app-border);
  border-radius: var(--app-radius); cursor: pointer; color: var(--app-muted);
}
.app-x:hover { background: var(--app-subtle); color: var(--app-fg); }
.app-drawer__body { padding: 1.125rem; overflow-y: auto; flex: 1; }
.app-drawer__foot {
  display: flex; gap: .5rem; padding: 1.125rem;
  border-top: 1px solid var(--app-border); background: #fcfcfc;
}

.app-dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .5rem .75rem; font-size: .875rem; }
.app-dl dt { color: var(--app-muted); }
.app-dl dd { margin: 0; }
.app-sub {
  margin: 1.5rem 0 .625rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted);
}
.app-answer { margin: 0 0 .875rem; }
.app-answer dt { font-size: .8125rem; font-weight: 600; margin-bottom: .1875rem; }
.app-answer dd { margin: 0; font-size: .875rem; color: #404040; line-height: 1.55; }
.app-note {
  padding: .625rem .75rem; margin-bottom: .5rem; font-size: .8125rem;
  background: var(--app-subtle); border-radius: var(--app-radius);
}
.app-note__meta { margin-top: .25rem; font-size: .6875rem; color: var(--app-muted); }

/* ----------------------------------------------------------------- toolbar */
.app-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .875rem 1.125rem; border-bottom: 1px solid var(--app-border);
}
.app-toolbar input[type="search"], .app-toolbar select {
  padding: .4375rem .625rem; font: inherit; font-size: .8125rem;
  border: 1px solid var(--app-border); border-radius: var(--app-radius);
  background: var(--app-surface); color: var(--app-fg);
}
.app-toolbar input[type="search"]:focus, .app-toolbar select:focus {
  outline: none; border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgb(8 145 178 / .13);
}
.app-toolbar input[type="search"] { min-width: 12rem; flex: 1; }
.app-count { font-size: .8125rem; color: var(--app-muted); }

/* ------------------------------------------------------------------ toast */
.app-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 120;
  max-width: min(92vw, 28rem); padding: .625rem .875rem;
  background: var(--app-fg); color: #fafafa; border-radius: var(--app-radius);
  font-size: .8125rem; font-weight: 500; box-shadow: var(--app-shadow-lg);
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.app-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .app-side, .app-drawer, .app-scrim, .app-toast { transition: none; }
}