/* studysync styles: tokens, base elements, layout, components, then pages */
@font-face {
    font-family: "Space Grotesk";
    font-weight: 300 700;
    font-display: swap;
    src: url("vendor/space-grotesk-v22/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

:root {
    color-scheme: light;

    --page: #f6f2ea;
    --surface: #fcfaf5;
    --field: #fffdf9;
    --ink: #192b42;
    --muted: #5f574d;
    --line: #ddd2c0;
    --line-strong: #c9bba5;
    --input-line: #746b60;
    --accent: #a8502c;
    --accent-hover: #8c4023;
    --link: #315b83;
    --hover: #f4e5d2;
    --danger: #9b2f1f;
    --danger-hover: #7f2618;
    --mode-bg: #e4ecf4;
    --mode-ink: #24435f;
    --joined-bg: #dfecdb;
    --joined-ink: #2c5a37;

    --shadow-card: 0 1px 2px rgba(25, 43, 66, .08), 0 2px 8px rgba(25, 43, 66, .06);
    --shadow-pop: 0 8px 24px rgba(25, 43, 66, .16);

    --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* icons are drawn with css masks, so they take the text color */
    --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10.5' r='2.4'/%3E%3C/svg%3E");
    --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --i-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3 19.5c.6-3.2 3-5 6-5s5.4 1.8 6 5'/%3E%3Cpath d='M15.5 5.6a3 3 0 0 1 0 5.8'/%3E%3Cpath d='M17.5 14.8c1.8.6 3 2.2 3.5 4.7'/%3E%3C/svg%3E");
    --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6 8.5 12l6 6'/%3E%3C/svg%3E");
    --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 10'/%3E%3C/svg%3E");
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E");
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E");

    /* one icon per access mode, picked by data-mode */
    --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
    --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.7 3.7-5.6 7.2-5.6s6.3 1.9 7.2 5.6'/%3E%3C/svg%3E");
    --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
    --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 6.8a4.2 4.2 0 0 1 7.5 2.5c0 5.6-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E");
    --i-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 9.5 9.5-4.5 9.5 4.5-9.5 4.5z'/%3E%3Cpath d='M6.5 11.6v4.6c0 1.4 2.5 2.8 5.5 2.8s5.5-1.4 5.5-2.8v-4.6M21.5 9.5v5'/%3E%3C/svg%3E");
}

[data-mode="OPEN"] {
    --mode-icon: var(--i-globe);
}

[data-mode="ACCOUNT"] {
    --mode-icon: var(--i-user);
}

[data-mode="INVITE"] {
    --mode-icon: var(--i-link);
}

[data-mode="INTEREST"] {
    --mode-icon: var(--i-heart);
}

[data-mode="SCHOOL"] {
    --mode-icon: var(--i-cap);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--ink);
    font: 16px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

h1,
h2,
h3,
p,
dl,
dd {
    margin: 0;
}

/* long words and links wrap instead of pushing the page sideways */
h1,
h2,
h3,
p,
dd,
label {
    overflow-wrap: anywhere;
}

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h1 {
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

h2 {
    font-size: 1.375rem;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--accent-hover);
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* hidden has to win over display rules like the one on buttons */
[hidden] {
    display: none !important;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--field);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
    color: var(--field);
}

/* layout */
.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.wrap-narrow {
    max-width: 808px;
}

.wrap-auth {
    max-width: 508px;
    padding-top: clamp(0px, 8vh, 72px);
}

.page {
    padding-top: 28px;
}

.page-head {
    margin-bottom: 28px;
}

.page-head .lead {
    margin-top: 10px;
}

.page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.lead {
    max-width: 62ch;
    color: var(--muted);
    font-size: 1.0625rem;
}

.hint {
    color: var(--muted);
    font-size: 14px;
}

.center {
    text-align: center;
}

.prose {
    white-space: pre-line;
}

.inline {
    display: inline;
    margin: 0;
}

.panel {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.panel > h2 {
    margin-bottom: 16px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 18px -4px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.back-link::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: var(--i-back) center / contain no-repeat;
}

.back-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* header */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.header-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand main account";
    align-items: center;
    column-gap: 40px;
    min-height: 64px;
}

.brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font: 700 1.375rem/1 var(--sans);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand:hover {
    color: var(--ink);
}

/* a map pin: a square with one sharp corner, turned to point down */
.brand-mark {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: -5px;
    border-radius: 50% 50% 50% 0;
    background: var(--accent);
    transform: rotate(-45deg);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--surface);
}

.nav-main {
    grid-area: main;
    align-self: stretch;
}

.nav-main ul {
    display: flex;
    gap: 28px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-main li {
    display: flex;
}

.nav-main a {
    position: relative;
    display: flex;
    align-items: center;
    /* room for the focus ring, which sits inside since the link fills the bar */
    margin-inline: -6px;
    padding-inline: 6px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.nav-main a:hover {
    color: var(--ink);
}

.nav-main a:focus-visible {
    outline-offset: -3px;
}

.nav-main a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.nav-main a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: -1px;
    left: 6px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

.nav-account {
    grid-area: account;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.account-link,
.nav-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.account-link:hover,
.nav-signin:hover {
    color: var(--ink);
    text-decoration: underline;
}

.account-link[aria-current="page"] .account-name,
.nav-signin[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

.account-name {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mode-bg);
    color: var(--mode-ink);
    font: 700 14px/1 var(--sans);
    text-transform: uppercase;
}

.account-link .avatar {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font: 700 26px/1 var(--sans);
}

/* footer */
.site-footer {
    margin-top: 72px;
    border-top: 1px solid var(--line);
}

.footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    padding-bottom: 28px;
    color: var(--muted);
    font-size: 14px;
}

.site-footer ul {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--muted);
}

.site-footer a:hover {
    color: var(--ink);
}

/* buttons, and links that look like buttons: square, with a hard shadow that
   lifts on hover and presses in on click */
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    font: 600 15px/1.2 var(--sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: background-color .15s, color .15s, transform .12s, box-shadow .12s;
}

button:hover,
.button:hover {
    background: var(--accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

button:active,
.button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

button.secondary,
.button.secondary {
    background: var(--field);
    color: var(--ink);
}

button.secondary:hover,
.button.secondary:hover {
    background: var(--hover);
    color: var(--ink);
}

button.danger {
    background: var(--danger);
}

button.danger:hover {
    background: var(--danger-hover);
}

button.small,
.button.small {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
}

.button-block {
    width: 100%;
}

/* a form button that reads like a link, used for sign out */
.link-button,
.link-button:hover,
.link-button:active {
    position: relative;
    min-height: 0;
    padding: 4px 2px;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--muted);
    font-weight: 500;
}

.link-button:hover {
    color: var(--ink);
    text-decoration: underline;
}

.link-button::after {
    content: "";
    position: absolute;
    inset: -9px;
}

/* forms */
.form {
    display: grid;
    gap: 20px;
}

.field {
    display: grid;
    gap: 6px;
}

.field > label {
    font-size: 15px;
    font-weight: 600;
}

.optional {
    margin-left: 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--input-line);
    border-radius: 0;
    background-color: var(--field);
    color: var(--ink);
    font: 16px/1.4 var(--sans);
    transition: border-color .15s, box-shadow .15s;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]):focus,
textarea:focus {
    /* transparent, not none, so forced colors mode still draws it */
    outline: 2px solid transparent;
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgba(168, 80, 44, .22);
}

::placeholder {
    color: #6f675c;
    opacity: 1;
}

input[readonly] {
    background-color: var(--surface);
}

textarea {
    resize: vertical;
}

input[type="search"] {
    appearance: none;
    padding-left: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f574d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
    background-position: 13px 50%;
    background-repeat: no-repeat;
    background-size: 19px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 -2px 0 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f574d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--danger);
}

