/* ==========================================================================
   GaweTracker Design System v2
   Identity: Zinc Achromatic — Decision-First Job Tracker
   Typeface: JetBrains Mono (JetBrains Mono → ui-monospace fallback)
   Dial: ENERGY 2 / RHYTHM 2 / MOTION 1
   ========================================================================== */

/* Fonts are self-hosted in public/css/fonts.css and linked from each page
   head, so this stylesheet no longer blocks on a remote @import. */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Zinc achromatic palette */
  --background:           240 4.8% 97.5%;   /* zinc-50 canvas */
  --foreground:           240 10% 3.9%;      /* zinc-950 */
  --card:                 0 0% 100%;
  --card-foreground:      240 10% 3.9%;
  --muted:                240 4.8% 95.9%;   /* zinc-100 */
  --muted-foreground:     240 3.8% 46.1%;   /* zinc-500 */
  --border:               240 5.9% 90%;     /* zinc-200 */
  --input:                240 5.9% 90%;
  --ring:                 240 5.9% 10%;
  --primary:              240 5.9% 10%;     /* zinc-900 */
  --primary-foreground:   0 0% 98%;
  --secondary:            240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --accent:               240 4.8% 95.9%;
  --accent-foreground:    240 5.9% 10%;
  --destructive:          0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --popover:              0 0% 100%;
  --popover-foreground:   240 10% 3.9%;
  --radius:               0.375rem;         /* 6px — compact, not pill */

  /* Semantic status palette */
  --status-wishlist:      240 3.8% 46.1%;
  --status-applied:       217 91% 50%;
  --status-screening:     38 92% 50%;
  --status-interview:     262 83% 58%;
  --status-offer:         142 76% 36%;
  --status-hired:         142 76% 28%;
  --status-rejected:      0 84.2% 50%;

  /* Identity motif: 2px left-accent on active/key elements */
  --accent-width:         2px;
  --accent-color:         hsl(240 5.9% 10%);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ─── Typography scale ───────────────────────────────────────────────────── */
/* Reason: tight negative tracking on headings creates compressed editorial
   authority; body stays neutral at 0 tracking for long-form readability */

