/* components.css — page-level shared styles for the redesign (REM-based, inside .fg-root) */

/* ============================ SITE NAV ============================ */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  background: var(--paper); /* fallback first */
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-6); max-width: var(--maxw); margin: 0 auto; }
.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-link { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; padding: .5em .85em; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: .4em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav-tools { display: flex; align-items: center; gap: .4rem; }
.nav-icon-btn { width: 2.3em; height: 2.3em; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: all var(--dur) var(--ease); }
.nav-icon-btn:hover { color: var(--ink); border-color: var(--rule-2); }

/* mobile bottom bar */
.tabbar { display: none; }

/* ============================ HERO ============================ */
.hero { padding: var(--s-8) 0 var(--s-7); }
.hero-eyebrow-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-5); }
.hero h1 { font-size: var(--t-5xl); max-width: 16ch; }
.hero .lead { max-width: 46ch; margin-top: var(--s-5); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.hero-stat .n { font-family: var(--serif); font-weight: 700; font-size: var(--t-2xl); }
.hero-stat .l { font-size: var(--t-sm); color: var(--ink-3); }

/* ============================ PERSONA ROUTER ============================ */
.persona-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.persona { text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4); cursor: pointer; transition: all var(--dur) var(--ease); display: flex; flex-direction: column; gap: var(--s-3); min-height: 8.5em; }
.persona:hover { border-color: var(--saffron); transform: translateY(-3px); box-shadow: var(--sh-2); }
.persona .p-ic { width: 2.2em; height: 2.2em; border-radius: var(--r-sm); background: var(--saffron-wash); color: var(--saffron); display: grid; place-items: center; }
.persona .p-t { font-weight: 700; font-size: var(--t-base); }
.persona .p-d { font-size: var(--t-xs); color: var(--ink-3); margin-top: auto; }

/* ============================ HUBS ============================ */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.hub { display: flex; flex-direction: column; gap: var(--s-3); }
.hub-ic { width: 2.6em; height: 2.6em; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--indigo-wash); color: var(--indigo); margin-bottom: var(--s-2); }
.hub h3 { font-family: var(--serif); font-weight: 700; font-size: var(--t-xl); }
.hub-links { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-direction: column; }
.hub-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: .55em 0; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; border-top: 1px solid var(--rule); transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); }
.hub-links a:hover { color: var(--saffron); padding-left: .35em; }
.hub-links a svg { opacity: 0; transition: opacity var(--dur) var(--ease); }
.hub-links a:hover svg { opacity: 1; }

/* ============================ FEATURE / GUIDE CARDS ============================ */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.guide-thumb { aspect-ratio: 16/9; border-radius: var(--r-sm); background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--paper-2) 8px 16px); display: grid; place-items: center; margin-bottom: var(--s-4); color: var(--ink-3); }
.guide-thumb .ph { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }

/* tool list */
.tool-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.tool-row:first-child { border-top: 0; }
.tool-ic { width: 2.6em; height: 2.6em; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--indigo); border: 1px solid var(--rule); }
.tool-meta { flex: 1; min-width: 0; }
.tool-meta .tt { font-weight: 700; }
.tool-meta .td { font-size: var(--t-sm); color: var(--ink-3); }

/* ============================ FOOTER ============================ */
.site-foot { background: var(--paper-2); border-top: 1px solid var(--rule); padding: var(--s-8) 0 var(--s-6); margin-top: var(--s-8); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); }
.foot-col h4 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.foot-col a { display: block; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: .3em 0; }
.foot-col a:hover { color: var(--saffron); }
.foot-news input { margin: var(--s-3) 0; }
.foot-legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-sm); color: var(--ink-3); display: flex; flex-direction: column; gap: var(--s-3); }

/* ============================ MODAL ============================ */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(26,18,10,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: var(--s-5); animation: fadein .18s var(--ease); }
[data-dark="true"] .modal-overlay { background: rgba(0,0,0,.62); }
.modal { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); width: 100%; max-width: 30rem; max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: pop .2s var(--ease); }
.modal--wide { max-width: 46rem; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--rule); }
.modal-x { width: 2.2em; height: 2.2em; flex: none; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-body { padding: var(--s-5); overflow: auto; font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; }
.modal-body h3 { font-family: var(--serif); color: var(--ink); margin: var(--s-5) 0 var(--s-2); font-size: var(--t-lg); }
.modal-body h3:first-child { margin-top: 0; }
.modal-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: var(--s-3); }
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ============================ CHAT FAB ============================ */
.chat-fab { position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 60; display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.1em; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); border: none; cursor: pointer; box-shadow: var(--sh-3); font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); }
.chat-fab:hover { background: var(--saffron); color: var(--on-accent); }

/* ============================ RESPONSIVE (driven by .is-mobile on frame) ============================ */
.is-mobile .nav-links { display: none; }
.is-mobile .persona-grid { grid-template-columns: repeat(2, 1fr); }
.is-mobile .hub-grid,
.is-mobile .guide-grid { grid-template-columns: 1fr; }
.is-mobile .foot-grid { grid-template-columns: 1fr 1fr; }
.is-mobile .hero h1 { font-size: var(--t-4xl); }
.is-mobile .container { padding: 0 var(--s-4); }
.is-mobile .section { padding: var(--s-7) 0; }
.is-mobile .tabbar { display: flex; position: sticky; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--rule); padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom)); justify-content: space-around; }
.is-mobile .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .62rem; color: var(--ink-3); text-decoration: none; padding: .35rem .5rem; min-width: 3.6rem; }
.is-mobile .tabbar a[aria-current="page"] { color: var(--saffron); }
.is-mobile .modal { max-width: 100%; align-self: flex-end; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.is-mobile .modal-overlay { padding: 0; align-items: flex-end; }
.is-mobile .tools-cols { grid-template-columns: 1fr !important; }
.is-mobile .trust-cols { grid-template-columns: 1fr !important; }
.is-mobile .city-layout { grid-template-columns: 1fr !important; }
.is-mobile .city-side { position: static !important; }
.is-mobile .article-layout { grid-template-columns: 1fr !important; }
.is-mobile .article-toc { display: none !important; }
.is-mobile .mer-cols { grid-template-columns: 1fr !important; }
.is-mobile .hero-stats { gap: var(--s-4); }