/* ─────────────────────────────────────────────
   calcifer p2p — global v3
   modello FM26: layered surfaces, floating nav,
   DM Sans + JetBrains Mono, dense & bold
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── tokens ────────────────────────────────── */
:root {
  /* surfaces */
  --bg:        #f7f7f8;
  --surface:   #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f3f3f5;
  --surface-4: #ebebed;

  /* borders */
  --border:    rgba(0,0,0,.055);
  --border-md: rgba(0,0,0,.09);

  /* ink */
  --text:      #111114;
  --text-2:    #72727a;
  --text-3:    #b0b0b8;
  --text-inv:  #ffffff;

  /* brand — arancio calcifer */
    --accent:      hsl(351deg 84% 44%);
    --accent-2:    hsl(351deg 84% 50%);
    --accent-soft: hsla(351deg,84%,44%,.10);
    --accent-glow: hsla(351deg,84%,44%,.22);

  /* semantic */
  --green:      #28b463;
  --green-soft: rgba(40,180,99,.10);
  --red:        #e8392a;
  --red-soft:   rgba(232,57,42,.09);
  --amber:      #d97706;
  --amber-soft: rgba(217,119,6,.10);

  /* typography */
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* radius */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-3xl:  36px;
  --r-pill: 999px;

  /* shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 1px 4px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.05);
  --sh-lg: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  --sh-xl: 0 20px 60px rgba(0,0,0,.10), 0 6px 20px rgba(0,0,0,.06);
    --sh-accent: 0 4px 18px hsla(351deg,84%,44%,.28);

  /* motion */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --smooth: cubic-bezier(.25, .46, .45, .94);
  --out:    cubic-bezier(0, 0, .2, 1);

  /* layout */
  --sidebar-w:   240px;
  --content-max: 480px;
  --page-px:     16px;
  --topbar-h:    54px;
  --nav-h:       70px;
}

/* ── reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  line-height: 1.55;
  overflow-x: hidden;
  overscroll-behavior: none;
}

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
button   { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; border: none; outline: none; background: none; color: inherit; }
ul, ol   { list-style: none; }

/* ── typography ────────────────────────────── */
.page-title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.15;
  color: var(--text);
}
.page-subtitle {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 3px;
  font-family: var(--mono);
}
.section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* numeri — mono bold */
.num {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
}
.num-xl { font-size: 2.5rem; letter-spacing: -1.5px; }
.num-lg { font-size: 1.75rem; letter-spacing: -1px; }
.num-md { font-size: 1.25rem; letter-spacing: -.5px; }
.num-sm { font-size: 1rem; }

.c-2      { color: var(--text-2); }
.c-3      { color: var(--text-3); }
.c-accent { color: var(--accent); }
.c-green  { color: var(--green); }
.c-red    { color: var(--red); }

/* ── layout ────────────────────────────────── */
#app {
  display: flex;
  min-height: 100dvh;
}

/* sidebar desktop */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100dvh;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: none;
  flex-direction: column;
  padding: 28px 14px;
}

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* topbar */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px var(--page-px);
  height: var(--topbar-h);
  background: rgba(247,247,248,.88);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}

#page {
  flex: 1;
  padding-bottom: calc(var(--nav-h) + 32px);
}

/* floating pill nav */
#bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  padding: 5px;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow:
    0 2px 12px rgba(0,0,0,.08),
    0 6px 32px rgba(0,0,0,.07),
    0 0 0 .5px rgba(0,0,0,.07);
  width: auto;
  max-width: calc(100% - 32px);
}

/* desktop */
@media (min-width: 860px) {
  #sidebar    { display: flex; }
  #bottom-nav { display: none; }
  #topbar     { display: none; }
  body        { padding: 0; }
  #page       { padding-bottom: 48px; }
}

@media (min-width: 1024px) {
  #main { padding: 0 200px; }
}

/* ── page motion ───────────────────────────── */
.page-enter {
  animation: pageIn .28s var(--smooth) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stagger > * { animation: fadeUp .3s var(--smooth) both; }
.stagger > *:nth-child(1) { animation-delay:  30ms; }
.stagger > *:nth-child(2) { animation-delay:  70ms; }
.stagger > *:nth-child(3) { animation-delay: 110ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 190ms; }
.stagger > *:nth-child(6) { animation-delay: 230ms; }
.stagger > *:nth-child(7) { animation-delay: 270ms; }
.stagger > *:nth-child(8) { animation-delay: 310ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── animations ────────────────────────────── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100% { opacity: 1; } 50% { opacity: .42; } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.93); } }
@keyframes chipPop  { 0% { transform: scale(1); } 50% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes shimmer  { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }

/* ── material symbols ──────────────────────── */
.ms {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  direction: ltr;
  user-select: none;
}
.ms-sm  { font-size: 18px; }
.ms-lg  { font-size: 28px; }
.ms-xl  { font-size: 36px; }

/* ── scrollbar ─────────────────────────────── */
::-webkit-scrollbar       { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 99px; }

/* ── focus ─────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* ── selection ─────────────────────────────── */
::selection { background: var(--accent-soft); color: var(--accent); }

/* ── loader ────────────────────────────────── */
#loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .3s var(--ease), visibility .3s;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
  width: 26px; height: 26px;
  border: 2px solid var(--surface-4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

/* ── utils ─────────────────────────────────── */
.hidden    { display: none !important; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px        { padding-left: var(--page-px); padding-right: var(--page-px); }