/* front screens (SPEC §3.3): /find, /signin, Settings, Connect, Sign-in
   methods, Privacy, Remove me, errors, slow down, the confirm gate, claim
   progress. Only screen layout lives here; every token and component is in
   ../app.css. Loaded first by app.css's @import, so a system rule of equal
   specificity wins. */

/* ---------------------------------------------------------------- standalone shell (/find, /signin) */

.solo-body { margin: 0; background: var(--paper); color: var(--ink); }
.solo {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 0 var(--pad-page-side);
}
.solo-top { display: flex; align-items: center; height: var(--topbar-h); }
.solo-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 600; min-height: 44px; }
@media (hover: hover) { .solo-wordmark:hover { text-decoration: none; } }
.solo-main {
  flex: 1;
  width: 100%; max-width: var(--w-form);
  margin: var(--space-6) auto var(--space-7);
}
.solo-head { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
.solo-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.solo-text { margin-bottom: var(--space-3); }
.solo-form { margin: 0; }
.solo-note { margin-top: var(--space-3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.solo-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
  margin-top: var(--space-4); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2);
}
.solo-links a { font-weight: 500; min-height: 24px; display: inline-flex; align-items: center; }
.solo-or {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0; font-size: var(--fs-meta); color: var(--text-3);
}
.solo-or::before, .solo-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.solo-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5);
  width: 100%; max-width: var(--w-content); margin: 0 auto;
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2);
}
.signin-google { gap: var(--space-2); }
@media (max-width: 720px) {
  .solo-main { margin: var(--space-4) auto var(--space-6); }
  .solo-input-action { flex-direction: column; }
  .solo-input-action .btn { width: 100%; }
}

/* ---------------------------------------------------------------- forms inside the shell */

.front-form { max-width: var(--w-form); }
.front-form + .front-form, .front-form-split { margin-top: var(--gap-section); padding-top: var(--gap-section); border-top: 1px solid var(--line); }
.front-form-split h2 { margin-bottom: var(--space-3); }
.front-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.front-form .field-help { margin-top: var(--space-2); }
.front-after { margin-top: var(--space-3); }

/* ---------------------------------------------------------------- label · value lists (Settings, Remove me) */

.front-lv-list {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
}
.front-lv-list > .lv { margin: 0; }
.front-lv-list > .lv + .lv { border-top: 1px solid var(--line); }
.front-lv-list dd { margin: 0; }
.front-lv-list form.lv { margin: 0; }
.front-lv-list form.lv .btn, .front-lv-list .lv > .btn, .front-lv-list .lv > form { justify-self: end; }
a.front-lv-link { color: inherit; }
@media (hover: hover) { a.front-lv-link:hover { text-decoration: none; } }
a.front-lv-link .lv-value { color: var(--text-2); font-size: var(--fs-heading); font-weight: 400; }
.front-lv-list + .front-actions, .front-lv-list + .front-confirm { margin-top: var(--space-3); }

/* A row that opens (Calendars · 2): the summary is the row. */
.front-lv-more { display: block; padding: 0; }
.front-lv-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  min-height: var(--row-min); padding: var(--space-3) var(--space-4);
  list-style: none;
}
.front-lv-summary::-webkit-details-marker { display: none; }
.front-lv-summary::after {
  content: ""; width: 8px; height: 8px; margin-bottom: 4px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2);
  transform: rotate(45deg);
}
.front-lv-more[open] > .front-lv-summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
@media (max-width: 720px) {
  .front-lv-summary .lv-value { grid-column: auto; grid-row: auto; text-align: right; }
}

.front-sublist { display: grid; padding: 0 var(--space-4) var(--space-3); }
.front-sublist > li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--line);
}
.front-sublist > li > :first-child { min-width: 0; overflow-wrap: anywhere; }

/* Your Luma events: one fold under the section heading. */
.front-events { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-list); }
.front-events-summary {
  margin: 0; padding: var(--space-3) var(--space-4); min-height: var(--row-min);
  align-items: center; list-style: none;
}
.front-events-summary::-webkit-details-marker { display: none; }
.front-events-summary h2 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.front-group-head { padding: var(--space-3) var(--space-4) var(--space-1); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--text-2); }

/* Confirm in place (Disconnect, Delete account): the summary is the button. */
.front-confirm > summary { list-style: none; display: inline-flex; }
.front-confirm > summary::-webkit-details-marker { display: none; }
.front-confirm[open] > summary { display: none; }
.front-confirm-body {
  display: grid; gap: var(--space-3);
  padding: var(--space-4); max-width: var(--w-form);
  background: var(--danger-wash); border: 1px solid var(--danger); border-radius: var(--radius-control);
}

/* Reconnect warning: a notice holding a heading, a line and the primary. */
.front-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.front-warn h2 { color: var(--warn); }
.front-warn p { color: var(--ink); }

/* ---------------------------------------------------------------- Connect */

.front-two { display: grid; grid-template-columns: repeat(2, minmax(0, var(--w-side))); gap: var(--space-4); margin-bottom: var(--space-5); }
.front-two .card { display: grid; gap: var(--space-2); align-content: start; }
.front-bullets { display: grid; gap: var(--space-1); color: var(--text-2); }
.front-why { margin-top: var(--space-4); max-width: var(--w-form); }
@media (max-width: 720px) { .front-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Privacy */

.front-doc { max-width: var(--w-read); }
.front-doc > section { margin-top: var(--gap-section); }
.front-doc > section > h2 { margin-bottom: var(--space-3); }
.front-doc ul { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); list-style: disc; }
.front-doc li::marker { color: var(--muted); }
.front-doc strong { font-weight: 500; }
.front-doc code { font-family: var(--font); font-size: var(--fs-meta); font-weight: 500; overflow-wrap: anywhere; }
.front-table-wrap { margin-top: var(--space-3); }
.front-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}
.front-table th { text-align: left; font-weight: 500; color: var(--text-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.front-table td { padding: var(--space-2) var(--space-3); vertical-align: top; border-top: 1px solid var(--line); }
.front-table td:first-child { font-weight: 500; white-space: nowrap; }
@media (max-width: 720px) {
  .front-table, .front-table tbody, .front-table tr, .front-table td { display: block; width: 100%; }
  .front-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .front-table tr { padding: var(--space-2) var(--space-3); }
  .front-table tr + tr { border-top: 1px solid var(--line); }
  .front-table td { padding: 2px 0; border: 0; white-space: normal; }
  .front-table td:first-child { white-space: normal; }
}

/* ---------------------------------------------------------------- errors, slow down */

/* One gap: the line sits 12 under the title and its button 12 under it (a
   margin on the line stacked to 20). */
.front-status { display: grid; justify-items: start; gap: var(--gap-stack); max-width: var(--w-form); }
.front-status-line { color: var(--text-2); margin: 0; }
.front-status > .form-actions { margin-top: 0; }

/* ---------------------------------------------------------------- confirm gate, claim progress */

.confirm-gate-why { font-weight: 500; }
.confirm-gate-body p + p { margin-top: 0; }
.claim-progress { max-width: var(--w-form); }
.claim-status .notice { margin: var(--space-2) 0 var(--space-3); }

/* Phone: a row that only opens a page keeps its chevron on the right. */
@media (max-width: 720px) {
  a.front-lv-link .lv-value { grid-column: 2; grid-row: 1; }
}
.front-danger-zone { padding-top: var(--space-5); border-top: 1px solid var(--line); }
/* Delete account: a quiet link at the foot, red only once opened. */
.front-danger-zone .front-delete-link { list-style: none; cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; font-size: var(--fs-meta); color: var(--text-3); }
.front-danger-zone .front-delete-link::-webkit-details-marker { display: none; }
.front-danger-zone details[open] > .front-delete-link { color: var(--danger); }
@media (hover: hover) { .front-danger-zone .front-delete-link:hover { color: var(--danger); } }
/* A row's value beside its chevron: "From LinkedIn · 26 Sep ›". */
a.front-lv-link .lv-value { display: inline-flex; align-items: center; gap: var(--space-2); }
a.front-lv-link .front-lv-note { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }

/* Sign out: a whole row that is the button. */
.front-lv-form { margin: 0; }
.front-lv-form + .lv, .lv + .front-lv-form { border-top: 1px solid var(--line); }
.front-lv-button {
  width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.front-lv-button .lv-label { color: var(--accent); font-weight: 500; }
.front-lv-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A row's second line, under its label (Settings · Connect). */
.lv-sub { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); font-weight: 400; }
a.front-lv-link > .lv-label { white-space: nowrap; }