/* learn_addon_v11.css */

/* ── PANEL — transparenter Container, 4 Cards ──────────────────────────── */
#panel_learn {
    position:        fixed;
    top:             50%;
    left:            8px;
    transform:       translateY(-50%);
    z-index:         99;

    width:           min(40vw, 140px);
    max-height:      90vh;
    overflow-y:      auto;
    overflow-x:      hidden;

    background:      transparent;
    border:          none;
    box-shadow:      none;

    display:         none;
    flex-direction:  column;
    gap:             6px;
    padding:         0;

    cursor:          default;
    user-select:     none;
    touch-action:    none;
}

#panel_learn.visible {
    display: flex;
}

#panel_learn.dragging {
    cursor: grabbing;
    opacity: 0.92;
}

#panel_learn::-webkit-scrollbar { width: 3px; }
#panel_learn::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── CARDS ────────────────────────────────────────────────────────────── */
.card_learn {
    background:      rgba(26,26,26,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid #2d2d2d;
    border-radius:   var(--tb-radius, 14px);
    box-shadow:      0 2px 10px rgba(0,0,0,0.30);
    padding:         10px 8px;
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    /* Basis-Font für alle Text-Nodes in der Card */
    font-family:     var(--tb-font, -apple-system, sans-serif);
    font-size:       11px;
    color:           rgba(255,255,255,0.75);
}

/* ── HEADLINE ─────────────────────────────────────────────────────────── */
#headline_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      10px;
    font-weight:    400;
    color:          var(--gv-lime, #a8e63d);
    text-align:     center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom:  1px solid rgba(168,230,61,0.15);
}

/* ── EPOXY DISPLAY ────────────────────────────────────────────────────── */
#display_learn {
    /* background:      rgba(0,0,0,0.35); */
    /* border:          1px solid var(--tb-border, rgba(255,255,255,0.10)); */
    /* border-radius:   8px; */
    padding:         5px 8px;
    text-align:      center;
}

#display_label_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      11px;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.08em;
}

#display_value_learn {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   22px;
    font-weight: 400;
    color:       var(--gv-lime, #a8e63d);
    line-height: 1.1;
}

#display_control_learn {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   11px;
    color:       rgba(255,255,255,0.75);
    margin-top:  2px;
}

/* ── SECTION LABEL ────────────────────────────────────────────────────── */
.section_label_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      11px;
    font-weight:    400;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.1em;
    margin-bottom:  3px;
}

/* ── MODE ─────────────────────────────────────────────────────────────── */
#mode_header_learn {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   3px;
}

#btn_help_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      10px;
    font-weight:    400;
    color:          rgba(255,255,255,0.75);
    width:          16px;
    height:         16px;
    border:         1px solid var(--tb-border, rgba(255,255,255,0.15));
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    flex-shrink:    0;
    transition:     all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#btn_help_learn:hover,
#btn_help_learn.active_help_learn {
    color:        var(--gv-lime, #a8e63d);
    border-color: var(--gv-lime, #a8e63d);
}

#mode_grid_learn {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4px;
}

.mode_btn_learn {
    background:    rgba(255,255,255,0.05);
    border:        1px solid var(--tb-border, rgba(255,255,255,0.10));
    border-radius: 7px;
    padding:       6px 3px;
    cursor:        pointer;
    text-align:    center;
    transition:    all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mode_btn_learn:hover { background: rgba(255,255,255,0.10); }

.mode_btn_learn.active_learn {
    background:   rgba(168,230,61,0.15);
    border-color: var(--gv-lime, #a8e63d);
}

.mode_btn_learn.disabled_learn {
    opacity: 0.25;
    cursor:  not-allowed;
}

.mode_name_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      10px;
    color:          var(--tb-icon, rgba(248,243,235,0.85));
    display:        block;
    letter-spacing: 0.02em;
}

.mode_btn_learn.active_learn .mode_name_learn {
    color: var(--gv-lime, #a8e63d);
}

/* ── INTENSITY SLIDER ─────────────────────────────────────────────────── */
#intensity_header_learn {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   6px;
}

#intensity_val_learn {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   12px;
    font-weight: 400;
    color:       var(--gv-lime, #a8e63d);
}

#intensity_slider_learn {
    width:              100%;
    height:             2px;
    -webkit-appearance: none;
    appearance:         none;
    background:         rgba(255,255,255,0.15);
    border-radius:      1px;
    outline:            none;
    cursor:             pointer;
}

#intensity_slider_learn::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        18px;
    height:       18px;
    border-radius: 50%;
    background:   var(--tb-icon, rgba(248,243,235,0.85));
    border:       2px solid var(--gv-lime, #a8e63d);
    cursor:       pointer;
    box-shadow:   0 0 6px rgba(168,230,61,0.4);
}

#intensity_labels_learn {
    display:         flex;
    justify-content: space-between;
    margin-top:      4px;
}

#intensity_labels_learn span {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   11px;
    color:       rgba(255,255,255,0.75);
}

