/* PINGRIO 1.1 interface foundation. Load after the existing feature styles.
   Content artwork, cover palettes, map geometry and interaction states remain owned
   by their existing modules. These tokens style application chrome only. */
:root {
  color-scheme: light;
  --green: #292d31;
  --deep: #202428;
  --ink: #25282c;
  --muted: #5f666d;
  --line: #e3e6e8;
  --paper: #f7f8f9;
  --ui-surface: #fff;
  --ui-surface-soft: #f1f3f5;
  --ui-control-border: #858d96;
  --ui-action-bg: #292d31;
  --ui-action-ink: #fff;
  --ui-overlay: #fffffff2;
  --ui-brand-name: #53585e;
  --ui-muted-strong: #454c53;
  --ui-heart: #ba3754;
  --ui-heart-bg: #fff2f4;
  --saved-ink: #425a3b;
  --saved-bg: #e7ede1;
  --ui-danger: #a13143;
  --ui-danger-bg: #fff0ec;
  --ui-danger-border: #edc9c2;
  --ui-warning: #6c5423;
  --ui-warning-bg: #fff3d6;
  --ui-purple: #77618e;
  --ui-purple-bg: #f2edf6;
  --ui-text-xs: .75rem;
  --ui-text-sm: .875rem;
  --ui-text: .9375rem;
  --ui-text-lg: 1.0625rem;
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-radius-sm: .5rem;
  --ui-radius: .75rem;
  --ui-radius-lg: 1rem;
  --ui-focus: #292d31;
  --ui-motion: 140ms ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --green: #eef1f5;
  --deep: #e5eaf0;
  --ink: #eef1f5;
  --muted: #aeb8c5;
  --line: #414c5a;
  --paper: #15191f;
  --ui-surface: #20262e;
  --ui-surface-soft: #2a323d;
  --ui-control-border: #748296;
  --ui-action-bg: #e5eaf0;
  --ui-action-ink: #17202b;
  --ui-overlay: #20262ef2;
  --ui-brand-name: #f5f7fa;
  --ui-muted-strong: #cad3df;
  --ui-heart: #ff8fa9;
  --ui-heart-bg: #3b2530;
  --saved-ink: #b7d4a9;
  --saved-bg: #293b2c;
  --ui-danger: #ffabb5;
  --ui-danger-bg: #3d262e;
  --ui-danger-border: #975965;
  --ui-warning: #f0cd8b;
  --ui-warning-bg: #3a3223;
  --ui-purple: #ccb5e4;
  --ui-purple-bg: #352c40;
  --ui-focus: #d4e3fa;
}

html { background: var(--paper); scrollbar-color: var(--ui-control-border) var(--paper); }

