/* lvling — global core: design tokens, resets, base elements, and the handful of
   cross-cutting utilities used by 3+ modules. Everything else is co-located with
   its component/view via adopt() (see ui/sheet.js). This is the only stylesheet. */
:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #06080d;
  color: #f4f7fb;
  /* System palette — used by the quest area (cyan chrome, violet RES). */
  --q-sys: #38bdf8;
  --q-res: #a78bfa;
  --q-line: #1b2940;
  --q-qink: #c8d4e6;
  --q-dim: #5d6b82;
  --q-pnl: #0d131f;
  --q-pnl2: #0a0f18;
  --q-clip: 11px;
  /* Reusable notched-corner clip-paths (sci-fi chamfer). */
  --notch-sm: polygon(
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%,
    0 5px
  );
  --notch-md: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  --notch-lg: polygon(
    11px 0,
    100% 0,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    0 100%,
    0 11px
  );
  --history-item-height: 2.8125rem;
  --feed-row-gap: 5px;
  --tab-feed-gap: 6px;
  --tab-feed-footer-height: 40px;
  --history-list-height: calc(
    var(--history-item-height) * 8 + var(--feed-row-gap) * 7
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  display: grid;
  align-items: stretch;
  justify-items: center;
  padding: 0;
  background: #06080d;
}

main {
  width: 100%;
  max-width: 720px;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

p {
  margin: 0 0 24px;
  color: var(--q-qink);
  line-height: 1.5;
}

button {
  width: 100%;
  min-height: 52px;
  border: 0;
  clip-path: var(--notch-md);
  padding: 14px 16px;
  cursor: pointer;
  background: rgba(56, 189, 248, 0.14);
  color: var(--q-sys);
  font: inherit;
  font-weight: 800;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* ---- cross-cutting utilities (used by 3+ modules; belong to no single one) ---- */
.status {
  flex-shrink: 0;
  min-height: 24px;
  margin-top: 12px;
  color: var(--q-qink);
}

.error {
  color: #ff9b9b;
}

.stats-empty {
  margin: 0 0 20px;
  color: var(--q-dim);
}

.tab-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-view--scroll {
  overflow-y: auto;
}

/* Lead paragraph atop the pen views (Focus / Exercise / Duties / People). */
.focus-lead,
.people-lead {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--q-dim);
}

/* Shared pen-tile head — name + payout chips row inside a clickable Card's title,
   across Focus / People / Duties / Exercise. */
.focus-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
}
.focus-tile-name {
  font-weight: 800;
}
.pen-tile-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--q-dim);
}