/* Citation guide hubs (/guides and /guides/<style>): a search box over an index card file of every guide.
   Each row shows the guide's format pattern in the paper face, so the shape of the answer is there before the click. */

.intro--guides .lede { max-width: 54ch; }

/* ---------- search ---------- */
.gsearch { position: relative; max-width: 36rem; margin-top: 0.5rem; }
.gsearch input {
  width: 100%; height: 3.5rem; padding: 0 3.25rem 0 3.25rem;
  font: inherit; font-size: var(--text-lg); color: var(--ink);
  background: #fff; border: 1px solid var(--gray-400); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-record);
  transition: border-color 0.15s ease, box-shadow 0.2s var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.gsearch input::placeholder { color: var(--ink-3); opacity: 1; }
.gsearch input:hover { border-color: var(--blue-300); }
.gsearch input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-50), var(--shadow-record); }
.gsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 1.1rem; width: 1.1rem; cursor: pointer;
  background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.gsearch__icon { position: absolute; left: 1.125rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%);
  fill: none; stroke: var(--blue-500); stroke-width: 2.25; stroke-linecap: round; pointer-events: none; }
.gsearch__key { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; color: var(--ink-3);
  padding: 0.3rem 0.45rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--ground-2); }
.gsearch input:focus ~ .gsearch__key, .gsearch.has-q .gsearch__key { display: none; }
@media (hover: none), (max-width: 560px) { .gsearch__key { display: none; } }

.gsearch__popular { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1rem; max-width: 36rem; }
.gsearch__popular > span { flex: none; font-size: var(--text-sm); color: var(--ink-3); }
.gsearch__popular .chip { text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.gsearch__popular .chip:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-900); }

/* ---------- beside the intro: a References page (style hub) ---------- */
.gsheet { margin: 0.5rem 0 0; }
.gsheet .paper { aspect-ratio: auto; font-size: clamp(10.5px, 1.1vw, 13.5px); line-height: 2; padding: 2.2em 2.4em 2.6em; border-radius: 2px; transform: rotate(0.6deg); }
.gsheet .paper .ref { overflow-wrap: anywhere; }
.gsheet figcaption { margin-top: 1rem; font-size: var(--text-sm); color: var(--ink-3); max-width: 44ch; }

/* ---------- beside the intro: the styles (/guides) ---------- */
.gstyles { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-record); }
.gstyles__head { padding: 0.875rem 1.25rem; background: var(--ground-2); border-bottom: 1px solid var(--rule); }
.gstyles__head h2 { margin: 0; font-size: 1.125rem; letter-spacing: -0.005em; }
.gstyles ul { list-style: none; margin: 0; padding: 0; }
.gstyles li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.gstyles li:last-child { border-bottom: 0; }
.gstyles li > a, .gstyles li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem 0.125rem; text-decoration: none; color: var(--ink); }
.gstyles li p { margin: 0; padding: 0 1.25rem 1.125rem; font-size: var(--text-sm); color: var(--ink-2); }
.gstyles b { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.01em; }
.gstyles li > a span { font-size: var(--text-sm); font-weight: 600; color: var(--link); white-space: nowrap; }
.gstyles li > a span::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.4em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.gstyles li:has(> a) { transition: background-color 0.15s ease; }
.gstyles li:has(> a:hover) { background: var(--blue-50); }
.gstyles li > a:hover span::after { transform: translate(0.2em, -0.12em) rotate(45deg); }
.gstyles li > a:focus-visible { outline-offset: -3px; }
.gstyles .is-soon b { color: var(--ink-2); }
.gstyles .is-soon span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- the index ---------- */
.gi__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.gi__head h2 { margin: 0; font-size: var(--text-3xl); }
.gi__count { margin: 0; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gi__groups { columns: 2 30rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
.gi__group { break-inside: avoid; margin-bottom: 2.5rem; }
.gi__group h3 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.25rem; font-size: var(--text-xl); }
.gi__group h3 span { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; color: var(--ink-3); }
.gi__group ul { list-style: none; margin: 0; padding: 0; }
.gi__group li[hidden] { display: none; }
.gi__group li { position: relative; display: flex; align-items: center; gap: 0.5rem; margin: 0; border-bottom: 1px solid var(--rule-soft); }
.gi__link { flex: 1; min-width: 0; display: block; padding: 0.7rem 0.75rem; margin-inline: -0.75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: background-color 0.15s ease; }
.gi__link:hover { background: var(--ground-2); }
.gi__link:hover .gi__name { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; }
.gi__link:focus-visible { outline-offset: -2px; }
.gi__name { display: block; font-weight: 600; line-height: 1.35; }
.gi__pat { display: block; margin-top: 0.15rem; font-family: var(--font-paper); font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi__style { flex: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--blue-900); text-decoration: none; }
.gi__style:hover { background: var(--blue-100); }
.gi mark { background: var(--highlight); color: inherit; border-radius: 2px; padding: 0 0.05em; }
.gi__empty { max-width: 40rem; padding: 2.5rem 0 1rem; }
.gi__empty h3 { font-size: var(--text-2xl); }
.gi__empty p { color: var(--ink-2); }
.gi__empty .btn { margin: 0.5rem 0.5rem 0 0; }

@media (max-width: 900px) {
  .gsheet { max-width: 34rem; }
  .gsheet .paper { font-size: clamp(10px, 2.6vw, 13px); transform: none; }
}
@media (max-width: 560px) {
  .gsearch input { height: 3.25rem; font-size: var(--text-base); padding-left: 2.85rem; padding-right: 0.75rem; }
  .gsearch__icon { left: 1rem; }
  .gsearch__popular { flex-direction: column; gap: 0.5rem; }
  .gi__pat { font-size: 0.875rem; }
}