/* ---------- FF Meta Pro ---------- */
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProLight.TTF") format("truetype");
             font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProLightIt.TTF") format("truetype");
             font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProRegular.TTF") format("truetype");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProRegIt.TTF") format("truetype");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProMedium.TTF") format("truetype");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProBold.TTF") format("truetype");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "FF Meta Pro"; src: url("FFMetaProBlk.TTF") format("truetype");
             font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --meta: "FF Meta Pro", "Open Sans", "Segoe UI", Tahoma, sans-serif;
  --ink: #2b3136;
  --body: #626c73;
  --faint: #8d979e;
  --line: #d9dde0;
  --paper: #ffffff;
  --grey: #eef0f1;
  --grey-deep: #dfe3e5;
  --orange: #ef7d1a;
  --blue: #0f89c6;
}
*, *::before, *::after, input, button, select, textarea {
  font-family: var(--meta);
  box-sizing: border-box;
}
html { -webkit-font-smoothing: antialiased; height: 100%; }
[hidden] { display: none !important; }

/* sticky footer: content column grows, footer is pinned to the bottom */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--grey);
  color: var(--body);
  font-size: 17px;
  line-height: 1.65;
}
.content { flex: 1 0 auto; }

/* The home page centres its search box in whatever height is left over. */
.content.home { display: flex; }
.content.home .hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
h1, h2, h3 { color: var(--ink); margin: 0; }
a { color: var(--blue); }

/* ---------- drop-down tab header ---------- */
#dropnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
#dropnav .sheet-outer { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; padding: 0 24px; }
#dropnav .sheet {
  background-image: linear-gradient(#ffffff 0px, #e7eaec 300px);
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.22, 0.9, 0.28, 1), opacity 0.32s ease;
}
#dropnav.open .sheet { max-height: 260px; opacity: 1; }
.sheet-inner {
  /* Four links to a column now, which the old fixed height cut the last of. */
  height: 218px;
  padding: 32px 44px 30px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
/* Shared out across the full width rather than bunched against the left,
   which left the whole right half of the sheet empty. */
.sheet-col { flex: 1 1 0; min-width: 92px; }
.sheet-col h4 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
}
.sheet-inner a.nav-link {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 6px;
  padding: 0;
  border-bottom: 2px solid transparent;
  width: fit-content;
}
.sheet-inner a.nav-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

.tab-rail {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
  height: 0;
}
.tab {
  position: absolute; top: -1px; right: 58px;
  z-index: 0;
  height: 48px;
  display: flex; align-items: center;
  padding: 0 30px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
}
/* The cog hangs off the same bar as the tab, at the other end. */
.cog {
  position: absolute;
  top: -1px;
  left: 58px;
  z-index: 0;
  height: 48px;
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body);
}
.cog:hover { color: var(--orange); }
.cog svg { position: relative; z-index: 1; }
.cog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff 0px, #fbfcfc 48px);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.07);
  transform: perspective(24px) rotateX(-3deg);
  transform-origin: top center;
}
#dropnav.open .cog::before {
  background-image: linear-gradient(#f0f2f3 0px, #eceff0 48px);
}

/* upside-down trapezoid: rounded rect tilted in 3D so the bottom edge
   is narrower than the top, keeping the corner rounding intact */
.tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff 0px, #fbfcfc 48px);
  border: 1px solid var(--line);
  /* no top edge: the tab's fill runs straight into the sheet above it,
     so the two read as one piece */
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.07);
  transform: perspective(24px) rotateX(-3deg);
  transform-origin: top center;
  transition: background 0.18s ease;
}
/* Once open the tab picks the ramp up where the sheet above it left off. */
#dropnav.open .tab::before {
  background-image: linear-gradient(#f0f2f3 0px, #eceff0 48px);
}
#dropnav:not(.open) .tab:hover::before { box-shadow: inset 0 0 0 99px rgba(255,255,255,0.55), 0 6px 12px rgba(0,0,0,0.07); }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 24px; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(#f4f6f7 0%, #ffffff 42%, var(--grey) 100%);
  border-bottom: 1px solid var(--line);
  padding: 138px 24px 78px;
  text-align: center;
}
h1 {
  font-size: 62px; font-weight: 300; line-height: 1.08;
  letter-spacing: -0.02em; margin-bottom: 30px;
}
h1 strong { font-weight: 700; }
.lede {
  font-size: 21px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 40px;
}
/* The row of outside links that sits under the search box. */
.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 38px;
  font-size: 15px;
}
/* Used inside ordinary left-aligned body copy, rather than a centred hero. */
.links.links-left { justify-content: flex-start; margin-top: 4px; }
.links a {
  color: var(--faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.links a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.linklike {
  font-size: 15px;
  color: var(--faint);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  cursor: pointer;
}
.linklike:hover { color: var(--orange); border-bottom-color: var(--orange); }
.linklike.done { color: var(--orange); }

/* ---------- feature cards ---------- */
.cards { display: flex; flex-wrap: wrap; gap: 22px; padding: 60px 0 96px; }
.card {
  flex: 1 1 250px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 26px 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-2px); }
.card h3 { font-size: 21px; font-weight: 500; margin-bottom: 8px; }
.card p { margin: 0; font-size: 16px; }

/* ---------- interior page ---------- */
.page-head { padding: 132px 24px 8px; }
.page-head h1 { font-size: 46px; margin-bottom: 6px; }
.page-body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px 36px;
  margin: 26px 0 90px;
  min-height: 260px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.page-body h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 26px 0 8px;
}
.page-body h2:first-child { margin-top: 0; }
.page-body p { margin: 0 0 14px; font-size: 17px; }
.page-body p:last-child { margin-bottom: 0; }
.page-body .quiet { color: var(--faint); }
.page-body a { text-decoration: none; }
.page-body a:hover { text-decoration: underline; }
.page-body address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
}
.page-body .tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #b45c0c;
  background: rgba(239, 125, 26, 0.12);
  border-radius: 5px;
  vertical-align: 3px;
}
.page-body .role { padding: 22px 0 4px; border-top: 1px solid var(--line); }
.page-body .role h2 { margin-top: 0; }
.page-body .big {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

.back-link { display: inline-block; margin-top: 6px; font-size: 16px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ---------- footer, fox breaking out of it ---------- */
footer {
  position: relative;
  flex-shrink: 0;
  background: var(--grey-deep);
  border-top: 1px solid var(--line);
  min-height: 150px;
}
.fox-link {
  position: absolute;
  left: 26px;
  bottom: 0;
  display: block;
  line-height: 0;
}
.fox {
  width: 300px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.fox-link:hover .fox {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22));
}
.foot-inner {
  max-width: 940px; margin: 0 auto;
  padding: 0 24px 0 340px;
  min-height: 150px;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  text-align: right; gap: 2px;
}
.foot-name { font-size: 19px; font-weight: 700; color: var(--ink); }
.foot-note { font-size: 15px; color: var(--faint); }
.foot-links { display: flex; gap: 18px; margin-top: 8px; }
.foot-links a { font-size: 14px; color: var(--body); text-decoration: none; }
.foot-links a:hover { color: var(--orange); }
.foot-legal { font-size: 13px; color: var(--faint); margin-top: 8px; }

@media (max-width: 700px) {
  .hero { padding: 120px 20px 58px; }
  h1 { font-size: 40px; }
  .page-head { padding-top: 112px; }
  .page-head h1 { font-size: 34px; }
  .lede { font-size: 18px; }
  .tab { right: 24px; font-size: 16px; padding: 0 20px; }
  .cog { left: 34px; width: 54px; }
  .tab-rail { padding: 0 12px; }
  .fox-link { left: 8px; }
  .fox { width: 175px; }
  .foot-legal { font-size: 12px; }
  .foot-inner { padding-left: 195px; }
  .page-body { padding: 24px 20px; }
}

/* The search box on the home page and above the results. */
.searchform {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.searchform input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 15px 22px;
  font-size: 18px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.searchform input::placeholder { color: var(--faint); }
.searchform input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 26, 0.18);
}
.searchform button {
  flex: 0 0 auto;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.searchform button:hover { background: #f8892a; }
.searchform button:disabled { opacity: 0.55; cursor: default; }

/* The compact search bar that sits at the top of a results page. */
.results-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 30px 24px 18px;
}
.results-head .row {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  /* Space kept clear on the right so the tab never lands on the search box. */
  padding-right: 150px;
}
.wordmark {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.results-head .searchform { margin: 0; max-width: 640px; flex: 1 1 auto; }
.results-head .searchform input { padding: 12px 20px; font-size: 16px; }
.results-head .searchform button { padding: 12px 24px; font-size: 16px; }

/* The answer card and its live status line. */
.answer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px 34px 32px;
  margin: 30px 0 26px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.answer-head h2 { margin-bottom: 0; }

/* Copies the address of this search so it can be handed to anyone. */
.share {
  flex: 0 0 auto;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.share:hover { background: #fff; border-color: #c9ced2; }
.share.done {
  color: #b45c0c;
  background: rgba(239, 125, 26, 0.12);
  border-color: rgba(239, 125, 26, 0.35);
}

.answer h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.answer p { margin: 0 0 14px; font-size: 18px; line-height: 1.7; color: var(--ink); }
.answer p:last-child { margin-bottom: 0; }
.answer ul { margin: 0 0 14px; padding-left: 22px; }
.answer li { font-size: 18px; line-height: 1.7; color: var(--ink); margin-bottom: 6px; }
.answer .cursor {
  display: inline-block;
  width: 8px;
  height: 20px;
  vertical-align: -3px;
  background: var(--orange);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* A citation marker that jumps down to the source it came from. */
a.cite {
  display: inline-block;
  min-width: 17px;
  margin: 0 0 0 2px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: #b45c0c;
  background: rgba(239, 125, 26, 0.12);
  border-radius: 5px;
  text-decoration: none;
  vertical-align: 2px;
}
a.cite:hover { background: rgba(239, 125, 26, 0.26); }

.unverified {
  display: inline-block;
  margin: 0 0 0 3px;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  color: #8a3a12;
  background: #fbe3cf;
  border-radius: 4px;
  cursor: help;
  vertical-align: 2px;
}

/* Marks a claim the verifier could not find support for in its own source. */
.unverified {
  position: relative;
  display: inline-block;
  margin-left: 3px;
  font-size: 13px;
  line-height: 1;
  color: #b4400c;
  cursor: help;
  vertical-align: 1px;
}
.unverified .reason {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 10px 13px;
  font-family: var(--meta);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  color: #fff;
  background: #2b3136;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
  z-index: 20;
  pointer-events: none;
}
.unverified .reason::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #2b3136;
}
.unverified:hover .reason,
.unverified:focus .reason,
.unverified:focus-within .reason {
  opacity: 1;
  visibility: visible;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--faint);
}
.status-line .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(239, 125, 26, 0.25);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Grey bars stand in for the answer while the model is still thinking. */
.skeleton span {
  display: block;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e9ecee 25%, #f3f5f6 50%, #e9ecee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.skeleton span:nth-child(2) { width: 92%; }
.skeleton span:nth-child(3) { width: 78%; }
@keyframes shimmer { to { background-position: -400% 0; } }

/* Asking a follow up, and the earlier turns it builds on. */
.followup { display: flex; gap: 10px; margin: 0 0 30px; }
.followup input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 20px;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
}
.followup input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 26, 0.18);
}
.followup button {
  flex: 0 0 auto;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 999px;
  cursor: pointer;
}
.turn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 22px 0 0;
  opacity: 0.85;
}
.turn .turn-q {
  font-size: 15px;
  font-weight: 500;
  color: var(--faint);
  margin: 0 0 8px;
}
.turn p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }

/* Offering to use the phone or browser location, only when it would help. */
.locate {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--faint);
  margin: 0 0 18px;
}
.locate button {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.locate button:hover { background: #fff; }
.locate.on { color: var(--citeText); }

/* The row of pictures that goes with the answer. */
.images h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.images .strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}
.images a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}
.images a:hover img { transform: scale(1.04); }

/* Inline bits the model sometimes reaches for inside an answer. */
.answer code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  background: #eef0f1;
  border-radius: 4px;
}
.answer sup { font-size: 0.72em; vertical-align: super; line-height: 0; }
.answer strong { font-weight: 700; color: var(--ink); }
.answer ol { margin: 0 0 14px; padding-left: 24px; }
.answer ol li { font-size: 18px; line-height: 1.7; color: var(--ink); margin-bottom: 6px; }

/* The email form on the sign in page. */
.mailform { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.mailform input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 20px;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
}
.mailform input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 26, 0.18);
}
.mailform button {
  flex: 0 0 auto;
  padding: 13px 28px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 999px;
  cursor: pointer;
}
.mailform button:disabled { opacity: 0.6; cursor: default; }
.formnote { font-size: 16px; margin: 14px 0 0; }
.formnote.good { color: #2f7a3e; }
.formnote.bad { color: #b4400c; }

/* The blog index and post pages on blog.foxholeweb.com. */
.post-list { padding-bottom: 80px; }
.post-item { padding: 24px 0; border-top: 1px solid var(--line); }
.post-item:first-child { border-top: 0; padding-top: 8px; }
.post-link {
  display: block;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.post-link:hover { color: var(--orange); }
.post-date {
  font-size: 14px;
  color: var(--faint);
  margin: 6px 0 8px;
  letter-spacing: 0.02em;
}
.post-summary { margin: 0; font-size: 17px; }
.page-body.post { padding: 34px 40px 40px; margin-bottom: 90px; }
.page-body.post h2 { font-size: 22px; margin: 30px 0 10px; }
.page-body.post h3 { font-size: 19px; font-weight: 500; margin: 24px 0 8px; color: var(--ink); }
.page-body.post p { font-size: 18px; line-height: 1.7; margin: 0 0 16px; }
.page-body.post ul { margin: 0 0 16px; padding-left: 22px; }
.page-body.post li { font-size: 18px; line-height: 1.7; margin-bottom: 6px; }
.page-body.post blockquote {
  margin: 0 0 16px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 18px;
}
.page-body.post code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--grey);
  border-radius: 4px;
}

/* The name and picture at the top of the account page. */
.account-head { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.account-head p { margin: 0; }
.account-face {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Picking, framing, and compressing a profile picture. */
.avatar-row { display: flex; align-items: center; gap: 22px; margin: 4px 0 10px; }
.avatar-now {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-now img { width: 100%; height: 100%; object-fit: cover; }
.avatar-empty { font-size: 13px; color: var(--faint); }
.avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.filepick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filepick span {
  display: inline-block;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.filepick span:hover { background: #fff; border-color: #c9ced2; }
.cropper { margin: 18px 0 6px; }
.cropper canvas {
  width: 280px;
  height: 280px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  display: block;
}
.cropper canvas:active { cursor: grabbing; }
.crop-controls { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; max-width: 280px; }
.crop-controls label { font-size: 14px; color: var(--faint); }
.crop-controls input { flex: 1 1 auto; accent-color: var(--orange); }
.crop-buttons { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

/* Saved answers and history on the account page. */
.row-item { padding: 18px 0; border-top: 1px solid var(--line); }
.row-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.row-title:hover { color: var(--orange); }
.row-meta { font-size: 14px; color: var(--faint); margin-bottom: 8px; }
.row-body {
  font-size: 15px;
  color: var(--body);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-drop {
  padding: 5px 14px;
  font-size: 13px;
  color: var(--body);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.row-drop:hover { color: #b4400c; border-color: #e6b79a; }
.row-controls { display: flex; align-items: center; gap: 10px; }
.row-move {
  padding: 5px 10px;
  font-size: 13px;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/* Notebooks group saved answers the way folders would. */
.notebook-form { max-width: 480px; margin: 14px 0 22px; }
.notebook-form input { font-size: 15px; padding: 10px 16px; }
.notebook-form button { font-size: 14px; padding: 10px 20px; }
.notebook-group { border-top: 1px solid var(--line); padding: 14px 0; }
.notebook-group + .notebook-group { border-top: 1px solid var(--line); }
.notebook-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.notebook-group summary::-webkit-details-marker { display: none; }
.notebook-group summary::before {
  content: "\25B8";
  color: var(--faint);
  font-size: 12px;
  transition: transform 0.14s ease;
}
.notebook-group[open] summary::before { transform: rotate(90deg); }
.notebook-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.notebook-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  background: var(--grey);
  border-radius: 999px;
  padding: 1px 9px;
}
.notebook-actions { margin-left: auto; display: flex; gap: 8px; }
.notebook-action {
  padding: 3px 12px;
  font-size: 12.5px;
  color: var(--faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.notebook-action:hover { color: var(--ink); border-color: #c9ced2; }
.notebook-group .row-item:last-child { padding-bottom: 4px; }
.history { list-style: none; margin: 0; padding: 0; }
.history li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.history a { color: var(--ink); text-decoration: none; }
.history a:hover { color: var(--orange); }
.history span { color: var(--faint); font-size: 14px; flex: 0 0 auto; }

/* The list of pages the answer was built from. */
.sources h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sources ol { list-style: none; margin: 0; padding: 0 0 90px; }
.sources li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.sources li:first-child { border-top: 0; }
.sources .rank {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--faint);
  padding-top: 2px;
}
.sources a { font-size: 17px; font-weight: 500; color: var(--blue); text-decoration: none; }
.sources a:hover { text-decoration: underline; }
.sources .host { font-size: 14px; color: var(--faint); }
.sources .snippet { font-size: 15px; margin: 2px 0 0; }

/* The error panel shown when the search or the model gives up. */
.notice {
  background: #fff6f0;
  border: 1px solid #f0d3bb;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 30px 0;
  color: #8a4a12;
  font-size: 17px;
}

/* Where to actually buy, kept apart from the answer and its sources. */
.shopping { margin: 26px 0 0; }
.shopping h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.offer:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09); transform: translateY(-1px); }
.offer .offer-label { font-size: 17px; font-weight: 500; color: var(--ink); }
.offer .offer-go {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 8px 18px;
}
.shopping .disclosure { padding-bottom: 0; margin-top: 10px; }

/* Said plainly, and only on pages where a link actually earns something. */
.disclosure {
  font-size: 14px;
  color: var(--faint);
  margin: 4px 0 0;
  padding-bottom: 40px;
}


@media (max-width: 700px) {
  .results-head { padding: 68px 20px 16px; }
  .sheet-inner { height: auto; gap: 30px 40px; flex-wrap: wrap; padding: 26px 24px 30px; }
  /* Columns wrap here rather than sharing one row, so they size to their
     own content instead of splitting a narrow screen four ways. */
  .sheet-col { flex: 0 0 auto; }
  #dropnav.open .sheet { max-height: 420px; }
  .foot-links { justify-content: flex-end; }
  .results-head .row { padding-right: 0; }
  .answer { padding: 22px 20px 24px; }
  .answer p, .answer li { font-size: 17px; }
  .images .strip { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* Between phone and full width the row goes under the tab, so it starts lower. */
@media (max-width: 900px) and (min-width: 701px) {
  .results-head { padding-top: 66px; }
  .results-head .row { padding-right: 0; }
}

/* On a narrow phone the button drops below the field instead of squeezing it.
   The results page overrides this: there the two share one row, since a
   stacked field and a full width button were costing most of a phone screen
   before a single result. */
@media (max-width: 480px) {
  .searchform { flex-wrap: wrap; }
  .searchform button { width: 100%; }
}

/* ---------- widgets ---------- */
/* A direct answer sits above the written one, in its own card. */
.widget { margin: 0 0 22px; }
.w-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.w-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.w-head h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.w-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.w-tag.is-live { color: #c0392b; }
.w-tag.is-open { color: #1f8a4c; }
.w-tag.is-shut { color: #b04a3a; }

.w-detail { font-size: 14px; color: var(--faint); }
.w-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.w-credit { font-size: 12px; color: var(--faint); margin-top: 14px; }
.w-credit a { color: var(--faint); }

.w-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.w-chip {
  font-size: 13px;
  color: var(--ink);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  text-decoration: none;
}
.w-chip-quiet { color: var(--body); background: transparent; }
.w-chip-go { cursor: pointer; color: var(--blue); }
.w-chip-go:hover { border-color: var(--orange); }

/* Weather. */
.w-now { display: flex; align-items: center; gap: 20px; }
.w-mark { flex: 0 0 auto; color: var(--orange); }
.sky { width: 58px; height: 58px; }
.w-temp { display: flex; align-items: flex-start; line-height: 1; }
.w-degrees { font-size: 52px; font-weight: 300; color: var(--ink); letter-spacing: -0.03em; }
.w-unit { font-size: 22px; font-weight: 300; color: var(--faint); padding-top: 6px; }
.w-condition { font-size: 17px; color: var(--ink); margin-top: 4px; }
.w-days {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.w-day { flex: 1 1 0; min-width: 62px; text-align: center; }
.w-day-name { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.w-day-icon { color: var(--body); margin: 6px 0 4px; }
.w-day-icon .sky { width: 26px; height: 26px; }
.w-day-high { font-size: 15px; font-weight: 500; color: var(--ink); }
.w-day-low { font-size: 13px; color: var(--faint); }

/* Time. */
.w-clock { font-size: 50px; font-weight: 300; color: var(--ink); line-height: 1.05; letter-spacing: -0.03em; }
.w-date { font-size: 16px; color: var(--body); margin-top: 4px; }
.w-time.is-night .w-clock { color: #3a4a63; }

/* Definition. */
.w-senses { margin: 0; padding-left: 20px; }
.w-senses li { margin-bottom: 10px; color: var(--ink); font-size: 16px; }
.w-part {
  font-style: italic;
  color: var(--faint);
  font-size: 14px;
  margin-right: 7px;
}
.w-example { font-size: 14px; color: var(--faint); margin-top: 3px; }

/* Translation. */
.w-pair { display: flex; flex-wrap: wrap; gap: 18px; }
.w-side { flex: 1 1 240px; min-width: 0; }
.w-side-out { border-left: 2px solid var(--orange); padding-left: 16px; }
.w-source-text { font-size: 17px; color: var(--body); margin-top: 5px; }
.w-target-text { font-size: 21px; color: var(--ink); margin-top: 5px; line-height: 1.4; }
.w-roman { font-size: 14px; color: var(--faint); margin-top: 4px; }
.w-note { font-size: 13px; color: var(--faint); margin-top: 12px; font-style: italic; }
.w-copy {
  margin-top: 14px;
  font-size: 13px;
  color: var(--body);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.w-copy:hover { border-color: var(--orange); }

/* Sports. */
.w-board { display: flex; flex-direction: column; gap: 2px; }
.w-side-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
}
.w-side-row.is-winner { background: var(--grey); }
.w-logo { width: 28px; height: 28px; object-fit: contain; }
.w-team { flex: 1 1 auto; font-size: 16px; color: var(--ink); }
.w-side-row.is-winner .w-team { font-weight: 700; }
.w-score { font-size: 21px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Business hours. */
.w-hours { margin-top: 12px; border-top: 1px solid var(--line); }
.w-hour-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--grey);
}
.w-hour-row.is-today { font-weight: 700; color: var(--ink); }
.w-hour-day { color: var(--body); }
.w-hour-row.is-today .w-hour-day { color: var(--ink); }
.w-hour-span { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .w-card { padding: 18px 16px; }
  .w-degrees { font-size: 44px; }
  .w-clock { font-size: 40px; }
  .w-side-out { border-left: 0; border-top: 2px solid var(--orange); padding-left: 0; padding-top: 14px; }
}

/* The line that answers the question the card was built for. */
.w-verdict {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: -4px 0 8px;
}
.w-known { font-size: 15px; color: var(--body); margin-top: 8px; }
.w-place .w-note {
  font-style: normal;
  background: var(--grey);
  border-radius: 9px;
  padding: 9px 13px;
  margin-top: 12px;
  color: var(--body);
}

/* ---------- result views ---------- */
/* Results, media and shopping, sitting under the search box like folder tabs. */
.tabs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tabs-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
}
.rtab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 13px 16px 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.rtab:hover { color: var(--body); }
.rtab.is-on { color: var(--ink); border-bottom-color: var(--orange); }
.rtab-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--faint);
  background: var(--grey);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.6;
}
.rtab.is-on .rtab-count { color: #fff; background: var(--orange); }

.view-head { margin-bottom: 18px; }
.view-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.view-note { font-size: 15px; color: var(--faint); margin: 4px 0 0; }
.empty {
  font-size: 15px;
  color: var(--faint);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  text-align: center;
}

/* The media wall. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.shot {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--paper);
  text-decoration: none;
  aspect-ratio: 4 / 3;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}
.shot:hover img { transform: scale(1.04); }
.shot-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 7px;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .tabs-inner { padding: 0 14px; overflow-x: auto; }
  .rtab { padding: 12px 12px 10px; font-size: 14px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
}

/* A short view would otherwise let the footer fox ride up over the content. */
.view { min-height: 52vh; }

/* ---------- citations ---------- */
.sources-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.sources-head h2 { margin-bottom: 0; }
.cite-toggle {
  flex: 0 0 auto;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.cite-toggle:hover { background: #fff; border-color: #c9ced2; }
.cite-toggle.is-on { color: var(--orange); border-color: rgba(239, 125, 26, 0.4); }

.cite-panel {
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.cite-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cite-tab {
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.cite-tab.is-on { color: #fff; background: var(--orange); border-color: #d86f11; }
.cite-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}
.cite-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cite-copy {
  flex: 0 0 auto;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.cite-copy:hover { border-color: var(--orange); }
.cite-note { flex: 1 1 220px; font-size: 12.5px; color: var(--faint); margin: 0; }

.cite-one {
  margin-top: 6px;
  padding: 3px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.cite-one:hover { color: var(--ink); border-color: #c9ced2; }
.cite-one-block {
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
  margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- academic mode ---------- */
.acad-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  cursor: pointer;
  user-select: none;
}
.acad-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.acad-slider {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 19px;
  background: var(--grey-deep);
  border-radius: 999px;
  transition: background 0.16s ease;
}
.acad-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s ease;
}
.acad-switch input:checked + .acad-slider { background: var(--orange); }
.acad-switch input:checked + .acad-slider::before { transform: translateX(15px); }
.acad-switch input:focus-visible + .acad-slider { outline: 2px solid var(--blue); outline-offset: 2px; }
.acad-label { font-size: 13.5px; font-weight: 500; color: var(--faint); }
.acad-switch input:checked ~ .acad-label { color: var(--ink); }

.acad-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 137, 198, 0.08);
  border: 1px solid rgba(15, 137, 198, 0.25);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 18px;
}
.acad-banner strong { font-weight: 700; }

.scholarly-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f89c6;
  background: rgba(15, 137, 198, 0.1);
  border-radius: 999px;
  vertical-align: middle;
}

@media (max-width: 620px) {
  .acad-label { display: none; }
  .acad-switch { padding-left: 6px; }
}

/* ---------- "set as default" panel ---------- */
.dm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 34, 37, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.dm-open { overflow: hidden; }
.dm-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  padding: 34px 32px 30px;
}
.dm-card h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  padding-right: 20px;
}
.dm-lede { font-size: 15px; color: var(--faint); margin: 0 0 22px; }
.dm-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dm-close:hover { color: var(--ink); border-color: #c9ced2; }

.dm-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.dm-tab {
  padding: 6px 15px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--body);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.dm-tab.is-on { color: #fff; background: var(--orange); border-color: #d86f11; }

.dm-steps { margin: 0 0 6px; padding-left: 22px; }
.dm-steps li { font-size: 15px; color: var(--ink); line-height: 1.55; margin-bottom: 10px; }
.dm-note { font-size: 13px; color: var(--faint); margin: 0 0 18px; }

.dm-field { margin: 4px 0 22px; }
.dm-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}
.dm-copyrow { display: flex; gap: 8px; }
.dm-copyrow input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 13px;
  font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dm-copyrow button {
  flex: 0 0 auto;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 8px;
  cursor: pointer;
}
.dm-copyrow button:hover { background: #f8892a; }

.dm-shortcut {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.55;
  background: var(--grey);
  border-radius: 10px;
  padding: 14px 16px;
}
.dm-shortcut code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
}

/* ---------- the quiet return-visit nudge ---------- */
.nudge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  padding: 16px 18px 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.nudge.is-in { opacity: 1; transform: translateY(0); }
.nudge-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.nudge-close:hover { color: var(--ink); }
.nudge-text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 12px;
  padding-right: 14px;
}
.nudge-action {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 999px;
  cursor: pointer;
}
.nudge-action:hover { background: #f8892a; }

@media (max-width: 520px) {
  .nudge { left: 14px; right: 14px; width: auto; bottom: 14px; }
  .dm-card { padding: 28px 22px 24px; }
}

/* ---------- changelog ---------- */
.changelog .cl-entry { margin-bottom: 8px; }
.changelog .cl-entry:last-child { margin-bottom: 0; }
.changelog .cl-entry h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin: 26px 0 14px;
}
.changelog .cl-entry:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 4px; }
.changelog ul { margin: 0; padding-left: 20px; }
.changelog li {
  font-size: 16px;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 12px;
}
.changelog li:last-child { margin-bottom: 0; }

/* Jobs widget: a short list of postings, since it is a list card rather
   than a single-answer one like weather or a place. */
.w-job-list { list-style: none; margin: 0; padding: 0; }
.w-job-list li { padding: 11px 0; border-top: 1px solid var(--line); }
.w-job-list li:first-child { border-top: 0; padding-top: 4px; }
.w-job-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.w-job-title:hover { color: var(--orange); }
.w-job-host { font-size: 13px; color: var(--faint); margin-top: 2px; }

/* ---------- resume match ---------- */
.drop {
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--grey);
  padding: 34px 24px 30px;
  text-align: center;
  margin: 22px 0 14px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.drop.is-over { border-color: var(--orange); background: rgba(239, 125, 26, 0.06); }
.drop-lead { font-size: 18px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.drop-sub { font-size: 14px; color: var(--faint); margin: 0 0 16px; }
.drop-pick {
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.drop-pick:hover { border-color: var(--orange); color: var(--orange); }
.drop-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
  margin: 14px 0 0;
  word-break: break-all;
}
.drop-or { font-size: 15px; color: var(--faint); text-align: center; margin: 0 0 14px; }
#paste-area textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
  outline: none;
}
#paste-area textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 26, 0.18);
}

.match-go { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; flex-wrap: wrap; }
.match-submit {
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 1px solid #d86f11;
  border-radius: 999px;
  cursor: pointer;
}
.match-submit:hover { background: #f8892a; }
.match-submit:disabled { opacity: 0.5; cursor: default; background: var(--orange); }
.match-status { font-size: 14.5px; color: var(--faint); }
.match-privacy {
  font-size: 13.5px;
  color: var(--faint);
  line-height: 1.6;
  background: var(--grey);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0 0;
}

/* What the resume was read as, shown so it can be checked. */
.read-headline { font-size: 17px; color: var(--ink); margin: 0 0 16px; }
.read-row { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; flex-wrap: wrap; }
.read-label {
  flex: 0 0 96px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.read-value { font-size: 15.5px; color: var(--ink); }
.read-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 300px; }
.read-chip {
  font-size: 13px;
  color: var(--body);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
}
.read-strengths { margin: 0; padding-left: 18px; flex: 1 1 300px; }
.read-strengths li { font-size: 15px; color: var(--body); margin-bottom: 5px; }

.match-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.match-results-head h2 { margin: 0; }
.match-count { font-size: 13px; color: var(--faint); }

.match-card {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.match-card:first-of-type { border-top: 0; }
.match-head { display: flex; align-items: flex-start; gap: 14px; }
.match-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
}
.match-letters {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--grey);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--faint);
}
.match-titles { flex: 1 1 auto; min-width: 0; }
.match-role {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.match-role:hover { color: var(--orange); }
.match-where { font-size: 13.5px; color: var(--faint); margin-top: 2px; }
.match-strength {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.match-strength.is-strong { color: #1f7a45; background: rgba(31, 138, 76, 0.12); }
.match-strength.is-decent { color: #b45c0c; background: rgba(239, 125, 26, 0.13); }
.match-strength.is-stretch { color: var(--body); background: var(--grey); }

.match-why, .match-lead { margin: 12px 0 0; padding-left: 56px; }
.match-why p, .match-lead p { font-size: 15px; color: var(--body); margin: 3px 0 0; line-height: 1.6; }
.match-why-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.match-pay { font-size: 13.5px; color: #1f7a45; font-weight: 500; margin-top: 3px; }

.match-gapblock { margin: 10px 0 0 56px; }
.match-gap {
  font-size: 13.5px;
  color: var(--body);
  background: var(--grey);
  border-radius: 8px;
  padding: 8px 12px;
}
.match-cover {
  margin: 6px 0 0;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}

/* The advice. This is the part somebody waited twenty seconds for, so it is
   set apart from the description of the job rather than continuing it. */
.match-plan {
  margin: 14px 0 0 56px;
  border-left: 2px solid var(--orange);
  padding: 2px 0 2px 16px;
}
.plan-head {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.plan-step { margin-top: 12px; }
.plan-step:first-of-type { margin-top: 8px; }
.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.plan-text {
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.plan-copy {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  cursor: pointer;
}
.plan-copy:hover { border-color: var(--orange); color: var(--orange); }

.match-read { font-size: 12.5px; color: var(--faint); }
.match-actions { display: flex; align-items: center; gap: 12px; margin: 14px 0 0 56px; flex-wrap: wrap; }
.match-apply {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  text-decoration: none;
}
.match-apply:hover { border-color: var(--orange); color: var(--orange); }
.match-host { font-size: 13px; color: var(--faint); }
.match-note {
  font-size: 13px;
  color: var(--faint);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 20px 0 0;
}

@media (max-width: 620px) {
  .match-why, .match-lead { padding-left: 0; }
  .match-gapblock, .match-plan, .match-actions { margin-left: 0; }
  .read-label { flex-basis: 100%; }
}

/* The one link under the search box that is meant to be noticed, since a
   new feature nobody finds may as well not have been built. */
/* Written as .links a so it outranks the plain link styling in this row,
   which otherwise greys the text, adds an underline border, and knocks a
   pixel off the bottom padding, leaving the badge sitting off centre. */
.links a.link-feature {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 18px 6px 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.links a.link-feature:hover {
  color: var(--ink);
  border-color: rgba(239, 125, 26, 0.5);
  box-shadow: 0 3px 10px rgba(239, 125, 26, 0.16);
  transform: translateY(-1px);
}
.link-new {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 3px 10px;
}

@media (max-width: 520px) {
  /* The tail wraps to a second line on a narrow screen, which turns a neat
     pill into a lumpy box, so it says the short version there. */
  .links a.link-feature { font-size: 14px; padding: 5px 15px 5px 5px; }
  .link-tail { display: none; }
}

/* Sources the answer did not use. Kept, because a reader checking our work
   deserves to see everything we looked at, but out of the way, because ten
   results about the wrong subject under a correct answer reads as a failure
   even when the answer is right. */
.source-divider {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
}
.source-divider::marker { content: ""; }
.source-more {
  font-size: 13px;
  color: var(--faint);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  text-align: left;
  padding: 12px 0 0;
  cursor: pointer;
}
.source-more:hover { color: var(--orange); }
.source-unused .snippet { color: var(--faint); }

/* The spelling correction notice, above the answer. Quiet by design: it is
   a note about what was searched, not part of the answer. */
.corrected {
  margin: 0 0 12px;
  font-size: 0.94rem;
  color: var(--muted, #5b6472);
}

.corrected strong { color: var(--ink, #1c2430); font-weight: 600; }

.corrected a { color: var(--link, #1a63d8); text-decoration: underline; }

/* ================================================================
   PHONE
   ================================================================
   Everything above this point is a desktop layout with a handful of
   narrow-screen patches bolted on, and on a phone it showed: the wordmark,
   a full width field and a full width button stacked to eat close to half
   the screen before a single result, and untrimmed snippets meant two
   results filled the rest. This block is the phone layout proper. It is
   last in the file so it wins, and it is scoped to one query so nothing
   above 700px is touched. */
@media (max-width: 700px) {

  /* ---- the bar at the top ---- */

  /* The floating tab already says Foxhole in the corner, so the wordmark
     was the same word twice, taking a row of a screen that has few. */
  .results-head .wordmark { display: none; }

  /* Not sticky, though it is the obvious thing to reach for. Body carries
     overflow-x: hidden, which makes it a scroll container and stops sticky
     resolving against the viewport in several browsers, and a bar that holds
     on to a strip of a phone screen is spending the thing this whole block
     exists to save. */
  .results-head { padding: 10px 12px; }

  /* One row, field and button, the way it is on a desktop. The button is
     sized to its text rather than to the screen. */
  .results-head .row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Room for the tab in the corner, which floats over this. The tab's left
       edge measures 257px on a 375px screen, so the row has to stop short of
       that: at 96px the button still ran under it and read "Sear". */
    padding-right: 118px;
  }
  /* min-width on a flex item defaults to auto, which is its content size, so
     without this the form refuses to shrink and pushes the button out past
     the padding meant to keep it clear of the tab. Measured: 283.7px wide in
     a 255px box. */
  .results-head .searchform {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1 1 0%;
  }
  .results-head .searchform input {
    padding: 10px 16px;
    font-size: 16px; /* Never below 16, or the browser zooms on focus. */
    min-width: 0;
  }
  .results-head .searchform button {
    width: auto;
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 15px;
  }

  /* ---- the drop-down ---- */

  /* The sheet was inset 24px each side and rounded 24px at the bottom, while
     the tab hangs at right: 24px - so the tab's top corner sat inside the
     corner curve and the two came apart, leaving a notch where they should
     have met. On a desktop the tab is at right: 58px and clears the curve,
     which is why this only showed on a phone.

     Rather than push the tabs inward, where they would collide with the
     search button, the sheet goes full width with a straight bottom edge.
     The tabs then hang off a flat line wherever they sit, and the nav gets
     the whole screen rather than 327px of it. */
  #dropnav .sheet-outer { padding: 0; }
  #dropnav .sheet { border-radius: 0; }

  /* ---- the tabs ---- */

  .tabs-inner { padding: 0 12px; }
  .rtab { padding: 11px 10px 9px; font-size: 15px; }

  /* ---- the answer ---- */

  .answer { padding: 18px 16px 20px; border-radius: 12px; }
  .answer p, .answer li { font-size: 16px; line-height: 1.6; }
  .corrected { font-size: 15px; margin-bottom: 10px; }

  /* ---- the results ---- */

  .sources li {
    gap: 10px;
    padding: 13px 0;
  }
  .sources .rank { font-size: 13px; }

  /* Two lines of title, three of snippet. A result is a thing you scan to
     decide whether to open it, and eight lines of somebody's marketing
     copy is not scannable: before this, two results filled a phone screen. */
  .sources a {
    font-size: 16px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sources .host { font-size: 13px; }
  .sources .snippet {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* One per result, and on a phone it was taking a whole row each time. */
  .sources .cite-one {
    padding: 4px 12px;
    font-size: 12px;
    margin-top: 8px;
  }

  /* ---- room at the bottom ---- */

  /* The browser's own toolbar floats over the last of the page, so the last
     result needs somewhere to sit that is not underneath it. */
  .sources ol { padding-bottom: 40px; }
  .view { min-height: 0; }
}

/* ---------- shared answers ----------
   A public, server rendered copy of one answer. No script runs on it: it has
   to be readable by a crawler, which is the reason it exists. */
.share-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.share-body p { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 16px; }
.share-body ul { margin: 0 0 16px; padding-left: 22px; }
.share-body li { font-size: 18px; line-height: 1.6; color: var(--ink); margin-bottom: 8px; }
.share-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 32px 0 12px;
}
.share-sources { margin: 0; padding-left: 22px; }
.share-sources li { margin-bottom: 10px; line-height: 1.4; }
.share-sources a { font-size: 16px; font-weight: 500; text-decoration: none; }
.share-sources a:hover { text-decoration: underline; }
.share-sources .host { display: block; font-size: 13px; color: var(--faint); }
.share-note {
  font-size: 14px !important;
  color: var(--faint) !important;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 28px !important;
}
.share-again { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.share-again input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 18px;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.share-again button {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.share-again button:hover { background: #f8892a; }

.share-index { list-style: none; margin: 0; padding: 0; }
.share-index li { border-top: 1px solid var(--line); padding: 13px 0; }
.share-index li:first-child { border-top: 0; }
.share-index a { font-size: 17px; font-weight: 500; text-decoration: none; }
.share-index a:hover { text-decoration: underline; }
.share-index .host { display: block; font-size: 13px; color: var(--faint); }

@media (max-width: 700px) {
  .share-body p, .share-body li { font-size: 16px; }
}

/* ---------- search history ----------
   Every search a signed-in person runs has been recorded since the first
   release. This is where it is handed back to them, and where it can be
   deleted, which is the difference between a convenience and a log. */
.history { list-style: none; margin: 0 0 8px; padding: 0; }
.history li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 11px 0;
}
.history li:first-child { border-top: 0; }
.history a {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  color: var(--blue);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history a:hover { text-decoration: underline; }
.history-when { flex: 0 0 auto; font-size: 13px; color: var(--faint); }
.history-drop {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--faint);
  background: none;
  border: 0;
  padding: 0 0 0 4px;
  cursor: pointer;
}
.history-drop:hover { color: var(--orange); }

@media (max-width: 700px) {
  .history li { flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; }
  .history a { flex-basis: 100%; white-space: normal; }
}

/* ---------- API credits ---------- */
.packs { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.pack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 20px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.pack:hover:not(:disabled) {
  border-color: rgba(239, 125, 26, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pack:disabled { opacity: 0.55; cursor: default; }
.pack-price { font-size: 19px; font-weight: 600; color: var(--ink); }
.pack-credits { font-size: 13px; color: var(--faint); }

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font-size: 14px;
}
.ledger li:first-child { border-top: 0; }
.ledger li span:first-child { flex: 1 1 auto; color: var(--body); }
.ledger-delta { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--body); }
.ledger-delta.up { color: #1f7a44; font-weight: 500; }
.ledger-when { flex: 0 0 auto; font-size: 13px; color: var(--faint); }

/* ---------- typing a location by hand ---------- */
.place-form { margin-top: 14px; }
.place-form label {
  display: block;
  font-size: 14px;
  color: var(--body);
  margin-bottom: 7px;
}
.place-row { display: flex; gap: 9px; flex-wrap: wrap; }
.place-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.place-row button {
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.place-row button:hover { border-color: rgba(239, 125, 26, 0.5); }
#place-note:empty { display: none; }
#place-note { margin-top: 8px; }

/* ---------- your own corpus ----------
   Somebody else's search engine over somebody else's documents. */
.corpus-list { list-style: none; margin: 0 0 20px; padding: 0; }
.corpus-list li { border-top: 1px solid var(--line); }
.corpus-list li:first-child { border-top: 0; }
.corpus-open {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.corpus-name { font-size: 17px; font-weight: 500; color: var(--blue); }
.corpus-open:hover .corpus-name { text-decoration: underline; }
.corpus-count { font-size: 13px; color: var(--faint); }

.corpus-back {
  font-size: 14px;
  color: var(--faint);
  background: none;
  border: 0;
  padding: 0 0 12px;
  cursor: pointer;
}
.corpus-back:hover { color: var(--orange); }

.corpus-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 28px 0 12px;
}

.corpus-new, .corpus-ask { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.corpus-new input, .corpus-ask input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 11px 18px;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.corpus-new button, .corpus-ask button {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.corpus-new button:disabled, .corpus-ask button:disabled { opacity: 0.55; cursor: default; }

.corpus-answer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 4px;
}
.corpus-answer p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; }
.corpus-answer p:last-child { margin-bottom: 0; }
.corpus-answer ul { margin: 0 0 12px; padding-left: 20px; }
.corpus-answer li { font-size: 16px; line-height: 1.55; color: var(--ink); margin-bottom: 6px; }

.corpus-verdict {
  font-size: 13px !important;
  color: #9a5b12 !important;
  background: #fdf4e8;
  border-radius: 8px;
  padding: 8px 12px;
}
.corpus-verdict.clean { color: #1f6b42 !important; background: #eef7f1; }
.corpus-flag { font-size: 13px !important; color: var(--body) !important; }

.corpus-sources { margin: 0; padding-left: 20px; }
.corpus-sources li { font-size: 14px; margin-bottom: 5px; }

.corpus-file { display: block; margin: 10px 0 4px; font-size: 14px; }

.corpus-docs { list-style: none; margin: 0; padding: 0; }
.corpus-docs li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 11px 0;
}
.corpus-docs li:first-child { border-top: 0; }
.corpus-doc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.corpus-doc-meta { flex: 0 0 auto; font-size: 13px; color: var(--faint); }
.corpus-drop {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
}
.corpus-drop:hover { color: var(--orange); }

@media (max-width: 700px) {
  .corpus-docs li { flex-wrap: wrap; gap: 4px 10px; }
  .corpus-doc-title { flex-basis: 100%; white-space: normal; }
}

/* ---------- workspaces ---------- */
.ws {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ws-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
}
.ws-head:hover { background: #fafbfb; }
.ws-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.ws-meta { font-size: 13px; color: var(--faint); }
.ws-detail { padding: 4px 18px 16px; border-top: 1px solid var(--line); }

.ws-people { list-style: none; margin: 8px 0 12px; padding: 0; }
.ws-people li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ws-people li:first-child { border-top: 0; }
.ws-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-role {
  flex: 0 0 auto;
  font-size: 13px;
  padding: 5px 8px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ws-drop {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
}
.ws-drop:hover { color: var(--orange); }

@media (max-width: 700px) {
  .ws-people li { flex-wrap: wrap; }
  .ws-who { flex-basis: 100%; white-space: normal; }
}