/* flat.css — Flat "social platform" surface system for Atline.
   Loaded AFTER colors_and_type.css: keeps the brand FONTS, brand COLORS
   (orange / gold / navy) and the heading/body/label type scale, but REPLACES
   the neumorphic surfaces with flat cards, light shadows and hairlines —
   a Facebook-style flat aesthetic in Atline's palette. No neumorphism,
   no glassmorphism, no backdrop blur. */

/* Global border-box reset so width:100% + padding behaves (fixes oversized inputs) */
*, *::before, *::after { box-sizing: border-box; }

/* ---- FLAT light theme (default) ---- */
:root,
html[data-theme="light"] {
  --bg:        #F0F2F5;   /* page — exact Facebook gray */
  --surface:   #FFFFFF;   /* cards — pure white, must pop off the page */
  --s2:        #E4E6EB;   /* filled fields, soft/secondary buttons (FB) */
  --s3:        #D8DADF;   /* chips / nested / hover-darker */
  --hover:     #F2F2F2;   /* row hover */
  --fg:        #1C1E21;
  --fg-2:      #4B4F56;
  --muted:     #65676B;
  --border:    #CED0D4;   /* FB divider grey */

  --shadow-card: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-pop:  0 6px 22px rgba(0,0,0,0.16);
  --topbar-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05);
}

/* ---- FLAT dark theme ---- */
html[data-theme="dark"] {
  --bg:        #18191A;
  --surface:   #242526;
  --s2:        #3A3B3C;
  --s3:        #303031;
  --hover:     #303031;
  --fg:        #E4E6EB;
  --fg-2:      #B0B3B8;
  --muted:     #8A8D91;
  --border:    #393A3B;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-pop:  0 6px 22px rgba(0,0,0,0.55);
  --topbar-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.5);
}

/* Flat radius scale (Facebook-ish) */
:root {
  --r-card: 12px;
  --r-ctrl: 8px;
  --r-pill: 999px;
}

body { background: var(--bg); color: var(--fg); }

/* ---- Card: flat white panel, soft shadow, no border, no inset ---- */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ---- Buttons (flat, solid fills) — OVERRIDE the neumorphic ones ---- */
.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: var(--r-ctrl);
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
  transition: background var(--dur) var(--ease-soft), filter var(--dur) var(--ease-soft), opacity var(--dur);
}
.btn-primary { background: var(--orange); color: #fff; box-shadow: none; }
.btn-primary:hover  { background: var(--orange-dark); transform: none; box-shadow: none; }
.btn-primary:active { filter: brightness(0.92); }

.btn-soft { background: var(--s2); color: var(--fg); }
.btn-soft:hover  { background: var(--s3); transform: none; }

.btn-neutral { background: var(--s2); color: var(--fg); box-shadow: none; }
.btn-neutral:hover  { background: var(--s3); transform: none; box-shadow: none; }
.btn-neutral:active { box-shadow: none; }

.btn-gold { background: var(--gold); color: var(--navy); box-shadow: none; }
.btn-gold:hover { background: var(--gold-dark); }

.btn-ghost { background: transparent; color: var(--orange); }
.btn-ghost:hover { background: var(--orange-soft); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Header Atlas pill (classy: quiet default, lights up on hover/active) ---- */
.hdr-atlas { transition: background var(--dur) var(--ease-soft), border-color var(--dur); }
.hdr-atlas:not([data-open="1"]):hover { background: var(--hover) !important; }

/* ---- Filled inputs (flat, gray, no inset shadow) ---- */
.flat-input {
  font-family: var(--font-sans);
  font-size: 15px;
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  border-radius: var(--r-pill);
  padding: 10px 16px;
  background: var(--s2);
  color: var(--fg);
  box-shadow: none;
  transition: background var(--dur) var(--ease-soft), border-color var(--dur);
}
.flat-input::placeholder { color: var(--muted); }
.flat-input:focus { background: var(--surface); border-color: var(--orange); }

/* ---- Chips / pills (flat gray) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--s2);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease-soft), color var(--dur);
}
.chip:hover { background: var(--s3); }
.chip-active { background: var(--orange-soft); color: var(--orange); }
.chip-active:hover { background: var(--orange-soft); }

/* ---- Progress (flat track + orange fill) ---- */
.flat-progress {
  height: 8px; border-radius: var(--r-pill);
  background: var(--s2); overflow: hidden;
}
.flat-progress > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--orange); transition: width var(--dur-slow) var(--ease-soft); }
.flat-progress.gold > i { background: var(--gold); }

/* Hover row helper */
.row-hover { transition: background var(--dur) var(--ease-soft); border-radius: var(--r-ctrl); }
.row-hover:hover { background: var(--hover); }

/* ---- Larger, coherent type scale (titles a little, body text more) ---- */
.h1 { font-size: 38px; }
.h2 { font-size: 28px; }
.h3 { font-size: 22px; line-height: 1.3; }
.h4 { font-size: 18px; }
.body    { font-size: 16.5px; }
.body-lg { font-size: 18.5px; }
.small   { font-size: 15px; }
.caption { font-size: 13.5px; }
.label   { font-size: 12.5px; }

/* Color discipline (Tweak): navy headings in light theme for an authoritative anchor */
[data-disc="1"][data-theme="light"] .h1,
[data-disc="1"][data-theme="light"] .h2,
[data-disc="1"][data-theme="light"] .h3,
[data-disc="1"][data-theme="light"] .h4 { color: var(--navy); }

/* Color discipline: progress bars by meaning (generic = navy, money = gold, learning = green) */
[data-disc="1"] .flat-progress > i { background: var(--navy); }
[data-disc="1"] .flat-progress.gold > i { background: var(--gold); }
[data-disc="1"] .flat-progress.green > i { background: var(--success); }
/* darker orange for small ghost links → legibility */
[data-disc="1"] .btn-ghost { color: var(--orange-dark); }

/* App-shell column scrollers: thin, auto-hiding (visible on hover) */
.col-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.col-scroll:hover { scrollbar-color: var(--border) transparent; }
.col-scroll::-webkit-scrollbar { width: 10px; }
.col-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
.col-scroll:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: padding-box; }

/* Focus: keep a ring for keyboard users, none for mouse clicks (avoids misleading black ring) */
button:focus:not(:focus-visible) { outline: none; }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Round icon buttons (top bar) — use a CSS class so var() resolves correctly across themes */
.round-icon { background-color: var(--s2); }
.round-icon:hover { background-color: var(--s3); }
.round-icon.active, .round-icon.active:hover { background-color: var(--orange-soft); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }