/* Section training: the approved Source / Agent Extraction / Target Extraction workspace. */
@media screen {
  #template-studio.studio-training-mode {
    background:var(--surface-soft,#f9fbf9);
    color:var(--ink,#25332c);
  }

  #template-studio.studio-training-mode .studio-layout {
    display:block;
    min-height:calc(100dvh - 68px);
  }

  #template-studio.studio-training-mode .studio-main {
    box-sizing:border-box;
    width:100%;
    max-width:1500px;
    min-width:0;
    margin:0 auto;
    padding:28px 40px 32px;
  }

  #template-studio.studio-training-mode .studio-library,
  #template-studio.studio-training-mode .studio-tabs,
  #template-studio.studio-training-mode .training-legacy {
    display:none!important;
  }

  #template-studio.studio-training-mode #st-training-editor {
    min-width:0;
  }

  #template-studio.studio-training-mode #st-status:empty {
    display:none;
  }

  #template-studio #section-training {
    --training-panel:#1c221e;
    --training-panel-line:#657560;
    --training-panel-ink:#edf1ec;
    --training-panel-muted:#bac5b7;
    --training-rail:#2b332d;
    --training-accent:#3c5535;
    --training-focus:#c6e987;
    min-width:0;
    font-family:var(--ui-font,"Segoe UI Variable","Segoe UI",Arial,sans-serif);
  }

  #template-studio #section-training [hidden] {
    display:none!important;
  }

  #template-studio #section-training .training-editor-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
  }

  #template-studio #section-training .training-editor-header h1 {
    margin:0;
    font-size:28px;
    line-height:1.25;
    font-weight:650;
    letter-spacing:-.5px;
    overflow-wrap:anywhere;
    scroll-margin-top:110px;
  }

  #template-studio #section-training .training-editor-header h1:focus {
    outline:none;
  }

  #template-studio #section-training button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 16px;
    border:1px solid var(--line-strong,#b7c7ba);
    border-radius:6px;
    background:var(--surface,#fff);
    color:var(--ink,#25332c);
    font:600 13px/1.4 var(--ui-font,"Segoe UI",Arial,sans-serif);
    text-align:center;
    cursor:pointer;
  }

  #template-studio #section-training button:hover:not(:disabled) {
    background:var(--surface-muted,#eff3ef);
  }

  #template-studio #section-training button:disabled {
    opacity:.5;
    cursor:not-allowed;
  }

  #template-studio #section-training button svg {
    width:17px;
    height:17px;
    flex:none;
  }

  #template-studio #section-training .st-primary,
  #template-studio #section-training .training-primary,
  #template-studio #section-training .training-source-header button {
    background:var(--training-accent);
    color:#fff;
    border-color:var(--training-accent);
  }

  #template-studio #section-training .st-primary:hover:not(:disabled),
  #template-studio #section-training .training-primary:hover:not(:disabled),
  #template-studio #section-training .training-source-header button:hover:not(:disabled) {
    background:#2c4226;
    border-color:#2c4226;
  }

  #template-studio #section-training :focus-visible {
    outline:3px solid var(--focus,#536f40);
    outline-offset:3px;
  }

  #template-studio #section-training .training-fields {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    align-items:start;
    gap:24px;
    margin-bottom:26px;
  }

  #template-studio #section-training .training-fields>* {
    min-width:0;
  }

  #template-studio #section-training .training-fields label {
    display:block;
    margin:0;
    color:var(--ink,#25332c);
    font-size:13px;
    font-weight:600;
    line-height:1.5;
  }

  #template-studio #section-training .training-fields input,
  #template-studio #section-training .training-fields textarea {
    display:block;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    margin:8px 0 0;
    padding:11px 13px;
    border:1px solid var(--line-strong,#b7c7ba);
    border-radius:6px;
    background:var(--surface,#fff);
    color:var(--ink,#25332c);
    font:400 15px/1.55 var(--ui-font,"Segoe UI",Arial,sans-serif);
  }

  #template-studio #section-training .training-fields input {
    min-height:46px;
  }

  #template-studio #section-training .training-fields textarea {
    height:78px;
    min-height:78px;
    resize:vertical;
  }

  #template-studio #section-training .training-fields ::placeholder {
    color:var(--ink-faint,#68796e);
    opacity:1;
  }

  #template-studio #section-training .training-workspace {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    align-items:stretch;
    gap:24px;
    min-height:560px;
  }

  #template-studio #section-training .training-source-column {
    display:grid;
    grid-template-rows:auto auto minmax(360px,1fr) auto;
    gap:12px;
    min-width:0;
  }

  #template-studio #section-training .training-source-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
  }

  #template-studio #section-training .training-source-header h2 {
    margin:0;
    color:var(--ink,#25332c);
    font-size:18px;
    line-height:1.35;
    font-weight:650;
  }

  #template-studio #section-training .training-source-tabs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    padding:4px;
    border-radius:7px;
    background:var(--training-rail);
  }

  #template-studio #section-training .training-source-tabs button {
    width:100%;
    min-width:0;
    min-height:42px;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    color:var(--training-panel-ink);
    font-weight:400;
  }

  #template-studio #section-training .training-source-tabs button:hover:not(:disabled) {
    background:#354137;
  }

  #template-studio #section-training .training-source-tabs button[aria-selected=true] {
    background:var(--training-panel);
    color:#fff;
    font-weight:600;
  }

  #template-studio #section-training .training-source-tabs button:focus-visible {
    outline:2px solid var(--training-focus);
    outline-offset:-3px;
  }

  #template-studio #section-training .training-source-panel,
  #template-studio #section-training .training-result-panel {
    display:flex;
    flex-direction:column;
    gap:12px;
    box-sizing:border-box;
    min-width:0;
    min-height:0;
    padding:20px;
    border:1px solid var(--training-panel-line);
    border-radius:8px;
    background:var(--training-panel);
    color:var(--training-panel-ink);
    color-scheme:dark;
  }

  #template-studio #section-training .training-source-panel {
    position:relative;
  }

  #template-studio #section-training .training-result-panel {
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--ink,#25332c);
    color-scheme:inherit;
  }

  #template-studio #section-training .training-source-panel:focus-within,
  #template-studio #section-training .training-result-panel:focus-within {
    border-color:var(--training-focus);
  }

  #template-studio #section-training .training-source-panel[data-dragging=true] {
    border-color:var(--training-focus);
    outline:2px dashed var(--training-focus);
    outline-offset:3px;
  }

  #template-studio #section-training .training-source-panel h2,
  #template-studio #section-training .training-source-panel h3,
  #template-studio #section-training .training-result-panel h2 {
    margin:0;
    color:var(--training-panel-ink);
    font-size:18px;
    line-height:1.35;
    font-weight:600;
  }

  #template-studio #section-training .training-result-panel h2 label {
    margin:0;
    color:inherit;
    font:inherit;
  }

  #template-studio #section-training .training-result-panel h2 {
    color:var(--ink,#25332c);
  }

  #template-studio #section-training .training-source-panel p,
  #template-studio #section-training .training-result-panel p,
  #template-studio #section-training .training-source-panel small,
  #template-studio #section-training .training-result-panel small {
    max-width:none;
    margin:0;
    color:var(--training-panel-muted);
    font-size:13px;
    line-height:1.6;
    overflow-wrap:anywhere;
  }

  #template-studio #section-training .training-source-panel textarea,
  #template-studio #section-training .training-result-panel textarea {
    display:block;
    flex:1 1 auto;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    min-height:150px;
    margin:0;
    padding:0;
    border:0;
    border-radius:2px;
    background:var(--training-panel);
    color:var(--training-panel-ink);
    font:400 15px/1.7 var(--ui-font,"Segoe UI",Arial,sans-serif);
    resize:none;
    tab-size:4;
  }

  #template-studio #section-training .training-source-panel textarea {
    min-height:280px;
  }

  #template-studio #section-training .training-result-panel textarea {
    padding:20px;
    border:1px solid var(--training-panel-line);
    border-radius:8px;
    color-scheme:dark;
  }

  #template-studio #section-training .training-result-panel textarea:focus {
    border-color:var(--training-focus);
  }

  #template-studio #section-training .training-source-panel textarea::placeholder,
  #template-studio #section-training .training-result-panel textarea::placeholder {
    color:var(--training-panel-muted);
    opacity:1;
  }

  #template-studio #section-training .training-source-panel textarea:focus-visible,
  #template-studio #section-training .training-result-panel textarea:focus-visible {
    outline:2px solid var(--training-focus);
    outline-offset:6px;
  }

  #template-studio #section-training .training-image-preview {
    position:absolute;
    inset:20px;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-width:0;
    min-height:0;
    margin:0;
    text-align:center;
  }

  #template-studio #section-training .training-image-preview img {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    border-radius:3px;
  }

  #template-studio #section-training .training-image-preview figcaption {
    width:100%;
    color:var(--training-panel-muted);
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }

  #template-studio #section-training .training-image-preview svg {
    width:36px;
    height:36px;
    color:var(--training-panel-muted);
  }

  #template-studio #section-training .training-source-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    min-height:44px;
  }

  #template-studio #section-training .training-source-actions [role=status],
  #template-studio #section-training .training-source-actions p,
  #template-studio #section-training #training-source-note {
    flex:1 1 180px;
    min-width:0;
    margin:0;
    color:var(--ink-soft,#5f6f65);
    font-size:13px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }

  #template-studio #section-training .training-saved-examples {
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--line,#d6dfd8);
    color:var(--ink-soft,#5f6f65);
    font-size:13px;
  }

  #template-studio #section-training .training-saved-examples summary {
    width:fit-content;
    padding:6px 0;
    color:var(--ink,#25332c);
    font-weight:600;
    cursor:pointer;
  }

  #template-studio #section-training .training-saved-examples label {
    max-width:440px;
    margin:14px 0 10px;
  }

  #template-studio #section-training .training-saved-examples select {
    margin-top:6px;
  }

  #template-studio #section-training .training-saved-examples p {
    margin:10px 0 0;
  }

  #template-studio #section-training .training-results {
    display:grid;
    grid-template-rows:repeat(2,minmax(252px,1fr));
    gap:20px;
    min-width:0;
  }

  #template-studio #section-training .training-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:24px;
    padding:20px 0 0;
    border-top:1px solid var(--line,#d6dfd8);
  }

  #template-studio #section-training .training-footer p,
  #template-studio #section-training .training-footer [role=status] {
    flex:1;
    min-width:0;
    max-width:72ch;
    margin:0;
    color:var(--ink-soft,#5f6f65);
    font-size:13px;
    line-height:1.6;
    overflow-wrap:anywhere;
  }

  #template-studio #section-training .training-footer button {
    flex:none;
    min-width:160px;
  }

  #template-studio #section-training [data-state=error],
  #template-studio #section-training [data-status=error] {
    color:#9d362b;
  }

  html[data-appearance=dark] #template-studio #section-training [data-state=error],
  html[data-appearance=dark] #template-studio #section-training [data-status=error] {
    color:#ffb7b0;
  }

  #template-studio.studio-training-mode #st-training-overview {
    margin-top:28px;
  }

  #template-studio.studio-training-mode #st-training-overview h2 {
    font-size:20px;
  }

  #template-studio.studio-training-mode .studio-training-row {
    padding:20px 0;
    gap:20px;
  }

  @media (min-width:1440px) and (min-height:1000px) {
    #template-studio #section-training .training-workspace {
      min-height:600px;
    }
  }

  @media (max-width:1000px) {
    #template-studio.studio-training-mode .studio-main {
      padding:24px;
    }

    #template-studio #section-training .training-fields,
    #template-studio #section-training .training-workspace {
      gap:18px;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }

    #template-studio #section-training .training-source-panel,
    #template-studio #section-training .training-result-panel textarea {
      padding:16px;
    }

    #template-studio #section-training .training-image-preview {
      inset:16px;
    }
  }

  @media (max-width:760px) {
    #template-studio.studio-training-mode .studio-main {
      padding:24px 18px 32px;
    }

    #template-studio #section-training .training-editor-header {
      align-items:flex-start;
      flex-direction:column;
      gap:14px;
      margin-bottom:22px;
    }

    #template-studio #section-training .training-editor-header h1 {
      font-size:25px;
    }

    #template-studio #section-training .training-fields,
    #template-studio #section-training .training-workspace {
      grid-template-columns:minmax(0,1fr);
    }

    #template-studio #section-training .training-fields {
      gap:18px;
      margin-bottom:24px;
    }

    #template-studio #section-training .training-workspace {
      gap:24px;
      min-height:0;
    }

    #template-studio #section-training .training-source-column {
      grid-template-rows:auto auto minmax(320px,auto) auto;
    }

    #template-studio #section-training .training-source-panel textarea {
      min-height:280px;
    }

    #template-studio #section-training .training-results {
      grid-template-rows:repeat(2,minmax(260px,auto));
      gap:18px;
    }

    #template-studio #section-training .training-result-panel textarea {
      min-height:180px;
    }

    #template-studio #section-training .training-footer {
      flex-direction:column;
      align-items:stretch;
      gap:16px;
      margin-top:24px;
    }

    #template-studio #section-training .training-footer button {
      width:100%;
    }

    #template-studio #section-training .training-fields input,
    #template-studio #section-training .training-fields textarea,
    #template-studio #section-training .training-source-panel textarea,
    #template-studio #section-training .training-result-panel textarea {
      font-size:16px;
    }
  }

  @media (prefers-reduced-motion:no-preference) {
    #template-studio #section-training button {
      transition:background-color 120ms ease,border-color 120ms ease;
    }
  }
}
