/* Applications: the public browser, a form's page, the applicant's tracker and
   the staff panel.

   Written narrow-first. Every grid here is `repeat(auto-fit, minmax(...))` or
   collapses at 720px, and the staff panel reuses .panel-layout from main.css so
   the burger toggle and the sliding sidebar behave exactly as they do in the
   Library and Admin panels. Nothing in this file uses position:fixed inside
   .main-content - that is what made the guild area unusable on a phone. */

.app-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; }
.app-wrap-narrow { max-width: 780px; }

.app-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.app-page-header h1 { margin: 0 0 4px; }

.app-back {
  display: inline-block; margin-bottom: 16px; font-size: 13px; color: var(--text-3);
}
.app-back:hover { color: var(--text); }

/* ── Filters ──────────────────────────────────────────────
   A single scrolling row instead of wrapping chips: four rows of filters push
   the actual content off a phone screen. */
.app-filter-bar {
  display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: thin;
}
.app-filter-bar::-webkit-scrollbar { height: 4px; }
.app-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text-2); font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.app-chip:hover { color: var(--text); border-color: var(--border-2, var(--border)); }
.app-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.app-chip-count { font-size: 11px; opacity: .7; }

/* ── Cards ────────────────────────────────────────────── */
.app-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.app-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
  color: inherit; transition: border-color .15s, transform .15s;
}
.app-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.app-card-top { display: flex; align-items: flex-start; gap: 10px; }
.app-card-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r); background: color-mix(in srgb, var(--app-color, var(--accent)) 18%, transparent);
  color: var(--app-color, var(--accent));
}
.app-card-heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-card-title { font-weight: 600; font-size: 15px; }
.app-card-category { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.app-card-summary { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.6; }
.app-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3);
}
.app-card-mine {
  margin-top: 2px; padding: 6px 10px; border-radius: var(--r);
  background: var(--bg-3); font-size: 12px; color: var(--text-2);
}

/* ── State + status badges ────────────────────────────── */
.app-state {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--border); color: var(--text-3);
}
.app-state-open      { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.app-state-closed    { color: var(--text-3); }
.app-state-scheduled { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.app-state-draft     { color: var(--yellow, #fdcb6e); }
.app-state-archived  { color: var(--text-3); opacity: .7; }

.app-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--bg-3); color: var(--text-2);
  white-space: nowrap;
}
.app-status-badge.app-status-accepted   { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.app-status-badge.app-status-denied     { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.app-status-badge.app-status-submitted,
.app-status-badge.app-status-under_review { background: var(--accent-dim); color: var(--accent-2); }

/* ── Detail page ──────────────────────────────────────── */
.app-detail-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.app-detail-header h1 { margin: 0 0 6px; font-size: 1.5rem; overflow-wrap: anywhere; }
.app-detail-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.app-description { margin-bottom: 28px; }

.app-section { margin-bottom: 32px; }
.app-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 10px;
}

/* ── Requirement checklist ────────────────────────────── */
.app-req-list { display: flex; flex-direction: column; gap: 8px; }
.app-req-group { display: flex; flex-direction: column; gap: 6px; }
.app-req-any {
  padding: 10px; border: 1px dashed var(--border); border-radius: var(--r);
}
.app-req-anylabel {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.app-req {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
}
.app-req.is-met   { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.app-req.is-unmet { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.app-req-mark { flex: 0 0 auto; width: 18px; text-align: center; font-weight: 700; }
.app-req.is-met .app-req-mark   { color: var(--success); }
.app-req.is-unmet .app-req-mark { color: var(--danger); }
.app-req.is-soft .app-req-mark  { color: var(--yellow, #fdcb6e); }
.app-req-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.app-req-text { font-size: 13px; color: var(--text); }
.app-req-progress { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-req-bar {
  flex: 1; min-width: 100px; height: 5px; border-radius: 999px;
  background: var(--bg-3); overflow: hidden;
}
.app-req-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.app-req-figures { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.app-req-tag {
  align-self: flex-start; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px;
}

/* ── Notices ──────────────────────────────────────────── */
.app-notice {
  padding: 16px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-2); margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.app-notice p { margin: 0; }
.app-notice-blocked { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.app-notice-blocked ul { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13px; }

/* ── The form ─────────────────────────────────────────── */
.app-form { display: flex; flex-direction: column; gap: 20px; }
.app-question { display: flex; flex-direction: column; gap: 6px; }
.app-question.has-error .input { border-color: var(--danger); }
.app-question-section { border-top: 1px solid var(--border); padding-top: 16px; }
.app-question-section h3 { margin: 0 0 4px; font-size: 15px; }
.app-required { color: var(--danger); margin-left: 3px; }
.app-help { font-size: 12px; color: var(--text-3); margin: 0 0 6px; }
.app-counter { font-size: 11px; color: var(--text-3); text-align: right; margin-top: 4px; }
.app-error { font-size: 12px; color: var(--danger); }

.app-checkgroup { display: flex; flex-direction: column; gap: 8px; }
.app-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.app-check input { width: 16px; height: 16px; flex: 0 0 auto; }

.app-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.app-scale-dot {
  width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text-2); cursor: pointer; font-size: 13px;
}
.app-scale-dot.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }

.app-form-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--border);
}

/* ── Answers + revisions ──────────────────────────────── */
.app-answer-review, .app-review { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.app-answer {
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
}
.app-answer-q { font-size: 12px; color: var(--text-3); font-weight: 600; }
.app-answer-a { font-size: 14px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-answer-edited { font-size: 11px; color: var(--yellow, #fdcb6e); }

.app-revision-toggle {
  align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: 12px; color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px;
}
.app-revisions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
  border-left: 2px solid var(--border); padding-left: 10px;
}
.app-revision { display: flex; flex-direction: column; gap: 2px; }
.app-revision-label { font-size: 11px; color: var(--text-3); }
.app-revision-value {
  font-size: 13px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere;
}
.app-revision.is-current .app-revision-value { color: var(--text); }

/* ── Status card / tracker ────────────────────────────── */
.app-status-card {
  padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
}
.app-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-decision-note {
  margin: 10px 0 0; padding: 10px; border-radius: var(--r); background: var(--bg-3);
  font-size: 13px; color: var(--text-2); white-space: pre-wrap;
}

.app-track-card {
  padding: 14px; margin-bottom: 12px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r);
}
.app-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.app-track-title { font-weight: 600; font-size: 15px; }
.app-track-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); margin-top: 4px;
}
.app-track-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── Staff panel ──────────────────────────────────────── */
.app-nav-count {
  margin-left: auto; font-size: 11px; background: var(--accent-dim);
  color: var(--accent-2); border-radius: 999px; padding: 1px 7px;
}
.app-form-filter { max-width: 200px; flex: 0 0 auto; height: 34px; padding: 0 10px; font-size: 13px; }

.app-queue-card {
  padding: 12px 14px; margin-bottom: 8px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r); cursor: pointer;
}
.app-queue-card:hover { border-color: var(--accent); }
.app-queue-main { display: flex; align-items: center; gap: 10px; }
.app-queue-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 600; font-size: 14px; }
.app-queue-form { font-size: 12px; font-weight: 400; color: var(--text-3); }
.app-queue-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); margin-top: 3px;
}
.app-flag-edited   { color: var(--yellow, #fdcb6e); }
.app-flag-voted    { color: var(--accent-2); }
.app-flag-override { color: var(--danger); }
.app-flag-blind    { color: var(--accent-2); }
.app-flag-grant    { color: var(--success); }

.app-form-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
}
.app-form-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; cursor: pointer; }
.app-form-title { font-weight: 600; font-size: 14px; }
.app-form-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); margin-top: 3px;
}
.app-form-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.app-simple-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 10px 12px; margin-top: 8px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r);
}
.app-simple-row p { margin: 4px 0 0; }
.app-inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.app-inline-form .input { flex: 1; min-width: 160px; }

/* ── Drawer (review + builder) ────────────────────────────
   A right-hand sheet on desktop, a full-height sheet on a phone.

   z-index 2000 matches .pmodal-overlay and .modal-overlay in main.css. It is not
   arbitrary: the navbar is fixed at 1000, so anything below that renders UNDER
   it and loses its own header and close button behind the site nav. Background
   and blur match the same two rules so this reads as one family of overlay.

   Height is 100dvh, not 100%: on a phone, 100vh is the viewport WITHOUT the
   browser chrome, which pushes the footer's action buttons off the bottom. */
.app-drawer-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(2,4,8,.76); backdrop-filter: blur(7px) saturate(.8);
  display: flex; justify-content: flex-end;
  animation: overlay-in .16s ease both;
}
.app-drawer {
  display: flex; flex-direction: column;
  width: min(660px, 100%); height: 100vh; height: 100dvh;
  background: var(--bg-2); border-left: 1px solid var(--border);
  box-shadow: -28px 0 90px rgba(0,0,0,.62);
  animation: app-drawer-in .22s cubic-bezier(.2,.8,.2,1);
}
.app-drawer-wide { width: min(980px, 100%); }
@keyframes app-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.app-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
  background: var(--bg-2);
}
.app-drawer-head h2 { margin: 0 0 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.app-drawer-body { flex: 1; overflow-y: auto; padding: 20px; background: var(--bg); }
.app-drawer-foot {
  flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-2);
}
.app-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.app-drawer-actions .btn:first-child { margin-right: auto; }
/* The destructive action sits apart from the rest so it is never the button you
   hit while reaching for Close. */
.app-drawer-actions .btn-danger { margin-left: 14px; }
@media (max-width: 720px) {
  .app-drawer-actions .btn { flex: 1 1 100%; margin: 0; }
  .app-drawer-actions .btn-danger { margin-top: 6px; }
}
.app-drawer-section { margin-bottom: 26px; }
.app-drawer-section h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
  margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}

.app-vote { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.app-vote-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); }
.app-vote-approve    { color: var(--success); }
.app-vote-disapprove { color: var(--danger); }
.app-vote-neutral    { color: var(--text-3); }

.app-role-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
}
.app-role-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.app-role-check input { cursor: pointer; }
.app-vote-comment { font-size: 13px; color: var(--text-2); width: 100%; white-space: pre-wrap; }
.app-vote-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.app-vote-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.app-note { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.app-note-meta { font-size: 11px; color: var(--text-3); }

.app-event { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-2); padding: 4px 0; flex-wrap: wrap; }
.app-event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

.app-warn-line { margin: 8px 0 0; font-size: 12px; color: var(--yellow, #fdcb6e); }
.app-decision-row { margin-bottom: 8px; }
.app-decision-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.app-decision-buttons .btn { flex: 1; min-width: 120px; }

/* ── Builder ──────────────────────────────────────────── */
/* Sits between the fixed head and the scrolling body, so it needs the head's
   background and its own border - without them it floated over the body's
   lighter surface with no edge and read as detached. */
.app-builder-tabs {
  display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto; flex: 0 0 auto;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
/* 260px, not 230: at 230 a label like "Ignore updates under (characters)" wrapped
   to three lines while its input sat half-empty. */
.app-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.app-settings-grid .form-group { margin: 0; min-width: 0; }
.app-settings-grid .label { display: block; margin-bottom: 5px; }
.app-settings-grid .input { width: 100%; }
.app-span-2 { grid-column: 1 / -1; }
.app-builder-row {
  padding: 10px 12px; margin-bottom: 8px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r);
}
.app-builder-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-builder-type {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.app-builder-label { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-builder-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.app-builder-condition { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.app-builder-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.app-subform {
  margin-top: 14px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--bg-2);
}
.app-req-group-edit {
  padding: 10px; margin-bottom: 10px; border: 1px dashed var(--border); border-radius: var(--r);
}

/* ── Narrow screens ───────────────────────────────────── */
@media (max-width: 720px) {
  .app-wrap { padding: 24px 14px 100px; }
  .app-grid { grid-template-columns: 1fr; }
  .app-detail-header h1 { font-size: 1.25rem; }
  .app-drawer, .app-drawer-wide { width: 100%; border-left: 0; }
  .app-drawer-body { padding: 14px; }
  .app-settings-grid { grid-template-columns: 1fr; }
  /* Full-width actions: a 40px button next to another 40px button is a
     mis-tap waiting to happen on a phone. */
  .app-form-actions .btn, .app-decision-buttons .btn { flex: 1 1 100%; }
  .app-track-head { flex-direction: column; }
  .app-queue-main { align-items: flex-start; }
  .app-scale-dot { width: 44px; height: 44px; }
}