.learning-page { margin: 0; background: #f7faf7; color: #24483d; font: 13px/1.45 system-ui,sans-serif; }
.learning-page header { max-width: 900px; margin: 22px auto 12px; padding: 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.learning-page h1 { font-size: 21px; }
.learning-page main { max-width: 900px; margin: auto; padding: 12px; }
.learning-page.embedded header, .learning-page.embedded #learning-set-control { display: none; }
.learning-page a { color: #26735d; }
.learning-page button, .learning-page select, .learning-page input { font: inherit; color: inherit; border: 1px solid #b6c9bc; border-radius: 5px; padding: 5px 7px; background: #fbfcf9; }
.learning-page button { cursor: pointer; }
.learning-page button:disabled { opacity: .45; cursor: default; }
#learn-start { background: #315d4d; color: white; }
.learning-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0; }
.learning-controls label { display: inline-flex; align-items: center; gap: 4px; }
.learning-controls input[type=number] { width: 52px; }
#learn-connection { max-width: 270px; }
#learn-canvas { display: block; width: 100%; height: auto; background: #fafbf7; border: 1px solid #dce5df; border-radius: 7px; box-sizing: border-box; }
#learn-metrics { font-weight: 600; margin-top: 8px; }
#learn-status { background: #eef1e6; border-radius: 6px; padding: 8px; margin-top: 5px; }
.scope { font-size: 11px; margin: 5px 0 0; color: #5d7066; }
/* The learner is its own document inside the existing movable panel. */
.panel-navigation { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 12px; border-bottom: 1px solid #cddbd2; background: #edf3ef; font: 12px system-ui; }
.panel-tabs { display: flex; align-self: stretch; flex-shrink: 0; gap: 2px; }
.panel-tabs [role=tab] { border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 12px 8px 9px; color: #65776d; background: transparent; font: inherit; cursor: pointer; }
.panel-tabs [role=tab][aria-selected=true] { border-bottom-color: #315d4d; color: #244c3c; background: #f7faf7; font-weight: 600; }
.panel-tabs [role=tab]:focus-visible { outline: 2px solid #5b947b; outline-offset: -3px; }
#tiling-learning-frame { display: block; border: 0; width: 100%; height: min(560px, 74vh); background: #f7faf7; }
#tiling-panel-page[hidden], #learning-panel-page[hidden] { display: none !important; }
#open-marking-lab { color: #315d4d; background: #f2f6ed; border: 1px solid #b5c6b7; border-radius: 5px; padding: 8px 12px; cursor: pointer; }
#tiling-panel-page .toolbar-toggle-row { flex-wrap: wrap; }
#turtle-marking-source { max-width: min(360px, 60vw); font: inherit; }
@media(max-width: 500px) { #learn-connection { max-width: 220px; } .panel-navigation { gap: 5px; } }

#learn-metadata { margin-top: 5px; color: #365c4d; font-variant-numeric: tabular-nums; }
#learn-sync { margin-top: 4px; color: #537064; font-size: 12px; }

.tile-set-options { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-width: 0; }
.tile-set-options label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.tile-set-options input[type=radio] { margin: 0; padding: 0; accent-color: #315d4d; }
.tile-set-options small { font-size: inherit; color: #5d7066; }
.panel-navigation .tile-set-options { margin-left: auto; padding: 7px 0; gap: 7px 10px; }
@media(max-width: 500px) {
  .panel-navigation { gap: 8px; padding: 0 8px; font-size: 11px; }
  .panel-tabs [role=tab] { padding-left: 6px; padding-right: 6px; }
  .panel-navigation .tile-set-options { gap: 7px; }
}

.mark-extension-control.is-disabled { opacity: .45; }
.mark-extension-control input:disabled { cursor: default; }