/* My Lowcountry — /account/, the signed-in command centre.
 *
 * Inherits the live YOOtheme world rather than inventing one: PT Serif for headings, the
 * theme's Montserrat for everything else (never restated — it arrives by inheritance), and
 * the theme's own neutral scale. Colour is restrained: the accent is the ink, and the only
 * chroma on the page is state — a price that moved, a permission that is on.
 *
 * This is a task surface, so density is a feature and typography is a fixed rem scale, not
 * fluid. Every interactive thing here has hover, focus-visible, active and disabled; every
 * list has a loading skeleton, an error with a way out, and an empty state that teaches.
 */

#lc-account-app,
.lc-account {
  --lc-ink: #2d2e33;
  --lc-deep: #242427;
  --lc-mute: #6c6d74;
  --lc-mute-strong: #5a5b62;
  --lc-rule: #e5e5e7;
  --lc-rule-soft: #eeeef0;
  --lc-wash: #f7f7f7;
  --lc-good: #1b7a46;
  --lc-good-bg: #eaf5ee;
  --lc-warn: #b8342c;
  --lc-warn-bg: #fbeceb;
  --lc-focus: #2d2e33;
  --lc-serif: 'PT Serif', Georgia, 'Times New Roman', serif;

  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px 72px;
  color: var(--lc-ink);
  font-size: .9375rem;
  line-height: 1.55;
}

#lc-account-app *,
#lc-account-app *::before,
#lc-account-app *::after,
.lc-account *,
.lc-account *::before,
.lc-account *::after { box-sizing: border-box; }

#lc-account-app :focus-visible,
.lc-account :focus-visible {
  outline: 2px solid var(--lc-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- masthead */

.lca-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 4px 0 26px;
}
.lca-mast-when {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lc-mute);
  margin: 0 0 10px;
}
.lca-mast h1 {
  font-family: var(--lc-serif);
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  color: var(--lc-deep);
}
.lca-mast-sub {
  margin: 10px 0 0;
  color: var(--lc-mute-strong);
  max-width: 62ch;
}
.lca-mast-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* Where you live. Sits in the dateline, so it has to read as type until you reach for it. */
.lca-town { display: inline-flex; align-items: baseline; gap: 8px; }
.lca-town-sel {
  font: inherit;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lc-mute);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--lc-rule);
  padding: 0 16px 2px 0;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lc-mute) 50%),
                    linear-gradient(135deg, var(--lc-mute) 50%, transparent 50%);
  background-position: right 5px top 55%, right 1px top 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: color .15s ease, border-color .15s ease;
}
.lca-town-sel:hover { color: var(--lc-ink); border-bottom-color: var(--lc-mute); }
.lca-town-sel[disabled] { opacity: .5; cursor: wait; }
.lca-town-said { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lc-good); }

/* ---------------------------------------------------------------- buttons */

.lca-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--lc-deep);
  border-radius: 3px;
  background: var(--lc-deep);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lca-btn:hover { background: #000; border-color: #000; color: #fff; text-decoration: none; }
.lca-btn:active { background: #3a3b41; border-color: #3a3b41; }
.lca-btn[disabled], .lca-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lca-btn-ghost { background: transparent; color: var(--lc-ink); border-color: var(--lc-rule); }
.lca-btn-ghost:hover { background: var(--lc-wash); border-color: var(--lc-mute); color: var(--lc-ink); }
.lca-btn-sm { padding: 6px 12px; font-size: .8125rem; }

.lca-link {
  color: var(--lc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lc-rule);
  transition: text-decoration-color .15s ease;
}
.lca-link:hover { color: var(--lc-deep); text-decoration-color: var(--lc-mute); }

/* ---------------------------------------------------------------- section nav */

.lca-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
  border-top: 1px solid var(--lc-rule);
  border-bottom: 1px solid var(--lc-rule);
  margin-bottom: 34px;
}
.lca-nav::-webkit-scrollbar { display: none; }
.lca-nav a {
  flex: 0 0 auto;
  padding: 13px 16px;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lc-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.lca-nav a:hover { color: var(--lc-ink); }
.lca-nav a[aria-current="true"] { color: var(--lc-deep); border-bottom-color: var(--lc-deep); }
.lca-nav .lca-n-count {
  display: inline-block;
  margin-left: 6px;
  font-size: .6875rem;
  color: var(--lc-mute);
}

/* ---------------------------------------------------------------- sections */

.lca-sec { margin: 0 0 52px; scroll-margin-top: 64px; }
.lca-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lc-rule);
  margin-bottom: 4px;
}
.lca-sec-head h2 {
  font-family: var(--lc-serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin: 0;
  color: var(--lc-deep);
}
.lca-sec-head p { margin: 4px 0 0; font-size: .8125rem; color: var(--lc-mute); }
.lca-sec-aside { font-size: .8125rem; color: var(--lc-mute); white-space: nowrap; }

/* ---------------------------------------------------------------- change feed */

.lca-feed { list-style: none; margin: 0; padding: 0; }
.lca-feed li { border-bottom: 1px solid var(--lc-rule-soft); }
.lca-feed-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 10px 14px 0;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}
a.lca-feed-row:hover { background: var(--lc-wash); text-decoration: none; color: inherit; }
.lca-feed-img {
  width: 84px;
  height: 62px;
  object-fit: cover;
  display: block;
  background: var(--lc-wash);
  border-radius: 2px;
}
.lca-feed-t {
  font-family: var(--lc-serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--lc-deep);
}
.lca-feed-m { font-size: .8125rem; color: var(--lc-mute-strong); margin-top: 3px; }
.lca-feed-new {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lc-deep);
  margin-right: 7px;
  vertical-align: 2px;
}

.lca-chip {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
  white-space: nowrap;
  background: var(--lc-wash);
  color: var(--lc-mute-strong);
}
.lca-chip-good { background: var(--lc-good-bg); color: var(--lc-good); }
.lca-chip-warn { background: var(--lc-warn-bg); color: var(--lc-warn); }
.lca-chip-ink { background: var(--lc-deep); color: #fff; }

/* ---------------------------------------------------------------- kind tabs + cards */

.lca-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 20px;
}
.lca-tab {
  padding: 7px 14px;
  border: 1px solid var(--lc-rule);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: .8125rem;
  color: var(--lc-mute-strong);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lca-tab:hover { border-color: var(--lc-mute); color: var(--lc-ink); }
.lca-tab[aria-selected="true"] {
  background: var(--lc-deep);
  border-color: var(--lc-deep);
  color: #fff;
}
.lca-tab span { opacity: .65; margin-left: 5px; }

/* Lists sit above the kind tabs, because a list crosses kinds and a kind does not. */
.lca-lists {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lc-rule-soft);
}
.lca-list-pill {
  padding: 6px 13px;
  border: 1px solid var(--lc-rule);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: .8125rem;
  color: var(--lc-mute-strong);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lca-list-pill:hover { border-color: var(--lc-mute); color: var(--lc-ink); }
.lca-list-pill[aria-pressed="true"] {
  background: var(--lc-wash);
  border-color: var(--lc-mute);
  color: var(--lc-deep);
  font-weight: 600;
}
.lca-list-pill span { opacity: .6; margin-left: 6px; font-weight: 400; }
.lca-list-new {
  border: 0;
  background: none;
  font: inherit;
  font-size: .8125rem;
  color: var(--lc-mute);
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--lc-rule);
  transition: color .15s ease;
}
.lca-list-new:hover { color: var(--lc-ink); }
.lca-list-new[disabled] { opacity: .5; cursor: wait; }

.lca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 20px 18px;
}

/* Quiet until you reach for it — one of these sits on every card. */
.lca-card-list {
  margin-top: auto;          /* pinned to the bottom so a row of them lines up */
  padding-top: 6px;
  width: 100%;
  font: inherit;
  font-size: .75rem;
  color: var(--lc-mute);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 5px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.lca-card:hover .lca-card-list,
.lca-card-list:focus-visible { border-color: var(--lc-rule); color: var(--lc-ink); }
.lca-card-list[disabled] { opacity: .5; cursor: wait; }
/* Column, so the list picker can be pinned to the bottom of every card. Titles run to one line
   or two; without this the pickers step up and down across a row and the grid reads ragged. */
.lca-card { position: relative; display: flex; flex-direction: column; }
.lca-card-a {
  display: block;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
.lca-card-a:hover { color: inherit; text-decoration: none; }
.lca-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lc-wash);
  border-radius: 2px;
  transition: opacity .15s ease;
}
.lca-card-a:hover .lca-card-img { opacity: .88; }
.lca-card-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--lc-wash);
  border-radius: 2px;
  color: var(--lc-mute);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lca-card-t {
  margin: 9px 0 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lc-deep);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lca-card-m { margin: 3px 0 0; font-size: .8125rem; color: var(--lc-mute); }
.lca-card-x {
  position: absolute;
  top: 7px; right: 7px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 36, 39, .72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.lca-card:hover .lca-card-x,
.lca-card-x:focus-visible { opacity: 1; }
.lca-card-x:hover { background: #000; }
.lca-card-x[disabled] { opacity: .5; cursor: wait; }
@media (hover: none) { .lca-card-x { opacity: 1; } }

/* ---------------------------------------------------------------- rows (searches, alerts, record) */

.lca-rows { list-style: none; margin: 0; padding: 0; }
.lca-rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--lc-rule-soft);
}
.lca-row-t { font-weight: 600; color: var(--lc-deep); }
.lca-row-m { font-size: .8125rem; color: var(--lc-mute); margin-top: 2px; }
.lca-row-act { display: flex; align-items: center; gap: 10px; }

/* -- advertising panel --
 *
 * ⛔ NO SPACING VALUE AND NO TYPE STEP THAT IS NOT ALREADY IN THIS FILE. Every gap below has an
 * existing owner: 4px is .lca-sec-head's rhythm, 8px is .lca-btn's gap, 10px is .lca-row-act's,
 * 62ch is .lca-mast-sub's measure. The type steps are the body root, .lca-feed-t's 1.0625rem,
 * .lca-row-m's .8125rem and .lca-chip's .6875rem.
 *
 * ⚠ THE COLUMN GAP IS 52px AND THE APPROVED SOURCE DRAWS 56px. 52 is .lca-sec's own margin and
 * 56 belongs to nothing here; four pixels across a 52px gutter is below the threshold at which a
 * reader could name the difference, and a value invented for one rule is a scale with a hole in it.
 * The same substitution runs beneath: 8px stands where the source drew 7px.
 *
 * ⛔ NO OPACITY ON ANY TEXT. Opacity multiplies against the token and has already put an
 * explanatory sentence far below a readable ratio elsewhere in this product. Where a row must read
 * as inactive, the state chip says so in a word.
 *
 * ⚠ THE COLLAPSE QUERY LIVES INSIDE THIS BRACKET rather than with the others at the foot of the
 * file. The suite that measures this panel excises everything between these two comments before it
 * builds the set of committed values, so that a value the panel introduced cannot vouch for itself.
 * A panel rule written outside the bracket would be counted as its own evidence. */

.lca-adv-main { flex: 1 1 auto; min-width: 0; }
.lca-adv-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }

/* The row's subject, at .lca-feed-t's step.
 *
 * A second class beside the shared one, never a rule reaching .lca-row-t through an ancestor: three
 * other lists on this page wear that class, and a checker that resolves a class to a size by name
 * reads a scoped override as a global one. At body size the address sat level with the sentence
 * below it and the row offered nothing to scan a stack of rows by. */
.lca-adv-addr { font-size: 1.0625rem; }

/* Figures in a column of rows line up under each other. */
.lca-adv-meta { font-variant-numeric: tabular-nums; }

/* THE ROW BODY.
 *
 * Two columns above the collapse — what the placement reached on the left with its controls
 * beneath it, the benchmark on the right — and one column below it, in DOM order.
 *
 * ⛔ THE CONTROLS ARE PINNED TO THE BOTTOM of the left column rather than following the sentence.
 * The benchmark is a taller block than two lines of statement, so controls that followed the text
 * would sit against the side of it with the row's own rule far below them, and the row would read
 * as though it had ended twice. */
.lca-adv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "say bench"
    "act bench";
  grid-template-rows: auto 1fr;
  column-gap: 52px;
  row-gap: 16px;
  margin-top: 16px;
}
.lca-adv-say { grid-area: say; min-width: 0; }
/* The row's own top margin owns the space above the statement; a second one beneath it would make
 * a row with no finding sit further from its address than a row with one. */
