/* citythink.css: CityThink field guide layer.
   Loads AFTER pfp-tokens-v1.1.css and pfp-pages.css and only uses their
   --pfp-* tokens and kit classes (pfp-btn, pfp-container, pfp-band, pfp-footer).
   Type: DM Sans headings (from the PfP tokens file), Helvetica Neue body.
   Never Inter. No hyphenation. Cyber is never used for text on white. */

html, body { hyphens: none; -webkit-hyphens: none; }
/* [hidden] must win over kit display rules (pfp-btn is inline-flex). Fix from render check. */
.ct-page [hidden] { display: none !important; }
.ct-page { background: var(--pfp-white); }
.ct-page :focus-visible { outline: 3px solid var(--pfp-slate); outline-offset: 2px; border-radius: 4px; }

/* header */
.ct-header .pfp-logo, .pfp-footer .pfp-logo, .ct-initiative a { min-height: 44px; display: inline-flex; align-items: center; }
.ct-header .pfp-logo img { height: 44px; width: auto; }
.ct-header-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ct-family { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .95rem; color: var(--pfp-link);
  min-height: 44px; display: inline-flex; align-items: center; }

/* intro: title, lede, search and PDF all in the first screen */
.ct-intro { padding: clamp(32px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); }
.ct-intro h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; margin: .5rem 0 .8rem; }
.ct-lede { max-width: 62ch; }
.ct-search { margin-top: 1.6rem; max-width: 860px; }
.ct-label { display: block; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1rem; color: var(--pfp-slate); margin-bottom: .45rem; padding: 0; }
.ct-search-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ct-input, .ct-select {
  font: inherit; font-size: 1.05rem; color: var(--pfp-slate); background: var(--pfp-white);
  border: 2px solid var(--pfp-slate-mid); border-radius: 4px; min-height: 52px; padding: .6rem .9rem; }
.ct-search .ct-input { flex: 1 1 320px; min-width: 0; }
.ct-input:focus, .ct-select:focus { border-color: var(--pfp-slate); }
.ct-input[aria-invalid="true"] { border-color: #B42318; }
.ct-hint { font-size: .9rem; line-height: 1.45; color: var(--pfp-slate-light); margin-top: .45rem; }
.ct-pdf-line { margin-top: 1.1rem; }

/* filters */
.ct-tools { background: var(--pfp-white); border-bottom: 1px solid #CBD5E1; }
.ct-filters { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.6rem; padding-top: 1.4rem; padding-bottom: 1.4rem; align-items: start; }
.ct-filter .ct-select { width: 100%; }
.ct-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-chips, .ct-near-topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-chip {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .95rem; color: var(--pfp-slate);
  background: var(--pfp-white); border: 2px solid #CBD5E1; border-radius: 999px;
  min-height: 44px; padding: .4rem 1rem; cursor: pointer; }
.ct-chip:hover { border-color: var(--pfp-slate-mid); }
.ct-chip[aria-pressed="true"] { background: var(--pfp-slate); border-color: var(--pfp-slate); color: var(--pfp-white); }

/* results and brief layout */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 48px); align-items: start; padding-top: 2rem; padding-bottom: 3rem; }
.ct-h2 { font-size: 28px; line-height: 34px; }
.ct-h3 { font-size: 22px; line-height: 28px; }
.ct-count { font-size: .95rem; color: var(--pfp-slate-light); margin: .4rem 0 1.2rem; min-height: 1.4em; }
.ct-list { display: grid; gap: 1rem; }

/* answer card: same anatomy every time */
.ct-card { background: var(--pfp-white); border: 1px solid #CBD5E1; border-top: 4px solid var(--pfp-slate); border-radius: 8px; padding: 1.3rem 1.4rem 1.2rem; scroll-margin-top: 1rem; }
.ct-card-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-bottom: .5rem; }
.ct-topic { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pfp-slate-light); }
.ct-role-badge, .ct-placeholder-tag { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .875rem; padding: .15rem .6rem; border-radius: 999px; }
.ct-role-badge { background: var(--pfp-tint); color: var(--pfp-slate); }
.ct-placeholder-tag { background: #FEF3C7; color: #78350F; }
.ct-q { font-size: 21px; line-height: 27px; margin: 0 0 .45rem; }
.ct-q:focus { outline: none; }
.ct-short { font-size: 1.02rem; line-height: 1.6; }
.ct-more { margin-top: .8rem; }
.ct-more summary { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--pfp-link); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ct-more h4 { font-family: 'DM Sans', sans-serif; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pfp-slate-light); margin: 1rem 0 .3rem; }
.ct-more p, .ct-sources { font-size: .98rem; line-height: 1.62; }
.ct-sources { padding-left: 1.2rem; margin: .5rem 0 0; }
.ct-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--pfp-tint); }
.ct-deeper, .ct-anchor { font-family: 'DM Sans', sans-serif; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.ct-deeper { color: var(--pfp-link); }
.ct-anchor { color: var(--pfp-slate-light); font-size: .9rem; margin-left: auto; }
.ct-save[aria-pressed="true"] { background: var(--pfp-slate); color: var(--pfp-white); }

/* never a dead end */
.ct-near { background: var(--pfp-tint); border-radius: 8px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.ct-near-h { font-size: 20px; line-height: 26px; margin-bottom: .4rem; }
.ct-near p + p { margin-top: .8rem; }
.ct-after-search { margin-top: 1.4rem; font-size: 1rem; }

/* brief */
.ct-brief { position: sticky; top: 1rem; background: var(--pfp-paper); border: 1px solid #CBD5E1; border-radius: 8px; padding: 1.3rem; }
.ct-brief-note { font-size: .92rem; line-height: 1.5; color: var(--pfp-slate-light); margin: .4rem 0 .6rem; }
.ct-brief-status { font-size: .9rem; color: var(--pfp-link); min-height: 1.3em; font-family: 'DM Sans', sans-serif; font-weight: 700; }
.ct-brief-list { padding-left: 1.2rem; margin: .6rem 0; font-size: .95rem; line-height: 1.45; }
.ct-brief-list li { margin-bottom: .5rem; }
.ct-brief-list a { display: block; }
.ct-brief-rm { font: inherit; font-size: .88rem; background: none; border: 0; color: var(--pfp-slate-light); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0; }
.ct-brief-empty { font-size: .95rem; color: var(--pfp-slate-light); margin: .6rem 0; }
.ct-brief-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.ct-page .pfp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ask us */
.ct-ask-form { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 640px; }
.ct-field .ct-input, .ct-field .ct-select { width: 100%; }
.ct-textarea { min-height: 120px; resize: vertical; }
.ct-req { font-weight: 400; color: var(--pfp-slate-light); font-size: .9rem; }
.ct-honey { position: absolute; left: -9999px; width: 1px; height: 1px; }
/* Eyebrow: the kit's .pfp-kicker is 13px; raise to 14px so no page text is under 14px (Shirley, Oct 27). */
.ct-page .ct-intro .pfp-kicker { font-size: .875rem; }
.ct-form-note { margin: 0; font-size: .875rem; color: var(--pfp-slate-light); }
.ct-form-status { min-height: 1.4em; font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--pfp-slate); }
.ct-ask-form .pfp-btn { justify-self: start; }

/* footer tie in */
.ct-initiative { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; color: var(--pfp-slate-light); }
.ct-ics-lockup { height: 30px; width: auto; display: block; }

/* responsive: one column at tablet and phone (checked at 390 px) */
@media (max-width: 960px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-brief { position: static; order: -1; }
  .ct-filters { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 560px) {
  .ct-header .pfp-logo img { height: 36px; }
  .ct-family { font-size: .9rem; }
  .ct-search-row .pfp-btn { flex: 1 1 auto; }
  .ct-anchor { margin-left: 0; }
  .ct-card { padding: 1.1rem 1rem 1rem; }
  .ct-intro .pfp-btn--ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- print: the brief only ---------- */
.ct-print[hidden] { display: none; }
@media print {
  @page { size: letter; margin: 0.75in 0.8in 0.8in; }
  .ct-page > *:not(.ct-print) { display: none !important; }
  .ct-page { background: #FFFFFF; }
  .ct-print, .ct-print[hidden] { display: block !important; color: #0F172A; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10.5pt; line-height: 1.5; }
  .ct-print-head { display: flex; justify-content: space-between; align-items: center; gap: 24pt; padding-bottom: 12pt; border-bottom: 2pt solid #0F172A; }
  .ct-print-head > img { height: 34pt; width: auto; }
  .ct-print-head .ct-initiative { font-size: 8.5pt; color: #475569; gap: 6pt; margin: 0; }
  .ct-print-head .ct-ics-lockup { height: 20pt; }
  .ct-print-title { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 22pt; line-height: 1.1; letter-spacing: -.01em; margin: 18pt 0 3pt; }
  .ct-print-meta { font-size: 9pt; color: #475569; margin: 0 0 12pt; }
  .ct-print-list { list-style: none; padding: 0; margin: 0; }
  .ct-print-item { break-inside: avoid; page-break-inside: avoid; padding: 11pt 0 12pt; border-top: .75pt solid #CBD5E1; }
  .ct-print-item:first-child { border-top: 0; }
  .ct-print-topic { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; color: #475569; margin: 0 0 3pt; }
  .ct-print-q { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13pt; line-height: 1.25; margin: 0 0 4pt; break-after: avoid; }
  .ct-print-a { font-size: 11pt; margin: 0 0 4pt; }
  .ct-print-body { margin: 0 0 4pt; color: #1E293B; }
  .ct-print-src { font-size: 8.5pt; color: #475569; margin: 2pt 0 0; word-break: break-word; }
  .ct-print-foot { margin-top: 16pt; padding-top: 8pt; border-top: .75pt solid #CBD5E1; font-size: 8pt; color: #475569; }
  p, li { orphans: 3; widows: 3; }
}

/* Guide page integrated into the PfP shell (2026-10-27, JR): the CityThink
   logo is the page title, as on the FRAME guide page. */
.ct-guide-title { margin: .4rem 0 .9rem; }
.ct-guide-title img { display: block; width: min(430px, 84vw); height: auto; }

/* Topic chips, plain language (2026-10-27, JR with Rachel Donnelly):
   short label + one glyph; the full part title rides on the card. */
.ct-chip { display: inline-flex; align-items: center; gap: .45rem; }
.ct-chip-icon { width: 18px; height: 18px; flex: none; display: block; }
.ct-topic-full { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .8rem;
  letter-spacing: 0; text-transform: none; color: var(--pfp-slate-mid); }