/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-digital-media-literacy-list-builder
 */
/* list-builder — build a shared class list (Digital Media Literacy: charter, checklist).
 * Builds on activity-common.css + maths-activity.css. Component styles below. */

.lb-stage { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 8px; }

.lb-scenario {
    background: #eef3f8;
    border-left: 5px solid #457b9d;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    color: #1d3557;
}

.lb-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.lb-section {
    background: #fff;
    border: 2px solid #d9e2ec;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(29, 53, 87, .06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lb-section-head { font-weight: 800; color: #1d3557; font-size: 1.08rem; }

.lb-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lb-item-empty { color: #8597a8; font-style: italic; font-size: .92rem; }
.lb-item {
    display: flex; align-items: flex-start; gap: 9px;
    background: #f6f9fc;
    border: 1px solid #e1e9f1;
    border-radius: 10px;
    padding: 8px 10px;
}
.lb-item.is-agreed { background: #e7f6f3; border-color: #9ad9cd; }
.lb-tick { border: none; background: transparent; color: #9bb1c9; cursor: pointer; font-size: 1.1rem; padding: 0; line-height: 1.3; }
.lb-item.is-agreed .lb-tick { color: #2a9d8f; }
.lb-text { flex: 1 1 auto; color: #20303f; line-height: 1.35; }
.lb-remove { border: none; background: transparent; color: #c2738a; cursor: pointer; font-size: 1rem; padding: 0 2px; line-height: 1.3; }
.lb-remove:hover { color: #a8344f; }

.lb-add { display: flex; gap: 7px; }
.lb-input {
    flex: 1 1 auto;
    border: 2px solid #c7d4e2;
    border-radius: 10px;
    padding: 8px 11px;
    font: inherit;
    color: #20303f;
}
.lb-input:focus { outline: none; border-color: #457b9d; }
.lb-add-btn {
    border: none; background: #1d3557; color: #fff;
    border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.lb-add-btn:hover { background: #16314f; }

.lb-starters { font-size: .85rem; color: #5b6b7b; line-height: 1.9; }
.lb-starters-label { font-weight: 700; color: #44607a; }
.lb-starter {
    border: 1px dashed #b9c8d8; background: #fff; color: #44607a;
    border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: .85rem;
}
.lb-starter:hover { border-color: #457b9d; color: #1d3557; background: #eef3f8; }

.lb-discuss { border-top: 1px dashed #cdd9e5; padding-top: 12px; }
.lb-discuss-btn {
    border: 2px solid #457b9d; background: #fff; color: #457b9d;
    border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.lb-discuss-list { margin: 10px 0 0; padding-left: 20px; color: #34495e; }
.lb-discuss-list li { margin: 4px 0; }

.lb-empty { text-align: center; color: #5b6b7b; padding: 40px 0; font-style: italic; }

.lb-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Display mode (IWB): bigger for whole-class building; framework hides header. */
body.display-mode .lb-section-head { font-size: 1.35rem; }
body.display-mode .lb-text { font-size: 1.25rem; }
body.display-mode .lb-input, body.display-mode .lb-add-btn { font-size: 1.15rem; }