.lca-adv-say > :first-child { margin-top: 0; }
.lca-adv-row > .lca-adv-bench { grid-area: bench; }
.lca-adv-row > .lca-adv-act { grid-area: act; align-self: end; }
/* A placement that has not started, or has stopped, reports nothing about itself — so the row body
 * has no statement block and the benchmark is its first child. Selected that way rather than by a
 * flag the renderer sets, because the condition IS the absence: a modifier class would be a second
 * statement of the same fact, free to disagree with the DOM it describes.
 *
 * Its controls belong under the address. Pinned to the foot of a column with nothing above them
 * they read as the end of a row whose middle failed to load, which is the reading this whole
 * surface exists to avoid. */
.lca-adv-bench:first-child ~ .lca-adv-act { align-self: start; }
/* ⛔ AND THE GAP ABOVE THEM GOES WITH IT. A grid charges the row gap between two tracks whether or
 * not the first one holds anything, so a quiet row paid 16px for a statement it does not have and
 * its controls landed 16px below the benchmark's top edge instead of level with it — an offset
 * small enough to read as a misalignment rather than as an intention. Restored in the collapse
 * query below, where that same gap is the only thing separating the benchmark from the controls. */
.lca-adv-row:has(> .lca-adv-bench:first-child) { row-gap: 0; }

.lca-adv-find { max-width: 62ch; }
.lca-adv-diag { margin-top: 9px; max-width: 62ch; font-size: .8125rem; color: var(--lc-mute-strong); }

/* A benchmark is not a result the placement produced, and the field it sits in is what stops it
 * reading as one — it is about the listing, and it was true before the placement started. The rule
 * across the top is the weight the section heading already uses, so the block reads as a stated
 * aside rather than as a fifth figure in the row. */
.lca-adv-bench {
  width: 372px;
  background: var(--lc-wash);
  border-top: 2px solid var(--lc-deep);
  padding: 15px 18px;
}
.lca-adv-bench-legend {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lc-mute-strong);
  margin-bottom: 9px;
}
.lca-adv-bench-line {
  font-size: .8125rem;
  color: var(--lc-mute-strong);
  font-variant-numeric: tabular-nums;
}
.lca-adv-bench-line + .lca-adv-bench-line { margin-top: 8px; }
/* ⛔ A median over four listings is not a market, so the block states the population it was
 * computed over — and states it at the same size as the median, because it is the half that makes
 * the median trustworthy. Set smaller it read as a footnote to a figure it is a condition of. */
.lca-adv-bench-pop {
  font-size: .8125rem;
  color: var(--lc-mute-strong);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.lca-adv-act { flex-wrap: wrap; row-gap: 8px; }
.lca-adv-said { font-size: .8125rem; color: var(--lc-ink); }
.lca-adv-ref { font-size: .8125rem; color: var(--lc-mute-strong); }
.lca-adv-stop { color: var(--lc-warn); }
.lca-adv-stop:hover { color: var(--lc-warn); border-color: var(--lc-warn); background: var(--lc-warn-bg); }
.lca-adv-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; }
/* Its own line beneath the actions rather than inside them: a link squeezed between two buttons
 * is a link nobody can select cleanly, and selecting it is the whole recovery. */
.lca-adv-refused {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: .8125rem;
}
/* Selectable, and never truncated: a link the sender cannot read in full is a link they cannot
 * send. It is not a text input — this panel has no form control, and one below the platform's
 * threshold zooms the viewport at the narrow width. */
.lca-adv-link { color: var(--lc-ink); overflow-wrap: anywhere; max-width: 62ch; }

/* The collapse. 860px is the width .lca-gate already collapses at, and it is the right one here for
 * the same reason: below it the fixed right column leaves the statement too little room to hold a
 * readable line. */
@media (max-width: 860px) {
  .lca-adv-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "say"
      "bench"
      "act";
    grid-template-rows: none;
  }
  /* Stated at the same specificity as the rule it is undoing. One column means every gap is between
   * two blocks that are both there, so nothing is being charged for an absence. */
  .lca-adv-row:has(> .lca-adv-bench:first-child) { row-gap: 16px; }
  .lca-adv-bench { width: auto; }
}
/* -- end advertising panel -- */

