/* editor.css — Anchor Editor. Layout is a fixed topbar over three stacked bands: sentence info, the AMR graph (the only growing region), and the UD token strip. The link overlay is absolutely positioned across all of them. */ * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0f2f5; margin: 0; color: #1a1a1a; overflow: hidden; } /* ── topbar ── */ #topbar { background: #1e293b; color: #e2e8f0; padding: 8px 16px; display: flex; align-items: center; gap: 10px; height: 46px; flex-shrink: 0; } #topbar h1 { font-size: 0.92rem; margin: 0; font-weight: 600; white-space: nowrap; } #dataset-label { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; } #topbar select { flex: 1; max-width: 400px; font-size: 0.82rem; padding: 4px 8px; border-radius: 5px; border: 1px solid #475569; background: #334155; color: #e2e8f0; } .nav-btn { padding: 4px 12px; border-radius: 5px; border: 1px solid #475569; background: #334155; color: #e2e8f0; cursor: pointer; font-size: 0.82rem; } .nav-btn:hover:not(:disabled) { background: #475569; } .nav-btn:disabled { opacity: 0.4; cursor: default; } .chk-label { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: #94a3b8; white-space: nowrap; cursor: pointer; } #save-btn { margin-left: auto; padding: 5px 16px; background: #059669; color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } #save-btn:hover { background: #047857; } #save-status { font-size: 0.72rem; color: #94a3b8; min-width: 55px; } #sent-counter { font-size: 0.8rem; color: #cbd5e1; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } /* download menu */ #dl-menu { position: relative; } #dl-menu summary { list-style: none; user-select: none; } #dl-menu summary::-webkit-details-marker { display: none; } #dl-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; background: #334155; border: 1px solid #475569; border-radius: 6px; display: flex; flex-direction: column; min-width: 150px; overflow: hidden; } #dl-items a { color: #e2e8f0; font-size: 0.78rem; text-decoration: none; padding: 7px 12px; } #dl-items a:hover { background: #475569; } /* ── main layout ── */ #main { display: flex; height: calc(100vh - 46px); overflow: hidden; } /* ── work area ── */ #work-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; } /* ── anchor link overlay (token box -> AMR node) ── */ #link-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; overflow: hidden; } #link-layer path { pointer-events: stroke; cursor: pointer; } #link-toggle { font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: #64748b; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } #label-toggle { font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: #64748b; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } /* ── info band ── */ #info-band { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 10px 16px 10px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } #sentence { font-size: 1rem; font-style: italic; color: #334155; line-height: 1.4; } /* ── prefill bar ── */ #prefill-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #prefill-hdr { font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; } #prefill-bar select { font-size: 0.78rem; padding: 3px 6px; border-radius: 5px; border: 1px solid #cbd5e1; background: #fff; color: #1e293b; } #prefill-bar .nav-btn { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } #prefill-bar .nav-btn:hover { background: #dbeafe; } #prefill-info { font-size: 0.74rem; color: #64748b; } #prefill-proposals { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; } .proposal { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed #93c5fd; border-radius: 7px; padding: 2px 8px; background: #eff6ff; font-size: 0.76rem; } .proposal.conflict { border-color: #f59e0b; background: #fffbeb; } .proposal .p-var { font-family: monospace; font-weight: 700; color: #1e40af; } .proposal .p-arrow { color: #94a3b8; } .proposal .p-form { font-weight: 600; color: #1e293b; } .proposal .p-accept { cursor: pointer; color: #059669; font-weight: 700; padding: 0 2px; } .proposal .p-accept:hover { color: #047857; } /* penman */ #penman-details summary { font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 5px; } #penman-details summary::-webkit-details-marker { display: none; } #penman-details summary::before { content: "▶"; font-size: 0.6rem; color: #94a3b8; transition: transform .12s; display: inline-block; } #penman-details[open] summary::before { transform: rotate(90deg); } pre#penman-code { margin: 6px 0 0; padding: 8px 10px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-size: 0.76rem; line-height: 1.55; overflow: auto; white-space: pre; max-height: 150px; } .pm-var { color: #93c5fd; font-weight: 600; } .pm-role { color: #c084fc; } .pm-concept { color: #86efac; } .pm-str { color: #fbbf24; } .pm-slash { color: #64748b; } /* token strip */ #token-band { flex-shrink: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 8px 16px 10px; max-height: 30vh; overflow-y: auto; } #token-hdr { font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } #tokens { display: flex; flex-wrap: wrap; gap: 5px; } .token { display: flex; flex-direction: column; align-items: center; gap: 0; border: 1.5px solid #e2e8f0; border-radius: 7px; padding: 2px 9px; cursor: pointer; background: #fff; transition: all .1s; min-width: 44px; } .token:hover { border-color: #93c5fd; background: #eff6ff; } .token.assigned { border-color: #3b82f6; background: #dbeafe; } .token.sel-target { border-color: #f59e0b; background: #fef3c7; box-shadow: 0 0 0 2px #fde68a; } .token.pending { border-color: #f59e0b; border-style: dashed; background: #fffbeb; box-shadow: 0 0 0 2px #fde68a; } .tok-form { font-size: 0.82rem; font-weight: 600; color: #1e293b; } .tok-id { font-size: 0.56rem; color: #94a3b8; } .tok-upos { font-size: 0.56rem; color: #64748b; font-style: italic; } .tok-vars { font-size: 0.62rem; color: #1d4ed8; margin-top: 1px; font-family: monospace; } /* ── graph area ── */ #graph-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } #amr-panel { flex: 1; background: #fff; display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid #e2e8f0; } .graph-panel-hdr { font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 7px 12px 5px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } #amr-zoom { margin-left: auto; display: inline-flex; gap: 3px; } #amr-zoom button { font: inherit; font-size: 0.7rem; line-height: 1; padding: 2px 7px; border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 4px; cursor: pointer; text-transform: none; } #amr-zoom button:hover { background: #eff6ff; border-color: #93c5fd; } #amr-zoom #amr-zoom-lvl { min-width: 42px; font-variant-numeric: tabular-nums; } .graph-content { flex: 1; overflow: auto; padding: 8px; } .graph-content svg { display: block; } /* collapsible UD panel */ #ud-details { flex-shrink: 0; background: #fff; border-top: 1px solid #e2e8f0; } #ud-details summary { font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 7px 12px; background: #f8fafc; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #e2e8f0; } #ud-details summary::-webkit-details-marker { display: none; } #ud-details summary::before { content: "▶"; font-size: 0.6rem; color: #94a3b8; transition: transform .12s; display: inline-block; } #ud-details[open] summary::before { transform: rotate(90deg); } #ud-details[open] { max-height: 42vh; display: flex; flex-direction: column; } #ud-content { overflow: auto; padding: 8px; flex: 1; } .graph-loading { color: #94a3b8; font-size: 0.8rem; font-style: italic; padding: 20px 12px; } .graph-err { color: #dc2626; font-size: 0.78rem; padding: 12px; } /* ── SVG node interactivity ── */ [data-amr-var] { cursor: pointer; } [data-amr-var] ellipse, [data-amr-var] polygon { transition: fill .12s, stroke .12s; } [data-amr-var]:hover ellipse, [data-amr-var]:hover polygon { fill: #eff6ff !important; stroke: #93c5fd !important; } [data-amr-var].amr-anchored ellipse, [data-amr-var].amr-anchored polygon { fill: #dcfce7 !important; stroke: #16a34a !important; } [data-amr-var].amr-selected ellipse, [data-amr-var].amr-selected polygon { fill: #dbeafe !important; stroke: #3b82f6 !important; stroke-width: 2.5 !important; } [data-ud-id] { cursor: pointer; } [data-ud-id] ellipse, [data-ud-id] polygon { transition: fill .12s, stroke .12s; } [data-ud-id]:hover ellipse, [data-ud-id]:hover polygon { fill: #eff6ff !important; stroke: #93c5fd !important; } [data-ud-id].ud-assigned ellipse, [data-ud-id].ud-assigned polygon { fill: #dbeafe !important; stroke: #3b82f6 !important; } [data-ud-id].ud-sel-target ellipse, [data-ud-id].ud-sel-target polygon { fill: #fef3c7 !important; stroke: #f59e0b !important; stroke-width: 2.5 !important; }