:root {
--paper:#f3f0e8;
--paper-2:#fbfaf6;
--ink:#252a28;
--muted:#6e746f;
--line:#d7d4ca;
--forest:#4f6759;
--forest-dark:#34483d;
--sand:#d9c8a7;
--blue:#50779b;
--red:#b95a4c;
}

* {
box-sizing:border-box;
}

[hidden] {
display:none !important;
}

html,
body {
margin:0;
min-height:100%;
}

body {
font-family:Inter, Arial, sans-serif;
color:var(--ink);
background:
radial-gradient(
circle at 10% 10%,
rgba(79,103,89,.045) 0 1px,
transparent 1.5px
)
0 0 / 28px 28px,
linear-gradient(
180deg,
#f4f1e9,
#ece8de
);
}

body.modal-open {
overflow:hidden;
}

button,
input,
select,
textarea {
font:inherit;
}

button {
color:inherit;
}


/* =========================================================
HEADER
========================================================= */

.app-header {
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding:14px 24px 12px;
background:rgba(251,250,246,.96);
border-bottom:1px solid var(--line);
}

.brand {
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.brand-logo {
flex-shrink:0;
width:48px;
height:48px;
border-radius:12px;
box-shadow:0 2px 6px rgba(52,72,61,.22);
}

.app-header h1,
.teacher-dashboard-head h1 {
margin:2px 0 3px;
font-size:28px;
letter-spacing:-.4px;
}

.app-header p,
.teacher-dashboard-head p {
margin:0;
color:var(--muted);
font-size:13px;
}

.eyebrow,
.mini-label {
color:var(--forest);
font-weight:800;
font-size:11px;
letter-spacing:1.7px;
}

.header-actions,
.teacher-head-actions {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}

#cloudStatus,
#studentBadge {
display:none !important;
}

.student-badge,
.cloud-status,
.task-code-pill {
padding:8px 11px;
border:1px solid var(--line);
border-radius:999px;
background:#fffdf8;
font-size:12px;
font-weight:700;
}

.cloud-status {
color:var(--muted);
font-weight:600;
}

.cloud-status.good {
color:#2f6b4a;
border-color:#b7cfbf;
background:#f2faf4;
}

.cloud-status.busy {
color:#765c22;
border-color:#dccd9b;
background:#fffaf0;
}

.cloud-status.bad {
color:#8d3f35;
border-color:#e0bbb4;
background:#fff5f3;
}

.mode-button {
min-width:92px;
padding:9px 16px;
border:1px solid #c8c7c0;
border-radius:999px;
background:#fffdf8;
color:var(--ink);
font-weight:800;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease,
transform .15s ease;
}

.mode-button:hover {
background:#f0f4ef;
border-color:var(--forest);
}

.mode-button:active {
transform:translateY(1px);
}

.mode-button:focus-visible {
outline:3px solid rgba(79,103,89,.18);
outline-offset:2px;
}

/* Who is using the app right now: Student or Teacher. */
.mode-button.active {
background:var(--role-colour);
border-color:var(--role-colour);
color:#fff;
}

.app-header {
--role-colour:var(--forest);
border-top:4px solid var(--role-colour);
}

body.role-teacher .app-header {
--role-colour:#2f4f7a;
}

.role-indicator {
display:flex;
align-items:center;
gap:8px;
max-width:340px;
padding:5px 12px 5px 5px;
border:1px solid var(--role-colour);
border-radius:999px;
background:#fffdf8;
font-size:12px;
}

.role-indicator-label {
padding:4px 10px;
border-radius:999px;
background:var(--role-colour);
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}

.role-indicator-detail {
overflow:hidden;
color:var(--ink);
font-weight:700;
white-space:nowrap;
text-overflow:ellipsis;
}


/* =========================================================
MAIN PAGE
========================================================= */

.page-container,
.teacher-dashboard {
width:min(2000px,100%);
margin:0 auto;
padding:14px;
}

.task-intro,
.teacher-feedback-panel,
.legend-section,
.learning-reminder,
.teacher-editor-card,
.teacher-task-sidebar {
background:rgba(251,250,246,.94);
border:1px solid var(--line);
border-radius:12px;
}

.task-intro {
display:flex;
justify-content:space-between;
gap:24px;
align-items:flex-start;
margin-bottom:10px;
padding:12px 15px;
}

.task-intro h2 {
margin:2px 0 0;
font-size:18px;
}

.task-intro p {
margin:2px 0 0;
color:var(--muted);
max-width:900px;
font-size:13px;
line-height:1.5;
}


/* =========================================================
MAP CANVAS
========================================================= */

.canvas-wrap {
position:relative;
width:100%;
aspect-ratio:1600 / 675;
overflow:hidden;
background:#fff;
border:3px solid #343936;
border-radius:14px;
box-shadow:0 5px 20px rgba(43,48,45,.08);
}

#drawingCanvas {
position:absolute;
inset:0;
z-index:2;
width:100%;
height:100%;
display:block;
touch-action:none;
}

.canvas-background {
fill:#fff;
}

.grid-line {
stroke:#e8e8e3;
stroke-width:1;
}


/* =========================================================
REFERENCE MAP
========================================================= */

.reference-overlay {
position:absolute;
inset:0;
z-index:8;
width:100%;
height:100%;
object-fit:fill;
opacity:.95;
pointer-events:none;
user-select:none;
}


/* =========================================================
STATUS
========================================================= */

.floating-status {
position:absolute;
z-index:16;
top:13px;
left:86px;
max-width:calc(100% - 420px);
padding:8px 13px;
border:1px solid rgba(46,53,49,.15);
border-radius:9px;
background:rgba(255,253,248,.91);
backdrop-filter:blur(5px);
font-size:13px;
pointer-events:none;
}


/* =========================================================
NORTH
========================================================= */

.north-indicator {
position:absolute;
z-index:23;
top:12px;
right:12px;
width:82px;
min-height:92px;
padding:7px 6px 6px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
border:1px solid rgba(0,0,0,.15);
border-radius:10px;
background:rgba(255,253,248,.93);
cursor:grab;
touch-action:none;
user-select:none;
transition:
background .15s ease,
border-color .15s ease,
transform .15s ease;
}

.north-indicator:hover,
.north-indicator.setting-north {
border-color:var(--forest);
background:#f4f8f3;
}

.north-indicator:active {
cursor:grabbing;
}

.north-arrow-inner {
display:flex;
flex-direction:column;
align-items:center;
transform-origin:center;
}

.north-arrow-inner strong {
font-size:11px;
}

.north-arrow-symbol {
font-size:27px;
line-height:.9;
margin-top:-2px;
}


/* =========================================================
MAP PREVIEW
========================================================= */

.map-preview {
position:relative;
aspect-ratio:1600 / 675;
overflow:hidden;
background:#fff;
border:1px solid #d9d8d0;
border-radius:8px;
}

.map-preview svg {
display:block;
width:100%;
height:100%;
pointer-events:none;
}

.map-preview-north {
position:absolute;
top:4px;
right:4px;
display:flex;
flex-direction:column;
align-items:center;
padding:1px 4px;
border-radius:5px;
background:rgba(255,253,248,.9);
font-size:13px;
line-height:.95;
transform-origin:center;
pointer-events:none;
}

.map-preview-north strong {
font-size:8px;
}

.north-control-label {
margin-top:2px;
color:var(--forest-dark);
font-size:8px;
font-weight:900;
letter-spacing:.8px;
}

.north-angle-label {
color:var(--muted);
font-size:9px;
font-weight:800;
}


/* =========================================================
FLOATING TOOLBAR
========================================================= */

.floating-toolbar {
position:absolute;
z-index:30;
left:12px;
top:12px;
bottom:12px;
width:57px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:6px;
border:1px solid rgba(0,0,0,.2);
border-radius:12px;
background:rgba(35,42,39,.95);
box-shadow:0 5px 18px rgba(0,0,0,.2);
opacity:.4;
transition:opacity .15s ease;
}

.floating-toolbar:hover,
.floating-toolbar:focus-within,
.floating-toolbar.open,
.floating-toolbar.recently-used {
opacity:.9;
}

.toolbar-button {
position:relative;
width:43px;
height:auto;
flex:1 1 40px;
min-height:27px;
max-height:40px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid transparent;
border-radius:8px;
background:transparent;
color:white;
cursor:pointer;
}

.toolbar-button:hover {
background:rgba(255,255,255,.14);
}

.toolbar-button.active {
color:#355f4a;
background:#fffdf8;
border-color:rgba(255,255,255,.8);
}

.toolbar-button:disabled {
opacity:.22;
cursor:not-allowed;
}

.toolbar-icon {
font-size:20px;
line-height:1;
}

.layer-icon {
font-size:22px;
font-weight:800;
}

.toolbar-divider {
width:30px;
height:1px;
flex:0 0 1px;
background:rgba(255,255,255,.22);
margin:1px 0;
}

.toolbar-tooltip {
position:absolute;
left:53px;
top:50%;
transform:translateY(-50%);
display:none;
white-space:nowrap;
padding:6px 9px;
border-radius:6px;
background:rgba(28,34,31,.97);
color:white;
font-size:12px;
pointer-events:none;
}

.toolbar-button:hover .toolbar-tooltip {
display:block;
}


/* =========================================================
TOOL FLYOUTS
========================================================= */

.tool-flyout {
position:absolute;
z-index:29;
left:78px;
top:50%;
transform:translateY(-50%);
width:310px;
padding:15px;
border:1px solid rgba(0,0,0,.16);
border-radius:12px;
background:rgba(255,253,248,.98);
backdrop-filter:blur(8px);
box-shadow:0 10px 28px rgba(0,0,0,.2);
}

.compact-flyout {
width:275px;
}

.more-flyout {
width:290px;
max-height:calc(100% - 24px);
overflow:auto;
}

.flyout-heading,
.colour-panel-head,
.teacher-section-head {
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.flyout-heading {
margin-bottom:12px;
}

.flyout-heading strong,
.colour-panel-head strong {
display:block;
font-size:17px;
}

.flyout-heading span,
.colour-panel-head span {
display:block;
color:var(--muted);
margin-top:2px;
font-size:11px;
}

.flyout-close,
.colour-panel-head button {
width:29px;
height:29px;
border:0;
border-radius:50%;
background:#ecebe6;
cursor:pointer;
font-size:20px;
}


/* =========================================================
SHAPE CHOICES
========================================================= */

.shape-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}

.shape-choice {
min-height:63px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
border:1px solid #c9c8c1;
border-radius:8px;
background:#fff;
cursor:pointer;
font-size:12px;
}

.shape-choice:hover {
border-color:var(--forest);
background:#f3f7f3;
}

.shape-choice span {
font-size:23px;
}


/* =========================================================
INPUTS
========================================================= */

.tool-flyout label,
.colour-panel label,
.teacher-editor-card label,
.teacher-feedback-panel label {
display:block;
margin:10px 0 5px;
font-size:12px;
font-weight:800;
}

.tool-flyout select,
.tool-flyout input[type=color],
.teacher-editor-card input[type=text],
.teacher-editor-card textarea,
.teacher-feedback-panel textarea {
width:100%;
border:1px solid #aaa9a2;
border-radius:8px;
background:white;
padding:9px;
min-height:40px;
}

.tool-flyout input[type=color] {
height:46px;
padding:3px;
}


/* =========================================================
BUTTONS
========================================================= */

.primary-flyout-button,
.primary-button,
.modal-primary-button {
border:1px solid var(--forest-dark);
background:var(--forest);
color:white;
border-radius:8px;
padding:10px 13px;
cursor:pointer;
font-weight:800;
}

.primary-flyout-button {
width:100%;
margin-top:13px;
}