/* permission switches */
.lca-perm { display: flex; align-items: center; gap: 14px; }
.lca-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 25px;
  border: 1px solid var(--lc-rule);
  border-radius: 999px;
  background: var(--lc-wash);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.lca-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lc-rule);
  transition: transform .15s ease;
}
.lca-switch[aria-checked="true"] { background: var(--lc-deep); border-color: var(--lc-deep); }
.lca-switch[aria-checked="true"]::after { transform: translateX(19px); border-color: var(--lc-deep); }
.lca-switch[disabled] { opacity: .5; cursor: wait; }
.lca-perm-state { font-size: .8125rem; color: var(--lc-mute); min-width: 8ch; }

/* ---------------------------------------------------------------- business panel */

.lca-biz {
  border: 1px solid var(--lc-rule);
  border-radius: 3px;
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.lca-biz-n {
  font-family: var(--lc-serif);
  font-size: 1.5rem;
  color: var(--lc-deep);
  line-height: 1;
}
.lca-biz-l { font-size: .8125rem; color: var(--lc-mute); margin-top: 4px; }

/* ---------------------------------------------------------------- states */

.lca-empty {
  margin: 0;
  padding: 26px 0 6px;
  color: var(--lc-mute-strong);
  max-width: 60ch;
}
.lca-empty strong { color: var(--lc-ink); font-weight: 600; display: block; margin-bottom: 4px; }

.lca-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--lc-rule);
  border-radius: 3px;
  background: var(--lc-wash);
  color: var(--lc-ink);
}

.lca-sk { border-radius: 2px; background: var(--lc-rule-soft); position: relative; overflow: hidden; }
.lca-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: lca-shimmer 1.3s infinite;
}
@keyframes lca-shimmer { 100% { transform: translateX(100%); } }
.lca-sk-row { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 14px 0; align-items: center; }
.lca-sk-img { width: 84px; height: 62px; }
.lca-sk-l { height: 13px; margin-bottom: 8px; }
.lca-sk-l.w70 { width: 70%; }
.lca-sk-l.w40 { width: 40%; margin-bottom: 0; }

/* ---------------------------------------------------------------- sign-in */