.inline-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* notices at the top of a page */
.notice,
.error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    animation: rise-in .3s ease-out;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 15px;
}

.notice::before,
.error::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background: currentColor;
    mask: var(--i-ok) center / contain no-repeat;
}

.notice {
    border-color: #b9d0b3;
    background: #e6efe3;
    color: #24452b;
}

.error {
    border-color: #e0b7a8;
    background: #f6e3dc;
    color: #7a2617;
}

.error::before {
    mask-image: var(--i-alert);
}

/* badges, chips and tags */
.badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--mode-bg);
    color: var(--mode-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge-joined {
    background: var(--joined-bg);
    color: var(--joined-ink);
}

.badge-ink {
    background: var(--ink);
    color: var(--field);
}

.badge[data-mode]::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    background: currentColor;
    mask: var(--mode-icon) center / contain no-repeat;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chips li {
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--field);
    font-size: 14.5px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags li {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--page);
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* tiles: outlined choices that fill in with a check badge when picked.
   buttons use .is-on, labels around a hidden checkbox or radio use :checked */
.tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* takes the free space on the last row, so its tiles keep their own width */
.tiles::after {
    content: "";
    flex: 10 1 auto;
}

.tiles > li,
.tiles form {
    display: flex;
    flex: 1 1 auto;
}

.tile {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 20px;
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    background: var(--field);
    color: var(--accent);
    font: 600 15px/1.25 var(--sans);
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}

.tile:hover {
    border-color: var(--accent-hover);
    background: var(--hover);
    color: var(--accent-hover);
    transform: none;
    box-shadow: none;
}

.tile:active {
    transform: scale(.97);
    box-shadow: none;
}

.tile.is-on,
.tile:has(:checked) {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.tile.is-on:hover,
.tile:has(:checked):hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: #fff;
}

.tile::after {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8502c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E") center / 13px no-repeat;
    box-shadow: 0 1px 3px rgba(25, 43, 66, .25);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .15s, transform .25s cubic-bezier(.3, 1.6, .6, 1);
    pointer-events: none;
}

.tile.is-on::after,
.tile:has(:checked)::after {
    opacity: 1;
    transform: none;
}

.tile:has(:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

/* a tile that adds something new */
.tile-new {
    border-style: dashed;
}

.tile-new::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: var(--i-plus) center / contain no-repeat;
}

/* guests see the tiles, but can't pick them */
span.tile,
span.tile:hover {
    border-color: var(--line-strong);
    background: var(--field);
    color: var(--ink);
    cursor: default;
}

.tiles-sm {
    gap: 12px;
}

.tiles-sm .tile {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 14px;
}

.tiles > .empty {
    flex-basis: 100%;
    justify-content: center;
}

/* place, time and member counts get an icon in front */
.place,
.time,
.member-count {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.place::before,
.time::before,
.member-count::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: .15em;
    background: var(--muted);
    mask: var(--i-pin) center / contain no-repeat;
}

.time::before {
    mask-image: var(--i-clock);
}

.member-count::before {
    mask-image: var(--i-people);
}

/* group cards, on home and my groups */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-pop);
    transform: translateY(-2px);
}

.card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px 12px;
}

.card-title {
    min-width: 0;
    font-size: 17px;
}

.card-title a {
    color: var(--ink);
    text-decoration: none;
}

/* the title link covers the whole card */
.card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.card:hover .card-title a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.card-title a:focus-visible {
    outline: none;
}

.card-title a:focus-visible::after {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

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

.card-desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 14.5px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.meets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 14px;
}

.card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* the space above the footer, which margin-top: auto can't hold */
.card > :nth-last-child(2) {
    margin-bottom: 4px;
}

.member-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 13.5px;
    white-space: nowrap;
}

.empty {
    display: grid;
    gap: 6px;
    padding: 36px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
}

.empty-title {
    font: 600 16px/1.4 var(--sans);
    letter-spacing: 0;
}

/* home: search and the list on the left, the map on the right */
.home {
    display: grid;
    grid-template-areas: "search" "results";
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 32px;
}

.home-search {
    grid-area: search;
    max-width: 760px;
}

.home-results {
    grid-area: results;
    min-width: 0;
}

.home:has(.map-section:not([hidden])) {
    grid-template-areas: "search map" "results map";
    grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
}

.home:has(.map-section:not([hidden])) .cards {
    grid-template-columns: minmax(0, 1fr);
}

.home-map {
    grid-area: map;
    position: sticky;
    top: 24px;
    height: calc(100vh - 116px);
    min-height: 460px;
}

.home-search .lead {
    margin: 8px 0 20px;
}

.search-row {
    display: flex;
    gap: 8px;
}

.search-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.filters {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.filter-group legend {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* filter chips: a check mark slides in when on */
.chip-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    background: var(--field);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.chip-toggle:hover {
    border-color: var(--accent-hover);
    background: var(--hover);
    color: var(--accent-hover);
}

.chip-toggle::before {
    content: "";
    flex: none;
    width: 0;
    height: 16px;
    margin-right: -6px;
    background: currentColor;
    mask: var(--i-check) center / 16px no-repeat;
    transition: width .2s, margin .2s;
}

.chip-toggle:has(:checked)::before {
    width: 16px;
    margin-right: 0;
}

.chip-toggle:has(:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.chip-toggle:has(:checked) {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.chip-toggle:has(:checked):hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.home-hint {
    margin-top: 16px;
}

.results-count {
    margin-bottom: 12px;
    color: var(--muted);
    font: 600 14px/1.4 var(--sans);
    letter-spacing: 0;
}

/* maps, see static/js/map.js */
.map {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #eef0ec;
}

.map-small {
    height: 260px;
}

.map-group {
    height: 320px;
    margin: 4px 0 12px;
}

/* the site's button look stays off the map's own buttons */
.maplibregl-map button {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    color: var(--ink);
    box-shadow: none;
    transform: none;
    transition: none;
}

/* maplibre-gl.css turns the outline off on its buttons */
.maplibregl-map .maplibregl-ctrl-group button:focus:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
    box-shadow: none;
}

/* a home pin opens a popup on click, the map around it still drags */
.home-map .maplibregl-marker {
    cursor: pointer;
}

.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib {
    padding: 0 8px;
    border-radius: 8px 0 0 0;
    background: rgba(252, 250, 245, .94);
    font-size: 11px;
    line-height: 18px;
}

.maplibregl-canvas:focus-visible {
    outline-offset: -3px;
}

.maplibregl-popup .maplibregl-popup-content {
    padding: 12px 36px 12px 14px;
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    color: var(--ink);
    font: 14px/1.45 var(--sans);
}

.maplibregl-popup .maplibregl-popup-close-button {
    width: 32px;
    height: 32px;
    border-radius: 0 10px 0 8px;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
}

.maplibregl-popup-content a {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.maplibregl-popup-content a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.maplibregl-popup-content .meets {
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    font-size: 13.5px;
}

/* a crisp shadow instead of the default blurred blob under each pin */
.maplibregl-marker ellipse {
    display: none;
}

.maplibregl-marker svg {
    filter: drop-shadow(0 1px 1.5px rgba(25, 43, 66, .35));
    transform-origin: 50% 100%;
    transition: transform .15s ease;
}

/* the pin of the card under the mouse or keyboard focus */
.maplibregl-marker.is-active {
    z-index: 2;
}

.maplibregl-marker.is-active svg {
    transform: scale(1.25);
}

/* group page */
.group-head {
    margin-bottom: 28px;
}

.group-head h1 {
    margin-top: 12px;
}

.group-head .lead {
    margin-top: 10px;
}

.group-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

/* the details card comes first in the page, so it leads on phones */
.group-side {
    position: sticky;
    top: 24px;
    grid-column: 2;
    grid-row: 1;
}

.group-main {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    gap: 16px;
    min-width: 0;
}

.side-card {
    display: grid;
    gap: 22px;
}

.facts {
    display: grid;
    gap: 16px;
}

.facts dt {
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.facts dd {
    font-size: 15.5px;
}

.facts dd .hint {
    display: block;
    margin-top: 2px;
}

.actions {
    display: grid;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.member-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--joined-ink);
    font-weight: 600;
}

.member-status::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: var(--i-ok) center / contain no-repeat;
}

.topics-heading {
    margin: 22px 0 10px;
}

.members {
    margin: 0;
    padding: 0;
    list-style: none;
}

.members li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.members li:first-child {
    padding-top: 0;
    border-top: 0;
}

.members li:last-child {
    padding-bottom: 0;
}

.member-name {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.members form {
    margin-left: auto;
}

input.invite-link {
    margin: 14px 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

/* group form */
.form-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-panel {
    display: grid;
    align-content: start;
    gap: 20px;
}

.form-panel > h2 {
    margin-bottom: 0;
}

.pin-picker {
    display: grid;
    gap: 8px;
}

.choices legend {
    margin-bottom: 16px;
    font: 700 1.375rem/1.15 var(--sans);
    letter-spacing: -0.01em;
}

.choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

/* a mode tile: icon, name and what it means */
.choice {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 16px 18px;
    text-align: left;
}

.choice::before {
    content: "";
    flex: none;
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    background: currentColor;
    mask: var(--mode-icon) center / contain no-repeat;
}

.choice .hint {
    font-weight: 400;
    line-height: 1.45;
}

.choice:has(:checked) .hint {
    color: #fff;
}

/* a group of checkboxes laid out like the other fields */
fieldset.field > legend {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
}

fieldset.field > .tiles {
    margin: 6px 0 12px;
}

.danger-zone {
    margin-top: 32px;
    border-color: #e6c3b6;
    background: #fbf2ed;
}

.danger-zone h2 {
    color: var(--danger);
}

/* sign in and sign up */
.auth-card {
    padding: 32px;
}

.auth-card h1 {
    font-size: 2rem;
}

.auth-card .lead {
    margin: 8px 0 24px;
    font-size: 1rem;
}

.auth-switch {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

/* profile */
.profile-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.panel-foot {
    margin-top: 20px;
}

/* interests: a centered picker */
.picker-head {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.picker-head .lead {
    margin: 10px auto 0;
}

.picker-search {
    max-width: 520px;
    margin: 0 auto 28px;
}

.picker-hint {
    margin-bottom: 16px;
    text-align: center;
}

.picker-foot {
    margin-top: 36px;
    text-align: center;
}

/* about */
.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.member {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
}

.member img {
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    border: 1px solid var(--line);
    border-radius: 50%;
    object-fit: cover;
}

.member h2 {
    align-self: end;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.member .role {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.member .bio {
    grid-column: 1 / -1;
    margin-top: 14px;
    color: var(--muted);
    font-size: 15px;
}

.team-info {
    display: grid;
    gap: 6px;
}

.team-info h2 {
    margin-bottom: 8px;
}

/* error pages */
.error-page {
    padding-top: clamp(48px, 12vh, 120px);
    text-align: center;
}

.error-page .lead {
    margin: 12px auto 28px;
}

@media (max-width: 860px) {
    .home:has(.map-section:not([hidden])) {
        grid-template-areas: "search" "map" "results";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .home-map {
        position: static;
        height: 280px;
        min-height: 0;
    }

    .group-layout,
    .form-columns,
    .two-col {
        grid-template-columns: minmax(0, 1fr);
    }

    .group-side,
    .group-main {
        position: static;
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .header-bar {
        grid-template-areas: "brand account" "main main";
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        min-height: 0;
        padding-top: 12px;
    }

    .nav-main {
        height: 44px;
        margin-top: 4px;
    }

    .nav-main ul {
        gap: 24px;
    }

    .nav-account {
        justify-content: flex-end;
        gap: 14px;
    }

    .nav-account a,
    .nav-account button {
        white-space: nowrap;
    }

    .account-name {
        max-width: 10ch;
    }
}

@media (max-width: 560px) {
    .wrap {
        padding-inline: 16px;
    }

    .page {
        padding-top: 22px;
    }

    .header-bar {
        column-gap: 8px;
    }

    .nav-account {
        gap: 10px;
    }

    /* topic chips scroll sideways in one row, so the map comes up sooner */
    .chip-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 5px 16px;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }

    .chip-toggle {
        flex: none;
    }

    /* badges go above the title, so every card has the same layout */
    .card-top {
        display: grid;
        justify-items: start;
        gap: 8px;
    }

    .card-top .badges {
        order: -1;
    }

    .panel {
        padding: 18px;
    }

    .auth-card {
        padding: 24px 20px;
    }

    .card {
        padding: 14px 16px;
    }

    .home-map,
    .map-group {
        height: 240px;
    }

    .profile-head {
        gap: 14px;
    }

    .avatar-lg {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .site-footer {
        margin-top: 48px;
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}