/* core/places.css — the styles for core/places.js.
 *
 * Extracted from setup.html's inline <style> the moment Settings started
 * mounting the SAME component (2026-08-01). A component that renders on two
 * pages cannot have its styles owned by one of them: the second page mounts
 * it, gets the markup, gets no rules, and renders an unstyled stack of inputs
 * — which reads as a broken screen, not a missing stylesheet. Both /app and
 * /setup link this file; neither redefines any of it.
 *
 * Everything is scoped under .pl-root (added by mountPlaces) so nothing here
 * can reach the rest of either page.
 */
/* ── where you teach: areas, each holding its meeting points ──
   Containment instead of vocabulary. An area is a card; the spots you collect
   from live INSIDE it. Nothing needs an "Available in" picker, because the card
   you are adding to is the answer — which is what removed both the widest
   column and the dropdown that kept offering a town you had just deleted. */
.pl-root{margin-top:4px;}
.pl-card{border:1px solid var(--border-line);border-radius:12px;padding:14px 16px 12px;
  margin-bottom:10px;background:var(--bg-surface);}
.pl-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:10px;}
/* Explicit column AND row: the eyebrow and the name both claim column 1, so
   auto-placement had nowhere obvious to put the remove button and floated it
   into the middle of the card's top edge. */
.pl-head .pl-x{grid-column:2;grid-row:1 / span 2;align-self:start;justify-self:end;}
/* The eyebrow that says WHAT the heading is. Without it the card reads as a
   list with a bold first line, and the containment — a meeting point lives
   inside a town — is left to be inferred from indentation alone. */
.pl-kind{grid-column:1;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-accent);opacity:.85;}
.pl-head h3{grid-column:1;margin:2px 0 0;font-size:15.5px;font-weight:600;
  color:var(--text-ink);letter-spacing:-0.01em;}
/* …and the points sit INSIDE the town, said with a rule rather than a sentence. */
.pl-in-town{margin-top:12px;padding-left:13px;border-left:2px solid var(--ds-divider);}
.pl-sec{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 6px;}
.pl-sec em{font-style:normal;letter-spacing:0;opacity:.8;}
.pl-pts{list-style:none;margin:10px 0 0;padding:0;}
.pl-pt{display:flex;align-items:flex-start;gap:10px;padding:6px 0;
  border-top:1px solid var(--ds-divider);}
.pl-pt:first-child{border-top:0;}
.pl-pt-main{flex:1;min-width:0;font-size:13px;color:var(--text-ink);}
.pl-pt-main b{font-weight:500;}
.pl-pt-det{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.pl-sep{margin:0 6px;opacity:.6;}
.pl-link{color:var(--color-accent);text-decoration:none;}
.pl-link:hover{text-decoration:underline;}
.pl-none{font-size:12px;color:var(--text-muted);margin:2px 0 0;}
.pl-add{background:none;border:0;padding:9px 0 2px;font-family:inherit;font-size:12.5px;
  color:var(--color-accent);cursor:pointer;}
.pl-add:hover{text-decoration:underline;}
.pl-x{background:none;border:0;padding:2px 6px;font-family:inherit;font-size:13px;
  line-height:1;color:var(--text-muted);cursor:pointer;flex-shrink:0;}
.pl-x:hover{color:var(--color-danger);}
.pl-in{width:100%;min-width:0;border:1px solid var(--border-raised);background:var(--field-bg);
  border-radius:8px;padding:9px 11px;font-family:inherit;font-size:13px;color:var(--text-ink);}
.pl-in:focus{outline:none;border-color:var(--color-accent);}
.pl-form{margin-top:10px;padding-top:11px;border-top:1px solid var(--ds-divider);
  display:flex;flex-direction:column;gap:8px;}
.pl-form-row{display:flex;gap:8px;flex-wrap:wrap;}
.pl-form-row .pl-in{flex:1 1 200px;}
.pl-form-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
/* The component's OWN buttons. It used to borrow .btn-primary/.btn-outline
   from setup.html — which /app does not define at all, so mounting the same
   markup in Settings produced an unstyled Cancel button on the confirm dialog.
   Same declarations, under names this file owns. */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 13px;
  background:var(--btn-action-bg);color:var(--btn-action-ink);border:1px solid var(--btn-action-bg);
  border-radius:var(--ds-radius-btn);font-size:12.5px;font-weight:500;font-family:inherit;
  line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;}
.pl-btn:hover{filter:brightness(.96);}
.pl-btn-o{background:transparent;color:var(--text-ink);border:1px solid var(--border-strong);}
.pl-btn-o:hover{background:var(--bg-hover);filter:none;}
.pl-btn[disabled]{opacity:.55;cursor:default;}
.pl-text{background:none;border:0;padding:0;font-family:inherit;font-size:12.5px;
  color:var(--text-muted);cursor:pointer;}
