/* House style (copy of ~/Workspace/.claude/docs-html/assets/gil.css, the look of aso.gil.so) plus the P&L page pieces at the end.
   Update the house part from there when it changes. Tokens are the aso-panel ones (projects/aso-panel/src/index.css, Tailwind emerald/rose/amber for status). Dark mode follows the system. */

@import url("https://rsms.me/inter/inter.css");

:root {
  --page: oklch(0.968 0.002 286);          /* gray page behind the panel */
  --panel: oklch(1 0 0);                   /* white panel and cards */
  --fg: oklch(0.16 0.006 286);
  --fg-2: oklch(0.21 0.006 286);
  --muted: oklch(0.5 0.016 286);           /* labels, captions, table heads */
  --soft: oklch(0.968 0.002 286);          /* tinted rows, notes, hover */
  --border: oklch(0.912 0.003 286);
  --input: oklch(0.89 0.004 286);
  --accent: oklch(0.565 0.165 272);        /* indigo: links, focus, the selected thing */
  --accent-fg: oklch(0.99 0 0);
  --good: oklch(0.508 0.118 165.6);        /* emerald-700 */
  --bad: oklch(0.514 0.222 16.9);          /* rose-700 */
  --warn: oklch(0.555 0.163 48.9);         /* amber-700 */
  --good-bg: oklch(0.696 0.17 162.5 / 0.1);
  --bad-bg: oklch(0.645 0.246 16.4 / 0.1);
  --warn-bg: oklch(0.769 0.188 70.1 / 0.12);
  /* chart colors, in this fixed order: never cycle them */
  --c1: oklch(0.585 0.17 272);
  --c2: oklch(0.73 0.16 52);
  --c3: oklch(0.72 0.16 160);
  --c4: oklch(0.6 0.2 305);
  --c5: oklch(0.83 0.025 272);
  --radius: 8px;
  --radius-lg: 11.2px;
  --shadow-panel: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 0.5px 0 0 rgb(0 0 0 / 0.05), 0 0 0 0.5px rgb(0 0 0 / 0.05);
  --shadow-pill: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 0.5px 0 0 rgb(0 0 0 / 0.06), 0 0 0 0.5px rgb(0 0 0 / 0.05);
  --font: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: oklch(0.15 0.004 286);
    --panel: oklch(0.195 0.004 286);
    --fg: oklch(0.97 0 0);
    --fg-2: oklch(0.9 0 0);
    --muted: oklch(0.71 0.012 286);
    --soft: oklch(0.255 0.005 286);
    --border: oklch(1 0 0 / 9%);
    --input: oklch(1 0 0 / 14%);
    --accent: oklch(0.68 0.14 272);
    --accent-fg: oklch(0.16 0.006 286);
    --good: oklch(0.765 0.177 163.2);      /* emerald-400 */
    --bad: oklch(0.712 0.194 13.4);        /* rose-400 */
    --warn: oklch(0.828 0.189 84.4);       /* amber-400 */
    --c1: oklch(0.68 0.15 272);
    --c2: oklch(0.76 0.15 55);
    --c3: oklch(0.74 0.15 160);
    --c4: oklch(0.68 0.18 305);
    --c5: oklch(0.45 0.02 272);
    --shadow-panel: 0 0 0 1px oklch(1 0 0 / 9%);
    --shadow-pill: 0 0 0 1px oklch(1 0 0 / 9%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--page); color: var(--fg); line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, td, .value { font-variant-numeric: tabular-nums; }
button, summary, select, [role="button"] { cursor: pointer; }
:focus-visible { outline: 2px solid color-mix(in oklch, var(--accent) 50%, transparent); outline-offset: 2px; }

/* layout: gray page, one white panel with the content */
.shell { max-width: 1240px; margin: 0 auto; padding: 12px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 32px 40px 40px; }
@media (max-width: 720px) { .shell { padding: 0; } .panel { border-radius: 0; border-left: 0; border-right: 0; padding: 20px 16px 28px; } }
.topbar { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; font-weight: 600; font-size: 15px; }
.topbar .spacer { flex: 1; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.section { margin-top: 28px; }

/* type */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
h2 .sub, .sub { font-size: 14px; font-weight: 400; color: var(--muted); }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

/* cards and metric tiles */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card > .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.metric .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.metric .value { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 4px 0 2px; display: flex; align-items: center; gap: 8px; }
.metric .foot { font-size: 12px; color: var(--muted); }

/* pills */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 18px; padding: 1px 7px; border-radius: 6px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent); }

/* info note */
.note { display: flex; gap: 10px; font-size: 14px; color: var(--muted); background: color-mix(in oklch, var(--soft) 40%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.note b, .note strong { color: var(--fg); font-weight: 600; }

/* buttons and the segmented control (a gray track with the chosen option as a white pill) */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font: 500 14px var(--font); color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.btn:hover { background: var(--soft); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { background: color-mix(in oklch, var(--accent) 90%, black); }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--soft); border-radius: 10px; }
.seg button { font: 500 14px var(--font); color: var(--muted); background: transparent; border: 0; border-radius: var(--radius); padding: 5px 12px; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: var(--shadow-pill); }
input, select, textarea { font: 400 14px var(--font); color: var(--fg); background: var(--panel); border: 1px solid var(--input); border-radius: var(--radius); padding: 6px 10px; height: 32px; }
textarea { height: auto; }

/* tables: quiet head, rows split by thin lines, numbers right aligned */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { font-size: 13px; font-weight: 500; color: var(--muted); text-align: left; padding: 9px 8px 9px 16px; background: color-mix(in oklch, var(--soft) 60%, transparent); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { font-weight: 500; padding: 10px 8px 10px 16px; border-top: 1px solid var(--border); }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover td { background: color-mix(in oklch, var(--soft) 50%, transparent); }
th.r, td.r { text-align: right; padding-right: 16px; }
tr.total td { font-weight: 700; }

/* details */
details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 16px; background: var(--panel); }
details + details { margin-top: 8px; }
summary { font-weight: 600; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "›"; color: var(--muted); font-size: 18px; line-height: 1; transition: transform 0.15s; }
details[open] summary::before { transform: rotate(90deg); }
details > :not(summary) { margin-bottom: 14px; }

/* chart tooltip */
.tip { position: fixed; pointer-events: none; z-index: 50; background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); padding: 8px 10px; font-size: 13px; max-width: 320px; opacity: 0; transition: opacity 0.1s; }
.tip.on { opacity: 1; }

/* ---------- P&L page ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand svg { width: 22px; height: 22px; }
.topbar .fresh { font-size: 12px; font-weight: 400; color: var(--muted); }
.lead { font-size: 15px; color: var(--fg-2); margin: -8px 0 18px; max-width: 860px; }
.lead b { font-weight: 600; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric .value.good { color: var(--good); }
.metric .value { flex-wrap: wrap; row-gap: 2px; }
.card.flush { overflow-x: auto; }
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .metric .value { font-size: 22px; }
  .topbar .fresh { display: none; }
  th, td { padding-left: 12px; }
}
.two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend i.rev { background: var(--c1); }
.legend i.music { background: var(--c2); }
.legend i.cost { background: var(--bad); }
.legend i.profit { background: var(--good); }
.legend i.ghost { background: repeating-linear-gradient(45deg, var(--good) 0 2px, var(--good-bg) 2px 5px); outline: 1px dashed var(--good); outline-offset: -1px; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll svg { display: block; width: 100%; height: auto; }
#sankey svg { min-width: 860px; }
.card h2 { margin-bottom: 4px; }
.card .card-head h2 { margin: 0; }
td.concept small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
tr.sum td { background: color-mix(in oklch, var(--soft) 60%, transparent); font-weight: 700; }
tr.sub td { color: var(--muted); font-weight: 500; }
tr.sub td.concept { padding-left: 32px; }
.state { padding: 60px 0; text-align: center; color: var(--muted); }
.err { color: var(--bad); }
.warnline { margin: 0 0 12px; }
select#month { min-width: 150px; }
.hidden { display: none !important; }

/* sankey marks: colors live here so the SVG needs no inline styles */
.sk-node { stroke: none; }
.sk-node.app, .sk-link.app { fill: var(--c1); }
.sk-node.music, .sk-link.music { fill: var(--c2); }
.sk-node.rev { fill: var(--fg-2); }
.sk-node.profit, .sk-link.profit { fill: var(--good); }
.sk-node.cost, .sk-link.cost { fill: var(--bad); }
.sk-node.ghost, .sk-link.ghost { fill: url(#sk-hatch); stroke: var(--good); stroke-width: 1; stroke-dasharray: 4 3; }
.sk-link { opacity: 0.28; transition: opacity 0.12s; }
.sk-link.app, .sk-link.music { opacity: 0.32; }
.sk-link.ghost { opacity: 0.9; }
.sk-link:hover, .sk-link.hot { opacity: 0.6; }
.sk-link.ghost:hover, .sk-link.ghost.hot { opacity: 1; }
.sk-hatch-line { stroke: var(--good); stroke-width: 1.6; opacity: 0.55; }
.sk-hatch-bg { fill: var(--good-bg); }
.sk-label { font: 600 13px var(--font); fill: var(--fg); }
.sk-value { font: 500 13px var(--font); fill: var(--fg-2); font-variant-numeric: tabular-nums; }
.sk-pct { font: 400 12px var(--font); fill: var(--muted); }
.sk-label.profit, .sk-value.profit { fill: var(--good); }
.sk-label.cost { fill: var(--bad); }
.sk-label.ghost, .sk-value.ghost { fill: var(--good); }
.sk-hit { fill: transparent; cursor: default; }

/* small charts */
.bar.cash { fill: var(--good); }
.bar.pub { fill: url(#hb-hatch); stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 2; }
.bar.sel { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: none; }
.bar-hit { fill: transparent; cursor: pointer; }
.bar-hit:hover + .bar-x, .bar-x.sel { font-weight: 700; fill: var(--fg); }
.axis { font: 400 11px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.st-0 { fill: var(--c1); } .st-1 { fill: var(--c3); } .st-2 { fill: var(--c2); } .st-3 { fill: var(--c4); } .st-4 { fill: var(--c5); }
.legend i.st-0 { background: var(--c1); } .legend i.st-1 { background: var(--c3); } .legend i.st-2 { background: var(--c2); }
.legend i.st-3 { background: var(--c4); } .legend i.st-4 { background: var(--c5); }

/* sign-in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login .card { width: 100%; max-width: 360px; padding: 28px; box-shadow: var(--shadow-panel); border-radius: var(--radius-lg); }
.login h1 { font-size: 20px; margin: 14px 0 4px; }
.login label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.login input { width: 100%; height: 36px; }
.login .btn { width: 100%; justify-content: center; height: 36px; margin-top: 18px; }
.login .err { min-height: 20px; margin-top: 10px; font-size: 13px; }