/* Light project workspace. Engine graphics keep their own engineering palette. */
:root {
  color-scheme: light;
  --ink: #302f2c;
  --ink-2: #625f58;
  --ink-3: #817c73;
  --line: #e7e5e0;
  --line-2: #f0eeea;
  --bg: #fff;
  --card: #fff;
  --accent: #383733;
  --accent-2: #f1f0ec;
  --pass: #357448;
  --pass-bg: #f0f6ef;
  --fail: #a34337;
  --fail-bg: #fcf0ec;
  --warn: #93712e;
  --warn-bg: #faf5e8;
  --radius: 8px;
  --sidebar-width: 248px;
  font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
body { background: #fff; }
button, .button { font-size: 12px; font-weight: 450; border-radius: 6px; padding: 9px 13px; }
button:hover, .button:hover { background: #f5f5f5; border-color: #808080; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.primary:hover { background: #252420; border-color: #252420; }
button, a, input, select, textarea, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid #747474; }
input, select, textarea { border-color: #dcdcdc; border-radius: 5px; }
input:focus, select:focus, textarea:focus { border-color: #767676; outline: 2px solid #e3e3e3; outline-offset: 1px; }
label { font-size: 12px; gap: 7px; }
input, select { padding: 9px 10px; font-size: 13px; }
input[type=checkbox], input[type=range] { accent-color: #626262; }
h1 { font-size: 26px; font-weight: 500; letter-spacing: -.7px; line-height: 1.3; }
h2 { font-size: 16px; font-weight: 500; letter-spacing: -.2px; }
h3 { font-size: 13px; font-weight: 500; }
.hint { font-size: 11px; line-height: 1.8; color: #817c73; }
i { font-size: 10px; }
.top { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100dvh; padding: 0 12px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #f6f6f6; border: 0; border-right: 1px solid var(--line); z-index: 20; }
.sidebar-brand-row { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; flex-shrink: 0; }
.brand { font-size: 17px; font-weight: 600; letter-spacing: -.5px; gap: 9px; }
.brand-name>span { color: #777570; font-weight: 400; }
.mark { width: 23px; height: 26px; background: none; color: #69655d; border-radius: 0; }
.mark svg { width: 23px; height: 23px; }
.mark img { width: 24px; height: 24px; display: block; }
.top svg, .navigation-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workspace-tag { color: #777570; font-size: 10px; }
.top nav { display: flex; flex-direction: column; gap: 2px; }
.top nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 7px; font-size: 13px; font-weight: 400; color: #605c54; }
.top nav a svg { width: 18px; height: 18px; color: #7b756c; flex-shrink: 0; }
.top nav a:hover, .top nav a.on { background: #e8e8e8; color: #302f2c; }
.top nav a.new-design-link { margin: 6px 0 17px; border: 1px solid #e0e0e0; background: #fcfcfc; color: #35332f; font-weight: 500; }
.top nav a.new-design-link:hover { background: #ececec; }
.pill { margin-left: auto; padding: 1px 6px; background: #d9d9d9; color: #5d5d5d; font-size: 10px; }
.recent-label { padding: 30px 12px 10px; font-size: 11px; color: #777570; }
.recent-designs { overflow-y: auto; min-height: 60px; scrollbar-width: thin; }
.recent-empty { color: #777570; font-size: 12px; padding: 0 12px; line-height: 1.8; }
.recent-project { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 7px; text-decoration: none; color: inherit; margin: 2px 0; }
.recent-project:hover, .recent-project.current { background: #e8e8e8; }
.recent-project svg { width: 15px; height: 15px; margin-top: 3px; color: #777570; flex-shrink: 0; }
.recent-project>span { min-width: 0; }
.recent-project strong { display: block; font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-project small { display: block; font-size: 10px; line-height: 1.5; color: #777570; margin-top: 4px; }
.sidebar-bottom { margin-top: auto; padding-top: 25px; flex-shrink: 0; }
.workspace-account { display: flex; align-items: center; gap: 9px; padding: 19px 6px; border-top: 1px solid var(--line); font-size: 11px; }
.account-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #e6e6e6; color: #79766e; flex-shrink: 0; }
.workspace-account small { display: block; color: #777570; font-size: 9px; margin-top: 4px; }
.version { font-size: 9px; margin-left: auto; white-space: nowrap; color: #777570; }
.who { display: block; font-size: 11px; padding: 0 8px 14px; white-space: normal; }
.who .link { font-size: 11px; }
.workspace-topbar { height: 64px; margin-left: var(--sidebar-width); padding: 0 32px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.navigation-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #77736b; flex-shrink: 0; }
.navigation-toggle:hover { background: #ededed; }
.navigation-toggle svg { width: 18px; height: 18px; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 12px; min-width: 0; color: #777570; font-size: 12px; }
.breadcrumb-divider { color: #777570; }
#workspace-title { color: #4c4a45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context { margin-left: auto; color: #777570; font-size: 10px; white-space: nowrap; }
.view { width: calc(100% - var(--sidebar-width)); max-width: none; padding: 32px; margin: 0 0 0 var(--sidebar-width); }
.foot { margin-left: var(--sidebar-width); padding: 21px 32px; color: #777570; background: #fff; text-align: left; font-size: 10px; line-height: 1.8; }
.form-layout { grid-template-columns: minmax(0, 1fr) 302px; gap: 26px; }
.form-head { margin-bottom: 22px; gap: 20px; }
.preset { font-size: 11px; font-weight: 400; }
.preset select { font-size: 11px; padding: 7px 9px; max-width: 235px; }
label.code-choice { font-size: 11px; margin-bottom: 20px; font-weight: 400; gap: 15px; }
label.code-choice select { border-color: #dcdcdc; color: #5e5e5e; font-size: 12px; font-weight: 400; max-width: none; }
.source-switch { display: flex; width: 100%; gap: 2px; padding: 4px; background: #f2f2f2; border: 0; border-radius: 7px; margin-bottom: 24px; }
.source-switch button { flex: 1; padding: 8px 9px; font-size: 11px; line-height: 1.5; color: #6b6b6b; }
.source-switch button.on { background: #fff; color: #535353; box-shadow: 0 1px 3px #302f2c12; }
.source-switch button:hover { background: #e5e5e5; }
.source-switch button.on:hover { background: #fff; }
.source-switch button.on .soon-tag { background: #e4e4e4; color: #6b6b6b; }
.soon-tag { font-size: 8px; font-weight: 400; padding: 2px 5px; }
fieldset { padding: 18px 20px 20px; margin-bottom: 22px; border-color: var(--line); border-radius: 8px; }
legend { font-size: 13px; font-weight: 500; padding: 0 7px; color: #5d5d5d; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 18px; }
.grid .wide { grid-column: 1 / -1; }
label.check { grid-column: 1 / -1; }
.plan-box { grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; }
#plan, #shed-sketch { background: #fcfcfc; }
#plan { align-self: start; }
.plan-box .hint { font-size: 10px; }
.plan-box h3 { margin-top: 15px; }
.shape-actions { gap: 7px 12px; }
button.link { font-size: 11px; font-weight: 400; color: #5f5f5f; }
.estimate { top: 24px; }
.estimate-card { padding: 21px; border-radius: 9px; }
.estimate-card h2 { font-size: 14px; margin-bottom: 7px; }
.estimate .primary { font-size: 12px; padding: 12px; margin-top: 20px; }
.estimate details { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 18px; font-size: 11px; }
.sys { border: 0; border-top: 1px solid var(--line); padding: 17px 0; margin-top: 10px; border-radius: 0; }
.sys.best { background: #fff; border-color: var(--line); }
.sys-head { font-size: 12px; font-weight: 500; gap: 6px; }
.sys-head small { font-size: 10px; }
.sys dl { font-size: 11px; gap: 7px; margin-top: 14px; }
.tag { font-size: 9px; border-radius: 4px; font-weight: 400; padding: 3px 6px; }
.range { font-size: 10px; }
.warn, .note { font-size: 11px; line-height: 1.8; border-radius: 5px; padding: 11px 12px; }
.page-head { margin-bottom: 27px; padding: 0 0 4px; }
.page-head .hint { margin-top: 9px; }
.actions { gap: 9px; flex-wrap: wrap; }
.verdict { padding: 15px 18px; font-size: 13px; line-height: 1.8; margin-bottom: 22px; }
.verdict strong { font-weight: 500; }
.verdict ul, .verdict .tip { font-size: 12px; }
.cards { gap: 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.card { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 20px; }
.card:first-child { padding-left: 0; }
.card:last-child { border-right: 0; }
.card .k { font-size: 11px; color: #676767; }
.card .v { font-size: 25px; font-weight: 450; letter-spacing: -.5px; margin: 8px 0 6px; line-height: 1.4; overflow-wrap: anywhere; }
.card .s { font-size: 10px; line-height: 1.7; }
.tabs { gap: 23px; margin-bottom: 24px; }
.tabs button { padding: 14px 0; font-size: 12px; }
.tabs button.on { color: #4b4b4b; border-bottom-color: #5e5e5e; }
.tab section { margin-bottom: 30px; }
.tab h2 { font-size: 15px; margin-bottom: 12px; }
.tab { min-width: 0; overflow-x: auto; }
table.list, table.data { font-size: 12px; border: 0; border-bottom: 1px solid var(--line); }
table.list th, table.data th { font-weight: 400; font-size: 10px; background: #f7f7f7; color: #6a6a6a; padding: 13px 12px; }
table.list td, table.data td { padding: 15px 12px; vertical-align: top; border-bottom-color: var(--line); }
table.list tr:hover { background: #f3f3f3; }
table.list strong { font-weight: 500; }
#view-jobs { overflow-x: auto; }
#jobs-table { min-width: 720px; }
.state { font-size: 10px; font-weight: 400; border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
.report { border: 1px solid var(--line); padding: 14px 25px 25px; }
.sheet, .files, iframe.viewer { border-color: var(--line); border-radius: 8px; }
.files a { font-size: 12px; padding: 15px 18px; }
.files a:hover { background: #f6f6f6; }
.progress-box { padding: 22px; border-color: var(--line); }
.spinner { width: 22px; height: 22px; border-width: 2px; }
.login { border-color: var(--line); box-shadow: none; }
.freeform { max-width: none; padding: 0; }
.ff-layout { grid-template-columns: minmax(0, 1fr) minmax(310px, 43%); gap: 25px; }
.ff-intro { font-size: 12px; margin: 15px 0 23px; max-width: 850px; }
.ff-modes { gap: 20px; margin-bottom: 22px; }
.ff-modes button { padding: 12px 0; font-size: 12px; }
.ff-templates { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ff-template { padding: 17px; line-height: 1.7; }
.ff-template strong { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.ff-template span { font-size: 11px; color: #686868; }
.ff-template:hover, .ff-template.on { border-color: #808080; background: #f6f6f6; }
.ff-right { top: 24px; }
.ff-preview { padding: 13px; border-radius: 9px; }
#ff-canvas { background: #f9f9f9; }
.ff-key { font-size: 10px; margin-top: 13px; }
.ff-key i { width: 7px; height: 7px; }
.ff-design { font-size: 12px; padding: 12px; margin-top: 16px; }
.ff-notes { font-size: 11px; line-height: 1.8; }
.ff-fields { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ff-field>span { font-size: 12px; }
.soon-card { padding: 27px; }
.soon-card h2 { font-weight: 500; line-height: 1.5; }
.soon-label { font-size: 10px; font-weight: 400; }
.navigation-backdrop { display: none; }
.navigation-collapsed { --sidebar-width: 0px; }
.navigation-collapsed .top { transform: translateX(-100%); visibility: hidden; }
dialog { color: var(--ink); background: #fff; width: min(580px, 90vw); max-height: 88dvh; overflow-y: auto; border: 1px solid #dcdcdc; border-radius: 12px; padding: 28px; box-shadow: 0 18px 80px #302f2c1a; }
dialog::backdrop { background: #302f2c35; }
.creation-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; color: #6b6b6b; }
.dialog-close { border: 0; padding: 0; width: 30px; height: 30px; background: none; font-size: 23px; color: #6b6b6b; }
dialog h2 { font-size: 24px; font-weight: 500; letter-spacing: -.5px; margin: 12px 0; }
.creation-subtitle { font-size: 12px; line-height: 1.8; color: #6b6b6b; margin: 0 0 24px; }
#new-steel-form { display: grid; gap: 20px; }
#new-steel-form label { gap: 9px; }
#new-steel-form input, #new-steel-form select { padding: 11px 12px; font-size: 13px; }
.creation-note { font-size: 11px; line-height: 1.8; margin: 0; color: #6b6b6b; }
.creation-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
@media (min-width: 1600px) {
  .view { padding: 35px 42px; }
  .workspace-topbar { padding: 0 42px; }
  .form-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid .wide { grid-column: span 2; }
  .ff-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); }
}
@media (max-width: 1250px) {
  :root { --sidebar-width: 220px; }
  .view { padding: 27px 24px; }
  .workspace-topbar { padding: 0 24px; }
  .form-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
  .plan-box { grid-template-columns: 1fr; }
  .form-head { align-items: flex-start; }
  h1 { font-size: 24px; }
  .ff-layout { grid-template-columns: minmax(0, 1fr) 42%; gap: 20px; }
  .ff-fields { grid-template-columns: minmax(0, 1fr); }
  .workspace-context { display: none; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 0; }
  .card { padding: 0 14px; }
  .card .v { font-size: 22px; }
}
@media (max-width: 1050px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .estimate { position: static; }
  .plan-box { grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr); }
  .ff-layout { grid-template-columns: minmax(0, 1fr); }
  .ff-right { position: static; }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 0px; }
  .top { width: 248px; transform: translateX(-100%); visibility: hidden; z-index: 31; }
  .navigation-open .top { transform: translateX(0); visibility: visible; }
  .view { width: 100%; margin-left: 0; padding: 25px 18px; }
  .workspace-topbar { height: 57px; margin-left: 0; padding: 0 18px; }
  .workspace-breadcrumb { font-size: 11px; }
  .workspace-breadcrumb>span:first-child, .breadcrumb-divider { display: none; }
  .version { display: block; }
  .foot { margin-left: 0; padding: 18px; font-size: 9px; }
  .form-head { flex-direction: column; align-items: stretch; gap: 15px; }
  .preset { justify-content: space-between; }
  .preset select { max-width: none; }
  label.code-choice { align-items: stretch; flex-direction: column; gap: 8px; }
  .source-switch { flex-wrap: wrap; }
  .source-switch button { flex-basis: calc(50% - 3px); font-size: 11px; }
  .plan-box { grid-template-columns: 1fr; }
  fieldset { padding: 16px; }
  .grid { gap: 16px; }
  .grid .wide, label.check { grid-column: 1 / -1; }
  .page-head { align-items: flex-start; gap: 17px; margin-bottom: 22px; }
  .page-head h1 { font-size: 24px; }
  .actions { width: 100%; }
  .cards { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .card:nth-child(odd) { padding-left: 0; }
  .card:nth-child(even) { border-right: 0; }
  .card .v { font-size: 23px; }
  .tabs { gap: 23px; }
  .tabs button { font-size: 12px; }
  iframe.viewer { height: 670px; }
  .ff-modes { gap: 16px; }
  .ff-modes button { font-size: 11px; }
  #ff-canvas { height: 350px; }
  .ff-templates { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ff-template { padding: 13px; }
  .navigation-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; border: 0; background: #302f2c40; z-index: 30; }
  dialog { padding: 23px; }
}
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .ff-templates { grid-template-columns: 1fr; }
  .ff-modes { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 2s !important; } }

/* Analysis-only fullscreen keeps the original iframe and its selected result. */
.analysis-view-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:14px 0; }
.analysis-view-tools>.hint { margin-right:auto; }
.analysis-view-tools>a { font-size:11px; color:var(--ink-3); }
.analysis-view-tools>button { white-space:nowrap; }
.analysis-view-shell { position:relative; }
.analysis-view-shell>iframe { display:block; }
.analysis-view-shell.analysis-expanded, .analysis-view-shell:fullscreen { position:fixed; inset:0; width:100vw; height:100dvh; z-index:1000; background:#fff; }
.analysis-view-shell.analysis-expanded>iframe { width:100%; height:100%; min-height:0; border:0; border-radius:0; }
.analysis-view-active { overflow:hidden; }
.analysis-exit { position:absolute; top:12px; right:14px; z-index:2; background:#fffffff2; color:#4c4943; border:1px solid #dedbd4; box-shadow:0 2px 8px #302f2c0d; font-size:12px; }
.analysis-exit:hover { background:#f5f4f1; }
@media(max-width:760px) { .analysis-view-tools>.hint { flex-basis:100%; } .analysis-exit { top:10px; right:10px; } }

/* Sidebar: the link to every design under the latest few */
.recent-more { display: block; margin: 6px 10px 0; padding: 6px 8px; font-size: 12px; color: #6a6a6a; border-radius: 6px; text-decoration: none; }
.recent-more:hover { background: #ededed; color: #2b2b2b; }

/* Designs list where the table does not fit (it needs ~990 px with the sidebar): each
   design a card (name and status, date, system, steel and cost) */
@media (max-width: 1000px) {
  table.list thead { display: none; }
  table.list, table.list tbody, #jobs-table { display: block; width: 100%; min-width: 0; }
  table.list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  table.list td { display: block; padding: 0; border: 0; min-width: 0; }
  table.list td.cell-name { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
  table.list td.cell-state { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
  table.list td.cell-system { grid-column: 1 / -1; color: #6a6a6a; }
  table.list td.cell-steel { grid-column: 1; text-align: left; font-variant-numeric: tabular-nums; }
  table.list td.cell-cost { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
  table.list td.cell-date { grid-column: 1 / -1; color: #8a8a8a; font-size: 11px; }
  table.list td.cell-open { display: none; }
}

/* Any structure (in progress): the change box, the requirements the engine checked */
.ga-change { margin-top: 14px; }
.ga-change input { width: 100%; }
.ga-checks { margin-top: 18px; }
.ga-checks h2 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; }
.ga-checks details { margin-top: 10px; font-size: 12px; }
.ga-facts { font-size: 12px; color: #5a5a5a; padding-left: 18px; }
.ga-requirements td { font-size: 12px; }
.ga-status { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: #ededed; color: #4a4a4a; white-space: nowrap; }
.ga-status.exact { background: #e8f3ea; color: #2c6e3a; }
.ga-status.approximated { background: #fdf3e1; color: #8a5a10; }
.ga-status.not_possible { background: #fbe9e7; color: #9b2c1f; }
.ga-measure { display: inline-block; margin: 0 6px 2px 0; font-size: 11px; white-space: nowrap; }
.ga-measure.ok { color: #2c6e3a; }
.ga-measure.off { color: #9b2c1f; font-weight: 600; }
.ga-problems li { color: #9b2c1f; }
#general .ff-intro .soon-tag { margin: 0 6px 0 0; }
#ga-canvas { width: 100%; height: 460px; display: block; background: #f9f9f9; border-radius: 6px; touch-action: none; cursor: grab; }
@media (max-width: 760px) { #ga-canvas { height: 350px; } }

.ga-repair { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ga-repair .hint { flex: 1 1 280px; }
.ga-versions td { vertical-align: top; }
.ga-version-actions { white-space: nowrap; text-align: right; }
@media (max-width: 700px) {
  table.data.ga-versions, .ga-versions tbody { display: block; border: 0; }
  .ga-versions thead { display: none; }
  .ga-versions tr { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.data.ga-versions td { display: block; border: 0; padding: 0; text-align: left; }
  table.data.ga-versions td.ga-rank { display: none; }
  .ga-versions .ga-change { flex: 1 1 100%; font-weight: 500; }
  .ga-versions td[data-k]::before { content: attr(data-k); display: block; font-size: 12px; color: var(--ink-3); }
  .ga-version-actions { flex: 1 1 100%; white-space: normal; text-align: left; }
}