.pl-text:hover{color:var(--text-ink);}
.pl-msg{font-size:11.5px;color:var(--color-danger);}
/* Adding the next town is the main action on this screen once the first one is
   in — a school that covers two towns has to be able to say so without hunting
   for the way. It gets a surface of its own rather than sitting flush under the
   last card looking like part of it. */
.pl-newtown{display:flex;gap:8px;align-items:center;margin-top:2px;}
.pl-newtown-next{margin-top:10px;padding:12px;border:1px dashed var(--border-strong);
  border-radius:12px;background:var(--bg-sidebar);}
.pl-f{display:block;}
.pl-f-l{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:4px;}
.pl-f-l i{font-style:normal;opacity:.75;}
.pl-f-h{display:block;font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
/* The split that matters on this form: one field is the owner's shorthand, the
   other two are the only thing the student ever receives. */
.pl-f-sec{font-size:11.5px;color:var(--text-ink);font-weight:500;margin:12px 0 0;}
.pl-nt-h{font-family:var(--ds-font-display);font-size:15px;font-weight:600;
  letter-spacing:-0.01em;color:var(--ds-title-color);margin:22px 0 0;}
.pl-nt-s{font-size:12px;color:var(--text-muted);margin:4px 0 0;line-height:1.55;}
.pl-form-row .pl-f{flex:1 1 200px;}
.pl-newtown .pl-in{flex:1;}
.pl-err{font-size:12px;color:var(--color-danger);margin:0 0 8px;line-height:1.5;}
/* The component's own confirm — the browser's is a system dialog with an "OK"
   button for an action that is not OK-shaped. Same shape as the skip gate: the
   thing you are deciding about stays visible behind the dim. */
.pl-modal{position:fixed;inset:0;z-index:10070;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(24,23,21,.42);}
.pl-modal-card{background:var(--bg-paper);border:1px solid var(--border-line);
  border-radius:14px;max-width:420px;width:100%;padding:24px 26px 20px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);}
/* The review before submitting is a LIST, not a sentence — it needs room and
   it needs to scroll, because the whole point is reading every row back. */
.pl-modal-card.wide{max-width:640px;max-height:86vh;display:flex;flex-direction:column;}
.pl-modal-card.wide > .pl-scroll{overflow:auto;margin:0 -4px;padding:0 4px;}
.pl-modal-card h2{font-family:var(--ds-font-display);font-size:18px;font-weight:600;
  letter-spacing:-0.01em;color:var(--ds-title-color);margin:0;}
.pl-modal-card p{font-size:13px;color:var(--text-muted);margin:10px 0 0;line-height:1.6;}
.pl-modal-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap;}
.pl-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger);}
.pl-danger:hover{opacity:.92;}
@media (max-width:899px){
  .pl-modal{align-items:flex-end;padding:0;}
  /* `.pl-modal-card.wide` is TWO classes and was declared outside this query, so
     it out-specified the max-width:none below and stayed pinned at 640px on a
     390px phone (Ger, 2026-08-03). Everything past 640px was simply off-screen —
     including BOTH action buttons, which meant the review could not be confirmed
     or dismissed from a phone at all. Named here at equal specificity so the
     sheet layout wins. */
  .pl-modal-card,.pl-modal-card.wide{border-radius:16px 16px 0 0;max-width:none;
    padding:22px 20px 26px;}
  /* Taller than the desktop 86vh: a sheet is anchored to the bottom edge, so the
     room it has is the room above it. Its own .pl-scroll still scrolls. */
  .pl-modal-card.wide{max-height:92vh;}
  .pl-modal-acts{flex-direction:column-reverse;}
  .pl-modal-acts button{width:100%;}
}

@media (max-width:899px){
  .pl-newtown{flex-direction:column;align-items:stretch;}
  .pl-newtown .pl-btn{width:100%;justify-content:center;}
  /* iOS zooms any focused field under 16px — on iPad too (issue #9). 16px on
     mobile keeps the viewport still. Never maximum-scale/user-scalable: it
     kills pinch-zoom and newer Safari ignores it anyway. */
  .pl-in{font-size:16px;}
}

/* ── the two things Settings brought with it ─────────────────────────────
   The intro is rendered BY the component (core/places.js) rather than by
   either page, so the explanation of towns-and-meeting-points cannot say one
   thing in the wizard and another in Settings. */
