/* Strategy builder: uses the site's tokens from /site.css */
.b-intro { display: flex; flex-direction: column; gap: 8px; max-width: 72ch }
.b-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start }
@media (max-width: 980px) { .b-grid { grid-template-columns: minmax(0, 1fr) } }
#side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding-bottom: 4px }
@media (max-width: 980px) { #side { position: static; max-height: none; overflow: visible } }
#editor { display: flex; flex-direction: column; gap: 14px; min-width: 0 }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px }
.toolbar button, .toolbar select, button.small, .small-sel { font: 500 14px var(--body); padding: 7px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; cursor: pointer }
.toolbar button:hover, button.small:hover { border-color: var(--accent) }

details.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px }
details.sec > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between }
details.sec > summary::-webkit-details-marker { display: none }
details.sec > summary::after { content: '+'; font: 600 20px var(--mono); color: var(--muted) }
details.sec[open] > summary::after { content: '–' }
details.sec > summary h2 { margin: 0; font-size: 22px }
.sec-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px }
.sec-body h3 { font-size: 18px; margin-top: 8px }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; align-items: start }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px }
.fld-l { font-weight: 600; font-size: 13px; color: var(--muted) }
.fld small, .small-text { font-size: 13px; color: var(--muted); line-height: 1.45 }
.small-text.bad, .bad { color: var(--fail) }
.ok { color: var(--pass) }
.muted { color: var(--muted) }
#builder input[type=text], #builder input[type=number], #builder input[type=email], #builder input[type=time], #builder select, #builder textarea {
  font: 15px var(--body); padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); min-width: 0; max-width: 100% }
#builder input:focus, #builder select:focus, #builder textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent) }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px }
.num-in { width: 84px }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer }
.days { display: flex; flex-wrap: wrap; gap: 4px 12px }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px }
.card h2 { font-size: 20px; margin: 0 }
.card.ind { background: var(--paper); padding: 12px }
.card-head { display: flex; align-items: center; gap: 10px }
.card-head .type { color: var(--muted); font-size: 14px; flex: 1 }
.id-in { font: 600 15px var(--mono) !important; width: 150px }
.lines { margin: 0; font-size: 13px; color: var(--muted) }
.lines code, code { font: 13px var(--mono); background: var(--soft); padding: 1px 5px; border-radius: 4px; color: var(--ink) }
.x { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px }
.x:hover { color: var(--fail); background: var(--soft) }
button.link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer }
.formula { font: 14px/1.5 var(--mono) !important; width: 100%; resize: vertical; tab-size: 2 }
.formula-msg { margin: 4px 0 0; font: 13px var(--mono) }
.add-ind { font-weight: 600 !important; border-style: dashed !important }
details.more summary { cursor: pointer; font-size: 14px; color: var(--accent) }
details.more[open] summary { margin-bottom: 8px }

.group { border-left: 3px solid var(--accent); padding: 8px 0 8px 12px; display: flex; flex-direction: column; gap: 8px }
.group.nested { border-left-color: var(--warn); background: var(--soft); border-radius: 0 6px 6px 0; padding-right: 8px }
.group-head, .group-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px }
.opnd-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center }
.opnd { max-width: 230px }
.ago { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted) }
.ago input { width: 56px }
.op { font-weight: 600 }

.note { border-radius: 6px; padding: 10px 12px; font-size: 14px; background: var(--soft) }
.note.ok { color: var(--ink); border-left: 4px solid var(--pass) }
.note.bad { color: var(--ink); border-left: 4px solid var(--fail) }
.note ul { margin-top: 6px; font-size: 13px }
.btn-s { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 8px 14px; font: 600 14px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap }
.btn-s.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent) }
.btn-s:disabled, .btn:disabled { opacity: .45; cursor: not-allowed }
button.btn { border: 0; cursor: pointer; align-self: flex-start }
.signin { display: flex; flex-wrap: wrap; gap: 8px }
.signin input { flex: 1 1 180px }
.pass { margin: 0; font-weight: 600; font-size: 14px }
.pass.ok { color: var(--pass) }
.plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.plans li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--paper) }
.plat { display: flex; flex-wrap: wrap; gap: 6px }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.file { align-self: flex-start; cursor: pointer }
.file:focus-within .btn-s { outline: 2px solid var(--accent); outline-offset: 2px }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column }
.stat span { font-size: 12px; color: var(--muted) }
.stat b { font: 600 17px var(--mono) }
.stat.ok b { color: var(--pass) } .stat.bad b { color: var(--fail) }
.curve-fig { margin: 0 }
.curve { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 6px }
.curve .line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke }
.curve .base { stroke: var(--line); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke }
.firm { border-radius: 6px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; display: flex; flex-direction: column; gap: 6px }
.firm.ok { border-left: 4px solid var(--pass) } .firm.bad { border-left: 4px solid var(--fail) }
.firm ul { list-style: none; padding: 0; font-size: 13px; gap: 3px }
.firm li.ok { color: var(--pass) } .firm li.bad { color: var(--fail) }
.firm small { color: var(--muted); font-size: 12px }
table.trades { border-collapse: collapse; font: 12px var(--mono); width: 100% }
table.trades th, table.trades td { padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left }

.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(150%); opacity: 0; visibility: hidden; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-size: 14px; max-width: min(560px, calc(100vw - 32px)); transition: transform .2s; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,.2) }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible }
.toast.bad { background: var(--fail); color: #fff }
dialog.dlg { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 16px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px) }
dialog.dlg::backdrop { background: rgba(10, 20, 28, .5) }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px }
.dlg-head h2 { font-size: 22px }
pre.guide { white-space: pre-wrap; font: 13px/1.55 var(--mono); margin: 0; max-height: 70vh; overflow: auto }
ul.pick { list-style: none; padding: 0; gap: 4px }
ul.pick li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding: 6px 0 }

/* account and sign-in pages */
.acct-page { max-width: 640px; display: flex; flex-direction: column; gap: 14px }
.acct-page table { border-collapse: collapse; font-size: 14px; width: 100% }
.acct-page th, .acct-page td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line) }
button.danger { border: 1px solid var(--fail); color: var(--fail); background: transparent; border-radius: 6px; padding: 8px 14px; font: 600 14px var(--body); cursor: pointer }