/* Manabi Kōbō Language IDE v3.0.0
   Page-specific presentation only. Shared workbench behavior remains in workbench.css/workbench-core.js. */
.ide-hero{position:relative;min-height:145px;border:1px solid var(--mk-line);border-radius:16px;overflow:hidden;background:var(--mk-surface);display:flex;align-items:center;padding:22px 250px 22px 28px;margin-bottom:10px;box-shadow:var(--mk-shadow)}
.ide-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.23}
.ide-hero>div{position:relative;z-index:2}
.ide-hero h1{margin:3px 0;font-size:2rem}
.ide-hero p{max-width:760px;color:var(--mk-muted);margin:0}
.ide-profile{position:absolute!important;right:18px;top:18px;display:flex;align-items:center;gap:9px;background:rgba(255,253,250,.92);border:1px solid var(--mk-line);border-radius:12px;padding:9px 12px}
.ide-profile span{display:flex;flex-direction:column}
.ide-profile small{color:var(--mk-muted)}
.ide-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mk-red);color:#fff;font-size:.7rem;font-weight:900}
.ide-commandbar{padding:10px 13px;background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ide-saved{color:var(--mk-success);font-size:.75rem}
.ide-actions{display:flex;gap:6px;flex-wrap:wrap}
.ide-actions button{border:1px solid var(--mk-line);background:var(--mk-surface-alt);color:var(--mk-ink);padding:8px 10px;border-radius:8px;font-weight:800;cursor:pointer}
.ide-actions button:hover{filter:brightness(.98);transform:translateY(-1px)}
.ide-actions .ide-primary{background:var(--mk-red);color:#fff;border-color:var(--mk-red)}
.ide-project-actions{display:block;margin:8px 0}
.ide-project-actions button{width:100%}
.ide-project-pane{flex-basis:220px;height:590px}
.ide-editor-tile{flex-basis:calc(62% - 120px);height:590px}
.ide-compiler{flex-basis:calc(38% - 128px);height:590px}
.ide-runtime{flex-basis:65%;height:350px}
.ide-vocab{flex-basis:33%;height:350px}
.ide-tutorials{flex-basis:65%;height:300px}
.ide-tests{flex-basis:33%;height:300px}
.ide-project-pane [data-mk-body]{padding:12px}
.ide-project{display:block;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:transparent;padding:9px 7px;cursor:pointer}
.ide-project.active{border-left-color:var(--mk-red);background:var(--mk-surface-alt)}
.ide-project b,.ide-project small,.ide-shortcuts>*{display:block}
.ide-project small{color:var(--mk-muted);margin-top:2px}
.ide-shortcuts{border-top:1px solid var(--mk-line);margin-top:12px;padding-top:10px}
.ide-tabs{display:flex;gap:5px;border-bottom:1px solid var(--mk-line);padding:6px;overflow:auto}
.ide-tabs button{white-space:nowrap;border:1px solid var(--mk-line);background:var(--mk-surface-alt);padding:5px 8px;border-radius:6px;font:11px var(--mk-font-code);cursor:pointer}
.ide-tabs button.active{color:var(--mk-red);font-weight:900}
.ide-code{box-sizing:border-box;width:100%;height:505px;resize:none;border:0;outline:0;padding:15px;background:var(--surface);color:var(--ink);font:13px/1.7 var(--mk-font-code);tab-size:4}
.ide-compile-status{padding:12px;border-radius:8px;background:#eaf6ee;color:var(--mk-success);font-weight:900;margin:8px}
.ide-compile-status.bad{background:#fbe7e4;color:#a72b1a}
.ide-diagnostic{display:block;width:calc(100% - 16px);text-align:left;border:0;border-radius:9px;margin:8px;padding:10px;cursor:pointer}
.ide-diagnostic b,.ide-diagnostic small{display:block}
.ide-diagnostic small{margin-top:4px}
.ide-diagnostic.error{background:#fbe7e4;color:#a72b1a}
.ide-diagnostic.warning{background:#fff0c9;color:#805300}
.ide-diagnostic.info{background:#eaf2fb;color:#285b8d}
.ide-diagnostic.success{background:#eaf6ee;color:var(--mk-success)}
.ide-empty{padding:18px;color:var(--mk-muted)}
.ide-runtime-tabs{display:flex;gap:12px;padding:8px;border-bottom:1px solid var(--mk-line);font:11px var(--mk-font-code);overflow:auto}
.ide-runtime-tabs b{color:var(--mk-red)}
.ide-dialog{position:relative;padding:10px 12px;margin:8px;border-left:4px solid #7aa5ce}
.ide-dialog.staff,.ide-dialog.engineer{border-color:#70ad78}
.ide-dialog p{font-family:var(--mk-font-jp);font-size:1rem;margin:5px 0}
.ide-dialog small{font-family:var(--mk-font-code);color:var(--mk-muted)}
.ide-vocab table{width:100%;border-collapse:collapse}
.ide-vocab td{padding:7px;border-bottom:1px solid var(--mk-line)}
.ide-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.ide-guide-grid section{background:var(--mk-surface-alt);border:1px solid var(--mk-line);border-radius:9px;padding:10px}
.ide-guide-grid p{margin:5px 0;color:var(--mk-muted);font-size:.78rem}
.ide-tutorials details{margin:4px 8px;padding:8px;border:1px solid var(--mk-line);border-radius:8px}
.ide-tutorials pre{overflow:auto;background:var(--surface2);padding:8px}
.ide-tutorial-roadmap{display:flex;flex-direction:column;gap:4px;margin:8px;padding:8px;border-left:3px solid var(--mk-red);background:var(--mk-surface-alt)}
.ide-research-note{background:var(--mk-surface-alt);padding:9px;border-radius:8px;color:var(--mk-muted);font-size:.78rem}
.ide-statusbar{display:flex;justify-content:space-between;padding:7px 4px;color:var(--mk-muted);font:11px var(--mk-font-code)}
[data-mk-toolbar] span[title]{cursor:help}
@media(max-width:1050px){.ide-project-pane{flex-basis:100%;height:auto}.ide-editor-tile{flex-basis:64%}.ide-compiler{flex-basis:34%}}
@media(max-width:900px){.ide-hero{padding:18px}.ide-profile{display:none}.ide-commandbar{align-items:flex-start;flex-direction:column}.ide-workbench{display:grid!important;grid-template-columns:1fr}.ide-tile{width:100%!important;height:auto!important;flex-basis:auto!important}.ide-code{height:430px}.ide-guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ide-guide-grid{grid-template-columns:1fr}.ide-statusbar span:last-child{display:none}}

/* MKPL v0.3 grammar compiler reward layer — semantic roles mirror Tsundoku. */
.ide-runtime{height:560px}
.ide-compiler{height:590px}
.ide-runtime-success{--grammar-subject:#6f42c1;--grammar-object:#1677c8;--grammar-verb:#c9362b;--grammar-particle:#d36b18;--grammar-technical:#008a83;--grammar-connector:#56606b;--grammar-adjective:#2f8f46;--grammar-time:#9a6a16}
.ide-runtime-sentences{max-height:280px;overflow:auto;border-bottom:1px solid var(--mk-line)}
.ide-dialog{cursor:pointer;border-radius:8px;transition:.15s}
.ide-dialog:hover,.ide-dialog.active{background:color-mix(in srgb,var(--mk-red) 7%,var(--mk-surface-alt))}
.ide-colored-japanese{line-height:2!important}
.ide-token{position:relative;border-radius:4px;transition:background .12s,box-shadow .12s;color:var(--mk-ink)}
.ide-token[data-role=subject]{color:var(--grammar-subject)}
.ide-token[data-role=object]{color:var(--grammar-object)}
.ide-token[data-role=verb]{color:var(--grammar-verb)}
.ide-token[data-role=particle]{color:var(--grammar-particle)}
.ide-token[data-role=technical]{color:var(--grammar-technical)}
.ide-token[data-role=connector]{color:var(--grammar-connector)}
.ide-token[data-role=adjective]{color:var(--grammar-adjective)}
.ide-token[data-role=time]{color:var(--grammar-time)}
.ide-token[data-role=expression]{color:var(--grammar-subject)}
.ide-token.is-related{background:color-mix(in srgb,currentColor 13%,transparent);box-shadow:0 2px 0 currentColor}
.ide-token ruby rt{font-size:.55em;color:var(--mk-muted);font-weight:700}
.ide-runtime-translation{margin-top:5px;font-size:.82rem;line-height:1.7}
.ide-grammar-reward{display:grid;grid-template-columns:.85fr 1.5fr;min-height:230px}
.ide-grammar-legend,.ide-sentence-insight{padding:13px 15px}
.ide-grammar-legend{border-right:1px solid var(--mk-line)}
.ide-legend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin-top:10px}
.ide-legend-grid>span{font-size:.7rem;font-weight:800;display:flex;align-items:center;gap:6px}
.ide-legend-grid>span::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--mk-muted)}
.ide-legend-grid [data-role=subject]::before{background:var(--grammar-subject)}
.ide-legend-grid [data-role=object]::before{background:var(--grammar-object)}
.ide-legend-grid [data-role=verb]::before{background:var(--grammar-verb)}
.ide-legend-grid [data-role=particle]::before{background:var(--grammar-particle)}
.ide-legend-grid [data-role=technical]::before{background:var(--grammar-technical)}
.ide-legend-grid [data-role=connector]::before{background:var(--grammar-connector)}
.ide-legend-grid [data-role=adjective]::before{background:var(--grammar-adjective)}
.ide-legend-grid [data-role=time]::before{background:var(--grammar-time)}
.ide-insight-main{font-family:var(--mk-font-jp);font-size:1.08rem;line-height:1.8;margin:8px 0}
.ide-role-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}.ide-role-chips span{padding:4px 7px;border:1px solid var(--mk-line);border-radius:7px;background:var(--mk-surface-alt);font-size:.63rem}
.ide-token-insight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.ide-token-insight>div{display:flex;flex-direction:column;padding:6px 8px;border-left:2px solid var(--mk-line);background:var(--mk-surface-alt)}.ide-token-insight small,.ide-token-insight span{font-size:.67rem;color:var(--mk-muted)}
.ide-sentence-insight>p{font-size:.72rem;color:var(--mk-muted)}
.ide-runtime-locked{margin:14px;padding:18px;border:1px dashed var(--mk-line);border-radius:10px;background:var(--mk-surface-alt);display:flex;flex-direction:column;gap:5px;color:var(--mk-muted)}.ide-runtime-locked b{color:var(--mk-ink)}
.ide-diagnostic{height:auto}
.ide-diagnostic-detail{font-size:.72rem;margin-top:6px;line-height:1.45}
.ide-diagnostic-pattern{margin-top:8px;padding:7px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:7px;background:color-mix(in srgb,var(--mk-surface) 75%,transparent);display:flex;flex-direction:column;gap:3px}.ide-diagnostic-pattern code{white-space:normal;font-size:.7rem}.ide-diagnostic-pattern small{opacity:.85}
@media(max-width:900px){.ide-runtime{height:auto}.ide-grammar-reward{grid-template-columns:1fr}.ide-grammar-legend{border-right:0;border-bottom:1px solid var(--mk-line)}}
@media(max-width:600px){.ide-token-insight{grid-template-columns:1fr}.ide-legend-grid{grid-template-columns:1fr 1fr}}

/* MKPL v3.1 project vocabulary/module refinements */
.ide-small-action{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin:8px 0;border:1px solid var(--mk-line);background:var(--mk-surface-alt);
  color:var(--mk-ink);padding:8px 10px;border-radius:8px;font-weight:800;cursor:pointer;
  font-family:inherit;
}
.ide-small-action:hover{filter:brightness(.98);transform:translateY(-1px)}
.ide-small-action:focus-visible{outline:2px solid var(--mk-red);outline-offset:2px}
.ide-vocab .ide-token-reference{width:100%;border-collapse:collapse}
.ide-vocab .ide-vocab-module th{text-align:left;padding:8px 7px;background:var(--mk-surface-alt);border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);color:var(--mk-ink)}
.ide-vocab .ide-vocab-module:first-child th{border-top:0}
.ide-vocab .ide-vocab-module small{margin-left:6px;color:var(--mk-muted);font-weight:600}
.ide-vocab .ide-vocab-empty{padding:10px;color:var(--mk-muted);font-size:.75rem}
.ide-vocab td code{white-space:normal;overflow-wrap:anywhere}