/*
 * LOT 101 Connected — the estate wheel.
 *
 * Plain CSS reading the theme's design tokens, not the theme's Tailwind
 * utilities. Same rule the events plugin follows, for the same two reasons:
 * the theme's utilities are compiled from a @source scan that never looks
 * inside a plugin, so a class used only here would not exist in the built
 * sheet; and a plugin that styles itself with another package's utility names
 * breaks silently the day that package rebuilds.
 *
 * Every token is written with a fallback, so the widget still looks like
 * itself under a theme that has none of them.
 *
 * Enqueued after the theme's stylesheet (see includes/assets.php), so the few
 * places this does override the theme win on source order rather than on
 * !important.
 */

.l1c {
  --l1c-ink: var(--color-on-surface, #000);
  --l1c-muted: var(--color-on-surface-variant, #4a3d37);
  --l1c-surface: var(--color-surface, #fdf4ee);
  --l1c-face: #fff;
  --l1c-line: var(--color-outline-variant, rgba(74, 61, 55, 0.2));
  --l1c-accent: var(--color-accent-forest, #2f4937);

  /* The wheel's own hairline weight, and how much it thickens when its
  module is live. Named here so the two stay in step. */
  --l1c-stroke: 1px;
  --l1c-stroke-active: 2px;

  display: grid;
  /*
   * Wheel the larger share, not the panel (28 Sep 2026, Emma: "the info
   * section on the right should be narrower to balance the diagram").
   * Provisional: to be revisited once final copy is in, per Emma's own
   * framing of the request.
   */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
}

/* ---- the wheel ---------------------------------------------------------- */

.l1c__wheel {
  /* Room for the labels, which hang outside the square the wheel is drawn
  in. The wheel itself stays a true square; this padding is what stops a
  label at three o'clock running into the panel. */
  padding-inline: clamp(0px, 4vw, 3.25rem);
  padding-block: clamp(0px, 2vw, 1.5rem);
}

.l1c-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* Labels are meant to leave the box. */
  overflow: visible;

  /* A size container, so the nodes can be expressed in units of the wheel
  itself (1cqw = 1% of its width). That is what lets a node's visible face
  stay a fixed fraction of the drawing while its HIT AREA has a floor in real
  pixels — two different sizes for one element, which percentages alone
  cannot give, because a percentage width on an absolutely positioned node
  and a percentage on the face inside it resolve against different boxes.
  See .l1c-node below. */
  container-type: size;
}

.l1c-wheel__spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.l1c-spoke {
  stroke: var(--l1c-ink);
  stroke-width: var(--l1c-stroke);
  stroke-linecap: round;
  opacity: 0.55;
  transition:
    stroke 0.3s ease-out,
    stroke-width 0.3s ease-out,
    opacity 0.3s ease-out;
}

.l1c-spoke.is-active {
  stroke: var(--l1c-accent);
  stroke-width: var(--l1c-stroke-active);
  opacity: 1;
}

/* The hub and the six nodes are the same object at two sizes: a square face
with a mark centred in it, sitting on the point it is positioned at.
--l1c-size is set per element in the markup as a plain number — the node's
width as a percentage of the wheel — and turned into a length here.

The button is the HIT AREA and never goes below 44px, which is the floor a
touch target has to clear and which the wheel would otherwise breach on a
phone: at ~130px across, a node is 24px. The face inside it is the VISIBLE
square and keeps its exact fraction of the drawing at every size, so the
diagram's proportions never bend to accommodate a thumb. The estate map's
markers solve the same problem the same way — a 44px button with a small dot
drawn inside it. */
.l1c-hub,
.l1c-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(calc(var(--l1c-size, 19) * 1cqw), 44px);
  height: max(calc(var(--l1c-size, 19) * 1cqw), 44px);
  translate: -50% -50%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.l1c-node__face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--l1c-size, 19) * 1cqw);
  height: calc(var(--l1c-size, 19) * 1cqw);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l1c-face);
  border: var(--l1c-stroke) solid var(--l1c-ink);
  transition:
    background-color 0.3s ease-out,
    border-color 0.3s ease-out,
    border-width 0.3s ease-out,
    scale 0.3s ease-out;
}

.l1c-hub .l1c-node__face {
  border-color: var(--l1c-ink);
}

.l1c-node__mark {
  width: 78%;
  height: 78%;
  object-fit: contain;
  /* --l1c-mark-scale (templates/wheel.php, 1 Oct 2026 internal review):
  per-module correction for a motif that reads bolder than the other five at
  the same node size -- Megalong's sprig, especially. Scoped to the mark
  itself, never --l1c-size above, so the node and its hit area are
  unaffected; scale (not transform) to compose cleanly with .l1c-node__face's
  own hover/selected scale on the parent, which this multiplies rather than
  competes with. The hub's mark shares this class but never sets the
  variable, so it keeps the default of 1. */
  scale: var(--l1c-mark-scale, 1);
  transition:
    filter 0.3s ease-out,
    scale 0.3s ease-out;
}

.l1c-hub .l1c-node__mark {
  /* The hub's mark fills its node; the six botanical motifs float inside
  theirs. That is not an inconsistency, it is what the artwork is: the master
  positive lock-up is a solid square block with LOT 101 knocked out of it,
  already carrying its own margin inside the square, and inset inside a white
  node it reads as a black square mistakenly sitting in a white one. Filling
  the node makes the centre the dark anchor the ring of light squares turns
  around, which is how a square badge wants to be used.

  The face keeps its white background: the knockout is transparent, not white,
  so the letterforms take their colour from whatever is behind them. It also
  keeps its border, invisible at rest because it is the same near-black as the
  block, and the thing that still shows selection — 2px of forest green around
  the block, exactly as on the other six. */
  width: 100%;
  height: 100%;
}

/* No artwork yet: the node still reads as a place rather than an empty box. */
.l1c-node__fallback {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  color: var(--l1c-muted);
}

.l1c-hub .l1c-node__fallback {
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-inline: 0.5em;
  text-align: center;
}

/* Hover and selection are the same visual state, reached two ways: the
border goes forest green and thickens, and the face lifts very slightly.
Scale rather than width/height so nothing around it reflows.

Nodes only (28 Sep 2026, Emma: "can we display the negative icons on
hover?"), go negative on top of that: the face inverts to the artwork's own
ink and the mark inverts to white. #231f20 is not a design token, it is the
exact fill value the six submarks are drawn with (fill="#231f20"), so the
negative face is the true inverse of the positive artwork rather than an
approximation in a nearby brand colour. filter: brightness(0) invert(1) on a
single-fill mark turns it pure white without touching the file — swap in
Lucy's supplied negative submarks instead if/when they exist (see the
motif_negative note on lot101_connected_modules_default()).

The hub is already a solid dark block with its own knockout mark (see
lot101_connected_hub_default()) and does not take this treatment: it has no
positive/negative pair to invert between, so it keeps the border-only
hover/selection state it always had. */
@media (hover: hover) and (pointer: fine) {
  .l1c-node:hover .l1c-node__face {
    background-color: #231f20;
    border-color: var(--l1c-accent);
    border-width: var(--l1c-stroke-active);
    scale: 1.06;
  }

  .l1c-node:hover .l1c-node__mark {
    filter: brightness(0) invert(1);
  }

  .l1c-hub:hover .l1c-node__face {
    border-color: var(--l1c-accent);
    border-width: var(--l1c-stroke-active);
    scale: 1.06;
  }
}

.l1c-node[aria-pressed='true'] .l1c-node__face {
  background-color: #231f20;
  border-color: var(--l1c-accent);
  border-width: var(--l1c-stroke-active);
  scale: 1.06;
}

.l1c-node[aria-pressed='true'] .l1c-node__mark {
  filter: brightness(0) invert(1);
}

.l1c-hub[aria-pressed='true'] .l1c-node__face {
  border-color: var(--l1c-accent);
  border-width: var(--l1c-stroke-active);
  scale: 1.06;
}

