/* Layout: four quiet corners and one loud line. The centre is the question itself, set huge;
   asking turns the page into a results page (see "Asked" below). "Timeline" swaps the centre
   for roles and work over time. */
:root {
  --bg: #ECEDEA;
  --ink: #1E2328;
  --muted: #646A63;
  --faint: #B9BDB6;
  --line: #D6D9D3;
  --pill: #2B3036;
  --accent: #3A56E8;
  --surface: #F8F8F6;
  --surface-2: #F2F3F0;
  --edge: rgba(30, 35, 40, .07);
  --shadow: 0 1px 2px rgba(30, 35, 40, .05), 0 6px 18px -6px rgba(30, 35, 40, .12);
  --shadow-lift: 0 2px 4px rgba(30, 35, 40, .06), 0 14px 32px -10px rgba(30, 35, 40, .2);
  --f-sans: "Geist", "Noto Sans Thai", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #141615; --ink: #E9EBE6; --muted: #8C918A; --faint: #4A4F49; --line: #2A2E2A; --pill: #E9EBE6; --accent: #93A6FF; --surface: #1C1F1D; --surface-2: #191C1A; --edge: rgba(255, 255, 255, .07); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -8px rgba(0, 0, 0, .6); --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 36px -10px rgba(0, 0, 0, .75); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #141615; --ink: #E9EBE6; --muted: #8C918A; --faint: #4A4F49; --line: #2A2E2A; --pill: #E9EBE6; --accent: #93A6FF; --surface: #1C1F1D; --surface-2: #191C1A; --edge: rgba(255, 255, 255, .07); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -8px rgba(0, 0, 0, .6); --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 36px -10px rgba(0, 0, 0, .75); color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-sans); -webkit-font-smoothing: antialiased; }
a, .linkish { color: inherit; text-decoration: none; }
a:hover, .linkish:hover { color: var(--accent); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.frame {
  height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-block: 34px 34px;
  padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px));
}
/* wide screens: results, wiki, timeline and mail are one centred column (results + panel = 760 + 56 + 400), so the
   space left and right of it is equal; the header, the content and the footer all share its edges.
   The start page keeps its full-width layout. */
.frame { --col: 1216px; }
@media (min-width: 1313px) {
  .frame.serpmode { padding-left: max(48px, env(safe-area-inset-left, 0px), calc((100% - var(--col)) / 2)); padding-right: max(48px, env(safe-area-inset-right, 0px), calc((100% - var(--col)) / 2)); }
}
.small { font: 400 15px/1.35 var(--f-sans); text-transform: uppercase; letter-spacing: .01em; }

/* ---------- Corners ---------- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; }
.top .right { text-align: right; }
.top .right span { display: block; color: var(--muted); }
.pills { display: flex; gap: 8px; }
.pill { text-decoration: none; color: inherit; display: inline-block; border: 1px solid var(--faint); background: none; border-radius: 999px; padding: 10px 26px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pill[aria-pressed="true"] { background: var(--pill); color: var(--bg); border-color: var(--pill); }
.bottom { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.bottom p { margin: 0; max-width: 40ch; font: 400 17px/1.45 var(--f-sans); }
.links { display: flex; gap: 22px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.links .dot { color: var(--faint); }
.copied { color: var(--accent); }

/* ---------- Centre: ask ---------- */
.stage { position: relative; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; margin-inline: -8px; padding: 16px 8px; scrollbar-width: thin; }
.stage > .ask { margin-block: auto; }
.stage { -webkit-mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 32px), transparent); }
.frame { row-gap: 14px; }
.ask { display: flex; flex-direction: column; gap: 22px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
form.q { margin: 0; }
.q textarea {
  display: block; resize: none; overflow: hidden; field-sizing: content;
  width: 100%; border: 0; outline: 0; background: none; padding: 0;
  padding: 0 0 .14em; font: 300 var(--qsize, clamp(44px, 8.4vw, 156px))/1.1 var(--f-sans); letter-spacing: -0.045em; color: var(--ink);
  transition: font-size .35s cubic-bezier(.2,.7,.2,1);
  caret-color: var(--accent);
}
.q textarea::placeholder { color: var(--faint); }

.sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.sug { border: 1px solid var(--faint); background: none; border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.sug:hover { color: var(--ink); border-color: var(--ink); }
.qclear { display: none; }

/* ---------- Asked: the page turns into a results page ----------
   The huge question shrinks into a search box at the top; under it an answer box, one result
   per entity the answer used, "People also ask", and a knowledge panel on the right. */
.stage > .ask.asked { margin-block: 0 auto; }
.frame:has(.ask.asked:not([hidden])) .bottom p { display: none; }
.ask.asked { gap: 14px; }
/* results mode: a compact one-row header (name · search box · views · role), a slim footer,
   and results aligned under the search box, the way a search engine lays them out */
.frame { --indent: 22px; --rail: 168px; }
.hslot { display: none; }
.frame.serpmode { padding-block: 16px 10px; row-gap: 12px; --indent: 0px; }
.serpmode .top { grid-template-columns: auto minmax(0, 760px) auto 1fr; align-items: center; gap: 28px; }
.serpmode .top.small, .serpmode .top .small { font-size: 13px; }
.serpmode .hslot { display: block; min-width: 0; max-width: 760px; }
.serpmode .pills .pill { padding: 7px 16px; font-size: 12.5px; }
.serpmode .top .right { font-size: 12px; line-height: 1.35; white-space: nowrap; }
.serpmode .bottom { border-top: 1px solid var(--line); padding-top: 9px; }
.serpmode .links, .serpmode .links > * { font-size: 12px; } .serpmode .links { gap: 18px; }
.serpmode .stage { margin-top: -4px; }
.serpmode form.q {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--faint); border-radius: 26px; background: var(--bg);
  padding: 8px 12px 8px 22px; transition: border-color .2s, box-shadow .2s;
}
.serpmode form.q:focus-within { border-color: var(--ink); box-shadow: 0 1px 10px rgba(0,0,0,.06); }
.serpmode .q textarea { font: 400 17px/1.45 var(--f-sans); letter-spacing: -.005em; padding: 0; flex: 1; min-width: 0; text-transform: none; }
.asked .qclear, .serpmode .qclear { display: block; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 50%; }
.serpmode .qclear:hover { color: var(--ink); }
.asked .sugs { display: none; }

.result { display: grid; gap: 14px; }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); padding-left: var(--indent); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 10px 2px 9px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.query { padding-left: var(--indent); max-width: calc(var(--indent) + 1180px); }
.stage.intab > .ask.asked { margin-block: 0; }
.stage.intab > .timeview, .stage.wide > .timeview { margin-block: 12px auto; padding-inline: 8px; }
.status { font: 400 12.5px var(--f-mono); color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-left: var(--indent); }
.status .live { color: var(--accent); }
.status button { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

.serp { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 400px); gap: 24px 56px; align-items: start; padding-left: var(--indent); }
.serp-main { display: grid; gap: 26px; min-width: 0; }
.overview { border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px 20px; }
.ov-h { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 8px; }
.ov-h::before { content: "◆ "; }
.answer { font: 400 20px/1.5 var(--f-sans); letter-spacing: -.01em; margin: 0; max-width: 62ch; text-wrap: pretty; }
.answer.dim { color: var(--muted); }

.results { display: grid; gap: 26px; }
.res { display: grid; gap: 4px; }
.res-src { display: flex; align-items: center; gap: 10px; min-width: 0; }
.res-src > span:last-child { display: grid; min-width: 0; }
.fav { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 12px var(--f-sans); color: var(--ink); }
.res-site { font-size: 14px; line-height: 1.25; }
.res-url { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res h3 { margin: 2px 0 0; font-weight: 400; }
.res-t { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: 400 21px/1.3 var(--f-sans); color: var(--accent); }
.res-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.res p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: 70ch; }
.res p .date { color: var(--muted); }
.res-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.res-tags button, .kp-chips button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.res-tags button:hover, .kp-chips button:hover { color: var(--ink); border-color: var(--ink); }

.paa h3 { font: 400 20px var(--f-sans); margin: 0 0 8px; }
.paa-item { border-bottom: 1px solid var(--line); }
.paa-item summary { list-style: none; cursor: pointer; padding: 14px 4px; display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; }
.paa-item summary::-webkit-details-marker { display: none; }
.paa-item summary::after { content: "⌄"; color: var(--muted); transition: transform .2s; }
.paa-item[open] summary::after { transform: rotate(180deg); }
.paa-body { padding: 0 4px 16px; font-size: 14.5px; line-height: 1.55; display: grid; gap: 10px; justify-items: start; }
.paa-more { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; }