body {
  font-size: var(--ui-text);
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

:where(button, input, select, textarea) { line-height: 1.5; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}

/* Keep screen titles for assistive navigation without repeating the active menu. */
.screen-heading,
.phone-ui .screen-heading { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }

/* Native keyboard entry point, revealed without motion only when focused. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 4000;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-action-bg);
  color: var(--ui-action-ink);
  font-size: var(--ui-text-sm);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: translateY(0); }

header { background: var(--ui-surface); gap: 24px; }
header nav { gap: 24px; }
header nav button,
header nav .my-page,
header nav button:last-child {
  min-height: 44px;
  min-width: 44px;
  font-size: var(--ui-text-sm);
  line-height: 1.4;
}
header nav button.active { font-weight: 700; }
.brand { gap: 9px; align-items: center; flex: none; }
.brand-wordmark { font-family: Arial, Helvetica, sans-serif; font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: .055em; color: var(--ui-brand-name); white-space: nowrap; }
:root[data-theme="dark"] img[src^="brand/pingrio-symbol.svg"] { content: url("brand/pingrio-symbol-dark.svg"); }
header .header-account-control { border-color: var(--ui-control-border); }

#panel { padding: 20px 20px 16px; }
#panel > h1 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -.045em;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
#panel > .eyebrow { font-size: var(--ui-text-xs); letter-spacing: .08em; margin-bottom: 8px; }
#panel > .sub,
.phone-ui #panel > .sub {
  color: var(--muted);
  font-size: var(--ui-text-sm);
  line-height: 1.65;
  margin: 0 0 16px;
}
:where(.long-copy, .profile-bio, .card-copy, .account-state, .empty, .guide-section) { overflow-wrap: anywhere; }
.section-title { font-size: 1.125rem; line-height: 1.45; margin: 28px 0 16px; }
.type-explainer { color: var(--muted); font-size: var(--ui-text-sm); line-height: 1.6; margin: 6px 0 10px; }

/* Common controls share readable labels and clear boundaries. */
.btn,
.phone-ui .btn {
  background: var(--ui-action-bg);
  color: var(--ui-action-ink);
  min-height: 44px;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-text-sm);
  line-height: 1.45;
  font-weight: 650;
  padding: 12px 16px;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color var(--ui-motion), border-color var(--ui-motion), color var(--ui-motion);
}
.btn.secondary { background: var(--ui-surface); border-color: var(--ui-control-border); color: var(--ink); }
.btn:disabled, button:disabled { cursor: default; }
.btn:disabled { opacity: .6; }
.btn.danger { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger-border); }
.text-btn,
.back,
.phone-ui .back,
.card-tools button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--ui-text-sm);
  line-height: 1.5;
}
.back { margin-bottom: 8px; padding-block: 8px; }
label,
.phone-ui .phone-editor label,
.social-modal label { font-size: var(--ui-text-sm); line-height: 1.55; }
.field,
.phone-ui .field {
  min-height: 44px;
  max-width: 100%;
  padding: 12px;
  border-color: var(--ui-control-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
textarea.field { resize: vertical; }
.field::placeholder,
.search input::placeholder,
.map-search #placeQuery::placeholder { color: var(--muted); opacity: 1; }
.field:focus-visible,
.phone-ui .field:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

/* Discovery retains all existing search scopes, ordering and filter choices. */
.search,
.phone-ui .search {
  min-height: 46px;
  border-color: var(--ui-control-border);
  border-radius: var(--ui-radius);
  margin-block: 8px;
  padding-inline: 12px;
  background: var(--ui-surface);
}
.search input,
.phone-ui .search input { min-height: 44px; font-size: 1rem; line-height: 1.5; }
.search:focus-within { border-color: var(--ui-focus); box-shadow: 0 0 0 1px var(--ui-focus); }
.search-clear { color: var(--muted); }
.type-selector { padding: 4px; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface-soft); }
.type-selector button,
.phone-ui .type-selector button { min-height: 44px; color: var(--muted); font-size: var(--ui-text-sm); line-height: 1.4; border-radius: var(--ui-radius-sm); }
.type-selector small { color: var(--ui-muted-strong); background: var(--ui-surface-soft); font-size: var(--ui-text-xs); }
.type-selector button.active { color: var(--ink); background: var(--ui-surface); box-shadow: none; font-weight: 700; }
.filters .chip,
.phone-ui #panel > .filters > .chip { min-height: 44px; font-size: var(--ui-text-sm); padding: 9px 14px; line-height: 1.5; }
.chip { border-color: var(--ui-control-border); }
.chip.active { border-color: var(--ui-action-bg); background: var(--ui-action-bg); color: var(--ui-action-ink); }
.filter-row,
.phone-ui .filter-row,
.guide-search-status,
.phone-ui .phone-place-status { font-size: var(--ui-text-sm); color: var(--muted); line-height: 1.6; }
.region-cascade { margin: 8px 0; }
.region-source { color: var(--muted); font-size: var(--ui-text-xs); line-height: 1.6; }
.region-cascade label { min-width: 0; margin: 0; font-size: var(--ui-text-xs); color: var(--muted); }
.region-cascade select { margin-top: 4px; }
.filter-row { margin: 10px 0 8px; }
.discovery-order { margin: 0 0 8px; gap: 12px; }
.discovery-order label { margin: 0; }
.guide-search-status { margin: 6px 0; }
.region-cascade select,
.discovery-order select,
#creatorSort { min-height: 44px; border-color: var(--ui-control-border); border-radius: var(--ui-radius-sm); color: var(--ink); font-size: var(--ui-text-sm); }
.discovery-order label { color: var(--muted); font-size: var(--ui-text-sm); }

/* Content cards and A/B presentation are owned by experience.css. Artwork
   keeps the stored --artbg/--artink palette in every interface theme. */
.course { border-color: var(--line); border-radius: var(--ui-radius-lg); box-shadow: none; }
.course:hover { transform: none; box-shadow: 0 3px 12px rgb(32 36 40 / 5%); }
.pill { font-size: var(--ui-text-xs); line-height: 1.4; border-radius: 5px; background: var(--ui-surface-soft); color: var(--ui-muted-strong); }
.creator-line { color: var(--muted); font-size: var(--ui-text-xs); }
.content-collection-actions button { box-shadow: 0 1px 4px rgb(32 36 40 / 8%); }

/* Detail content keeps course order, pinmap categories and every source link. */
#panel > h2,
.phone-ui .phone-detail h2 { font-size: 1.5rem; line-height: 1.45; letter-spacing: -.035em; }
.detail-actions,
.social-detail-actions { gap: 8px; margin-block: 20px; }
.social-detail-actions .btn { font-size: var(--ui-text-sm); padding: 12px; }
.stats { border-color: var(--line); margin-block: 24px; }
.stats small,
.phone-ui .stats small { font-size: var(--ui-text-xs); color: var(--muted); line-height: 1.5; }
.place h4,
.phone-ui .place h4 { font-size: var(--ui-text-lg); line-height: 1.5; color: var(--ink); }
.place p,
.phone-ui .place p { font-size: var(--ui-text-sm); line-height: 1.8; color: var(--muted); }
.place a,
.phone-ui .place a,
.phone-ui .place .text-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--ui-text-sm); line-height: 1.5; }
.note,
.phone-ui .note { color: var(--ui-muted-strong); background: var(--ui-surface-soft); border-radius: var(--ui-radius-sm); font-size: var(--ui-text-sm); line-height: 1.75; }
.creator-link { border: 1px solid var(--line); background: var(--ui-surface); border-radius: var(--ui-radius); }
.creator-link small,
.phone-ui .creator-link small { color: var(--muted); font-size: var(--ui-text-xs); line-height: 1.6; }
.guide-section { border-color: var(--line); }
.guide-section p { font-size: var(--ui-text-sm); line-height: 1.8; }
.phone-ui .phone-fold { border-radius: var(--ui-radius-sm); border-color: var(--line); }
.phone-ui summary { font-size: var(--ui-text-sm); }
.reader-artwork { margin: 8px 0; min-width: 0; }
.reader-artwork > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--muted); font-size: var(--ui-text-sm); }
.reader-artwork .detail-cover { margin: 4px 0 12px; }

/* Existing editor steps remain mounted with their original save/validation. */
.draft-status,
.phone-ui .draft-status,
.account-state { background: var(--ui-surface-soft); color: var(--ui-muted-strong); font-size: var(--ui-text-sm); line-height: 1.7; border-radius: var(--ui-radius-sm); }
.draft-place,
.phone-ui .draft-place { border-color: var(--line); border-radius: var(--ui-radius-sm); font-size: var(--ui-text-sm); }
.draft-place small { color: var(--muted); font-size: var(--ui-text-xs); }
.draft-place button { min-width: 44px; min-height: 44px; }
.phone-ui .phone-steps { gap: 4px; padding: 4px; background: var(--ui-surface-soft); border-radius: var(--ui-radius); }
.phone-ui .phone-steps button { font-size: var(--ui-text-xs); line-height: 1.5; border-radius: var(--ui-radius-sm); }
.phone-ui .phone-steps button.active { color: var(--ink); box-shadow: none; }
.phone-ui #phoneStepCount { font-size: var(--ui-text-sm); color: var(--muted); }
.phone-ui .phone-step-actions { gap: 12px; }
.block-toolbar button,
.block-edit-top button { min-height: 44px; }
.banner-palette-actions .text-btn { min-height: 44px; }
.admin-menu .btn,
.admin-records .btn,
.admin-actions .btn { min-height: 44px; font-size: var(--ui-text-sm); }
.admin-place summary { min-height: 44px; display: flex; align-items: center; }