/* ── UNDO / REDO ──────────────────────────────────────────────────────── */
#undoredo_wrap_learn {
    display:       flex;
    align-items:   stretch;
    border:        1px solid #2d2d2d;
    border-radius: 8px;
    overflow:      hidden;
}

.divider_learn {
    width:      1px;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
    align-self: stretch;
}

#btn_undo_learn,
#btn_redo_learn {
    flex:            1;
    background:      none;
    border:          none;
    padding:         16px 4px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#btn_undo_learn:hover,
#btn_redo_learn:hover { background: rgba(255,255,255,0.08); }

#btn_undo_learn:active,
#btn_redo_learn:active { background: rgba(168,230,61,0.15); transform: scale(0.95); }

#btn_undo_learn::before,
#btn_redo_learn::before {
    content:          "";
    display:          block;
    width:            24pt;
    height:           24pt;
    background-color: var(--tb-icon, rgba(248,243,235,0.90));
}

#btn_undo_learn::before {
    -webkit-mask:      url(./assets/epoxy-mark-undo.svg) no-repeat center;
    mask:              url(./assets/epoxy-mark-undo.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size:         contain;
}

#btn_redo_learn::before {
    -webkit-mask:      url(./assets/epoxy-mark-redo.svg) no-repeat center;
    mask:              url(./assets/epoxy-mark-redo.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size:         contain;
}

/* ── CLEAR ────────────────────────────────────────────────────────────── */
#btn_clear_learn {
    background:    rgba(233,69,96,0.10);
    border:        1px solid rgba(233,69,96,0.30);
    border-radius: 8px;
    padding:       9px;
    cursor:        pointer;
    text-align:    center;
    transition:    all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#btn_clear_learn:hover  { background: rgba(233,69,96,0.18); }
#btn_clear_learn:active { transform: scale(0.97); }

#btn_clear_learn span {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   14px;
    font-weight: 200;
    color:       #ED764C;
}

/* ── USER IMAGE RATING ────────────────────────────────────────────────── */
#rating_wrap_learn {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

#rating_grid_learn {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   3px;
}

.rating_btn_learn {
    background:    rgba(255,255,255,0.05);
    border:        1px solid var(--tb-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding:       6px 2px;
    cursor:        pointer;
    text-align:    center;
    transition:    all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.rating_btn_learn:hover { background: rgba(255,255,255,0.10); }

.rating_btn_learn.active_rating_learn {
    background:   rgba(168,230,61,0.15);
    border-color: var(--gv-lime, #a8e63d);
}

.rating_btn_learn span {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      9px;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
    display:        block;
}

.rating_btn_learn.active_rating_learn span {
    color: var(--gv-lime, #a8e63d);
}

/* ── ANNOTATION FLAGS ─────────────────────────────────────────────────── */
.annot_row_learn {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    gap:                   3px;
}

/* Abstand vor einer neuen Gruppe */
.section_label_learn + .annot_row_learn,
.annot_group_learn {
    margin-top: 2px;
}

.section_label_learn.mt_learn {
    margin-top: 6px;
}

.flag_btn_learn {
    background:    rgba(255,255,255,0.05);
    border:        1px solid var(--tb-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding:       6px 2px;
    cursor:        pointer;
    text-align:    center;
    transition:    all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.flag_btn_learn:hover { background: rgba(255,255,255,0.10); }

.flag_btn_learn span {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      9px;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
    display:        block;
}

.flag_btn_learn.active_flag_learn {
    background:   rgba(168,230,61,0.15);
    border-color: var(--gv-lime, #a8e63d);
}

.flag_btn_learn.active_flag_learn span {
    color: var(--gv-lime, #a8e63d);
}

.flag_gt_learn.active_flag_learn {
    background:   rgba(255,200,0,0.12);
    border-color: #ffc800;
}

.flag_gt_learn.active_flag_learn span {
    color: #ffc800;
}

/* ── REFERENZFLÄCHE ───────────────────────────────────────────────────── */
#ref_row_learn {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

#ref_toggle_btn_learn {
    font-family:  var(--tb-font, -apple-system, sans-serif);
    font-size:    9px;
    color:        rgba(255,255,255,0.50);
    border:       1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    padding:      3px 7px;
    cursor:       pointer;
    transition:   all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#ref_toggle_btn_learn.active_ref_learn {
    color:        #4ecdc4;
    border-color: #4ecdc4;
}

#ref_area_learn {
    margin-top:     5px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

#ref_input_row_learn {
    display:     flex;
    align-items: center;
    gap:         4px;
}

#ref_input_row_learn span {
    font-family: var(--tb-font, -apple-system, sans-serif);
    font-size:   10px;
    color:       rgba(255,255,255,0.55);
}

#ref_volume_input_learn {
    flex:         1;
    background:   rgba(255,255,255,0.07);
    border:       1px solid rgba(78,205,196,0.40);
    border-radius: 5px;
    color:        #4ecdc4;
    font-family:  var(--tb-font, -apple-system, sans-serif);
    font-size:    12px;
    padding:      4px 5px;
    text-align:   right;
    outline:      none;
    width:        0; /* flex übernimmt */
}

#ref_volume_input_learn::placeholder { color: rgba(78,205,196,0.35); }

#ref_delta_learn {
    font-family:  var(--tb-font, -apple-system, sans-serif);
    font-size:    10px;
    color:        rgba(255,255,255,0.60);
    text-align:   center;
    letter-spacing: 0.03em;
}

#ref_delta_learn.delta_ok_learn   { color: var(--gv-lime, #a8e63d); }
#ref_delta_learn.delta_warn_learn { color: #ffc800; }
#ref_delta_learn.delta_err_learn  { color: #ED764C; }

/* ── ACTION ROW: Learn this 2/3 · Close 1/3 ──────────────────────────── */
#action_row_learn {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   4px;
}

#btn_learn_this_learn {
    background:      none;
    border:          none;
    border-radius:   8px;
    padding:         11px 6px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#btn_learn_this_learn:hover  { background: rgba(168,230,61,0.12); }
#btn_learn_this_learn:active { transform: scale(0.97); }

#btn_learn_this_learn::before {
    content:           "";
    display:           block;
    width:             24pt;
    height:            24pt;
    background-color:  var(--gv-lime, #a8e63d);
    -webkit-mask:      url(./assets/graduation-cap.svg) no-repeat center;
    mask:              url(./assets/graduation-cap.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size:         contain;
}

#btn_fertig_learn {
    background:      none;
    border:          none;
    border-radius:   8px;
    padding:         11px 4px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#btn_fertig_learn:hover  { background: rgba(255,255,255,0.08); }
#btn_fertig_learn:active { transform: scale(0.97); }

#btn_fertig_learn::before {
    content:           "";
    display:           block;
    width:             20pt;
    height:            20pt;
    background-color:  var(--tb-icon, rgba(248,243,235,0.90));
    -webkit-mask:      url(./assets/square-arrow-right-exit.svg) no-repeat center;
    mask:              url(./assets/square-arrow-right-exit.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size:         contain;
}

/* ── SAM STATUS ───────────────────────────────────────────────────────── */
#sam_status_learn {
    text-align:     center;
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      11px;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
}

#sam_status_learn.running_learn {
    color:   var(--gv-lime, #a8e63d);
    opacity: 0.9;
}

/* ── DRAG HANDLE ──────────────────────────────────────────────────────── */
#drag_handle_learn {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             3px;
    padding:         4px 0 0;
    cursor:          grab;
    opacity:         0.4;
    transition:      opacity 0.15s ease;
}

#drag_handle_learn:hover { opacity: 0.8; }

#drag_handle_learn span {
    display:       block;
    width:         22px;
    height:        3px;
    background:    var(--tb-icon, rgba(248,243,235,0.85));
    border-radius: 2px;
}