.secondary-flyout-button,
.quiet-button,
.modal-secondary-button,
.review-tool,
.danger-outline-button {
border:1px solid #c8c7c0;
background:#fffdf8;
border-radius:8px;
padding:9px 11px;
cursor:pointer;
}

.full-flyout-button {
width:100%;
margin-bottom:7px;
}

.danger-flyout-button {
width:100%;
margin-top:8px;
border:1px solid #d9aaa2;
background:#fff4f1;
color:#8d3f35;
border-radius:8px;
padding:9px;
cursor:pointer;
font-weight:700;
}


/* =========================================================
CANVAS ACTIONS
========================================================= */

.canvas-actions {
position:absolute;
z-index:22;
top:12px;
right:106px;
}

.canvas-action-button {
display:flex;
align-items:center;
gap:7px;
min-height:46px;
padding:8px 12px;
border:1px solid rgba(0,0,0,.15);
border-radius:10px;
background:rgba(255,253,248,.91);
cursor:pointer;
user-select:none;
touch-action:none;
}

.canvas-action-button.holding {
background:var(--forest);
color:white;
}


/* =========================================================
MAP OBJECTS
========================================================= */

.map-shape {
stroke:#3b3d3a;
stroke-width:4;
cursor:grab;
}

.map-shape.selected,
.map-shape.draft-shape {
stroke:#2e6eb6;
stroke-width:6;
}

.shape-label-container {
pointer-events:none;
overflow:visible;
}

.shape-label-box {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:4px;
text-align:center;
overflow:hidden;
overflow-wrap:anywhere;
word-break:break-word;
font-weight:800;
line-height:1.05;
color:#111;
text-shadow:
-1px -1px #fff,
1px -1px #fff,
-1px 1px #fff,
1px 1px #fff;
}


/* =========================================================
ROUTES
========================================================= */

.route-hit {
fill:none;
stroke:transparent;
pointer-events:stroke;
cursor:grab;
}

.path-line {
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:16 10;
pointer-events:none;
}

.road-edge,
.road-core {
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
}

.road-edge {
stroke:#474943;
}

.route-label {
font-family:Arial,sans-serif;
font-weight:800;
text-anchor:middle;
dominant-baseline:middle;
fill:#151815;
stroke:#fffdf8;
stroke-width:5;
paint-order:stroke;
pointer-events:none;
}

.route-label.path-label {
fill:#244d74;
}

.route-label.road-label {
fill:#33352f;
}


/* =========================================================
TRANSFORMS
========================================================= */

.transform-box {
fill:none;
stroke:#246fc1;
stroke-width:3;
stroke-dasharray:9 6;
pointer-events:none;
}

.rotate-line {
stroke:#246fc1;
stroke-width:3;
pointer-events:none;
}

.resize-handle {
fill:#fff;
stroke:#246fc1;
stroke-width:4;
pointer-events:all;
}

.handle-tl,
.handle-br {
cursor:nwse-resize;
}

.handle-tr,
.handle-bl {
cursor:nesw-resize;
}

.handle-left,
.handle-right {
cursor:ew-resize;
}

.handle-top,
.handle-bottom {
cursor:ns-resize;
}

.rotate-handle {
fill:#246fc1;
stroke:white;
stroke-width:4;
cursor:grab;
pointer-events:all;
}

.done-shape-button {
cursor:pointer;
pointer-events:all;
}

.done-shape-rect {
fill:#4f6759;
stroke:white;
stroke-width:3;
}

.done-shape-text {
fill:white;
font-size:18px;
font-weight:800;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
}


/* =========================================================
TEACHER INK
========================================================= */

.teacher-ink {
fill:none;
stroke:#d94b42;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
}

.teacher-review-toolbar {
position:absolute;
z-index:35;
right:12px;
bottom:12px;
display:flex;
gap:7px;
padding:7px;
border:1px solid rgba(0,0,0,.15);
border-radius:10px;
background:rgba(255,253,248,.95);
}

.review-tool.active {
background:#ffe9e5;
border-color:#d8877c;
color:#8b3e35;
font-weight:800;
}


/* =========================================================
LEGEND
========================================================= */

.legend-section {
margin-top:10px;
padding:14px 16px;
}

.section-heading h2 {
margin:0;
font-size:18px;
}

.section-heading p {
margin:3px 0 0;
color:var(--muted);
font-size:11px;
}

.legend-grid {
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(210px,1fr)
);
gap:8px 12px;
margin-top:10px;
}

.legend-item {
display:flex;
align-items:center;
gap:10px;
min-width:0;
padding:8px 9px;
border:1px solid #e1ded4;
border-radius:8px;
background:#fffdf9;
}

.legend-preview {
width:31px;
height:24px;
flex:0 0 31px;
overflow:visible;
}

.legend-text {
min-width:0;
line-height:1.1;
}

.legend-object-name {
font-size:13px;
font-weight:800;
overflow-wrap:anywhere;
}

.legend-category {
color:var(--muted);
font-size:10px;
margin-top:3px;
}

.legend-section {
grid-column:1 / -1;
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(210px,1fr)
);
gap:8px 12px;
}

.legend-section-title {
grid-column:1 / -1;
margin-top:4px;
color:#b3161a;
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}

.legend-hazards .legend-item {
border-color:#f1c4c4;
background:#fff6f5;
}

.map-hazard {
cursor:grab;
}

.hazard-selected {
fill:none;
stroke:#2e6eb6;
stroke-width:3;
stroke-dasharray:6 4;
}

.empty-legend {
color:#858984;
font-size:12px;
font-style:italic;
}

.learning-reminder {
margin-top:10px;
padding:11px 14px;
border-left:5px solid var(--forest);
font-size:13px;
line-height:1.5;
}


/* =========================================================
COLOUR PICKER
========================================================= */

.colour-panel {
position:fixed;
z-index:1500;
left:86px;
top:50%;
transform:translateY(-50%);
width:330px;
padding:16px;
background:#fffdf8;
border:1px solid #bebbb0;
border-radius:13px;
box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.colour-swatches {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:14px 0;
}

.colour-swatches button {
height:42px;
border:2px solid white;
outline:1px solid #aaa79e;
border-radius:8px;
background:var(--swatch);
cursor:pointer;
}

.colour-panel input[type=color] {
width:100%;
height:58px;
padding:4px;
border:1px solid #aaa79e;
border-radius:8px;
background:white;
cursor:pointer;
}


/* =========================================================
MODALS
========================================================= */

.modal-overlay {
position:fixed;
inset:0;
z-index:1200;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(28,34,31,.62);
}

.object-modal {
width:min(520px,100%);
padding:27px;
border-radius:15px;
background:#fffdf8;
box-shadow:0 18px 48px rgba(0,0,0,.3);
}

.modal-step-label {
color:var(--forest);
font-size:11px;
font-weight:900;
letter-spacing:1.4px;
}

.object-modal h2 {
margin:5px 0 7px;
}

.modal-description {
color:var(--muted);
line-height:1.45;
margin:0 0 18px;
}

.object-modal label {
display:block;
margin:12px 0 6px;
font-size:13px;
font-weight:800;
}

.object-modal input,
.object-modal select {
width:100%;
min-height:50px;
padding:9px 11px;
border:1.5px solid #8f918b;
border-radius:8px;
background:white;
font-size:16px;
}

.object-modal input:focus,
.object-modal select:focus {
outline:3px solid rgba(79,103,89,.18);
border-color:var(--forest);
}

.modal-actions {
display:flex;
justify-content:flex-end;
gap:9px;
margin-top:21px;
}

.modal-primary-button,
.modal-secondary-button {
min-height:44px;
padding:9px 16px;
}

.modal-error {
margin-top:8px;
color:#a04438;
font-size:13px;
font-weight:700;
}

.text-link-button {
display:block;
margin:18px auto 0;
border:0;
background:none;
color:var(--forest-dark);
text-decoration:underline;
cursor:pointer;
}


/* =========================================================
TEACHER DASHBOARD
========================================================= */

.teacher-dashboard {
padding-top:18px;
}

.teacher-dashboard-head {
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-start;
margin-bottom:14px;
}

.teacher-layout {
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:14px;
}

.teacher-task-sidebar,
.teacher-editor-card {
padding:15px;
}

.teacher-task-sidebar h3 {
margin:0 0 10px;
}

.teacher-task-list {
display:flex;
flex-direction:column;
gap:7px;
}

.teacher-task-item {
text-align:left;
border:1px solid #d4d1c7;
background:#fffdf8;
border-radius:9px;
padding:10px;
cursor:pointer;
}

.teacher-task-item.active {
border-color:var(--forest);
background:#f0f4ef;
}

.teacher-task-item strong {
display:block;
}

.teacher-task-item span {
display:block;
margin-top:3px;
color:var(--muted);
font-size:11px;
}

.empty-teacher-state {
text-align:center;
padding:70px 20px;
color:var(--muted);
}

.teacher-editor-card h2,
.teacher-editor-card h3 {
margin:4px 0 8px;
}

.teacher-editor-card textarea {
resize:vertical;
}

.permission-grid {
display:grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:8px;
margin:8px 0 14px;
}

.permission-grid label {
margin:0;
padding:9px;
border:1px solid #ddd9cf;
border-radius:8px;
background:#fffdf8;
font-weight:600;
}

.permission-grid input {
margin-right:6px;
}

.helper-text {
color:var(--muted);
font-size:12px;
margin:2px 0 10px;
}

.reference-manager,
.submission-section {
margin-top:20px;
padding-top:18px;
border-top:1px solid var(--line);
}

.reference-manager-actions {
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}

.danger-outline-button {
color:#8c3d34;
border-color:#d7aaa3;
}

.teacher-reference-preview {
display:block;
width:min(640px,100%);
margin-top:12px;
border:1px solid var(--line);
border-radius:9px;
background:white;
}

.submission-list {
display:flex;
flex-direction:column;
gap:7px;
margin-top:10px;
}

.submission-row {
display:grid;
grid-template-columns:
minmax(180px,1fr)
120px
110px
100px;
gap:10px;
align-items:center;
padding:9px 10px;
border:1px solid #ddd9cf;
border-radius:8px;
background:#fffdf8;
}

.submission-name strong {
display:block;
}

.submission-name span,
.submission-meta {
color:var(--muted);
font-size:11px;
}

.status-pill {
justify-self:start;
padding:5px 8px;
border-radius:999px;
font-size:10px;
font-weight:800;
background:#ecebe6;
}

.status-pill.submitted {
background:#e8f3eb;
color:#2e6745;
}

.submission-name .submission-marked {
display:block;
margin-top:2px;
color:#2e6745;
font-weight:800;
}

#startupTaskCode {
text-transform:uppercase;
letter-spacing:0.08em;
}

.submission-row-updated {
animation:submission-row-updated 2.4s ease-out;
}

@keyframes submission-row-updated {
0%,
40% {
border-color:var(--forest);
background:#e4efe6;
box-shadow:0 0 0 3px #e4efe6;
}
}

@media (prefers-reduced-motion: reduce) {
.submission-row-updated {
animation:none;
border-color:var(--forest);
}
}


/* =========================================================
GALLERY
========================================================= */

.teacher-section-buttons {
display:flex;
gap:8px;
}

.gallery-class + .gallery-class {
margin-top:22px;
}

.gallery-class h2 {
margin:0 0 10px;
font-size:18px;
}

.gallery-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:12px;
}

.gallery-tile {
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
padding:8px;
border:1px solid #dedcd3;
border-radius:12px;
background:#fff;
text-align:left;
font:inherit;
color:inherit;
cursor:pointer;
}

.gallery-tile:hover,
.gallery-tile:focus-visible {
border-color:var(--forest);
}