.panel { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: grid; gap: 14px; align-content: start; position: sticky; top: 8px;
  /* scrolls on its own when taller than the space beside the results */
  max-height: calc(100svh - 190px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.panel:empty { display: none; }
.kp-h h2 { margin: 0; font-weight: 400; font-size: 28px; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.kp-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.kp-desc { margin: 0; font-size: 14.5px; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 14px; }
.kp-link { color: var(--accent); font-size: 14px; }
.panel dl { margin: 0; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.kp-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.45; }
.kp-row dt { color: var(--muted); }
.kp-row dd { margin: 0; overflow-wrap: anywhere; }
.kp-row dd button { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; }
.kp-row dd button:hover { text-decoration: underline; }
.kp-sec { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.kp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-src { font: 400 11px var(--f-mono); color: var(--muted); }

.query { padding-top: 4px; }
.run + .run { margin-top: 14px; }
.run-h { font: 400 11.5px var(--f-mono); color: var(--muted); margin-bottom: 4px; }
pre.sparql { margin: 0 0 6px; font: 400 12.5px/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word; }
.k { color: var(--accent); } .v { color: #B24F7D; } .l { color: #3F8A5E; } .cm { color: var(--muted); }
table.rows { border-collapse: collapse; font: 400 12px/1.5 var(--f-mono); width: 100%; }
table.rows th { text-align: left; color: var(--muted); font-weight: 400; padding: 2px 14px 2px 0; border-bottom: 1px solid var(--line); }
table.rows td { padding: 2px 14px 2px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.err { color: #B4442F; font: 400 12px var(--f-mono); }

/* ---------- Centre: timeline ---------- */
.frame:has(.stage.wide) .bottom p { display: none; }  /* the timeline needs the room */
.timeview { display: grid; gap: 16px; }
.tl-hint { font: 400 12.5px var(--f-mono); color: var(--muted); }
.tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
svg#tl { display: block; }
svg#tl text { font-family: var(--f-sans); fill: var(--ink); }
.tl-axis text { font: 400 11px var(--f-mono); fill: var(--muted) !important; }
.tl-grid { stroke: var(--line); }
.tl-rule { stroke: var(--line); stroke-dasharray: 1 3; }
.tl-band { fill: var(--accent); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tl-band.on { opacity: .08; }
.tl-now line { stroke: var(--accent); stroke-dasharray: 3 3; }
.tl-now text { font: 400 11px var(--f-mono); fill: var(--accent) !important; }
.tl-role { cursor: pointer; }
.tl-role rect { fill: transparent; stroke: var(--ink); transition: fill .2s; }
.tl-role text { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.tl-role:hover rect { fill: var(--line); }
.tl-role.on rect { fill: var(--pill); stroke: var(--pill); }
.tl-role.on text { fill: var(--bg) !important; }
.tl-role text.out, .tl-role.on text.out { fill: var(--ink) !important; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.tl-lane { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; fill: var(--muted) !important; cursor: pointer; }
.tl-lane:hover, .tl-lane.on { fill: var(--ink) !important; }
.tl-count { font-family: var(--f-mono); fill: var(--muted); }
.tl-dot { fill: var(--accent); cursor: pointer; transition: opacity .2s; }
.tl-dot.f { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.tl-dot.sel { fill: var(--ink); stroke: var(--ink); }
.tl-dot:hover { fill: var(--ink); }
.tl-flabel { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; transition: opacity .2s; }
svg#tl .dim { opacity: .22; }
svg#tl :focus-visible { outline: none; }
svg#tl .tl-dot:focus-visible { stroke: var(--ink); stroke-width: 2; }
.tl-tip { position: fixed; pointer-events: none; background: var(--pill); color: var(--bg); font-size: 13px; line-height: 1.45; padding: 12px 14px; border-radius: 12px; width: 300px; z-index: 5; opacity: 0; transition: opacity .12s; display: grid; gap: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.tl-tip b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.tl-tip p { margin: 0; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tt-meta { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.tt-uses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tt-uses span { border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.tt-hint { font: 400 11px var(--f-mono); opacity: .55; margin-top: 2px; }
.tl-foot { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.tl-foot button, .tl-ask { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; border-bottom: 1px solid var(--faint); cursor: pointer; }
.tl-foot button:hover, .tl-ask:hover { color: var(--accent); border-color: var(--accent); }
.timeview { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; column-gap: 28px; }
.tl-main { display: grid; gap: 16px; min-width: 0; }
.tl-detail {
  position: sticky; top: 0; display: grid; gap: 12px; align-content: start;
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; background: var(--bg);
  max-height: calc(100svh - 190px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.tl-detail.flash { animation: tlflash .6s ease; }
@keyframes tlflash { from { border-color: var(--accent); } to { border-color: var(--line); } }
.tl-close { position: absolute; top: 12px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 50%; }
.tl-close:hover { color: var(--ink); }
.tl-detail .tl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-right: 28px; }
.tl-detail:empty { display: none; }
.tl-meta { font: 400 11.5px var(--f-mono); color: var(--muted); display: grid; gap: 5px; align-content: start; text-transform: uppercase; letter-spacing: .03em; }
.tl-sub { margin-top: 16px; display: block; }
.tl-detail h2 { font-weight: 400; font-size: 24px; letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance; }
.tl-detail p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.tl-detail p b { font-weight: 500; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.tl-chip { font-size: 13px; background: none; border: 1px solid var(--faint); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: border-color .15s; }
.tl-chip:hover { border-color: var(--ink); }
.tl-chip small { font: 400 11px var(--f-mono); color: var(--muted); margin-left: 6px; }
.tl-ask { font-size: 14px; margin-top: 4px; }

body:has(#timeview[hidden]) > .tl-detail { display: none; }
@media (max-width: 1280px) {
  .timeview { grid-template-columns: minmax(0, 1fr); }
  .tl-detail {
    position: fixed; z-index: 6; top: auto; bottom: 0; left: 0; right: 0; max-height: 46svh;
    border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.12);
    padding: 20px max(18px, env(safe-area-inset-left, 0px)) calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 1320px) { .serpmode .top .right { display: none; } .serpmode .top { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 980px) {
  .serpmode .top { grid-template-columns: 1fr auto; }
  .serpmode .hslot { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .serp { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px 32px; }
}
@media (max-width: 860px), (max-height: 600px) {
  .query { max-height: none; }
  html, body { height: auto; }
  body { overflow: visible; }
  .frame { height: auto; min-height: 100svh; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-block: 20px; gap: 28px; }
  .top { grid-template-columns: 1fr 1fr; }
  .pills { grid-column: 1 / -1; grid-row: 2; }
  .stage { min-height: 60svh; }
  .serp { grid-template-columns: 1fr; padding-left: 0; }
  .status, .tabs, .query { padding-left: 0; }
  .panel { position: static; order: 1; max-height: none; overflow: visible; }
  .serp-main { display: contents; }
  .overview { order: 0; } .results { order: 2; } .paa { order: 3; }
  .answer { font-size: 18px; }
  .frame.serpmode { --indent: 0px; }
  .serpmode .top { grid-template-columns: 1fr auto; row-gap: 12px; }
  .serpmode .home { grid-row: 1; grid-column: 1; align-self: center; }
  .serpmode .pills { grid-column: 2; grid-row: 1; }
  .serpmode .q textarea { font-size: 16px; }
  .stage { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .small { font-size: 13px; }
}

.linkish { border: 0; background: none; padding: 0; cursor: pointer; }
.home { justify-self: start; text-align: left; text-transform: inherit; letter-spacing: inherit; }
.kp-row dd a { color: var(--accent); }
.tl-detail .tl-meta span + span::before { content: "· "; color: var(--faint); }
/* text over the role band or a gridline stays legible */
svg#tl .tl-lane, svg#tl .tl-flabel, svg#tl .tl-axis text { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

/* ---------- Timeline on phones: a vertical list, newest first ---------- */
.tlm { display: grid; }
.tlm-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; position: sticky; top: 0; z-index: 2; background: var(--bg); margin-inline: -2px; padding-inline: 2px; }
.tlm-f { flex: none; border: 1px solid var(--faint); background: var(--bg); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tlm-f.on { background: var(--pill); border-color: var(--pill); color: var(--bg); }
.tlm-year { font: 300 34px/1 var(--f-sans); letter-spacing: -.03em; margin: 22px 0 8px; position: sticky; top: 46px; z-index: 1; background: var(--bg); padding-block: 4px; }
.tlm-role { display: grid; gap: 3px; text-align: left; border: 1px solid var(--ink); border-radius: 14px; padding: 12px 14px; margin: 6px 0 10px; background: none; cursor: pointer; }
.tlm-role b { font-weight: 500; font-size: 16px; }
.tlm-role span { font-size: 13.5px; color: var(--muted); }
.tlm-role .tlm-role-when { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.tlm-role.sel { background: var(--pill); color: var(--bg); border-color: var(--pill); }
.tlm-role.sel span { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.tlm-item { display: grid; grid-template-columns: 34px 14px minmax(0, 1fr); align-items: start; gap: 8px; text-align: left; border: 0; background: none; padding: 7px 0; cursor: pointer; position: relative; }
.tlm-item::before { content: ""; position: absolute; left: 47px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tlm-when { font: 400 11px var(--f-mono); text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.tlm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin: 5px 0 0 2px; position: relative; z-index: 1; }
.tlm-item.f .tlm-dot { background: var(--bg); border: 2px solid var(--accent); width: 11px; height: 11px; margin: 4px 0 0 1px; }
.tlm-body { display: grid; gap: 1px; min-width: 0; }
.tlm-body b { font-weight: 400; font-size: 15px; line-height: 1.35; }
.tlm-item.f .tlm-body b { font-weight: 500; }
.tlm-body small { font-size: 12.5px; color: var(--muted); }
.tlm-item.sel .tlm-body b { color: var(--accent); }
.tlm-item.sel .tlm-dot { background: var(--ink); }

/* result pages */
.pager { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; }
.pg-mark { font: 400 26px/1 var(--f-sans); letter-spacing: -.02em; color: var(--muted); }
.pg-mark span.on { color: var(--accent); }
.pg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; align-items: center; }
.pg-n, .pg-step { border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--accent); padding: 6px 9px; border-radius: 8px; }
.pg-n:hover, .pg-step:hover { background: var(--line); }
.pg-n.on { color: var(--ink); font-weight: 500; cursor: default; background: none; }
.ov-note { font-size: 13px; color: var(--muted); margin: -2px 0 8px; } .ov-note:empty { display: none; }

/* ---------- Wiki ---------- */
.stage > .wikiview { margin-block: 8px auto; padding-inline: 8px; }
.wk-crumb { font: 400 12px var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wk-crumb a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.wk-page h1, .wk-index h1 { font: 300 clamp(34px, 4.2vw, 52px)/1.05 var(--f-sans); letter-spacing: -.035em; margin: 10px 0 6px; text-wrap: balance; }
.wk-sub { font-size: 13.5px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wk-cols { display: grid; grid-template-columns: minmax(0, 72ch) minmax(260px, 320px); gap: 56px; align-items: start; margin-top: 22px; }
.wk-body { font-size: 16.5px; line-height: 1.7; min-width: 0; }
.wk-body > p:first-child { font-size: 18.5px; line-height: 1.6; }
.wk-body p { margin: 0 0 14px; }
.wk-body h2 { font: 400 25px/1.25 var(--f-sans); letter-spacing: -.02em; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.wk-body h3 { font: 500 17px var(--f-sans); margin: 22px 0 8px; }
.wk-body ul, .wk-body ol { margin: 0 0 14px; padding-left: 22px; }
.wk-body li { margin: 4px 0; }
.wk-body li > ul, .wk-body li > ol { margin: 4px 0 0; }
.wk-body code { font: 400 .86em var(--f-mono); background: var(--line); padding: 1px 5px; border-radius: 4px; }
.wk-body pre { background: var(--pill); color: var(--bg); padding: 14px 16px; border-radius: 12px; overflow-x: auto; font: 400 13px/1.6 var(--f-mono); margin: 0 0 16px; }
.wk-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.wk-body figure { margin: 6px 0 20px; }
.wk-body figure img { display: block; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.wk-body figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.wk-table { overflow-x: auto; margin: 0 0 16px; }
.wk-table table { border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 100%; }
.wk-table th { text-align: left; font-weight: 500; border-bottom: 1px solid var(--faint); padding: 6px 14px 6px 0; }
.wk-table td { border-bottom: 1px solid var(--line); padding: 7px 14px 7px 0; vertical-align: top; }
a.wl { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a.wl:hover { text-decoration: underline; text-underline-offset: 3px; }
a.wl.stub { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.wl.missing { color: var(--muted); }
.wk-stub { font-size: 14px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; }
.wk-works { list-style: none; padding: 0 !important; display: grid; gap: 2px; }
.wk-works li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0; }
.wk-works .wk-date { font: 400 12px var(--f-mono); color: var(--muted); align-self: baseline; }
.wk-works .wk-desc { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.wk-back { margin-top: 30px; }
.wk-chips, .wk-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.wk-side { position: sticky; top: 8px; display: grid; gap: 16px; }
.wk-box { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 4px; }
.wk-box-h { font: 400 20px/1.25 var(--f-sans); letter-spacing: -.01em; }
.wk-box-type { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.wk-box table { border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.wk-box th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap; border-top: 1px solid var(--line); }
.wk-box td { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.wk-box-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; }
.wk-box-links a, .wk-ask { color: var(--accent); }
.wk-ask { border: 0; background: none; padding: 0; cursor: pointer; font-size: 14px; }
.wk-toc { display: grid; gap: 6px; font-size: 14px; padding-left: 14px; border-left: 1px solid var(--line); }
.wk-toc div { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wk-toc a { color: var(--muted); } .wk-toc a:hover { color: var(--ink); }
.wk-lede { font-size: 17px; line-height: 1.55; max-width: 70ch; color: var(--muted); }
.wk-filter { width: min(100%, 420px); border: 1px solid var(--faint); border-radius: 999px; padding: 9px 16px; background: none; font-size: 15px; margin: 6px 0 10px; outline: none; }
.wk-filter:focus { border-color: var(--ink); }
.wk-group h2 { font: 400 22px var(--f-sans); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wk-group h2 span { font: 400 12px var(--f-mono); color: var(--muted); }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 20px; }
.kp-links { display: flex; gap: 18px; flex-wrap: wrap; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 980px) {
  .wk-cols { grid-template-columns: 1fr; gap: 24px; }
  .wk-side { position: static; order: -1; }
  .wk-toc { display: none; }
}
.frame.serpmode .bottom p { display: none; }
.wk-works li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.wk-works .wk-desc { flex-basis: 100%; }
@media (max-width: 600px) { .serpmode .pills .pill { padding: 6px 11px; font-size: 12px; } .serpmode .pills { gap: 6px; } }

/* the wiki inside answers */
.ov-wiki:empty { display: none; }
.ov-wiki { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.ow-h { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ow-h a { color: var(--accent); text-transform: none; letter-spacing: 0; font: 400 13px var(--f-sans); }
.ov-wiki p { margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 70ch; }
mark { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.res-sec { color: var(--muted); font-size: 13px; }
.paa-body p { margin: 0; }
a.paa-more { color: var(--accent); font-size: 14px; }

/* Wikipedia summaries: clearly someone else's text */
.wk-ext { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 6px 0 18px; background: color-mix(in srgb, var(--line) 30%, transparent); }
.wk-ext-h { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.wk-ext-h span { text-transform: none; }
.wk-ext p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.wk-ext-src, .ow-src { font-size: 12.5px; color: var(--muted); }
.wk-ext-src a, .ow-src a { color: var(--accent); }
.kp-wp { color: var(--muted); font-size: 12.5px; } .kp-wp a { color: var(--accent); }

/* ---------------------------------------------------------------- transitions
   View changes (Ask / Timeline / Wiki, result tabs, asking a question) run inside a view transition:
   the header pieces keep their identity and glide to their new places, the search box morphs from the
   big start-page line into the header, and the content underneath cross-fades with a small lift. */
/* moving between pages (the start page or timeline and /graph) morphs the same way: the browser carries the
   named pieces across the page load (cross-document view transitions; browsers without them just load) */
@view-transition { navigation: auto; }
.top .home, .g-top .g-home { view-transition-name: brand; }
.g-top .pills { view-transition-name: pills; }
.g-top .g-search { view-transition-name: search; }
.g-top .g-right { view-transition-name: hacts; }
.top .pills { view-transition-name: pills; }
.top .right { view-transition-name: tagline; }
#qform { view-transition-name: search; }
.tabs { view-transition-name: tabs; }

::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .36s cubic-bezier(.2, .7, .2, 1) .06s both; }
/* pieces that change size (the search box shrinks from the start page's big line into the header) scale
   in proportion, anchored to their reading edge, instead of stretching */
::view-transition-old(search), ::view-transition-new(search),
::view-transition-old(brand), ::view-transition-new(brand) { height: 100%; object-fit: contain; object-position: left center; }
::view-transition-old(tagline), ::view-transition-new(tagline) { height: 100%; object-fit: contain; object-position: right center; }
::view-transition-old(search) { animation: vt-out .25s ease-in both; }
::view-transition-new(search) { animation: vt-fade .3s ease-out .1s both; }
::view-transition-old(tabs) { animation: vt-out .15s ease-in both; }
::view-transition-new(tabs) { animation: vt-in .3s cubic-bezier(.2, .7, .2, 1) .1s both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* browsers without view transitions: the new view fades in */
.stage.fade-in > :not([hidden]) { animation: vt-in .32s cubic-bezier(.2, .7, .2, 1) both; }

/* results fade in one after another; re-ranking the same results doesn't replay it */
.res.res-in { animation: vt-in .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.overview, .panel > * { animation: vt-fade .3s ease-out both; }

/* the active tab's underline and the pressed pill ease rather than snap */
.tabs button { transition: color .2s, border-color .25s; }
.pill { transition: background-color .25s, color .25s, border-color .25s; }
.pill.is-on { background: var(--pill); color: var(--bg); border-color: var(--pill); box-shadow: 0 4px 12px -4px rgba(30, 35, 40, .35); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .stage.fade-in > *, .res.res-in, .overview, .panel > * { animation: none !important; }
}

/* key work (cj:tier 1) is marked wherever works are listed; side work (tier 3) is quieter in wiki lists */
.key-badge { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--accent); border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); line-height: 1.5; }
.wk-works li.side { opacity: .72; }

/* why the knowledge panel shows this entity ("Top result", "Named in your question", "About him") */
.kp-why { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* ---------------------------------------------------------------- depth
   The page is one flat tone; the things you read sit on raised surfaces so they stand out from it:
   the answer (with an accent rail), the knowledge panel, wiki infoboxes, the timeline card and the
   search box. Results are separated by hairlines and lift a little on hover. */
.stage { margin-inline: -18px; padding-inline: 18px; }
.panel, .wk-box, .tl-detail, .run {
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow);
}
.ov-wiki { border-top-color: var(--edge); }
.panel dl, .kp-h + * { border-color: var(--edge); }

/* results: hairline separators, a soft highlight under the pointer */
.results { display: grid; gap: 0; }
/* results stay flat, like a search engine's: no box, no hover card; the title's underline is the hover cue */
.res { padding: 18px 0; border-top: 0; }

/* people also ask: flat, a rule above and between the questions */
.paa { padding: 8px 0 0; background: none; border: 0; box-shadow: none; }
.paa-item { border-bottom-color: var(--edge); }
.paa-item:first-of-type { border-top: 1px solid var(--edge); }

/* the SPARQL tab: each query on its own card */
.run { border-radius: 14px; padding: 14px 16px; }

/* search box: raised in the header, more so while typing */
.serpmode form.q { background: var(--surface); border-color: var(--edge); box-shadow: var(--shadow); }
.serpmode form.q:focus-within { border-color: var(--edge); box-shadow: var(--shadow-lift); }

/* header and tabs: a separator under the header once the page is a results page */
.serpmode .top { padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.tabs { border-bottom-color: var(--edge); }

/* suggestion chips and the pills read as buttons */
.sug { background: var(--surface); border-color: var(--edge); box-shadow: 0 1px 2px rgba(30, 35, 40, .05); }
.sug:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.pill[aria-pressed="false"] { background: var(--surface); border-color: var(--edge); }
.pill[aria-pressed="true"] { box-shadow: 0 4px 12px -4px rgba(30, 35, 40, .35); }
.pills a.pill { background: var(--surface); border-color: var(--edge); }

/* wiki: the Wikipedia summary and the article body */
.wk-ext { background: var(--surface-2); border-color: var(--edge); }
.wk-works li { padding: 8px 0; }

/* ---------------------------------------------------------------- overview, search-engine style
   The answer spans the top of the results page: text on the left, a card of its sources on the right,
   a citation chip after the answer, a fold with "Show more" for long answers, and a rule under it all.
   Results and the knowledge panel start below the rule. */
.serp { grid-template-areas: "ov ov" "main panel"; }
.overview { grid-area: ov; display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 400px); gap: 20px 56px; align-items: start;
  border: 0; border-radius: 0; padding: 4px 0 28px; border-bottom: 1px solid var(--edge); background: none; box-shadow: none; }
.serp-main { grid-area: main; } .panel { grid-area: panel; }
.ov-h { display: flex; align-items: center; gap: 10px; font: 500 15px var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 14px; }
.ov-h::before { content: none; }
.ov-spark { font-size: 20px; line-height: 1; background: linear-gradient(135deg, var(--accent), #8f5cf6 60%, #e85a9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-body { position: relative; }
.ov-body.folded { max-height: var(--fold, 300px); overflow: hidden; }
.ov-body.folded::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.ov-ans .answer { display: inline; font: 400 19px/1.65 var(--f-sans); letter-spacing: -.005em; max-width: none; }
.ov-ans { max-width: 66ch; }
.ov-ans .answer code { font-family: var(--f-mono); font-size: .85em; overflow-wrap: anywhere; }
.ov-cite { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: 2px; padding: 2px 10px; border: 0; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 12.5px; color: var(--muted); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.ov-cite:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ov-cite .fav { width: 18px; height: 18px; font-size: 10px; }
.ov-wiki { max-width: 66ch; margin-top: 18px; padding-top: 0; border-top: 0; }
.ov-wiki:empty { display: none; }
.ov-wiki p { font-size: 16.5px; line-height: 1.65; }
.ov-more { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--edge)); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .2s, box-shadow .2s; }
.ov-more:hover { box-shadow: var(--shadow); }
.ov-chev { color: var(--accent); transition: transform .25s; }
.ov-more[aria-expanded="true"] .ov-chev { transform: rotate(180deg); }

.ov-sources:empty { display: none; }
.ov-sources { display: grid; border: 1px solid var(--edge); border-radius: 22px; padding: 6px 20px; background: var(--surface); box-shadow: var(--shadow); }
.src { display: grid; gap: 5px; padding: 14px 0; border-top: 1px solid var(--edge); color: inherit; }
.src:first-child { border-top: 0; }
.src:hover .src-t { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.src-site { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); min-width: 0; }
.src-site .fav { width: 20px; height: 20px; font-size: 10px; flex: none; }
.src-t { font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.src-d { font-size: 13.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-all { border: 0; border-top: 1px solid var(--edge); background: none; padding: 12px 0 10px; color: var(--accent); font-size: 13.5px; cursor: pointer; text-align: left; }

@media (max-width: 980px) {
  .serp { grid-template-areas: "ov" "main" "panel"; grid-template-columns: minmax(0, 1fr); }
  .overview { grid-template-columns: minmax(0, 1fr); }
  .ov-sources { margin-top: 0; }
}

/* ---------------------------------------------------------------- wiki pages, encyclopedia-style
   Contents in a sticky left column (with hide), the title over a tab row, a "From…" line, then the
   article with its infobox floated right: a header band, a type band and fact rows. Our type and colours. */
.wk-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1240px; }
.wk-contents { position: sticky; top: 8px; max-height: calc(100svh - 190px); overflow-y: auto; scrollbar-width: thin; margin-top: 98px; font-size: 14px; }
.wk-contents-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--edge); margin-bottom: 8px; }
.wk-hide { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); border-radius: 6px; padding: 2px 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.wk-contents-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wk-contents-list a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--accent); line-height: 1.35; }
.wk-contents-list .lvl3 a { padding-left: 22px; font-size: 13.5px; }
.wk-contents-list a.on { color: var(--ink); font-weight: 500; background: var(--surface); }
.wk-center { min-width: 0; }
/* no contents list (a short or generated page): the article takes the whole width instead of the list's column */
.wk-layout:has(> .wk-contents[hidden]) { grid-template-columns: minmax(0, 1fr); }
.wk-layout h1 { margin: 8px 0 0; padding-bottom: 6px; }
.wk-tabs { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--edge); font-size: 14.5px; }
.wk-tabs > div { display: flex; gap: 18px; }
.wk-tabs span, .wk-tabs a, .wk-tabs button { padding: 8px 0 7px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--accent); cursor: pointer; margin-bottom: -1px; font: inherit; }
.wk-tabs .on { color: var(--ink); border-bottom-color: var(--ink); cursor: default; }
.wk-from { font-size: 13.5px; color: var(--muted); margin: 10px 0 14px; padding: 0; border: 0; }
.wk-hatnote { font-style: italic; color: var(--muted); font-size: 14.5px; padding: 0 0 14px 22px; }
.wk-layout .wk-body { max-width: none; }
.wk-layout .wk-body > p, .wk-layout .wk-body > ul, .wk-layout .wk-body > ol, .wk-layout .wk-body > .wk-ext { max-width: 78ch; }
.wk-layout .wk-body h2 { clear: none; font: 400 26px/1.25 var(--f-sans); border-bottom-color: var(--edge); }

/* infobox */
.wk-layout .wk-box { float: right; clear: right; width: 320px; margin: 0 0 20px 32px; padding: 0; gap: 0; overflow: hidden; border-radius: 16px; }
.wk-layout .wk-box-h { padding: 14px 18px 4px; text-align: center; font-size: 19px; font-weight: 500; }
.wk-layout .wk-box-type { margin: 10px 0 0; padding: 7px 18px; text-align: center; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); font: 500 13px var(--f-sans); text-transform: none; letter-spacing: 0; }
.wk-layout .wk-box table { width: 100%; }
.wk-layout .wk-box th { padding: 8px 10px 8px 18px; border-top-color: var(--edge); font-weight: 500; color: var(--ink); width: 34%; }
.wk-layout .wk-box td { padding: 8px 18px 8px 0; border-top-color: var(--edge); }
.wk-layout .wk-box-links { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--edge); justify-content: center; }

/* boxes beside the infobox stop at its edge instead of running under it */
.wk-layout .wk-ext, .wk-layout .wk-table, .wk-layout pre { display: flow-root; overflow: auto; }
.wk-layout .wk-back { clear: both; }

@media (max-width: 1100px) {
  .wk-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wk-contents { position: static; max-height: none; margin-top: 0; order: 2; margin: 0 0 20px; border: 1px solid var(--edge); border-radius: 14px; padding: 10px 12px; background: var(--surface); }
  .wk-center { display: contents; }
  .wk-center > * { order: 1; }
  .wk-center > .wk-body { order: 3; }
}
@media (max-width: 720px) {
  .wk-layout .wk-box { float: none; width: auto; margin: 0 0 20px; }
}

/* wiki index search: pages about the words (text + graph), then titles containing them */
.wk-found { margin: 8px 0 10px; }
.wk-found h2, .wk-titles-h { font: 400 22px var(--f-sans); margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--edge); }
.wk-found h2 span { font: 400 12px var(--f-mono); color: var(--muted); }
.wk-hits { list-style: none; margin: 0; padding: 0; display: grid; max-width: 820px; }
.wk-hits li { padding: 12px 0; border-bottom: 1px solid var(--edge); display: grid; gap: 3px; }
.wk-hit-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; }
.wk-hit-type { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wk-hits p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.wk-hit-why { font-size: 13px; color: var(--muted); }
.wk-hit-more { margin-top: 10px; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 14.5px; }
.wk-group h2.dim { font-size: 15px; color: var(--muted); }

.answer.ans-in { animation: vt-fade .25s ease-out both; }
@media (prefers-reduced-motion: reduce) { .answer.ans-in { animation: none; } }

/* the details under a short answer (the introduction) */
.ov-detail { margin: 0; display: grid; gap: 10px; max-width: 66ch; }
.ov-detail div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.ov-detail dt { font: 400 12px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 4px; }
.ov-detail dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.ov-detail .linked dt { padding-top: 2px; }
.ov-detail .linked dt a { font: 500 15.5px/1.45 var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--accent); text-decoration: none; }
.ov-detail .linked dt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-detail div.linked { grid-template-columns: minmax(150px, 34%) 1fr; }
@media (max-width: 600px) { .ov-detail div, .ov-detail div.linked { grid-template-columns: 1fr; gap: 2px; } }

/* generated pages: how each work used the thing, in its article's own words */
.wk-quote { flex-basis: 100%; margin: 4px 0 2px; padding-left: 12px; border-left: 2px solid var(--edge); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.wk-quote-src { font-size: 12.5px; color: var(--muted); }
.wk-quote-src:hover { color: var(--accent); }

/* buttons under an answer (the CV) */
.ov-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-action { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); box-shadow: var(--shadow); font-size: 14.5px; color: var(--ink); }
.ov-action.primary { background: var(--pill); color: var(--bg); border-color: var(--pill); }
.ov-action:hover { color: inherit; box-shadow: var(--shadow-lift); }
.ov-action.primary:hover { color: var(--bg); }   /* (a dark button keeps its light text on hover) */

/* helpful? up / down under the answer */
.ov-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.ov-vote [data-vote] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 4px 12px 4px 10px; font: inherit; cursor: pointer; line-height: 1.4; transition: border-color .15s, background-color .15s, color .15s; }
.ov-vote [data-vote]:hover { color: var(--ink); }
.ov-vote [data-vote][aria-pressed="true"] { color: var(--accent); }
.ov-vote [data-vote]:hover { border-color: var(--ink); }
.ov-vote [data-vote][aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ov-note-form { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.ov-reasons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.ov-reasons button { border: 1px solid var(--edge); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ov-reasons button:hover { color: var(--ink); border-color: var(--ink); }
.ov-reasons button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ov-note-form input { flex: 1 1 240px; min-width: 0; border: 1px solid var(--edge); background: var(--surface); border-radius: 999px; padding: 6px 14px; font: inherit; color: var(--ink); outline: none; }
.ov-note-form input:focus { border-color: var(--ink); }
.ov-note-form button { border: 0; background: var(--pill); color: var(--bg); border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer; }
.ov-thanks { color: var(--accent); }

/* ---------------------------------------------------------------- pictures
   Result thumbnails, the Images tab (justified rows + a preview beside them), the knowledge panel's
   collage and the wiki's infobox picture and gallery. Pictures come from his repositories. */
.res { position: relative; }
/* a result with a picture: the text on the left, the thumbnail on the right beside the title and snippet */
.res:has(> .res-img) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.res:has(> .res-img) > :not(.res-img) { grid-column: 1; }
.res-img { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 4px; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid var(--edge); background: var(--surface); }
.res-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .res-img { width: 72px; height: 72px; } .res:has(> .res-img) { column-gap: 12px; } }

.imgview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding-left: var(--indent); }
.imgview:has(.img-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
.img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.img-tile { position: relative; height: 170px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); min-width: 120px; }
.img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.img-tile:hover img { transform: scale(1.03); }
.img-tile.on { box-shadow: 0 0 0 3px var(--accent); }
.img-cap { position: absolute; inset: auto 0 0 0; padding: 18px 10px 7px; background: linear-gradient(transparent, rgba(0,0,0,.62)); color: #fff; font-size: 12px; line-height: 1.3; text-align: left; opacity: 0; transition: opacity .2s; }
.img-cap b { display: block; font-weight: 500; font-size: 12.5px; }
.img-tile:hover .img-cap, .img-tile:focus-visible .img-cap, .img-tile.on .img-cap { opacity: 1; }
.img-fill { flex: 999 1 0; }
.img-none { color: var(--muted); max-width: 60ch; } .img-none a { color: var(--accent); }
.img-preview { position: sticky; top: 8px; max-height: calc(100svh - 190px); overflow-y: auto; scrollbar-width: thin; background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px 18px; display: grid; gap: 8px; }
.img-x { position: absolute; top: 8px; right: 10px; border: 0; background: var(--surface); width: 30px; height: 30px; border-radius: 50%; font-size: 20px; color: var(--muted); cursor: pointer; z-index: 1; }
.img-x:hover { color: var(--ink); }
.img-preview { position: sticky; }
.img-big { display: block; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--edge); margin-top: 26px; }
.img-big img { display: block; width: 100%; height: auto; max-height: 52svh; object-fit: contain; }
.img-site { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.img-site .fav { width: 20px; height: 20px; font-size: 10px; flex-shrink: 0; }
.img-url { min-width: 0; overflow-wrap: anywhere; }
.img-preview h3 { margin: 0; font: 500 18px/1.3 var(--f-sans); }
.img-of { margin: 0; font-size: 15px; } .img-of a { color: var(--accent); }
.img-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.img-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.img-more > div:first-child { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 6px; }
.img-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.img-strip button { flex: none; width: 76px; height: 56px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--edge); }
.img-strip button.on { box-shadow: 0 0 0 2px var(--accent); }
.img-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .imgview:has(.img-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .img-preview { position: fixed; inset: auto 0 0 0; max-height: 78svh; border-radius: 18px 18px 0 0; z-index: 20; }
  .img-tile { height: 120px; }
}

.kp-pics { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; margin: -4px 0 6px; height: 170px; }
.kp-pics.n2 { grid-template-columns: 2fr 1fr; }
.kp-pics.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.kp-pics.n3 button:first-child { grid-row: 1 / 3; }
.kp-pics button { padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--bg); min-height: 0; }
.kp-pics img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.kp-pics button:hover img { transform: scale(1.04); }

.wk-layout .wk-box-img { display: block; margin: 10px 14px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); background: var(--bg); }
.wk-layout .wk-box-img img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.wk-box-cap { font-size: 12.5px; color: var(--muted); text-align: center; padding: 6px 18px 0; }
.wk-gallery { clear: both; }
.wk-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.wk-gal figure { margin: 0; }
.wk-gal img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--edge); background: var(--surface); }
.wk-gal figcaption { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.4; }

.src:has(.src-img) { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 14px; }
.src:has(.src-img) > :not(.src-img) { grid-column: 1; }
.src-img { grid-column: 2; grid-row: 1 / span 3; width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--edge); align-self: center; }

/* nothing in an article waits below the infobox: figures, tables and code blocks narrow to the space beside
   it (a block formatting context shrinks next to a float), and the infobox picture stays modest */
.wk-layout .wk-body figure { display: flow-root; margin: 6px 0 20px; }
.wk-layout .wk-body figure img { max-height: 340px; width: auto; max-width: 100%; object-fit: contain; }
.wk-layout .wk-box-img img { max-height: 190px; }
.wk-layout .wk-body > h2, .wk-layout .wk-body > h3 { display: flow-root; }

/* ---------------------------------------------------------------- suggestions under the search box */
form.q { position: relative; }
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: var(--shadow-lift); padding: 6px 0; font: 400 15.5px/1.35 var(--f-sans); letter-spacing: 0; text-transform: none; max-height: min(460px, 70svh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ac-item { display: flex; align-items: center; gap: 14px; padding: 8px 18px; cursor: pointer; color: var(--ink); }
.ac-item.on { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.ac-ico { flex: none; display: grid; place-items: center; width: 20px; color: var(--muted); }
.ac-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-text b { font-weight: 600; }
.ac-type { margin-left: 10px; font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ac-recent .ac-text { color: #6a3fb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ac-recent .ac-text { color: #b79cf0; } }
.ac-del { flex: none; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 50%; cursor: pointer; opacity: 0; }
.ac-item:hover .ac-del, .ac-item.on .ac-del { opacity: 1; }
.ac-del:hover { color: var(--ink); }
/* on the start page the box sits under the big question line */
.ask:not(.asked) .ac { top: calc(100% + 14px); max-width: 760px; }
/* in the header, the box opens as one piece with the search field */
.serpmode form.q:has(.ac:not([hidden])) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.serpmode .ac { top: calc(100% - 1px); border-top: 1px solid var(--edge); border-radius: 0 0 18px 18px; left: -1px; right: -1px; }
/* the search form is its own layer (view transitions), so lift it above the page while suggestions are open */
form.q:has(.ac:not([hidden])) { z-index: 60; }
.top:has(.ac:not([hidden])) { position: relative; z-index: 60; }

/* ---------------------------------------------------------------- header: apps launcher and Contact
   The start page keeps Ask · Timeline · Wiki in the middle; results pages keep only the name, the search
   box, the apps grid and Contact. Everything else lives in the apps panel. */
.tr { display: flex; justify-content: flex-end; align-items: start; gap: 18px; }
.top .tr .right { text-align: right; }
.hacts { position: relative; display: flex; align-items: center; gap: 8px; view-transition-name: hacts; }
.apps-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.apps-btn svg { fill: currentColor; }
.apps-btn:hover, .apps-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.contact-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: var(--pill); color: var(--bg); font: 500 13px var(--f-sans); text-transform: none; letter-spacing: 0; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(30, 35, 40, .35); }
.contact-btn:hover { color: var(--bg); filter: brightness(1.15); }
.apps { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 300px; padding: 14px; background: var(--surface); border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow-lift); text-transform: none; letter-spacing: 0; }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border: 0; background: none; border-radius: 14px; color: var(--ink); font: 400 13px var(--f-sans); cursor: pointer; text-align: center; }
.app:hover, .app:focus-visible { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--ink); }
.app-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; }
.app-ask { background: var(--pill); color: var(--bg); } .app-timeline { background: #3A56E8; } .app-wiki { background: #5B6B5A; }
.app-mail { background: #C2410C; } .app-cv { background: #7C3AED; } .app-stats { background: #0F766E; } .app-graph { background: #0F766E; } .app-brief { background: #B45309; }
.top:has(.apps:not([hidden])) { position: relative; z-index: 70; }

/* results pages: no pills or tagline in the header */
.serpmode .pills, .serpmode .tr .right { display: none; }
.serpmode .top { grid-template-columns: auto minmax(0, 760px) 1fr; }
@media (max-width: 1320px) { .serpmode .top { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 980px) { .serpmode .top { grid-template-columns: 1fr auto; } .serpmode .tr { grid-column: 2; grid-row: 1; } }
@media (max-width: 860px), (max-height: 600px) {
  .serpmode .tr { grid-column: 2; grid-row: 1; }
  .top:not(.x) .tr { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .tr .right { display: none; }
  .contact-btn { padding: 8px 10px; } .contact-btn span { display: none; }
  .apps { right: -6px; width: min(300px, calc(100vw - 32px)); }
}

/* ---------------------------------------------------------------- Mail: a compose window */
.mailview { padding-left: var(--indent); max-width: calc(var(--indent) + 820px); width: 100%; }
.mail-h h1 { font: 300 clamp(30px, 3.4vw, 42px)/1.1 var(--f-sans); letter-spacing: -.03em; margin: 6px 0 6px; }
.mail-h p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.mail-card { background: var(--surface); border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.mail-row { display: flex; align-items: center; gap: 12px; padding: 4px 20px; min-height: 50px; border-bottom: 1px solid var(--edge); }
.mail-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mail-row label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mail-row label.grow { flex: 1; }
.mail-k { flex: none; width: 58px; font-size: 14px; color: var(--muted); }
.mail-k.sr { width: auto; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mail-row input:not([type=radio]) { flex: 1; min-width: 0; border: 0; background: none; font: 400 15px var(--f-sans); color: var(--ink); outline: none; padding: 12px 0; }
.mail-to { font-size: 15px; color: var(--muted); } .mail-to b { color: var(--ink); font-weight: 500; }
.mail-topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--edge); font-size: 13.5px; color: var(--muted); cursor: pointer; background: var(--bg); }
.chip input:checked + span { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mail-card textarea { display: block; width: 100%; border: 0; outline: none; resize: vertical; min-height: 220px; padding: 16px 20px; background: none; font: 400 15.5px/1.6 var(--f-sans); color: var(--ink); }
.mail-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.mail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--edge); }
.mail-send { border: 0; background: var(--accent); color: var(--surface); border-radius: 999px; padding: 10px 26px; font: 500 15px var(--f-sans); cursor: pointer; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.mail-send:disabled { opacity: .6; cursor: default; }
.mail-msg { font-size: 14px; color: var(--muted); } .mail-msg.err { color: #C2410C; font-family: var(--f-sans); }
.mail-card [aria-invalid="true"] { box-shadow: inset 0 -2px 0 #C2410C; } .mail-card textarea[aria-invalid="true"] { box-shadow: inset 2px 0 0 #C2410C; } .mail-msg a { color: var(--accent); }
.mail-alt { margin-left: auto; font-size: 13.5px; color: var(--muted); } .mail-alt a { color: var(--accent); }
.mail-sent { display: grid; justify-items: start; gap: 8px; padding: 30px 0; color: var(--ink); }
.mail-sent svg { color: var(--accent); }
.mail-sent h1 { font: 300 36px/1.1 var(--f-sans); letter-spacing: -.03em; margin: 0; }
.mail-sent p { margin: 0 0 10px; color: var(--muted); }
@media (max-width: 600px) { .mail-row.two { grid-template-columns: 1fr; } .mail-row { padding: 4px 14px; } .mail-alt { margin-left: 0; } }

/* start page balance: the suggestion chips step aside while the box's suggestions are open (they'd peek out
   beside it), recent searches read in the normal ink colour, and the tagline only shows where it fits */
.ask:not(.asked):has(form.q.ac-open) .sugs { visibility: hidden; }
.ac-recent .ac-text { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ac-recent .ac-text { color: var(--ink); } }
.ask:not(.asked) .ac { max-width: min(760px, 100%); }
@media (max-width: 1240px) { .frame:not(.serpmode) .tr .right { display: none; } }
/* the image preview's column never grows past the card: the strip of other pictures scrolls inside it */
.img-preview { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.img-preview > * { min-width: 0; max-width: 100%; }
.img-preview h3, .img-desc { overflow-wrap: anywhere; }
.img-big img { max-width: 100%; }

.app[data-app="pdf"] { } .app-pdf { background: #475569; }
.apps-grid:has(> :only-child) { grid-template-columns: 1fr; }
.apps:has(.apps-grid > :only-child) { width: 116px; }
.apps-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.apps:has(.apps-grid > :nth-child(2):last-child) { width: 210px; }
.app:focus:not(:focus-visible) { outline: none; }

/* timeline: a work is a line from its first commit to its last */
.tl-span { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; opacity: .45; cursor: pointer; transition: opacity .2s; }
.tl-span.f { opacity: .8; stroke-width: 2.6; }
.tl-span:hover, .tl-span.sel { opacity: 1; stroke: var(--ink); }
.tl-span.dim { opacity: .08; }
.tl-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.tl-key { display: inline-flex; align-items: center; gap: 6px; }
.tl-key svg { overflow: visible; }
.tl-key .tl-span { opacity: .6; }
.tl-list { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; border-top: 1px solid var(--line); }
.tl-list li { border-bottom: 1px solid var(--line); }
.tl-list .tl-chip { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px; cursor: pointer; font-size: 14px; }
.tl-list .tl-chip span { min-width: 0; }
.tl-list .tl-chip.f span { font-weight: 500; }
.tl-list .tl-chip.f span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--accent); margin: 0 8px 1px 0; vertical-align: middle; box-sizing: border-box; }
.tl-list .tl-chip small { flex: none; font: 400 11px var(--f-mono); color: var(--muted); margin: 0; white-space: nowrap; }
.tl-list .tl-chip:hover span { color: var(--accent); }
.tl-list .tl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg#tl :focus:not(:focus-visible) { outline: none; }
.apps-btn:focus:not(:focus-visible) { outline: none; }
.apps-btn[aria-expanded="true"] { outline: none; }

/* start page: a plain CV link; results pages: the apps menu (which also holds CV) */
.cv-link { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--faint); color: var(--ink); font: 500 13px var(--f-sans); text-transform: none; letter-spacing: 0; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.cv-link:hover { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.frame:not(.serpmode) .apps-btn, .frame:not(.serpmode) .apps, .frame.serpmode .cv-link { display: none; }

/* timeline: years are filters */
.tl-year { font: 400 11px var(--f-mono); fill: var(--muted) !important; cursor: pointer; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.tl-year:hover, .tl-year.on { fill: var(--accent) !important; text-decoration: underline; }
.tl-yband.on { opacity: .07; }
.tl-rolelink { font: inherit; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 0; border-bottom: 1px solid var(--faint); cursor: pointer; text-align: left; }
.tl-rolelink:hover { color: var(--accent); border-color: var(--accent); }
.tl-when { font: 400 11px var(--f-mono); color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.tlm-year button { all: unset; cursor: pointer; }
.tlm-year button:hover { color: var(--accent); }
.tlm-year button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* easter eggs (src/eggs.js) */
html.egg-askew .frame { transform: rotate(1deg); transform-origin: 50% 0; }
html.egg-blink #answer { animation: egg-blink 1s steps(1) infinite; }
@keyframes egg-blink { 50% { visibility: hidden; } }
html.egg-1998 { --bg: #c0c0c0; --ink: #000; --muted: #222; --faint: #808080; --line: #808080; --pill: #000080; --accent: #0000ee; --surface: #fff; --surface-2: #fff; --edge: #000; --shadow: none; --shadow-lift: none; color-scheme: light; }
html.egg-1998 body, html.egg-1998 body * { font-family: "Times New Roman", Times, serif !important; border-radius: 0 !important; box-shadow: none !important; letter-spacing: 0 !important; }
html.egg-1998 a { color: #0000ee; text-decoration: underline; }
html.egg-1998 form.q, html.egg-1998 .panel, html.egg-1998 .res { border: 2px inset #fff !important; background: #fff !important; }
.egg-construction { font-size: 14px; color: var(--ink); background: #ffff00; border: 2px dashed #000; padding: 6px 10px; display: inline-block; }
.egg-code { font: 400 13px/1.55 var(--f-mono); background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 4px 0 0; white-space: pre; }
.egg-code .c { color: var(--muted); }
#answer i a { font-style: italic; }
html.egg-1998 .contact-btn, html.egg-1998 .contact-btn * { color: #fff !important; }

/* spelling: "Showing results for …" */
.spell { margin: 2px 0 14px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.spell a { color: var(--accent); }
.spell a:hover { text-decoration: underline; }
.spell b i { font-weight: 600; }
.spell small { font-size: 13.5px; }

/* the wiki page about this site: the site measuring itself */
.wk-live { margin: 6px 0 22px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow); display: grid; gap: 12px; }
.wk-live-h { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
/* the pulse is a ring that scales and fades (transform and opacity run on the GPU, not every frame on the page) */
.wk-live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22a06b; }
.wk-live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: color-mix(in srgb, #22a06b 30%, transparent); animation: wk-pulse 2s ease-out infinite; will-change: transform, opacity; }
@keyframes wk-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wk-live-dot::after { animation: none; } }
.wk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.wk-stat { display: grid; gap: 2px; }
.wk-stat b { font: 300 30px/1.1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); }
.wk-stat span { font-size: 12.5px; color: var(--muted); }
.wk-live-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--edge); }
.wk-live-ask button { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--faint); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.wk-live-ask button:hover { border-color: var(--accent); color: var(--accent); }
.wk-inf { display: block; font: 400 10px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-top: 2px; cursor: help; }
.run-inf { color: var(--accent); }

/* ---------- the logo: a "cj" monogram drawn as a graph (src/brand.js) ---------- */
.home { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.mark { width: 26px; height: 26px; flex: none; overflow: visible; --mk-tile: var(--ink); --mk-ink: var(--bg); --mk-acc: #7D92FF; --mk-deco: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark { --mk-acc: #3A56E8; } }
:root[data-theme="dark"] .mark { --mk-acc: #3A56E8; }
.mk-t { fill: var(--mk-tile); transition: fill .3s; }
.mk-l { stroke: var(--mk-ink); }
.mk-n { fill: var(--mk-ink); }
.mk-e { stroke: var(--mk-acc); stroke-dasharray: 15; stroke-dashoffset: 0; }
.mk-d { fill: var(--mk-acc); transform-box: fill-box; transform-origin: center; }
.mk-deco { fill: var(--mk-deco); stroke: var(--mk-deco); stroke-width: 1.6; stroke-linecap: round; }
.mk-deco .mk-stem { fill: none; stroke: #3E9B4F; stroke-width: 2.2; }
/* doodles: the mark dresses up on some days */
.home[data-doodle] .mark { cursor: pointer; animation: mk-hello 1.2s ease-in-out .6s 1; }
@keyframes mk-hello { 30% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.08); } }
.home[data-doodle="halloween"] .mark { --mk-tile: #2A1B3D; --mk-ink: #F6EFE3; --mk-acc: #F28C28; --mk-deco: #F6EFE3; }
.home[data-doodle="newyear"] .mark { --mk-tile: #1E2328; --mk-ink: #F2C94C; --mk-acc: #FFFFFF; --mk-deco: #F2C94C; }
.home[data-doodle="songkran"] .mark { --mk-tile: #0E6BA8; --mk-ink: #FFFFFF; --mk-acc: #8FE3FF; --mk-deco: #8FE3FF; }
.home[data-doodle="sitebirthday"] .mark { --mk-tile: #3A56E8; --mk-ink: #FFFFFF; --mk-acc: #FF8FB1; --mk-deco: #FFD166; }
.home[data-doodle="holidays"] .mark { --mk-tile: #14532D; --mk-ink: #FFFFFF; --mk-acc: #E5484D; --mk-deco: #F2C94C; }

/* the name: no hover effect, only the name (the focus ring shows for the keyboard alone) */
.home, .home:hover { color: var(--ink); }
.home:focus { outline: none; }
.home:focus-visible .brand-name { text-decoration: underline; text-underline-offset: 4px; }
.brand-name span { display: inline-block; }

/* doodle days: the name takes the doodle's form */
.home[data-doodle] .brand-name { line-height: 1; }
@media (prefers-reduced-motion: reduce) { .home[data-doodle] .brand-name span { animation: none !important; } }
/* Halloween: a creepy hand, letters that flicker like a failing bulb and shiver now and then */
.home[data-doodle="halloween"] .brand-name { font-family: "Creepster", var(--f-sans); font-size: 1.40em; letter-spacing: .06em; color: #E8771E; }
.home[data-doodle="halloween"] .brand-name span { animation: dd-flicker 5s steps(1) infinite calc(var(--i) * .37s), dd-shiver 3.4s ease-in-out infinite calc(var(--i) * .11s); }
@keyframes dd-flicker { 0%, 100% { opacity: 1; } 3% { opacity: .25; } 5% { opacity: 1; } 7% { opacity: .5; } 9% { opacity: 1; } }
@keyframes dd-shiver { 0%, 86%, 100% { transform: none; } 89% { transform: translateY(1px) rotate(-4deg); } 93% { transform: translateY(-1px) rotate(3deg); } }
/* New Year: engraved capitals in gold, with light sweeping across */
.home[data-doodle="newyear"] .brand-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.13em; letter-spacing: .08em;
  background: linear-gradient(100deg, #9A7420 20%, #F7E08A 40%, #C9971E 55%, #9A7420 75%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dd-shine 3.2s linear infinite; }
/* (letters stay inline so the gold gradient, clipped to the text, runs through all of them) */
.home[data-doodle="newyear"] .brand-name span { display: inline; animation: dd-fade .6s ease-out both calc(var(--i) * .06s); }
@keyframes dd-shine { to { background-position: -250% 0; } }
@keyframes dd-fade { from { opacity: 0; } }
/* Songkran: a round, friendly hand in water blue, the letters riding a wave */
.home[data-doodle="songkran"] .brand-name { font-family: "Itim", var(--f-sans); font-size: 1.33em; text-transform: none; letter-spacing: .02em; color: #0E6BA8; }
.home[data-doodle="songkran"] .brand-name span { animation: dd-wave 2.2s ease-in-out infinite calc(var(--i) * .09s); }
@keyframes dd-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); color: #2AA5D8; } }
/* the site's birthday: a bubbly hand, each letter its own party colour, bouncing in turn */
.home[data-doodle="sitebirthday"] .brand-name { font-family: "Fredoka", var(--f-sans); font-weight: 600; font-size: 1.27em; text-transform: none; }
.home[data-doodle="sitebirthday"] .brand-name span { animation: dd-bounce 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite calc(var(--i) * .12s); }
.home[data-doodle="sitebirthday"] .brand-name span:nth-child(4n+1) { color: #3A56E8; }
.home[data-doodle="sitebirthday"] .brand-name span:nth-child(4n+2) { color: #E8477A; }
.home[data-doodle="sitebirthday"] .brand-name span:nth-child(4n+3) { color: #E59A0C; }
.home[data-doodle="sitebirthday"] .brand-name span:nth-child(4n) { color: #1E9E6A; }
@keyframes dd-bounce { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(-6px) scale(1.1); } }
/* the holidays: a frosty hand, red and green in turn, twinkling */
.home[data-doodle="holidays"] .brand-name { font-family: "Mountains of Christmas", serif; font-weight: 700; font-size: 1.47em; text-transform: none; }
.home[data-doodle="holidays"] .brand-name span:nth-child(odd) { color: #C8102E; }
.home[data-doodle="holidays"] .brand-name span:nth-child(even) { color: #14713D; }
.home[data-doodle="holidays"] .brand-name span { animation: dd-twinkle 2.6s ease-in-out infinite calc(var(--i) * .2s); }
@keyframes dd-twinkle { 0%, 100% { transform: rotate(0); filter: none; } 50% { transform: rotate(-6deg) translateY(-1px); filter: drop-shadow(0 0 4px rgba(242, 201, 76, .9)); } }


/* confetti (the "happy birthday" easter egg) */
.confetti { position: fixed; top: -12px; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 100; }

/* the name is the site's name: bigger than the rest of the header (same weight) */
.home { font-size: 20px; letter-spacing: .015em; white-space: nowrap; }
.home .mark { width: 1.6em; height: 1.6em; }
.home { gap: .55em; }
.serpmode .top .home { font-size: 17px; }
@media (max-width: 600px) { .home, .serpmode .top .home { font-size: 16px; } }


/* comparisons: two things side by side */
.ov-compare { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 2px; table-layout: fixed; }
.ov-compare th, .ov-compare td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.ov-compare thead th { font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--faint); }
.ov-compare thead th:first-child { width: 22%; }
.ov-compare tbody th { font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
@media (max-width: 600px) { .ov-compare { font-size: 13px; } .ov-compare th, .ov-compare td { padding: 6px 6px; } .ov-compare thead th:first-child { width: 26%; } }

/* ---------- search tools (src/tools.js) ---------- */
.tabrow { display: flex; align-items: stretch; min-width: 0; }   /* (else its tabs, which never wrap, would widen the page on phones) */
.tabrow .tabs { flex: 1; min-width: 0; }
.tools-btn { flex: none; border: 0; border-bottom: 1px solid var(--edge); background: none; padding: 10px 2px 9px 14px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tools-btn:hover, .tools-btn[aria-expanded="true"], .tools-btn.on { color: var(--ink); }
.tools-btn span { font-size: 10px; margin-left: 2px; }
.tools-menu { position: fixed; z-index: 40; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 6px 0; display: grid; max-height: 70vh; overflow-y: auto; }
.tm-row { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; font-size: 15px; color: var(--ink); cursor: pointer; }
.tm-row:hover, .tm-row:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tm-caret { font-size: 11px; color: var(--muted); }
.tm-opts { display: grid; padding: 2px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tm-opt { all: unset; box-sizing: border-box; padding: 7px 18px 7px 34px; font-size: 14px; color: var(--muted); cursor: pointer; position: relative; }
.tm-opt:hover, .tm-opt:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.tm-opt.on { color: var(--ink); font-weight: 500; }
.tm-opt.on::before { content: "✓"; position: absolute; left: 14px; color: var(--accent); }
.tm-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px 4px 34px; font-size: 13px; color: var(--muted); }
.tm-custom span { width: 100%; }
.tm-custom select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--faint); background: var(--bg); color: var(--ink); }
.tm-go { font: inherit; border: 0; border-radius: 8px; padding: 5px 12px; background: var(--pill); color: var(--bg); cursor: pointer; }
.tm-stats { border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 18px 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 0; }
.tool-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; padding: 5px 10px 5px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); cursor: pointer; }
.tool-chip span { font-size: 15px; line-height: 1; }
.tool-chip:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tool-clear { font: inherit; font-size: 13.5px; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.res-none { color: var(--muted); font-size: 15px; padding: 18px 0; }
/* advanced search */
dialog.adv { border: 1px solid var(--edge); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); width: min(560px, calc(100vw - 32px)); }
dialog.adv::backdrop { background: rgba(20, 22, 21, .35); }
.adv-form { display: grid; gap: 12px; padding: 24px 26px 22px; }
.adv-form h2 { margin: 0; font-weight: 400; font-size: 24px; letter-spacing: -.01em; }
.adv-sub { margin: -6px 0 6px; color: var(--muted); font-size: 14px; }
.adv-form label { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; }
.adv-form label > span:first-child { color: var(--muted); }
.adv-form input:not([type=checkbox]), .adv-form select { font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--faint); background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; }
.adv-form input:focus, .adv-form select:focus { outline: none; border-color: var(--accent); }
.adv-years { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.adv-check { grid-template-columns: auto 1fr !important; justify-content: start; }
.adv-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.adv-cancel, .adv-go { font: inherit; font-size: 14px; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.adv-cancel { background: none; border: 1px solid var(--faint); color: var(--ink); }
.adv-go { background: var(--accent); border: 0; color: #fff; }
@media (max-width: 600px) { .adv-form label { grid-template-columns: 1fr; gap: 4px; } .adv-form { padding: 20px; } }
/* the menu and the filter bar set their own display, so [hidden] has to win explicitly */
.tools-menu[hidden], .tool-bar[hidden] { display: none; }

/* the spinning donut (src/eggs.js) */
.egg-donut-wrap { display: grid; gap: 8px; justify-items: start; }
.egg-donut { margin: 0; padding: 14px 16px; border-radius: 14px; background: #141615; color: #E9EBE6; line-height: 1.05;
  font: 400 min(13px, calc((100vw - 72px) / 64 / .6)) / 1.05 var(--f-mono); white-space: pre; overflow: hidden; max-width: 100%; }
.egg-donut-bar { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.egg-donut-pause { font: inherit; border: 1px solid var(--faint); background: none; color: var(--ink); border-radius: 999px; padding: 4px 14px; cursor: pointer; }

/* "I'm feeling lucky": the mood rolls on hover */
.sug.lucky { color: var(--ink); border-color: var(--faint); }
.sug.lucky:hover { border-color: var(--accent); color: var(--accent); }
/* inline-flex, not inline-block: a clipped inline-block sits on its bottom edge, an inline-flex box on its word's baseline,
   so the rolling word lines up with "I'm feeling" */
.lucky-roll { display: inline-flex; overflow: hidden; vertical-align: baseline; line-height: 1.3; height: 1.3em; }
.lucky-word { display: block; }
.lucky-word.in { animation: lucky-in .07s ease-out; }
@keyframes lucky-in { from { transform: translateY(-100%); } }

/* keyboard shortcuts (src/keys.js) */
.res.kb { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 8px; border-radius: 6px; }
.res .res-t:focus-visible { outline: none; text-decoration: underline; }
dialog.keys { border: 1px solid var(--edge); border-radius: 18px; padding: 22px 26px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); width: min(420px, calc(100vw - 32px)); }
dialog.keys::backdrop { background: rgba(20, 22, 21, .35); }
dialog.keys h2 { margin: 0 0 14px; font-weight: 400; font-size: 22px; }
dialog.keys dl { margin: 0; display: grid; gap: 8px; }
dialog.keys dl div { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
dialog.keys dd { margin: 0; font-size: 14.5px; color: var(--muted); }
kbd { font: 500 12.5px var(--f-mono); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--faint); border-bottom-width: 2px; background: var(--bg); color: var(--ink); }
.keys-close { margin-top: 16px; font: inherit; font-size: 14px; border: 1px solid var(--faint); background: none; color: var(--ink); border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.keys-hint kbd { font-size: 11px; padding: 0 6px; }
@media (hover: none) { .keys-hint { display: none; } }   /* phones have no keyboard shortcuts to show */

/* 2048 (src/game2048.js) */
.g2048 { display: grid; gap: 10px; width: min(360px, 100%); outline: none; }
.g-bar { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.g-bar b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.g-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 14px; background: #BBADA0; aspect-ratio: 1; touch-action: none; user-select: none; }
.g-cell { display: grid; aspect-ratio: 1; min-width: 0; min-height: 0; overflow: hidden; place-items: center; border-radius: 8px; background: rgba(238, 228, 218, .35); font: 600 clamp(15px, 6vw, 26px) var(--f-sans); color: #776E65; font-variant-numeric: tabular-nums; }
.g-cell.new { animation: g-pop .18s ease-out; }
@keyframes g-pop { from { transform: scale(.4); opacity: .3; } }
.g-cell.t1 { background: #EEE4DA; } .g-cell.t2 { background: #EDE0C8; }
.g-cell.t3 { background: #F2B179; color: #F9F6F2; } .g-cell.t4 { background: #F59563; color: #F9F6F2; }
.g-cell.t5 { background: #F67C5F; color: #F9F6F2; } .g-cell.t6 { background: #F65E3B; color: #F9F6F2; }
.g-cell.t7 { background: #EDCF72; color: #F9F6F2; font-size: clamp(14px, 5vw, 22px); } .g-cell.t8 { background: #EDCC61; color: #F9F6F2; font-size: clamp(14px, 5vw, 22px); }
.g-cell.t9 { background: #EDC850; color: #F9F6F2; font-size: clamp(14px, 5vw, 22px); } .g-cell.t10 { background: #EDC53F; color: #F9F6F2; font-size: clamp(12px, 4.4vw, 19px); }
.g-cell.t11 { background: #EDC22E; color: #F9F6F2; font-size: clamp(12px, 4.4vw, 19px); } .g-cell.t12 { background: #3C3A32; color: #F9F6F2; font-size: clamp(12px, 4.4vw, 19px); }
.g-msg { min-height: 1.2em; font-size: 14px; color: var(--ink); }
.g-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.g-actions button { font: inherit; border: 1px solid var(--faint); background: none; color: var(--ink); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.g-actions .g-auto { background: var(--pill); color: var(--bg); border-color: var(--pill); }

/* ---------- Touch targets (audit): footer links, small buttons and the search box reach 24px on phones ---------- */
@media (pointer: coarse) {
  .links a, .links button, #email, #ttl-link { display: inline-block; padding-block: 4px; min-height: 24px; min-width: 24px; text-align: center; box-sizing: border-box; }
  #keyshelp { display: none; }   /* shortcuts need a keyboard */
  .tabs [role=tab] { min-width: 28px; }
  .qclear { min-width: 28px; }
  .wk-crumb a, .mail-alt a { display: inline-block; padding-block: 4px; min-height: 24px; box-sizing: border-box; }
  .serpmode .q textarea { min-height: 28px; }
  .ov-cite, .wk-hide, .kp-link, .pg-n { min-height: 28px; min-width: 28px; }
  .res-url { display: inline-block; padding-block: 3px; }
  .mail-card input[type=checkbox] { width: 20px; height: 20px; }
}

/* ---------- Screen readers: hidden headings, the skip link ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; color: var(--bg); }
.stage:focus { outline: none; }

/* ---------- Language switch (footer) ---------- */
.langs { display: inline-flex; gap: 10px; }
.langs a { text-transform: none; }
.langs a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Thai and Japanese read better a little looser and without the Latin tracking */
:lang(th) .q textarea, :lang(ja) .q textarea { letter-spacing: -0.01em; }
:lang(th) body { line-height: 1.6; }

/* ---------- Start page on phones: a header, the three views as one control, a big two-line question with a line
   under it, suggestions as a list, a short footer. Read top to bottom, nothing floating in empty space. ---------- */
@media (max-width: 600px) {
  .frame:not(.serpmode) .top { row-gap: 18px; }
  .frame:not(.serpmode) .pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
  .frame:not(.serpmode) .pills .pill { padding: 9px 0; text-align: center; border: 0; background: none; box-shadow: none; font-size: 12.5px; }
  .frame:not(.serpmode) .pills .pill[aria-pressed="true"] { background: var(--pill); color: var(--bg); }
  .frame:not(.serpmode) .stage { min-height: 0; padding-top: 0; }
  .frame:not(.serpmode) .stage > .ask:not(.asked) { margin-block: 6svh auto; gap: 22px; }
  .ask:not(.asked) form.q { position: relative; padding-bottom: 10px; border-bottom: 1.5px solid var(--faint); transition: border-color .2s; }
  .ask:not(.asked) form.q:focus-within { border-color: var(--accent); }
  .ask:not(.asked) .q textarea { line-height: 1.04; letter-spacing: -0.04em; }
  /* the form keeps two lines of room (set from the big size in fitQ), so a changing example never pushes the
     suggestions; the text itself sits at the bottom of that room, on the line, where typing starts */
  .ask:not(.asked) form.q { height: var(--qbox, auto); display: flex; flex-direction: column; justify-content: flex-end; }
  .ask:not(.asked) .q textarea { max-height: calc(var(--qbox, 9999px) - 12px); overflow-y: auto; scrollbar-width: none; resize: none; }
  .ask:not(.asked) .sugs { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .ask:not(.asked) .sug { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; font-size: 15.5px; color: var(--ink); box-shadow: none; }
  .ask:not(.asked) .sug::after { content: "→"; margin-left: auto; color: var(--muted); font-size: 15px; transition: transform .15s; }
  .ask:not(.asked) .sug:active::after { transform: translateX(3px); }
  .ask:not(.asked) .sug.lucky { border-bottom: 0; color: var(--accent); justify-content: flex-start; align-items: baseline; gap: .28em; }
  .ask:not(.asked) .sug.lucky::after { content: "✦"; color: var(--accent); }
  .frame:not(.serpmode) .bottom { gap: 14px; }
  .frame:not(.serpmode) .bottom p { font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: none; }
}

.run-none { margin: 8px 0; color: var(--muted); font-size: 14px; }

/* ---- At a glance (src/brief.js): one screen for recruiters ---- */
.briefview { width: 100%; max-width: 1180px; padding-bottom: 32px; }
.br-head { margin: 4px 0 22px; }
.br-kicker { margin: 0; font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.br-head h1 { font: 300 clamp(32px, 3.8vw, 48px)/1.05 var(--f-sans); letter-spacing: -.03em; margin: 6px 0 6px; }
.br-role { margin: 0; color: var(--muted); font-size: 15.5px; }
.br-status { display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 14.5px; }
.br-dot { width: 8px; height: 8px; border-radius: 50%; background: #1baf7a; box-shadow: 0 0 0 4px color-mix(in srgb, #1baf7a 22%, transparent); flex: none; }
.br-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.br-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); font-size: 14px; }
.br-btn.primary { background: var(--pill); color: var(--bg); box-shadow: var(--shadow); }
.br-btn.primary:hover { color: var(--bg); opacity: .9; }
.br-btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.br-grid { display: grid; grid-template-columns: 1.15fr 1fr .85fr; gap: 16px; align-items: start; }
.br-card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); padding: 18px 20px 16px; min-width: 0; }
.br-card h2 { margin: 0 0 12px; font: 400 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.br-card h3 { margin: 16px 0 6px; font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.br-card ol, .br-card ul { list-style: none; margin: 0; padding: 0; }
.br-card li + li { margin-top: 12px; }
.br-card li a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.br-card li a:hover { text-decoration-color: currentColor; }
.br-card li p, .br-card > p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.br-exp li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.br-when { font: 400 11.5px/1.9 var(--f-mono); color: var(--muted); }
.br-org { color: var(--muted); font-size: 13.5px; }
.br-edu { font-size: 13.5px; }
.br-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font: 400 10.5px/1.7 var(--f-mono); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); vertical-align: 1px; }
.br-focus { font-size: 13.5px !important; margin: 0 0 10px !important; }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.br-card .br-chips li { margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; }
.br-papers li { font-size: 13.5px; }
.br-papers li + li { margin-top: 6px !important; }
.br-more { margin-top: 14px; border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 13.5px; }
.br-foot { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; }
.br-foot .linkish { color: var(--accent); cursor: pointer; border: 0; background: none; padding: 0; font-size: inherit; }
@media (max-width: 1100px) { .br-grid { grid-template-columns: 1fr 1fr; } .br-skills { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .br-grid { grid-template-columns: 1fr; gap: 12px; }
  .br-head h1 { font-size: 34px; }
  .br-status { border-radius: 14px; align-items: flex-start; }
  .br-status .br-dot { margin-top: 7px; }
  .br-btn { min-height: 44px; }
  .br-more { min-height: 40px; }
  .br-exp li { grid-template-columns: 1fr; gap: 0; }
  .br-when { line-height: 1.6; }
}

/* the start page's way in for recruiters: "Hiring? See him at a glance" leads the suggestions */
.sug.sug-brief { display: inline-flex; align-items: center; gap: 7px; background: var(--pill); color: var(--bg); border-color: var(--pill); }
.sug.sug-brief:hover { color: var(--bg); border-color: var(--pill); opacity: .9; }
@media (max-width: 600px) {
  .ask:not(.asked) .sug.sug-brief { margin: 4px 0 6px; padding: 13px 16px; border: 0; border-radius: 14px; background: var(--pill); color: var(--bg); font-weight: 500; }
  .ask:not(.asked) .sug.sug-brief::after { color: var(--bg); }
}

/* names in an answer link to their wiki pages, quietly: an underline that firms up on hover */
.answer a.al { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.answer a.al:hover { color: var(--accent); text-decoration-color: currentColor; }

/* the wiki's info box: its facts fold away on phones, so the article starts on the first screen */
.wk-facts > summary { display: none; }
@media (max-width: 700px) {
  .wk-facts > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink); border-top: 1px solid var(--line); }
  .wk-facts > summary::-webkit-details-marker { display: none; }
  .wk-facts > summary span { color: var(--muted); font: 400 11.5px var(--f-mono); }
  .wk-facts > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .wk-facts[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .wk-box-type { margin-bottom: 2px; }
}

/* loading: the shape of an article while its data arrives */
.wk-skel { display: grid; gap: 12px; max-width: 760px; padding: 18px 0; }
.wk-skel span { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%) 0 0 / 200% 100%; box-shadow: inset 0 0 0 1px var(--edge); animation: skel 1.2s ease-in-out infinite; }
.wk-skel .s1 { width: 22%; height: 11px; }
.wk-skel .s2 { width: 64%; height: 38px; border-radius: 10px; margin-bottom: 14px; }
.wk-skel .s3 { width: 78%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .wk-skel span { animation: none; } }

/* 2048 in dark mode: a dark board, so the tiles are the only bright things on it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-board { background: #2C2A27; }
  :root:not([data-theme="light"]) .g-cell { background: rgba(255, 255, 255, .05); color: #3E3830; }
  :root:not([data-theme="light"]) .g-cell.t1 { background: #D9CFC4; } :root:not([data-theme="light"]) .g-cell.t2 { background: #D6C8AE; }
}
:root[data-theme="dark"] .g-board { background: #2C2A27; }
:root[data-theme="dark"] .g-cell { background: rgba(255, 255, 255, .05); color: #3E3830; }
:root[data-theme="dark"] .g-cell.t1 { background: #D9CFC4; } :root[data-theme="dark"] .g-cell.t2 { background: #D6C8AE; }

/* Every result surface shares the planned destination; other resource roles stay explicit. */
.res-out { margin-left: 5px; font-size: .78em; color: var(--muted); vertical-align: 1px; }
.res-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13.5px; }
.res-links a { color: var(--accent); }
.kp-site { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--pill); color: var(--bg); font-size: 14.5px; font-weight: 500; }
.kp-site:hover { color: var(--bg); opacity: .92; }
.kp-site span { margin-left: auto; font: 400 12px var(--f-mono); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the overview's right column: the live site's preview card, then the sources */
.ov-side { display: grid; gap: 14px; align-content: start; margin-top: 34px; min-width: 0; }
.ov-side:not(:has(> :not(:empty))) { display: none; }
.ov-side .ov-sources { margin-top: 0; }
.ov-live:empty { display: none; }
.resource-actions { margin-bottom: 14px; }
.resource-actions .ov-action { padding: 8px 13px; font-size: 13.5px; }
.resource-missing { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.resource-actions a { overflow-wrap: anywhere; }
.live-card { display: grid; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); color: var(--ink); transition: box-shadow .2s, transform .2s; }
.live-card:hover { color: var(--ink); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--edge); transform: translateY(-1px); }
.live-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--edge); }
.live-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.live-shot img.pic { object-fit: contain; padding: 10px; }
.live-card:hover .live-shot img { transform: scale(1.02); }
/* no screenshot yet: a drawn browser window with the address and the name */
.live-frame { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%; padding-top: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface-2)); }
.live-frame i { position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); } .live-frame i:nth-child(1) { left: 14px; } .live-frame i:nth-child(2) { left: 27px; } .live-frame i:nth-child(3) { left: 40px; }
.live-frame b { position: absolute; top: 8px; left: 58px; right: 14px; padding: 1px 10px; border-radius: 999px; background: var(--surface); font: 400 11px/1.6 var(--f-mono); color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-frame em { font: 300 26px/1.1 var(--f-sans); font-style: normal; letter-spacing: -.02em; color: var(--ink); text-align: center; padding: 0 18px; }
.live-body { display: grid; gap: 5px; padding: 14px 18px 16px; }
.live-site { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.live-site .fav { width: 20px; height: 20px; font-size: 10px; flex: none; }
.live-out { margin-left: auto; color: var(--muted); }
.live-t { font-size: 16px; font-weight: 500; line-height: 1.35; }
.live-card:hover .live-t { color: var(--accent); }
.live-d { font-size: 13.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.live-go { justify-self: start; margin-top: 6px; padding: 7px 14px; border-radius: 999px; background: var(--pill); color: var(--bg); font-size: 13.5px; }
.live-card.lead { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lift); }
@media (max-width: 980px) {
  .ov-side { margin-top: 0; }
  .overview:has(.live-card.lead) .ov-side { order: -1; }   /* "open word games": the site comes first */
  .live-card { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .live-shot { aspect-ratio: auto; min-height: 130px; border-bottom: 0; border-right: 1px solid var(--edge); }
}
@media (max-width: 520px) {
  .live-card { grid-template-columns: 1fr; }
  .live-shot { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--edge); }
}