/* ── HELP OVERLAY ─────────────────────────────────────────────────────── */
#help_overlay_learn {
    position:        fixed;
    inset:           0;
    z-index:         200;
    background:      rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

#help_overlay_learn[hidden] { display: none; }

#help_box_learn {
    background:   rgba(30,30,30,0.97);
    border:       1px solid var(--tb-border, rgba(255,255,255,0.12));
    border-radius: 14px;
    padding:      18px 16px 14px;
    width:        min(90vw, 360px);
    box-shadow:   0 8px 32px rgba(0,0,0,0.55);
}

#help_title_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      13px;
    font-weight:    400;
    color:          var(--gv-lime, #a8e63d);
    margin-bottom:  12px;
    letter-spacing: 0.04em;
}

#help_table_learn {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--tb-font, -apple-system, sans-serif);
    font-size:       12px;
}

#help_table_learn th {
    color:        rgba(255,255,255,0.75);
    font-weight:  400;
    letter-spacing: 0.06em;
    padding:      4px 6px;
    text-align:   left;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

#help_table_learn td {
    color:          var(--tb-icon, rgba(248,243,235,0.85));
    padding:        7px 6px;
    vertical-align: top;
    border-bottom:  1px solid rgba(255,255,255,0.05);
    line-height:    1.4;
}

#help_table_learn tr:last-child td { border-bottom: none; }

#help_table_learn td:first-child {
    color:       var(--gv-lime, #a8e63d);
    font-weight: 400;
    white-space: nowrap;
}

#help_table_learn td:nth-child(2) {
    text-align:  center;
    white-space: nowrap;
    padding:     7px 8px;
}

#help_close_learn {
    font-family:    var(--tb-font, -apple-system, sans-serif);
    font-size:      12px;
    font-weight:    400;
    color:          rgba(255,255,255,0.75);
    text-align:     center;
    margin-top:     14px;
    padding:        8px;
    border:         1px solid rgba(255,255,255,0.08);
    border-radius:  8px;
    cursor:         pointer;
    transition:     all 0.15s ease;
}

#help_close_learn:hover { color: #fff; border-color: rgba(255,255,255,0.20); }