:root {
  color-scheme: light dark;
  --bg: #f6f7f2;
  --ink: #203b34;
  --muted: #5f6e72;
  --line: #dde5df;
  --panel: #ffffff;
  --panel-muted: #fbfcfa;
  --disabled-bg: #eef1ed;
  --accent: #1f7a68;
  --accent-dark: #15594d;
  --accent-contrast: #ffffff;
  --warn: #8f4d15;
  --soft: #e8f3ef;
  --tint: #f2f6ff;
  --tint-strong: #e9edff;
  --error-ink: #7b241c;
  --error-bg: #f9e4df;
  --warn-bg: #fff8e5;
  --warn-border: #d4a142;
  --success-ink: #375a2f;
  --shadow-rgb: 29, 42, 46;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111a18;
    --ink: #e6efec;
    --muted: #9fb0ac;
    --line: #2b3a37;
    --panel: #17211f;
    --panel-muted: #1c2725;
    --disabled-bg: #202b29;
    --accent: #2f9c85;
    --accent-contrast: #071f17;
    --accent-dark: #7fe0c8;
    --soft: #17302b;
    --tint: #1c2440;
    --tint-strong: #262f56;
    --error-ink: #ffb4a8;
    --error-bg: #3a1f1a;
    --warn-bg: #3a2f14;
    --warn-border: #caa257;
    --success-ink: #9fd68f;
    --shadow-rgb: 0, 0, 0;
  }
}

:root[data-theme="dark"] {
  --bg: #111a18;
  --ink: #e6efec;
  --muted: #9fb0ac;
  --line: #2b3a37;
  --panel: #17211f;
  --panel-muted: #1c2725;
  --disabled-bg: #202b29;
  --accent: #2f9c85;
  --accent-contrast: #071f17;
  --accent-dark: #7fe0c8;
  --soft: #17302b;
  --tint: #1c2440;
  --tint-strong: #262f56;
  --error-ink: #ffb4a8;
  --error-bg: #3a1f1a;
  --warn-bg: #3a2f14;
  --warn-border: #caa257;
  --success-ink: #9fd68f;
  --shadow-rgb: 0, 0, 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.5;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.05;
}

h2 {
  font-size: 20px;
  line-height: 1.2;
}

h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--soft);
  white-space: nowrap;
}

.session-menu {
  position: relative;
}

.session-menu:not([data-authenticated="true"]) .session-menu__items {
  display: none;
}

.session-menu summary {
  list-style: none;
  cursor: default;
}

.session-menu summary::-webkit-details-marker {
  display: none;
}

.session-menu[data-authenticated="true"] summary {
  cursor: pointer;
}

.session-menu__items {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.14);
}

.session-menu__items a,
.session-menu__items button {
  padding: 9px 10px;
  border: 0;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.session-menu__items a:hover,
.session-menu__items button:hover {
  background: var(--soft);
}

.status.error {
  color: var(--error-ink);
  background: var(--error-bg);
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.topnav a {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--accent-dark);
  text-decoration: none;
  background: var(--panel);
  font-weight: 700;
}

.topnav a:hover {
  border-color: var(--accent-dark);
  background: var(--soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-switcher {
  display: flex;
  gap: 4px;
}

.lang-switcher button {
  min-height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
}

.lang-switcher button:hover {
  border-color: var(--accent-dark);
  background: var(--soft);
}

.lang-switcher button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

html.i18n-pending body {
  visibility: hidden;
}

.home-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 56px);
}

.role-card {
  display: grid;
  gap: 10px;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}

.role-card strong {
  font-size: 26px;
  line-height: 1.1;
}

.role-card span:last-child {
  color: var(--muted);
}

.role-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.08);
}

.app-entry {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 6px 0;
}

.app-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.app-link {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}

.app-link > span {
  font-size: 26px;
}

.app-link small {
  color: var(--muted);
}

.app-link:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.admin-entry {
  padding: 0 clamp(18px, 4vw, 56px) 24px;
  text-align: right;
}

.admin-entry a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.admin-entry a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.student-card:hover {
  border-color: #5b6fbd;
}

