/* ======================================================================
 * Atlas design tokens — Stitch refresh (Phase 10D)
 * Material You-aligned palette sourced from the Stitch designs for
 * "Atlas — Moroccan Community Navigator".
 * ==================================================================== */
:root {
  --c-primary:              #0e3b69;   /* deep navy — brand */
  --c-primary-container:    #2c5282;
  --c-primary-fixed:        #d4e3ff;
  --c-on-primary-fixed:     #001c3a;
  --c-on-primary-fixed-var: #204877;

  --c-secondary:            #2a6a4b;   /* trusted green */
  --c-secondary-container:  #aff1ca;
  --c-secondary-fixed:      #aff1ca;
  --c-on-secondary-fixed:   #002112;
  --c-on-secondary-fixed-var:#0a5135;

  --c-tertiary:             #4b3700;   /* golden amber */
  --c-tertiary-container:   #674d00;
  --c-tertiary-fixed:       #ffdf99;
  --c-on-tertiary-fixed:    #251a00;
  --c-on-tertiary-fixed-var:#5a4300;

  --c-error:                #ba1a1a;
  --c-error-container:      #ffdad6;

  --c-bg:                   #f5fbf7;   /* green-tinted off-white */
  --c-surface-lowest:       #ffffff;
  --c-surface-low:          #eff5f1;
  --c-surface:              #e9efec;
  --c-surface-high:         #e4eae6;
  --c-on-surface:           #171d1b;
  --c-on-surface-variant:   #43474f;
  --c-outline:              #737780;
  --c-outline-variant:      #c3c6d0;

  --shadow-soft:  0 10px 30px -5px rgba(23,29,27,0.05), 0 5px 15px -3px rgba(23,29,27,0.02);
  --shadow-lift:  0 4px 12px rgba(14,59,105,0.08);
  --r-sm: .5rem;
  --r-md: 1rem;       /* rounded-xl equivalent */
  --r-lg: 2rem;       /* rounded-xl for buttons */
  --r-pill: 9999px;
  --space: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.5 "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  background: var(--c-bg);
  color: var(--c-on-surface);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(14,59,105,.12);
  letter-spacing: -0.005em;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; background: rgba(245,251,247,0.85);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(195,198,208,0.25);
  position: sticky; top: 0; z-index: 50;
}
header .brand {
  color: var(--c-primary); text-decoration: none;
  font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em;
}
/* Keep the legacy `header a` selector targeting non-brand anchors */
header a { color: var(--c-primary); text-decoration: none; font-weight: 600; }
header nav a {
  color: var(--c-on-surface-variant); font-weight: 500;
  margin-left: 1rem; font-size: .88rem;
}
main { max-width: 640px; margin: 1rem auto 4rem; padding: 0 1.25rem; }
h1 { margin: 0 0 .5rem; font-size: 1.7rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
h2 { margin: 1.5rem 0 .75rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; }
h3 { margin: 1rem 0 .5rem; font-size: 1.05rem; font-weight: 600; }
p { margin: .5rem 0; color: var(--c-on-surface-variant); }
.muted { color: var(--c-outline); font-size: .9rem; }

/* Phase 10D — home hero (Stitch-style welcome + bold headline) */
.home-hero { margin: .25rem 0 2rem; }
.hero-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--c-secondary);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.hero-headline {
  font-size: 2.1rem; line-height: 1.08;
  font-weight: 800; letter-spacing: -0.035em;
  color: var(--c-on-surface);
  margin: 0 0 .5rem;
}
.hero-support {
  font-size: 1rem; color: var(--c-outline);
  max-width: 32ch; margin: 0;
}

/* Legacy tagline class kept for any pages that still reference it */
.home-tagline {
  font-size: 1rem; color: var(--c-on-surface-variant);
  margin: 0 0 1rem; line-height: 1.45;
}
.home-tagline strong { color: var(--c-on-surface); font-weight: 700; }