.pl-intro{font-size:12px;color:var(--text-muted);margin:0 0 14px;line-height:1.6;max-width:62ch;}
.pl-intro b{font-weight:600;color:var(--text-ink);}
/* Progressive disclosure, not a tooltip. Open on a school's FIRST visit (no
   towns yet) and closed after — the people who need it get it without asking,
   the people who have done this before get their screen back, and nobody has
   to hover to find out what a word means. */
.pl-more{margin:0 0 14px;max-width:62ch;}
.pl-more summary{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--color-accent);cursor:pointer;list-style:none;padding:2px 0;}
.pl-more summary::-webkit-details-marker{display:none;}
.pl-more summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;
  transition:transform .15s ease;}
.pl-more[open] summary::after{transform:rotate(-135deg);margin-top:1px;}
.pl-more summary:hover{text-decoration:underline;}
.pl-more p{font-size:12px;color:var(--text-muted);margin:7px 0 0;line-height:1.6;}
/* Editing in place. The library resolves LIVE (0038), so a corrected link here
   corrects every upcoming reminder that names the point — which is why this had
   to come with the component rather than stay behind in Settings. */
.pl-edit{flex-shrink:0;font-size:11.5px;}
.pl-edit:hover{text-decoration:underline;}
.pl-pt-editing{display:block;}
.pl-pt-editing .pl-form{margin-top:0;padding-top:8px;}

/* ── the pre-submit review ────────────────────────────────────────────────
   Everything that is about to be written, read back before it is. */
.rv-s{border-top:1px solid var(--ds-divider);padding:9px 0;}
.rv-s:first-child{border-top:0;}
.rv-who{font-size:13px;font-weight:500;color:var(--text-ink);}
.rv-meta{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin-top:2px;}
.rv-b{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--text-ink);
  margin-top:4px;}
.rv-b .rv-t{color:var(--text-muted);font-variant-numeric:tabular-nums;}
.rv-clash{font-size:11.5px;color:var(--color-danger);}
.rv-ok{font-size:11.5px;color:var(--text-muted);}
.rv-lh{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  margin:7px 0 1px;}
.rv-h{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin:16px 0 4px;}
.rv-warn{font-size:12px;color:var(--color-danger);margin:10px 0 0;line-height:1.55;}
/* A consequence, not a footnote. "No channel is connected, so no student will
   be messaged" decides whether anyone hears about these lessons at all — it
   cannot sit in the same grey as the rest of the small print. */
.rv-note{font-size:12px;line-height:1.55;color:var(--text-muted);margin:14px 0 0;
  padding:9px 12px;border-radius:10px;background:var(--bg-sidebar);
  border:1px solid var(--border-line);}
.rv-note-warn{color:var(--text-ink);border-color:color-mix(in srgb, var(--bk-amber,#b06d00) 45%, transparent);
  background:color-mix(in srgb, var(--bk-amber,#b06d00) 10%, transparent);}

/* Travel time between towns (migration 0083). A school-level answer, styled
   like the cards so it reads as a peer of them, not a footnote; the flash
   marks the one moment it first appears (second town added). */
.pl-travel-new{border-color:var(--border-strong);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--text-ink) 14%, transparent);}

/* ── the default meeting point (migration 0100, Variant A) ────────────────
   The pill on the flagged row; the toggle inside Edit; the per-card hint.
   The pill only ever sits on an EXPLICITLY flagged point — no pill anywhere
   means no defaulting anywhere. */
.pl-def{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);
  border:1px solid color-mix(in srgb,var(--color-accent) 38%,transparent);
  background:color-mix(in srgb,var(--color-accent) 9%,transparent);
  border-radius:999px;padding:2.5px 8px;margin-left:7px;vertical-align:2px;white-space:nowrap;}
.pl-def::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-accent);}
.pl-defhint{font-size:11px;color:var(--text-muted);margin:8px 0 0;line-height:1.5;}
.pl-def-row{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);
  background:color-mix(in srgb,var(--color-accent) 7%,transparent);border-radius:10px;}
.pl-def-tx{flex:1;}
.pl-def-t1{display:block;font-size:12.5px;font-weight:550;color:var(--text-ink);}
.pl-def-t2{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.5;}
.pl-def-cb{position:absolute;opacity:0;pointer-events:none;}
.pl-def-sw{width:38px;height:22px;border-radius:999px;background:var(--border-strong);
  position:relative;flex-shrink:0;margin-top:2px;transition:background .15s ease;}
.pl-def-sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s ease;}
.pl-def-cb:checked + .pl-def-sw{background:var(--color-accent);}
.pl-def-cb:checked + .pl-def-sw::after{left:18.5px;}
.pl-def-cb:focus-visible + .pl-def-sw{outline:2px solid var(--color-accent);outline-offset:2px;}