.single-layout {
  display: grid;
  padding: 24px clamp(18px, 4vw, 56px);
}

@media (max-width: 700px) {
  .app-entry-grid {
    grid-template-columns: 1fr;
  }
}

.role-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 56px);
}

.role-area {
  display: grid;
  align-content: start;
  gap: 14px;
}

.role-heading {
  display: grid;
  gap: 4px;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 10px;
}

.teacher-intro {
  max-width: 62ch;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.teacher-primary-panel {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.06);
}

.teacher-auth-actions {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.teacher-collapsible {
  padding: 0;
  overflow: hidden;
}

.teacher-collapsible[open] {
  padding-bottom: 18px;
}

/* El panell d'administració viu dins d'un contenidor de la graella: sense
   min-width: 0 la taula l'eixamplaria i retallaria els botons en mòbil. */
#adminGroupsPanel {
  min-width: 0;
}

.panel-summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  padding: 18px;
}

.panel-summary::-webkit-details-marker {
  display: none;
}

.panel-summary::after {
  content: "＋";
  position: absolute;
  right: 18px;
  color: var(--accent-dark);
  font-size: 20px;
  line-height: 1;
}

.panel-summary {
  position: relative;
  padding-right: 52px;
}

.teacher-collapsible[open] .panel-summary::after {
  content: "−";
}

.panel-summary:hover {
  background: var(--soft);
}

.panel-content {
  padding: 0 18px;
}

.subsection-heading {
  display: grid;
  gap: 4px;
  margin: 18px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.student-area .role-heading {
  border-bottom-color: #5b6fbd;
}

.hidden {
  display: none !important;
}

.setup-dialog {
  max-width: 36rem;
  border: 1px solid var(--line, #d8dee8);
  border-radius: 1rem;
  padding: 1.5rem;
  background: var(--panel);
  color: var(--ink, #172033);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%);
}

.setup-dialog::backdrop {
  background: rgb(14 23 42 / 48%);
}

.setup-dialog h2 {
  margin-top: 0;
}

.setup-dialog li {
  margin: 0.55rem 0;
}

.setup-dialog form {
  display: grid;
  gap: 0.8rem;
}

.setup-dialog code {
  user-select: all;
  word-break: break-all;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 18px;
}

.panel-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

.grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
}

.activity {
  display: grid;
  gap: 12px;
  margin: 0;
}

.activity .panel-heading {
  margin-bottom: 0;
}

.question {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.question legend {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 700;
}

.choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 6px 0;
  color: var(--ink);
}

.choice input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
}

input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.teacher-context {
  display: grid;
  gap: 4px;
  margin: 8px 0 4px;
}

button {
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button,
.button-link {
  text-decoration: none;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-weight: 700;
}

button.secondary {
  background: var(--panel);
  color: var(--accent-dark);
}

button.danger {
  border-color: #b2472f;
  background: var(--panel);
  color: #8f2f1d;
}

button.compact {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.history-toggle {
  margin: 8px 0 12px;
}

.button-link.secondary {
  background: var(--panel);
  color: var(--accent-dark);
}

button:hover,
.button-link:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: var(--accent-contrast);
}

button.danger:hover {
  border-color: #8f2f1d;
  background: #8f2f1d;
  color: var(--accent-contrast);
}

button:disabled {
  border-color: var(--line);
  background: var(--disabled-bg);
  color: var(--muted);
  cursor: not-allowed;
}

.output {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
  background: var(--panel-muted);
}

.output.empty {
  color: var(--muted);
}

.output h3 {
  margin: 18px 0 8px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-profile {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--panel);
}

.student-profile__summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.student-profile__summary p {
  margin: 0;
}

.student-profile__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--tint);
  font-size: 32px;
  line-height: 1;
}

.student-icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
}

.student-icon {
  min-height: 46px;
  padding: 4px;
  border-color: var(--line);
  background: var(--panel);
  font-size: 24px;
  line-height: 1;
}

.student-icon.selected,
.student-icon:hover {
  border-color: #5b6fbd;
  background: var(--tint-strong);
  color: var(--ink);
}

.profile-status {
  margin: 0;
  color: var(--success-ink);
  font-weight: 700;
}

.pin-notice {
  margin-top: 8px;
  border: 1px solid var(--warn-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--warn-bg);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

/* Itineraries need room for complete activities, unlike compact PIN cards. */
#itinerariesPanel .itinerary-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

#itinerariesPanel .itinerary-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

#itinerariesPanel .itinerary-card ol {
  margin: 0;
  padding-inline-start: 1.5rem;
}

#itinerariesPanel .itinerary-card .actions {
  margin: 8px 0 12px;
}

/* Resource titles and actions need their own layout, separate from PIN cards. */
#resourcesPanel .cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

#resourcesPanel .card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

.credential {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel);
}

.credential strong {
  display: block;
  font-size: 22px;
}

.credential small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.credential:hover small {
  color: var(--accent-contrast);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 820px) {
  .topbar,
  .home-layout,
  .role-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topnav {
    margin-left: 0;
  }

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

[hidden] { display: none !important; }

/* Keep the pupil table usable without widening the page on small screens. */
.student-area, .student-area > .panel, #studentPanel { min-width: 0; }
.student-table-scroll { max-width: 100%; overflow-x: auto; position: relative; }
.student-table-scroll table { min-width: 520px; }

/* Shared Commons identity: a quiet workspace with clear, generous entry points. */
.home-layout, .single-layout, .role-layout {max-width:1200px; margin-inline:auto; padding-block:32px; gap:24px}
.topbar {padding-block:22px; gap:20px}
.topbar h1 {font-size:clamp(1.35rem, 2.5vw, 1.9rem); line-height:1.2; letter-spacing:-.035em}
.brand-lockup {display:flex; align-items:center; gap:14px; min-width:0}
.brand-lockup > div {min-width:0}
.brand-lockup img {flex-shrink:0; border-radius:14px}
.brand-lockup .eyebrow {font-size:10px; letter-spacing:.12em; margin-bottom:4px}
.topbar-actions {flex-wrap:wrap; justify-content:flex-end}
.lang-switcher {padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--panel-muted)}
.lang-switcher button {border-color:transparent; background:transparent; min-height:36px; padding:6px 9px}
.lang-switcher button.active {border-color:var(--accent); background:var(--accent)}
.status {font-size:13px; padding:10px 13px; white-space:normal}
.eyebrow {letter-spacing:.08em; font-size:11px}
.welcome {grid-column:1 / -1; display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:24px; padding:8px 0 16px}
.welcome-copy {max-width:620px}
.welcome h2 {margin:14px 0 18px; font-size:clamp(2.15rem, 4.5vw, 3.65rem); line-height:1.08; letter-spacing:-.055em; font-weight:750; text-wrap:balance}
.welcome-copy > p:last-child {max-width:47ch; color:var(--muted); font-size:17px; line-height:1.7}
.welcome-art {display:block; width:100%; height:auto; max-width:420px; justify-self:end}
.role-card {position:relative; gap:8px; border-radius:22px; padding:26px 30px; padding-right:66px; min-height:220px; transition:transform .18s ease, box-shadow .18s ease}
.role-card > span:not(.role-icon):not(.card-arrow) {max-width:49ch; font-size:14px; line-height:1.65}
.role-card strong {font-size:27px; letter-spacing:-.035em}
.role-card .eyebrow {font-size:10px!important}
.role-icon {display:grid; place-items:center; width:44px; height:44px; border-radius:14px; margin-bottom:6px; background:var(--soft); color:var(--accent-dark)}
.teacher-card {background:#174f43; border-color:#174f43; color:#fff}
.teacher-card .eyebrow, .teacher-card > span {color:#d5eade}
.teacher-card .role-icon {background:#ffffff18; color:#fff}
.student-card {background:color-mix(in srgb, #ffcf7a 20%, var(--panel)); border-color:color-mix(in srgb, #c28a32 28%, var(--line))}
.student-card .role-icon {background:color-mix(in srgb, #ffcf7a 36%, var(--panel)); color:var(--ink)}
.card-arrow {position:absolute; right:24px; top:28px; display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; color:inherit!important; font-size:21px; opacity:.7}
.role-card:hover {transform:translateY(-3px); box-shadow:0 12px 28px rgba(var(--shadow-rgb),.10)}
.teacher-card:hover {border-color:#338d70}
.app-entry {padding-top:22px; gap:6px}
.app-entry h2 {font-size:25px; letter-spacing:-.03em}
.app-entry-grid {grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:16px}
.app-link {--app-accent:#26705b; align-content:start; gap:10px; border-radius:19px; padding:20px; min-height:192px; transition:transform .18s ease, border-color .18s ease}
.app-link strong {font-size:16px; letter-spacing:-.02em}
.app-link small {font-size:13px; line-height:1.6}
.app-link .app-icon {display:grid; place-items:center; width:48px; height:48px; border-radius:15px; margin-bottom:6px; color:var(--app-accent); background:color-mix(in srgb,var(--app-accent) 10%,var(--panel))}
.blocs-link {--app-accent:#a75529}
.rebost-link {--app-accent:#257b61}
.play-link {--app-accent:#6657a2}
.resources-link {--app-accent:#3266a8}
.eduhoot-link {--app-accent:#a26716}
.app-link:hover {background:var(--panel); border-color:var(--app-accent); transform:translateY(-3px)}
.account-card {grid-column:1 / -1; min-height:0; padding:20px 26px; gap:4px; border-style:dashed; margin-top:4px}
.account-card strong {font-size:19px}
.account-card .eyebrow {display:none}
.role-heading {border:0; padding:0 0 8px; gap:8px}
.role-heading h2 {font-size:clamp(1.4rem, 3vw, 1.85rem); letter-spacing:-.035em}
.role-heading > .eyebrow {display:flex; align-items:center; gap:8px}
.role-heading > .eyebrow::before {content:''; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.student-area .role-heading > .eyebrow::before {background:#b38a39}
.panel {border-radius:18px; box-shadow:0 3px 12px rgba(var(--shadow-rgb),.025)}
.teacher-primary-panel {padding:24px; border-top:4px solid var(--accent)}
.teacher-auth-actions {padding-bottom:14px}
.panel-summary {padding-block:22px}
.panel-content {padding-inline:22px}
.topnav a {font-size:13px; padding:9px 11px}
input, select {border-radius:10px}
button, .button-link {transition:background .15s ease, border-color .15s ease}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {outline:3px solid var(--accent-dark); outline-offset:4px}
.admin-entry:has(> a[hidden]) {display:none}
@media (max-width:1050px) {
  .app-entry-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar {flex-wrap:wrap}
  .topnav {order:3; width:100%; margin:0}
}
@media (max-width:820px) {
  .topbar {display:flex; gap:16px; padding:20px}
  .topbar-actions {margin-left:auto}
  .welcome {grid-template-columns:1fr; padding-bottom:4px}
  .welcome-art {display:none}
  .welcome h2 {max-width:17ch; font-size:clamp(2.1rem, 7vw, 3rem)}
  .home-layout, .single-layout, .role-layout {padding:24px 20px; gap:18px}
  .home-layout {grid-template-columns:1fr}
  .role-card {min-height:205px; padding:24px; padding-right:60px}
  .account-card {min-height:0}
}
@media (max-width:540px) {
  .topbar-actions {width:100%; justify-content:space-between; margin:0}
  .app-entry-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .app-link {padding:16px; min-height:190px}
  .app-link strong {font-size:15px; overflow-wrap:anywhere}
  .app-link small {font-size:13px}
  .welcome-copy > p:last-child {font-size:15px}
  .teacher-primary-panel {padding:18px}
  .panel-summary {padding-left:18px}
  .status {max-width:100%; font-size:12px}
}
@media (prefers-reduced-motion:reduce) {
  .role-card, .app-link, button, .button-link {transition:none}
  .role-card:hover, .app-link:hover {transform:none}
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .app-icon {color:#e4ddd1}
}
:root[data-theme="dark"] .app-icon {color:#e4ddd1}