/*
 * Old School Gamers — site overrides for infodancer/ui.
 *
 * Loaded last (open-props.css -> tokens.css -> base.css -> here), so these
 * :root redeclarations win the cascade. We override only the --app-* role
 * tokens; the scales come from Open Props via infodancer/ui.
 *
 * OSG runs a single LIGHT theme (clean, mjh-adjacent) — base-ui.gohtml
 * forces data-theme="light". The old-school identity comes from a parchment
 * "scroll" framing the campaign sidebar, not from a dark palette.
 */

/* --- Light palette ---------------------------------------------------- */
:root {
  --app-color-bg:           #f5f3ee; /* warm light page */
  --app-color-bg-raised:    #ffffff;
  --app-color-fg:           #1f2733; /* dark slate ink */
  --app-color-fg-muted:     #5c6673;
  --app-color-border:       #e3ddd1;
  --app-color-accent:       #1d4ed8; /* deep blue: links, actions */
  --app-color-accent-hover: #1e40af;
  --app-color-accent-on:    #ffffff;
  --app-color-prose-fg:     #232b36;

  /* Bookish serif for display type. */
  --app-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, var(--font-serif);
}

/* --- Top nav: dark navy bar, contents aligned to the page column ------- */
/* The bar background spans full width; the padding-inline trick centers its
   contents within the same 80rem column as .app-container, so the brand and
   sign-in line up with the page content below. */
.app-nav {
  background: #1f2a37;
  border-block-end: 1px solid #14202c;
  padding-inline: max((100% - var(--app-max-width-page)) / 2, var(--app-space));
}
.app-nav-brand,
.app-nav-brand:hover {
  color: #ffffff;
}
.app-nav-links a,
.app-nav-auth a {
  color: #ccd4de;
}
.app-nav-links a:hover,
.app-nav-auth a:hover {
  color: #ffffff;
}

/* Breathing room between the nav bar and content (container is
   padding-inline only). */
.app-container {
  padding-block: var(--app-space-lg);
}

/* --- Layout: structure from infodancer/ui, skin from here -------------- */
/* The shared .app-sidebar-layout grid (open-props/base.css) lays out the
   content column and up to two asides. OSG skins the content column as a
   raised white card on the warm page; the right aside is repainted as a
   parchment scroll below. */
.app-sidebar-main {
  background: var(--app-color-bg-raised);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius);
  padding: var(--app-space-lg);
}
.app-sidebar-main > :first-child {
  margin-block-start: 0;
}

/* --- Parchment scroll: OSG's skin for the right discovery sidebar -------- */
/* infodancer/ui ships a clean bordered panel; OSG repaints the RIGHT aside as
   a rolled parchment scroll. The layout, the <details> collapse mechanics, and
   the feed list all come from the shared .app-sidebar* classes — only the look
   lives here, scoped to .app-sidebar-right so the clean default survives on any
   other (e.g. left) aside. */
.app-sidebar-right {
  position: relative;
  margin-block: 1.2rem;
  padding: calc(var(--app-space-lg) + 0.4rem) var(--app-space);
  color: #4a3b22; /* ink on parchment */
  border: none;
  border-radius: 3px;
  background-color: #efe3c6;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 9%),
    radial-gradient(130% 120% at 50% 0%, rgba(120, 90, 40, 0.04), rgba(120, 90, 40, 0.11));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 0 55px rgba(120, 85, 35, 0.12);
}

/* The rolled top and bottom edges. Horizontal "cylinders" sticking out
   slightly past the paper, with a highlight band to read as round. */
.app-sidebar-right::before,
.app-sidebar-right::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  height: 1.7rem;
  background:
    linear-gradient(180deg, #efe0b8 0%, #d8c391 38%, #c0a875 70%, #a98f5f 100%);
  border-radius: 0.85rem;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.app-sidebar-right::before {
  top: -0.85rem;
}
.app-sidebar-right::after {
  bottom: -0.85rem;
}

/* Section labels: small uppercase ink, no divider (the parchment look). */
.app-sidebar-right .app-sidebar-section {
  margin-block-start: var(--app-space-lg);
}
.app-sidebar-right .app-sidebar-section > summary {
  border-block-end: none;
  padding-block-end: 0;
}
.app-sidebar-right .app-sidebar-section > summary > * {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6b552c;
}
.app-sidebar-right .app-sidebar-section > summary:hover > *,
.app-sidebar-right .app-sidebar-section > summary:focus-visible > * {
  color: #4a3b22;
}
.app-sidebar-right .app-sidebar-section > summary::after {
  border-color: #8a7340; /* chevron */
}
.app-sidebar-right .app-sidebar-section > summary:focus-visible {
  outline-color: #8a7340;
}

/* Feed: ink links, brown dividers and meta. */
.app-sidebar-right .app-sidebar-feed li {
  border-block-start-color: rgba(120, 85, 35, 0.18);
}
.app-sidebar-right .app-sidebar-feed a {
  color: #5a3d12;
}
.app-sidebar-right .app-sidebar-meta {
  color: #7a6845;
  font-size: 0.76rem;
}

/* --- Notes count in the main-column tabs (on white) -------------------- */
.osg-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 var(--app-space-xs);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--app-radius-pill);
  background: #eceef1;
  color: var(--app-color-fg-muted);
}
.app-tab.is-active .osg-count {
  background: var(--app-color-accent);
  color: var(--app-color-accent-on);
}

/* --- Main-column typography ------------------------------------------- */
.app-page-header h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0;
}

/* --- Owner affordances in the content column -------------------------- */
/* base.css already styles bare input/textarea/select/button via tokens; OSG
   only adds vertical form rhythm and a ghost variant for the inline × remove
   controls — the bare <button> rule fills them accent, wrong for a small
   dismiss glyph. */
.app-form {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-sm);
  max-width: 32rem;
  margin-block-start: var(--app-space);
}
.app-form label {
  font-weight: 600;
}

.app-tag-remove {
  margin-inline-start: var(--app-space-xs);
  padding: 0;
  background: none;
  border: none;
  color: var(--app-color-fg-muted);
  font-size: 0.95em;
  line-height: 1;
  cursor: pointer;
}
.app-tag-remove:hover {
  background: none;
  color: var(--app-color-accent);
}

/* Recognized (canonical) tags read a touch stronger than freeform ones. */
.app-tag-known {
  border-color: var(--app-color-accent);
  color: var(--app-color-accent);
}

.app-link-list {
  list-style: none;
  padding: 0;
  margin-block: var(--app-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--app-space-xs);
}
.app-link-list li {
  display: flex;
  align-items: center;
  gap: var(--app-space-sm);
}

/* --- Cross-group skins (shared by ≥2 Phase 4 page groups) -------------- */
/* Kept here, not in a single feature unit, so parallel conversions don't each
   redefine them. All token-bound / markup-agnostic: a unit applies the class to
   whatever element it emits. */

/* Flash banners — listings, manage, calendar. */
.osg-alert {
  padding: var(--app-space-sm) var(--app-space);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm);
  margin-block: var(--app-space);
}
.osg-alert-success { border-color: #198754; background: #e8f5ee; color: #0f5132; }
.osg-alert-error   { border-color: #dc3545; background: #fdeaec; color: #842029; }
.osg-alert-info    { border-color: var(--app-color-accent); background: #e8eefc; color: var(--app-color-accent-hover); }

/* Semantic color variants for .app-badge (ui ships the shape; color belongs to
   the consuming module). Used for RSVP status and session status across the
   Sessions and Account-calendar groups. Apply alongside .app-badge. */
.osg-badge-success { background: #e8f5ee; color: #0f5132; }
.osg-badge-warning { background: #fcf3e3; color: #7a5b1e; }
.osg-badge-danger  { background: #fdeaec; color: #842029; }
.osg-badge-muted   { background: #eceef1; color: var(--app-color-fg-muted); }
.osg-badge-accent  { background: #e8eefc; color: var(--app-color-accent-hover); }

/* RSVP control: a row of yes/maybe/no actions (styled with .app-btn /
   .app-btn-secondary). Layout only — button states are the unit's to wire. */
.osg-rsvp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-xs);
  margin-block-start: var(--app-space-sm);
}

/* --- Campaign management group (Phase 4) ------------------------------ */
/* Manage tab: each pending applicant card carries an approve form and a
   deny form (reason + button) side by side. The deny form keeps its input
   and button on one row; the two forms wrap together on narrow viewports. */
.osg-manage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--app-space-sm);
  margin-block-start: var(--app-space);
}
.osg-deny-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-sm);
}

/* --- Account calendar (Phase 4 account unit) -------------------------- */
/* Layout for the subscribe panel's controls and the upcoming-session rows.
   Owned by the account unit; appended here per the conversion recipe so the
   slice/CSS edits stay one mergeable block per page group. */
.osg-calendar-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-sm);
  margin-block-start: var(--app-space-sm);
}
.osg-calendar-subscribe input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--app-font-mono, monospace);
  font-size: 0.8rem;
}
.osg-calendar-list {
  list-style: none;
  padding: 0;
  margin-block: var(--app-space);
  display: flex;
  flex-direction: column;
  gap: var(--app-space-sm);
}
.osg-calendar-row {
  padding: var(--app-space);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm);
}
.osg-calendar-row h2 {
  font-size: 1.15rem;
  margin: 0;
}

/* --- Notes group (Phase 4) -------------------------------------------- */
/* A horizontal button row: note-form submit/cancel and the note-detail
   edit/delete affordances. The inline <form> for delete is a flex item so
   its button lines up with the sibling edit link. */
.osg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-sm);
  margin-block-start: var(--app-space);
}
.osg-actions form {
  margin: 0;
}

/* Notes-feed card header: title on the left, POV/visibility badges on the
   right, wrapping when narrow. */
.osg-note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--app-space-sm);
}
.osg-note-head h3 {
  margin: 0;
}

/* --- Directory listings (Phase 4) ------------------------------------- */
/* Profile result cards carry a name, a meta line, and a bio paragraph —
   the ui .app-card-grid default (minmax(12rem, 1fr)) packs them too tight
   for prose. Widen the track here rather than touching ui. Apply alongside
   .app-card-grid on the directory index/search grids. */
.osg-profile-grid {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* --- Venue group (Phase 4) -------------------------------------------- */
/* .osg-choice is an inline radio/checkbox row: the ui base.css input rule
   stretches every input to width:100%, which is wrong for a radio or a
   checkbox. This re-sizes the control to its intrinsic width and lays the
   label text beside it. Used by the venue create/edit form (status radios,
   "listed" checkbox). */
.osg-choice {
  display: flex;
  align-items: baseline;
  gap: var(--app-space-sm);
  font-weight: normal;
}
.osg-choice input[type="radio"],
.osg-choice input[type="checkbox"] {
  width: auto;
  flex: none;
}