/* guide.css — the guide's own needs, on top of pages.css: a wider column for
 * pictures, a contents list, and numbered markers placed on a picture with a
 * key underneath. */

.page.wide { width: min(1080px, 100%); }
.page.wide .text { padding-inline: clamp(18px, 4vw, 48px); }
.page.wide .text p, .page.wide .text li { max-width: 68ch; }

.text .langs-link { text-align: center; margin: -6px 0 18px; font-size: 15px; }
.text .langs-link a { font-weight: 600; }

/* Contents: two columns where there is room. */
.toc { margin: 22px 0 6px; padding: 16px 20px; border: 1px solid var(--card-rule); border-radius: 12px; }
.toc h2 { margin: 0 0 8px !important; font-size: 17px !important; }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2 240px; column-gap: 28px; }
.toc li { margin: 0 0 6px; break-inside: avoid; max-width: none !important; }
.toc a { font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.text h2 { scroll-margin-top: 16px; }
.text h2 + .sub { margin-top: -4px; }
.text h3 { margin: 22px 0 6px; font: 700 17.5px/1.25 var(--serif); color: var(--ink); }
.text kbd, .text .ui {
  font: 600 .92em/1 var(--sans); padding: 2px 7px 3px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--card-rule) 45%, transparent); color: var(--ink);
}

/* Pictures. */
.shot { margin: 18px 0 22px; }
.shot .frame { position: relative; display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--card-rule); box-shadow: 0 1px 2px rgba(36,23,21,.06), 0 8px 24px rgba(36,23,21,.08); background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); max-width: 68ch; }
.shot.phone { max-width: 320px; }
.shot.card { max-width: 560px; }
.shot.strip .frame { border-radius: 8px; }
.figs { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 18px 0 22px; }
.figs .shot { margin: 0; flex: 1 1 260px; }
.figs .shot.phone { flex: 0 1 300px; }

/* Markers, and their key. */
.pin {
  position: absolute; transform: translate(-112%, -50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--sans); color: #fff; background: var(--accent);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25); pointer-events: none;
}
.shot.phone .pin { width: 22px; height: 22px; font-size: 12px; }
.key { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: k; display: grid; gap: 8px; }
.key li { counter-increment: k; position: relative; padding-left: 34px; max-width: 72ch !important; margin: 0; }
.key li::before {
  content: counter(k); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--sans); color: #fff; background: var(--accent);
}
.key li::marker { content: none; }
.key.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 28px; }

.note-box { border-left: 3px solid var(--pine); padding: 4px 0 4px 14px; margin: 14px 0; color: var(--ink-soft); }

@media (max-width: 560px) {
  .pin { width: 18px; height: 18px; font-size: 10.5px; }
  .shot.phone .pin { width: 18px; height: 18px; font-size: 10.5px; }
  .toc ol { columns: 1; }
}

/* Pattaya has no Greek at all: the Greek title is set in the book face. */
.text h1:lang(el) { font-family: var(--serif); font-weight: 700; font-size: 40px; }

/* The line under the title, and the language link, centred on the whole card
   rather than on a reading measure that starts at its left edge. */
.page.wide .text .when, .page.wide .text .langs-link { max-width: none; }

.pin.after { transform: translate(12%, -50%); }
.pin.top { transform: translate(-50%, -112%); }
.pin.below { transform: translate(-50%, 12%); }
.pin.corner { transform: translate(-70%, -30%); }

/* The bar along the top: the way back to the library, wherever you are on the
   page. It runs the full width of the window, so the body's top padding moves
   into the bar, and the bar's own padding takes the phone's notch. */
body.guide { padding-top: 0; }
.guide-bar {
  position: sticky; top: 0; z-index: 10;
  margin: 0 calc(-1 * max(18px, env(safe-area-inset-right, 0px))) 4vh calc(-1 * max(18px, env(safe-area-inset-left, 0px)));
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-rule);
}
.guide-bar .in { width: min(1080px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.guide-bar .spacer { flex: 1; }
.guide-bar a { font: 600 15px/1.2 var(--sans); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.guide-bar a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide-bar a.home {
  color: var(--ground); background: var(--accent); padding: 8px 14px 9px; border-radius: 999px;
}
.guide-bar a.home:hover { color: var(--ground); text-decoration: none; filter: brightness(1.08); }
.guide-bar a:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 999px; }
.toc { scroll-margin-top: 72px; }
.text h2 { scroll-margin-top: 72px; }
@media (max-width: 420px) {
  .guide-bar .in { gap: 12px; }
  .guide-bar a { font-size: 14px; }
  .guide-bar a.home { padding: 7px 11px 8px; }
}