/*
 * 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-lcw-pathway-planner
 */

/* The browser hides `[hidden]` with a UA rule that ANY author `display:` rule
   outranks -- and several elements here are both `display:`-styled and toggled
   via `el.hidden`. Without this the empty-state message renders underneath a
   fully working activity, and the readout shows its headings with nothing in
   them. The `hidden` PROPERTY is correctly set in both cases, so neither a
   property check nor the console catches it; only looking at the page does. */
[hidden] { display: none !important; }


.pp-activity {
    --pp-ink: #1f2933;
    --pp-muted: #62707d;
    --pp-rule: #dfe4ea;
    --pp-paper: #ffffff;
    --pp-surface: #f6f7f9;
    --pp-accent: #1f6f8b;
}

.pp-container { display: flex; flex-direction: column; gap: .9rem; }

/* The from/to bar: a plan is a route between two named points, and naming both
   ends is what stops it drifting into a list of nice ideas. */
.pp-ends {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .9rem;
    background: var(--pp-surface);
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--pp-ink);
    flex-wrap: wrap;
}

.pp-from i { color: var(--pp-muted); }
.pp-to i { color: var(--pp-accent); }

.pp-arrow {
    flex: 1 1 3rem;
    height: 2px;
    min-width: 2rem;
    background: linear-gradient(to right, var(--pp-muted), var(--pp-accent));
    border-radius: 2px;
}

.pp-scroll {
    overflow-x: auto;
    border: 1px solid var(--pp-rule);
    border-radius: 12px;
    background: var(--pp-paper);
}

.pp-grid { width: 100%; border-collapse: collapse; font-size: .9rem; }

.pp-grid th, .pp-grid td {
    border: 1px solid var(--pp-rule);
    padding: .5rem .6rem;
    vertical-align: top;
    text-align: left;
}

.pp-corner {
    background: var(--pp-surface);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pp-muted);
    min-width: 11rem;
}

.pp-horizon { background: var(--pp-surface); min-width: 12rem; }

.pp-horizon-label { display: block; font-size: .95rem; font-weight: 800; color: var(--pp-ink); }

.pp-horizon-hint {
    display: block;
    margin-top: .12rem;
    font-size: .76rem;
    font-weight: 400;
    color: var(--pp-muted);
}

.pp-track { background: #fbfcfd; }
.pp-track-label { display: block; font-weight: 700; color: var(--pp-ink); }

.pp-track-hint {
    display: block;
    margin-top: .12rem;
    font-size: .76rem;
    font-weight: 400;
    color: var(--pp-muted);
}

/* Each track keeps one colour the whole way across, so reading a row tells you
   how one pathway develops and reading a column tells you what a year holds. */
.pp-track-0 { border-left: 4px solid #1f6f8b; }
.pp-track-1 { border-left: 4px solid #4a6b1f; }
.pp-track-2 { border-left: 4px solid #b5451f; }
.pp-track-3 { border-left: 4px solid #6a3d8f; }

.pp-input {
    width: 100%;
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.45;
    padding: .35rem .45rem;
    border: 1px dashed var(--pp-rule);
    border-radius: 8px;
    resize: vertical;
    color: var(--pp-ink);
    background: transparent;
}

.pp-input::placeholder {
    color: #b6bfc7;
    font-size: 1.1rem;
    font-weight: 800;
}

.pp-input:focus { outline: 2px solid var(--pp-accent); outline-offset: -1px; }

/* An empty cell is a dashed outline you are invited to fill; a filled one
   becomes a solid card. The grid fills in visibly as the plan takes shape. */
.pp-input.has-value { border-style: solid; background: #fff; }

.pp-input.has-value.pp-tone-0, .pp-card.pp-tone-0 { border-color: #1f6f8b; background: rgba(31, 111, 139, .07); }
.pp-input.has-value.pp-tone-1, .pp-card.pp-tone-1 { border-color: #4a6b1f; background: rgba(74, 107, 31, .07); }
.pp-input.has-value.pp-tone-2, .pp-card.pp-tone-2 { border-color: #b5451f; background: rgba(181, 69, 31, .07); }
.pp-input.has-value.pp-tone-3, .pp-card.pp-tone-3 { border-color: #6a3d8f; background: rgba(106, 61, 143, .07); }

.pp-card {
    padding: .4rem .55rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: .87rem;
    line-height: 1.45;
    color: var(--pp-ink);
}

.pp-readout {
    padding: .7rem .9rem;
    background: rgba(31, 111, 139, .08);
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--pp-ink);
}

.pp-prompts {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--pp-ink);
}

.pp-prompts li { margin-bottom: .3rem; }

.pp-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 2rem;
    color: var(--pp-muted);
    font-size: .95rem;
}

.pp-copy-fallback {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 22rem;
    height: 7rem;
    font-size: .8rem;
    z-index: 20;
}

body.display-mode .pp-grid { font-size: 1rem; }
body.display-mode .pp-card { font-size: .95rem; }