/*
  Graphic Organiser -- LCA English & Communications.
  Copyright (c) 2017-2026 Coding Ireland. All rights reserved. Ref: CI-english-graphic-organiser

  The writing sits INSIDE the shape. Regions are absolutely positioned over the SVG
  at coordinates the shape defines on a 160 x 100 grid; the stage holds that aspect
  ratio, so a box given in grid units lands where the drawing puts it at any width.

  Three presentations from one set of regions, rendered twice and toggled -- never
  two implementations:
    default   the diagram, written into
    list view the same regions stacked (`go-list-view` on body)
    print     the diagram, then the stack, with ruled space and no interface
*/

/* The activity framework toggles visibility with [hidden]; without this the
   framework's own display rules win and hidden panels still show. */
.go-activity [hidden] { display: none !important; }

.go-container { display: flex; flex-direction: column; gap: 0.9rem; }

/* ----------------------------------------------------------------- top bar */
.go-topbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: 1.4rem; }

.go-shape-name {
    font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    font-size: 0.78rem; background: #2f6f5e; color: #fff;
    padding: 0.2rem 0.6rem; border-radius: 999px;
}

.go-saved { margin-left: auto; font-size: 0.82rem; color: #5a6472; min-height: 1em; }

.go-preview-warning {
    margin: 0; padding: 0.5rem 0.75rem; border-radius: 8px;
    background: #fff4e5; border: 1px solid #f0c27b; color: #8a5a00;
    font-weight: 600; font-size: 0.88rem;
}

/* ------------------------------------------------------------------ prompt */
.go-prompt {
    background: #f2f7f5; border: 1px solid #cfe0d9; border-radius: 12px;
    padding: 0.85rem 1.1rem;
}
.go-prompt-body { font-size: 0.97rem; line-height: 1.6; color: #24312c; }
.go-prompt-body p { margin: 0 0 0.6rem; }
.go-prompt-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- the diagram */
.go-shape {
    position: relative;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    aspect-ratio: 160 / 100;      /* must match the authoring grid in the JS */
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 12px;
}

.go-svg-wrap { position: absolute; inset: 0; }
.go-svg { display: block; width: 100%; height: 100%; }

.go-overlay { position: absolute; inset: 0; }

.go-figure-note {
    margin: 0.6rem auto 0; max-width: 68rem;
    font-size: 0.84rem; line-height: 1.5; color: #6b7684; text-align: center;
}

/* The drawn line work. Restrained on purpose: the student's words are the
   content, and the shape is what tells them where the words belong. */
.go-s { fill: none; stroke: #b9c7c1; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.go-s-ink { fill: none; stroke: #6b7c76; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.go-fill { fill: #eef4f1; }

/* ----------------------------------------------------------------- regions */
.go-region {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0; min-height: 0;
    padding: 0.25rem 0.35rem;
    border-radius: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Over the diagram */
.go-overlay .go-region { position: absolute; overflow: hidden; }
.go-overlay .go-region.is-lit { background: rgba(47, 111, 94, 0.07); box-shadow: inset 0 0 0 1.5px #2f6f5e; }

.go-region-head { display: flex; align-items: baseline; gap: 0.3rem; flex: none; margin-bottom: 0.1rem; }

.go-region-n {
    font-size: 0.62rem; font-weight: 800; color: #728078;
    background: #eef2f0; border-radius: 3px; padding: 0 0.3rem;
    font-variant-numeric: tabular-nums; flex: none;
}

/* Labels WRAP rather than truncate. The first build uppercased them and clipped
   with an ellipsis, which on a triple Venn rendered 'Only the newspaper' and
   'Only the radio' as 'ONLY THE N...' and 'ONLY THE R...' -- a student cannot tell
   those apart, and the uppercasing was what made them too wide in the first place. */
.go-region-label {
    margin: 0; font-size: 0.68rem; font-weight: 800; color: #3b4a44;
    line-height: 1.2; letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

/* The student's words. Scrolls inside its own region rather than escaping the
   shape -- a line of text crossing a Venn boundary would say something false. */
.go-items {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.15rem;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
}

.go-item {
    display: flex; align-items: flex-start; gap: 0.3rem;
    font-size: 0.82rem; line-height: 1.35; color: #1f2933;
}
.go-item span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.go-item span::before { content: "• "; color: #8aa79c; }

.go-item-x {
    flex: none; border: 0; background: none; cursor: pointer;
    color: #b3bdb8; font-size: 1rem; line-height: 1; padding: 0 0.1rem;
}
.go-item-x:hover { color: #c0562f; }

.go-input {
    flex: none; width: 100%;
    border: 0; border-bottom: 1px dashed #c4cfca; border-radius: 0;
    padding: 0.15rem 0.1rem; background: transparent;
    font-family: inherit; font-size: 0.82rem; color: #1f2933;
}
.go-input::placeholder { color: #a9b5b0; }
.go-input:focus { outline: none; border-bottom-color: #2f6f5e; border-bottom-style: solid; }

.go-region.is-filled .go-region-label { color: #2f6f5e; }

/* --------------------------------------------------------------- list view */
.go-list { display: none; }

.go-list .go-region {
    background: #fff; border: 1px solid #dde3ea; border-left: 4px solid #cdd8d3;
    border-radius: 10px; padding: 0.7rem 0.85rem 0.75rem; margin-bottom: 0.6rem;
}
.go-list .go-region.is-filled { border-left-color: #6ba68f; }
.go-list .go-region.is-lit { border-left-color: #2f6f5e; background: #f6faf8; }
.go-list .go-region-label { font-size: 0.9rem; text-transform: none; letter-spacing: 0; white-space: normal; }
.go-list .go-item { font-size: 0.93rem; }
.go-list .go-input { font-size: 0.93rem; padding: 0.3rem 0.1rem; }

body.go-list-view .go-shape,
body.go-list-view .go-figure-note { display: none !important; }
body.go-list-view .go-list { display: block; }

.go-empty {
    margin: 0; padding: 1rem; text-align: center; color: #6b7684;
    background: #f4f7f6; border: 1px dashed #c4cfca; border-radius: 10px;
}

/* ------------------------------------------------------- whiteboard display */
body.display-mode .go-input { display: none !important; }
body.display-mode .go-region-label { font-size: 0.85rem; }
body.display-mode .go-item { font-size: 0.95rem; }

/* ------------------------------------------------------------------- print */
/* LCA teachers work from photocopied organiser sheets -- the Oide page these come
   from IS one. Printed, this is a blank a student can fill by hand: the diagram
   with its regions, then the same regions ruled for writing. */
@media print {
    .activity-header, .go-topbar, .go-preview-warning,
    .go-item-x, .go-input { display: none !important; }

    body, .go-container { background: #fff !important; color: #000; }

    .go-shape { display: block !important; border: 0; break-inside: avoid; max-width: 100%; }
    .go-s, .go-s-ink { stroke: #000; }
    .go-fill { fill: #fff; }
    .go-region-label { color: #000 !important; }
    .go-overlay .go-region { box-shadow: inset 0 0 0 0.5pt #999; }

    .go-list { display: block !important; break-before: page; }
    .go-list .go-region { border: 1px solid #000; border-left-width: 1px; border-radius: 0; break-inside: avoid; }

    /* Ruled space, whether or not anything was typed. */
    .go-list .go-items::after {
        content: ""; display: block; height: 2.4rem; margin-top: 0.2rem;
        background-image: repeating-linear-gradient(
            to bottom, transparent, transparent 1.15rem, #999 1.15rem, #999 calc(1.15rem + 1px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .go-region { transition: none; }
}