/* App-level layout on top of the Industry design system. Take colors/spacing/type from industry.css tokens only. */

body {
  padding-bottom: 64px;
  max-width: 480px;
  margin: 0 auto;
}

.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.app-topbar h6 { margin: 0; color: var(--color-accent-700); }
.app-topbar .date { font-family: var(--font-heading); font-weight: 600; font-size: 22px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.tabbar-item {
  padding: 12px 0; text-align: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  color: var(--color-neutral-700); text-decoration: none;
}
.tabbar-item.active { color: #fff; background: var(--color-accent); }

.streak-banner {
  position: relative; margin: var(--space-4); padding: var(--space-4);
  background: var(--color-accent-900); color: #f2f2f3;
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--color-accent-900);
}
.streak-banner .num { font-family: var(--font-heading); font-weight: 700; font-size: 46px; line-height: 0.85; }
.streak-banner .label { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: var(--color-accent-300); }
.streak-banner .sub { font-size: 13px; margin-top: 3px; color: #dfe6ee; }
.streak-banner .best { margin-left: auto; text-align: right; font-size: 11px; color: var(--color-accent-300); }
.streak-banner .best strong { display: block; font-family: var(--font-heading); font-size: 20px; color: #fff; }

.section-label {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
}

.tile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  padding: 0 var(--space-4);
}
.tile {
  position: relative; padding: var(--space-3); min-height: 96px;
  border: 1px solid var(--color-divider);
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: var(--color-text);
}
.tile.pending { border-color: var(--color-accent); }
.tile.optional { border-style: dashed; border-color: var(--color-neutral-400); }
.tile.done { border-color: var(--color-accent-900); background: var(--color-accent-900); color: #dfe6ee; }
.tile .tile-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.05; letter-spacing: 0.02em; }
.tile .tile-name.done-name { color: #f2f2f3; }
.tile .tile-meta { font-size: 11px; color: var(--color-neutral-600); }
.tile.done .tile-meta { color: #dfe6ee; }
.tile .tile-cta { margin-top: 6px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--color-accent-700); }
.tile .tile-value { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }

.corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.corner::before, .corner::after { content: ""; position: absolute; background: currentColor; }
.corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.corner.tl { top: -6px; left: -6px; } .corner.tr { top: -6px; right: -6px; }
.corner.bl { bottom: -6px; left: -6px; } .corner.br { bottom: -6px; right: -6px; }

.insight-list { padding: 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.insight-item { padding: var(--space-3); border: 1px dashed var(--color-neutral-400); font-size: 12.5px; line-height: 1.45; }

.done-list { margin: var(--space-2) var(--space-4) 0; display: flex; flex-direction: column; gap: 6px; }
.done-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--color-neutral-200); }
.done-row .check { color: var(--color-accent-700); }
.done-row .name { flex: 1; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-neutral-700); }
.done-row .meta { font-size: 12.5px; color: var(--color-neutral-700); }

.report-card {
  position: relative; margin: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--color-divider);
}
.report-card .rc-head { display: flex; justify-content: space-between; align-items: baseline; }
.report-card .rc-title { font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; }
.report-card .rc-meta { font-size: 10.5px; color: var(--color-neutral-600); }
.report-card .rc-body { margin-top: 10px; }
.report-card .rc-stat { font-family: var(--font-heading); font-weight: 700; font-size: 34px; }
.report-card .rc-insight { margin-top: 8px; font-size: 12px; color: var(--color-neutral-700); }
.reveal-link { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; color: var(--color-accent-700); cursor: pointer; background: none; border: none; padding: 0; }

.heatmap-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.heatmap-cell { aspect-ratio: 1; background: var(--color-neutral-200); }
.heatmap-cell.on { background: var(--color-accent); }
.heatmap-cell.off { background: var(--color-neutral-200); }

.builder-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 var(--space-4); margin-top: var(--space-3); }
.builder-steps span { height: 3px; background: var(--color-neutral-300); }
.builder-steps span.done { background: var(--color-accent); }

.select-row {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--color-neutral-300);
  cursor: pointer; background: none; width: 100%; text-align: left; font: inherit; color: inherit;
}
.select-row.selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.select-row .check-box { width: 18px; height: 18px; border: 1px solid var(--color-neutral-400); flex: none; display: grid; place-items: center; font-size: 11px; }
.select-row.selected .check-box { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.select-row .row-title { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.select-row .row-meta { font-size: 10.5px; color: var(--color-neutral-600); }

.wizard-actions { display: flex; gap: 10px; padding: var(--space-4); }

.monitor-shell { max-width: none; padding-bottom: 0; }
.monitor-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  grid-auto-rows: 24px;
  gap: 4px;
  padding: var(--space-3);
}
.monitor-tile {
  position: relative; border: 1px solid var(--color-divider); padding: var(--space-2);
  overflow: hidden; background: var(--color-bg);
}
.monitor-tile .mt-title { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; cursor: move; }
.monitor-tile.dragging { opacity: 0.6; z-index: 5; }
.resize-handle {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--color-accent) 50%);
}

.manage-tabs { display: flex; border-bottom: 1px solid var(--color-divider); }
.manage-tabs a { flex: 1; text-align: center; padding: var(--space-3); font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-decoration: none; color: var(--color-neutral-700); }
.manage-tabs a.active { color: var(--color-accent-700); border-bottom: 2px solid var(--color-accent); }

.manage-row { display: flex; align-items: center; gap: 10px; padding: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.manage-row .mr-name { flex: 1; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.manage-row .mr-meta { font-size: 11px; color: var(--color-neutral-600); }
.manage-row.archived { opacity: 0.55; }

.mask-value { letter-spacing: 0.1em; }

.checkin-shell { padding: var(--space-4); }
.emoji-scale { display: flex; justify-content: space-between; gap: 6px; margin: var(--space-4) 0; }
.emoji-opt { flex: 1; text-align: center; padding: var(--space-3) 0; border: 1px solid var(--color-neutral-300); cursor: pointer; background: none; font: inherit; }
.emoji-opt.selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.emoji-opt .em { font-size: 26px; display: block; }
.emoji-opt .lb { font-size: 10px; margin-top: 4px; color: var(--color-neutral-700); }

.tag-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0; }
.tag-toggle { padding: 7px 12px; border: 1px solid var(--color-neutral-300); font-size: 12.5px; cursor: pointer; background: none; font: inherit; }
.tag-toggle[data-sentiment="1"].active { border-color: #4c7a4c; background: #eaf3ea; color: #2c552c; }
.tag-toggle[data-sentiment="-1"].active { border-color: #a1453b; background: #f8ecea; color: #7a2f27; }

.counter-stepper { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-6) 0; }
.counter-stepper button { width: 52px; height: 52px; font-size: 24px; }
.counter-stepper .val { font-family: var(--font-heading); font-weight: 700; font-size: 40px; min-width: 80px; text-align: center; }

.bool-choice { display: flex; gap: 10px; margin: var(--space-4) 0; }
.bool-choice button { flex: 1; padding: 16px 0; }

@media (min-width: 900px) {
  .monitor-shell { max-width: 1400px; margin: 0 auto; }
}