/* GoConqr · app/app.css · APP area: logged-in app, Explore and search, profiles, media, editor frames, error pages. Loaded after site.css. Every class starts with app-. Tokens only; no site.css component is restyled. 1 Page heads and layout 4 My resources (rows, grid, bulk) 7 Profiles 2 Home (create, checklist) 5 Media library 8 Explore and search 3 Filters 6 Notifications 9 Editors 10 Error pages */ /* 1 · Page heads and layout ---------------------------------------------------- */ .app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; } .app-head .lead { margin-top: 8px; } .app-head-acts { display: flex; flex-wrap: wrap; gap: 8px; } .app-sub { margin-top: 6px; color: var(--ink-2); } .app-gap { margin-top: var(--s-5); } @media (min-width: 900px) { .app-entries2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 48px; column-gap: 48px; } .app-entries2 > li:nth-child(2) { border-top: 0; } } .app-by { color: var(--ink-2); } .app-stars { display: inline-flex; align-items: center; gap: 3px; } .app-stars .i { width: 14px; height: 14px; fill: #a86a12; stroke: #a86a12; } /* 2 · Home: create row, checklist ---------------------------------------------- */ .app-create { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; } .app-ctile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; line-height: 1.25; text-align: left; transition: border-color var(--t), background-color var(--t); } .app-ctile > .i { width: 22px; height: 22px; color: var(--c); } .app-ctile:hover { border-color: var(--c); background: var(--paper-2); } .app-ctile--lead { grid-column: 1 / -1; padding: 16px 18px; } .app-ctile--lead > .i { width: 32px; height: 32px; } .app-ctile-text { display: grid; gap: 2px; min-width: 0; } .app-ctile-name { font-size: var(--fs-3); } .app-ctile-sub { font-size: var(--fs-1); font-weight: 400; color: var(--ink-2); } .app-ctile-go { margin-left: auto; color: var(--ink-3); } @media (min-width: 640px) { .app-create { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .app-create { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .app-ctile--lead { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: space-between; } .app-ctile--lead .app-ctile-go { margin-left: 0; } } /* Inicio's Crear as one compact row (Continuar comes first): a sideways scroll row below 900 px, 7 equal tiles above. */ .app-create--row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; margin-inline: -2px; scrollbar-width: thin; } .app-create--row .app-ctile { flex: 0 0 auto; } .app-create--row .app-ctile { gap: 8px; min-height: 48px; padding: 8px 14px; white-space: nowrap; } .app-create--row .app-ctile > .i { width: 20px; height: 20px; } @media (min-width: 900px) { .app-create--row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } .app-create--row .app-ctile { width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 12px; white-space: normal; } /* gate (16 Oct): "Diapositivas" spilled 6 px at 1024 with the sidebar; long words break instead */ .app-create--row .app-ctile > span { min-width: 0; max-width: 100%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } /* usability checks 21 Oct (item 15): "Diagrama de flujo" wrapped and "Flussdiagramm" hyphenated at 1366; a 14 px label in a slightly wider text box keeps every language on one line at 1366 px and up (at 1280 "Diagrama de flujo" wraps at the space; narrower screens may still break long words) */ .app-create--row .app-ctile { padding-inline: 8px; } .app-create--row .app-ctile > span { font-size: var(--fs-1); } } /* Inicio (usability checks 21 Oct, item 7): the announcement sits in the side column, so your resources start right under the greeting. Wide screens: Continuar | side (announcements, Primeros pasos), then Crear, then Sugerencias. Phones: Continuar and Sugerencias first (today's phone home: your recent resources, then suggestions), then Crear and the side column; the header keeps its Crear button. */ .app-home { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cont" "sugg" "create" "side"; } .app-home-cont { grid-area: cont; } .app-home-side { grid-area: side; min-width: 0; } .app-home > .app-home-create { grid-area: create; } .app-home > .app-home-sugg { grid-area: sugg; } .app-home > .sec, .app-home-side > .sec { margin-top: 24px; } .app-home > .app-home-cont { margin-top: 16px; } .app-home-side > .app-annc { margin-top: 24px; } @media (max-width: 1099px) { .app-home > .sec { margin-top: 16px; } .app-home > .app-home-cont { margin-top: 8px; } .app-home > .sec > .sec-head { padding-top: 10px; } } @media (min-width: 1100px) { .app-home { grid-template-columns: minmax(0, 1fr) 300px; -moz-column-gap: 56px; column-gap: 56px; align-items: start; grid-template-areas: "cont side" "create create" "sugg sugg"; } .app-home > .app-home-cont { margin-top: 24px; } .app-home > .app-home-create, .app-home > .app-home-sugg { margin-top: 40px; } .app-home-side > :first-child { margin-top: 24px; } .app-home-side > .app-annc + .sec { margin-top: 24px; } } .app-home-steps { max-width: 520px; } .app-check { display: grid; gap: 2px; margin-top: 12px; } .app-check-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 4px 8px; margin-inline: -8px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; } a.app-check-row:hover, button.app-check-row:hover { background: var(--paper-2); } .app-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--rule-3); border-radius: 50%; color: #fff; } .app-box .i { width: 14px; height: 14px; stroke-width: 3; } .app-check-row.is-done { color: var(--ink-3); } .app-check-row.is-done .app-box { border-color: var(--ok); background: var(--ok); } .app-check-row.is-done .app-check-t { text-decoration: line-through; text-decoration-color: var(--rule-3); } .app-check-row .i.chev { margin-left: auto; color: var(--ink-3); } .app-annc-when { margin-left: 8px; font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; } .app-annc p + p { margin-top: 4px; } /* 3 · Filters ------------------------------------------------------------------- */ .app-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 20px; } .app-filters > .app-f-search { grid-column: 1 / -1; } .app-f { display: grid; gap: 4px; min-width: 0; } .app-f .label { font-size: var(--fs-1); color: var(--ink-2); } .app-f-chip { display: flex; align-items: center; } @media (min-width: 900px) { .app-filters { display: flex; flex-wrap: wrap; } .app-filters > .app-f-search { flex: 1 1 220px; } .app-filters > .app-f { flex: 0 1 170px; } .app-filters > .app-f.app-f-search { flex: 1 1 220px; max-width: 440px; } } .app-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 52px; margin-top: 16px; padding-block: 4px; border-bottom: 1px solid var(--rule); } .app-listbar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; } .app-viewsw { display: inline-flex; padding: 2px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule-2); } .app-viewsw .icon-btn { width: var(--h-sm); height: var(--h-sm); } .app-viewsw .icon-btn[aria-pressed="true"] { background: var(--ink); color: #fff; } .app-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-1); color: var(--ink-2); } .app-active .chip { min-height: 36px; padding: 0 10px; font-size: var(--fs-1); } .app-chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } /* 4 · My resources: rows, grid, bulk bar -------------------------------------- */ /* Mis intentos: title and details on the left, the last score on the right */ .app-att-count { margin-top: 14px; } .app-attempts { margin-top: 4px; } .app-attempts .entry { grid-template-columns: minmax(0, 1fr) auto; -moz-column-gap: 16px; column-gap: 16px; align-items: center; } .app-attempts .entry > :not(.app-att-score) { grid-column: 1; } .app-att-score { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; line-height: 1.2; } .app-att-score b { font-size: var(--fs-3, 1.125rem); font-weight: 700; font-variant-numeric: tabular-nums; } .app-att-score b.is-low { color: var(--bad); } .app-att-score b.is-ok { color: var(--ok); } .app-att-score small { font-size: var(--fs-1); color: var(--ink-3); } .app-rows > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 4px; column-gap: 4px; } .app-sel { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; border-radius: var(--r); cursor: pointer; } .app-sel:hover { background: var(--paper-2); } .app-rows .entry { margin-inline: 0; padding-inline: 8px; } /* List rows lead with the type tile too (feedback GC-1087, 28 Oct 2026, "poco contraste": rows of text with an 8 px square read as flat beside the old cards' big coloured icons; Quizlet, Knowt and Classroom lead each row with one) */ .app-rows:not(.app-rows--grid) .entry { grid-template-columns: 44px minmax(0, 1fr); -moz-column-gap: 14px; column-gap: 14px; align-items: center; } .app-rows:not(.app-rows--grid) .entry > :not(.thumb) { grid-column: 2; } .app-rows:not(.app-rows--grid) .thumb { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; aspect-ratio: auto; margin: 0; border-top-width: 1px; } .app-rows:not(.app-rows--grid) .thumb--icon .i { width: 24px; height: 24px; } .app-rows > li.is-selected .entry { background: var(--accent-wash); } .app-rows--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-top: 16px; } @media (min-width: 900px) { .app-rows--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } } @media (min-width: 1300px) { .app-rows--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 379px) { .app-rows--grid { grid-template-columns: minmax(0, 1fr); } } .app-rows--grid > li { position: relative; display: block; } .app-rows--grid > li + li { border-top: 0; } .app-rows--grid .entry { margin: 0; padding: 0; } .app-rows--grid .entry:hover { background: none; } .app-rows--grid .thumb { display: flex; order: -1; margin-bottom: 8px; } .app-rows--grid .thumb--icon { display: grid; } .app-rows--grid .app-sel { position: absolute; top: 4px; left: 4px; z-index: 2; margin: 0; background: rgb(255 255 255 / .94); } .app-rows--grid .menu { position: absolute; top: 4px; right: 4px; z-index: 2; } .app-rows--grid .menu > .icon-btn { background: rgb(255 255 255 / .94); } .app-rows--grid > li.is-selected .thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .app-rows--grid > li.is-selected .entry { background: none; } .app-bulk { position: sticky; top: 8px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; padding: 6px 8px 6px 16px; border-radius: var(--r); background: var(--ink); color: #fff; box-shadow: var(--shadow-1); } .app-bulk-n { margin-right: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .app-bulk .btn-quiet { color: #fff; } .app-bulk .btn-quiet .i { color: #c9d3da; } .app-bulk .btn-quiet:hover { background: rgb(255 255 255 / .12); color: #fff; } .app-subj { display: grid; gap: 2px; margin-top: 8px; } .app-subj > li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; } .app-subj .app-subj { margin-top: 0; } .app-subj-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 10px; margin-left: -10px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; } .app-subj-btn:hover { background: var(--paper-2); } .app-subj-btn[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; } .app-subj-btn .meta { display: block; } .app-subj-btn .count { font-size: var(--fs-1); font-variant-numeric: tabular-nums; } /* 5 · Media library --------------------------------------------------------------- */ .app-quota { display: grid; gap: 8px; max-width: 520px; margin-top: 20px; } .app-quota-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: var(--fs-1); color: var(--ink-2); } .app-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 16px; } @media (min-width: 640px) { .app-media { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .app-media { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } } .app-mitem { position: relative; display: grid; gap: 4px; align-content: start; } .app-mthumb { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2); color: var(--ink-3); } .app-mthumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .app-mthumb > .i { width: 32px; height: 32px; } .app-mname { display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: var(--fs-1); line-height: 1.3; color: var(--ink); text-align: left; overflow-wrap: anywhere; } .app-mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin: 4px -6px 0 -12px; } .app-mrow .app-sel { margin-left: 0; } .app-mitem.is-selected .app-mthumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .app-drop { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed var(--rule-3); border-radius: var(--r); background: var(--paper-2); text-align: center; color: var(--ink-2); } .app-drop > .i { width: 28px; height: 28px; color: var(--ink-3); } .app-rec { display: flex; align-items: center; gap: 12px; } .app-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); } /* 6 · Notifications -------------------------------------------------------------- */ .app-day { margin-top: 28px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); } .app-notifs { margin-top: 6px; border-top: 1px solid var(--rule); } .app-notifs > li { border-bottom: 1px solid var(--rule); } .app-notif { display: grid; grid-template-columns: 8px 36px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 10px; margin-inline: -10px; border-radius: var(--r); line-height: 1.45; } a.app-notif:hover { background: var(--paper-2); } .app-notif-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); } .app-notif-ic .i { width: 18px; height: 18px; } .app-notif .notif-when { margin-top: 2px; } .app-notif:not(.is-unread) .notif-dot { visibility: hidden; } .app-notif.is-unread .app-notif-t { font-weight: 600; } /* 6b · Mensajes (private messages, back 27 Oct 2026): the list beside the open conversation on wide screens; on phones one or the other (.pm--open shows the conversation, with "Mensajes" to go back) */ .pm { display: grid; gap: 24px; margin-top: 20px; } @media (min-width: 900px) { .pm { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; } .pm-side { position: sticky; top: calc(var(--hd, 64px) + 12px); max-height: calc(100vh - var(--hd, 64px) - 24px); overflow: auto; } .pm-back { display: none; } } @media (max-width: 899.98px) { .pm--open .pm-side { display: none; } .pm:not(.pm--open) .pm-main { display: none; } } .pm-list { border-top: 1px solid var(--rule); } .pm-list > li { border-bottom: 1px solid var(--rule); } .pm-conv { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px; margin-inline: -10px; border-radius: var(--r); color: var(--ink); text-decoration: none; } .pm-conv:hover { background: var(--paper-2); } .pm-conv[aria-current="page"] { background: var(--accent-wash); } .pm-conv-main { display: grid; min-width: 0; gap: 2px; } .pm-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pm-conv-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .pm-conv-when { flex: none; font-size: var(--fs-0, .8125rem); color: var(--ink-3); } .pm-conv-last { overflow: hidden; font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; } .pm-conv.is-unread .pm-conv-name, .pm-conv.is-unread .pm-conv-last { font-weight: 700; color: var(--ink); } .pm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .pm-reqs { margin-bottom: 20px; } .pm-req-list { margin-top: 8px; border-top: 1px solid var(--rule); } .pm-req { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); } .pm-req-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .pm-req-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; } .pm-thread { display: grid; gap: 16px; min-width: 0; } .pm-thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .pm-thread-head .h3 { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; } .pm-msgs { display: grid; gap: 12px; } .pm-msg { max-width: min(42em, 92%); padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); } .pm-msg--mine { justify-self: end; border-color: var(--accent-wash); background: var(--accent-wash); } .pm-msg-meta { font-size: var(--fs-1); color: var(--ink-3); } .pm-msg-who { font-weight: 700; color: var(--ink-2); } .pm-msg-body { margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; } .pm-msg-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } .pm-atts { display: grid; gap: 6px; margin-top: 8px; } .pm-att { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none; } a.pm-att:hover { border-color: var(--rule-2); background: var(--paper-2); } .pm-att-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r); background: var(--paper-2); color: var(--c, var(--ink-2)); } .pm-att-main { display: grid; min-width: 0; gap: 2px; } .pm-att-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .pm-form { display: grid; gap: 12px; } .pm-form--new { gap: 16px; } textarea.input.pm-input { min-height: 72px; resize: vertical; } .pm-add > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); } .pm-add[open] > summary { margin-bottom: 8px; } .pm-friends { display: grid; gap: 8px; } .pm-friends-list { max-height: 280px; overflow: auto; padding-inline: 2px; } .pm-friends-list > .choice[hidden] { display: none; } .pm-pick { justify-items: center; margin-inline: auto; padding-top: 64px; text-align: center; color: var(--ink-2); } /* 7 · Profiles ---------------------------------------------------------------------- */ .app-prof { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; } .app-prof .avatar--lg { width: 72px; height: 72px; } .app-prof-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 6px; font-size: var(--fs-1); color: var(--ink-2); } .app-prof-meta { margin-left: -1.1em; clip-path: inset(-8px -8px -8px calc(1.1em - 2px)); } /* same separators as .res-meta: none left dangling */ .app-prof-meta > span::before { content: "·"; display: inline-block; width: 1.1em; text-align: center; color: var(--ink-3); } .app-prof-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 640px) { .app-prof { grid-template-columns: auto minmax(0, 1fr) auto; } .app-prof-acts { grid-column: auto; } } .app-about { display: grid; gap: 12px; max-width: 68ch; margin-top: 20px; color: var(--ink-2); } .app-about dt { font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); } .app-about dd { margin-top: 2px; } .app-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* 8 · Explore and search ------------------------------------------------------------ */ .app-hero-search { max-width: 640px; margin-top: 20px; } /* The Library's landing (usability checks, 23 Oct): today lists 5 results on a 1366×768 first screen and 9 at 1920; tighter sections and one-line summaries on wide screens list 6 and 10 */ .app-lib-sec { margin-top: 32px; } @media (min-width: 900px) { .app-lib-sec .entry-pre { -webkit-line-clamp: 1; } } .app-hero-search .field-search input { height: var(--h-lg); font-size: var(--fs-3); } .app-hero-search .field-search > .i { top: 26px; } .app-browse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; } @media (min-width: 640px) { .app-browse { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1100px) { .app-browse { grid-template-columns: repeat(7, minmax(0, 1fr)); } .app-browse .app-ctile { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; } } .app-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 24px; column-gap: 24px; padding-top: 4px; } @media (min-width: 900px) { .app-subjects { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .app-subjects a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--ink); } .app-subjects a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* The Library's landing leads with its subjects (Dan, 29 Oct): name, how many resources, the biggest topics */ .app-subjects--n { row-gap: 0; padding-top: 0; } .app-subj { display: grid; align-content: start; gap: 2px; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); } .app-subjects--n a { display: inline; min-height: 0; border-bottom: 0; } .app-subjects--n .app-subj-name { justify-self: start; font-size: var(--fs-3); font-weight: 700; color: var(--ink); } .app-subj-n { font-size: var(--fs-1); color: var(--ink-3); } .app-subj-topics { margin-top: 4px; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-3); } .app-subjects--n .app-subj-topics a { color: var(--ink-2); } .app-subjects--n .app-subj-topics a.app-subj-more { color: var(--ink-3); } .app-more-subjects { margin-top: 16px; } .app-more-subjects > summary { list-style: none; cursor: pointer; } .app-more-subjects > summary::-webkit-details-marker { display: none; } .app-more-subjects[open] > summary { display: none; } .app-more-subjects[open] { margin-top: 0; } .chip .chip-n { margin-left: 6px; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); } .app-levels { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; } .app-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 28px; } .app-group-h:first-child { margin-top: 8px; } .app-tabs-wrap { margin-top: 20px; } .app-person { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; } .app-person .avatar { width: 44px; height: 44px; } .app-cloud { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 10px; } .app-cloud a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); } .app-cloud a:hover { text-decoration: underline; text-underline-offset: 3px; } .app-cloud .app-t1 { font-size: var(--fs-1); } .app-cloud .app-t3 { font-size: var(--fs-3); font-weight: 600; } /* Compact result rows (usability checks 21 Oct, items 6 and 7): search, Inicio's Continuar and Sugerencias. Title, a one-line summary on wide screens, then type · author · counts on one line, so at least as many rows are on the first screen as today (search: 8 at 1366×768, 7 at 1280×720, 12 at 1920×1080, 10 on phones; Inicio: 5 and 11). */ .app-clist .entry { gap: 2px; padding-block: 8px; } .app-crow .entry-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-crow .app-cpre { -webkit-line-clamp: 1; } .app-cmeta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app-cmeta > .type { display: inline-flex; vertical-align: baseline; font-size: inherit; } .app-cmeta > * + *::before { content: "·"; margin: 0 6px; color: var(--ink-3); } .app-cmeta > .status { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; } .app-cmeta > .status .i { width: 14px; height: 14px; } @media (max-width: 639px) { .app-clist .entry { padding-block: 5px; } .app-crow .app-cpre { display: none; } .app-crow .entry-title { -webkit-line-clamp: 1; } .app-cmeta > .status > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the icon says it; the word stays for screen readers */ } /* Search: the H1 and the box share a row on wide screens, both smaller, so the results start high */ .app-sr-h1 { font-size: var(--fs-5); line-height: 1.15; overflow-wrap: anywhere; } .app-sr-form { margin-top: 12px; } .app-sr-form .field-search input { height: var(--h); font-size: var(--fs-2); } .app-sr-form .field-search > .i { top: 50%; } .app-sr-tabs { margin-top: 12px; } .app-sr-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; } @media (min-width: 900px) { .app-sr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center; -moz-column-gap: 32px; column-gap: 32px; } .app-sr-form { margin-top: 0; } } /* 9 · Editors ----------------------------------------------------------------------- */ .app-ed { display: flex; flex-direction: column; background: #fff; } .app-ed--board { background: #ededed; } .app-ed--sheet { background: var(--paper-2); } .app-strip { position: sticky; top: 0; left: 0; z-index: 5; flex: none; background: #f5f5f5; border-bottom: 1px solid #f0f0f0; } .app-strip img, .app-canvas-img { display: block; max-width: none; } .app-stage { position: relative; flex: 1 0 auto; } .app-tb { position: sticky; top: 0; left: 0; z-index: 5; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 48px; padding: 6px 12px; background: var(--paper-2); border-bottom: 1px solid var(--rule); font-size: var(--fs-1); } .app-tb-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .app-tb-l { margin-right: 2px; color: var(--ink-3); } .app-tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid var(--rule-2); border-radius: var(--r-in); background: var(--paper); color: var(--ink-2); font: inherit; font-size: var(--fs-1); white-space: nowrap; } .app-tbtn:hover, .app-tbtn[aria-expanded="true"] { border-color: var(--rule-3); color: var(--ink); } .app-tbtn:disabled { opacity: .5; cursor: not-allowed; } .app-tbtn .i { width: 16px; height: 16px; } .app-tbtn--i { width: 32px; padding: 0; } .app-tbtn b, .app-tbtn i, .app-tbtn u { font-family: var(--serif); font-size: 15px; } .app-sw { width: 14px; height: 14px; border: 1px solid var(--rule-3); border-radius: 2px; background: var(--sw, #fff); } .app-tb .menu-list { font-size: var(--fs-2); } .app-viewonly { display: none; } @media (max-width: 639px) { .app-ed--viewonly .app-tb, .app-ed--viewonly .app-strip, .app-ed--viewonly .app-side { display: none; } .app-ed--viewonly .app-canvas-img { width: 100%; height: auto; } .app-viewonly { display: grid; gap: 4px; padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); } .app-viewonly .btn { justify-self: start; margin-top: 6px; } } .app-phone-only { display: none; } @media (max-width: 639px) { .app-phone-only { display: block; } .app-desk-only { display: none !important; } } /* Rebuilt canvases: question/card sheets, slide stage, flowchart, course builder */ .app-split { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 0 auto; } @media (min-width: 900px) { .app-split { grid-template-columns: 260px minmax(0, 1fr); } } .app-side { background: var(--paper); border-right: 1px solid var(--rule); padding: 12px; font-size: var(--fs-1); } @media (max-width: 899px) { .app-side { border-right: 0; border-bottom: 1px solid var(--rule); } } .app-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-weight: 700; color: var(--ink-2); } .app-qlist > li > a, .app-qlist > li > button { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: var(--r-in); background: none; color: var(--ink-2); font: inherit; text-align: left; line-height: 1.35; } .app-qlist > li > button:hover { background: var(--paper-2); } .app-qlist > li > [aria-current="true"] { background: var(--accent-wash); color: var(--accent-ink); } .app-qlist .n { font-weight: 700; color: var(--ink-3); } .app-sheet { width: 100%; max-width: 860px; margin: 20px auto; padding: 0 16px 40px; } .app-qcard { padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); } .app-qcard + .app-qcard { margin-top: 16px; } .app-qcard-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: var(--fs-1); color: var(--ink-3); } .app-qcard-h b { color: var(--ink-2); } .app-ans { display: grid; gap: 8px; margin-top: 12px; } .app-ans > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; } .app-ans .input { height: var(--h-sm); } .app-ans .app-sel { margin-left: -12px; } .app-qcard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); } .app-cards-h { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 12px; padding: 0 0 8px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); } .app-fcard { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; align-items: stretch; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); } .app-fcard .grip { align-self: center; color: var(--ink-3); } .app-fside { display: grid; align-content: center; min-height: 96px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r); font-size: var(--fs-3); text-align: center; } .app-fside-tools { display: flex; justify-content: center; gap: 4px; margin-top: 6px; } @media (max-width: 639px) { .app-cards-h { display: none; } .app-fcard { grid-template-columns: minmax(0, 1fr) 36px; } .app-fcard .grip { display: none; } } .app-fside-l { display: none; font-size: var(--fs-0); font-weight: 700; color: var(--ink-3); text-align: left; } @media (max-width: 639px) { .app-fside-l { display: block; } } .app-thumbs { display: flex; gap: 10px; padding: 10px 12px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--rule); } @media (min-width: 900px) { .app-thumbs { flex-direction: column; overflow: auto; border-bottom: 0; border-right: 1px solid var(--rule); } } .app-sthumb { flex: none; display: grid; gap: 4px; width: 132px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-0); color: var(--ink-3); text-align: left; } .app-sthumb > span:first-child { display: block; aspect-ratio: 16 / 9; padding: 8px; border: 1px solid var(--rule-2); border-radius: var(--r-in); background: var(--paper); font-size: 9px; line-height: 1.3; color: var(--ink-2); overflow: hidden; } .app-sthumb[aria-current="true"] > span:first-child { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .app-sthumb-add { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 132px; border: 1px dashed var(--rule-3); border-radius: var(--r-in); background: none; color: var(--ink-3); } .app-slide { width: min(100%, 880px); aspect-ratio: 16 / 9; margin: 24px auto; padding: 5% 6%; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-1); display: grid; grid-template-rows: auto 1fr; gap: 4%; container-type: inline-size; } .app-slide h2 { font-size: 5.2cqw; font-weight: 700; line-height: 1.15; color: #1d3c50; } .app-slide ul { list-style: disc; padding-left: 1.2em; font-size: 2.6cqw; line-height: 1.5; color: var(--ink-2); } .app-slide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; align-items: start; } .app-slide-media { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1.5px dashed var(--rule-3); color: var(--ink-3); font-size: 2.2cqw; text-align: center; } .app-fc-wrap { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .app-fc-wrap { grid-template-columns: 212px minmax(0, 1fr); } } .app-shapes { display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; } .app-shape { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--r-in); background: none; color: var(--ink-2); } .app-shape:hover { border-color: var(--rule-2); background: var(--paper-2); } .app-shape svg { width: 26px; height: 20px; fill: #fff; stroke: currentColor; stroke-width: 1.5; } .app-fc-canvas { position: relative; overflow: auto; background-color: #fff; background-image: linear-gradient(var(--paper-3) 1px, transparent 1px), linear-gradient(90deg, var(--paper-3) 1px, transparent 1px); background-size: 24px 24px; } .app-fc-canvas svg { display: block; width: 760px; height: auto; margin: 24px; } .app-mods { display: grid; gap: 6px; } .app-mod { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--r-in); background: var(--paper); } .app-mod[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); } .app-mod .n { font-weight: 700; color: var(--ink-3); text-align: center; } .app-mod-t { display: grid; line-height: 1.3; } .app-mod-t .meta { font-size: var(--fs-0); } .app-module { padding: 20px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); } .app-module-res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; margin-top: 14px; border: 1px solid var(--rule); border-top: 3px solid var(--c); border-radius: var(--r); background: var(--paper-2); } /* 10 · Error and not-found pages --------------------------------------------------- */ .app-err { max-width: 640px; padding-top: 48px; } @media (min-width: 900px) { .app-err { padding-top: 80px; } } .app-err-code { font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; } .app-err .h1 { margin-top: 8px; } .app-err .lead { margin-top: 14px; } .app-err-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .app-err-search { margin-top: 32px; max-width: 640px; } .app-ctile--lead > .app-ctile-go { width: 22px; height: 22px; } .app-rows .status--draft .i, .app-rows .status .i { width: 14px; height: 14px; } .app-bulk .icon-btn { color: #fff; } .app-bulk .icon-btn:hover { background: rgb(255 255 255 / .12); color: #fff; } @media (max-width: 639px) { .app-bulk { gap: 0; padding-left: 12px; flex-wrap: nowrap; } .app-bulk-n { font-size: var(--fs-1); white-space: nowrap; } .app-bulk .icon-btn { width: 40px; } .app-bulk .btn-quiet { width: 44px; padding: 0; } .app-bulk .btn-quiet > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .app-rows--grid .thumb--text { padding-top: 48px; } button.app-mthumb { width: 100%; padding: 0; cursor: zoom-in; } button.app-mthumb:hover { border-color: var(--rule-2); } button.app-mname { cursor: text; } button.app-mname:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .app-rename { display: flex; gap: 6px; } .app-rename .input { height: var(--h-sm); font-size: var(--fs-1); } .app-mitem > .meta { font-size: var(--fs-1); } .app-stars { vertical-align: -2px; } .app-group-h .tap { font-size: var(--fs-1); font-weight: 600; } .app-group-h { align-items: center; } .app-levels .chip { min-width: 44px; justify-content: center; } .app-f--wide { grid-column: 1 / -1; } @media (min-width: 640px) { .app-f--wide { grid-column: auto; } } @media (min-width: 900px) { .app-filters > .app-f.app-f--wide { flex: 0 1 280px; } } /* Editors, part 2: stacked toolbars, question settings, picker, card rows on phones */ .app-tbs { position: sticky; top: 0; left: 0; z-index: 5; flex: none; } .app-tbs > .app-tb { position: static; } .app-tbs > .app-tb + .app-tb { border-top: 0; padding-top: 0; } .app-tb--inline { position: static; min-height: 0; padding: 6px 0; margin: 12px 0 8px; background: none; border: 0; } .app-tb-end { margin-left: auto; } .app-qset { display: grid; gap: 12px; margin: 0 0 16px; padding: 14px; background: var(--paper-2); border-radius: var(--r); } @media (min-width: 640px) { .app-qset { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-qset > .choice-list { grid-column: 1 / -1; } } .app-qcard textarea.input { min-height: 72px; } .app-qcard .field + .field, .app-qcard .fieldset { margin-top: 16px; } .app-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-pick-opt { position: relative; display: block; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; cursor: pointer; } .app-pick-opt .rb { position: absolute; top: 10px; left: 10px; } .app-pick-opt:has(.rb:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .app-fside [contenteditable] { min-height: 1.5em; outline-offset: 4px; border-radius: var(--r-in); } .app-fcard.is-selected .app-fside, .app-mod.is-selected { border-color: var(--accent); background: var(--accent-wash); } @media (max-width: 639px) { .app-fcard .app-fside { grid-column: 1; } .app-fcard > .icon-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } .app-slide [contenteditable] { outline-offset: 4px; border-radius: 2px; } .app-slide img { width: 100%; height: auto; } .app-stagewrap { padding: 0 16px; overflow: auto; } .app-fc-canvas text { font: 600 13px var(--sans); fill: #15222b; } .app-shapes-more { margin-top: 8px; } .app-side .h3 { font-size: var(--fs-1); } .app-tb-g > .app-tb-l:first-child { font-weight: 700; color: var(--ink-2); } .app-tb-g + .app-tb-g { padding-left: 14px; border-left: 1px solid var(--rule); } .app-tb-g.app-tb-end { border-left: 0; } button.app-slide-media { padding: 0; overflow: hidden; background: #fff; border: 1.5px solid transparent; cursor: pointer; } button.app-slide-media:hover { border: 1.5px dashed var(--rule-3); } /* Editors on phones: the title is plain text (as today); "Change title" lives in the ⋯ menu */ .app-ed-tt { display: none; } .app-phone-flex { display: none !important; } @media (max-width: 639px) { .app-ed-in { display: none; } .app-ed-tt { display: block; min-width: 0; padding: 0 4px; font-size: var(--fs-2); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .app-phone-flex { display: flex !important; } } @media (pointer: coarse) { .app-tbtn { height: 44px; min-width: 44px; } .app-tbtn--i { width: 44px; } .app-shape { width: 44px; height: 44px; } .app-shapes { grid-template-columns: repeat(4, 44px); } } .app-canvas-img.app-phone-only { width: 100%; max-width: 390px; height: auto; } /* Collapsible editor parts: open on desktop, closed on phones until toggled (as today's mobile toolbars) */ .app-coll-sm.is-toggled { display: none; } @media (max-width: 639px) { .app-coll-sm:not(.is-toggled) { display: none; } .app-coll-sm.is-toggled { display: flex; } aside.app-coll-sm.is-toggled { display: block; } .app-tbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .app-tbtn:has(> .app-tbl) { width: 44px; padding: 0; } } .app-thumbs { align-items: flex-start; } @media (max-width: 899px) { .app-fc-wrap { align-content: start; } } @media (max-width: 899px) { .app-split { align-content: start; } } .app-short { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .app-short > main { flex: 1 0 auto; } /* Mid widths (900-1199): the bar's quiet buttons go icon-only so the title keeps its room */ @media (min-width: 900px) and (max-width: 1199px) { .app-lbl-xl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .edbar .btn:has(> .app-lbl-xl) { width: var(--h); padding: 0; } } /* Editor sheets scroll clear of the floating "Escríbenos" pill */ .app-sheet { padding-bottom: 96px; } @media (min-width: 900px) and (max-width: 1365px) { .app-sheet { padding-right: 112px; } } .app-mm-canvas { width: min(1420px, 100%); height: auto; margin: 16px auto 0; } /* Notes editor: today's page board (title, page cards in a grid, "Añadir página"), drawn with Dan's own notes */ .app-nb { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; } .app-nb-title { max-width: 560px; margin: 0 auto 24px; padding: 10px 14px; background: #fff; border: 1px solid #dcdcdc; font-size: 1.375rem; color: #333; overflow-wrap: anywhere; } .app-nb-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .app-nbp { position: relative; min-height: 180px; background: #fff; border: 1px solid #dcdcdc; box-shadow: 0 1px 2px rgb(0 0 0 / .06); } .app-nbp-in { display: grid; align-content: start; gap: 6px; padding: 16px 48px 16px 18px; color: #444; } .app-nbp-n { font-size: var(--fs-1); color: #888; } .app-nbp-h { font-weight: 700; color: #222; } .app-nbp-p { font-size: var(--fs-1); line-height: 1.5; } .app-nbp-del { position: absolute; top: 6px; right: 6px; } .app-nb-add { display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; min-height: 180px; border: 1px dashed #b9b9b9; background: transparent; color: #444; font-size: var(--fs-3); } .app-nb-add .i { color: var(--ok); } .app-nb-add:hover { background: rgb(255 255 255 / .6); } @media (max-width: 639px) { .app-nb { padding: 16px 16px 32px; } .app-nb-pages { grid-template-columns: minmax(0, 1fr); gap: 12px; } .app-nbp, .app-nb-add { min-height: 0; } .app-nb-add { padding: 18px; } } @media (max-width: 639px) { .app-ed--viewonly .app-fc-wrap { align-content: stretch; } .app-ed--viewonly .app-fc-canvas svg { width: calc(100% - 24px); margin: 16px 12px; } } /* Mis recursos: the bulk bar sits in the toolbar's place (same grid cell, so the list doesn't move when a row is ticked); the toolbar keeps the cell's height while hidden. On phones the bulk bar is a fixed bottom bar instead. */ .app-listhead { display: grid; margin-top: 16px; } .app-listhead > .app-listbar, .app-listhead > .app-bulk { grid-area: 1 / 1; margin-top: 0; } .app-listhead > .app-bulk { position: static; min-height: 52px; padding-block: 0; } /* no taller than the toolbar it covers */ .app-listhead.is-bulk { position: sticky; top: 8px; z-index: 15; } .app-listhead.is-bulk > .app-listbar { visibility: hidden; } .app-bulk-all { margin: 0 4px 0 -10px; } .app-bulk .app-sel:hover { background: rgb(255 255 255 / .12); } @media (max-width: 639px) { .app-listhead.is-bulk { position: static; } .app-listhead.is-bulk > .app-listbar { visibility: visible; } .app-listhead > .app-bulk { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-block: 4px; z-index: calc(var(--z-pill) + 1); box-shadow: var(--shadow-2), var(--shadow-1); } .app-listhead.is-bulk ~ .app-rows, .app-listhead.is-bulk ~ .pager { margin-bottom: 84px; } } /* Group "Añadir recurso" picker (GC-1079/1080): filters, a scrolling list of your resources, ticked several at a time */ .dlg--pick { width: min(640px, calc(100vw - 32px)); } .grp-pick-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .grp-pick-filters .field-search { grid-column: 1 / -1; } .grp-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .grp-pick-list { max-height: min(42vh, 400px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .grp-pick-list[aria-busy="true"] { opacity: .6; } .grp-pick-row { padding: 8px 0; min-height: 0; } .grp-pick-text { display: grid; gap: 2px; min-width: 0; } .grp-pick-title { overflow-wrap: anywhere; } .grp-pick-status { margin-top: 8px; } .grp-pick-status:empty { display: none; } .grp-pick [data-pick-more] { margin-top: 8px; } @media (max-width: 520px) { .grp-pick-filters { grid-template-columns: minmax(0, 1fr); } } /* SmartLink dialog: the filter box above the resource dropdown */ .sl-res-q { margin-bottom: 8px; } /* GoConqr · stm.css · page styles for the GROUPS / TEACH / MODALS area (modals/, app/group*, teach/). Every class is prefixed stm-. Uses site.css tokens only; never restyles a site.css component. The dialogs' own few extra classes are injected by js/dialogs.js (