/* The RC Sections workspace (workspace.js), scoped to its root element `.rcs`.
   Its colours are the --rc-* tokens below: the free RC Sections page's own palette, light and dark.
   A host that is not that page adds the `embedded` class and maps the tokens to its own (Studio's
   mapping is at the end). Everything else here is the free page's look, unchanged. */
.rcs {
  --rc-bg: #f6f4ef; --rc-panel: #ffffff; --rc-ink: #1c2330; --rc-ink2: #4b5563; --rc-ink3: #8a8f98;
  --rc-line: #e3dfd6; --rc-line2: #d4cfc4; --rc-accent: #0e7c6b; --rc-accent-soft: #d8efe9; --rc-on-accent: #fff;
  --rc-concrete: #cfcac0; --rc-concrete-edge: #6b665d; --rc-shape: #b99862;
  --rc-steel: #2b313b; --rc-comp: #d9480f; --rc-tens: #1d5fd6; --rc-warn: #b45309; --rc-ok: #0e7c6b; --rc-bad: #c0262d;
  --rc-fail-bg: #fde8e8; --rc-yield-bg: #fff1e0;
  --rc-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 6px 24px rgb(0 0 0 / 6%);
  container-type: inline-size;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rcs:not(.embedded) {
    --rc-bg: #11151b; --rc-panel: #171c24; --rc-ink: #e5e9f0; --rc-ink2: #a7b0bd; --rc-ink3: #6f7a88;
    --rc-line: #252c37; --rc-line2: #313a47; --rc-accent: #34c4a8; --rc-accent-soft: #143a34;
    --rc-concrete: #4a4f57; --rc-concrete-edge: #9aa1ab; --rc-steel: #e5e9f0; --rc-shape: #8f7650; --rc-comp: #ff7a3d; --rc-tens: #5b9bff;
    --rc-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 24px rgb(0 0 0 / 25%);
  }
}
.rcs .num, .rcs input[type=number], .rcs .readout b { font-variant-numeric: tabular-nums; }
.rcs button { font: inherit; }
.rcs .btn { border: 1px solid var(--rc-line2); background: var(--rc-panel); color: var(--rc-ink); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rcs .btn:hover { border-color: var(--rc-ink3); }
.rcs .btn.on { background: var(--rc-ink); color: var(--rc-bg); border-color: var(--rc-ink); }
/* A host's own generic classes (.legend, .btn) must not leak in. */
.rcs .btn { height: auto; white-space: nowrap; transition: none; }
.rcs .legend { background: none; backdrop-filter: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; min-width: 0; pointer-events: auto; }

.rcs .rcs-grid { display: grid; gap: 16px;
  grid-template-columns: 290px minmax(320px, 1fr) minmax(380px, 1.25fr); align-items: start; }
.rcs .card { background: var(--rc-panel); border: 1px solid var(--rc-line); border-radius: 12px; box-shadow: var(--rc-shadow); }
.rcs .card h2 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-ink3);
  margin: 0 0 8px; font-weight: 700; }

