/* Takeaway cards: Edit / View modes, toolbar, picture rows */
:root { --tk-brand: #ea580c; --tk-ink: #0f172a; --tk-ink2: #475569; --tk-line: #e2e8f0; --tk-bg: #f8fafc; }

/* ── Edit switch in the top bar ── */
#pvEditToggle { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; margin-right: 14px; border: 1px solid var(--tk-line); border-radius: 8px; background: #fff; color: var(--tk-ink2); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
#pvEditToggle:hover { background: var(--tk-bg); border-color: #cbd5e1; }
#pvEditToggle.on { background: var(--tk-brand); border-color: var(--tk-brand); color: #fff; box-shadow: 0 1px 4px rgba(234, 88, 12, .35); }
#pvEditToggle .ic, .tk-tools .ic, .tk-cell .ic, .yt-takeaway-card-header .ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; vertical-align: -3px; }

/* ── View mode: clean for clients ── */
body:not(.pv-edit) .yt-takeaway-fab,
body:not(.pv-edit) .yt-takeaway-hint,
body:not(.pv-edit) .yt-takeaway-card .yt-takeaway-card-header > :not(.yt-takeaway-card-label),
body:not(.pv-edit) .yt-takeaway-card .tk-tools,
body:not(.pv-edit) .tk-cell .tk-h,
body:not(.pv-edit) .tk-cell .tk-del,
body:not(.pv-edit) .yt-takeaway-card.tk-empty { display: none !important; }
body:not(.pv-edit) .yt-takeaway-card { box-shadow: none; border: 1px solid var(--tk-line); border-left-width: 3px; }
body:not(.pv-edit) .yt-takeaway-card-header { border-bottom: none; padding-bottom: 0; }
body:not(.pv-edit) .yt-takeaway-body { cursor: default; padding-top: 4px; }
body:not(.pv-edit) .yt-takeaway-body[contenteditable] { outline: none; }

/* ── Body typography (formatted text) ── */
.yt-takeaway-body h3 { font-size: 17px; font-weight: 700; margin: 6px 0 4px !important; color: var(--tk-ink); }
.yt-takeaway-body h4 { font-size: 14.5px; font-weight: 700; margin: 4px 0 2px !important; color: var(--tk-ink); }
.yt-takeaway-body ul, .yt-takeaway-body ol { margin: 4px 0 4px 22px !important; padding: 0 !important; }
.yt-takeaway-body ul { list-style: disc; } .yt-takeaway-body ol { list-style: decimal; }
.yt-takeaway-body li { margin: 2px 0 !important; }
.yt-takeaway-body a { color: #2563eb; text-decoration: underline; }
.yt-takeaway-body.tk-filedrop { outline: 2px dashed var(--tk-brand) !important; outline-offset: -4px; background: #fff7ed; }

/* ── Edit mode chrome ── */
body.pv-edit .yt-takeaway-card { transition: box-shadow .15s; }
body.pv-edit .yt-takeaway-card.tk-active { box-shadow: 0 0 0 2px rgba(234, 88, 12, .35), 0 6px 20px rgba(15, 23, 42, .10); }
body.pv-edit .yt-takeaway-card.tk-empty { opacity: .85; }
.yt-takeaway-card-header button { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--tk-ink2); cursor: pointer; font-size: 12px; }
.yt-takeaway-card-header button:hover { background: var(--tk-bg); border-color: var(--tk-line); }
.yt-takeaway-card-header .yt-takeaway-delete-btn:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

/* ── Toolbar (inside the active card) ── */
.tk-tools { display: none; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--tk-line); background: var(--tk-bg); position: relative; }
body.pv-edit .yt-takeaway-card.tk-active .tk-tools { display: flex; }
.tk-b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tk-ink2); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.tk-b:hover { background: #fff; border-color: var(--tk-line); }
.tk-b.on { background: #fff1e6; border-color: var(--tk-brand); color: #9a3412; }
.tk-b span { font-size: 12px; }
.tk-sep { width: 1px; height: 18px; background: var(--tk-line); margin: 0 4px; }
.tk-sel { height: 30px; border: 1px solid var(--tk-line); border-radius: 7px; background: #fff; font: 500 12.5px Inter, system-ui, sans-serif; color: var(--tk-ink); padding: 0 6px; }
.tk-size { width: 36px; height: 28px; text-align: center; border: 1px solid var(--tk-line); border-radius: 6px; background: #fff; font: 600 12.5px Inter, system-ui, sans-serif; color: var(--tk-ink); }
.tk-pop-wrap { position: relative; display: inline-flex; }
.tk-pop { display: none; position: absolute; top: 34px; left: 0; z-index: 30; padding: 8px; gap: 6px; flex-wrap: wrap; width: 148px; background: #fff; border: 1px solid var(--tk-line); border-radius: 9px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); }
.tk-pop.open { display: flex; }
.tk-sw { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(15, 23, 42, .2); border-radius: 6px; cursor: pointer; }
.tk-sw:hover { transform: scale(1.12); }
.tk-sw.none { background: linear-gradient(135deg, #fff 45%, #dc2626 46%, #dc2626 54%, #fff 55%) !important; }
.tk-linkpop { width: 250px; flex-wrap: nowrap; align-items: center; }
.tk-url { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--tk-line); border-radius: 6px; padding: 0 8px; font: 13px Inter, system-ui, sans-serif; }
.tk-ok { height: 28px; padding: 0 10px; border: none; border-radius: 6px; background: var(--tk-brand); color: #fff; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; }

/* ── Picture rows ── */
.tk-row { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; width: 100%; user-select: none; }
.tk-cell { position: relative; margin: 0; flex: 0 1 auto; min-width: 0; line-height: 0; border-radius: 6px; }
.tk-cell > img { display: block; width: 100%; height: auto; border-radius: 6px; }
body.pv-edit .tk-cell { cursor: grab; outline: 2px solid transparent; transition: outline-color .12s; }
body.pv-edit .tk-cell:hover { outline-color: #cbd5e1; }
body.pv-edit .tk-cell.sel { outline-color: var(--tk-brand); }
.tk-cell.dragging { opacity: .35; }
.tk-cell .tk-del { display: none; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; padding: 0; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #dc2626; color: #fff; cursor: pointer; z-index: 4; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.tk-cell .tk-del .ic { width: 12px; height: 12px; stroke-width: 2.5; }
body.pv-edit .tk-cell:hover .tk-del, body.pv-edit .tk-cell.sel .tk-del { display: flex; }
.tk-h { display: none; position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid var(--tk-brand); border-radius: 3px; z-index: 3; }
body.pv-edit .tk-cell:hover .tk-h, body.pv-edit .tk-cell.sel .tk-h, .tk-cell.resizing .tk-h { display: block; }
.tk-h.nw { left: -6px; top: -6px; cursor: nwse-resize; } .tk-h.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.tk-h.sw { left: -6px; bottom: -6px; cursor: nesw-resize; } .tk-h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.tk-h.w { left: -6px; top: calc(50% - 6px); cursor: ew-resize; } .tk-h.e { right: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.tk-cell.resizing { outline-color: var(--tk-brand); }

/* ── Drag ghost + drop line ── */
#tkGhost { position: fixed; z-index: 100000; width: 120px; height: auto; border-radius: 6px; opacity: .85; pointer-events: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .3); }
#tkDropInd { position: fixed; display: none; z-index: 99999; background: var(--tk-brand); border-radius: 2px; pointer-events: none; }

/* ── View mode on the other tabs: period buttons and overview titles are for the team only ── */
body:not(.pv-edit) #liDashNewBtn, body:not(.pv-edit) #liDashTrueEditBtn, body:not(.pv-edit) #liDashDeleteBtn,
body:not(.pv-edit) #twDashNewBtn, body:not(.pv-edit) #twDashTrueEditBtn, body:not(.pv-edit) #twDashDeleteBtn { display: none !important; }
body:not(.pv-edit) .ov-editable { pointer-events: none; cursor: inherit; }