/* Styles for the plug-in views (Trends, Projections, Data input). Uses the tokens defined in index.html. */
.banner{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--watch);border-left-width:4px;background:color-mix(in srgb,var(--watch) 8%,var(--surface));border-radius:4px;padding:9px 14px;font-size:12.5px}
.banner b{color:var(--watch);white-space:nowrap}
.seg-toggle{display:inline-flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.seg-toggle button{border:0;background:var(--surface);padding:5px 12px;cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:500}
.seg-toggle button + button{border-left:1px solid var(--rule)}
.seg-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.chartbox.tall{height:320px}
.chartbox.short{height:220px}
.mom-up{color:var(--crit)}
.mom-down{color:var(--good)}
.bandbar{display:flex;height:22px;border-radius:4px;overflow:hidden;background:var(--surface-2)}
.bandbar span{display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.bandbar .within{background:color-mix(in srgb,var(--good) 70%,transparent);color:#fff}
.bandbar .watch{background:var(--watch);color:#fff}
.bandbar .over{background:var(--crit);color:#fff}
.milestones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.milestones > div{border-top:4px solid var(--bar);padding-top:6px;min-width:0}
.milestones > div.run{border-top-color:var(--accent-fill)}
.milestones b{display:block;font-family:var(--display);font-size:18px;font-weight:600}
.milestones span{font-size:12px;color:var(--muted)}
td.actual{background:var(--surface-2)}
/* data input */
.dropzone{border:2px dashed var(--bar);border-radius:8px;padding:28px 18px;text-align:center;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--bar-strong);outline:none}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone b{display:block;font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:4px}
.dropzone p{margin:0;color:var(--muted);font-size:12.5px}
.desc{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.desc > div{background:var(--surface);padding:10px 12px;min-width:0}
.desc .label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.desc .v{font-family:var(--display);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fieldchecks{display:flex;flex-wrap:wrap;gap:6px}
.status-line{font-size:12.5px;color:var(--muted);margin:8px 0 0}
@media (max-width:560px){ .chartbox.tall{height:260px} .banner{flex-direction:column;gap:2px} }