/* Inputs */
.rcs .rcs-inputs { padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.rcs .shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.rcs .shape { border: 1px solid var(--rc-line2); border-radius: 8px; background: none; color: var(--rc-ink2);
  padding: 6px 2px 4px; cursor: pointer; display: grid; justify-items: center; gap: 2px; font-size: 11px; }
.rcs .shape svg { width: 30px; height: 26px; }
.rcs .shape svg .c { fill: var(--rc-concrete); stroke: var(--rc-concrete-edge); stroke-width: 1.2; }
.rcs .shape svg .s { fill: var(--rc-steel); }
.rcs .shape.on { border-color: var(--rc-accent); color: var(--rc-ink); background: var(--rc-accent-soft); }
.rcs .field { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 8px; margin: 5px 0; }
/* A field with the hidden attribute stays hidden: the grid display above would otherwise win over it. */
.rcs [hidden] { display: none !important; }
/* The long selects (design code, steel grade) get a wider box; member and hinge region stack under their label. */
.rcs .field.wide { grid-template-columns: 1fr 132px; }
.rcs .field.stack { grid-template-columns: 1fr; gap: 3px; }
.rcs .field label { color: var(--rc-ink2); font-size: 13px; }
.rcs .field .inp { display: flex; align-items: center; border: 1px solid var(--rc-line2); border-radius: 7px;
  background: var(--rc-bg); overflow: hidden; }
.rcs .field input, .rcs .field select { width: 100%; min-width: 0; border: 0; background: none; color: var(--rc-ink);
  font: inherit; padding: 4px 6px; outline: none; }
.rcs .field select option { background: var(--rc-panel); color: var(--rc-ink); }
.rcs .field .inp:focus-within { border-color: var(--rc-accent); }
.rcs .field .u { color: var(--rc-ink3); font-size: 11px; padding-right: 6px; }
.rcs .group { border-top: 1px solid var(--rc-line); margin-top: 12px; padding-top: 12px; }
.rcs .note { color: var(--rc-ink3); font-size: 12px; margin-top: 6px; }
.rcs .custom-note { background: var(--rc-accent-soft); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }

/* Section */
.rcs .rcs-section { padding: 14px; position: sticky; top: 12px; }
.rcs .rcs-svg { width: 100%; aspect-ratio: 1 / 1; display: block; }
.rcs .rcs-svg .concrete { fill: var(--rc-concrete); stroke: var(--rc-concrete-edge); stroke-width: 1.4; fill-rule: evenodd; }
.rcs .rcs-svg .bar, .rcs svg.mini .bar { stroke: var(--rc-bg); stroke-width: 1; }
.rcs .rcs-svg .shape, .rcs svg.mini .shape { fill: var(--rc-shape); stroke: var(--rc-concrete-edge); stroke-width: 1.2; fill-rule: evenodd; }
.rcs svg.mini .concrete { fill: var(--rc-concrete); stroke: var(--rc-concrete-edge); stroke-width: 1.2; fill-rule: evenodd; }
.rcs svg.mini .na { stroke: var(--rc-ink); stroke-width: 1.2; stroke-dasharray: 5 3; }
.rcs .rcs-svg .dim { stroke: var(--rc-ink3); stroke-width: 1; fill: none; }
.rcs .rcs-svg .dimtext { fill: var(--rc-ink2); font-size: 12px; }
.rcs .rcs-svg .na { stroke: var(--rc-ink); stroke-width: 1.4; stroke-dasharray: 6 4; }
.rcs .rcs-svg .natext { fill: var(--rc-ink); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--rc-panel); stroke-width: 3px; }
.rcs .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.rcs .kpi { background: var(--rc-bg); border-radius: 8px; padding: 7px 9px; }
.rcs .kpi .l { font-size: 11px; color: var(--rc-ink3); }
.rcs .kpi .v { font-weight: 700; font-size: 15px; white-space: nowrap; }
.rcs .kpi .v small { font-weight: 400; color: var(--rc-ink3); font-size: 11px; }
.rcs .legend { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--rc-ink2); margin-top: 8px; min-height: 18px; }
.rcs .legend .ramp { width: 90px; height: 8px; border-radius: 4px; }

/* Analysis */
.rcs .rcs-analysis { padding: 0; overflow: hidden; }
.rcs .tabs { display: flex; border-bottom: 1px solid var(--rc-line); padding: 0 8px; overflow-x: auto; }
.rcs .tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--rc-ink2);
  padding: 12px 12px 10px; cursor: pointer; white-space: nowrap; }