h1, .h1 {
  font-size: 1.5rem;         /* 24px */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
h2, .h2 {
  font-size: 1.0625rem;      /* 17px */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: hsl(var(--foreground));
}
h3, .h3 {
  font-size: 0.9375rem;      /* 15px */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: hsl(var(--foreground));
}
p, .body { font-size: 0.875rem; line-height: 1.6; }

/* ─── Utility classes ────────────────────────────────────────────────────── */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-none     { flex: none; }

.grid          { display: grid; }
.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-7   { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:flex-row        { flex-direction: row; }
  .md\:items-center    { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2      { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gap-1   { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-w-0   { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only   { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* Text utilities */
.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;      line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }

.text-foreground { color: hsl(var(--foreground)); }
.text-muted      { color: hsl(var(--muted-foreground)) !important; }
.text-muted-fg   { color: hsl(var(--muted-foreground)); }

.tabular-nums { font-variant-numeric: tabular-nums; }
.uppercase    { text-transform: uppercase; }
.capitalize   { text-transform: capitalize; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Margin/padding helpers */
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: 0.25rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-3   { margin-top: 0.75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-auto { margin-top: auto; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.ml-auto { margin-left: auto; }
.mr-1   { margin-right: 0.25rem; }

.p-0    { padding: 0; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-2   { padding-top: 0.5rem; }
.pt-3   { padding-top: 0.75rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-4   { padding-bottom: 1rem; }

/* Border utils */
.border-t  { border-top: 1px solid hsl(var(--border)); }
.border-b  { border-bottom: 1px solid hsl(var(--border)); }
.border    { border: 1px solid hsl(var(--border)); }
.rounded   { border-radius: var(--radius); }
.rounded-full { border-radius: 9999px; }

/* Position */
.relative  { position: relative; }
.absolute  { position: absolute; }
.sticky    { position: sticky; }
.inset-0   { inset: 0; }
.top-0     { top: 0; }
.right-0   { right: 0; }
.z-10      { z-index: 10; }
.z-20      { z-index: 20; }

/* Width / display */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.w-auto       { width: auto; }
.max-w-xl     { max-width: 36rem; }
.max-w-2xl    { max-width: 42rem; }
.max-w-3xl    { max-width: 48rem; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.main-content {
  flex: 1 1 0%;
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

/* ─── Navigation shell ───────────────────────────────────────────────────── */
/*
  Identity motif: the "G" logotype is a solid zinc-900 square badge.
  The active nav item uses a 2px bottom border in zinc-950 — same weight
  as the card borders, making the accent feel systematic not decorative.
  Reason: consistent 2px accent throughout app creates a cohesive visual
  system without needing color or gradient.
*/

header.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background-color: hsl(0 0% 100% / 0.95);
  border-bottom: 1px solid hsl(var(--border));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.25rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: 1.5rem;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

/* Logo badge: zinc-950 square, initials "G", 7×7 grid of 1px dots
   on hover reveals the dot texture — identity motif, not decoration */
.brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

/* Real brand mark (the "GT" logo) used in place of the lettered placeholder. */
.brand-logo-img {
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.brand-logo-img.brand-logo-lg {
  width: 2.25rem;
  height: 2.25rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  height: 3.25rem;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.nav-item:hover {
  color: hsl(var(--foreground));
}

/* Active state: 2px bottom border = identity motif, not an arbitrary highlight */
.nav-item.active {
  color: hsl(var(--foreground));
  font-weight: 600;
  border-bottom-color: hsl(var(--foreground));
}

.user-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.user-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

/* ─── Header: narrow screens ─────────────────────────────────────────────── */
/* Reason: the six-item primary nav is wider than a phone viewport; without a
   narrow-screen rule it stretches the document and every page scrolls
   sideways. Below 768px the header becomes two rows — brand + account on
   top, the nav as its own horizontally scrollable row. Desktop is untouched
   because this block is max-width only. */
@media (max-width: 767px) {
  .nav-container {
    flex-wrap: wrap;
    height: auto;
    padding: 0 0.75rem;
    gap: 0;
  }
  /* Flatten the wrapper so brand and nav become direct flex children and the
     nav can claim its own full-width row. */
  .brand-group { display: contents; }
  .brand-link { height: 3rem; }
  .user-label { display: none; }
  .user-nav { margin-left: auto; }
  .main-nav {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid hsl(var(--border));
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-item {
    height: 2.75rem;
    padding: 0 0.75rem;
  }
}

/* ─── Card component ─────────────────────────────────────────────────────── */
/* Reason: 1px border + no shadow = "crisp boundary" system; shadow only
   at dialog elevation (z-index contract). Cards are flat data surfaces. */

.card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem 0.75rem;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: hsl(var(--card-foreground));
}

.card-description {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}

.card-content {
  padding: 1.25rem 1.5rem;
}

.card-header + .card-content { padding-top: 0; }

.card-footer {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem 1.25rem;
  gap: 0.5rem;
}

/* ─── Section card (page-level containers) ───────────────────────────────── */
/* Slightly different from card: full-width, no outer margin radius tweak */
.section-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  gap: 1rem;
}

.section-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

.section-body { padding: 0; }

/* ─── Button system ──────────────────────────────────────────────────────── */
/* Reason: 6px radius (--radius) for interactive elements, consistent with
   input radius. Not pill, not square — purposeful mid-point. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  border: 1px solid transparent;
  gap: 0.375rem;
  outline: none;
  height: 2.125rem;    /* 34px — compact, not oversized */
  padding: 0 0.875rem;
}

.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-default, .btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-default:hover, .btn-primary:hover {
  background-color: hsl(240 5.9% 18%);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}
.btn-secondary:hover {
  background-color: hsl(240 4.8% 90%);
}

.btn-outline {
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  color: hsl(var(--foreground));
}
.btn-outline:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover {
  background-color: hsl(var(--accent));
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-destructive:hover {
  background-color: hsl(0 84.2% 52%);
}

.btn-link {
  color: hsl(var(--primary));
  padding: 0;
  height: auto;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm {
  height: 1.875rem;   /* 30px */
  padding: 0 0.625rem;
  font-size: 0.75rem;
  border-radius: calc(var(--radius) - 1px);
}

.btn-lg {
  height: 2.5rem;
  padding: 0 1.5rem;
  font-size: 0.9375rem;
}

.btn-icon {
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
}
.btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; }

/* ─── Badge system ───────────────────────────────────────────────────────── */
/* Reason: pill badge only for status. Semantic color only. No glow.
   WCAG AA guaranteed by color pairs in DESIGN.md (tested ratios). */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.badge-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}
.badge-outline {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
  background-color: transparent;
}
.badge-muted {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* Semantic status badges */
.badge-destructive {
  background-color: hsl(0 84.2% 96%);
  color: hsl(0 84.2% 36%);
  border-color: hsl(0 84.2% 88%);
}
.badge-success {
  background-color: hsl(142 76% 95%);
  color: hsl(142 76% 24%);
  border-color: hsl(142 76% 85%);
}
.badge-warning {
  background-color: hsl(38 92% 95%);
  color: hsl(38 92% 28%);
  border-color: hsl(38 92% 82%);
}
.badge-info {
  background-color: hsl(217 91% 96%);
  color: hsl(217 91% 32%);
  border-color: hsl(217 91% 85%);
}
.badge-purple {
  background-color: hsl(262 83% 96%);
  color: hsl(262 83% 36%);
  border-color: hsl(262 83% 85%);
}

/* ─── Form controls ──────────────────────────────────────────────────────── */
.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.3125rem;
}

.input, .select, .textarea {
  display: flex;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  line-height: 1.25;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  font-family: inherit;
}
.input { height: 2.125rem; }
.select {
  height: 2.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.125em 1.125em;
  padding-right: 1.75rem;
  appearance: none;
  -webkit-appearance: none;
}
.textarea {
  min-height: 5rem;
  resize: vertical;
  height: auto;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring) / 0.3);
}
.input::placeholder, .textarea::placeholder {
  color: hsl(var(--muted-foreground));
}
.input:disabled, .select:disabled, .textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: hsl(var(--muted));
}
.input-error, .select-error, .textarea-error {
  border-color: hsl(var(--destructive)) !important;
}
.input-error:focus, .select-error:focus, .textarea-error:focus {
  box-shadow: 0 0 0 1px hsl(var(--destructive) / 0.3) !important;
}
.field-error {
  color: hsl(var(--destructive));
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Backward-compat aliases from old views */
.input-text  { display: flex; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)); padding: 0.4375rem 0.75rem; font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.25; font-family: inherit; }
.input-select { display: flex; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)); padding: 0.4375rem 0.75rem; font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.25; font-family: inherit; }
.input-textarea { display: flex; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)); padding: 0.4375rem 0.75rem; font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.25; font-family: inherit; min-height: 5rem; resize: vertical; }
.input-text:focus, .input-select:focus, .input-textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring) / 0.3); }
.btn-danger { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }

/* Compact inline controls (status selectors, weekly-target input). The
   small size lives here rather than in a style="" attribute so the phone
   block below can raise it to 16px and keep iOS from zooming on focus. */
.select-compact { font-size: 0.75rem; }
.input-compact  { font-size: 0.8125rem; }

/* ─── Table ──────────────────────────────────────────────────────────────── */
.table-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  background-color: hsl(var(--card));
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.table thead {
  background-color: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}

.table th {
  height: 2.375rem;
  padding: 0 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.table tbody tr {
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 0.1s ease;
}
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background-color: hsl(240 4.8% 97%); }

.table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  color: hsl(var(--foreground));
}

/* Pin the trailing action column to the right edge of the scroll container so
   its buttons stay reachable on narrow screens instead of scrolling out of
   view. The opaque background is required: without it the pinned cell would
   show the columns scrolling underneath it. */
.table-wrapper--actions .table th:last-child,
.table-wrapper--actions .table td:last-child {
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: hsl(var(--card));
  box-shadow: -8px 0 8px -8px hsl(var(--border));
}
.table-wrapper--actions .table thead th:last-child {
  background-color: hsl(var(--muted));
  z-index: 20;
}
.table-wrapper--actions .table tbody tr:hover td:last-child {
  background-color: hsl(240 4.8% 97%);
}

/* ─── Alert ──────────────────────────────────────────────────────────────── */
.alert {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  background-color: hsl(var(--background));
}
.alert-success { border-color: hsl(142 76% 80%); background-color: hsl(142 76% 97%); color: hsl(142 76% 20%); }
.alert-error, .alert-destructive { border-color: hsl(0 84.2% 80%); background-color: hsl(0 84.2% 97%); color: hsl(0 84.2% 35%); }
.alert-warning { border-color: hsl(38 92% 80%); background-color: hsl(38 92% 97%); color: hsl(38 92% 25%); }
.alert-info { border-color: hsl(217 91% 80%); background-color: hsl(217 91% 97%); color: hsl(217 91% 30%); }

/* ─── Dialog / Modal ─────────────────────────────────────────────────────── */
/* z-index 200; only modal breaks out of flat plane */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}
.dialog-backdrop.active, .dialog-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.dialog-content {
  position: relative;
  width: 100%;
  max-width: 31rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: 1.5rem;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
  transform: translateY(6px) scale(0.98);
  transition: transform 0.15s ease-out;
}
.dialog-backdrop.active .dialog-content,
.dialog-backdrop.open .dialog-content {
  transform: translateY(0) scale(1);
}
.dialog-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.25rem; }
.dialog-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: hsl(var(--foreground)); }
.dialog-description { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.dialog-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0.1875rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-close:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted)); }

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.progress {
  position: relative;
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: hsl(var(--secondary));
}
.progress-indicator {
  height: 100%;
  width: 0%;
  background-color: hsl(var(--primary));
  transition: width 0.4s ease;
  border-radius: 9999px;
}

/* ─── Separator ──────────────────────────────────────────────────────────── */
.separator { height: 1px; width: 100%; background-color: hsl(var(--border)); }

/* ─── Timeline ───────────────────────────────────────────────────────────── */
.timeline-item {
  position: relative;
  padding-left: 1.75rem;
  padding-bottom: 1.25rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 0.75rem;
  bottom: 0;
  width: 1px;
  background-color: hsl(var(--border));
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  border: 2px solid hsl(var(--background));
  background-color: hsl(var(--muted-foreground));
  outline: 1px solid hsl(var(--border));
}
.timeline-dot.completed { background-color: hsl(142 76% 36%); outline-color: hsl(142 76% 80%); }
.timeline-dot.active    { background-color: hsl(var(--primary)); outline-color: hsl(var(--ring)); }

/* ─── Kbd ────────────────────────────────────────────────────────────────── */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: inherit;
  padding: 0.0625rem 0.3125rem;
  line-height: 1.4;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid hsl(var(--border));
  gap: 1rem;
  flex-wrap: wrap;
}
.pagination-info { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.pagination-links { display: flex; align-items: center; gap: 0.25rem; }
.pagination-links a,
.pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 0.375rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.1s ease;
}
.pagination-links a:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }
.pagination-links span[aria-current="page"],
.pagination-links .active { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.pagination-links span.disabled { opacity: 0.35; pointer-events: none; }

/* ─── Kanban ─────────────────────────────────────────────────────────────── */
.kanban-board-container {
  /* Reason: this is a horizontal scroll container. Cards contain
     position:absolute descendants (the .sr-only labels for the status
     selects). Without a positioned ancestor here their containing block is
     the viewport, so they escape this overflow-x clip and their static
     position — deep in the last column — stretches the document, making the
     whole page scroll sideways on phones. position:relative makes the board
     their containing block so they stay inside the clipped scroll area.
     (.table-wrapper already does this for the same reason.) */
  position: relative;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}
.kanban-column {
  flex: 0 0 17rem;
  min-width: 17rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 11rem);
}
.kanban-column-header {
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.kanban-column-content {
  padding: 0.625rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kanban-card {
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  padding: 0.75rem;
  transition: border-color 0.12s ease;
  cursor: default;
}
.kanban-card:hover {
  border-color: hsl(240 5.9% 70%);
}

/* ─── Page header ────────────────────────────────────────────────────────── */
/* Reason: page header is not a card — it floats above the page content.
   2px top accent on the first section-card below creates the "ground" */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.page-header-meta { min-width: 0; }
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
  line-height: 1.2;
}
.page-subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.1875rem;
}
.page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ─── Metric strip ───────────────────────────────────────────────────────── */
/*
  Identity motif: metric cards share identical structure with the nav
  active indicator — they use 2px top border in zinc-900 (primary color)
  to mark "key value". This is the one place the accent appears.
  Reason: top accent on metric cards signals "this is a KPI cell" without
  needing color or icon. Consistent with nav active 2px bottom border.
*/
.metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .metric-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.metric-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.875rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 2px solid hsl(var(--border));  /* subtly raised — accent applied below per variant */
  transition: border-color 0.12s ease;
}
.metric-card:hover { border-color: hsl(240 5.9% 75%); border-top-color: hsl(var(--foreground)); }

.metric-card.accent-primary { border-top-color: hsl(var(--foreground)); }
.metric-card.accent-blue    { border-top-color: hsl(217 91% 50%); }
.metric-card.accent-amber   { border-top-color: hsl(38 92% 50%); }
.metric-card.accent-green   { border-top-color: hsl(142 76% 36%); }
.metric-card.accent-purple  { border-top-color: hsl(262 83% 55%); }

.metric-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}
.metric-value.small { font-size: 1.25rem; }
.metric-footer {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

/* Narrow screens: metric captions are nowrap on desktop to keep cards
   uniform, but on phones that forces the card (and page) wider than the
   viewport, so let them wrap. */
@media (max-width: 767px) {
  .metric-footer { white-space: normal; }
}

/* ─── Split workspace grid ───────────────────────────────────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .split-grid { grid-template-columns: 8fr 4fr; }
}
@media (min-width: 1024px) {
  .split-grid-even { grid-template-columns: 1fr 1fr; }
}

/* ─── List rows ──────────────────────────────────────────────────────────── */
/*
  Identity motif: list rows use border-bottom + background hover (not card).
  The first column of each row visually "anchors" with company-badge.
  No nested boxes — flat rows on white card surface.
*/
.list-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  gap: 1rem;
  transition: background-color 0.1s ease;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background-color: hsl(240 4.8% 98%); }

/* Company/position initial badge */
.co-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 1px);
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  flex-shrink: 0;
  font-variant-numeric: normal;
}

.co-logo {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid hsl(var(--border));
  object-fit: contain;
  background-color: hsl(var(--background));
  flex-shrink: 0;
  padding: 0.2rem;
}

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted) / 0.4);
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
/* Reason: empty state names cause and gives next action. Not "No data". */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  gap: 0.75rem;
}
.empty-state-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
}
.empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.empty-state-desc {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  max-width: 28rem;
  line-height: 1.5;
}

/* ─── Status dot (functional only, no pulse) ─────────────────────────────── */
/* Reason: dot carries real state (active pipeline). No animation loop. */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.status-dot.blue   { background-color: hsl(217 91% 50%); }
.status-dot.amber  { background-color: hsl(38 92% 48%); }
.status-dot.green  { background-color: hsl(142 76% 36%); }
.status-dot.purple { background-color: hsl(262 83% 55%); }
.status-dot.gray   { background-color: hsl(var(--muted-foreground)); }
.status-dot.red    { background-color: hsl(0 84.2% 50%); }

/* ─── Nav quick-link (right panel) ──────────────────────────────────────── */
.nav-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4375rem 0.75rem;
  border-radius: calc(var(--radius) - 1px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color 0.1s ease;
}
.nav-quick-link:hover { background-color: hsl(var(--muted)); }
.nav-quick-link .chevron { color: hsl(var(--muted-foreground)); font-size: 0.75rem; }

/* ─── Funnel / analytics ─────────────────────────────────────────────────── */
.funnel-step {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  transition: border-color 0.12s ease;
}
.funnel-step:hover { border-color: hsl(240 5.9% 75%); }

.funnel-bar-track {
  height: 6px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.funnel-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  padding: 1rem 0;
}

/* ── Offer deadline alert ── */
.offer-alert { display:flex; align-items:flex-start; gap:0.75rem; padding:0.875rem 1rem; background:hsl(38 92% 96%); border:1px solid hsl(38 85% 80%); border-radius:calc(var(--radius)); margin-bottom:1rem; }
.offer-alert-content { flex:1; min-width:0; }
.offer-alert-title { font-size:0.875rem; font-weight:600; color:hsl(38 80% 30%); margin-bottom:0.375rem; }
.offer-alert-row { font-size:0.8125rem; color:hsl(38 60% 35%); display:flex; align-items:center; flex-wrap:wrap; gap:0.25rem; margin-top:0.2rem; }
.offer-alert-deadline { margin-left:auto; font-weight:600; color:hsl(0 72% 45%); white-space:nowrap; }

/* ── Heatmap ── */
.heatmap-grid { display:flex; gap:3px; overflow-x:auto; padding-bottom:0.5rem; }
.heatmap-week { display:flex; flex-direction:column; gap:3px; }
.heatmap-cell { width:13px; height:13px; border-radius:2px; flex-shrink:0; }
.heatmap-cell.level-0 { background-color:hsl(var(--muted)); }
.heatmap-cell.level-1 { background-color:hsl(142 60% 75%); }
.heatmap-cell.level-2 { background-color:hsl(142 65% 55%); }
.heatmap-cell.level-3 { background-color:hsl(142 70% 40%); }
.heatmap-cell.level-4 { background-color:hsl(142 76% 28%); }
.heatmap-cell.is-future { opacity:0.3; }
.heatmap-labels-month { display:flex; gap:3px; margin-bottom:4px; }
.heatmap-month-label { font-size:0.65rem; color:hsl(var(--muted-foreground)); width:13px; overflow:visible; white-space:nowrap; }
.heatmap-day-labels { display:flex; flex-direction:column; gap:3px; margin-right:4px; padding-top:0; }
.heatmap-day-label { height:13px; font-size:0.65rem; color:hsl(var(--muted-foreground)); line-height:13px; }

/* ─── Phone readability pass ─────────────────────────────────────────────
   Phones used to get the desktop type scale verbatim, so captions, table
   headers and badges rendered at 11px while every glyph was monospace —
   tiring to read and easy to misread. This block only applies at ≤767px:
   - iOS Safari zooms the whole page when a focused field is under 16px,
     so form fields step up to 16px with slightly taller targets.
   - Prose, labels and controls use the proportional face that is already
     self-hosted; numbers, keyboard hints and code stay monospace.
   - The smallest type moves up one notch and muted text is darkened past
     the 4.5:1 contrast threshold.
   Desktop is untouched. */
@media (max-width: 767px) {
  :root {
    --muted-foreground: 240 4% 40%;   /* zinc-600 — ≥5.5:1 on muted surfaces */
    --destructive:      0 72% 45%;    /* white on red — ≥5.8:1 */
  }

  /* Proportional face for reading; keep the mono grid for data */
  body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .metric-value, .metric-value.small, .kbd, code, pre {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* Form fields: 16px stops iOS auto-zoom on focus */
  .input, .select, .textarea,
  .input-text, .input-select, .input-textarea { font-size: 1rem; }
  .input, .select, .input-text, .input-select { height: 2.375rem; }

  /* Step the smallest type up one notch */
  .text-xs { font-size: 0.8125rem; line-height: 1.15rem; }
  .badge { font-size: 0.75rem; }
  .table th { font-size: 0.75rem; }
  .metric-label, .metric-footer { font-size: 0.75rem; }
  .metric-label {
    letter-spacing: 0.02em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .btn-sm { font-size: 0.8125rem; }
  .kbd { font-size: 0.75rem; }
  .field-error { font-size: 0.8125rem; }
  .pagination-info { font-size: 0.8125rem; }
  .pagination-links a, .pagination-links span { font-size: 0.8125rem; }
  .select-compact, .input-compact { font-size: 1rem; }
  .heatmap-month-label, .heatmap-day-label { font-size: 0.75rem; }
}

/* ─── Public informational pages (about / privacy / terms) ────────────────
   These pages render without a session, so they use the public layout
   instead of the app shell. The document column stays narrow for readable
   prose and reuses the same card surface as the rest of the app. */
.public-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.public-doc {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

.public-title {
  font-size: 1.75rem;
  line-height: 1.25;
}

.public-prose {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: hsl(var(--foreground));
}

.public-prose > :first-child {
  margin-top: 0;
}

.public-prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  color: hsl(var(--foreground));
}

.public-prose p {
  margin-bottom: 1rem;
}

.public-prose ul {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.public-prose li {
  margin-bottom: 0.5rem;
}

.public-prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.public-prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

@media (max-width: 767px) {
  .public-title {
    font-size: 1.375rem;
  }
  .public-prose {
    font-size: 1rem;
  }
}