/* ══════════════ the row grammar (2026-08-28) ══════════════
   Ger, on Sean's Settings → Locations after the /setup re-skin: "Settings
   didn't take the new shape for locations". The component's MARKUP and
   handlers are untouched (core/places.js renders exactly what it did — the
   tests that pin .pl-kind / h3 / .pl-sec / .pl-pts / .pl-head .pl-x still
   hold); only these rules change what it looks like, on BOTH surfaces at
   once: a town is a row with its meeting points indented beneath it as rows,
   "+ Add" is an accent row, the point form is a card of fields, the travel
   time and the add-town input are rows. Same grammar as the wizard's steps
   and the setup page (core/slide-page.js .dh). Later rules win on equal
   specificity, so this block overrides the card styles above it. */
.pl-root{margin-top:0;}
.pl-intro{padding:0;margin:0 0 8px;font-size:13px;}
.pl-more{margin:0 0 4px;}
.pl-more summary{font-size:13px;padding:4px 0;}
.pl-more p{font-size:13px;}
/* a town */
.pl-card{border:0;border-radius:0;padding:0;margin:0;background:none;}
.pl-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:54px;
  padding:8px 0;border-bottom:1px solid var(--border-line);}
.pl-kind{font-size:10px;letter-spacing:.08em;opacity:.9;}
.pl-head h3{font-size:17px;font-weight:500;margin:1px 0 0;letter-spacing:0;}
.pl-head .pl-x{font-size:15px;padding:6px 8px;color:var(--text-muted);}
/* …with its meeting points indented beneath it, as rows */
.pl-in-town{margin-top:0;padding-left:48px;border-left:0;}
.pl-sec{font-size:11px;letter-spacing:.06em;margin:10px 0 0;padding:0;}
.pl-pts{margin:0;}
.pl-pt{align-items:center;gap:12px;min-height:54px;padding:8px 0;border-top:0;
  border-bottom:1px solid var(--border-line);}
.pl-pt-main{font-size:17px;line-height:1.25;}
.pl-pt-main b{font-weight:400;}
.pl-pt-det{font-size:13px;margin-top:2px;}
.pl-def{margin-left:8px;}
.pl-edit{font-size:13px;color:var(--text-muted);}
.pl-edit:hover{color:var(--text-ink);text-decoration:none;}
.pl-pt .pl-x{font-size:15px;}
.pl-none{font-size:15px;color:var(--text-muted);padding:12px 0;margin:0;border-bottom:1px solid var(--border-line);}
.pl-defhint{font-size:12.5px;color:var(--text-muted);margin:8px 0 0;line-height:1.5;}
.pl-add{display:block;width:100%;text-align:left;font-size:17px;font-weight:500;color:var(--color-accent);
  min-height:50px;padding:8px 0;margin:0;border-bottom:1px solid var(--border-line);}
.pl-add:hover{text-decoration:none;background:var(--bg-hover);}
/* the point form: a card of fields (the day page's cards) */
.pl-form{margin:10px 0 12px;padding:12px 16px 14px;border:1px solid var(--border-raised);border-radius:18px;
  background:var(--bg-raised);gap:10px;}
.pl-pt-editing .pl-form{margin-top:8px;}
.pl-f-l{font-size:12px;}
.pl-in{font-size:15px;padding:10px 12px;border-radius:10px;}
.pl-form-acts{padding-top:2px;}
/* the default toggle row inside the form */
.pl-def-row{min-height:44px;}
/* travel time: a town-style row (2026-08-29) — the value lives on its page */
/* another town: a row with the input and the Add action */
.pl-nt-h{font-size:17px;font-weight:400;letter-spacing:0;margin:14px 0 0;color:var(--text-ink);}
.pl-nt-s{font-size:13px;margin:2px 0 0;}
.pl-newtown,.pl-newtown-next{margin-top:6px;padding:8px 0;border:0;border-radius:0;background:none;
  min-height:54px;align-items:center;border-bottom:1px solid var(--border-line);}
.pl-newtown .pl-in{border:0;background:none;padding:0;font-size:17px;}
.pl-newtown .pl-btn{background:none;color:var(--color-accent);border:0;font-size:17px;font-weight:500;padding:0 4px;}
.pl-newtown .pl-btn:hover{filter:none;text-decoration:underline;}
.pl-err{margin:8px 0;}
@media (max-width:899px){
  .pl-newtown{flex-direction:row;align-items:center;}
  .pl-newtown .pl-btn{width:auto;}
}