.rcs .tab.on { color: var(--rc-ink); border-bottom-color: var(--rc-accent); font-weight: 600; }
.rcs .tab[hidden] { display: none; }
.rcs .tab .tabutil { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 4px; }
.rcs .tab .tabutil.ok { color: var(--rc-ok); background: var(--rc-accent-soft); }
.rcs .tab .tabutil.bad { color: var(--rc-bad); background: var(--rc-fail-bg); }
.rcs .pane { padding: 14px 16px 16px; }
.rcs .chartbox { height: 340px; }
.rcs .controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 10px; }
.rcs .controls label { color: var(--rc-ink2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.rcs .controls input[type=number] { width: 84px; border: 1px solid var(--rc-line2); border-radius: 7px; background: var(--rc-bg);
  color: var(--rc-ink); padding: 4px 6px; font: inherit; }
.rcs .controls.seg { gap: 6px; }
.rcs .controls.seg .btn { padding: 4px 10px; font-size: 12.5px; }
.rcs .controls.seg .note { margin: 0 0 0 6px; }
.rcs .scrub { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rcs .scrub input[type=range] { flex: 1; accent-color: var(--rc-accent); }
.rcs .readout { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.rcs .readout div { color: var(--rc-ink2); }
.rcs .readout b { display: block; color: var(--rc-ink); font-size: 14px; }
.rcs .state { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--rc-bg); }
.rcs .state.fail { background: var(--rc-fail-bg); color: var(--rc-bad); }
.rcs .state.yield { background: var(--rc-yield-bg); color: var(--rc-warn); }
.rcs table.props { width: 100%; border-collapse: collapse; font-size: 13px; }
.rcs table.props th { text-align: left; font-weight: 600; color: var(--rc-ink3); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 14px 0 4px; }
.rcs table.props td { padding: 4px 0; border-bottom: 1px solid var(--rc-line); }
.rcs table.props td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.rcs table.props td:nth-child(3) { color: var(--rc-ink3); padding-left: 8px; width: 48px; }
.rcs .acttable { max-height: 420px; overflow: auto; margin-top: 8px; }
.rcs table.acts th { position: sticky; top: 0; background: var(--rc-panel); padding: 6px 6px 4px; text-align: right; letter-spacing: 0.02em; }
.rcs table.acts th:nth-child(-n+2) { text-align: left; }
.rcs table.acts td { padding: 4px 6px; text-align: right; color: var(--rc-ink); width: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcs table.acts td:nth-child(-n+2) { text-align: left; }
.rcs table.acts td:nth-child(3) { color: var(--rc-ink); padding-left: 6px; width: auto; }
.rcs table.acts tbody tr { cursor: pointer; }
.rcs table.acts tbody tr:hover td { background: var(--rc-bg); }
.rcs table.acts tbody tr.on td { background: var(--rc-accent-soft); }
.rcs table.acts td.ok { color: var(--rc-ok); font-weight: 700; }
.rcs table.acts td.bad { color: var(--rc-bad); font-weight: 700; }
.rcs .verdict { margin-top: 10px; font-weight: 600; }
.rcs .verdict.ok { color: var(--rc-ok); } .rcs .verdict.bad { color: var(--rc-bad); }
.rcs .verdict .note { font-weight: 400; }
.rcs .err { color: var(--rc-bad); padding: 10px 0; }
.rcs .stresslist { display: grid; gap: 18px; }
.rcs .stressrow { border-top: 1px solid var(--rc-line); padding-top: 12px; }
.rcs .stitle { font-weight: 600; margin-bottom: 6px; }
.rcs .stressfigs { display: grid; grid-template-columns: 200px 132px 1fr; gap: 10px; align-items: start; }
.rcs .stressfigs .readout { grid-template-columns: 1fr; margin-top: 0; }
.rcs svg.cbars .cbtick { fill: var(--rc-ink2); font-size: 10px; }
.rcs svg.cbars .cbtitle { fill: var(--rc-ink); font-size: 10.5px; font-weight: 600; }
.rcs svg.cbars .cbframe { fill: none; stroke: var(--rc-line2); }

/* Charts */
.rcs svg.chart { display: block; }
.rcs svg.chart .grid line { stroke: var(--rc-line); }
.rcs svg.chart .grid line.axis0 { stroke: var(--rc-line2); stroke-width: 1.3; }
.rcs svg.chart .tick { fill: var(--rc-ink3); font-size: 11px; }
.rcs svg.chart .axlabel { fill: var(--rc-ink2); font-size: 12px; }
.rcs svg.chart .frame { fill: none; stroke: var(--rc-line2); }
.rcs svg.chart .series { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.rcs svg.chart .series.main { stroke: var(--rc-accent); }
.rcs svg.chart .series.design { stroke: var(--rc-accent); fill: var(--rc-accent-soft); fill-opacity: 0.55; }
.rcs svg.chart .series.nominal { stroke: var(--rc-ink3); stroke-dasharray: 5 4; stroke-width: 1.6; }
.rcs svg.chart .series.done { stroke: var(--rc-accent); stroke-width: 3; }
.rcs svg.chart .series.ghost { stroke: var(--rc-line2); }
.rcs svg.chart .marker { fill: var(--rc-panel); stroke: var(--rc-ink); stroke-width: 1.8; }
.rcs svg.chart .marker.now { fill: var(--rc-comp); stroke: var(--rc-panel); stroke-width: 2; }
.rcs svg.chart .marker.check { fill: var(--rc-tens); stroke: var(--rc-panel); }
.rcs svg.chart .marker.act { fill: var(--rc-ink2); stroke: none; opacity: 0.7; }
.rcs svg.chart .marker.act.over { fill: var(--rc-bad); opacity: 0.9; }
.rcs svg.chart .marker.act.far { opacity: 0.15; }
.rcs svg.chart .mlabel { fill: var(--rc-ink2); font-size: 11px; }
.rcs svg.chart .mlabel.sel { fill: var(--rc-ink); font-weight: 600; paint-order: stroke; stroke: var(--rc-panel); stroke-width: 3px; }
.rcs svg.chart .hoverdot { fill: var(--rc-ink); }
.rcs svg.chart .hovertip { fill: var(--rc-ink); font-size: 12px; paint-order: stroke; stroke: var(--rc-panel); stroke-width: 4px; }

/* Narrower: the container, not the window, so a host panel gets the same layouts. */
@container (max-width: 1100px) {
  .rcs .rcs-grid { grid-template-columns: 280px 1fr; }
  .rcs .rcs-analysis { grid-column: 1 / -1; }
}
@container (max-width: 720px) {
  .rcs .rcs-grid { grid-template-columns: 1fr; }
  .rcs .rcs-inputs, .rcs .rcs-section { position: static; max-height: none; }
  .rcs .kpis { grid-template-columns: repeat(2, 1fr); }
  .rcs .stressfigs { grid-template-columns: 1fr 132px; }
  .rcs .stressfigs .readout { grid-column: 1 / -1; }
}

/* Embedded in CivilKit Studio: its tokens, and no sticky cards (the host panel scrolls). */
.rcs.embedded {
  --rc-bg: var(--bg-0); --rc-panel: var(--bg-1); --rc-ink: var(--txt-0); --rc-ink2: var(--txt-1); --rc-ink3: var(--txt-2);
  --rc-line: var(--line); --rc-line2: var(--line-2); --rc-accent: var(--accent); --rc-accent-soft: var(--accent-soft);
  --rc-on-accent: var(--white); --rc-ok: var(--ok); --rc-bad: var(--danger); --rc-warn: var(--warn); --rc-shadow: none;
  --rc-concrete: #4a4f57; --rc-concrete-edge: #9aa1ab; --rc-steel: #e5e9f0; --rc-shape: #8f7650; --rc-comp: #ff7a3d; --rc-tens: #5b9bff;
  --rc-fail-bg: rgb(255 92 108 / 14%); --rc-yield-bg: rgb(255 183 77 / 14%);
  font-size: 13px;
}
:root[data-theme="light"] .rcs.embedded {
  --rc-concrete: #cfcac0; --rc-concrete-edge: #6b665d; --rc-steel: #2b313b; --rc-shape: #b99862; --rc-comp: #d9480f; --rc-tens: #1d5fd6;
  --rc-fail-bg: #fde8e8; --rc-yield-bg: #fff1e0;
}
/* Three columns when there is room; else the drawing over the inputs on the left and the analysis,
   which is the point, beside them at full height; one column on a phone. */
.rcs.embedded .rcs-grid { gap: 10px; grid-template-columns: 236px 290px minmax(0, 1fr); grid-template-areas: "in sec an"; }
.rcs.embedded .rcs-inputs { grid-area: in; }
.rcs.embedded .rcs-section { grid-area: sec; }
.rcs.embedded .rcs-analysis { grid-area: an; }
.rcs.embedded .rcs-inputs, .rcs.embedded .rcs-section { position: static; max-height: none; }
.rcs.embedded .card { border-radius: 8px; }
.rcs.embedded .rcs-inputs { padding: 10px 12px; }
.rcs.embedded .rcs-section { padding: 10px; }
.rcs.embedded .kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rcs.embedded .tabs { flex-wrap: wrap; }
.rcs.embedded .tab { padding: 8px 9px 6px; }
.rcs.embedded .pane { padding: 10px 12px 12px; }
.rcs.embedded .chartbox { height: 320px; }
@container (max-width: 1180px) {
  .rcs.embedded .rcs-grid { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "sec an" "in an"; align-items: start; }
}
@container (max-width: 700px) {
  .rcs.embedded .rcs-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "an" "sec" "in"; }
}

/* Prestressing strands: a diamond, so a strand is never read as a bar. */
.rcs .strand { stroke: var(--rc-ink); stroke-width: 0.8; }
.rcs label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0 6px; color: var(--rc-ink2); }