/* Resinen Forecast · theme: the Project look (Design C, planning/project-app)
 *
 * The default look, so Forecast sits beside the approved Project mockup as one
 * family: warm paper #F6F4F0, white cards, one green #257A57 for actions, Hanken
 * Grotesk, 7–8px corners, a sidebar of 40px rows where the current page is a white
 * raised row, and a green "Create new…".
 * Values copied from planning/project-app/app.css.
 */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  --rs-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --rs-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --rs-type-display: 800 42px/46px var(--rs-font-sans);
  --rs-type-display-tracking: -0.03em;
  --rs-type-heading-lg: 800 27px/33px var(--rs-font-sans);
  --rs-type-heading-lg-tracking: -0.02em;
  --rs-type-heading: 700 19px/25px var(--rs-font-sans);
  --rs-type-heading-tracking: -0.01em;
  --rs-type-title: 700 16px/22px var(--rs-font-sans);
  --rs-type-body-lg: 400 15.5px/24px var(--rs-font-sans);
  --rs-type-body: 400 14.5px/21px var(--rs-font-sans);
  --rs-type-body-strong: 700 14.5px/21px var(--rs-font-sans);
  --rs-type-label: 500 14px/19px var(--rs-font-sans);
  --rs-type-caption: 500 12.5px/17px var(--rs-font-sans);
  --rs-type-overline: 700 11.5px/15px var(--rs-font-sans);
  --rs-type-overline-tracking: 0.04em;
  --rs-radius-sm: 6px; --rs-radius-md: 7px; --rs-radius-lg: 8px; --rs-radius-xl: 12px;

  --green: #257A57; --green-2: #1C6346; --green-soft: #E7F2EC; --green-line: #CDE6D7;

  --rs-surface-page: #F6F4F0;
  --rs-surface-raised: #FFFFFF;
  --rs-surface-sunken: #F1EFEB;
  --rs-surface-hover: #EBE8E2;
  --rs-surface-overlay: #FFFFFF;
  --rs-surface-inverse: #1D1C1A;
  --rs-text-strong: #1D1C1A;
  --rs-text-normal: #45423D;
  --rs-text-muted: #706C65;
  --rs-text-subtle: #A39E95;
  --rs-text-inverse: #F6F4F0;
  --rs-text-on-brand: #FFFFFF;
  --rs-border-subtle: #E5E1DA;
  --rs-border-normal: #E5E1DA;
  --rs-border-strong: #D6D1C8;
  --rs-brand: #257A57;
  --rs-brand-hover: #1C6346;
  --rs-brand-pressed: #174f39;
  --rs-brand-subtle: #FFFFFF;
  --rs-brand-subtle-text: #1D1C1A;
  --rs-accent: #257A57;
  --rs-accent-subtle: #FBF8F1;
  --rs-positive: #257A57; --rs-positive-subtle: #E7F2EC; --rs-positive-border: #CDE6D7; --rs-positive-intense-bg: #257A57;
  --rs-negative: #D04545; --rs-negative-subtle: #FBECEB; --rs-negative-border: #F2CFCC; --rs-negative-intense-bg: #D04545;
  --rs-notice: #B57F0E; --rs-notice-subtle: #FAF1DC; --rs-notice-border: #EEDDB0; --rs-notice-intense-bg: #D9A21B;
  --rs-information: #2F5BD3; --rs-information-subtle: #EEF2FC; --rs-information-border: #D3DDF7;
  --rs-neutral: #706C65; --rs-neutral-subtle: #F1EFEB; --rs-neutral-border: #E5E1DA;
  --rs-app-relationships: #C2622D; --rs-app-relationships-subtle: #FCEEE3; --rs-app-relationships-border: #F3D6BF;
  --rs-app-structure: #2F5BD3; --rs-app-structure-subtle: #EEF2FC; --rs-app-structure-border: #D3DDF7;
  --rs-app-strength: #257A57; --rs-app-strength-subtle: #EAF4EC; --rs-app-strength-border: #CDE6D7;
  --rs-app-projects: #5B47B8; --rs-app-projects-subtle: #EEEBF8; --rs-app-projects-border: #D9D3F0;
  --rs-tier-ultra-bg: #1D1C1A; --rs-tier-ultra-fg: #F2C14E;
  --rs-focus-ring: #257A5780;
  --rs-elevation-low: 0 1px 2px rgba(29, 28, 26, .06);
  --rs-elevation-mid: 0 12px 32px -12px rgba(29, 28, 26, .28);
  --rs-elevation-high: 0 24px 60px -20px rgba(0, 0, 0, .40);
  --rs-scrim: rgba(29, 28, 26, .34);

  --fc-actual: #1D1C1A; --fc-forecast: #1D1C1A;
  --fc-band: rgba(29, 28, 26, .08); --fc-band-strong: rgba(29, 28, 26, .14);
  --fc-today: #257A57; --fc-target: #2F5BD3;
  --fc-grid: #ECE8E1; --fc-axis: #A39E95;
  --fc-danger-zone: rgba(208, 69, 69, .07);
  --fc-bar-sure: #1D1C1A; --fc-bar-likely: #A39E95; --fc-bar-maybe: #E2DED7;
  --fc-sure: #257A57; --fc-fair: #D9A21B; --fc-rough: #A39E95;
  --side-bg: #F6F4F0;
  --create-fg: #257A57;
}
:root[data-theme="dark"] {
  --rs-surface-page: #161513; --rs-surface-raised: #1F1E1B; --rs-surface-sunken: #121110; --rs-surface-hover: #2A2825; --rs-surface-overlay: #232220; --rs-surface-inverse: #F6F4F0;
  --rs-text-strong: #F3F1EC; --rs-text-normal: #D4D0C8; --rs-text-muted: #A39E95; --rs-text-subtle: #77726A; --rs-text-inverse: #1D1C1A;
  --rs-border-subtle: #2C2A26; --rs-border-normal: #2C2A26; --rs-border-strong: #3A3833;
  --rs-brand: #3FA67A; --rs-brand-hover: #4DB98A; --rs-brand-subtle: #262421; --rs-brand-subtle-text: #F3F1EC; --rs-accent-subtle: #22201c;
  --rs-positive: #6CC79C; --rs-positive-subtle: #17291F; --rs-positive-border: #24432F; --rs-positive-intense-bg: #3FA67A;
  --rs-negative: #F08A82; --rs-negative-subtle: #321B1A; --rs-negative-border: #55302C; --rs-negative-intense-bg: #E05A50;
  --rs-notice: #E8C06A; --rs-notice-subtle: #2E2615; --rs-notice-border: #4D3F1E; --rs-notice-intense-bg: #D9A21B;
  --rs-information: #8FA9F2; --rs-information-subtle: #1A2033; --rs-information-border: #2D3858;
  --rs-neutral-subtle: #262421; --rs-neutral-border: #2C2A26;
  --rs-app-relationships: #EE9A66; --rs-app-relationships-subtle: #2E2017; --rs-app-relationships-border: #4E3424;
  --rs-app-structure: #8FA9F2; --rs-app-structure-subtle: #1A2033; --rs-app-structure-border: #2D3858;
  --rs-app-strength: #6CC79C; --rs-app-strength-subtle: #17291F; --rs-app-strength-border: #24432F;
  --rs-app-projects: #AE9DF0; --rs-app-projects-subtle: #221D36; --rs-app-projects-border: #3A3159;
  --rs-text-on-brand: #0f1a14; --rs-focus-ring: #3FA67A88; --rs-scrim: rgba(0, 0, 0, .55);
  --fc-actual: #F3F1EC; --fc-forecast: #F3F1EC; --fc-band: rgba(243, 241, 236, .08); --fc-band-strong: rgba(243, 241, 236, .14);
  --fc-today: #3FA67A; --fc-grid: #2A2825; --fc-axis: #77726A; --fc-danger-zone: rgba(224, 90, 80, .1);
  --fc-bar-sure: #F3F1EC; --fc-bar-likely: #77726A; --fc-bar-maybe: #3A3833;
  --side-bg: #161513; --create-fg: #6CC79C;
}

body { font-size: 14.5px; }
h1 { font-weight: 800; }

/* Sidebar: Design C rows */
.side { padding: 14px 14px 0; border-right-color: var(--rs-border-subtle); }
.side-top { padding-bottom: 12px; border-bottom: 1px solid var(--rs-border-subtle); }
.ws-logo { width: 36px; height: 36px; border-radius: 6px; --ws-logo-bg: #1D1C1A; --ws-logo-fg: #fff; font-size: 13px; }
:root[data-theme="dark"] .ws-logo { --ws-logo-bg: #F3F1EC; --ws-logo-fg: #1D1C1A; }
.ws-text b { font-weight: 700; font-size: 14.5px; }
.create { height: 40px; font-size: 15.5px; font-weight: 700; margin-top: 6px; }
.create:hover { background: var(--rs-positive-subtle); }
.create .ph { font-size: 20px; }
.search { height: 38px; background: var(--rs-surface-raised); border-color: var(--rs-border-subtle); border-radius: 8px; }
.side .nav a { height: 40px; font-size: 15px; color: var(--rs-text-normal); border-radius: 7px; gap: 12px; }
.side .nav a > .ph { font-size: 21px; color: var(--rs-text-strong); }
.side .nav a:hover { background: var(--rs-surface-hover); color: var(--rs-text-strong); }
.side .nav a[aria-current="page"] { background: var(--rs-surface-raised); color: var(--rs-text-strong); font-weight: 700; box-shadow: var(--rs-elevation-low), 0 0 0 1px var(--rs-border-subtle); }
.side .nav a[aria-current="page"]::before { display: none; }
.side .nav-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 16px 10px 6px; }
.app-ic { width: 24px; height: 24px; border-radius: 6px; }
.app-ic .ph { font-size: 14px; }
.badge { font-size: 12px; font-weight: 700; height: 22px; display: inline-flex; align-items: center; padding: 0 8px; }
.side .meta { font-size: 13px; }
.health { background: var(--rs-surface-raised); border-color: var(--rs-border-subtle); box-shadow: var(--rs-elevation-low); }
.health .bar b { background: var(--green); }
.side .nav-sm a { height: 36px; font-size: 14px; }
.me-wrap { padding: 8px 0 12px; }
.avatar { --avatar-bg: #FCEEE3; }
.appbar { height: 60px; background: color-mix(in srgb, var(--rs-surface-page) 90%, transparent); }
.appbar .crumbs { font-size: 14.5px; }
.banner { background: var(--rs-accent-subtle); font-size: 14px; }
.banner a { color: var(--green); text-decoration: none; font-weight: 700; }
.banner .ph-sparkle { color: var(--green); }

/* Buttons: Design C */
.btn { height: 40px; padding: 0 16px; border-radius: 7px; font-weight: 700; font-size: 14.5px; border: 0; background: var(--rs-surface-raised); box-shadow: 0 0 0 1px var(--rs-border-strong) inset; color: var(--rs-text-strong); }
.btn:hover { background: var(--rs-surface-sunken); }
.btn.primary { background: var(--rs-brand); color: #fff; box-shadow: none; }
.btn.primary:hover { background: var(--rs-brand-hover); }
.btn.ghost { box-shadow: none; background: transparent; }
.btn.ghost:hover { background: var(--rs-surface-hover); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.seg { border-radius: 8px; background: var(--rs-surface-sunken); }
.seg button { border-radius: 6px; font-weight: 600; }
.seg button[aria-pressed="true"] { box-shadow: var(--rs-elevation-low), 0 0 0 1px var(--rs-border-subtle); }

/* Cards and the rest */
.card { border-radius: 8px; border-color: var(--rs-border-subtle); box-shadow: var(--rs-elevation-low); }
.insight { border-radius: 8px; }
.chip, .src { font-size: 12.5px; font-weight: 600; height: 24px; padding: 0 9px; }
th { background: var(--rs-surface-page); color: var(--rs-text-muted); font-size: 12.5px; font-weight: 600; }
.eyebrow { font-family: var(--rs-font-sans); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--rs-text-muted); }
.toast > .ph { color: #6CC79C; }
input[type="range"] { accent-color: var(--green); }