/* LOVESOCIAL OS — theme overrides + small component classes.
   Design tokens live in the Tailwind @theme block in index.html; this file
   only overrides them for the light theme and defines reusable components. */

html[data-theme="light"] {
  --color-ink: #191221;
  --color-muted: #665c73;
  --color-surface: #f5f2f8;
  --color-surface-2: #ffffff;
  --color-line: #e2dbeb;
}

*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

.card { background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-card); }

.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .62rem .9rem;
  border: 1px solid var(--color-line); border-radius: .6rem; background: var(--color-surface-2);
  color: var(--color-ink); font: inherit; font-weight: 600; font-size: .85rem; line-height: 1.2;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.btn:hover { border-color: var(--color-accent); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #16070c; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; }
.btn-danger:hover { border-color: var(--color-down); color: var(--color-down); }
.btn.on { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-primary.on { color:#16070c; }
.btn, .input, select.input { min-height: 2.75rem; }
@media (pointer: coarse) { button.chip { min-height: 2.75rem; } }

.input { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: .55rem;
  padding: .45rem .7rem; font: inherit; font-size: .88rem; color: var(--color-ink); min-width: 0; }
.input::placeholder { color: var(--color-muted); opacity: .7; }
.input:disabled { opacity: .35; cursor: not-allowed; }

.chip { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .7rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--color-line); white-space: nowrap; }
.dot { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; flex: none; }

.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tbl th { text-align: left; color: var(--color-muted); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .5rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.tbl th[data-key] { cursor: pointer; user-select: none; }
.tbl th[data-key]:hover { color: var(--color-ink); }
.tbl td { padding: .6rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.rowlink { cursor: pointer; }
.tbl tbody tr.rowlink:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.num { font-variant-numeric: tabular-nums; }

.empty { border: 1.5px dashed var(--color-line); border-radius: var(--radius-card);
  padding: 2.2rem 1.5rem; text-align: center; color: var(--color-muted); font-size: .9rem; }

.callout-warn { border: 1px solid color-mix(in srgb, var(--color-warn) 45%, transparent);
  background: color-mix(in srgb, var(--color-warn) 9%, transparent);
  border-radius: var(--radius-card); padding: .75rem 1rem; font-size: .85rem; }

.tab { padding: .5rem .9rem; border: 0; background: none; color: var(--color-muted); font: inherit;
  font-weight: 700; font-size: .85rem; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.on { color: var(--color-ink); border-bottom-color: var(--color-accent); }

.field-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-muted); font-weight: 700; margin-bottom: .3rem; }

.axis { fill: var(--color-muted); font-size: 11px; }

/* chart line hover: hovered account thickens, siblings recede */
.chart-series { transition: opacity .15s; }
svg:has(.chart-series:hover) .chart-series:not(:hover) { opacity: .25; }
.chart-series:hover .chart-line { stroke-width: 3.5; }

/* locked: nav + footer hidden until the team password is entered */
body.locked header nav a, body.locked #lock-btn, body.locked footer { display: none; }

.legend-off { opacity: .38; text-decoration: line-through; }

@media print {
  header nav, #sample-banner, .noprint { display: none !important; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: no-preference) {
  .view-enter { animation: viewfade .25s ease-out; }
  @keyframes viewfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}