.l1c-node:focus-visible,
.l1c-hub:focus-visible {
  outline: 2px solid var(--color-ink, #000);
  outline-offset: 4px;
}

/* ---- node labels -------------------------------------------------------- */

.l1c-node__label {
  position: absolute;
  font-family: var(--font-eyebrow, ui-monospace, monospace);
  font-size: clamp(0.5625rem, 1.05vw, 0.75rem);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l1c-muted);
  /* max-content, then a ceiling, rather than nowrap.
  The label is absolutely positioned inside its node button, so the button is
  its containing block — left 50% inside a 70px button leaves a 35px
  shrink-to-fit width, and every two-word name breaks in half. max-content is
  what says "as wide as the words are"; the ceiling is then the safety net for
  an editor who types a long name into a module, so it wraps inside the wheel
  instead of running out through the page gutter. */
  width: max-content;
  max-width: 44cqw;
  transition: color 0.3s ease-out;
  pointer-events: none;
}

.l1c-node[aria-pressed='true'] .l1c-node__label {
  color: var(--l1c-accent);
}

/* Outward from the centre. The side is worked out at render time — see
lot101_connected_position() — because "outward" is not something CSS can be
told about a position it was handed as two percentages. */
.l1c-node--right .l1c-node__label {
  text-align: left;
  left: calc(100% + 0.6em);
  top: 50%;
  translate: 0 -50%;
}

.l1c-node--left .l1c-node__label {
  text-align: right;
  right: calc(100% + 0.6em);
  top: 50%;
  translate: 0 -50%;
}

.l1c-node--top .l1c-node__label {
  text-align: center;
  bottom: calc(100% + 0.6em);
  left: 50%;
  translate: -50% 0;
}

.l1c-node--bottom .l1c-node__label {
  text-align: center;
  top: calc(100% + 0.6em);
  left: 50%;
  translate: -50% 0;
}

/* ---- the panel ---------------------------------------------------------- */

.l1c__panels {
  display: grid;
  /*
   * Caps the narrower column at a comfortable measure rather than letting
   * it fill whatever the 0.9fr track happens to be (28 Sep 2026, part of
   * balancing the diagram against the info section — see the grid split on
   * .l1c above). Provisional alongside it, pending final copy.
   */
  max-width: 26rem;
}

.l1c-panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
}

.l1c-panel.is-selected {
  opacity: 1;
  pointer-events: auto;
}

/*
 * The six lock-ups are sized as Emma's own designed family, by WIDTH (28 Sep
 * 2026, replacing the shared-height model this used to be): Megalong 45mm,
 * Werriberri 42mm, Old Stables 40mm, The Farm and Farm Gate 36mm, Megalong
 * Valley Tea Rooms 32mm — her sizing already accounts for how each wordmark's
 * own composition reads at that width, Tea Rooms included, which is why the
 * old per-lock-up scale correction (see the git history on this file, and the
 * note on Tea Rooms in includes/modules.php) is gone rather than carried
 * forward as a second correction on top of a first.
 *
 * --l1c-logo-w is the module's width in mm, set inline in the markup.
 * --l1c-logo-max is the length Megalong (45, the widest) prints at; every
 * other width is a fraction of it, scaled by the same 45 the reference
 * widths are already in. clamp(11rem, 20vw, 17rem) is a start point tuned by
 * eye against Emma's artboard, not measured from it the way the wheel's own
 * geometry is — revisit it on staging if the six read too large or small
 * against the wheel beside them.
 *
 * height:auto, not object-fit:contain in a fixed box: with a real width and
 * an aspect-ratio (set inline per image — see
 * lot101_connected_image_aspect_ratio() in includes/helpers.php, since these
 * SVGs declare a viewBox and no width/height for height:auto to resolve
 * against on its own) the browser can size the box correctly without any
 * letterboxing to hide a mismatch.
 */
.l1c-panel {
  --l1c-logo-max: clamp(11rem, 20vw, 17rem);
}

.l1c-panel__logo {
  display: block;
  width: calc(var(--l1c-logo-w) / 45 * var(--l1c-logo-max));
  height: auto;
  /*
   * Clear space below the mark, not above it (28 Sep 2026, Emma: "we always
   * want to leave space around the logo"), now that the eyebrow sits under
   * the logo rather than over it (see wheel.php). A fixed value rather than
   * one tied to each lock-up's own rendered height, which the old shared-
   * height model made easy and the width model above does not: height now
   * varies with each mark's own aspect ratio at whatever width it prints,
   * from Megalong's shallow ~1.1rem up to Tea Rooms' ~2.8rem (it carries a
   * "MEGALONG VALLEY" eyebrow inside its own artwork, so its viewBox is
   * proportionally taller). 2rem clears most of the six comfortably; check
   * Tea Rooms specifically on staging and raise this if its eyebrow still
   * reads close to the panel's own.
   */
  margin-bottom: 2rem;
}

.l1c-panel__kind {
  /*
   * Eucalyptus, not the muted ink every other eyebrow on this plugin uses
   * (28 Sep 2026, Emma: "please colour the nav markers in a different
   * colour ie, eucalyptus"). Flagged rather than quietly substituted:
   * --color-brand-green (#828f7b) on this band's cream surface measures
   * roughly 3.2:1, under the 4.5:1 WCAG AA floor for text this size. Shipped
   * as asked; --color-accent-forest (the plugin's own --l1c-accent, already
   * proven at 2f4937) is the accessible alternative if Lucy wants to switch
   * it after seeing it on staging.
   */
  color: var(--color-brand-green, #828f7b);
  margin: 0;
}

.l1c-panel__title {
  margin: 0;
  color: var(--l1c-ink);
}

.l1c-panel__copy {
  margin: 1.5rem 0 0;
  max-width: 42ch;
  color: var(--l1c-muted);
  text-wrap: pretty;
}

.l1c-panel__cta {
  margin-top: 2rem;
  width: fit-content;
}

/* The theme's .btn-primary is display:flex, which on an anchor with
width:fit-content is fine; this is only here so the widget still has a
button under a theme that has no button system at all. */
.l1c-standalone .l1c-panel__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.5rem;
  background: var(--color-brand-green, #828f7b);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---- narrow screens ----------------------------------------------------- */

/*
 * Wheel above, panel below on narrow screens (28 Sep 2026, Emma: "can the
 * diagram sit above the info section instead of squeezing it in side by
 * side?"). This reverses the 17 Sep 2026 call recorded here until now — wheel
 * left, panel right at every width, asked for and confirmed against the
 * alternative of stacking them — on Emma's feedback of 22 Sep.
 *
 * Labels stay hidden below 1024px either way: Emma prefers the wheel without
 * them on mobile, and a six-label ring on a ~300px wheel wraps two-word names
 * and crowds whatever is next to it regardless of which layout that is.
 */

/*
 * Labels only where they are legible. Below 1024px the wheel is around 300px
 * and shrinking, and a six-label ring on it starts wrapping two-word names
 * onto two lines and crowding the panel's edge. They are dropped rather than
 * shrunk or wrapped: every node still carries its full name as its accessible
 * name, and the panel beside it names whatever is selected in type you can
 * read. Same judgement as the estate map's marker labels on 6 Sep 2026.
 */
@media (max-width: 63.99rem) {
  .l1c-node__label {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  /*
   * The gap between the wheel and the panel below it (1 Oct 2026, Emma,
   * reviewing staging on an iPhone at 390px: the selected node at the bottom
   * of the wheel, Farm Gate's, almost touched the FARM GATE wordmark). Was
   * 0.75rem, which left about 10px once that node lifted.
   *
   * The target is about 48px from the bottom edge of the lowest node, in
   * whatever state it is in, to the top of the wordmark. On the six-module
   * wheel the bottom node's face ends exactly on the wheel box's bottom edge
   * (orbit 40.57 + node half 9.43 = 50, see lot101_connected_geometry()),
   * and hover or selection then scales the face by 1.06 from its centre,
   * which pushes its edge 0.06 x 9.43% of the wheel's width further down.
   * The wheel is at most 22rem wide here (.l1c__wheel below), so the gap is
   * 3rem plus that overshoot at its largest, about 2px. On a narrower wheel
   * the overshoot is smaller, so the gap only ever comes out a fraction over
   * 48px, never under. It holds whichever module is selected, since only
   * the node at six o'clock reaches the box edge.
   *
   * Deliberately independent of --l1c-mark-scale: that scales the mark
   * inside the face, never the face itself, so it cannot move the node's
   * edge. The panel's own spacing (logo margin, copy, button) is untouched.
   */
  .l1c {
    grid-template-columns: 1fr;
    gap: calc(3rem + 0.06 * 9.43 / 100 * 22rem);
    align-items: start;
  }

  .l1c__wheel {
    padding: 0;
    /*
     * Sized and centred rather than filling the column: at full column
     * width on a wide phone or a tablet under 48rem, an uncapped wheel
     * would print larger than the ~130px ring the ~190px squeezed column
     * used to produce, and larger than the diagram is drawn to read at.
     * 22rem is close to that scale at a normal phone width; margin-inline
     * centres it now that it has no side-by-side panel to sit flush against.
     *
     * width: 100% is doing real work here, not a redundant default: this is
     * a grid item, and an inline-axis auto margin makes a grid item's used
     * justify-self behave as start rather than the default stretch, so
     * without an explicit width it shrink-wraps to its own content instead
     * of filling the column up to max-width. Found by actually rendering
     * this block (28 Sep 2026) — .l1c-wheel's width: 100%, aspect-ratio: 1
     * child had nothing definite to size itself against and collapsed
     * towards zero.
     */
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  /*
   * Everything below this used to be retuned for the ~190px column the
   * side-by-side layout squeezed the panel into: the copy dropped to 16px,
   * and the CTA and copy's own top margins were tightened to fit. None of
   * that applies once the panel has the full column to itself, so all of it
   * is gone rather than carried over unnecessarily — .l1c-panel__copy goes
   * back to the theme's own type-body-lg (set in the markup, unmasked now
   * that nothing here overrides its size), and .l1c-panel__cta and
   * .l1c-panel__copy's margins fall through to their un-overridden base
   * values above. --l1c-logo-max (see the comment on .l1c-panel above) needed
   * no mobile override either: its own clamp(11rem, 20vw, 17rem) already
   * floors at 11rem well before 20vw gets this narrow, which is a reasonable
   * width at a normal phone size without any further tuning here.
   */
}

/* ---- reduced motion ----------------------------------------------------- */

/*
 * The theme already zeroes transition-duration globally under this query, so
 * this is for the standalone case and for the one thing a duration of zero
 * does not fix: a face that still jumps 6% larger the instant it is touched.
 */
@media (prefers-reduced-motion: reduce) {
  .l1c-spoke,
  .l1c-node__face,
  .l1c-node__mark,
  .l1c-node__label,
  .l1c-panel {
    transition: none;
  }

  .l1c-node:hover .l1c-node__face,
  .l1c-hub:hover .l1c-node__face,
  .l1c-node[aria-pressed='true'] .l1c-node__face,
  .l1c-hub[aria-pressed='true'] .l1c-node__face {
    scale: 1;
  }
}

/* ---- without JavaScript ------------------------------------------------- */

/*
 * There is no separate no-JS layout here, and that is a decision rather than
 * an omission. The selected panel and the wheel are both server-rendered, so
 * a page with no script running still shows the estate's mark, the six
 * botanical nodes and the section's own statement beside them — a complete,
 * true thing that simply does not respond to clicks. Revealing the other six
 * panels in that state would mean either six stacked panels that contradict
 * the single-panel design, or markup whose aria-hidden attributes lie about
 * what is visible. The theme's estate map made the same call in the same
 * place; this matches it rather than inventing a second pattern.
 */

/* ---- utility ------------------------------------------------------------ */

.l1c-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}