/* Phase 10A — min tap target 44px everywhere */
button, .cta-primary, .category-tile, .guided-btn,
.opportunity-card, .share-btn, .refine-tile, .action-btn, .contribute-link {
  min-height: 44px;
}

/* search form — Stitch card with rounded-pill input */
.search-form {
  background: var(--c-surface-lowest);
  padding: 1.25rem; border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  margin-bottom: 2rem;
}
.search-form textarea {
  width: 100%; min-height: 4.5rem; padding: .9rem 1rem;
  font: inherit; border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-md);
  background: var(--c-surface-low); resize: vertical;
  color: var(--c-on-surface);
}
.search-form textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(14,59,105,.12);
}
.quick-actions, .clarify-form {
  margin-top: .9rem; display: flex; gap: .5rem; flex-wrap: wrap;
}

/* buttons — Stitch rounded pills */
button, .cta-primary {
  padding: .6rem 1rem;
  background: var(--c-primary); color: #fff; border: 0;
  border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  display: inline-block; font: inherit; font-weight: 500;
  transition: background .1s, transform .08s, box-shadow .15s;
}
button:hover { background: var(--c-primary-container); }
button:active { transform: scale(0.97); }
button.primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-container));
  box-shadow: 0 4px 12px rgba(14,59,105,.25);
  font-weight: 600;
}
.quick-actions button:not(.primary) {
  background: var(--c-surface-low); color: var(--c-on-surface);
  font-weight: 500;
}
.quick-actions button:not(.primary):hover {
  background: var(--c-surface); color: var(--c-primary);
}
.cta-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-container));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(14,59,105,.20);
}
[data-helpful] {
  background: var(--c-surface-low); color: var(--c-on-surface);
  font-weight: 500;
}
[data-helpful]:disabled { opacity: .55; cursor: default; }