.lca-gate {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 12px 0 40px;
}
.lca-gate h1 {
  font-family: var(--lc-serif);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--lc-deep);
}
.lca-gate-lede { color: var(--lc-mute-strong); margin: 0 0 22px; }
.lca-seg { display: flex; border: 1px solid var(--lc-rule); border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
.lca-seg button {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  font: inherit;
  font-size: .875rem;
  color: var(--lc-mute-strong);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lca-seg button:hover { background: var(--lc-wash); color: var(--lc-ink); }
.lca-seg button[aria-selected="true"] { background: var(--lc-deep); color: #fff; }
.lca-form { display: flex; flex-direction: column; gap: 12px; }
.lca-field label {
  display: block;
  font-size: .8125rem;
  color: var(--lc-mute-strong);
  margin-bottom: 5px;
}
.lca-in {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--lc-rule);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: .9375rem;
  color: var(--lc-ink);
  transition: border-color .15s ease;
}
.lca-in:hover { border-color: var(--lc-mute); }
.lca-in:focus { border-color: var(--lc-deep); outline: none; box-shadow: 0 0 0 3px rgba(45, 46, 51, .1); }
.lca-in[aria-invalid="true"] { border-color: var(--lc-warn); }
.lca-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lca-err { margin: 0; min-height: 1.2em; font-size: .8125rem; color: var(--lc-warn); }
.lca-gate-why { border-left: 1px solid var(--lc-rule); padding-left: 44px; }
.lca-gate-why h2 {
  font-family: var(--lc-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--lc-deep);
}
.lca-gate-why ul { list-style: none; margin: 0; padding: 0; }
.lca-gate-why li { padding: 11px 0; border-bottom: 1px solid var(--lc-rule-soft); }
.lca-gate-why b { display: block; color: var(--lc-deep); font-weight: 600; }
.lca-gate-why span { font-size: .8125rem; color: var(--lc-mute-strong); }

/* ---------------------------------------------------------------- foot */

.lca-foot {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--lc-rule);
  font-size: .8125rem;
  color: var(--lc-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}

/* ---------------------------------------------------------------- the shell
 *
 * A persistent rail of groups, banded, with exactly one group mounted as a panel. Two levels
 * of depth, and the second level is a scroll rather than a nav.
 *
 * The rail is a second neutral layer against a white panel, so it separates without a border.
 * The current group is marked by weight and a 2px bar on the leading edge — a filled pill
 * would put a block of ink beside every other entry it is trying to be quieter than.
 */

.lc-account {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 0 40px;
  /* The theme's navbar is fixed from the first paint, so a rail measured from 0 parks its
     first band underneath it. 80px of navbar and a little air, in one place. */
  --lc-railtop: 96px;
}
.lc-account #lc-account-app { max-width: none; margin: 0; padding: 0; }

/* --- rail --- */

.lca-rail {
  position: sticky;
  top: var(--lc-railtop);
  /* Full-height, because a wash that stops where the last entry does is a card — and a card
     is the one thing a rail of four bands and twenty entries must never look like. Capped and
     scrolled at the same measure, so a long rail cannot run off the bottom of a laptop. */
  min-height: calc(100vh - var(--lc-railtop) - 24px);
  max-height: calc(100vh - var(--lc-railtop) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lc-wash);
  padding: 18px 0 20px;
}
.lca-rail-top,
.lca-rail-a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px 9px 20px;
  color: var(--lc-mute-strong);
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .12s ease;
}
.lca-rail-top { font-weight: 600; padding-bottom: 14px; }
.lca-rail-top:hover,
.lca-rail-a:hover { color: var(--lc-ink); text-decoration: none; }
.lca-rail-top.is-on,
.lca-rail-a.is-on { color: var(--lc-deep); font-weight: 600; }
.lca-rail-top.is-on::before,
.lca-rail-a.is-on::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--lc-ink);
}
.lca-rail-t { flex: 1 1 auto; min-width: 0; }
/* The one piece of chroma in the rail, and it is a state rather than a decoration. */
.lca-rail-n {
  flex: 0 0 auto;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--lc-good);
}

/* Band headings are the only uppercase on the page. */
.lca-band {
  margin: 18px 0 4px;
  padding: 0 18px 0 20px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lc-mute);
}
.lca-rail-list { list-style: none; margin: 0; padding: 0; }

/* --- panel --- */

.lca-panel { min-width: 0; padding-top: 4px; }
.lca-back { display: none; }

.lca-panel-head { padding: 0 0 22px; }
.lca-panel-head h1 {
  font-family: var(--lc-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--lc-deep);
}
.lca-panel-head p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  color: var(--lc-mute-strong);
}

.lca-jump {
  border-top: 1px solid var(--lc-rule);
  border-bottom: 1px solid var(--lc-rule);
  padding: 10px 0;
  margin: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lca-jump::-webkit-scrollbar { display: none; }
.lca-jump ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 22px; white-space: nowrap;
}
.lca-jump a {
  font-size: .8125rem;
  color: var(--lc-mute);
  text-decoration: none;
  transition: color .12s ease;
}
.lca-jump a:hover { color: var(--lc-ink); }

/* --- a setting is a row, not an object --- */

.lca-set { padding: 38px 0 6px; scroll-margin-top: var(--lc-railtop); }
.lca-set + .lca-set { border-top: 1px solid var(--lc-rule); }
.lca-set > h2 {
  font-family: var(--lc-serif);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 3px;
  color: var(--lc-deep);
}
.lca-set > p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: .8125rem;
  color: var(--lc-mute);
}

.lca-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 15px 0;
  border-top: 1px solid var(--lc-rule-soft);
}
.lca-setting:first-of-type { border-top: 0; }
.lca-setting-main { flex: 1 1 260px; min-width: 0; }
.lca-setting-t { font-weight: 600; color: var(--lc-deep); }
.lca-setting-m { margin-top: 2px; font-size: .8125rem; color: var(--lc-mute); }
.lca-setting-act { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

/* A stated fact, in the value's own colour. */
.lca-state { font-weight: 600; font-variant-numeric: tabular-nums; }
.lca-state.is-good { color: var(--lc-good); }
.lca-state.is-warn { color: var(--lc-warn); }
.lca-state.is-quiet { font-weight: 400; color: var(--lc-mute); }

/* A select saves on change, so it is the control wherever the answer is one of a short list. */
.lca-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 74px;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--lc-rule);
  border-radius: 2px;
  background: #fff no-repeat right 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236c6d74' stroke-width='1.4'/%3E%3C/svg%3E");
  color: var(--lc-ink);
  font: inherit;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
}
.lca-select:hover { border-color: var(--lc-mute); }
.lca-select[disabled] { opacity: .5; cursor: wait; }

/* --- the switch --- */

.lca-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px; height: 26px;
  flex: 0 0 46px;
  margin: 0;
  border: 1px solid var(--lc-rule);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.lca-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lc-mute);
  transition: transform .14s ease, background .14s ease;
}
.lca-switch:hover { border-color: var(--lc-mute); }
.lca-switch[aria-checked="true"] { background: var(--lc-good); border-color: var(--lc-good); }
.lca-switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.lca-switch[disabled] { opacity: .5; cursor: wait; }

/* --- the overview strip --- */

.lca-digest { list-style: none; margin: 0 0 30px; padding: 0; }
.lca-digest li { border-bottom: 1px solid var(--lc-rule); }
.lca-digest a {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 2px;
  color: var(--lc-deep);
  font-size: .9375rem;
  text-decoration: none;
}
.lca-digest a:hover { color: #000; text-decoration: none; }
.lca-digest-dot {
  flex: 0 0 7px; width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lc-mute);
}
.lca-digest-dot.is-good { background: var(--lc-good); }
.lca-digest-dot.is-warn { background: var(--lc-warn); }

.lca-unresolved {
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--lc-wash);
  font-size: .875rem;
  color: var(--lc-mute-strong);
}

/* --- phone: /account/ IS the rail --- */

@media (max-width: 767px) {
  /* The theme's navbar does not stick on a phone, so the only thing overhead is this panel's
     own way out — and that is what a jumped-to section has to clear. */
  .lc-account { display: block; --lc-railtop: 56px; }

  .lca-rail {
    position: static;
    /* Both caps have to come off together. Leaving the min-height on left a viewport-tall
       empty column above everything else on the page, and it looked exactly like a page that
       had failed to load rather than like a rail. */
    min-height: 0;
    max-height: none;
    background: transparent;
    padding: 0 0 8px;
    margin: 0 0 4px;
  }
  .lca-rail-top { display: none; }
  .lca-band { padding: 0; margin: 22px 0 2px; }
  .lca-rail-a {
    min-height: 56px;
    padding: 0 4px 0 14px;
    align-items: center;
    font-size: 1rem;
    color: var(--lc-deep);
    border-bottom: 1px solid var(--lc-rule);
  }
  .lca-rail-a.is-on::before { top: 0; bottom: 0; }

  /* One sticky element on a panel, and it is the way out. A real link, because somebody
     who arrived from a notification has no history to go back through. */
  .lc-account.is-panel .lca-rail { display: none; }
  .lca-back {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -15px 16px;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid var(--lc-rule);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--lc-mute-strong);
    text-decoration: none;
  }
  .lca-back::before { content: "\2190"; margin-inline-end: 8px; }
  .lca-back:hover { color: var(--lc-ink); text-decoration: none; }

  .lca-panel-head h1 { font-size: 1.625rem; }
  .lca-setting { align-items: flex-start; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .lca-gate { grid-template-columns: 1fr; gap: 34px; }
  .lca-gate-why { border-left: 0; border-top: 1px solid var(--lc-rule); padding-left: 0; padding-top: 26px; }
}
@media (max-width: 640px) {
  .lca-mast h1 { font-size: 1.75rem; }
  .lca-feed-row { grid-template-columns: 64px 1fr; grid-template-areas: "img text" "chip chip"; gap: 12px; }
  .lca-feed-img { grid-area: img; width: 64px; height: 52px; }
  .lca-feed-row > div:nth-child(2) { grid-area: text; }
  .lca-feed-row > .lca-chip { grid-area: chip; justify-self: start; }
  .lca-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .lca-sec-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  #lc-account-app *,
  #lc-account-app *::after { transition: none !important; animation: none !important; }
}