.gallery-tile-map {
position:relative;
}

.gallery-tile-empty {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-size:13px;
font-weight:700;
pointer-events:none;
}

.gallery-tile-info {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:2px 8px;
align-items:center;
}

.gallery-tile-info strong {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.gallery-tile-info .status-pill {
grid-row:span 2;
}

.gallery-tile-info span {
color:var(--muted);
font-size:11px;
}

.status-pill.marked {
background:#e5edf7;
color:#2a5384;
}

/* Who is being reviewed | written feedback | save. */
.teacher-feedback-panel {
display:grid;
grid-template-columns:
minmax(200px,300px)
minmax(0,1fr)
auto;
gap:22px;
align-items:start;
margin-top:10px;
padding:16px 18px;
}

.teacher-feedback-panel h2 {
margin:4px 0 0;
font-size:17px;
line-height:1.35;
}

.review-meta {
margin:6px 0 0;
color:var(--muted);
font-size:12px;
font-weight:700;
}

.teacher-feedback-panel label {
margin:0 0 6px;
}

.review-field textarea {
min-height:96px;
resize:vertical;
font:inherit;
font-size:14px;
line-height:1.45;
}

.review-actions {
display:flex;
flex-direction:column;
gap:7px;
align-self:end;
}

.review-actions .primary-button {
white-space:nowrap;
}

.review-draft-notice {
max-width:220px;
margin:0;
padding:8px 10px;
border:1px solid #dfc28d;
border-radius:8px;
background:#fff8ea;
color:#6f5326;
font-size:12px;
font-weight:700;
line-height:1.4;
}

.review-tool:disabled,
.teacher-feedback-panel .primary-button:disabled,
.teacher-feedback-panel textarea:disabled {
opacity:.45;
cursor:not-allowed;
}

.review-hint {
max-width:190px;
margin:0;
color:var(--muted);
font-size:11px;
line-height:1.4;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-height:800px) {

.floating-toolbar {
top:8px;
bottom:8px;
gap:2px;
padding:4px 6px;
}

.toolbar-button {
min-height:24px;
max-height:36px;
}

.toolbar-icon {
font-size:18px;
}

}

@media (max-width:1000px) {

.app-header {
align-items:flex-start;
}

.canvas-wrap {
min-height:520px;
aspect-ratio:auto;
}

.floating-status {
left:82px;
right:12px;
max-width:none;
}

.teacher-layout {
grid-template-columns:1fr;
}

.teacher-task-list {
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(180px,1fr)
);
}

.teacher-feedback-panel {
grid-template-columns:1fr;
}

.submission-row {
grid-template-columns:1fr 90px;
}

.submission-meta {
display:none;
}

}

@media (max-width:700px) {

.app-header,
.teacher-dashboard-head {
flex-direction:column;
}

.header-actions {
width:100%;
justify-content:flex-start;
}

.mode-button {
flex:1;
}

.role-indicator {
flex-basis:100%;
max-width:none;
}

/* Keep the header compact so the map gets the screen. */
.app-header {
gap:10px;
padding:10px 16px;
}

.app-header h1 {
font-size:21px;
}

.brand {
gap:10px;
}

.brand-logo {
width:38px;
height:38px;
border-radius:10px;
}

.teacher-dashboard-head h1 {
font-size:23px;
}

.header-actions {
gap:6px;
}

.mode-button {
min-width:0;
padding:7px 12px;
font-size:14px;
}

.page-container,
.teacher-dashboard {
padding:7px;
}

.floating-toolbar {
left:6px;
width:51px;
top:6px;
bottom:6px;
padding:4px;
}

.toolbar-button {
width:39px;
min-height:23px;
max-height:33px;
}

.tool-flyout {
left:63px;
width:min(
280px,
calc(100% - 72px)
);
}

.floating-status {
left:66px;
font-size:11px;
}

.north-indicator {
display:none;
}

.canvas-actions {
right:7px;
}

.canvas-action-button strong {
display:none;
}

.colour-panel {
left:12px;
right:12px;
width:auto;
}

.permission-grid {
grid-template-columns:1fr;
}

}


/* =========================================================
STUDENT PROFILES + CLASS / GROUP WORK
========================================================= */

.task-copy {
max-width:980px;
}

.task-members {
margin-top:6px !important;
color:var(--forest-dark) !important;
font-weight:800;
}

.student-profile-page {
width:min(1280px,100%);
margin:0 auto;
padding:24px 16px 40px;
}

.student-profile-shell {
display:flex;
flex-direction:column;
gap:16px;
}

.profile-hero,
.profile-card {
background:rgba(251,250,246,.96);
border:1px solid var(--line);
border-radius:14px;
}

.profile-hero {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:22px 24px;
}

.profile-hero h1 {
margin:4px 0 2px;
font-size:30px;
letter-spacing:-.4px;
}

.profile-hero p {
margin:0;
color:var(--muted);
font-weight:700;
}

.profile-grid {
display:grid;
grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);
gap:16px;
align-items:start;
}

.profile-card {
padding:20px;
}

.profile-card h2 {
margin:4px 0 6px;
font-size:20px;
}

.profile-card > p {
margin:0 0 15px;
color:var(--muted);
font-size:13px;
line-height:1.5;
}

.profile-section-head,
.teacher-panel-actions {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}

.profile-section-head h2,
.teacher-panel-actions h2 {
margin:3px 0 0;
}

.task-code-entry {
display:flex;
gap:8px;
align-items:stretch;
}

.task-code-entry input {
min-width:0;
flex:1;
min-height:46px;
padding:10px 12px;
border:1.5px solid #8f918b;
border-radius:9px;
background:white;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}

.student-projects-list {
display:flex;
flex-direction:column;
gap:9px;
margin-top:14px;
}

.student-project-card {
width:100%;
text-align:left;
padding:13px 14px;
border:1px solid #d8d5cb;
border-radius:10px;
background:#fffdf8;
cursor:pointer;
}

.student-project-card:hover {
border-color:var(--forest);
background:#f3f7f3;
}

.student-project-card-updated {
animation:student-project-card-updated 2.4s ease-out;
}

@keyframes student-project-card-updated {
0%,
40% {
border-color:var(--forest);
background:#e4efe6;
box-shadow:0 0 0 3px #e4efe6;
}
}

@media (prefers-reduced-motion: reduce) {
.student-project-card-updated {
animation:none;
border-color:var(--forest);
}
}

.student-projects-notice {
margin:12px 0 0;
padding:8px 10px;
border-radius:8px;
background:#e4efe6;
color:#2e6745;
font-size:12px;
font-weight:800;
}

.student-project-card-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}

.student-project-card strong {
display:block;
font-size:14px;
}

.student-project-meta,
.student-project-members {
margin-top:5px;
color:var(--muted);
font-size:11px;
line-height:1.4;
}

.student-project-members {
color:var(--forest-dark);
}

.student-project-status {
flex:0 0 auto;
padding:4px 8px;
border-radius:999px;
background:#ecebe6;
font-size:10px;
font-weight:900;
text-transform:capitalize;
}

.student-project-status.submitted {
background:#e8f3eb;
color:#2e6745;
}

.student-login-modal select {
width:100%;
min-height:50px;
padding:9px 11px;
border:1.5px solid #8f918b;
border-radius:8px;
background:white;
font-size:16px;
}

.group-modal-card {
max-height:min(760px,calc(100vh - 40px));
display:flex;
flex-direction:column;
}

.group-members-list {
min-height:80px;
max-height:360px;
overflow:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
padding:4px 2px;
}

.group-member-option {
display:flex;
align-items:flex-start;
gap:8px;
padding:9px 10px;
border:1px solid #ddd9cf;
border-radius:8px;
background:#fffdf8;
cursor:pointer;
font-size:12px;
line-height:1.3;
}

.group-member-option.current-student {
border-color:#b7cfbf;
background:#f2faf4;
cursor:default;
}

.group-member-option input {
margin-top:2px;
}


/* =========================================================
TEACHER NAVIGATION
========================================================= */

.teacher-tabs {
display:inline-flex;
gap:5px;
margin-bottom:14px;
padding:4px;
border:1px solid var(--line);
border-radius:10px;
background:rgba(251,250,246,.94);
}

.teacher-tab-button {
min-width:110px;
padding:9px 14px;
border:0;
border-radius:7px;
background:transparent;
cursor:pointer;
font-weight:800;
}

.teacher-tab-button.active {
background:var(--forest);
color:white;
}

.teacher-panel-actions {
margin-bottom:12px;
}

.task-class-assignment {
margin:18px 0;
padding:14px;
border:1px solid #ddd9cf;
border-radius:10px;
background:#faf9f4;
}

.task-class-assignment h3 {
margin-top:0;
}

.class-checkbox-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:7px;
}

.class-checkbox-option {
display:flex !important;
align-items:center;
gap:7px;
margin:0 !important;
padding:9px 10px;
border:1px solid #d8d5cb;
border-radius:8px;
background:white;
font-weight:700 !important;
}

.class-checkbox-option input {
margin:0;
}


/* =========================================================
CLASS MANAGEMENT
========================================================= */

.inline-form-row {
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}

.inline-form-row input[type=text] {
flex:1 1 260px;
min-width:0;
}

.class-import-card,
.manual-student-card {
margin-top:18px;
padding:15px;
border:1px solid #ddd9cf;
border-radius:10px;
background:#faf9f4;
}

.class-import-card h3,
.manual-student-card h3 {
margin-top:0;
}

.class-import-card input[type=file] {
display:block;
width:100%;
margin:10px 0;
padding:10px;
border:1px dashed #bdb9ad;
border-radius:8px;
background:white;
}

.class-import-preview {
max-height:190px;
overflow:auto;
margin:10px 0;
padding:10px;
border:1px solid #d8d5cb;
border-radius:8px;
background:white;
font-size:12px;
line-height:1.45;
}

.class-import-preview strong {
display:block;
margin-bottom:5px;
}

.roster-head {
margin-top:22px;
}

.class-roster-list {
display:flex;
flex-direction:column;
gap:6px;
margin-top:8px;
}

.class-roster-row {
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
gap:10px;
align-items:center;
padding:9px 10px;
border:1px solid #ddd9cf;
border-radius:8px;
background:#fffdf8;
}

.roster-number {
color:var(--muted);
font-size:11px;
font-weight:800;
}

.roster-name {
font-size:13px;
font-weight:700;
}

.roster-remove {
padding:6px 9px;
border:1px solid #d7aaa3;
border-radius:7px;
background:#fff5f3;
color:#8d3f35;
cursor:pointer;
font-size:11px;
font-weight:800;
}

button:disabled {
cursor:not-allowed;
opacity:.55;
}

@media (max-width:850px) {

.profile-grid {
grid-template-columns:1fr;
}

.group-members-list {
grid-template-columns:1fr;
}

.teacher-panel-actions,
.profile-section-head {
flex-direction:column;
}

}

@media (max-width:600px) {

.profile-hero {
flex-direction:column;
}

.task-code-entry {
flex-direction:column;
}

.inline-form-row {
align-items:stretch;
}

.inline-form-row > button {
flex:1 1 auto;
}

}


/* =========================================================
STUDENT MARKED WORK / TEACHER FEEDBACK
========================================================= */

.student-review-panel {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-top:10px;
padding:14px 16px;
border:1px solid #c9d7cc;
border-left:5px solid var(--forest);
border-radius:12px;
background:#f4f8f3;
}

.student-review-panel h2 {
margin:3px 0 3px;
font-size:18px;
}

.student-review-copy {
min-width:0;
}

.student-review-date {
margin:0 0 8px;
color:var(--muted);
font-size:11px;
}

.student-review-feedback {
margin:0;
white-space:pre-wrap;
color:var(--ink);
font-size:13px;
line-height:1.5;
}

