/* AstralEye owner app: phone-first, Hebrew RTL. Soft surfaces, big numbers, tone-coloured comparison chips. */
:root {
  --o-bg: #f3f5fa; --o-card: #ffffff; --o-ink: #101828; --o-sub: #5d6b82; --o-line: #e6e9f0;
  --o-acc: #4f46e5; --o-acc2: #2563eb; --o-acc-soft: #eef0ff;
  --o-up: #127a3b; --o-up-bg: #e5f6ec; --o-down: #b42318; --o-down-bg: #fdecea; --o-flat: #5d6b82; --o-flat-bg: #eef1f5;
  --o-hol: #b45309; --o-hol-bg: #fff4e0; --o-own: #7c3aed; --o-own-bg: #f3ecff; --o-closed: #cfd5df;
  --o-l1: #4f46e5; --o-l2: #94a3b8; --o-l3: #f59e0b;
  --o-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 6px 20px rgb(16 24 40 / .05);
  --o-hero1: #4f46e5; --o-hero2: #2563eb;
  --o-r: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --o-bg: #0c111b; --o-card: #151c2a; --o-ink: #eef2f8; --o-sub: #98a4b8; --o-line: #243047;
    --o-acc: #8b8cf8; --o-acc2: #60a5fa; --o-acc-soft: #1f2547;
    --o-up: #4ade80; --o-up-bg: #12301f; --o-down: #fb7185; --o-down-bg: #3a161c; --o-flat: #a6b0c2; --o-flat-bg: #1e2737;
    --o-hol: #fbbf24; --o-hol-bg: #33260c; --o-own: #c4a5ff; --o-own-bg: #2a1c47; --o-closed: #2c3649;
    --o-l1: #8b8cf8; --o-l2: #64748b; --o-l3: #fbbf24;
    --o-shadow: 0 1px 2px rgb(0 0 0 / .4);
    --o-hero1: #3730a3; --o-hero2: #1e40af; /* white text keeps >= 7:1 */
  }
}

body.owner { background: var(--o-bg); color: var(--o-ink); }
body.owner main { padding: 10px 16px 96px; max-width: 760px; }
body.owner .top { background: var(--o-card); border-color: var(--o-line); }

/* bottom tab bar on phones, top tabs on wide screens */
@media (max-width: 759px) {
  body.owner #nav { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--o-card); border-top: 1px solid var(--o-line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow: visible; }
  body.owner #nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; padding: 6px 0; border-radius: 12px; color: var(--o-sub); }
  body.owner #nav a.on { color: var(--o-acc); background: transparent; }
  body.owner .who { display: none; }
}
#nav svg { width: 22px; height: 22px; }
@media (min-width: 760px) { #nav svg { display: none; } }

.o-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 4px 0 10px; flex-wrap: wrap; }
.o-head h1 { font-size: 20px; margin: 0; letter-spacing: -.2px; }
.o-head .sub { color: var(--o-sub); font-size: 13px; }
.o-head select { width: auto; min-height: 34px; border-radius: 999px; padding: 4px 12px; background: var(--o-card); }

.o-card { background: var(--o-card); border-radius: var(--o-r); box-shadow: var(--o-shadow); padding: 16px; margin-top: 12px; border: 1px solid var(--o-line); }
.o-card h2 { font-size: 15px; margin: 0 0 10px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.o-card h2 .sub { font-weight: 400; font-size: 12.5px; color: var(--o-sub); }

.o-hero { background: linear-gradient(135deg, var(--o-hero1) 0%, var(--o-hero2) 100%); color: #fff; border: 0; }
.o-hero .lbl { opacity: .9; font-size: 14px; }
.o-hero .big { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -1px; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.o-hero .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.o-hero .cmp { background: rgb(255 255 255 / .14); border-radius: 14px; padding: 8px 10px; flex: 1 1 140px; }
.o-hero .cmp .cap { font-size: 12px; opacity: .85; margin-bottom: 4px; }
.o-hero .insight { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.o-hero .chip { background: #fff; }

.chip { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 3px 10px; min-height: 26px;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.chip.up { color: var(--o-up); background: var(--o-up-bg); }
.chip.down { color: var(--o-down); background: var(--o-down-bg); }
.chip.flat { color: var(--o-flat); background: var(--o-flat-bg); font-weight: 600; }
.chip.na { color: var(--o-sub); background: var(--o-flat-bg); font-weight: 500; font-size: 12px; }
.chip.lg { font-size: 16px; padding: 5px 12px; }

.tag { display: inline-block; border-radius: 6px; padding: 0 6px; font-size: 11.5px; font-weight: 600; margin-inline-end: 4px; white-space: nowrap; }
.tag.hol { color: var(--o-hol); background: var(--o-hol-bg); }
.tag.own { color: var(--o-own); background: var(--o-own-bg); }
.tag.minor { color: var(--o-sub); background: var(--o-flat-bg); }

.o-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 760px) { .o-tiles { grid-template-columns: repeat(4, 1fr); } }
.o-tile { background: var(--o-card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--o-shadow); border: 1px solid var(--o-line); }
.o-tile .lbl { color: var(--o-sub); font-size: 12.5px; }
.o-tile .val { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 2px; }
.o-tile .val small { font-size: 13px; font-weight: 500; color: var(--o-sub); }
.o-tile .foot { font-size: 12.5px; color: var(--o-sub); margin-top: 2px; }

.o-note { background: var(--o-hol-bg); color: var(--o-hol); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; margin-top: 10px; font-weight: 600; }
.o-note.info { background: var(--o-acc-soft); color: var(--o-acc); }
.o-muted { color: var(--o-sub); font-size: 13px; }
.o-up-card { background: var(--o-hol-bg); border-color: transparent; }
.o-up-card .when { font-size: 18px; font-weight: 750; color: var(--o-hol); }

/* charts */
.o-chart { position: relative; touch-action: pan-y; }
.o-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.o-chart .grid line { stroke: var(--o-line); }
.o-chart text { fill: var(--o-sub); font-size: 17px; font-family: inherit; }
.o-chart .l-focus { stroke: var(--o-l1); stroke-width: 3.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.o-chart .l-basis { stroke: var(--o-l2); stroke-width: 2.2; fill: none; stroke-dasharray: 7 6; }
.o-chart .l-avg { stroke: var(--o-l3); stroke-width: 2.2; fill: none; opacity: .85; }
.o-chart .cursor { stroke: var(--o-sub); stroke-width: 1; stroke-dasharray: 3 3; }
.o-chart .nowline { stroke: var(--o-acc); stroke-width: 1.2; opacity: .5; }
.o-chart .b-normal { fill: var(--o-acc); opacity: .85; }
.o-chart .b-special { fill: var(--o-hol); }
.o-chart .b-own { fill: var(--o-own); }
.o-chart .b-closed { fill: var(--o-closed); }
.o-chart .b-sel { opacity: 1; stroke: var(--o-ink); stroke-width: 1.5; }
.o-chart .mark { fill: var(--o-hol); }
.o-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; background: var(--o-ink); color: var(--o-card); border-radius: 10px; padding: 6px 9px;
  font-size: 12.5px; line-height: 1.4; white-space: nowrap; transform: translateX(-50%); box-shadow: var(--o-shadow); }
.o-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--o-sub); margin-top: 8px; }
.o-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-inline-end: 4px; }
.o-legend i.sq { width: 10px; height: 10px; border-radius: 3px; }

/* week table */
.o-seg { display: inline-flex; background: var(--o-flat-bg); border-radius: 999px; padding: 3px; gap: 2px; }
.o-seg button { border: 0; background: transparent; border-radius: 999px; min-height: 32px; padding: 4px 12px; font-size: 13.5px; color: var(--o-sub); }
.o-seg button.on { background: var(--o-card); color: var(--o-ink); font-weight: 650; box-shadow: var(--o-shadow); }
.o-week { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.o-week th { font-size: 11.5px; color: var(--o-sub); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--o-line); text-align: right; }
.o-week td { padding: 10px 4px; border-bottom: 1px solid var(--o-line); vertical-align: middle; text-align: right; }
.o-week tr.day { cursor: pointer; }
.o-week tr.today td { background: var(--o-acc-soft); }
.o-week tr.today td:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.o-week tr.today td:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.o-week .d b { display: block; font-size: 14.5px; }
.o-week .d span { color: var(--o-sub); font-size: 12px; }
.o-week .v { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.o-week .v.st { font-size: 13px; font-weight: 600; color: var(--o-sub); }
.o-week tfoot td { border-bottom: 0; font-weight: 700; padding-top: 12px; }
.o-week .x { display: none; }
.o-week tr.detail td { background: var(--o-bg); font-size: 13px; color: var(--o-sub); padding: 8px 10px; }
.o-week tr.detail b { color: var(--o-ink); }
@media (min-width: 760px) { .o-week .x { display: table-cell; } .o-week tr.detail { display: none !important; } }

/* shelves */
.o-rank { list-style: none; margin: 0; padding: 0; }
.o-rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.o-rank li:last-child { border-bottom: 0; }
.o-rank .n { width: 26px; height: 26px; border-radius: 50%; background: var(--o-acc-soft); color: var(--o-acc); font-weight: 750; display: grid; place-items: center; font-size: 13px; }
.o-rank .nm { font-weight: 650; }
.o-rank .meta { grid-column: 2 / 4; color: var(--o-sub); font-size: 12.5px; }
.o-rank .bar { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: var(--o-flat-bg); overflow: hidden; }
.o-rank .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--o-acc2), var(--o-acc)); border-radius: 3px; }
.o-rank .st { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: left; }
.o-camp { border: 1px solid var(--o-line); border-radius: 14px; padding: 12px; margin-top: 10px; }
.o-camp .t { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.o-camp .t b { font-size: 15px; }
.o-camp .ba { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin: 10px 0 6px; }
.o-camp .ba div small { display: block; color: var(--o-sub); font-size: 12px; }
.o-camp .ba div span { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.o-verdict { font-weight: 650; font-size: 14px; }
.o-verdict.up { color: var(--o-up); } .o-verdict.down { color: var(--o-down); } .o-verdict.flat, .o-verdict.na { color: var(--o-sub); }

/* heatmap */
.o-heat { display: grid; gap: 3px; direction: ltr; font-size: 10.5px; align-items: center; }
.o-heat .hc { height: 20px; border-radius: 5px; background: var(--o-flat-bg); }
.o-heat .hx { text-align: center; color: var(--o-sub); }
.o-heat .hy { color: var(--o-sub); text-align: right; direction: rtl; padding-inline-end: 4px; font-size: 11.5px; }

/* more / settings lists */
.o-menu { list-style: none; margin: 0; padding: 0; }
.o-menu a, .o-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--o-line);
  background: transparent; color: var(--o-ink); text-decoration: none; font-size: 15.5px; border-radius: 0; min-height: 52px; text-align: right; }
.o-menu li:last-child a, .o-menu li:last-child button { border-bottom: 0; }
.o-menu .chev { color: var(--o-sub); }
.o-hours { width: 100%; border-collapse: collapse; }
.o-hours td { padding: 5px 3px; border-bottom: 1px solid var(--o-line); }
.o-hours select, .o-hours input { min-height: 34px; padding: 4px 6px; }
.o-hours input[type=time] { width: 96px; direction: ltr; }
.o-hours input:disabled { opacity: .3; }

#toast { position: fixed; inset: auto 12px calc(84px + env(safe-area-inset-bottom)) 12px; z-index: 50; background: var(--o-ink); color: var(--o-card);
  border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 30px rgb(0 0 0 / .25); max-width: 560px; margin: 0 auto;
  transition: opacity .2s, transform .2s; }
#toast[hidden] { display: block; opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (min-width: 760px) { #toast { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }