/* _inside.css: a stay page's Inside (What is here and Good to know), each on its own ground. HAND-WRITTEN.

   Jack, 22 October 2026, of Heritage Coachman Lodge's What is here and Good to know: "can you put these elements on
   seperate coloured backgrounds - and just make them better visually - the spacing between them is off and they just
   dont look great visually - differnet backgrounds woudl work better but also just a redwign perhaps to make it much
   easier on the eye". Then: "do it for this listing and when i'm happy we can change them all".

   Then, of the sheet at /design-2026/stay-inside/: "B4 C2 go". On every stay since 22 October 2026: lodge.tsx puts
   "stin stin-am-big stin-gk-said" on <main> and holds each part in one band (div.stin-band), and config/design.php
   registers this sheet under /listings/. The chosen setting is the defaults below (S2's grounds, B4, C2); the other
   settings and treatments stay only for the sheet's frames, and no page carries them.

   NEW NAMES, all stin- (free across public/design-css, resources/js and public/design-2026 on 22 October 2026):
   stin (the switch, on <main>), stin-s1 / stin-s2 / stin-s3 (the three settings), stin-band with stin-here or stin-know
   (the plain div that holds each part as one band), stin-am-list / -over / -line / -big (the amenities), stin-gk-cols / -said /
   -side (Good to know). Every rule is under .p26.stin, so a page without the class is untouched. The markup is the
   page's own: .boxes, .b-fill.b-ic, .gk, .gk-list, .gk-row; nothing renamed.

   What it changes, and nothing else:
   - What is here (its introduction and its amenities) stands on one ground, Good to know on another, the dates keep
     theirs (oat). Two grounds side by side are never the same, and never both dark.
   - Every band has the same air above its first line as below its last: var(--space), the site's one section gap.
   - The amenities lose their boxes: a drawing and the name in Larken, three across, on the band's ground (B4). Good to
     know loses its hairlines (no dividing lines between rows): said in sentences, the thing first (C2).

   Columns: --stin-cols is the most across; under that width each column keeps at least --stin-min, so a phone gets two
   without a breakpoint. */

.p26.stin{
  --stin-space:var(--space);
  --stin-gap:44px;
  --stin-here:var(--stone); --stin-here-ink:var(--ink); --stin-here-soft:var(--ink-55);
  --stin-know:var(--forest); --stin-know-ink:var(--on-forest); --stin-know-soft:var(--on-forest-55);
  --stin-dates:var(--oat);
  --stin-cols:3; --stin-min:150px; --stin-icon:26px; --stin-row:26px; --stin-measure:1400px;
  --stin-gk-cols:2;
}

/* ---- the three settings ---- */
/* S1, quiet: two light grounds, the drawings over the names, the thing beside its words */
.p26.stin.stin-s1{--stin-here:var(--stone);--stin-here-ink:var(--ink);--stin-here-soft:var(--ink-55);
  --stin-know:var(--paper);--stin-know-ink:var(--ink);--stin-know-soft:var(--ink-55);
  --stin-cols:6;--stin-min:120px;--stin-icon:28px;--stin-row:36px}
/* S2, forest (the recommendation): stone, then the forest, then the dates' oat */
.p26.stin.stin-s2{--stin-here:var(--stone);--stin-here-ink:var(--ink);--stin-here-soft:var(--ink-55);
  --stin-know:var(--forest);--stin-know-ink:var(--on-forest);--stin-know-soft:var(--on-forest-55);
  --stin-cols:4;--stin-min:150px;--stin-icon:22px;--stin-row:24px}
/* S3, olive: the brand's olive (no job yet) under What is here in forest ink, Good to know on paper, said in sentences */
.p26.stin.stin-s3{--stin-here:#AFA065;--stin-here-ink:var(--forest);--stin-here-soft:var(--forest);
  --stin-know:var(--paper);--stin-know-ink:var(--ink);--stin-know-soft:var(--ink-55);
  --stin-cols:6;--stin-min:140px;--stin-icon:18px;--stin-row:18px}

/* ---- the grounds: each part is one band (InsideBand in lodge.tsx, a plain div round the introduction and its list) ---- */
.p26.stin .stin-band:empty{display:none}
.p26.stin .stin-band.stin-here{background:var(--stin-here);color:var(--stin-here-ink)}
.p26.stin .stin-band.stin-know{background:var(--stin-know);color:var(--stin-know-ink)}
.p26.stin .stin-band.stin-here .wl-label{color:var(--stin-here-soft)}
.p26.stin .stin-band.stin-know .wl-label{color:var(--stin-know-soft)}
/* the label's 6px nudge (_place.css) put a phone's first line 6px further from the band's edge than its last */
.p26.stin .stin-band .intro .wl-label{margin-top:0}
.p26.stin .stin-band .intro .wl-text{color:inherit}
.p26.stin .stin-band .intro .rest{color:color-mix(in srgb,currentColor 80%,transparent)}
.p26.stin #availability{background:var(--stin-dates)}

/* ---- the air: the same above a band's first line as below its last ----
   The band holds it; what is inside gives up its own (_place.css pads an introduction 12vh above and 6.5vh below). */
.p26.stin .stin-band{padding:var(--stin-space) 0}
.p26.stin .stin-band .intro{padding:0 0 var(--stin-gap);background:transparent}
.p26.stin .stin-band :is(.boxes,.gk){background:transparent}
/* a label with no words of its own sits close to what it labels, as the dates' does */
.p26.stin .stin-band .intro:has(.wl-text:empty):not(:last-child){padding-bottom:18px}
.p26.stin .stin-band .intro:last-child{padding-bottom:0}
.p26.stin .stin-band :is(.boxes,.gk){padding:0}

/* ---- the column the lists sit in: the page's left edge, as wide as the setting says ---- */
.p26.stin :is(.boxes,.gk) .colw{max-width:var(--stin-measure);margin-left:0;margin-right:auto;font:400 17px/1.5 var(--serif)}

/* ---- the amenities: a drawing and a name, no box ----
   Every property the boxes set is reset here (_place.css: .b-fill div, .b-fill.b-ic > div). */
.p26.stin .boxes .b-fill.b-ic{display:grid;margin:0;padding:0;gap:var(--stin-row) 32px;grid-auto-rows:auto;
  grid-template-columns:repeat(auto-fill,minmax(max(var(--stin-min),calc((100% - (var(--stin-cols) - 1) * 32px) / var(--stin-cols))),1fr))}
.p26.stin .boxes .b-fill.b-ic > div{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;
  min-height:0;padding:0;border:0;background:none;font:400 17px/1.35 var(--serif);color:inherit}
.p26.stin .boxes .b-fill.b-ic svg{flex:none;width:var(--stin-icon);height:var(--stin-icon);fill:none;stroke:currentColor;stroke-width:1.3;opacity:.85}
.p26.stin .boxes .b-fill.b-ic .b-ic-none{flex:none;width:var(--stin-icon);height:var(--stin-icon)}
/* the drawing over the name */
.p26.stin.stin-am-over .boxes .b-fill.b-ic > div{flex-direction:column;align-items:flex-start;gap:14px;font-size:16px}
/* one running line: the names one after another, each with a small drawing */
.p26.stin.stin-am-line .boxes .b-fill.b-ic{display:flex;flex-wrap:wrap;gap:var(--stin-row) 34px}
.p26.stin.stin-am-line .boxes .b-fill.b-ic > div{gap:10px;font-size:18px}
/* the names in Larken */
.p26.stin.stin-am-big .boxes .b-fill.b-ic > div{gap:18px;font:300 24px/1.25 var(--face)}
@media (max-width:600px){.p26.stin.stin-am-big .boxes .b-fill.b-ic > div{font-size:20px}}

/* ---- Good to know: no lines (_place.css draws a hairline under every row) ---- */
.p26.stin .gk .gk-list{margin:0;padding:0;border:0}
.p26.stin .gk .gk-row{margin:0;padding:0;border:0}
.p26.stin .gk .gk-row dd{margin:0;color:color-mix(in srgb,currentColor 82%,transparent)}
/* the thing as a small heading, its words under it, two across */
.p26.stin.stin-gk-cols .gk .gk-list{display:grid;gap:34px 56px;
  grid-template-columns:repeat(auto-fill,minmax(max(260px,calc((100% - (var(--stin-gk-cols) - 1) * 56px) / var(--stin-gk-cols))),1fr))}
.p26.stin.stin-gk-cols .gk .gk-row{display:block}
.p26.stin.stin-gk-cols .gk .gk-row dt{margin:0 0 8px;font:400 22px/1.25 var(--face);letter-spacing:0;text-transform:none;color:inherit}
.p26.stin.stin-gk-cols .gk .gk-row dd{font:400 17px/1.6 var(--serif)}
/* said in sentences: the thing in the same face, a little heavier, then its words */
.p26.stin.stin-gk-said .gk .gk-list{display:block;max-width:42em}
.p26.stin.stin-gk-said .gk .gk-row{display:block;margin:0 0 14px}
.p26.stin.stin-gk-said .gk .gk-row:last-child{margin-bottom:0}
.p26.stin.stin-gk-said .gk .gk-row dt{display:inline;font:600 19px/1.6 var(--serif);letter-spacing:0;text-transform:none;color:inherit}
.p26.stin.stin-gk-said .gk .gk-row dt::after{content:". "}
.p26.stin.stin-gk-said .gk .gk-row dd{display:inline;font:400 19px/1.6 var(--serif)}
/* the thing beside its words, on air */
.p26.stin.stin-gk-side .gk .gk-list{display:grid;gap:22px;max-width:960px}
.p26.stin.stin-gk-side .gk .gk-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 32px}
.p26.stin.stin-gk-side .gk .gk-row dt{font:400 20px/1.45 var(--face);letter-spacing:0;text-transform:none;color:inherit}
.p26.stin.stin-gk-side .gk .gk-row dd{font:400 18px/1.5 var(--serif)}
@media (max-width:600px){.p26.stin.stin-gk-side .gk .gk-row{grid-template-columns:minmax(0,1fr)}}

/* ---- the break between the two (Break in place-parts.tsx: two upright photographs, where a stay has them) ----
   It stands on the page's paper between the two grounds, with a band's air either side, so it reads as its own
   strip rather than a gap in one band. */
/* The same photographs in the same places; the box is the column itself (the gutter as margin, not padding), so it
   measures inside the column as it looks. */
.p26.stin .stin-band + .pair2{box-sizing:border-box;width:calc(100% - 2 * var(--edge));max-width:calc(1400px - 2 * var(--edge));
  padding:0;margin:var(--stin-space) auto}

/* ---- never two dark grounds touching ----
   Where a stay has no What is here (its band is empty and not drawn) and the owners' words (.ow, always forest) stand just above,
   Good to know would sit forest on forest; it takes stone there instead. */
.p26.stin :is(.forest,.ow) + .pn-mark + .stin-band.stin-here:empty + .stin-band.stin-know,
.p26.stin :is(.forest,.ow) + .pn-mark + .stin-band.stin-here:empty + .pair2 + .stin-band.stin-know{
  --stin-know:var(--stone);--stin-know-ink:var(--ink);--stin-know-soft:var(--ink-55)}