.student-project-badges {
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
flex-wrap:wrap;
}

.teacher-review-badge {
flex:0 0 auto;
padding:4px 8px;
border-radius:999px;
background:#e4efe6;
color:#2e6745;
font-size:10px;
font-weight:900;
}

.student-project-review-note {
margin-top:7px;
color:#2e6745;
font-size:11px;
font-weight:800;
line-height:1.35;
}

.submission-actions {
display:flex;
flex-direction:column;
gap:6px;
width:100%;
}

.submission-actions > button {
width:100%;
min-width:0;
}

@media (max-width:700px) {

.student-review-panel {
flex-direction:column;
}

}


/* =========================================================
GUEST ACCOUNTS + SINGLE-EDITOR LOCK
========================================================= */

.edit-lock-banner {
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:10px;
padding:13px 15px;
border:1px solid #dfc28d;
border-left:5px solid #b8802f;
border-radius:12px;
background:#fff8ea;
}

.edit-lock-banner strong {
display:block;
margin-top:3px;
font-size:14px;
}

.edit-lock-banner p {
margin:4px 0 0;
color:#6f634f;
font-size:12px;
line-height:1.45;
}

.edit-lock-actions {
display:flex;
flex-wrap:wrap;
gap:8px;
flex-shrink:0;
}

/* Edit Request prompt on the Editor's device: floats over the map
   so the Editor can keep drawing while deciding. */
.edit-request-prompt {
position:fixed;
z-index:60;
left:50%;
bottom:24px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:18px;
width:min(560px, calc(100vw - 32px));
box-sizing:border-box;
padding:14px 16px;
border:1px solid #9fc2a8;
border-left:5px solid #2f7d4a;
border-radius:12px;
background:#f1faf3;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.18);
}

.edit-request-prompt[hidden] {
display:none;
}

.edit-request-prompt strong {
display:block;
margin-top:3px;
font-size:15px;
}

.edit-request-prompt p {
margin:4px 0 0;
color:#2f5a3c;
font-size:13px;
font-variant-numeric:tabular-nums;
}

.google-sign-in-button {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
margin:4px 0 12px;
padding:11px 14px;
border:1px solid #c8c7c0;
border-radius:10px;
background:#fff;
color:#1f1f1f;
font-size:14px;
font-weight:700;
cursor:pointer;
}

.google-sign-in-button:hover {
background:#f6f8fb;
border-color:#2f4f7a;
}

.google-sign-in-button:disabled {
opacity:.6;
cursor:wait;
}

.login-divider {
display:flex;
align-items:center;
gap:10px;
margin:18px 0 10px;
color:var(--muted);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.7px;
}

.login-divider::before,
.login-divider::after {
content:"";
height:1px;
flex:1;
background:var(--line);
}

.guest-entry-actions {
display:flex;
flex-direction:column;
gap:8px;
}

.full-width-button {
width:100%;
}

.guest-modal-card {
width:min(520px,100%);
}

.guest-account-note {
margin:12px 0 0;
padding:9px 10px;
border-radius:8px;
background:#f5f3ed;
color:var(--muted);
font-size:11px;
line-height:1.45;
}

.guest-access-setting {
display:flex !important;
align-items:flex-start;
gap:9px;
margin:12px 0 0 !important;
padding:11px 12px;
border:1px solid #d8d5cb;
border-radius:9px;
background:#fffdf8;
}

.guest-access-setting input {
margin-top:3px;
}

.guest-access-setting span {
display:block;
}

.guest-access-setting strong {
display:block;
font-size:12px;
}

.guest-access-setting small {
display:block;
margin-top:3px;
color:var(--muted);
font-size:10px;
font-weight:500;
line-height:1.4;
}

@media (max-width:700px) {

.edit-lock-banner,
.edit-request-prompt {
flex-direction:column;
align-items:stretch;
}

}

.task-intro-back {
flex-shrink:0;
align-self:center;
}


/* =========================================================
APP FEEDBACK
========================================================= */

.app-feedback-card textarea {
width:100%;
padding:9px 11px;
border:1.5px solid #8f918b;
border-radius:8px;
background:white;
font:inherit;
font-size:16px;
resize:vertical;
}

.app-feedback-card textarea:focus {
outline:3px solid rgba(79,103,89,.18);
border-color:var(--forest);
}

.app-feedback-count,
.app-feedback-hint {
margin:4px 0 0;
color:#6b6d68;
font-size:12px;
}

.app-feedback-count {
text-align:right;
}

.app-feedback-previews {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}

.app-feedback-preview {
position:relative;
width:88px;
height:66px;
border:1px solid #c9cbc4;
border-radius:6px;
overflow:hidden;
background:#f4f2ec;
}

.app-feedback-preview img {
width:100%;
height:100%;
object-fit:cover;
}

.app-feedback-preview button {
position:absolute;
top:2px;
right:2px;
width:24px;
height:24px;
border:0;
border-radius:999px;
background:rgba(0,0,0,.65);
color:white;
font-size:13px;
cursor:pointer;
}
:root {

--paper:#f3f0e8;

--paper-2:#fbfaf6;

--ink:#252a28;

--muted:#6e746f;

--line:#d7d4ca;

--forest:#4f6759;

--forest-dark:#34483d;

--sand:#d9c8a7;

--blue:#50779b;

--red:#b95a4c;

}



* {

box-sizing:border-box;

}



[hidden] {

display:none !important;

}



html,

body {

margin:0;

min-height:100%;

}



body {

font-family:Inter, Arial, sans-serif;

color:var(--ink);

background:

radial-gradient(

circle at 10% 10%,

rgba(79,103,89,.045) 0 1px,

transparent 1.5px

)

0 0 / 28px 28px,

linear-gradient(

180deg,

#f4f1e9,

#ece8de

);

}



body.modal-open {

overflow:hidden;

}



button,

input,

select,

textarea {

font:inherit;

}



button {

color:inherit;

}



/* =========================================================

HEADER

========================================================= */



.app-header {

display:flex;

justify-content:space-between;

align-items:center;

gap:24px;

padding:14px 24px 12px;

background:rgba(251,250,246,.96);

border-bottom:1px solid var(--line);

}



.brand {

display:flex;

align-items:center;

gap:12px;

min-width:0;

}



.brand-logo {

flex-shrink:0;

width:48px;

height:48px;

border-radius:12px;

box-shadow:0 2px 6px rgba(52,72,61,.22);

}



.app-header h1,

.teacher-dashboard-head h1 {

margin:2px 0 3px;

font-size:28px;

letter-spacing:-.4px;

}



.app-header p,

.teacher-dashboard-head p {

margin:0;

color:var(--muted);

font-size:13px;

}



.eyebrow,

.mini-label {

color:var(--forest);

font-weight:800;

font-size:11px;

letter-spacing:1.7px;

}



.header-actions,

.teacher-head-actions {

display:flex;

align-items:center;

gap:8px;

flex-wrap:wrap;

justify-content:flex-end;

}



#cloudStatus,

#studentBadge {

display:none !important;

}



.student-badge,

.cloud-status,

.task-code-pill {

padding:8px 11px;

border:1px solid var(--line);

border-radius:999px;

background:#fffdf8;

font-size:12px;

font-weight:700;

}



.cloud-status {

color:var(--muted);

font-weight:600;

}



.cloud-status.good {

color:#2f6b4a;

border-color:#b7cfbf;

background:#f2faf4;

}



.cloud-status.busy {

color:#765c22;

border-color:#dccd9b;

background:#fffaf0;

}



.cloud-status.bad {

color:#8d3f35;

border-color:#e0bbb4;

background:#fff5f3;

}



.mode-button {

min-width:92px;

padding:9px 16px;

border:1px solid #c8c7c0;

border-radius:999px;

background:#fffdf8;

color:var(--ink);

font-weight:800;

cursor:pointer;

transition:

background .15s ease,

border-color .15s ease,

transform .15s ease;

}



.mode-button:hover {

background:#f0f4ef;

border-color:var(--forest);

}



.mode-button:active {

transform:translateY(1px);

}



.mode-button:focus-visible {

outline:3px solid rgba(79,103,89,.18);

outline-offset:2px;

}



/* Who is using the app right now: Student or Teacher. */

.mode-button.active {

background:var(--role-colour);

border-color:var(--role-colour);

color:#fff;

}



.app-header {

--role-colour:var(--forest);

border-top:4px solid var(--role-colour);

}



body.role-teacher .app-header {

--role-colour:#2f4f7a;

}



.role-indicator {

display:flex;

align-items:center;

gap:8px;

max-width:340px;

padding:5px 12px 5px 5px;

border:1px solid var(--role-colour);

border-radius:999px;

background:#fffdf8;

font-size:12px;

}



.role-indicator-label {

padding:4px 10px;

border-radius:999px;

background:var(--role-colour);

color:#fff;

font-size:11px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

}



.role-indicator-detail {

overflow:hidden;

color:var(--ink);

font-weight:700;

white-space:nowrap;

text-overflow:ellipsis;

}



/* =========================================================

MAIN PAGE

========================================================= */



.page-container,

.teacher-dashboard {

width:min(2000px,100%);

margin:0 auto;

padding:14px;

}



.task-intro,

.teacher-feedback-panel,

.legend-section,

.learning-reminder,

.teacher-editor-card,

.teacher-task-sidebar {

background:rgba(251,250,246,.94);

border:1px solid var(--line);

border-radius:12px;

}



.task-intro {

display:flex;

justify-content:space-between;

gap:24px;

align-items:flex-start;

margin-bottom:10px;

padding:12px 15px;

}



.task-intro h2 {

margin:2px 0 0;

font-size:18px;

}



.task-intro p {

margin:2px 0 0;

color:var(--muted);

max-width:900px;

font-size:13px;

line-height:1.5;

}



/* =========================================================

MAP CANVAS

========================================================= */



.canvas-wrap {

position:relative;

width:100%;

aspect-ratio:1600 / 675;

overflow:hidden;

background:#fff;

border:3px solid #343936;

border-radius:14px;

box-shadow:0 5px 20px rgba(43,48,45,.08);

}



#drawingCanvas {

position:absolute;

inset:0;

z-index:2;

width:100%;

height:100%;

display:block;

touch-action:none;

}



.canvas-background {

fill:#fff;

}



.grid-line {

stroke:#e8e8e3;

stroke-width:1;

}



/* =========================================================

REFERENCE MAP

========================================================= */



.reference-overlay {

position:absolute;

inset:0;

z-index:8;

width:100%;

height:100%;

object-fit:fill;

opacity:.95;

pointer-events:none;

user-select:none;

}



/* =========================================================

STATUS

========================================================= */



.floating-status {

position:absolute;

z-index:16;

top:13px;

left:86px;

max-width:calc(100% - 420px);

padding:8px 13px;

border:1px solid rgba(46,53,49,.15);

border-radius:9px;

background:rgba(255,253,248,.91);

backdrop-filter:blur(5px);

font-size:13px;

pointer-events:none;

}



/* =========================================================

NORTH

========================================================= */



.north-indicator {

position:absolute;

z-index:23;

top:12px;

right:12px;

width:82px;

min-height:92px;

padding:7px 6px 6px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:2px;

border:1px solid rgba(0,0,0,.15);

border-radius:10px;

background:rgba(255,253,248,.93);

cursor:grab;

touch-action:none;

user-select:none;

transition:

background .15s ease,

border-color .15s ease,

transform .15s ease;

}



.north-indicator:hover,

.north-indicator.setting-north {

border-color:var(--forest);

background:#f4f8f3;

}



.north-indicator:active {

cursor:grabbing;

}



.north-arrow-inner {

display:flex;

flex-direction:column;

align-items:center;

transform-origin:center;

}



.north-arrow-inner strong {

font-size:11px;

}



.north-arrow-symbol {

font-size:27px;

line-height:.9;

margin-top:-2px;

}



/* =========================================================

MAP PREVIEW

========================================================= */



.map-preview {

position:relative;

aspect-ratio:1600 / 675;

overflow:hidden;

background:#fff;

border:1px solid #d9d8d0;

border-radius:8px;

}



.map-preview svg {

display:block;

width:100%;

height:100%;

pointer-events:none;

}



.map-preview-north {

position:absolute;

top:4px;

right:4px;

display:flex;

flex-direction:column;

align-items:center;

padding:1px 4px;

border-radius:5px;

background:rgba(255,253,248,.9);

font-size:13px;

line-height:.95;

transform-origin:center;

pointer-events:none;

}



.map-preview-north strong {

font-size:8px;

}



.north-control-label {

margin-top:2px;

color:var(--forest-dark);

font-size:8px;

font-weight:900;

letter-spacing:.8px;

}



.north-angle-label {

color:var(--muted);

font-size:9px;

font-weight:800;

}



/* =========================================================

FLOATING TOOLBAR

========================================================= */



.floating-toolbar {

position:absolute;

z-index:30;

left:12px;

top:12px;

bottom:12px;

width:57px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:3px;

padding:6px;

border:1px solid rgba(0,0,0,.2);

border-radius:12px;

background:rgba(35,42,39,.95);

box-shadow:0 5px 18px rgba(0,0,0,.2);

opacity:.4;

transition:opacity .15s ease;

}



.floating-toolbar:hover,

.floating-toolbar:focus-within,

.floating-toolbar.open,

.floating-toolbar.recently-used {

opacity:.9;

}



.toolbar-button {

position:relative;

width:43px;

height:auto;

flex:1 1 40px;

min-height:27px;

max-height:40px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid transparent;

border-radius:8px;

background:transparent;

color:white;

cursor:pointer;

}



.toolbar-button:hover {

background:rgba(255,255,255,.14);

}



.toolbar-button.active {

color:#355f4a;

background:#fffdf8;

border-color:rgba(255,255,255,.8);

}



.toolbar-button:disabled {

opacity:.22;

cursor:not-allowed;

}



.toolbar-icon {

font-size:20px;

line-height:1;

}



.layer-icon {

font-size:22px;

font-weight:800;

}



.toolbar-divider {

width:30px;

height:1px;

flex:0 0 1px;

background:rgba(255,255,255,.22);

margin:1px 0;

}



.toolbar-tooltip {

position:absolute;

left:53px;

top:50%;

transform:translateY(-50%);

display:none;

white-space:nowrap;

padding:6px 9px;

border-radius:6px;

background:rgba(28,34,31,.97);

color:white;

font-size:12px;

pointer-events:none;

}



.toolbar-button:hover .toolbar-tooltip {

display:block;

}



/* =========================================================

TOOL FLYOUTS

========================================================= */



.tool-flyout {

position:absolute;

z-index:29;

left:78px;

top:50%;

transform:translateY(-50%);

width:310px;

padding:15px;

border:1px solid rgba(0,0,0,.16);

border-radius:12px;

background:rgba(255,253,248,.98);

backdrop-filter:blur(8px);

box-shadow:0 10px 28px rgba(0,0,0,.2);

}



.compact-flyout {

width:275px;

}



.more-flyout {

width:290px;

max-height:calc(100% - 24px);

overflow:auto;

}



.flyout-heading,

.colour-panel-head,

.teacher-section-head {

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:12px;

}



.flyout-heading {

margin-bottom:12px;

}



.flyout-heading strong,

.colour-panel-head strong {

display:block;

font-size:17px;

}



.flyout-heading span,

.colour-panel-head span {

display:block;

color:var(--muted);

margin-top:2px;

font-size:11px;

}



.flyout-close,

.colour-panel-head button {

width:29px;

height:29px;

border:0;

border-radius:50%;

background:#ecebe6;

cursor:pointer;

font-size:20px;

}



/* =========================================================

SHAPE CHOICES

========================================================= */



.shape-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:7px;

}



.shape-choice {

min-height:63px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:3px;

border:1px solid #c9c8c1;

border-radius:8px;

background:#fff;

cursor:pointer;

font-size:12px;

}



.shape-choice:hover {

border-color:var(--forest);

background:#f3f7f3;

}



.shape-choice span {

font-size:23px;

}



/* =========================================================

INPUTS

========================================================= */



.tool-flyout label,

.colour-panel label,

.teacher-editor-card label,

.teacher-feedback-panel label {

display:block;

margin:10px 0 5px;

font-size:12px;

font-weight:800;

}



.tool-flyout select,

.tool-flyout input[type=color],

.teacher-editor-card input[type=text],

.teacher-editor-card textarea,

.teacher-feedback-panel textarea {

width:100%;

border:1px solid #aaa9a2;

border-radius:8px;

background:white;

padding:9px;

min-height:40px;

}



.tool-flyout input[type=color] {

height:46px;

padding:3px;

}



/* =========================================================

BUTTONS

========================================================= */



.primary-flyout-button,

.primary-button,

.modal-primary-button {

border:1px solid var(--forest-dark);

background:var(--forest);

color:white;

border-radius:8px;

padding:10px 13px;

cursor:pointer;

font-weight:800;

}



.primary-flyout-button {

width:100%;

margin-top:13px;

}



.secondary-flyout-button,

.quiet-button,

.modal-secondary-button,

.review-tool,

.danger-outline-button {

border:1px solid #c8c7c0;

background:#fffdf8;

border-radius:8px;

padding:9px 11px;

cursor:pointer;

}



.full-flyout-button {

width:100%;

margin-bottom:7px;

}



.danger-flyout-button {

width:100%;

margin-top:8px;

border:1px solid #d9aaa2;

background:#fff4f1;

color:#8d3f35;

border-radius:8px;

padding:9px;

cursor:pointer;

font-weight:700;

}



/* =========================================================

CANVAS ACTIONS

========================================================= */



.canvas-actions {

position:absolute;

z-index:22;

top:12px;

right:106px;

}



.canvas-action-button {

display:flex;

align-items:center;

gap:7px;

min-height:46px;

padding:8px 12px;

border:1px solid rgba(0,0,0,.15);

border-radius:10px;

background:rgba(255,253,248,.91);

cursor:pointer;

user-select:none;

touch-action:none;

}



.canvas-action-button.holding {

background:var(--forest);

color:white;

}



/* =========================================================

MAP OBJECTS

========================================================= */



.map-shape {

stroke:#3b3d3a;

stroke-width:4;

cursor:grab;

}



.map-shape.selected,

.map-shape.draft-shape {

stroke:#2e6eb6;

stroke-width:6;

}



.shape-label-container {

pointer-events:none;

overflow:visible;

}



.shape-label-box {

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

padding:4px;

text-align:center;

overflow:hidden;

overflow-wrap:anywhere;

word-break:break-word;

font-weight:800;

line-height:1.05;

color:#111;

text-shadow:

-1px -1px #fff,

1px -1px #fff,

-1px 1px #fff,

1px 1px #fff;

}



/* =========================================================

ROUTES

========================================================= */



.route-hit {

fill:none;

stroke:transparent;

pointer-events:stroke;

cursor:grab;

}



.path-line {

fill:none;

stroke-linecap:round;

stroke-linejoin:round;

stroke-dasharray:16 10;

pointer-events:none;

}



.road-edge,

.road-core {

fill:none;

stroke-linecap:round;

stroke-linejoin:round;

pointer-events:none;

}



.road-edge {

stroke:#474943;

}



.route-label {

font-family:Arial,sans-serif;

font-weight:800;

text-anchor:middle;

dominant-baseline:middle;

fill:#151815;

stroke:#fffdf8;

stroke-width:5;

paint-order:stroke;

pointer-events:none;

}



.route-label.path-label {

fill:#244d74;

}



.route-label.road-label {

fill:#33352f;

}



/* =========================================================

TRANSFORMS

========================================================= */



.transform-box {

fill:none;

stroke:#246fc1;

stroke-width:3;

stroke-dasharray:9 6;

pointer-events:none;

}



.rotate-line {

stroke:#246fc1;

stroke-width:3;

pointer-events:none;

}



.resize-handle {

fill:#fff;

stroke:#246fc1;

stroke-width:4;

pointer-events:all;

}



.handle-tl,

.handle-br {

cursor:nwse-resize;

}



.handle-tr,

.handle-bl {

cursor:nesw-resize;

}



.handle-left,

.handle-right {

cursor:ew-resize;

}



.handle-top,

.handle-bottom {

cursor:ns-resize;

}



.rotate-handle {

fill:#246fc1;

stroke:white;

stroke-width:4;

cursor:grab;

pointer-events:all;

}



.done-shape-button {

cursor:pointer;

pointer-events:all;

}



.done-shape-rect {

fill:#4f6759;

stroke:white;

stroke-width:3;

}



.done-shape-text {

fill:white;

font-size:18px;

font-weight:800;

text-anchor:middle;

dominant-baseline:middle;

pointer-events:none;

}



/* =========================================================

TEACHER INK

========================================================= */



.teacher-ink {

fill:none;

stroke:#d94b42;

stroke-width:6;

stroke-linecap:round;

stroke-linejoin:round;

pointer-events:none;

}



.teacher-review-toolbar {

position:absolute;

z-index:35;

right:12px;

bottom:12px;

display:flex;

gap:7px;

padding:7px;

border:1px solid rgba(0,0,0,.15);

border-radius:10px;

background:rgba(255,253,248,.95);

}



.review-tool.active {

background:#ffe9e5;

border-color:#d8877c;

color:#8b3e35;

font-weight:800;

}



/* =========================================================

LEGEND

========================================================= */



.legend-section {

margin-top:10px;

padding:14px 16px;

}



.section-heading h2 {

margin:0;

font-size:18px;

}



.section-heading p {

margin:3px 0 0;

color:var(--muted);

font-size:11px;

}



.legend-grid {

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(210px,1fr)

);

gap:8px 12px;

margin-top:10px;

}



.legend-item {

display:flex;

align-items:center;

gap:10px;

min-width:0;

padding:8px 9px;

border:1px solid #e1ded4;

border-radius:8px;

background:#fffdf9;

}



.legend-preview {

width:31px;

height:24px;

flex:0 0 31px;

overflow:visible;

}



.legend-text {

min-width:0;

line-height:1.1;

}



.legend-object-name {

font-size:13px;

font-weight:800;

overflow-wrap:anywhere;

}



.legend-category {

color:var(--muted);

font-size:10px;

margin-top:3px;

}



.legend-section {

grid-column:1 / -1;

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(210px,1fr)

);

gap:8px 12px;

}



.legend-section-title {

grid-column:1 / -1;

margin-top:4px;

color:#b3161a;

font-size:11px;

font-weight:800;

letter-spacing:.06em;

text-transform:uppercase;

}



.legend-hazards .legend-item {

border-color:#f1c4c4;

background:#fff6f5;

}



.map-hazard {

cursor:grab;

}



.hazard-selected {

fill:none;

stroke:#2e6eb6;

stroke-width:3;

stroke-dasharray:6 4;

}



.empty-legend {

color:#858984;

font-size:12px;

font-style:italic;

}



.learning-reminder {

margin-top:10px;

padding:11px 14px;

border-left:5px solid var(--forest);

font-size:13px;

line-height:1.5;

}



/* =========================================================

COLOUR PICKER

========================================================= */



.colour-panel {

position:fixed;

z-index:1500;

left:86px;

top:50%;

transform:translateY(-50%);

width:330px;

padding:16px;

background:#fffdf8;

border:1px solid #bebbb0;

border-radius:13px;

box-shadow:0 18px 48px rgba(0,0,0,.28);

}



.colour-swatches {

display:grid;

grid-template-columns:repeat(4,1fr);

gap:8px;

margin:14px 0;

}



.colour-swatches button {

height:42px;

border:2px solid white;

outline:1px solid #aaa79e;

border-radius:8px;

background:var(--swatch);

cursor:pointer;

}



.colour-panel input[type=color] {

width:100%;

height:58px;

padding:4px;

border:1px solid #aaa79e;

border-radius:8px;

background:white;

cursor:pointer;

}



/* =========================================================

MODALS

========================================================= */



.modal-overlay {

position:fixed;

inset:0;

z-index:1200;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

background:rgba(28,34,31,.62);

}



.object-modal {

width:min(520px,100%);

padding:27px;

border-radius:15px;

background:#fffdf8;

box-shadow:0 18px 48px rgba(0,0,0,.3);

}



.modal-step-label {

color:var(--forest);

font-size:11px;

font-weight:900;

letter-spacing:1.4px;

}



.object-modal h2 {

margin:5px 0 7px;

}



.modal-description {

color:var(--muted);

line-height:1.45;

margin:0 0 18px;

}



.object-modal label {

display:block;

margin:12px 0 6px;

font-size:13px;

font-weight:800;

}



.object-modal input,

.object-modal select {

width:100%;

min-height:50px;

padding:9px 11px;

border:1.5px solid #8f918b;

border-radius:8px;

background:white;

font-size:16px;

}



.object-modal input:focus,

.object-modal select:focus {

outline:3px solid rgba(79,103,89,.18);

border-color:var(--forest);

}



.modal-actions {

display:flex;

justify-content:flex-end;

gap:9px;

margin-top:21px;

}



.modal-primary-button,

.modal-secondary-button {

min-height:44px;

padding:9px 16px;

}



.modal-error {

margin-top:8px;

color:#a04438;

font-size:13px;

font-weight:700;

}



.text-link-button {

display:block;

margin:18px auto 0;

border:0;

background:none;

color:var(--forest-dark);

text-decoration:underline;

cursor:pointer;

}



/* =========================================================

TEACHER DASHBOARD

========================================================= */



.teacher-dashboard {

padding-top:18px;

}



.teacher-dashboard-head {

display:flex;

justify-content:space-between;

gap:20px;

align-items:flex-start;

margin-bottom:14px;

}



.teacher-layout {

display:grid;

grid-template-columns:280px minmax(0,1fr);

gap:14px;

}



.teacher-task-sidebar,

.teacher-editor-card {

padding:15px;

}



.teacher-task-sidebar h3 {

margin:0 0 10px;

}



.teacher-task-list {

display:flex;

flex-direction:column;

gap:7px;

}



.teacher-task-item {

text-align:left;

border:1px solid #d4d1c7;

background:#fffdf8;

border-radius:9px;

padding:10px;

cursor:pointer;

}



.teacher-task-item.active {

border-color:var(--forest);

background:#f0f4ef;

}



.teacher-task-item strong {

display:block;

}



.teacher-task-item span {

display:block;

margin-top:3px;

color:var(--muted);

font-size:11px;

}



.empty-teacher-state {

text-align:center;

padding:70px 20px;

color:var(--muted);

}



.teacher-editor-card h2,

.teacher-editor-card h3 {

margin:4px 0 8px;

}



.teacher-editor-card textarea {

resize:vertical;

}



.permission-grid {

display:grid;

grid-template-columns:

repeat(

2,

minmax(0,1fr)

);

gap:8px;

margin:8px 0 14px;

}



.permission-grid label {

margin:0;

padding:9px;

border:1px solid #ddd9cf;

border-radius:8px;

background:#fffdf8;

font-weight:600;

}



.permission-grid input {

margin-right:6px;

}



.helper-text {

color:var(--muted);

font-size:12px;

margin:2px 0 10px;

}



.reference-manager,

.submission-section {

margin-top:20px;

padding-top:18px;

border-top:1px solid var(--line);

}



.reference-manager-actions {

display:flex;

gap:8px;

align-items:center;

flex-wrap:wrap;

}



.danger-outline-button {

color:#8c3d34;

border-color:#d7aaa3;

}



.teacher-reference-preview {

display:block;

width:min(640px,100%);

margin-top:12px;

border:1px solid var(--line);

border-radius:9px;

background:white;

}



.submission-list {

display:flex;

flex-direction:column;

gap:7px;

margin-top:10px;

}



.submission-row {

display:grid;

grid-template-columns:

minmax(180px,1fr)

120px

110px

100px;

gap:10px;

align-items:center;

padding:9px 10px;

border:1px solid #ddd9cf;

border-radius:8px;

background:#fffdf8;

}
.submission-name strong {

display:block;

}



.submission-name span,

.submission-meta {

color:var(--muted);

font-size:11px;

}



.status-pill {

justify-self:start;

padding:5px 8px;

border-radius:999px;

font-size:10px;

font-weight:800;

background:#ecebe6;

}



.status-pill.submitted {

background:#e8f3eb;

color:#2e6745;

}



.submission-name .submission-marked {

display:block;

margin-top:2px;

color:#2e6745;

font-weight:800;

}



#startupTaskCode {

text-transform:uppercase;

letter-spacing:0.08em;

}



.submission-row-updated {

animation:submission-row-updated 2.4s ease-out;

}



@keyframes submission-row-updated {

0%,

40% {

border-color:var(--forest);

background:#e4efe6;

box-shadow:0 0 0 3px #e4efe6;

}

}



@media (prefers-reduced-motion: reduce) {

.submission-row-updated {

animation:none;

border-color:var(--forest);

}

}



/* =========================================================

GALLERY

========================================================= */



.teacher-section-buttons {

display:flex;

gap:8px;

}



.gallery-class + .gallery-class {

margin-top:22px;

}



.gallery-class h2 {

margin:0 0 10px;

font-size:18px;

}



.gallery-grid {

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:12px;

}



.gallery-tile {

display:flex;

flex-direction:column;

gap:8px;

min-width:0;

padding:8px;

border:1px solid #dedcd3;

border-radius:12px;

background:#fff;

text-align:left;

font:inherit;

color:inherit;

cursor:pointer;

}



.gallery-tile:hover,

.gallery-tile:focus-visible {

border-color:var(--forest);

}



.gallery-tile-map {

position:relative;

}



.gallery-tile-empty {

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

color:var(--muted);

font-size:13px;

font-weight:700;

pointer-events:none;

}



.gallery-tile-info {

display:grid;

grid-template-columns:minmax(0,1fr) auto;

gap:2px 8px;

align-items:center;

}



.gallery-tile-info strong {

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}



.gallery-tile-info .status-pill {

grid-row:span 2;

}



.gallery-tile-info span {

color:var(--muted);

font-size:11px;

}



.status-pill.marked {

background:#e5edf7;

color:#2a5384;

}



/* Who is being reviewed | written feedback | save. */

.teacher-feedback-panel {

display:grid;

grid-template-columns:

minmax(200px,300px)

minmax(0,1fr)

auto;

gap:22px;

align-items:start;

margin-top:10px;

padding:16px 18px;

}



.teacher-feedback-panel h2 {

margin:4px 0 0;

font-size:17px;

line-height:1.35;

}



.review-meta {

margin:6px 0 0;

color:var(--muted);

font-size:12px;

font-weight:700;

}



.teacher-feedback-panel label {

margin:0 0 6px;

}



.review-field textarea {

min-height:96px;

resize:vertical;

font:inherit;

font-size:14px;

line-height:1.45;

}



.review-actions {

display:flex;

flex-direction:column;

gap:7px;

align-self:end;

}



.review-actions .primary-button {

white-space:nowrap;

}



.review-draft-notice {

max-width:220px;

margin:0;

padding:8px 10px;

border:1px solid #dfc28d;

border-radius:8px;

background:#fff8ea;

color:#6f5326;

font-size:12px;

font-weight:700;

line-height:1.4;

}



.review-tool:disabled,

.teacher-feedback-panel .primary-button:disabled,

.teacher-feedback-panel textarea:disabled {

opacity:.45;

cursor:not-allowed;

}



.review-hint {

max-width:190px;

margin:0;

color:var(--muted);

font-size:11px;

line-height:1.4;

}



/* =========================================================

RESPONSIVE

========================================================= */



@media (max-height:800px) {



.floating-toolbar {

top:8px;

bottom:8px;

gap:2px;

padding:4px 6px;

}



.toolbar-button {

min-height:24px;

max-height:36px;

}



.toolbar-icon {

font-size:18px;

}



}



@media (max-width:1000px) {



.app-header {

align-items:flex-start;

}



.canvas-wrap {

min-height:520px;

aspect-ratio:auto;

}



.floating-status {

left:82px;

right:12px;

max-width:none;

}



.teacher-layout {

grid-template-columns:1fr;

}



.teacher-task-list {

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(180px,1fr)

);

}



.teacher-feedback-panel {

grid-template-columns:1fr;

}



.submission-row {

grid-template-columns:1fr 90px;

}



.submission-meta {

display:none;

}



}



@media (max-width:700px) {



.app-header,

.teacher-dashboard-head {

flex-direction:column;

}



.header-actions {

width:100%;

justify-content:flex-start;

}



.mode-button {

flex:1;

}



.role-indicator {

flex-basis:100%;

max-width:none;

}



/* Keep the header compact so the map gets the screen. */

.app-header {

gap:10px;

padding:10px 16px;

}



.app-header h1 {

font-size:21px;

}



.brand {

gap:10px;

}



.brand-logo {

width:38px;

height:38px;

border-radius:10px;

}



.teacher-dashboard-head h1 {

font-size:23px;

}



.header-actions {

gap:6px;

}



.mode-button {

min-width:0;

padding:7px 12px;

font-size:14px;

}



.page-container,

.teacher-dashboard {

padding:7px;

}



.floating-toolbar {

left:6px;

width:51px;

top:6px;

bottom:6px;

padding:4px;

}



.toolbar-button {

width:39px;

min-height:23px;

max-height:33px;

}



.tool-flyout {

left:63px;

width:min(

280px,

calc(100% - 72px)

);

}



.floating-status {

left:66px;

font-size:11px;

}



.north-indicator {

display:none;

}



.canvas-actions {

right:7px;

}



.canvas-action-button strong {

display:none;

}



.colour-panel {

left:12px;

right:12px;

width:auto;

}



.permission-grid {

grid-template-columns:1fr;

}



}



/* =========================================================

STUDENT PROFILES + CLASS / GROUP WORK

========================================================= */



.task-copy {

max-width:980px;

}



.task-members {

margin-top:6px !important;

color:var(--forest-dark) !important;

font-weight:800;

}



.student-profile-page {

width:min(1280px,100%);

margin:0 auto;

padding:24px 16px 40px;

}



.student-profile-shell {

display:flex;

flex-direction:column;

gap:16px;

}



.profile-hero,

.profile-card {

background:rgba(251,250,246,.96);

border:1px solid var(--line);

border-radius:14px;

}



.profile-hero {

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:18px;

padding:22px 24px;

}



.profile-hero h1 {

margin:4px 0 2px;

font-size:30px;

letter-spacing:-.4px;

}



.profile-hero p {

margin:0;

color:var(--muted);

font-weight:700;

}



.profile-grid {

display:grid;

grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);

gap:16px;

align-items:start;

}



.profile-card {

padding:20px;

}



.profile-card h2 {

margin:4px 0 6px;

font-size:20px;

}



.profile-card > p {

margin:0 0 15px;

color:var(--muted);

font-size:13px;

line-height:1.5;

}



.profile-section-head,

.teacher-panel-actions {

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:16px;

}



.profile-section-head h2,

.teacher-panel-actions h2 {

margin:3px 0 0;

}



.task-code-entry {

display:flex;

gap:8px;

align-items:stretch;

}



.task-code-entry input {

min-width:0;

flex:1;

min-height:46px;

padding:10px 12px;

border:1.5px solid #8f918b;

border-radius:9px;

background:white;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

}



.student-projects-list {

display:flex;

flex-direction:column;

gap:9px;

margin-top:14px;

}



.student-project-card {

width:100%;

text-align:left;

padding:13px 14px;

border:1px solid #d8d5cb;

border-radius:10px;

background:#fffdf8;

cursor:pointer;

}



.student-project-card:hover {

border-color:var(--forest);

background:#f3f7f3;

}



.student-project-card-updated {

animation:student-project-card-updated 2.4s ease-out;

}



@keyframes student-project-card-updated {

0%,

40% {

border-color:var(--forest);

background:#e4efe6;

box-shadow:0 0 0 3px #e4efe6;

}

}



@media (prefers-reduced-motion: reduce) {

.student-project-card-updated {

animation:none;

border-color:var(--forest);

}

}



.student-projects-notice {

margin:12px 0 0;

padding:8px 10px;

border-radius:8px;

background:#e4efe6;

color:#2e6745;

font-size:12px;

font-weight:800;

}



.student-project-card-head {

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:12px;

}



.student-project-card strong {

display:block;

font-size:14px;

}



.student-project-meta,

.student-project-members {

margin-top:5px;

color:var(--muted);

font-size:11px;

line-height:1.4;

}



.student-project-members {

color:var(--forest-dark);

}



.student-project-status {

flex:0 0 auto;

padding:4px 8px;

border-radius:999px;

background:#ecebe6;

font-size:10px;

font-weight:900;

text-transform:capitalize;

}



.student-project-status.submitted {

background:#e8f3eb;

color:#2e6745;

}



.student-login-modal select {

width:100%;

min-height:50px;

padding:9px 11px;

border:1.5px solid #8f918b;

border-radius:8px;

background:white;

font-size:16px;

}



.group-modal-card {

max-height:min(760px,calc(100vh - 40px));

display:flex;

flex-direction:column;

}



.group-members-list {

min-height:80px;

max-height:360px;

overflow:auto;

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:7px;

padding:4px 2px;

}



.group-member-option {

display:flex;

align-items:flex-start;

gap:8px;

padding:9px 10px;

border:1px solid #ddd9cf;

border-radius:8px;

background:#fffdf8;

cursor:pointer;

font-size:12px;

line-height:1.3;

}



.group-member-option.current-student {

border-color:#b7cfbf;

background:#f2faf4;

cursor:default;

}



.group-member-option input {

margin-top:2px;

}



/* =========================================================

TEACHER NAVIGATION

========================================================= */



.teacher-tabs {

display:inline-flex;

gap:5px;

margin-bottom:14px;

padding:4px;

border:1px solid var(--line);

border-radius:10px;

background:rgba(251,250,246,.94);

}



.teacher-tab-button {

min-width:110px;

padding:9px 14px;

border:0;

border-radius:7px;

background:transparent;

cursor:pointer;

font-weight:800;

}



.teacher-tab-button.active {

background:var(--forest);

color:white;

}



.teacher-panel-actions {

margin-bottom:12px;

}



.task-class-assignment {

margin:18px 0;

padding:14px;

border:1px solid #ddd9cf;

border-radius:10px;

background:#faf9f4;

}



.task-class-assignment h3 {

margin-top:0;

}



.class-checkbox-grid {

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:7px;

}



.class-checkbox-option {

display:flex !important;

align-items:center;

gap:7px;

margin:0 !important;

padding:9px 10px;

border:1px solid #d8d5cb;

border-radius:8px;

background:white;

font-weight:700 !important;

}



.class-checkbox-option input {

margin:0;

}



/* =========================================================

CLASS MANAGEMENT

========================================================= */



.inline-form-row {

display:flex;

gap:8px;

align-items:center;

flex-wrap:wrap;

}



.inline-form-row input[type=text] {

flex:1 1 260px;

min-width:0;

}



.class-import-card,

.manual-student-card {

margin-top:18px;

padding:15px;

border:1px solid #ddd9cf;

border-radius:10px;

background:#faf9f4;

}



.class-import-card h3,

.manual-student-card h3 {

margin-top:0;

}



.class-import-card input[type=file] {

display:block;

width:100%;

margin:10px 0;

padding:10px;

border:1px dashed #bdb9ad;

border-radius:8px;

background:white;

}



.class-import-preview {

max-height:190px;

overflow:auto;

margin:10px 0;

padding:10px;

border:1px solid #d8d5cb;

border-radius:8px;

background:white;

font-size:12px;

line-height:1.45;

}



.class-import-preview strong {

display:block;

margin-bottom:5px;

}



.roster-head {

margin-top:22px;

}



.class-roster-list {

display:flex;

flex-direction:column;

gap:6px;

margin-top:8px;

}



.class-roster-row {

display:grid;

grid-template-columns:42px minmax(0,1fr) auto;

gap:10px;

align-items:center;

padding:9px 10px;

border:1px solid #ddd9cf;

border-radius:8px;

background:#fffdf8;

}



.roster-number {

color:var(--muted);

font-size:11px;

font-weight:800;

}



.roster-name {

font-size:13px;

font-weight:700;

}



.roster-remove {

padding:6px 9px;

border:1px solid #d7aaa3;

border-radius:7px;

background:#fff5f3;

color:#8d3f35;

cursor:pointer;

font-size:11px;

font-weight:800;

}



button:disabled {

cursor:not-allowed;

opacity:.55;

}



@media (max-width:850px) {



.profile-grid {

grid-template-columns:1fr;

}



.group-members-list {

grid-template-columns:1fr;

}



.teacher-panel-actions,

.profile-section-head {

flex-direction:column;

}



}



@media (max-width:600px) {



.profile-hero {

flex-direction:column;

}



.task-code-entry {

flex-direction:column;

}



.inline-form-row {

align-items:stretch;

}



.inline-form-row > button {

flex:1 1 auto;

}



}



/* =========================================================

STUDENT MARKED WORK / TEACHER FEEDBACK

========================================================= */



.student-review-panel {

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:18px;

margin-top:10px;

padding:14px 16px;

border:1px solid #c9d7cc;

border-left:5px solid var(--forest);

border-radius:12px;

background:#f4f8f3;

}



.student-review-panel h2 {

margin:3px 0 3px;

font-size:18px;

}



.student-review-copy {

min-width:0;

}



.student-review-date {

margin:0 0 8px;

color:var(--muted);

font-size:11px;

}



.student-review-feedback {

margin:0;

white-space:pre-wrap;

color:var(--ink);

font-size:13px;

line-height:1.5;

}



.student-project-badges {

display:flex;

align-items:center;

justify-content:flex-end;

gap:6px;

flex-wrap:wrap;

}



.teacher-review-badge {

flex:0 0 auto;

padding:4px 8px;

border-radius:999px;

background:#e4efe6;

color:#2e6745;

font-size:10px;

font-weight:900;

}



.student-project-review-note {

margin-top:7px;

color:#2e6745;

font-size:11px;

font-weight:800;

line-height:1.35;

}



.submission-actions {

display:flex;

flex-direction:column;

gap:6px;

width:100%;

}



.submission-actions > button {

width:100%;

min-width:0;

}



@media (max-width:700px) {



.student-review-panel {

flex-direction:column;

}



}



/* =========================================================

GUEST ACCOUNTS + SINGLE-EDITOR LOCK

========================================================= */



.edit-lock-banner {

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

margin-bottom:10px;

padding:13px 15px;

border:1px solid #dfc28d;

border-left:5px solid #b8802f;

border-radius:12px;

background:#fff8ea;

}



.edit-lock-banner strong {

display:block;

margin-top:3px;

font-size:14px;

}



.edit-lock-banner p {

margin:4px 0 0;

color:#6f634f;

font-size:12px;

line-height:1.45;

}



.edit-lock-actions {

display:flex;

flex-wrap:wrap;

gap:8px;

flex-shrink:0;

}



/* Edit Request prompt on the Editor's device: floats over the map

   so the Editor can keep drawing while deciding. */

.edit-request-prompt {

position:fixed;

z-index:60;

left:50%;

bottom:24px;

transform:translateX(-50%);

display:flex;

align-items:center;

gap:18px;

width:min(560px, calc(100vw - 32px));

box-sizing:border-box;

padding:14px 16px;

border:1px solid #9fc2a8;

border-left:5px solid #2f7d4a;

border-radius:12px;

background:#f1faf3;

box-shadow:0 10px 30px rgba(0, 0, 0, 0.18);

}



.edit-request-prompt[hidden] {

display:none;

}



.edit-request-prompt strong {

display:block;

margin-top:3px;

font-size:15px;

}



.edit-request-prompt p {

margin:4px 0 0;

color:#2f5a3c;

font-size:13px;

font-variant-numeric:tabular-nums;

}



.google-sign-in-button {

display:flex;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

margin:4px 0 12px;

padding:11px 14px;

border:1px solid #c8c7c0;

border-radius:10px;

background:#fff;

color:#1f1f1f;

font-size:14px;

font-weight:700;

cursor:pointer;

}



.google-sign-in-button:hover {

background:#f6f8fb;

border-color:#2f4f7a;

}



.google-sign-in-button:disabled {

opacity:.6;

cursor:wait;

}



.login-divider {

display:flex;

align-items:center;

gap:10px;

margin:18px 0 10px;

color:var(--muted);

font-size:11px;

font-weight:800;

text-transform:uppercase;

letter-spacing:.7px;

}



.login-divider::before,

.login-divider::after {

content:"";

height:1px;

flex:1;

background:var(--line);

}



.guest-entry-actions {

display:flex;

flex-direction:column;

gap:8px;

}



.full-width-button {

width:100%;

}



.guest-modal-card {

width:min(520px,100%);

}



.guest-account-note {

margin:12px 0 0;

padding:9px 10px;

border-radius:8px;

background:#f5f3ed;

color:var(--muted);

font-size:11px;

line-height:1.45;

}



.guest-access-setting {

display:flex !important;

align-items:flex-start;

gap:9px;

margin:12px 0 0 !important;

padding:11px 12px;

border:1px solid #d8d5cb;

border-radius:9px;

background:#fffdf8;

}



.guest-access-setting input {

margin-top:3px;

}



.guest-access-setting span {

display:block;

}



.guest-access-setting strong {

display:block;

font-size:12px;

}



.guest-access-setting small {

display:block;

margin-top:3px;

color:var(--muted);

font-size:10px;

font-weight:500;

line-height:1.4;

}



@media (max-width:700px) {



.edit-lock-banner,

.edit-request-prompt {

flex-direction:column;

align-items:stretch;

}

}



.task-intro-back {

flex-shrink:0;

align-self:center;

}



/* =========================================================

APP FEEDBACK

========================================================= */



.app-feedback-card textarea {

width:100%;

padding:9px 11px;

border:1.5px solid #8f918b;

border-radius:8px;

background:white;

font:inherit;

font-size:16px;

resize:vertical;

}



.app-feedback-card textarea:focus {

outline:3px solid rgba(79,103,89,.18);

border-color:var(--forest);

}



.app-feedback-count,

.app-feedback-hint {

margin:4px 0 0;

color:#6b6d68;

font-size:12px;

}



.app-feedback-count {

text-align:right;

}



.app-feedback-previews {

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:8px;

}



.app-feedback-preview {

position:relative;

width:88px;

height:66px;

border:1px solid #c9cbc4;

border-radius:6px;

overflow:hidden;

background:#f4f2ec;

}



.app-feedback-preview img {

width:100%;

height:100%;

object-fit:cover;

}



.app-feedback-preview button {

position:absolute;

top:2px;

right:2px;

width:24px;

height:24px;

border:0;

border-radius:999px;

background:rgba(0,0,0,.65);

color:white;

font-size:13px;

cursor:pointer;

}



/* =========================================================
INTERACTION / TASK FOLDER POLISH
========================================================= */

:root {

--focus-ring:rgba(79,103,89,.24);

--shadow-soft:0 2px 8px rgba(43,48,45,.07);

--shadow-card:0 2px 10px rgba(43,48,45,.06);

--shadow-card-hover:0 8px 22px rgba(43,48,45,.12);

}


/* ---------------------------------------------------------
Consistent tactile feedback
--------------------------------------------------------- */

button,
.student-project-card,
.teacher-task-item,
.gallery-tile,
.shape-choice,
.class-checkbox-option,
.group-member-option {

-webkit-tap-highlight-color:transparent;

transition:
transform .14s ease,
box-shadow .14s ease,
background-color .14s ease,
border-color .14s ease,
color .14s ease,
opacity .14s ease;

}


button:not(:disabled):active,
.student-project-card:active,
.teacher-task-item:active,
.gallery-tile:active,
.shape-choice:active {

transform:translateY(1px) scale(.985);

}


button:not(:disabled):active {

box-shadow:inset 0 2px 4px rgba(29,39,33,.16);

}


button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.student-project-card:focus-visible,
.teacher-task-item:focus-visible,
.gallery-tile:focus-visible,
.shape-choice:focus-visible,
.class-checkbox-option:focus-within,
.group-member-option:focus-within {

outline:3px solid var(--focus-ring);

outline-offset:2px;

}


/* ---------------------------------------------------------
Primary actions
--------------------------------------------------------- */

.primary-button,
.primary-flyout-button,
.modal-primary-button {

box-shadow:0 2px 5px rgba(52,72,61,.16);

}


.primary-button:not(:disabled):hover,
.primary-flyout-button:not(:disabled):hover,
.modal-primary-button:not(:disabled):hover {

background:#435b4d;

border-color:#2f4137;

box-shadow:0 4px 10px rgba(52,72,61,.2);

transform:translateY(-1px);

}


.primary-button:not(:disabled):active,
.primary-flyout-button:not(:disabled):active,
.modal-primary-button:not(:disabled):active {

background:#3d5347;

transform:translateY(1px) scale(.985);

box-shadow:inset 0 2px 4px rgba(0,0,0,.18);

}


/* ---------------------------------------------------------
Secondary / quiet actions
--------------------------------------------------------- */

.secondary-flyout-button:not(:disabled):hover,
.quiet-button:not(:disabled):hover,
.modal-secondary-button:not(:disabled):hover,
.review-tool:not(:disabled):hover,
.mode-button:not(:disabled):hover {

background:#f0f4ef;

border-color:#8ba091;

box-shadow:0 3px 8px rgba(43,48,45,.08);

transform:translateY(-1px);

}


/* ---------------------------------------------------------
Danger actions
--------------------------------------------------------- */

.danger-outline-button:not(:disabled):hover,
.danger-flyout-button:not(:disabled):hover,
.roster-remove:not(:disabled):hover {

background:#fdebe7;

border-color:#c77f74;

color:#77342c;

box-shadow:0 3px 8px rgba(140,61,52,.08);

transform:translateY(-1px);

}


button:disabled {

transform:none !important;

box-shadow:none !important;

}


/* ---------------------------------------------------------
Form feedback
--------------------------------------------------------- */

input,
select,
textarea {

transition:
border-color .14s ease,
box-shadow .14s ease,
background-color .14s ease;

}


input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {

border-color:#7f9185;

}


input:focus-visible,
select:focus-visible,
textarea:focus-visible {

border-color:var(--forest) !important;

box-shadow:0 0 0 1px rgba(79,103,89,.08);

}


/* ---------------------------------------------------------
Profile / task folder hierarchy
--------------------------------------------------------- */

.profile-hero,
.profile-card {

box-shadow:var(--shadow-soft);

}


.profile-history-card {

border-color:#cfd5cf;

box-shadow:var(--shadow-card);

}


.profile-history-card .profile-section-head {

padding-bottom:12px;

margin-bottom:2px;

border-bottom:1px solid rgba(79,103,89,.1);

}


.oe-corrections-folder-hint {

border-color:#d2dbd4 !important;

background:
linear-gradient(
180deg,
#f7faf6,
#f2f6f1
) !important;

color:#48544c !important;

box-shadow:inset 3px 0 0 rgba(79,103,89,.32);

}


.oe-corrections-switch-task {

min-width:auto;

}


/* ---------------------------------------------------------
Submission cards
--------------------------------------------------------- */

.student-project-card {

position:relative;

overflow:hidden;

border-color:#d8d5cb;

box-shadow:0 1px 2px rgba(43,48,45,.04);

}


.student-project-card::before {

content:"";

position:absolute;

inset:0 auto 0 0;

width:4px;

background:transparent;

transition:background-color .14s ease;

}


.student-project-card:hover,
.student-project-card:focus-visible {

border-color:#9aab9f;

background:#f7faf6;

box-shadow:var(--shadow-card-hover);

transform:translateY(-2px);

}


.student-project-card:hover::before,
.student-project-card:focus-visible::before {

background:var(--forest);

}


.student-project-card:active {

background:#f0f5f0;

box-shadow:inset 0 2px 5px rgba(43,48,45,.1);

}


.student-project-card-head {

align-items:center;

}


.student-project-card strong {

font-size:15px;

line-height:1.25;

}


.student-project-meta {

font-variant-numeric:tabular-nums;

}


.student-project-badges {

gap:7px;

}


.teacher-review-badge,
.student-project-status {

border:1px solid transparent;

letter-spacing:.01em;

}


.teacher-review-badge {

border-color:#c9dfcf;

background:#e8f3eb;

}


.student-project-status.submitted {

border-color:#d1e4d6;

}


.student-project-review-note {

margin-top:9px;

padding-top:8px;

border-top:1px solid rgba(79,103,89,.1);

}


/* ---------------------------------------------------------
Corrections / marked-work states
--------------------------------------------------------- */

.oe-corrections-student-card-version {

margin-top:7px !important;

color:#59635d;

}


.oe-corrections-correction-note {

border-color:#d6ddd7 !important;

background:#f7f9f6;

box-shadow:inset 3px 0 0 rgba(79,103,89,.28);

}


.oe-corrections-actions {

gap:8px !important;

}


.student-review-panel {

box-shadow:0 3px 12px rgba(52,72,61,.07);

}


.teacher-review-badge,
.status-pill.submitted,
.student-project-status.submitted {

transition:
background-color .14s ease,
border-color .14s ease,
color .14s ease;

}


/* ---------------------------------------------------------
Current task strip
--------------------------------------------------------- */

.task-intro {

align-items:center;

box-shadow:0 2px 8px rgba(43,48,45,.05);

}


.task-copy {

flex:1 1 auto;

min-width:0;

}


.task-intro-back,
.oe-corrections-my-projects {

flex:0 0 auto;

}


/* ---------------------------------------------------------
Canvas / teacher controls
--------------------------------------------------------- */

.canvas-action-button:not(:disabled):hover,
.north-indicator:not(:disabled):hover {

box-shadow:0 5px 14px rgba(43,48,45,.12);

transform:translateY(-1px);

}


.toolbar-button:not(:disabled):active {

transform:scale(.93);

box-shadow:inset 0 2px 4px rgba(0,0,0,.25);

}


.shape-choice:not(:disabled):hover {

box-shadow:0 4px 10px rgba(43,48,45,.08);

transform:translateY(-1px);

}


.teacher-task-item:hover,
.teacher-task-item:focus-visible,
.gallery-tile:hover,
.gallery-tile:focus-visible {

box-shadow:0 5px 14px rgba(43,48,45,.09);

transform:translateY(-1px);

}


.teacher-task-item.active {

box-shadow:inset 3px 0 0 var(--forest);

}


/* ---------------------------------------------------------
Responsive polish
--------------------------------------------------------- */

@media (max-width:850px) {

.profile-history-card .profile-section-head {

align-items:stretch;

}


.oe-corrections-switch-task {

align-self:flex-start;

}

}


@media (max-width:700px) {

.task-intro {

flex-direction:column;

align-items:stretch;

gap:10px;

padding:12px;

}


.task-copy {

width:100%;

}


.task-intro-back,
.oe-corrections-my-projects {

width:100%;

align-self:stretch;

}


.student-project-card-head {

align-items:flex-start;

flex-direction:column;

gap:8px;

}


.student-project-badges {

justify-content:flex-start;

}


.student-project-card {

padding:12px;

}


.profile-card {

padding:16px;

}


.profile-hero {

padding:18px;

}


.student-review-panel {

padding:13px 14px;

}


.oe-corrections-actions {

width:100%;

}


.oe-corrections-actions > button {

flex:1 1 100%;

width:100%;

}

}


@media (max-width:480px) {

.student-profile-page {

padding:12px 8px 28px;

}


.profile-hero h1 {

font-size:25px;

}


.student-project-card strong {

font-size:14px;

}


.teacher-review-badge,
.student-project-status {

font-size:9px;

}

}


/* ---------------------------------------------------------
Respect reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {

*,
*::before,
*::after {

scroll-behavior:auto !important;

transition-duration:.01ms !important;

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

}


button:not(:disabled):active,
.student-project-card:hover,
.student-project-card:focus-visible,
.teacher-task-item:hover,
.gallery-tile:hover,
.shape-choice:hover {

transform:none !important;

}

}


/* =========================================================
FULL-WIDTH CURRENT TASK FOLDER
========================================================= */

.profile-start-card[hidden] + .profile-history-card {
grid-column:1 / -1;
width:100%;
max-width:none;
}


/* =========================================================
FINAL FIXED NORTH INDICATOR OVERRIDE
========================================================= */

/*
North is permanently fixed upwards.
This final override intentionally wins over older duplicated
North styles elsewhere in this stylesheet.
*/

.north-indicator {
position:absolute !important;
z-index:23 !important;
top:18px !important;
right:22px !important;
width:auto !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
transform:none !important;
cursor:default !important;
pointer-events:none !important;
touch-action:none !important;
user-select:none !important;
transition:none !important;
opacity:1 !important;
}

.north-indicator:hover,
.north-indicator:active,
.north-indicator.setting-north,
.north-indicator:not(:disabled):hover {
border:0 !important;
background:transparent !important;
box-shadow:none !important;
transform:none !important;
cursor:default !important;
}

.north-arrow-inner {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:1px !important;
transform:none !important;
transform-origin:center !important;
}

.north-fixed-label,
.north-arrow-inner strong {
margin:0 0 1px !important;
color:#2f3431 !important;
font-size:12px !important;
font-weight:900 !important;
line-height:1 !important;
}

.north-arrow-symbol {
display:block !important;
margin:0 !important;
color:#c9473f !important;
font-size:31px !important;
font-weight:700 !important;
line-height:.82 !important;
}

.north-control-label,
.north-angle-label {
display:none !important;
}

/* Keep the fixed North indicator visible on smaller screens too. */
@media (max-width:700px) {

.north-indicator {
display:flex !important;
top:12px !important;
right:12px !important;
}

.north-fixed-label,
.north-arrow-inner strong {
font-size:11px !important;
}

.north-arrow-symbol {
font-size:27px !important;
}

}