/* Word-like exam editor. Tokens come from style.css (:root). */
main:has(.exam-editor) { max-width: none; padding-top: 1.25rem; }
.exam-editor { --ee-paper: #fff; --ee-desk: #e9ece8; --ee-rule: #cfd6cf; --ee-ai: #5b3fa8; --ee-ai-soft: #f1edfb; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
@supports (color: light-dark(#000, #fff)) { .exam-editor { --ee-paper: light-dark(#fff, #1a2420); --ee-desk: light-dark(#e9ece8, #222422); --ee-rule: light-dark(#cfd6cf, #2e322e); --ee-ai: light-dark(#5b3fa8, #b9acff); --ee-ai-soft: light-dark(#f1edfb, #222028); } }
.exam-editor input[type=radio] { width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; flex-shrink: 0; accent-color: var(--green); }
.ee-new-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.ee-new-form label { flex: 1 1 18rem; margin: 0; }
.ee-locked { border-color: #e7dcc3; border-color: light-dark(#e7dcc3, #312a1a); }

/* top bar */
.ee-topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ee-crumbs { color: var(--muted); font-size: .8125rem; }
.ee-doc-title { display: flex; align-items: baseline; gap: .75rem; flex: 1 1 16rem; min-width: 0; flex-wrap: wrap; }
.ee-doc-title strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.ee-save { color: var(--muted); font-size: .75rem; }
.ee-save[data-kind=ok]::before { content: '✓ '; color: var(--green); }
.ee-save[data-kind=error] { color: var(--danger); font-weight: 600; }
.ee-total { font-size: .75rem; color: var(--green); font-weight: 650; font-variant-numeric: tabular-nums; }
.ee-top-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ee-more { position: relative; }
.ee-more summary { list-style: none; min-width: 2.75rem; }
.ee-more summary::-webkit-details-marker { display: none; }
.ee-more-panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; display: grid; gap: .25rem; min-width: 14rem; padding: .4rem; background: #fff; background: light-dark(#fff, #1a2420); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 12px 32px #1a2e2224; }
.ee-more-panel form { margin: 0; }
.ee-more-panel button { width: 100%; justify-content: flex-start; }

/* ribbon */
.ee-ribbon { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .45rem .6rem; background: #fbfcfb; background: light-dark(#fbfcfb, #1e1f1e); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 4px 14px #1a2e220d; }
.ee-group { display: flex; align-items: center; gap: .15rem; padding-right: .45rem; margin-right: .15rem; border-right: 1px solid var(--line); }
.ee-group:last-child { border-right: 0; margin-left: auto; gap: .4rem; }
.ee-tool { min-width: 2.25rem; min-height: 2.25rem; padding: .25rem .45rem; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: .45rem; font-size: .875rem; font-weight: 500; }
.ee-tool.wide { font-size: .8125rem; }
.ee-tool:hover, .ee-tool.is-on { background: var(--mint); border-color: #d3e1d6; border-color: light-dark(#d3e1d6, #252d27); }
.ee-tool:not(:disabled):active { background: #dfeae1; background: light-dark(#dfeae1, #212822); color: var(--ink); }
.ee-select-label { margin: 0; }
.ee-select-label select { min-height: 2.25rem; padding: .3rem .5rem; font-size: .8125rem; width: auto; }
.ee-ai-button { background: var(--ee-ai); color: #fff; color: light-dark(#fff, #10201a); }
.ee-ai-button:not(:disabled):active { background: #4a3290; background: light-dark(#4a3290, #c7c0fe); }
.ee-ai-button svg { margin-right: -.15rem; }

/* desk and sheet */
.ee-workspace { position: relative; }
.ee-canvas { position: relative; padding: 1.5rem 1rem 3rem; background: var(--ee-desk); border-radius: .9rem; overflow-x: auto; }
/* --ee-page-w/-h/--ee-margin are set from the chosen sheet size (A4/A5). */
.ee-sheet { --ee-page-w: 210mm; --ee-page-h: 297mm; --ee-margin: 16mm; width: var(--ee-page-w); max-width: 100%; min-height: var(--ee-page-h); margin: 0 auto; padding: 14mm var(--ee-margin) 18mm; background: var(--ee-paper); color: #1b1f1c; color: light-dark(#1b1f1c, #e7ede9); box-shadow: 0 1px 3px #0000001f, 0 10px 30px #0000000f;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ee-page-h) - 1px), #c9d2ca calc(var(--ee-page-h) - 1px), #c9d2ca var(--ee-page-h));
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ee-page-h) - 1px), light-dark(#c9d2ca, #313732) calc(var(--ee-page-h) - 1px), light-dark(#c9d2ca, #313732) var(--ee-page-h)); font: 11pt/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ee-sheet[data-page=A5] { font-size: 10.5pt; }
.ee-page-gap { position: relative; flex: none; pointer-events: none; }
.ee-page-gap::after { content: attr(data-next); position: absolute; right: 0; bottom: .35rem; padding: .05rem .5rem; border-radius: 1rem; background: #eef1ed; background: light-dark(#eef1ed, #202220); color: #6a756d; color: light-dark(#6a756d, #9da9a0); font-size: .625rem; font-weight: 600; }
.ee-pages, .ee-kind-badge { font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ee-kind-badge { padding: .1rem .5rem; border-radius: 1rem; background: var(--mint); color: var(--green); font-weight: 650; }
.ee-new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.ee-new-grid .hint { margin: .5rem 0 0; color: var(--muted); }
.ee-new-form .ee-new-size { flex: 0 0 6.5rem; }

/* header */
.ee-head.no-qr { grid-template-columns: minmax(0,1fr); }
.ee-title-row { display: flex; align-items: center; gap: .25rem; }
.ee-title-row .ee-title-input { flex: 1; min-width: 0; }
.ee-title-row:hover .ee-field-remove, .ee-title-row:focus-within .ee-field-remove { opacity: 1; }
.ee-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem 1.25rem; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 2px solid #2b332e; border-bottom: 2px solid light-dark(#2b332e, #e1ebe5); }
.ee-head-main { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ee-sheet input.ee-title-input, .ee-sheet input.ee-subtitle-input { min-height: 0; padding: .15rem .3rem; margin-left: -.3rem; border: 1px dashed transparent; border-radius: .35rem; background: transparent; color: inherit; }
.ee-sheet input.ee-title-input { font-size: 1.45rem; font-weight: 720; letter-spacing: -.02em; }
.ee-sheet input.ee-subtitle-input { font-size: .95rem; color: #4b554e; color: light-dark(#4b554e, #b4c0b8); }
.ee-sheet input.ee-title-input:hover, .ee-sheet input.ee-subtitle-input:hover, .ee-field-label:hover { border-color: var(--ee-rule); }
.ee-sheet input:focus { border-color: var(--green); border-style: solid; outline: none; }
.ee-fields { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .35rem; }
.ee-field { position: relative; display: inline-flex; align-items: baseline; gap: .15rem; padding: .15rem .25rem .15rem 0; border-radius: .35rem; white-space: nowrap; }
.ee-sheet input.ee-field-label { width: auto; min-height: 0; padding: .05rem .25rem; border: 1px dashed transparent; border-radius: .3rem; background: transparent; font-size: .95rem; font-weight: 650; color: inherit; }
.ee-field-blank { color: #5c665f; color: light-dark(#5c665f, #abb6ae); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ee-field-remove { min-width: 1.4rem; min-height: 1.4rem; padding: 0; margin-left: .2rem; background: transparent; color: var(--muted); border-radius: 50%; font-size: 1rem; line-height: 1; opacity: 0; }
.ee-field:hover .ee-field-remove, .ee-field:focus-within .ee-field-remove { opacity: 1; }
.ee-field-remove:hover { background: #f4e5e4; background: light-dark(#f4e5e4, #2b2222); color: var(--danger); }
.ee-field-add { position: relative; }
.ee-field-add summary { list-style: none; }
.ee-field-add summary::-webkit-details-marker { display: none; }
.ee-field-add summary::after, .ee-more summary::after, .ee-field-add summary::before, .ee-more summary::before { content: none !important; display: none !important; }
.ee-chip-button { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .2rem .6rem; background: #fff; background: light-dark(#fff, #1a2420); color: var(--green); border: 1px dashed #b7c9bb; border: 1px dashed light-dark(#b7c9bb, #38443a); border-radius: 1rem; font-size: .75rem; font-weight: 600; cursor: pointer; }
.ee-popover { position: absolute; z-index: 25; left: 0; top: calc(100% + .3rem); display: grid; gap: .15rem; min-width: 15rem; padding: .35rem; background: #fff; background: light-dark(#fff, #1a2420); border: 1px solid var(--line); border-radius: .7rem; box-shadow: 0 12px 30px #1a2e2224; }
.ee-popover button { justify-content: flex-start; min-height: 2.25rem; }
.ee-qr { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 0; max-width: 7.5rem; text-align: center; }
.ee-qr img { width: 22mm; height: 22mm; image-rendering: pixelated; border: 1px solid #e1e5e1; border: 1px solid light-dark(#e1e5e1, #262826); }
.ee-qr figcaption { font-size: .625rem; line-height: 1.3; color: var(--muted); }
.ee-qr .ee-chip-button { font-size: .625rem; min-height: 1.5rem; opacity: 0; }
.ee-qr:hover .ee-chip-button, .ee-qr:focus-within .ee-chip-button, .ee-qr.is-off .ee-chip-button { opacity: 1; }
.ee-instructions { grid-column: 1/-1; }
.ee-head-note { grid-column: 1/-1; margin: 0; color: var(--muted); font-size: .6875rem; }

/* rich text */
.ee-rich { min-height: 1.6em; padding: .25rem .35rem; margin: 0 -.35rem; border-radius: .4rem; outline: none; overflow-wrap: anywhere; }
.ee-rich:hover { background: #f8faf8; background: light-dark(#f8faf8, #1e201e); }
.ee-rich:focus { background: #fff; background: light-dark(#fff, #1a2420); box-shadow: 0 0 0 2px #cfe0d3; }
.ee-rich.is-empty::before { content: attr(data-placeholder); color: #98a39b; color: light-dark(#98a39b, #606a62); pointer-events: none; }
.ee-rich p, .ee-rich div { margin: 0 0 .3em; }
.ee-rich h3 { font-size: 1.2em; margin: .2em 0 .3em; }
.ee-rich h4 { font-size: 1.05em; margin: .2em 0 .3em; }
.ee-rich blockquote { margin: .3em 0; padding: .45em .7em; border: 1px solid #9aa59d; border: 1px solid light-dark(#9aa59d, #5d6760); border-radius: .3rem; }
.ee-rich ol, .ee-rich ul { margin: .2em 0 .4em; padding-left: 1.6em; }
.ee-rich table { border-collapse: collapse; margin: .3em 0; }
.ee-rich td, .ee-rich th { min-width: 4em; padding: .25em .5em; border: 1px solid #6c766f; border: 1px solid light-dark(#6c766f, #9ca69f); }
.ee-rich img { max-width: 100%; height: auto; cursor: pointer; border-radius: .15rem; }
.ee-rich img:hover { outline: 2px solid #bcd3c2; outline: 2px solid light-dark(#bcd3c2, #2d3c32); }
.ee-sheet .al-center { text-align: center; } .ee-sheet .al-right { text-align: right; } .ee-sheet .al-justify { text-align: justify; } .ee-sheet .al-left { text-align: left; }
.ee-sheet img.w-25 { width: 25%; } .ee-sheet img.w-33 { width: 33%; } .ee-sheet img.w-50 { width: 50%; } .ee-sheet img.w-66 { width: 66%; } .ee-sheet img.w-75 { width: 75%; } .ee-sheet img.w-100 { width: 100%; }
.ee-image-bar { position: absolute; z-index: 15; display: flex; gap: .1rem; padding: .2rem; background: #fff; background: light-dark(#fff, #1a2420); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 22px #1a2e2226; }
.ee-image-bar .ee-tool { min-width: 0; font-size: .75rem; }

/* tasks */
.ee-tasks { display: flex; flex-direction: column; gap: .9rem; }
.ee-task { position: relative; padding: .6rem .75rem .75rem; border: 1.5px solid #dfe4df; border: 1.5px solid light-dark(#dfe4df, #262926); border-radius: .7rem; transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.ee-task:hover, .ee-task:focus-within { border-color: #b9cdbf; border-color: light-dark(#b9cdbf, #334137); }
.ee-task.is-drop, .ee-add.is-drop { border-color: var(--green); border-style: dashed; box-shadow: 0 0 0 4px #28594418; background: #f5faf6; background: light-dark(#f5faf6, #1d201e); }
.ee-task.is-drop::after { content: 'Engedd el a mintafeladat feltöltéséhez'; position: absolute; inset: 0; display: grid; place-items: center; background: #f5faf6e8; background: light-dark(#f5faf6e8, rgba(29, 32, 30, 0.909804)); color: var(--green); font-weight: 650; border-radius: .6rem; }
.ee-task-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; flex-wrap: wrap; }
.ee-num { font-weight: 750; font-size: 1.02rem; }
.ee-type { padding: .1rem .5rem; border-radius: 1rem; background: #eef1ed; background: light-dark(#eef1ed, #202220); color: #4d5b51; color: light-dark(#4d5b51, #aebeb3); font-size: .6875rem; font-weight: 600; }
.ee-icon { min-width: 2.1rem; min-height: 2.1rem; padding: 0; background: #fff; background: light-dark(#fff, #1a2420); color: var(--green); border: 1px solid #d3ddd5; border: 1px solid light-dark(#d3ddd5, #282e29); border-radius: .5rem; }
.ee-icon.ai { color: var(--ee-ai); border-color: #dcd3f1; border-color: light-dark(#dcd3f1, #2f2a3c); }
.ee-icon:hover { background: var(--mint); }
.ee-icon.ai:hover { background: var(--ee-ai-soft); }
.ee-sheet .ee-icon:not(:disabled):active { background: var(--mint); color: var(--green); }
.ee-sheet .ee-icon.ai:not(:disabled):active { background: var(--ee-ai-soft); color: var(--ee-ai); }
.ee-sheet .ee-more-button:not(:disabled):active { background: var(--mint); color: var(--ink); }
.ee-spacer { flex: 1; }
.ee-points { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem .55rem; border: 1.5px solid #39423c; border: 1.5px solid light-dark(#39423c, #cdd8d1); border-radius: .45rem; background: #fff; background: light-dark(#fff, #1a2420); font-size: .8125rem; }
.ee-points-label { color: var(--muted); font-size: .6875rem; text-transform: lowercase; }
.ee-sheet input.ee-points-input { width: 4.2rem; min-height: 1.9rem; padding: .15rem .35rem; border-radius: .35rem; text-align: right; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ee-more-button { min-width: 1.9rem; min-height: 1.9rem; padding: 0; background: #f1f4f1; background: light-dark(#f1f4f1, #1f211f); color: var(--ink); border-radius: .35rem; font-size: 1rem; }
.ee-more-button:not(:disabled):active { background: var(--mint); color: var(--ink); }
.ee-answer { margin-top: .35rem; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(8mm - 1px), #b9c2bb calc(8mm - 1px), #b9c2bb 8mm); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(8mm - 1px), light-dark(#b9c2bb, #404641) calc(8mm - 1px), light-dark(#b9c2bb, #404641) 8mm); }
.ee-task-foot { display: flex; gap: .35rem; margin-top: .45rem; }
.ee-raw { display: flex; flex-direction: column; gap: .5rem; padding: .5rem; background: #fbf8ef; background: light-dark(#fbf8ef, #211f1a); border: 1px dashed #d6c79c; border: 1px dashed light-dark(#d6c79c, #453b1d); border-radius: .55rem; }
.ee-raw img { display: block; max-width: 100%; max-height: 120mm; margin: 0 auto; object-fit: contain; background: #fff; background: light-dark(#fff, #1a2420); }
.ee-raw-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; }
.ee-button-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.ee-button-row button { min-height: 2.25rem; padding: .4rem .75rem; font-size: .8125rem; }
.ee-source { margin: .4rem 0 0; text-align: center; }
.ee-source img { max-width: 75%; max-height: 90mm; }
.ee-source figcaption { font-size: .6875rem; color: var(--muted); }
.link-button { display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--green); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-button:not(:disabled):active { background: none; color: var(--green-hover); }

/* map */
.ee-map { display: flex; flex-direction: column; gap: .45rem; margin-top: .35rem; }
.ee-map-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem; text-align: center; border: 1.5px dashed #b7c9bb; border: 1.5px dashed light-dark(#b7c9bb, #38443a); border-radius: .55rem; background: #f8fbf8; background: light-dark(#f8fbf8, #1e201e); font-size: .875rem; }
.ee-map-empty p { margin: 0; max-width: 32rem; color: var(--muted); }
.ee-map-stage { position: relative; align-self: center; max-width: 100%; cursor: crosshair; user-select: none; touch-action: none; }
.ee-map-stage img { display: block; max-width: 100%; max-height: 150mm; border: 1px solid #d5dbd6; border: 1px solid light-dark(#d5dbd6, #2a2e2b); }
.ee-marker { position: absolute; transform: translate(-50%, -50%); width: 1.75rem; height: 1.75rem; min-height: 0; min-width: 0; padding: 0; background: #fff; background: light-dark(#fff, #1a2420); color: #111; color: light-dark(#111, #eeeeee); border: 2px solid #111; border: 2px solid light-dark(#111, #eeeeee); border-radius: 50%; font-size: .75rem; font-weight: 750; cursor: grab; box-shadow: 0 1px 3px #0005; }
.ee-marker:not(:disabled):active { background: #fff; background: light-dark(#fff, #1a2420); color: #111; color: light-dark(#111, #eeeeee); cursor: grabbing; }
.ee-map-tools { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ee-markers { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.ee-markers li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ee-marker-number { min-width: 1.6rem; font-weight: 700; }
.ee-sheet .ee-markers input { flex: 1 1 14rem; width: auto; min-height: 2.1rem; padding: .3rem .5rem; font-size: .875rem; }
.ee-markers .quiet { min-height: 2.1rem; padding: .2rem .5rem; }
.ee-map .checkbox { min-height: 0; padding: .2rem 0; margin: 0; font-size: .8125rem; }

/* answer areas: lines, grid, blank (+ figure) */
.ee-space-add { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; opacity: .55; transition: opacity 140ms var(--ease-out); }
.ee-task:hover .ee-space-add, .ee-subtask:hover .ee-space-add, .ee-space-add:focus-within { opacity: 1; }
.ee-space-add-label { font-size: .6875rem; color: var(--muted); }
.ee-space-add .ee-chip-button { min-height: 1.6rem; font-size: .6875rem; }
.ee-space { position: relative; margin-top: .4rem; }
.ee-space-bar, .ee-fig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .3rem; font-size: .75rem; }
.ee-seg { display: inline-flex; border: 1px solid #d3ddd5; border: 1px solid light-dark(#d3ddd5, #282e29); border-radius: .45rem; overflow: hidden; }
.ee-seg-button { min-height: 1.75rem; padding: .1rem .55rem; border: 0; border-radius: 0; background: #fff; background: light-dark(#fff, #1a2420); color: var(--ink); font-size: .6875rem; font-weight: 600; }
.ee-seg-button + .ee-seg-button { border-left: 1px solid #d3ddd5; border-left: 1px solid light-dark(#d3ddd5, #282e29); }
.ee-seg-button.is-on, .ee-seg-button.is-on:not(:disabled):active { background: var(--green); color: #fff; color: light-dark(#fff, #10201a); }
.ee-space-size { color: var(--muted); font-variant-numeric: tabular-nums; }
.ee-sheet select.ee-space-select { width: auto; min-height: 1.75rem; padding: .1rem .4rem; font-size: .6875rem; }
.ee-field-remove.is-visible { opacity: 1; }
.ee-space-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; }
.ee-space.is-blank .ee-space-svg { outline: 1.5px dashed #ccd6ce; outline: 1.5px dashed light-dark(#ccd6ce, #2d342f); outline-offset: -1px; border-radius: .2rem; }
.ee-space.is-grid .ee-space-svg { outline: 1px solid #c7d0c9; outline: 1px solid light-dark(#c7d0c9, #333934); outline-offset: -.5px; }
.ee-space-svg.is-tool { cursor: crosshair; }
.ee-space-svg .ee-rule { stroke: #b9c2bb; stroke: light-dark(#b9c2bb, #404641); stroke-width: .25; }
.ee-space-svg .ee-grid { stroke: #cdd5cf; stroke: light-dark(#cdd5cf, #2f3430); stroke-width: .18; }
.ee-fig-el { cursor: grab; }
.ee-fig-el polyline, .ee-fig-el polygon { fill: none; stroke: #111; stroke: light-dark(#111, #eeeeee); stroke-width: .32; stroke-linejoin: round; stroke-linecap: round; }
.ee-fig-el .dash { stroke-dasharray: 1.3 1; }
.ee-fig-el .dot { fill: #111; fill: light-dark(#111, #eeeeee); }
.ee-fig-el .hit { fill: transparent; stroke: none; }
.ee-fig-el text { font: 600 3.5px system-ui, sans-serif; fill: #111; fill: light-dark(#111, #eeeeee); }
.ee-fig-el text.measure { font-size: 3px; font-weight: 500; fill: #3d4a41; fill: light-dark(#3d4a41, #c0d0c5); }
.ee-fig-el .is-off { opacity: .28; }
.ee-fig-el.is-hidden polyline, .ee-fig-el.is-hidden polygon { stroke: #2f6fd6; stroke: light-dark(#2f6fd6, #6da2f8); stroke-dasharray: 1.6 .9; }
.ee-fig-el.is-hidden .dot, .ee-fig-el.is-hidden text { fill: #2f6fd6; fill: light-dark(#2f6fd6, #6da2f8); }
.ee-fig-el.is-selected polyline, .ee-fig-el.is-selected polygon { stroke-width: .55; }
.ee-fig-el.is-selected .dot { r: 1; }
.ee-fig-start { fill: none; stroke: var(--green); stroke-width: .5; }
.ee-space-resize { height: .85rem; margin-top: .1rem; border-radius: .4rem; cursor: ns-resize; touch-action: none; background: linear-gradient(#9aa79e, #9aa79e) center / 2.25rem 3px no-repeat; background: linear-gradient(light-dark(#9aa79e, #5a665e), light-dark(#9aa79e, #5a665e)) center / 2.25rem 3px no-repeat; opacity: .45; }
.ee-space-resize:hover, .ee-space-resize:focus-visible { opacity: 1; background-color: var(--mint); outline: none; }
.ee-fig-tool { min-height: 1.75rem; padding: .1rem .55rem; background: #fff; background: light-dark(#fff, #1a2420); color: var(--ink); border: 1px solid #d3ddd5; border: 1px solid light-dark(#d3ddd5, #282e29); border-radius: .45rem; font-size: .6875rem; font-weight: 600; }
.ee-fig-tool.is-on, .ee-fig-tool.is-on:not(:disabled):active { background: var(--green); border-color: var(--green); color: #fff; color: light-dark(#fff, #10201a); }
.ee-fig-tools .ee-chip-button { min-height: 1.75rem; font-size: .6875rem; gap: .25rem; }
.ee-mini-check { display: inline-flex; flex-direction: row; align-items: center; gap: .25rem; min-height: 0; margin: 0; font-size: .6875rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.ee-sheet .ee-mini-check input { width: .95rem; height: .95rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--green); }
.ee-fig-hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .6875rem; }
.ee-fig-list { display: grid; gap: .15rem; margin: .35rem 0 0; padding: 0; list-style: none; font-size: .75rem; }
.ee-fig-list li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .15rem .35rem; border-radius: .4rem; }
.ee-fig-list li.is-selected { background: #f1f6f2; background: light-dark(#f1f6f2, #1e211f); }
.ee-fig-kind { width: 1rem; text-align: center; color: var(--muted); }
.ee-sheet input.ee-fig-label { width: 2.6rem; min-height: 1.6rem; padding: .05rem .3rem; font-size: .75rem; text-align: center; }
.ee-fig-desc { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ee-mini { min-width: 1.6rem; min-height: 1.6rem; padding: 0 .3rem; background: #fff; background: light-dark(#fff, #1a2420); color: var(--green); border: 1px solid #d3ddd5; border: 1px solid light-dark(#d3ddd5, #282e29); border-radius: .4rem; font-size: .75rem; }
.ee-mini.danger { color: var(--danger); }
.ee-mini:not(:disabled):active { background: var(--mint); color: var(--green); }

/* parts (a, b, c) */
.ee-subtasks { display: flex; flex-direction: column; gap: .5rem; margin-top: .55rem; }
.ee-subtask { position: relative; padding: .35rem .6rem .5rem 1.6rem; border-left: 3px solid #dfe6e0; border-left: 3px solid light-dark(#dfe6e0, #242825); border-radius: 0 .5rem .5rem 0; background: #fcfdfc; background: light-dark(#fcfdfc, #1e1f1e); }
.ee-subtask:hover, .ee-subtask:focus-within { border-left-color: #a9c4b1; border-left-color: light-dark(#a9c4b1, #3a4d40); }
.ee-subtask.is-drop { outline: 2px dashed var(--green); background: #f5faf6; background: light-dark(#f5faf6, #1d201e); }
.ee-sub-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .1rem; }
.ee-sub-num { position: absolute; left: .45rem; top: .45rem; font-weight: 750; }
.ee-icon.small { min-width: 1.75rem; min-height: 1.75rem; }
.ee-icon.danger { color: var(--danger); border-color: #ecd3d1; border-color: light-dark(#ecd3d1, #372827); }
.ee-sheet .ee-icon.danger:not(:disabled):active { background: #f4e5e4; background: light-dark(#f4e5e4, #2b2222); color: var(--danger); }
.ee-add.ee-sub-add { margin-top: .45rem; padding: .3rem .6rem; gap: .35rem; border-width: 1px; border-radius: .55rem; background: #fafbfa; background: light-dark(#fafbfa, #1f1f1f); }
.ee-add.ee-sub-add button { min-height: 1.9rem; padding: .2rem .6rem; font-size: .75rem; }
.ee-add.ee-sub-add.is-inline { margin-left: 1.6rem; opacity: .7; }
.ee-add.ee-sub-add.is-inline:hover, .ee-add.ee-sub-add.is-inline:focus-within { opacity: 1; }
.ee-sub-add-label { font-size: .75rem; font-weight: 650; color: #4d5b51; color: light-dark(#4d5b51, #aebeb3); }
.ee-sheet select.ee-sub-target { width: auto; min-height: 1.9rem; padding: .15rem .45rem; font-size: .75rem; }
.ee-sub-points { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.ee-sub-point { flex-direction: row; align-items: center; gap: .35rem; margin: 0; font-weight: 650; }
.ee-sub-point input { width: 5rem; }
.ee-space-controls { margin-bottom: .6rem; }
.ee-words { margin: -.25rem 0 .5rem; color: var(--muted); }
.ee-library { display: grid; gap: .3rem; max-height: 55dvh; overflow: auto; margin-top: .5rem; }
.ee-library-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 2.75rem; padding: .45rem .7rem; background: #fff; background: light-dark(#fff, #1a2420); color: var(--ink); border: 1px solid var(--line); border-radius: .6rem; text-align: left; }
.ee-library-item:hover { border-color: #b9cdbf; border-color: light-dark(#b9cdbf, #334137); background: #f8fbf8; background: light-dark(#f8fbf8, #1e201e); }
.ee-library-item:not(:disabled):active { background: var(--mint); color: var(--ink); }
.ee-library-item .hint { font-size: .75rem; color: var(--muted); font-weight: 400; }

/* add row */
.ee-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.1rem; padding: .75rem; border: 1.5px dashed #ccd6ce; border: 1.5px dashed light-dark(#ccd6ce, #2d342f); border-radius: .7rem; }
.ee-add button { min-height: 2.4rem; padding: .45rem .8rem; font-size: .8125rem; }
.ee-add .hint { flex-basis: 100%; margin: 0; color: var(--muted); }

/* dialogs */
.ee-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 1rem; background: #fff; background: light-dark(#fff, #1a2420); color: var(--ink); box-shadow: 0 24px 60px #12271e40; }
.ee-dialog.wide { width: min(56rem, calc(100vw - 2rem)); }
.ee-dialog::backdrop { background: #12271e8a; }
.ee-dialog form, .ee-preview { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem 1.25rem; }
.ee-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.ee-dialog h2 { margin: 0; font-size: 1.15rem; }
.ee-close { min-width: 2.5rem; padding: .3rem; font-size: 1.05rem; }
.ee-dialog fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.ee-dialog legend { margin-bottom: .5rem; font-weight: 650; font-size: .875rem; }
.ee-dialog legend small { font-weight: 400; color: var(--muted); }
.ee-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.ee-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 .75rem; }
.ee-check-grid .checkbox, .ee-material-group .checkbox, .ee-dialog fieldset > .checkbox { min-height: 2.4rem; padding: .35rem 0; margin: 0; }
.ee-steps { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); }
.ee-steps li { padding: .3rem .7rem; border-radius: 1rem; background: #f1f4f1; background: light-dark(#f1f4f1, #1f211f); }
.ee-steps li[aria-current] { background: var(--ee-ai-soft); color: var(--ee-ai); font-weight: 650; }
.ee-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.ee-dialog [data-ee-submit] { background: var(--ee-ai); }
.ee-dialog [data-ee-options] [type=submit], .ee-dialog [data-ee-settings] [type=submit] { background: var(--green); }
.ee-error { margin: 0; padding: .6rem .8rem; background: #fbeceb; background: light-dark(#fbeceb, #271f1e); color: var(--danger); border-radius: .5rem; font-size: .8125rem; }
.ee-material-picker { display: grid; gap: .6rem; max-height: 15rem; overflow: auto; padding: .1rem; }
.ee-material-group strong { font-size: .8125rem; }
.ee-inline-upload summary { cursor: pointer; color: var(--green); font-weight: 600; font-size: .8125rem; margin: .5rem 0; }
.ee-material-form label { margin-bottom: .6rem; }
.ee-material-list { display: grid; gap: .25rem; max-height: 16rem; overflow: auto; }
.ee-material-item { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.ee-material-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .875rem; }
.ee-material-item .quiet { min-height: 2rem; padding: .2rem .5rem; font-size: .75rem; }
.ee-switch-row { margin-bottom: 1rem; padding: .7rem .8rem; background: #f6f8f6; background: light-dark(#f6f8f6, #1f201f); border-radius: .6rem; }
.ee-switch { flex-direction: row; align-items: center; gap: .6rem; margin: 0 0 .25rem; font-size: .875rem; }
.ee-switch input { appearance: none; width: 2.4rem; height: 1.35rem; min-height: 0; padding: 0; border: 0; border-radius: 1rem; background: #c4ccc6; background: light-dark(#c4ccc6, #373c38); position: relative; cursor: pointer; transition: background 140ms var(--ease-out); }
.ee-switch input::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; background: light-dark(#fff, #1a2420); box-shadow: 0 1px 2px #0003; transition: transform 160ms var(--ease-out); }
.ee-switch input:checked { background: var(--green); }
.ee-switch input:checked::after { transform: translateX(1.05rem); }
.ee-switch-row .hint { margin: 0; color: var(--muted); }
.ee-preview-pages { display: grid; gap: 1rem; justify-items: center; max-height: 75dvh; overflow: auto; padding: .5rem; background: var(--ee-desk); border-radius: .6rem; }
.ee-preview-pages img { width: min(100%, 42rem); height: auto; background: #fff; background: light-dark(#fff, #1a2420); box-shadow: 0 2px 10px #0002; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* package form notice */
.ee-import-notice { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .ee-canvas { padding: .5rem 0 2rem; background: transparent; }
  .ee-sheet { min-height: 0; padding: 1rem .85rem 1.5rem; background-image: none; border-radius: .6rem; }
  .ee-head { grid-template-columns: 1fr; }
  .ee-qr { flex-direction: row; max-width: none; text-align: left; }
  .ee-qr img { width: 3.5rem; height: 3.5rem; }
  .ee-ribbon { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .ee-group, .ee-group:last-child { flex-shrink: 0; margin-left: 0; }
  .ee-points-label { display: none; }
  .ee-field-remove { opacity: 1; }
  .ee-space-add { opacity: 1; }
  .ee-subtask { padding-left: 1.4rem; }
  .ee-add.ee-sub-add.is-inline { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ee-task, .ee-switch input, .ee-switch input::after, .ee-space-add { transition: none; } }
@media print { .ee-ribbon, .ee-topbar, .ee-add, .ee-icon, .ee-more-button, .ee-space-bar, .ee-fig-tools, .ee-fig-list, .ee-space-resize, .ee-space-add, .ee-page-gap::after { display: none !important; } .ee-fig-el.is-hidden { display: none; } .ee-canvas { background: none; padding: 0; } .ee-sheet { box-shadow: none; } }