/* Library and profiles use the same hierarchy without changing private data. */
.social-library-title { font-size: 1.625rem !important; line-height: 1.4; letter-spacing: -.035em; }
.collection-tabs { border-color: var(--line); background: var(--ui-surface-soft); padding: 4px; border-radius: var(--ui-radius); }
.collection-tabs button { font-size: var(--ui-text-sm); border-radius: var(--ui-radius-sm); }
.collection-tabs button[aria-selected=true] { border-color: var(--ui-control-border); box-shadow: none; }
.social-profile .profile-bio,
.phone-ui .social-profile .profile-bio { font-size: var(--ui-text); line-height: 1.75; color: var(--muted); }
.profile-caption,
.profile-counts span,
.social-counts small { color: var(--muted); font-size: var(--ui-text-xs); line-height: 1.5; }
.social-counts button { border-color: var(--line); border-radius: var(--ui-radius-sm); font-size: var(--ui-text-sm); }
.social-connection { font-size: var(--ui-text-sm) !important; color: var(--muted); }
.social-person b { font-size: var(--ui-text-sm); }
.social-person small { font-size: var(--ui-text-xs); color: var(--muted); }
.social-person .social-follow { font-size: var(--ui-text-sm); }
.social-main-menus button { font-size: var(--ui-text-sm); border-radius: var(--ui-radius-sm); background: var(--ui-surface-soft); }
.social-main-menus button[aria-current] { color: var(--ui-action-ink); background: var(--ui-action-bg); }
.social-visibility { font-size: var(--ui-text-xs); color: var(--muted); }
.profile-controls select { font-size: var(--ui-text-sm); }
.profile-tabs button { color: var(--muted); }
.profile-tabs button.active { color: var(--ink); }

/* Native dialogs retain focus handling and mobile visual-viewport sizing. */
dialog#modal {
  width: min(35rem, calc(100vw - 32px));
  max-height: calc(var(--social-viewport-height, 100dvh) - 32px);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  padding: 24px;
  background: var(--ui-surface);
  color: var(--ink);
  box-shadow: 0 20px 60px rgb(20 24 28 / 18%);
}
dialog::backdrop { background: rgb(20 24 28 / 46%); backdrop-filter: none; }
#modalBody > h2:first-child { margin-top: 0; padding-right: 40px; font-size: 1.375rem; line-height: 1.45; }
dialog p,
dialog p.sub { color: var(--muted); font-size: var(--ui-text-sm); line-height: 1.75; }
dialog .close { min-width: 44px; min-height: 44px; border-radius: var(--ui-radius-sm); }
#modalBody { min-width: 0; overflow-wrap: anywhere; }
#toast,
.phone-ui #toast { font-size: var(--ui-text-sm); line-height: 1.6; border-radius: var(--ui-radius); }
.empty { color: var(--muted); font-size: var(--ui-text); line-height: 1.75; padding: 36px 16px; }
footer { color: var(--muted); font-size: var(--ui-text-xs); line-height: 1.75; }
footer span { color: var(--muted); }

/* The existing account dialog owns one theme setting for guests and signed-in users. */
.theme-settings { min-width: 0; padding-inline: 0; border: 0; border-top: 1px solid var(--line); }
.theme-settings legend { padding: 0 8px 0 0; font-size: var(--ui-text-sm); font-weight: 700; }
.theme-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-choices button { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 48px; padding: 10px; border: 1px solid var(--ui-control-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ink); }
.theme-choices button.is-selected { border-color: var(--ui-action-bg); background: var(--ui-action-bg); color: var(--ui-action-ink); font-weight: 700; }
.theme-choices span { font-size: 1.25rem; line-height: 1; }
.theme-settings p.sub { margin: 8px 0 0; }
.theme-storage-status:empty { display: none; }
.theme-storage-status { margin-bottom: 0; color: var(--ui-warning); }

/* Map chrome only. The map canvas, markers, gestures and search logic are untouched. */
.map-search #placeSearchForm { border-color: var(--ui-control-border); box-shadow: 0 2px 8px rgb(32 36 40 / 6%); }
.map-search #placeSearchForm:focus-within { outline-color: var(--ui-focus); }
.map-search #placeQuery { font-size: 1rem; }
.map-search #placeSearchForm > button[type=submit] { font-size: var(--ui-text-sm); }
.search-result { font-size: var(--ui-text-sm); line-height: 1.6; }
.search-result small { color: var(--muted); font-size: var(--ui-text-xs); }
.search-scope-actions button { min-height: 44px; font-size: var(--ui-text-xs); }
.map-hint { color: var(--ink); font-size: var(--ui-text-xs); line-height: 1.6; white-space: normal; }
.map-bottom > span { font-size: var(--ui-text-xs); line-height: 1.5; }
.leaflet-tooltip { color: var(--ink); background: var(--ui-surface); }
.leaflet-tooltip-top:before { border-top-color: var(--ui-surface); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--ui-surface); }
.leaflet-control-zoom a { color: var(--ink); background: var(--ui-surface); border-color: var(--line); }
.leaflet-control-zoom a:hover { background: var(--ui-surface-soft); }

/* The ad belongs to the left scrolling panel, never above the desktop map. */
@media (min-width: 801px) {
  main { grid-template-columns: minmax(320px, 25%) minmax(0, 1fr); height: calc(100dvh - 84px); }
  aside { display: flex; flex-direction: column; min-width: 0; }
  aside > #panel { flex: 1 0 auto; }
  aside > #bottomAd { position: static; width: auto; min-height: 44px; height: auto; flex: none; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-start; border: 0; border-top: 1px solid var(--line); background: var(--ui-surface-soft); color: var(--muted); }
  aside > #bottomAd:empty, aside > #bottomAd[hidden] { display: none; min-height: 0; padding: 0; border: 0; }
}

@media (hover: hover) {
  .btn:not(:disabled):hover { filter: brightness(.94); }
  .btn.secondary:not(:disabled):hover,
  .text-btn:hover,
  .search-clear:hover { background-color: var(--ui-surface-soft); }
}

@media (min-width: 601px) and (max-width: 800px) {
  header { gap: 12px; padding-inline: 20px; }
  header nav { gap: 16px; }
  header nav button,
  header nav .my-page,
  header nav button:last-child { font-size: var(--ui-text-sm); }
  #panel { padding: 24px; }
}

@media (max-width: 600px) {
  .phone-ui { background: var(--paper); }
  .phone-ui > header { padding-inline: 16px; }
  .phone-ui .brand-wordmark { font-size: 21px; letter-spacing: .045em; }
  .phone-ui #panel { padding-top: 12px; padding-inline: 16px; }
  .phone-ui #panel > h1 { font-size: 1.5rem; line-height: 1.35; margin-block: 0 8px; }
  .phone-ui #panel > .sub { margin-bottom: 10px; }
  .phone-ui #panel > .type-selector { margin-block: 8px; }
  .phone-ui .phone-list > .search { margin-block: 8px; }
  .phone-ui #panel > .filters { margin-block: 4px; padding-bottom: 4px; }
  .phone-ui .filter-row { margin-block: 6px; }
  .phone-ui .type-explainer { font-size: var(--ui-text-sm); line-height: 1.6; }
  .phone-ui .phone-discovery-tools { gap: 8px; margin-block: 4px 8px; }
  .phone-ui .phone-discovery-tools .phone-filters { border-color: var(--ui-control-border); border-radius: var(--ui-radius-sm); }
  .phone-ui .phone-discovery-tools summary { padding: 12px; font-size: var(--ui-text-sm); }
  .phone-ui .phone-discovery-tools > .btn { font-size: var(--ui-text-sm); border-radius: var(--ui-radius-sm); }
  .phone-ui .phone-navigation { border-top-color: var(--line); }
  .phone-ui .phone-navigation button { color: var(--muted); font-size: var(--ui-text-xs); border-radius: var(--ui-radius-sm); }
  .phone-ui .phone-navigation button.active { color: var(--ink); background: var(--ui-surface-soft); }
  .phone-ui #modal { padding: 20px; border-radius: var(--ui-radius-lg); }
  .phone-ui .social-counts small { font-size: var(--ui-text-xs); }
  .phone-ui .social-profile-actions .btn { font-size: var(--ui-text-sm); }
  .phone-ui .social-person .social-follow { font-size: var(--ui-text-xs); }
  .phone-ui .collection-tabs button { font-size: var(--ui-text-sm); }
}

@media (max-width: 360px) {
  .phone-ui #panel { padding-inline: 12px; }
  .phone-ui .phone-discovery-tools { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .phone-ui .social-counts { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .course, .btn, .chip, .search, .phone-steps button, .collection-tabs button {
    transition: none;
    animation: none;
  }
}