/* results — Stitch rounded cards with soft shadow */
.results { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.result {
  position: relative;
  background: var(--c-surface-lowest);
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid rgba(195,198,208,.2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  transition: transform .12s, box-shadow .15s;
}
.result:hover { box-shadow: var(--shadow-soft); }
.result .rank {
  position: absolute; top: 1rem; right: 1.25rem;
  color: var(--c-outline); font-size: .78rem;
  font-weight: 600; letter-spacing: .05em;
}
.result h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; color: var(--c-on-surface); }
.result .meta { color: var(--c-on-surface-variant); font-size: .85rem; margin: 0 0 .5rem; }
.result .expl { margin: 0 0 .75rem; color: var(--c-on-surface-variant); }
.tags { margin-bottom: .5rem; }
.tag {
  display: inline-block; padding: .15rem .55rem; margin-right: .3rem;
  background: var(--c-primary-fixed); color: var(--c-on-primary-fixed);
  border-radius: var(--r-pill); font-size: .72rem; font-weight: 500;
}
.cta { margin-top: .25rem; }

.feedback {
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--c-surface-lowest);
  border: 1px solid rgba(195,198,208,.2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.feedback button { margin-right: .5rem; }

/* admin */
ul.compact { padding-left: 1rem; font-size: .9rem; color: #333; }
ul.compact li { margin: .15rem 0; }
code { background: #f4f4f4; padding: 1px 4px; border-radius: 3px; font-family: ui-monospace, Menlo, monospace; }
dl.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .4rem 1rem; margin: 0 0 1rem; }
dl.kv dt { color: #666; font-size: .8rem; }
dl.kv dd { margin: 0; font-size: 1.1rem; font-weight: 600; }
table.funnel { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; border-collapse: collapse; }
table.funnel td { padding: .15rem .5rem; }
table.funnel td.num { text-align: right; font-weight: 600; }

/* Phase 7C — onboarding */
.onboarding { background: #fff; padding: 1.5rem; border: 1px solid #eee; border-radius: 8px; }
.onboarding-form fieldset { border: 0; padding: 0; margin: 1rem 0; }
.onboarding-form legend { font-weight: 600; margin-bottom: .35rem; }
.choice-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.choice-group label { display: inline-flex; gap: .35rem; cursor: pointer; padding: .25rem .5rem; border: 1px solid transparent; border-radius: 4px; }
.choice-group label:hover { border-color: #ddd; background: #fafafa; }
.onboarding-form input[type="text"] { width: 100%; max-width: 360px; padding: .5rem; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.onboarding-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; }

/* guided suggestions */
.guided { margin-top: 1.5rem; }
.guided-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.guided-item { margin: 0; }
.guided-btn { width: 100%; text-align: left; background: #fff; color: #222; border: 1px solid #ddd; padding: .6rem .8rem; border-radius: 4px; cursor: pointer; }
.guided-btn:hover { background: #eef; border-color: #99c; }

/* trust badges on result cards */
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .6rem; }
.badge {
  display: inline-block; padding: .2rem .6rem;
  font-size: .72rem; font-weight: 500;
  border-radius: var(--r-pill); line-height: 1.3;
}
.badge-lang     { background: var(--c-surface-high);     color: var(--c-on-surface-variant); }
.badge-moroccan { background: var(--c-tertiary-fixed);   color: var(--c-on-tertiary-fixed); font-weight: 600; }
.badge-official { background: var(--c-primary-fixed);    color: var(--c-on-primary-fixed); font-weight: 600; }
.badge-visa     { background: var(--c-secondary-fixed);  color: var(--c-on-secondary-fixed-var); }
.badge-employer { background: var(--c-primary-fixed);    color: var(--c-on-primary-fixed); }

/* result footer (rating / members / used-by) */
.result-foot { margin-top: .25rem; font-size: .8rem; color: #555; }
.result-foot .rating   { color: #b08000; margin-right: .75rem; }
.result-foot .activity { margin-right: .75rem; }
.result-foot .used-by  { color: #0a5; font-weight: 500; }

/* nudges */
.nudges { background: #fffbea; border: 1px solid #fde68a; padding: .75rem 1rem; margin-top: 1rem; border-radius: 6px; }
.nudges h4 { margin: 0 0 .25rem; color: #7a4c00; }
.nudges ul { margin: .25rem 0 .5rem; padding-left: 1.25rem; font-size: .9rem; }

/* contact modal */
.contact-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.contact-card { background: #fff; padding: 1.25rem; border-radius: 8px; width: 90%; max-width: 480px; }
.contact-card textarea { width: 100%; min-height: 100px; padding: .5rem; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.contact-actions { display: flex; gap: .5rem; margin-top: .75rem; justify-content: flex-end; }

/* greeting */
.greeting { margin-top: -.5rem; }

/* Phase 8 — share card */
.share-card { background: #ecfdf5; border: 1px solid #a7f3d0; padding: 1rem 1.25rem;
  margin-top: 1.5rem; border-radius: 6px; }
.share-card h3 { margin: 0 0 .25rem; color: #065f46; }
.share-card p  { margin: .25rem 0 .75rem; }
.share-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.share-btn {
  padding: .5rem .9rem; background: #059669; color: #fff; border: 0; border-radius: 4px;
  cursor: pointer; text-decoration: none; font: inherit; display: inline-block;
}
.share-btn[data-share-action="copy"] { background: #0f766e; }
.share-btn:hover { filter: brightness(.95); }

/* follow-up suggestions */
.followup { margin-top: 1.25rem; }
.followup h3 { margin: 0 0 .5rem; }
.followup-grid { display: flex; gap: .5rem; flex-wrap: wrap; }
.followup-item { margin: 0; }
.followup-item button {
  background: #fff; color: #222; border: 1px solid #ddd;
  padding: .5rem .9rem; border-radius: 4px; cursor: pointer;
}
.followup-item button:hover { background: #f5f9ff; border-color: #99c; }

/* guides */
.guides-list { list-style: none; padding: 0; }
.guides-list li { background: #fff; border: 1px solid #eee; padding: .75rem 1rem;
  margin: .5rem 0; border-radius: 6px; }
.guides-list a { color: #2563eb; text-decoration: none; font-size: 1.05rem; }
.guides-list p  { margin: .25rem 0 0; font-size: .9rem; }
.guide-cta { margin-top: 1.5rem; padding: 1rem; background: #f0f4ff;
  border-radius: 6px; border: 1px solid #cdd8ff; }

/* claim form */
.claim-form label { display: block; margin-top: .75rem; font-weight: 500; }
.claim-form input, .claim-form select, .claim-form textarea {
  width: 100%; max-width: 480px; padding: .5rem; font: inherit;
  border: 1px solid #ddd; border-radius: 4px; margin-top: .25rem;
}
.claim-form button { margin-top: 1rem; }

/* Phase 9D — opportunities + SEO */
.opportunities { margin-top: 1.25rem; }
.opportunities h3 { margin: 0 0 .5rem; font-size: 1rem; color: #444; }
.opportunities-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem;
}
.opportunity-card-form { margin: 0; }
.opportunity-card {
  width: 100%; text-align: left; padding: .65rem .75rem;
  background: #fff; color: #222; border: 1px solid #e5e7eb; border-radius: 6px;
  cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: .15rem;
}
.opportunity-card:hover { border-color: #059669; background: #ecfdf5; }
.opportunity-name    { font-weight: 600; font-size: .95rem; }
.opportunity-meta    { font-size: .75rem; }
.opportunity-reason  { font-size: .8rem; color: #444; margin-top: .15rem; }
.seo-cta { margin: 1.25rem 0; }
.seo-result { background: #fafafa; }

/* Phase 9C / 10D — Stitch-style bento category grid */
.category-picker { margin-top: .75rem; margin-bottom: 2rem; }
.category-picker h3 {
  margin: 0 0 .75rem; font-size: 1rem; color: var(--c-on-surface);
  font-weight: 600; letter-spacing: -0.005em;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.category-tile-form { margin: 0; }
.category-tile {
  width: 100%; padding: 1.1rem .5rem 1rem;
  background: var(--c-surface-lowest); color: var(--c-on-surface);
  border: 1px solid rgba(195,198,208,.25);
  border-radius: var(--r-md);
  cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  transition: border-color .1s, background .1s, transform .08s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(23,29,27,.03);
}
.category-tile:hover  {
  border-color: var(--c-primary); background: var(--c-primary-fixed);
  box-shadow: var(--shadow-lift);
}
.category-tile:active { transform: scale(0.97); }
.category-icon  { font-size: 1.6rem; line-height: 1; }
.category-label { font-size: .82rem; font-weight: 600; line-height: 1.2; text-align: center; }

/* Per-category color accents — mirrors the Stitch bento palette */
.category-tile-form:nth-child(1) .category-tile { background: var(--c-primary-fixed);   color: var(--c-on-primary-fixed); }      /* Jobs — blue */
.category-tile-form:nth-child(2) .category-tile { background: var(--c-primary-container); color: #fff; border-color: transparent; } /* Legal — navy */
.category-tile-form:nth-child(3) .category-tile { background: var(--c-surface-high);    color: var(--c-on-surface); }            /* Housing — surface */
.category-tile-form:nth-child(4) .category-tile { background: var(--c-tertiary-fixed);  color: var(--c-on-tertiary-fixed-var); } /* Community — amber */
.category-tile-form:nth-child(5) .category-tile { background: var(--c-secondary-container); color: var(--c-on-secondary-fixed-var); } /* Education — mint */
.category-tile-form:nth-child(6) .category-tile { background: var(--c-surface-lowest);  color: var(--c-on-surface); }            /* Finance — white */
.category-tile-form:nth-child(7) .category-tile { background: var(--c-secondary-fixed); color: var(--c-on-secondary-fixed-var); } /* Health — mint */
.category-tile-form:nth-child(8) .category-tile { background: var(--c-surface);         color: var(--c-on-surface); }            /* Daily life — light surface */
.category-tile-form:nth-child(1) .category-tile:hover,
.category-tile-form:nth-child(2) .category-tile:hover,
.category-tile-form:nth-child(3) .category-tile:hover,
.category-tile-form:nth-child(4) .category-tile:hover,
.category-tile-form:nth-child(5) .category-tile:hover,
.category-tile-form:nth-child(6) .category-tile:hover,
.category-tile-form:nth-child(7) .category-tile:hover,
.category-tile-form:nth-child(8) .category-tile:hover {
  filter: brightness(0.96);
  border-color: rgba(14,59,105,.3);
}

/* Phase 9A — monetization (sponsored lane, verified badge, paid disclosures) */
.sponsored-lane {
  margin-top: .5rem; padding: .5rem 0 1rem;
  border-bottom: 1px dashed #e5e7eb;
}
.sponsored-header {
  margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: #78716c;
}
.result-sponsored {
  border: 1px solid #fde68a; background: #fffbeb;
}
.result-sponsored .rank {
  color: #92400e; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-verified {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f; font-weight: 600;
}
.paid-disclosures { margin: .25rem 0 .5rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.paid-label {
  display: inline-block; padding: .1rem .45rem;
  font-size: .7rem; border-radius: 3px;
  border: 1px solid transparent;
}
.paid-sponsored { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.paid-boosted   { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }

/* ====================================================================== */
/* Phase 10A — mobile UX, refine flow, contribute links, empty states     */
/* ====================================================================== */

/* Refine screen — "What's your situation?" */
.refine {
  margin-top: .5rem;
}
.refine-prompt {
  font-size: 1.15rem; font-weight: 600; margin: .25rem 0 .75rem;
}
.refine-breadcrumb {
  font-size: .8rem; color: #666; letter-spacing: .02em;
  text-transform: uppercase; margin-bottom: .5rem;
}
.refine-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem; margin-bottom: 1rem;
}
.refine-tile {
  width: 100%; min-height: 56px; padding: .95rem 1rem;
  text-align: left;
  background: var(--c-surface-lowest);
  border: 1px solid rgba(195,198,208,.3);
  border-radius: var(--r-md);
  font: inherit; cursor: pointer; color: var(--c-on-surface);
  display: flex; align-items: center; gap: .65rem;
  font-weight: 500;
  transition: border-color .1s, background .1s, transform .08s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(23,29,27,.03);
}
.refine-tile:hover  {
  border-color: var(--c-primary); background: var(--c-primary-fixed);
  color: var(--c-on-primary-fixed); box-shadow: var(--shadow-lift);
}
.refine-tile:active { transform: scale(0.98); }
.refine-tile .refine-icon { font-size: 1.25rem; }
.refine-skip {
  display: inline-block; margin-top: .25rem;
  font-size: .9rem; color: #555; text-decoration: underline;
}

/* Action-button row on result cards — Stitch-style rounded pills */
.result-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem;
}
.result-actions .action-btn {
  flex: 1 1 auto; min-width: 5.5rem; min-height: 44px;
  padding: .6rem 1rem; font: inherit; font-weight: 600;
  border: 1px solid transparent;
  background: var(--c-surface-low); color: var(--c-on-surface);
  border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  text-decoration: none;
  transition: background .12s, transform .08s, box-shadow .15s;
}
.result-actions .action-btn:hover  { background: var(--c-surface); }
.result-actions .action-btn:active { transform: scale(0.97); }
.result-actions .action-btn.primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-container));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(14,59,105,.20);
  flex-basis: 100%;
}
.result-actions .action-btn.primary:hover { filter: brightness(1.05); }

/* Primary result spotlight — top match gets visual weight */
.result.top-match {
  border: 1px solid rgba(14,59,105,.12);
  background: var(--c-surface-lowest);
  padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: var(--shadow-soft);
}
.top-match-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .7rem; margin-bottom: .5rem;
  background: var(--c-primary); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  border-radius: var(--r-pill); text-transform: uppercase;
}
.top-match-badge::before { content: "⭐"; }

/* Contribute row — "Know someone better?" etc. */
.contribute-row {
  margin-top: 2rem; padding: 1.25rem;
  background: var(--c-surface-lowest);
  border: 1px dashed rgba(195,198,208,.5);
  border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(23,29,27,.02);
}
.contribute-row h3 {
  margin: 0 0 .75rem; font-size: 1rem;
  color: var(--c-on-surface); font-weight: 600;
}
.contribute-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.contribute-link {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .55rem .9rem; min-height: 44px;
  background: var(--c-surface-low); color: var(--c-on-surface);
  border-radius: var(--r-pill);
  text-decoration: none; font-size: .88rem; font-weight: 500;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.contribute-link:hover {
  background: var(--c-primary-fixed); color: var(--c-on-primary-fixed);
}

/* Feedback form */
.feedback-form label { display: block; margin-top: .75rem; font-weight: 500; }
.feedback-form input, .feedback-form select, .feedback-form textarea {
  width: 100%; max-width: 480px; padding: .5rem; font: inherit;
  border: 1px solid #ddd; border-radius: 4px; margin-top: .25rem;
}
.feedback-form button { margin-top: 1rem; }

/* Empty state — no results yet */
.empty-state {
  margin-top: 1rem; padding: 1.25rem; background: #fff;
  border: 1px solid #eee; border-radius: 8px; text-align: center;
}
.empty-state h3 { margin-top: 0; color: #444; }
.empty-state .empty-next { margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Bottom nav — Stitch frosted glass, rounded-top, gradient-pill active */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; justify-content: space-around; align-items: center;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-top: 1px solid rgba(195,198,208,0.25);
  border-top-left-radius: 32px; border-top-right-radius: 32px;
  padding: .5rem 1rem 1.25rem;
  box-shadow: 0 -10px 30px -5px rgba(23,29,27,0.05);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-outline); text-decoration: none;
  font-size: .7rem; font-weight: 500; gap: .15rem;
  padding: .45rem .5rem;
  border-radius: var(--r-pill);
  transition: background .12s, color .12s, transform .08s;
}
.bottom-nav a:active { transform: scale(0.95); }
.bottom-nav a .nav-icon { font-size: 1.4rem; line-height: 1; }
.bottom-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-container));
  box-shadow: 0 4px 12px rgba(14,59,105,.25);
  padding: .5rem 1.1rem;
}

/* Mobile media queries */
@media (max-width: 520px) {
  main { padding: 0 .75rem; margin-top: 1rem; margin-bottom: 4.5rem; }
  header { padding: .6rem .75rem; }
  h1 { font-size: 1.35rem; }

  /* Category grid becomes 3-wide on small screens so tiles stay readable */
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .category-tile  { padding: .8rem .3rem; border-radius: 9px; }
  .category-icon  { font-size: 1.5rem; }
  .category-label { font-size: .8rem; }

  /* Tighten the result cards on mobile */
  .result { padding: .85rem .85rem; }
  .result .rank { top: .85rem; right: .85rem; }

  /* Show bottom nav on small screens */
  .bottom-nav { display: flex; }
}

/* Extra-small screens (old Androids, narrow frames) */
@media (max-width: 360px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-label { font-size: .75rem; }
  h1 { font-size: 1.2rem; }
}

/* ====================================================================== */
/* Phase 10B — save icon states, saved list, feedback admin               */
/* ====================================================================== */

/* Save button active-state */
.action-btn[data-action="save"][data-saved="true"] {
  background: #fef3c7; color: #92400e; border-color: #f59e0b;
}
.action-btn[data-action="save"][data-saved="true"] .save-icon { color: #d97706; }

/* Saved list (client-rendered on /saved) */
.saved-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .75rem; }
.saved-empty { padding: 1rem; text-align: center; }
.saved-card  { background: #fff; }
.saved-card h3 { margin-top: 0; }

/* Feedback admin */
.feedback-filter {
  margin: .75rem 0;
  font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.feedback-filter a {
  padding: .25rem .55rem; background: #f3f4f6; color: #1a1a1a;
  text-decoration: none; border-radius: 999px; border: 1px solid #e5e7eb;
}
.feedback-filter a:hover { background: #e5e7eb; }
.feedback-list { list-style: none; padding: 0; margin: 0; }
.feedback-entry {
  background: #fff; padding: .85rem 1rem;
  border: 1px solid #eee; border-radius: 8px; margin-bottom: .5rem;
}
.feedback-meta {
  display: flex; justify-content: space-between;
  font-size: .8rem; margin-bottom: .25rem;
}
.feedback-kind {
  background: #eff6ff; color: #1d4ed8;
  padding: .1rem .5rem; border-radius: 3px; font-weight: 600;
}
.feedback-message {
  margin: .4rem 0 0; white-space: pre-wrap; font-size: .95rem;
}

/* ====================================================================== */
/* Phase 10C — primary trust badge + freshness chip + details + warning   */
/* ====================================================================== */

/* Primary trust badge — Stitch uppercase pill, one per card */
.trust-row {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin: .3rem 0 .5rem;
}
.badge-trust {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: .25rem .7rem;
  display: inline-flex; align-items: center; gap: .25rem;
}
.badge-trust-official   { background: var(--c-primary-fixed);   color: var(--c-on-primary-fixed); }
.badge-trust-verified   { background: var(--c-secondary-fixed); color: var(--c-on-secondary-fixed-var); }
.badge-trust-community  { background: var(--c-tertiary-fixed);  color: var(--c-on-tertiary-fixed-var); }
.badge-trust-pending    { background: var(--c-error-container); color: #8b1e0e; }

/* Freshness chip — Stitch thin pill, informational only. */
.freshness-chip {
  font-size: .7rem; font-weight: 500;
  padding: .15rem .6rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-outline-variant);
  background: var(--c-surface-lowest);
  color: var(--c-on-surface-variant);
}
.freshness-fresh    { color: var(--c-on-secondary-fixed-var); border-color: var(--c-secondary-fixed); background: #f0fdf4; }
.freshness-stale    { color: var(--c-on-tertiary-fixed-var);  border-color: var(--c-tertiary-fixed);  background: #fffbeb; }
.freshness-unknown  { color: var(--c-outline); }

/* Why-line — Stitch inspired "lightbulb" callout on the top match */
.why-line {
  margin: .5rem 0 .75rem;
  font-size: .92rem;
  color: var(--c-on-surface-variant);
  background: var(--c-secondary-container);
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  font-style: italic;
  line-height: 1.45;
  position: relative;
}
.why-line::before {
  content: "💡 ";
  font-style: normal;
}

/* Incomplete-info warning — never blocks, just flags */
.incomplete-warning {
  margin: .35rem 0;
  font-size: .82rem;
  color: #92400e;
  background: #fffbeb;
  padding: .35rem .55rem;
  border-radius: 4px;
  border: 1px solid #fde68a;
}

/* Expandable "Why this result?" details block — native <details> */
.trust-details {
  margin-top: .55rem;
  font-size: .85rem;
}
.trust-details summary {
  cursor: pointer;
  color: #2563eb;
  padding: .2rem 0;
  min-height: 32px;
  display: inline-flex; align-items: center;
}
.trust-details summary:hover { text-decoration: underline; }
.trust-details-body {
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  display: flex; flex-direction: column; gap: .25rem;
}
.trust-details-body strong { color: #444; }

/* Per-card Report link, bottom-right of the card */
.card-footer-row {
  margin-top: .5rem;
  display: flex; justify-content: flex-end;
}
.report-link {
  font-size: .8rem; color: #92400e; text-decoration: none;
  padding: .2rem .5rem;
  border-radius: 4px;
  min-height: 32px;
  display: inline-flex; align-items: center;
}
.report-link:hover { background: #fffbeb; text-decoration: underline; }

/* Feedback-admin operator hint chips */
.feedback-hints { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.feedback-hint {
  font-size: .7rem; font-weight: 600;
  padding: .1rem .5rem; border-radius: 3px;
  border: 1px solid transparent;
}
.hint-priority { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.hint-review   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.hint-missing  { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.hint-info     { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }