/* Foreca3t – brand colours and page components (home, mock views, builder) */

:root {
  --f3-navy: #14213d;
  --f3-navy-2: #1f3260;
  --f3-accent: #ffaf00;
  --f3-green: #59b161;
  --f3-light-green: #8fd694;
  --f3-orange: #ffaf00;
  --f3-red: #ef4b59;
  --f3-grey: #8993a4;
  --md-primary-fg-color: var(--f3-navy);
  --md-primary-fg-color--light: var(--f3-navy-2);
  --md-primary-fg-color--dark: #0c1529;
  --md-accent-fg-color: #c98a00;
  --f3-card-bg: #f5f7fb;
  --f3-card-border: #e1e6ef;
  --f3-text-muted: #5b6475;
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0c1529;
  --md-accent-fg-color: var(--f3-accent);
  --md-default-bg-color: #101826;
  --f3-card-bg: #172236;
  --f3-card-border: #26344d;
  --f3-text-muted: #a5afc2;
}

.f3-mark { font-weight: 700; letter-spacing: .01em; }
.f3-mark b { color: var(--f3-accent); font-weight: 800; }

/* --- home ----------------------------------------------------------------------------------- */
.f3-hero {
  margin: -1.2rem -0.8rem 2.5rem;
  padding: 3.2rem 1.6rem 3rem;
  background: linear-gradient(135deg, var(--f3-navy) 0%, var(--f3-navy-2) 100%);
  color: #fff;
  border-radius: 0 0 1rem 1rem;
}
.f3-hero h1 { color: #fff; font-size: 2.6rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.15; }
.f3-hero h1 b { color: var(--f3-accent); }
.f3-hero .f3-claim { font-size: 1.35rem; font-weight: 600; color: var(--f3-accent); margin: .2rem 0 1rem; }
.f3-hero p { max-width: 42rem; font-size: 1rem; color: #dfe5f1; }
.f3-hero .md-button { margin: .6rem .6rem 0 0; }
.f3-hero .md-button--primary { background: var(--f3-accent); border-color: var(--f3-accent); color: var(--f3-navy); }
.f3-hero .md-button:not(.md-button--primary) { color: #fff; border-color: #fff; }

.f3-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0 2rem; }
.f3-card {
  background: var(--f3-card-bg); border: 1px solid var(--f3-card-border); border-radius: .6rem;
  padding: 1rem 1.1rem;
}
.f3-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.f3-card p { margin: 0; color: var(--f3-text-muted); font-size: .8rem; }
.f3-step { font-size: .7rem; font-weight: 700; color: var(--md-accent-fg-color); text-transform: uppercase; letter-spacing: .06em; }

/* --- signal badges and mock view ------------------------------------------------------------- */
.f3-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: .25rem; color: #fff;
  font-size: .62rem; font-weight: 700; white-space: nowrap; letter-spacing: .02em;
}
.f3-badge.green { background: var(--f3-green); }
.f3-badge.orange { background: var(--f3-orange); color: #1d1d1d; }
.f3-badge.red { background: var(--f3-red); }
.f3-badge.grey { background: var(--f3-grey); }
.f3-late { color: var(--f3-red); font-weight: 600; }
.f3-early { color: var(--f3-green); font-weight: 600; }
.f3-over { color: var(--f3-red); font-weight: 700; }
.f3-bar { white-space: nowrap; letter-spacing: -.05em; font-size: .7rem; }
.f3-bar .g { color: var(--f3-green); } .f3-bar .l { color: var(--f3-light-green); }
.f3-bar .o { color: var(--f3-orange); } .f3-bar .r { color: var(--f3-red); } .f3-bar .x { color: #c3c9d4; }

.f3-mock { overflow-x: auto; margin: 1rem 0 2rem; }
.f3-mock table { font-size: .72rem; min-width: 40rem; }
.f3-mock td.lvl1 { padding-left: 1.4rem; } .f3-mock td.lvl2 { padding-left: 2.6rem; }
.f3-mock tr.group td:first-child { font-weight: 600; }

/* --- builder ---------------------------------------------------------------------------------- */
.f3-builder section {
  background: var(--f3-card-bg); border: 1px solid var(--f3-card-border); border-radius: .6rem;
  padding: .9rem 1.1rem 1rem; margin: 0 0 1rem;
}
.f3-builder h2 { margin: 0 0 .6rem; font-size: 1rem; }
.f3-builder h2 .n {
  display: inline-block; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center;
  border-radius: 50%; background: var(--md-primary-fg-color); color: #fff; font-size: .7rem; margin-right: .4rem;
}
.f3-builder label { display: block; font-size: .7rem; font-weight: 600; margin: .5rem 0 .15rem; }
.f3-builder .hint { font-size: .68rem; color: var(--f3-text-muted); margin: .15rem 0 0; }
.f3-builder input[type=text], .f3-builder input[type=number], .f3-builder input[type=date],
.f3-builder select, .f3-builder textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .75rem; padding: .35rem .45rem;
  border: 1px solid var(--f3-card-border); border-radius: .3rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.f3-builder textarea { min-height: 5rem; font-family: var(--md-code-font); font-size: .68rem; }
.f3-row { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.f3-choice { display: flex; gap: .5rem; flex-wrap: wrap; }
.f3-choice label {
  display: flex; gap: .4rem; align-items: flex-start; font-weight: 400; margin: 0;
  border: 1px solid var(--f3-card-border); border-radius: .4rem; padding: .45rem .6rem; cursor: pointer;
  background: var(--md-default-bg-color); flex: 1 1 13rem;
}
.f3-choice label small { display: block; color: var(--f3-text-muted); font-size: .65rem; }
.f3-builder button {
  font: inherit; font-size: .72rem; padding: .3rem .7rem; border-radius: .3rem; cursor: pointer;
  border: 1px solid var(--f3-card-border); background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.f3-builder button.primary { background: var(--md-primary-fg-color); color: #fff; border-color: var(--md-primary-fg-color); }
.f3-builder button.big { font-size: .85rem; padding: .5rem 1.2rem; }
.f3-builder button:disabled { opacity: .5; cursor: default; }
.f3-builder .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.f3-builder table { font-size: .72rem; }
.f3-builder table input { min-width: 6rem; }
.f3-builder td.days { color: var(--f3-text-muted); white-space: nowrap; }
.f3-msgs { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .72rem; }
.f3-msgs li { padding: .3rem .5rem; border-radius: .3rem; margin: .25rem 0; }
.f3-msgs li.err { background: rgba(239, 75, 89, .14); border-left: 3px solid var(--f3-red); }
.f3-msgs li.warn { background: rgba(255, 175, 0, .16); border-left: 3px solid var(--f3-orange); }
.f3-msgs li.ok { background: rgba(89, 177, 97, .15); border-left: 3px solid var(--f3-green); }
.f3-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.f3-list { list-style: none; padding: 0; margin: .3rem 0; font-size: .72rem; }
.f3-list li {
  display: flex; align-items: center; gap: .3rem; padding: .2rem .35rem; margin: .15rem 0;
  border: 1px solid var(--f3-card-border); border-radius: .3rem; background: var(--md-default-bg-color);
}
.f3-list li span { flex: 1; }
.f3-list li button { padding: .05rem .35rem; font-size: .65rem; }
.f3-status { font-size: .72rem; color: var(--f3-text-muted); margin: .4rem 0 0; }
.f3-files { font-size: .72rem; margin: .6rem 0 0; }
.f3-files li { margin: .2rem 0; }
details.f3-help { margin: .5rem 0 0; font-size: .72rem; }
details.f3-help summary { cursor: pointer; color: var(--md-accent-fg-color); }