/* Layout C — Modernist Cuisine–style recipe sheets on a canvas, joined by connectors */
:root { --rule: #c8453a; --ink: #1c1c1c; --serif: "Minion Pro", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.smain { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 52px); }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.side-block { padding: 12px; border-bottom: 1px solid var(--line2); }
.side-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 6px; }
.side .help { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.tr-item { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.tr-item:hover { background: var(--accent-soft); }
.tr-item .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-item.root .nm { font-weight: 700; }
.tr-item .faint { font-size: 11px; }
.tr-sep { font-size: 10.5px; color: var(--faint); margin: 8px 6px 2px; }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 6px 11px; color: var(--muted); }
.seg button.on { background: var(--text); color: #fff; }
#rdToggle.off { color: var(--faint); }

.links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.link { fill: none; stroke-width: 2.4; opacity: .8; }
.link-dot { stroke: #fff; stroke-width: 2; }

/* the sheet */
.sheet { position: absolute; width: 900px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); border: 1px solid #d9d9d9; padding: 26px 34px 26px; font-family: var(--serif); }
.sheet::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 6px; background: var(--sc); }
.sheet.flash { animation: flash 1.1s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc) 40%, transparent), 0 8px 24px rgba(0,0,0,.15); } 100% { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); } }
.sheet input, .sheet textarea { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 1px 4px; margin-left: -5px; width: 100%; }
.sheet input:hover, .sheet textarea:hover { border-color: #e3e3e3; }
.sheet input:focus, .sheet textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.sheet textarea { resize: none; overflow: hidden; display: block; }
.s-head { display: flex; align-items: center; gap: 10px; cursor: grab; margin: -26px -34px 10px; padding: 16px 34px 4px; user-select: none; }
.s-head:active { cursor: grabbing; }
.s-kicker { font: 700 10px system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--sc); white-space: nowrap; }
.s-title { font: 700 21px/1.2 "Segoe UI", system-ui, sans-serif !important; text-transform: uppercase; letter-spacing: .6px; flex: 1; }
.s-del { border: 0; background: none; color: #aaa; font-size: 13px; border-radius: 5px; padding: 3px 7px; font-family: system-ui; }
.s-del:hover { background: #fde2e2; color: var(--danger); }

.meta { display: grid; grid-template-columns: 200px 1fr; row-gap: 1px; margin: 4px 0 12px; }
.meta .k { font: 600 11.5px system-ui, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; padding-top: 4px; color: #333; }
.meta .v { font-style: italic; font-size: 16px; display: flex; align-items: baseline; gap: 4px; }
.meta .v input { font-style: italic; }
.meta .auto { white-space: nowrap; font-style: italic; }
.meta .yield-in { flex: none; max-width: 70%; }
.meta a { color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.desc { font-size: 15.5px; line-height: 1.45; margin: 0 0 12px; }
body.preview .desc { column-count: 2; column-gap: 36px; }

table.mc { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mc th { font: 600 12px system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase; text-align: left; padding: 6px 6px 4px; border-bottom: 1.5px solid var(--rule); }
.mc td { vertical-align: top; padding: 2px 6px; line-height: 1.35; }
.mc tbody.grp { border-bottom: 1px solid var(--rule); }
.mc tbody.grp tr:first-child td { padding-top: 7px; }
.mc tbody.grp tr:last-child td { padding-bottom: 7px; }
.c-i { width: 23%; position: relative; }
.c-w { width: 12%; white-space: nowrap; }
.c-v { width: 12%; }
.c-s { width: 9%; }
.c-p { width: 44%; }
.c-w input { width: 64px; text-align: right; margin-left: -5px; }
.c-w .u { margin-left: 2px; }
.c-v input { width: 100%; }
.sublink { color: var(--sc); font-weight: 600; cursor: pointer; text-decoration: none; }
.sublink:hover { text-decoration: underline; }
tr.sub td.c-i { box-shadow: inset 3px 0 0 var(--sc); padding-left: 9px; }
.see { font-style: italic; color: #555; }
.vend { font: 11px system-ui, sans-serif; color: #999; }
.sc { cursor: pointer; border-radius: 3px; padding: 0 2px; }
.sc:hover { background: #f5ecd7; }
.sc.base { font-weight: 700; }
.pb { font: 10.5px system-ui, sans-serif; color: #999; }
.tools { position: absolute; right: 2px; top: 4px; display: none; gap: 1px; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); padding: 1px; }
tr.it:hover .tools { display: flex; }
.tools button { border: 0; background: none; font: 11px system-ui; padding: 2px 5px; border-radius: 3px; color: #555; }
.tools button:hover { background: #eef2ff; color: var(--accent); }
.tools button.on { color: var(--accent); font-weight: 700; }
.tools button.x:hover { background: #fde2e2; color: var(--danger); }
.it-empty td { color: #999; font-style: italic; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 6px; align-items: flex-start; position: relative; margin-bottom: 3px; }
.cn { flex: none; width: 17px; height: 17px; border: 1px solid #333; border-radius: 50%; font: 10px/15px system-ui, sans-serif; text-align: center; margin-top: 2px; }
.steps textarea { font-size: 14.5px; line-height: 1.35; min-height: 22px; }
.steps .x { position: absolute; right: -18px; top: 2px; border: 0; background: none; color: #bbb; display: none; font-family: system-ui; }
.steps li:hover .x { display: block; } .steps .x:hover { color: var(--danger); }
.lnk { border: 0; background: none; color: var(--accent); font: 12px system-ui, sans-serif; padding: 2px 4px; border-radius: 4px; }
.lnk:hover { background: var(--accent-soft); }
.add-row td { padding: 4px 6px 8px !important; }
.add-row button { border: 0; background: none; font: 12px system-ui, sans-serif; color: var(--accent); padding: 3px 7px; border-radius: 5px; }
.add-row button:hover { background: var(--accent-soft); }
.add-row button.s { color: var(--asm); } .add-row button.s:hover { background: var(--asm-soft); }
.add-row button.danger { color: #b55; } .add-row button.danger:hover { background: #fde2e2; }
.addgrp { margin-top: 6px; }

.rd { margin-top: 14px; border: 1px dashed #d6c7a1; background: #fdfaf2; border-radius: 6px; padding: 10px 12px; font-family: system-ui, sans-serif; display: flex; gap: 18px; align-items: flex-start; }
.rd-h { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #a3864a; margin-bottom: 6px; }
.rd-grid { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px 16px; flex: 1; }
.rd-grid div span { display: block; font-size: 10.5px; color: #8a7a5a; text-transform: uppercase; letter-spacing: .4px; }
.rd-grid div b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rd-grid input { width: 60px !important; margin: 0 !important; border: 1px solid #e3d8bb !important; background: #fff !important; font-weight: 700; text-align: right; }
.rd-nut { flex: none; }
.rd-nut .nlabel { max-width: 240px; font-size: 90%; }
.rd-nut .lb-stmt { max-width: 240px; }

/* modes */
body.preview .edit-only { display: none !important; }
body.preview .sheet input::placeholder, body.preview .sheet textarea::placeholder { color: transparent; }
body.preview .sheet input:hover, body.preview .sheet textarea:hover { border-color: transparent; }
body.preview .meta .empty { display: none; }
body.preview .desc.empty { display: none; }
body.rd-off .rd-only { display: none !important; }

@media print {
  .topbar, .side, .tabbar, .tester, .zoombar, .links, .edit-only, .toast { display: none !important; }
  body, html { height: auto; background: #fff; }
  .smain { display: block; height: auto !important; }
  .canvas { overflow: visible; background: none; height: auto; }
  .world { position: static; transform: none !important; }
  .sheet { position: static !important; margin: 0 auto; box-shadow: none; border: 0; break-after: page; }
  .sheet::before { display: none; }
  .sheet input::placeholder, .sheet textarea::placeholder { color: transparent; }
}