/* ── the list + the pages (2026-08-28) ──
   The main surface is a row per town → its page (core/slide-page.js: docked
   right on a desktop, a push on a phone); "+ Add a town" is a row → its page.
   The town card renders INSIDE the page — the markup is unchanged, its head
   (eyebrow + name + ✕) is hidden there because the page's own title names
   the town and "Remove ‹town›" sits at the foot. */
/* The list is a card — the same table look as Account / School / Instructors
   (2026-08-29, Ger). Rows keep a hairline between them; the last row none. */
.pl-list{display:flex;flex-direction:column;background:var(--bg-raised);border:1px solid var(--border-raised);
  border-radius:18px;padding:4px 0;margin:12px 0 0;overflow:clip;}   /* a hovered row never paints over the rounded border (dark: the hover IS the card colour, so only the corners showed it — Ger, 2026-08-29) */
.pl-list-travel{margin-top:14px;}
.pl-town{display:flex;align-items:center;width:100%;min-height:54px;padding:8px 18px;gap:0;position:relative;
  background:none;border:0;text-align:left;font:inherit;
  color:var(--text-ink);cursor:pointer;}
.pl-town::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--border-line);}
.pl-town:last-child::after{display:none;}
.pl-town:hover{background:var(--bg-hover);}
.pl-town-ic{width:48px;display:flex;align-items:center;color:var(--text-muted);flex-shrink:0;}
.pl-town-ic svg{width:24px;height:24px;}
.pl-town-tx{flex:1;min-width:0;}
.pl-town-n{display:block;font-size:17px;line-height:1.25;color:var(--text-ink);}
.pl-town-s{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}
/* value over label (2026-08-29): the travel row opens a page and carries a
   value, so it reads like the .vol rows in the .dh grammar — value big, name small. */
.pl-travel .pl-town-tx{display:flex;flex-direction:column-reverse;}
.pl-travel .pl-town-n{font-size:13px;color:var(--text-muted);}
.pl-travel .pl-town-s{font-size:17px;color:var(--text-ink);margin:0 0 2px;line-height:1.25;}
.pl-town-cv{color:var(--text-muted);margin-left:12px;flex-shrink:0;display:inline-flex;}
.pl-town-cv svg{width:18px;height:18px;}
/* the add row reads like "Add instructors": plain title, a sub line, a chevron (2026-08-29) */
.pl-town-add .pl-town-n{color:var(--text-ink);font-weight:400;}
.pl-town-add .pl-town-ic{color:var(--text-muted);}
.pl-page .pl-card{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;
  padding:4px 16px 8px;margin:0;}
.pl-page .pl-head{display:none;}
.pl-page .pl-in-town{padding-left:0;}
.pl-page .pl-sec{margin-top:12px;}
.pl-page .pl-pt:last-child,.pl-page .pl-add{border-bottom:0;}
.pl-page .pl-form{margin:10px 0 6px;}
.pl-rm-town{display:block;width:100%;margin-top:14px;padding:10px 18px;text-align:center;background:none;border:0;
  font:inherit;font-size:15px;font-weight:500;color:var(--color-danger);cursor:pointer;}
.pl-page .pl-newtown{border:0;padding:0;margin:0;background:var(--bg-raised);border:1px solid var(--border-raised);
  border-radius:18px;padding:4px 16px;min-height:54px;}
.pl-page .pl-nt-s{padding:8px 18px 0;text-align:center;}
.pl-page .pl-err{padding:8px 18px 0;}

/* every point on the page is its fields (2026-08-28) — flat inside the card, a
   hairline between points, borderless inputs under small captions */
.pl-page .pl-pt-editing{display:block;padding:6px 0 4px;border-bottom:1px solid var(--border-line);}
.pl-page .pl-pt-editing:last-of-type{border-bottom:0;}
.pl-page .pl-pt-editing .pl-form{margin:0;padding:0;border:0;background:none;border-radius:0;gap:2px;}
.pl-page .pl-f-l{font-size:12px;margin:8px 0 0;}
.pl-page .pl-in{border:0;border-radius:0;background:none;padding:6px 0;font-size:16px;border-bottom:1px solid var(--border-line);}
.pl-page textarea.pl-in{min-height:40px;}
.pl-page .pl-in:focus{border-bottom-color:var(--color-accent);}
.pl-page .pl-f-h,.pl-page .pl-f-sec{font-size:12px;}
.pl-page .pl-form-acts{justify-content:space-between;padding:6px 0 2px;}
.pl-rm-point{color:var(--color-danger);font-size:13px;}
.pl-page .pl-form .pl-in{font-size:15px;}
@media (max-width:899px){ .pl-page .pl-form .pl-in{font-size:16px;} }
/* the page injects .dh button{color:inherit;font:inherit} (slide-page.js) — two
   classes outrank it so the accent/danger links keep their colour and size */
.pl-page .pl-add{color:var(--color-accent);font-size:17px;font-weight:500;}
.pl-page .pl-rm-point{color:var(--color-danger);font-size:13px;font-weight:400;}
.pl-page .pl-rm-town{color:var(--color-danger);font-size:15px;font-weight:500;}
.pl-page .pl-btn{color:var(--btn-action-ink);background:var(--btn-action-bg);font-size:14px;}
.pl-page .pl-btn-o{color:var(--text-ink);background:transparent;}
.pl-page .pl-text{color:var(--text-muted);font-size:13px;}
.pl-page .pl-newtown .pl-btn{background:none;color:var(--color-accent);font-size:17px;font-weight:500;}

/* ══ the town page, in the day page's grammar (Ger, 2026-08-28: "more clean
   like availability — simple rows, icons, less description; a nice dial for
   the default; easily add another meeting point") ══
   Same markup (core/places.js), restyled: one CARD per meeting point made of
   icon rows — name · where · map link · directions · town · the default
   switch · remove — with the help copy hidden (the placeholders say it), the
   section label above, "+ Add another meeting point" as its own row. */
.pl-page .fpbody{gap:12px;}
.pl-page .pl-card{background:none;border:0;border-radius:0;padding:0;margin:0;}
.pl-page .pl-in-town{padding:0;margin:0;border:0;}
.pl-page .pl-sec{margin:4px 2px 0;padding:0;font-size:12px;letter-spacing:.06em;}
.pl-page .pl-pts{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;}
.pl-page .pl-none{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:14px 18px;margin:8px 0 0;font-size:15px;}
.pl-page .pl-defhint{display:none;}
/* a point = a card of rows */
.pl-page .pl-pt-editing{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:4px 0;margin:0;}
.pl-page .pl-pt-editing:last-of-type{border-bottom:1px solid var(--border-raised);}
.pl-page .pl-pt-editing .pl-form{gap:0;}
.pl-page .pl-f-l,.pl-page .pl-f-h,.pl-page .pl-f-sec{display:none;}
.pl-page .pl-f{display:flex;align-items:center;min-height:54px;padding:8px 18px;position:relative;margin:0;}
.pl-page .pl-f::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--border-line);}
/* The row glyphs are MASKS painted in var(--text-muted) — the same token .dh .ic
   (Cars, Account, every other settings page) paints its icons with — so they
   follow the theme. They were black-stroked background bitmaps at .55 opacity,
   which read as grey on paper and vanished in dark mode (Ger, 2026-09-02). The
   stroke colour inside each SVG is irrelevant to a mask; only its alpha is used.
   A row with no glyph of its own masks to an empty SVG: nothing painted. */
.pl-page .pl-f::before{content:"";width:48px;height:24px;flex-shrink:0;--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'/>");background:var(--text-muted);-webkit-mask:var(--pl-ic) no-repeat left center/24px 24px;mask:var(--pl-ic) no-repeat left center/24px 24px;}
.pl-page .pl-f:has([data-f="label"])::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");}
.pl-page .pl-f:has([data-f="address"])::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V9l7-5 7 5v12'/><path d='M9 21v-6h6v6'/></svg>");}
.pl-page .pl-f:has([data-f="url"])::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/><path d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/></svg>");}
.pl-page .pl-f:has([data-f="directions"])::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.5 8.5l-2 5-5 2 2-5z'/></svg>");}
.pl-page .pl-f:has([data-f="town"])::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/><path d='M9 4v14M15 6v14'/></svg>");}
.pl-page .pl-f:has([data-f="town"]) .pl-f-l{display:block;flex:1;font-size:17px;color:var(--text-ink);margin:0;}
.pl-page .pl-in,.pl-page .pl-pt-editing .pl-in,.pl-page .pl-form .pl-in{flex:1;min-width:0;border:0;background:none;padding:0;font-size:17px;line-height:1.25;color:var(--text-ink);border-radius:0;box-shadow:none;}
.pl-page .pl-in::placeholder{color:var(--text-muted);}
.pl-page .pl-in:focus{border:0;box-shadow:none;outline:none;}
.pl-page textarea.pl-in{min-height:0;height:auto;resize:none;font-size:17px;}
.pl-page select.pl-in{flex:0 0 auto;max-width:55%;text-align:right;direction:rtl;appearance:none;-webkit-appearance:none;margin-left:12px;cursor:pointer;}
.pl-page select.pl-in option{direction:ltr;}
/* the default switch row: the day page's toggle, one line, the consequence
   line only when it names the point it replaces */
.pl-page .pl-def-row{display:flex;align-items:center;min-height:54px;padding:8px 18px 8px 66px;margin:0;background:none;border:0;border-radius:0;position:relative;cursor:pointer;}
.pl-page .pl-def-row::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--border-line);}
.pl-page .pl-def-tx{flex:1;min-width:0;}
.pl-page .pl-def-t1{display:block;font-size:16px;font-weight:400;color:var(--text-ink);line-height:1.25;}
.pl-page .pl-def-t2{display:none;}
.pl-page .pl-def-t2.has-replace{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}
.pl-page .pl-def-cb{position:absolute;opacity:0;width:1px;height:1px;}
.pl-page .pl-def-sw{width:52px;height:30px;border-radius:100px;background:var(--border-strong);position:relative;margin-left:12px;flex-shrink:0;transition:background .15s;display:block;border:0;}
.pl-page .pl-def-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:100px;background:#fff;transition:transform .15s;}
.pl-page .pl-def-cb:checked + .pl-def-sw{background:var(--color-accent);}
.pl-page .pl-def-cb:checked + .pl-def-sw::after{transform:translateX(22px);}
/* the foot of a point's card: remove, as a quiet row */
.pl-page .pl-form-acts{padding:0 18px;min-height:48px;align-items:center;justify-content:flex-start;gap:12px;}
.pl-page .pl-rm-point{color:var(--color-danger);font-size:15px;font-weight:500;padding:0;}
.pl-page .pl-msg{font-size:13px;}
.pl-page .pl-rm-town{margin-top:6px;}

/* the Town row: the booking sheet's picker in the SPA (the value + the up/down
   chevron; the select stays for the form's reads), the native select elsewhere */
.pl-page .pl-f-town{cursor:pointer;}
.pl-page .pl-town-val{display:none;}
.pl-page.pl-picker .pl-town-val{display:block;flex:0 0 auto;margin-left:12px;font-size:17px;color:var(--text-ink);text-align:right;}
.pl-page.pl-picker .pl-f-town select{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.pl-page.pl-picker .pl-f-town::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--border-line);}
.pl-page.pl-picker .pl-f-town .pl-town-cv{display:inline-flex;}
.pl-page.pl-picker .pl-town-val::after{content:"";display:inline-block;width:18px;height:18px;margin-left:6px;vertical-align:-4px;background:var(--text-muted);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9l5-5 5 5M7 15l5 5 5-5'/></svg>") no-repeat center/18px 18px;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9l5-5 5 5M7 15l5 5 5-5'/></svg>") no-repeat center/18px 18px;}
/* the Directions row: a one-line field that grows as you type, sat on the
   row's centre line like the inputs beside it (Ger: "riding high") */
.pl-page textarea.pl-in{height:22px;min-height:22px;line-height:22px;padding:0;overflow:hidden;resize:none;display:block;field-sizing:content;max-height:110px;}
.pl-page .pl-f:has(textarea){align-items:center;}
/* the default row: text on one line beside its switch */
.pl-page .pl-def-tx{flex:1 1 auto;min-width:0;}
.pl-page .pl-def-t1{white-space:nowrap;}
/* the checked knob: the base rule's left:18.5px must not stack with the page's translate */
.pl-page .pl-def-cb:checked + .pl-def-sw::after{left:3px;transform:translateX(22px);}
.pl-page .pl-def-sw{margin-top:0;}

/* "Pre-select a meeting point" — the town page's own card (2026-08-28); the
   per-point default rows are hidden on the page, the card drives them */
.pl-page .pl-pt-editing .pl-def-row{display:none;}
.pl-def-card{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:4px 0;margin:12px 0 0;}
.pl-page .pl-def-master{padding-left:66px;position:relative;}
.pl-page .pl-def-master::before{content:"";position:absolute;left:18px;top:50%;width:24px;height:24px;transform:translateY(-50%);background:var(--text-muted);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-6'/></svg>") no-repeat center/24px 24px;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-6'/></svg>") no-repeat center/24px 24px;}
.pl-page .pl-def-master .pl-def-t2{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;white-space:normal;}
.pl-page .pl-def-master .pl-def-t1{white-space:normal;}
.pl-page .pl-def-card .pl-f-def[hidden]{display:none;}
.pl-page .pl-def-card .pl-f-def::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");}
.pl-page .pl-def-card .pl-f-def .pl-f-l{display:block;flex:1;font-size:17px;color:var(--text-ink);margin:0;}
.pl-page .pl-def-card .pl-f-def::after{display:none;}
.pl-page .pl-def-master::after{display:block;}
.pl-page .pl-def-card .pl-f-def:last-child{border:0;}
.pl-page.pl-picker .pl-f-def select{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.pl-page:not(.pl-picker) .pl-f-def .pl-town-val{display:none;}

/* The town's review link (flag student_graduation): one Places field in a card
   like a point's — the star glyph, no rule under its only row */
.pl-page .pl-review-card{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:4px 0;margin:12px 0 0;}
.pl-page .pl-review-card .pl-f::after{display:none;}
.pl-page .pl-f:has(#pl-review-url)::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/></svg>");}

/* Remove ‹town›: a card row like the rest of the page — trash icon, the action
   in red, what goes with it beneath; the confirm still asks first */
.pl-rm-card{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:4px 0;margin:12px 0 0;}
.pl-page .pl-rm-town{display:flex;align-items:center;width:100%;min-height:54px;padding:8px 18px;margin:0;text-align:left;background:none;border:0;cursor:pointer;color:var(--color-danger);font:inherit;}
.pl-page .pl-rm-town:hover{background:var(--bg-hover);border-radius:14px;}
.pl-rm-ic{width:48px;display:flex;align-items:center;color:var(--color-danger);flex-shrink:0;}
.pl-rm-ic svg{width:24px;height:24px;}
.pl-rm-tx{flex:1;min-width:0;}
.pl-rm-t{display:block;font-size:17px;font-weight:500;color:var(--color-danger);line-height:1.25;}
.pl-rm-s{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}
/* the component's confirm sits above the slide-page layer (10040) and the
   field pages (10060/10061) — it is the last word on the screen */
/* the page's fields stack — the base .pl-form-row puts Where + Map link side by
   side once the column is wide enough (the wizard's 480px), which reads as one
   field with two boxes */
.pl-page .pl-form-row{display:block;}
/* the travel row on a phone: one-line heading, quieter sentence */
@media (max-width: 639px), ((max-height: 639px) and (pointer: coarse)){
  .pl-travel-h{font-size:16px;}
  .pl-travel-s{font-size:12px;}
}
/* the read-only Town row on a town's own page: same icon + label as the
   picker, the value muted, no chevron, nothing to tap */
.pl-page .pl-f-ro{cursor:default;}
.pl-page .pl-f-ro::before{--pl-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/><path d='M9 4v14M15 6v14'/></svg>");}
.pl-page .pl-f-ro .pl-f-l{display:block;flex:1;font-size:17px;color:var(--text-ink);margin:0;}
.pl-page .pl-f-ro .pl-town-val,.pl-page.pl-picker .pl-f-ro .pl-town-val{display:block;flex:0 0 auto;margin-left:12px;font-size:17px;color:var(--text-muted);text-align:right;}
.pl-page.pl-picker .pl-f-ro .pl-town-val::after{content:none;}
.pl-page.pl-picker .pl-f-ro::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--border-line);}
/* the add card: the Availability page's "Another block" — a switch row with a
   + icon; ON reveals the fields beneath, Done saves them, no buttons */
.pl-page .pl-add-card{background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:18px;padding:4px 0;margin:8px 0 0;gap:0;}
.pl-page .pl-add-row{padding-left:66px;position:relative;}
.pl-page .pl-add-row::before{content:"";position:absolute;left:18px;top:50%;width:24px;height:24px;transform:translateY(-50%);background:var(--text-muted);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") no-repeat center/24px 24px;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") no-repeat center/24px 24px;}
.pl-page .pl-add-row .pl-def-t1,.pl-page .pl-add-row .pl-def-t2{white-space:normal;}
.pl-page .pl-add-row .pl-def-t2{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}
.pl-page .pl-add-body[hidden]{display:none;}
.pl-page .pl-add-card:has(.pl-add-body[hidden]) .pl-add-row::after{display:none;}
.pl-page .pl-add-body .pl-msg:empty{display:none;}
.pl-page .pl-add-body .pl-msg{padding:6px 18px 8px;margin:0;}
/* on the page the town IS the title and the cards are self-evidently its
   meeting points — no "MEETING POINTS 2" label, no "None yet" box (the add
   card's own row says "A meeting point — the spot where you meet students in
   ‹town›"). The markup stays for the list/tests; only the page hides it. */
.pl-page .pl-sec,.pl-page .pl-none{display:none;}
/* a car the viewer may see but not edit — the instructor's School cars (2026-09-16): plain row, no hover */
.pl-town.car-ro{cursor:default;}
.pl-town.car-ro:hover{background:none;}