/* ===================== THE MEMBER PROFILE PAGE ========================
   /user/profile, rebuilt from the mock-up.

   Everything is scoped under .up. The old users/profile.css is 45 kB of
   rules written for the previous layout and is still loaded by
   user/following and its siblings; an unscoped rule here would reach
   those pages and break them.

   Two habits this file keeps, both learned the hard way on this site:

   - Colours in self-contained blocks are literals, not var(). An
     undefined custom property makes the whole declaration invalid at
     computed-value time, so `color: var(--nope)` does not fall back --
     it inherits, silently, and the text goes the wrong colour.

   - There is no prefers-color-scheme anywhere. This site's theme is a
     cookie that puts .dark on <body>. A media query here would fight it
     and win on the wrong machines.

   The hero is dark in both themes on purpose: it sits under a
   photograph, and a light hero would need a second set of ink rules for
   every badge, button and caption on it.
   ===================================================================== */

.up{
    --up-ink:      #151515;
    --up-ink-soft: #5f5f5f;
    --up-line:     #d8d8d8;
    --up-card:     #ffffff;
    --up-bg:       #f0f0f0;
    --up-lime:     #cae76f;
    --up-green:    #5c7a1e;

    box-sizing: border-box;
    color: #151515;
}
.up *, .up *::before, .up *::after{ box-sizing: border-box; }

body.dark .up{
    --up-ink:      #ededed;
    --up-ink-soft: #a8a8a8;
    --up-line:     #444444;
    --up-card:     #2b2b2b;
    --up-bg:       #1f1f1f;
    --up-green:    #cae76f;

    color: #ededed;
}

.up .up_wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

/* ======================================================= admin bar ==== */

.up .up_adminbar{
    background: #111111;
    color: #ededed;
    padding: 10px 0;
}
.up .up_adminbar_in{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.up .up_adminbar_who{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.up .up_adminbar_do { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.up .up_chip{
    display: inline-block;
    background: #000000;
    color: #ffffff;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.up .up_chip_link{ text-transform: none; letter-spacing: 0; font-weight: 500; }
.up a.up_chip_link{ color: #ffffff; text-decoration: none; }
.up a.up_chip_link:hover{ background: #2a2a2a; }
.up .up_chip_soft{ background: #cae76f; color: #151515; }

.up .up_abtn{
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #000000;
    color: #ffffff;
    font-family: inherit;
}
.up .up_abtn:hover{ background: #2f2f2f; }
.up .up_abtn_danger{ background: #9d1c10; }
.up .up_abtn_danger:hover{ background: #bb2414; }

/* The session swap. An <a>, not a <button>, so the shared .up_abtn
   padding needs the inline-flex to sit on the same line as its
   siblings -- and no underline, because it is dressed as a control.

   Outlined rather than filled: it is the one control in this bar that
   changes who you are, and a row of three identical black pills is a
   row where the consequential one is indistinguishable. */
.up a.up_abtn_swap{
    display: inline-flex; align-items: center;
    text-decoration: none; line-height: 1.2;
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.up a.up_abtn_swap:hover{
    background: #ffffff; color: #000000;
    box-shadow: inset 0 0 0 1px #ffffff;
}

/* ========================================================== hero ==== */

.up .up_hero{ position: relative; background: #000000; }

.up .up_banner{
    position: relative;
    height: 62vh;
    min-height: 380px;
    max-height: 700px;
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
body.dark .up .up_banner{ background-color: #2a2a2a; }

/* no picture and no video: the block still needs a height, or the name
   lands against the masthead */
.up .up_hero_bare .up_banner{ height: 34vh; min-height: 240px; }

.up .up_banner_video{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.up .up_banner_video iframe{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* 16:9 that always covers, whichever way the box is out of ratio */
    width: 177.78vh;
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    border: 0;
}

/* the fade the name sits on. Tall and soft, so a busy photograph cannot
   put light pixels under white type. */
.up .up_banner_fade{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 45%, #000000 100%);
    pointer-events: none;
}

.up .up_banner_empty{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #7a7a7a;
    font-family: inherit;
    z-index: 2;
}
body.dark .up .up_banner_empty{ color: #9a9a9a; }
.up .up_banner_empty .material-symbols-outlined{ font-size: 42px; }
.up .up_banner_empty_t{ font-size: 17px; }
.up .up_banner_empty_s{ font-size: 14px; text-decoration: underline; }

.up .up_banner_tools{
    position: absolute;
    top: 16px; right: 22px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
.up .up_tool{
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.up .up_tool:hover{ background: #000000; }
.up .up_tool .material-symbols-outlined{ font-size: 20px; }

/* ---- the identity strip, on black ---- */

.up .up_id{ background: #000000; color: #ffffff; padding-bottom: 26px; }
.up .up_id_in{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 26px;
    align-items: end;
}

.up .up_face{ position: relative; }
.up .up_avatar{
    width: 232px; height: 232px;
    border-radius: 50%;
    border: 7px solid #ffffff;
    background: #444444 center center / cover no-repeat;
    /* lifted into the banner, the way the design has it */
    margin-top: -118px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.up .up_avatar_i{ font-size: 62px; font-weight: 700; color: #ffffff; }
.up .up_avatar_edit{
    position: absolute;
    right: 8px; bottom: 8px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #151515;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.up .up_avatar_edit .material-symbols-outlined{ font-size: 20px; }

.up .up_who{ padding-bottom: 6px; min-width: 0; }

.up .up_badges{ display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.up .up_badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}
.up .up_badge .material-symbols-outlined{ font-size: 15px; }
.up a.up_badge_on, .up .up_badge_on{ background: #cae76f; color: #151515; }
.up a.up_badge_on:hover{ background: #d9f08f; }
.up .up_badge_line{ border: 1px solid #7d7d7d; color: #ffffff; }

.up .up_name{
    margin: 0;
    padding: 0;
    font-size: clamp(38px, 6.2vw, 92px);
    line-height: 0.92;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #ffffff;
}
.up .up_title{
    margin: 10px 0 0;
    font-size: clamp(17px, 1.6vw, 25px);
    font-weight: 700;
    color: #ffffff;
}
.up .up_meta{
    margin: 4px 0 0;
    font-size: clamp(14px, 1.15vw, 18px);
    color: #bdbdbd;
}
.up .up_ghost a{ color: #cae76f; text-decoration: underline; font-weight: 400; }

/* ---- the action deck ---- */

.up .up_deck{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.up .up_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.1;
}
.up .up_btn_go{ background: #cae76f; color: #151515; border-color: #cae76f; }
.up .up_btn_go:hover{ background: #d9f08f; }
.up a.up_btn_go{ color: #151515; }

.up .up_btn_line{ background: transparent; color: #ffffff; border-color: #6f6f6f; }
.up .up_btn_line:hover{ border-color: #ffffff; }
.up a.up_btn_line{ color: #ffffff; }

.up .up_btn_state{ background: transparent; color: #bdbdbd; border-color: #4a4a4a; cursor: default; }

.up .up_btn_round{ width: 52px; height: 52px; padding: 0; font-size: 22px; background: transparent; color: #ffffff; border-color: #6f6f6f; }
.up .up_btn_s{ padding: 9px 18px; font-size: 14px; }
.up .up_btn_wide{ display: flex; width: 100%; margin-top: 10px; padding: 10px 16px; font-size: 14px; }

.up .up_more{ position: relative; }
.up .up_more_menu{
    position: absolute;
    right: 0; top: calc(100% + 8px);
    min-width: 220px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.28);
    padding: 8px;
    z-index: 40;
}
body.dark .up .up_more_menu{ background: #2b2b2b; }
/* a class that sets display outranks the UA's [hidden] rule, so the
   attribute needs a rule of its own or the menu is always open */
.up .up_more_menu[hidden]{ display: none; }
.up .up_more_i{
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    color: #151515;
    text-decoration: none;
}
body.dark .up .up_more_i{ color: #ededed; }
.up .up_more_i:hover{ background: #f0f0f0; }
body.dark .up .up_more_i:hover{ background: #3a3a3a; }
.up .up_more_i.hidden{ display: none; }

/* ========================================================== tabs ==== */

.up .up_tabs{
    background: #ffffff;
    border-bottom: 1px solid #d8d8d8;
    position: sticky;
    top: 0;
    z-index: 30;
}
body.dark .up .up_tabs{ background: #1f1f1f; border-bottom-color: #3d3d3d; }

.up .up_tabs ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.up .up_tabs li{ margin: 0; padding: 0; }
.up .up_tab{
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 18px 14px 15px;
    font-size: 17px;
    color: #5f5f5f;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
body.dark .up .up_tab{ color: #a8a8a8; }
.up .up_tab:hover{ color: #151515; }
body.dark .up .up_tab:hover{ color: #ffffff; }
.up .up_tab.is_on{ color: #151515; font-weight: 700; border-bottom-color: #cae76f; }
body.dark .up .up_tab.is_on{ color: #ffffff; }
.up .up_tab_n{ font-size: 12px; color: #8a8a8a; font-weight: 400; }

/* ========================================================== body ==== */

.up .up_body{ background: #f0f0f0; padding: 0 0 70px; }
body.dark .up .up_body{ background: #1f1f1f; }

.up .up_sec{ margin: 0 0 46px; }
.up .up_sec_wide{ margin-top: 10px; }

.up .up_sec_head{
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 3px solid #151515;
    padding-bottom: 10px;
    margin: 0 0 22px;
    /* the tab bar is sticky, so an anchor must stop short of it */
    scroll-margin-top: 78px;
}
body.dark .up .up_sec_head{ border-bottom-color: #ededed; }
.up .up_sec_head h2{
    margin: 0; padding: 0;
    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #151515;
}
body.dark .up .up_sec_head h2{ color: #ededed; }
.up .up_sec_note{ font-size: 14px; color: #5f5f5f; }
body.dark .up .up_sec_note{ color: #a8a8a8; }
.up .up_sec_sp{ flex: 1 1 auto; }
.up .up_sec_more{ font-size: 14px; font-weight: 700; color: #5c7a1e; text-decoration: none; white-space: nowrap; }

/* The one link in a section head that is an action rather than a way to
   see more of the same. Filled, so it does not read as the third of
   three identical grey "more" links. */
.up .up_sec_more_go{
    background: var(--up-ink, #111111);
    color: #ffffff;
    border-radius: 999px;
    padding: 5px 13px;
    text-decoration: none;
}

.up .up_sec_more_go:hover{ opacity: 0.85; }
.dark .up .up_sec_more_go{ background: #ededed; color: #111111; }
body.dark .up .up_sec_more{ color: #cae76f; }
.up .up_sec_more:hover{ text-decoration: underline; }

.up .up_pencil{
    border: 1px solid #c4c4c4;
    background: transparent;
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
    color: #151515;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.dark .up .up_pencil{ border-color: #555555; color: #ededed; }
.up .up_pencil:hover{ border-color: #151515; }
body.dark .up .up_pencil:hover{ border-color: #ededed; }
.up .up_pencil .material-symbols-outlined{ font-size: 17px; }
.up .up_pencil_s{ width: 24px; height: 24px; vertical-align: middle; }
.up .up_pencil_s .material-symbols-outlined{ font-size: 13px; }

/* the invitation a member sees where a section has nothing in it */
.up .up_empty{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 26px 20px;
    border: 2px dashed #c4c4c4;
    border-radius: 14px;
    background: transparent;
    color: #5f5f5f;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
}
body.dark .up .up_empty{ border-color: #4d4d4d; color: #a8a8a8; }
.up .up_empty:hover{ border-color: #5c7a1e; color: #5c7a1e; }
body.dark .up .up_empty:hover{ border-color: #cae76f; color: #cae76f; }

.up .up_none{ color: #5f5f5f; font-size: 15px; }
body.dark .up .up_none{ color: #a8a8a8; }

.up .up_legend{ margin: 14px 0 0; font-size: 12px; color: #7a7a7a; line-height: 1.5; }
body.dark .up .up_legend{ color: #9a9a9a; }

/* ======================================================= figures ==== */

.up .up_figs{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: #ffffff;
    border: 1px solid #d8d8d8;
    margin: 0 0 40px;
}
body.dark .up .up_figs{ background: #262626; border-color: #3d3d3d; }

.up .up_fig{ padding: 24px 26px; border-right: 1px solid #d8d8d8; position: relative; }
body.dark .up .up_fig{ border-right-color: #3d3d3d; }
.up .up_fig:last-child{ border-right: 0; }
.up .up_fig_n{
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #151515;
}
body.dark .up .up_fig_n{ color: #ededed; }
.up .up_fig_l{ margin: 7px 0 0; font-size: 14px; color: #5f5f5f; }
body.dark .up .up_fig_l{ color: #a8a8a8; }
.up .up_fig_s{ color: #8a8a8a; }

/* a figure the member stated is not a figure //ADAPT counted, and the
   page has to be able to tell a stranger which is which */
.up .up_said{
    position: absolute;
    top: 12px; right: 14px;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a8a8a;
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    padding: 2px 7px;
}
body.dark .up .up_said{ color: #9a9a9a; border-color: #4d4d4d; }

.up .up_figs_empty{ display: block; padding: 18px 22px; }
.up .up_figs_empty p{ margin: 0; font-size: 14px; color: #5f5f5f; }
body.dark .up .up_figs_empty p{ color: #a8a8a8; }
.up .up_figs_empty a{ color: #5c7a1e; font-weight: 700; }
body.dark .up .up_figs_empty a{ color: #cae76f; }

/* ======================================================= columns ==== */

.up .up_cols{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 42px;
    align-items: start;
    padding-top: 34px;
}
.up .up_main{ min-width: 0; }
.up .up_side{ min-width: 0; position: sticky; top: 90px; }

.up .up_card{
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 0 0 18px;
}
body.dark .up .up_card{ background: #262626; border-color: #3d3d3d; }
.up .up_card_h{
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a7a7a;
}
body.dark .up .up_card_h{ color: #9a9a9a; }
.up .up_card_p{ margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #3d3d3d; }
body.dark .up .up_card_p{ color: #c8c8c8; }

/* ---- about ---- */

.up .up_about{ font-size: 17px; line-height: 1.6; color: #2a2a2a; }
body.dark .up .up_about{ color: #dcdcdc; }
.up .up_about p{ margin: 0 0 14px; }
.up .up_about p:last-child{ margin-bottom: 0; }
/* the fallback is somebody's whole CV; it is clamped until asked for */
.up .up_about_long{ max-height: 190px; overflow: hidden; position: relative; }
.up .up_about_long::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(240,240,240,0), #f0f0f0);
}
body.dark .up .up_about_long::after{ background: linear-gradient(to bottom, rgba(31,31,31,0), #1f1f1f); }
.up .up_about_long.is_open{ max-height: none; }
.up .up_about_long.is_open::after{ display: none; }

.up .up_more_t{
    margin-top: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #5c7a1e;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
}
body.dark .up .up_more_t{ color: #cae76f; }
.up .up_more_t[hidden]{ display: none; }

/* ---- availability ---- */

.up .up_avail{ margin: 0; font-size: 17px; font-weight: 700; color: #151515; display: flex; align-items: center; gap: 9px; }
body.dark .up .up_avail{ color: #ededed; }
.up .up_dot{ width: 11px; height: 11px; border-radius: 50%; background: #9a9a9a; flex: 0 0 auto; }
.up .up_avail_available .up_dot{ background: #33c27f; }
.up .up_avail_soon .up_dot{ background: #ffd701; }
.up .up_avail_listening .up_dot{ background: #cae76f; }

.up .up_tags{ margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }

.up .up_pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    color: #3d3d3d;
    text-decoration: none;
    white-space: nowrap;
}
body.dark .up .up_pill{ border-color: #4d4d4d; color: #c8c8c8; }
.up .up_pill .material-symbols-outlined{ font-size: 13px; }
.up a.up_pill_link:hover{ border-color: #5c7a1e; color: #5c7a1e; }
body.dark .up a.up_pill_link:hover{ border-color: #cae76f; color: #cae76f; }
.up .up_pill_on{ background: #cae76f; border-color: #cae76f; color: #151515; font-weight: 700; }

/* ---- links ---- */

.up .up_links{ list-style: none; margin: 0; padding: 0; }
.up .up_links li{ margin: 0 0 4px; padding: 0; }
.up .up_links a{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    text-decoration: none;
    color: #151515;
}
body.dark .up .up_links a{ color: #ededed; }
.up .up_links a:hover{ background: #f2f2f2; }
body.dark .up .up_links a:hover{ background: #333333; }
.up .up_link_m{
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #151515;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.dark .up .up_link_m{ background: #cae76f; color: #151515; }
.up .up_link_t{ min-width: 0; flex: 1 1 auto; }
.up .up_link_n{ display: block; font-size: 14px; font-weight: 700; }
.up .up_link_u{ display: block; font-size: 12px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up .up_link_a{ font-size: 15px; color: #8a8a8a; flex: 0 0 auto; }

/* ---- dojo + activity ---- */

.up .up_dojo_n{ margin: 0; font-size: 15px; color: #3d3d3d; }
body.dark .up .up_dojo_n{ color: #c8c8c8; }
.up .up_dojo_n strong{ font-size: 21px; color: #151515; }
body.dark .up .up_dojo_n strong{ color: #ededed; }

.up .up_acts{ list-style: none; margin: 0; padding: 0; }
.up .up_acts li{ margin: 0 0 12px; padding: 0 0 0 14px; position: relative; }
.up .up_acts li::before{
    content: "";
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #b4b4b4;
}
.up .up_act_t{ display: block; font-size: 13px; line-height: 1.45; color: #3d3d3d; }
body.dark .up .up_act_t{ color: #c8c8c8; }
.up .up_act_w{ display: block; font-size: 11px; color: #8a8a8a; margin-top: 2px; }

/* ======================================================= credits ==== */

.up .up_credits{ list-style: none; margin: 0; padding: 0; }
.up .up_credit{
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #dedede;
    align-items: start;
}
body.dark .up .up_credit{ border-bottom-color: #3d3d3d; }
.up .up_credit:last-child{ border-bottom: 0; }
.up .up_credit_art{
    width: 74px; height: 100px;
    background: #e2e2e2 center center / cover no-repeat;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
}
body.dark .up .up_credit_art{ background-color: #383838; }
.up .up_credit_t{ margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #151515; }
body.dark .up .up_credit_t{ color: #ededed; }
.up .up_credit_k{ margin: 4px 0 0; font-size: 13px; color: #7a7a7a; }
.up .up_credit_r{ margin: 3px 0 0; font-size: 15px; font-weight: 700; color: #3d3d3d; }
body.dark .up .up_credit_r{ color: #c8c8c8; }
.up .up_credit_p{ margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.up .up_credit_y{ margin: 0; font-size: 20px; font-weight: 700; color: #151515; white-space: nowrap; }
body.dark .up .up_credit_y{ color: #ededed; }

/* the badge that says a third party confirmed it, which the member
   cannot set themselves */
.up .up_vtag{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
    margin-left: 8px;
    background: #cae76f;
    color: #151515;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.up .up_vtag .material-symbols-outlined{ font-size: 12px; }

/* ==================================================== reel/gallery ==== */

.up .up_reel{
    position: relative;
    aspect-ratio: 16 / 7;
    background: #1b1b1b center center / cover no-repeat;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.up .up_reel_body{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.up .up_reel_body iframe{ width: 100%; height: 100%; border: 0; }
.up .up_reel_go{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.62);
    color: #ffffff;
    padding: 14px 26px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.up .up_reel_go:hover{ background: #000000; }
.up .up_reel_foot{
    position: relative;
    padding: 46px 22px 18px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.85));
    pointer-events: none;
}
.up .up_reel_m{ margin: 0 0 7px; display: flex; gap: 8px; flex-wrap: wrap; }
.up .up_reel_foot .up_pill{ border-color: rgba(255,255,255,0.45); color: #ffffff; }
.up .up_reel_foot .up_pill_on{ background: #cae76f; border-color: #cae76f; color: #151515; }
.up .up_reel_t{ margin: 0; font-size: 21px; font-weight: 700; color: #ffffff; }
.up .up_reel.is_playing .up_reel_foot{ display: none; }

.up .up_grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-auto-rows: 168px;
    gap: 12px;
}
.up .up_tile{ margin: 0; position: relative; overflow: hidden; border-radius: 8px; background: #e2e2e2; }
body.dark .up .up_tile{ background: #333333; }
.up .up_tile_tall{ grid-row: span 2; }
.up .up_tile a{ display: block; width: 100%; height: 100%; }
.up .up_tile img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.up .up_tile figcaption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px 12px 9px;
    font-size: 12px;
    color: #ffffff;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================================================= courses ==== */

.up .up_courses{ display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.up .up_course{
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.dark .up .up_course{ background: #262626; border-color: #3d3d3d; }
.up .up_course_art{
    aspect-ratio: 16 / 9;
    background: #e2e2e2 center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
}
body.dark .up .up_course_art{ background-color: #383838; }
.up .up_course_txt{ padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.up .up_course_t{ margin: 0; font-size: 18px; font-weight: 700; color: #151515; }
body.dark .up .up_course_t{ color: #ededed; }
.up .up_course_d{ margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: #5f5f5f; }
body.dark .up .up_course_d{ color: #a8a8a8; }
.up .up_course_f{ margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; }
.up .up_course_p{ font-size: 18px; font-weight: 700; color: #151515; }
body.dark .up .up_course_p{ color: #ededed; }
.up .up_course_f .up_btn{ margin-left: auto; }

/* ======================================================== skills ==== */

.up .up_skills{ display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px 46px; }
.up .up_skill_g{ break-inside: avoid; }
.up .up_skill_c{
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.up .up_skill_g ul{ list-style: none; margin: 0 0 18px; padding: 0; }
.up .up_skill{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}
.up .up_skill_n{ flex: 1 1 auto; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #151515; }
body.dark .up .up_skill_n{ color: #ededed; }
.up .up_skill_b{ display: inline-flex; gap: 3px; flex: 0 0 auto; }
.up .up_skill_b i{ width: 15px; height: 6px; background: #d5d5d5; display: inline-block; }
body.dark .up .up_skill_b i{ background: #4a4a4a; }
.up .up_skill_b i.on{ background: #151515; }
body.dark .up .up_skill_b i.on{ background: #cae76f; }

.up .up_endo{
    flex: 0 0 auto;
    min-width: 44px;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    background: transparent;
    padding: 3px 9px;
    font-size: 12px;
    color: #5f5f5f;
    cursor: pointer;
    font-family: inherit;
}
body.dark .up .up_endo{ border-color: #4d4d4d; color: #a8a8a8; }
.up button.up_endo:hover{ border-color: #5c7a1e; color: #5c7a1e; }
body.dark .up button.up_endo:hover{ border-color: #cae76f; color: #cae76f; }
.up .up_endo.is_on{ background: #cae76f; border-color: #cae76f; color: #151515; font-weight: 700; }
.up .up_endo.is_flat{ cursor: default; }

/* ======================================================= parcours ==== */

.up .up_career{ list-style: none; margin: 0; padding: 0; }
.up .up_job{
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #dedede;
    align-items: start;
}
body.dark .up .up_job{ border-bottom-color: #3d3d3d; }
.up .up_job:last-child{ border-bottom: 0; }
.up .up_job_m{
    width: 52px; height: 52px;
    border-radius: 8px;
    background: #151515;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dark .up .up_job_m{ background: #cae76f; color: #151515; }
.up .up_job_r{ margin: 0; font-size: 18px; font-weight: 700; color: #151515; }
body.dark .up .up_job_r{ color: #ededed; }
.up .up_job_c{ margin: 4px 0 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #3d3d3d; }
body.dark .up .up_job_c{ color: #c8c8c8; }
.up .up_job_c a{ color: #5c7a1e; font-weight: 700; text-decoration: none; }
body.dark .up .up_job_c a{ color: #cae76f; }
.up .up_job_c a:hover{ text-decoration: underline; }
.up .up_job_d{ margin: 3px 0 0; font-size: 13px; color: #7a7a7a; }
.up .up_job_s{ margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #5f5f5f; }
body.dark .up .up_job_s{ color: #a8a8a8; }
.up .up_job_y{ margin: 0; font-size: 13px; color: #7a7a7a; white-space: nowrap; }

/* ============================================================= CV ==== */

.up .up_cv{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    padding: 16px 20px;
}
body.dark .up .up_cv{ background: #262626; border-color: #3d3d3d; }
.up .up_cv_k{
    background: #9d1c10;
    color: #ffffff;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.up .up_cv_t{ flex: 1 1 220px; min-width: 0; }
.up .up_cv_n{ margin: 0; font-size: 16px; font-weight: 700; color: #151515; }
body.dark .up .up_cv_n{ color: #ededed; }
.up .up_cv_d{ margin: 3px 0 0; font-size: 13px; color: #7a7a7a; }
.up .up_cv_lock{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a86b00;
}
body.dark .up .up_cv_lock{ color: #ffd701; }
.up .up_cv .up_btn_line{ color: #151515; border-color: #b4b4b4; }
body.dark .up .up_cv .up_btn_line{ color: #ededed; border-color: #555555; }

/* ======================================================== editor ==== */
/* The panel that slides in from the right. Same idea as the business
   editor, kept on the page so a member never loses their place. */

.up .up_editor{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100%);
    background: #ffffff;
    box-shadow: -14px 0 44px rgba(0,0,0,0.25);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
body.dark .up .up_editor{ background: #262626; }
.up .up_editor.is_open{ transform: translateX(0); }
.up .up_editor[hidden]{ display: none; }

.up .up_ed_head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #d8d8d8;
}
body.dark .up .up_ed_head{ border-bottom-color: #3d3d3d; }
.up .up_ed_head h3{ margin: 0; font-size: 19px; font-weight: 700; flex: 1 1 auto; color: #151515; }
body.dark .up .up_ed_head h3{ color: #ededed; }
.up .up_ed_x{ border: 0; background: transparent; cursor: pointer; font-size: 24px; line-height: 1; color: #5f5f5f; font-family: inherit; }
body.dark .up .up_ed_x{ color: #a8a8a8; }

.up .up_ed_body{ flex: 1 1 auto; overflow-y: auto; padding: 20px 22px; }
.up .up_ed_foot{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid #d8d8d8;
}
body.dark .up .up_ed_foot{ border-top-color: #3d3d3d; }
.up .up_ed_msg{ font-size: 13px; color: #7a7a7a; flex: 1 1 auto; }

.up .up_f{ margin: 0 0 18px; }
.up .up_f label, .up .up_f .up_f_l{
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin: 0 0 6px;
}
.up .up_f input[type="text"],
.up .up_f input[type="number"],
.up .up_f select,
.up .up_f textarea{
    width: 100%;
    border: 1px solid #c4c4c4;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 15px;
    font-family: inherit;
    background: #ffffff;
    color: #151515;
}
body.dark .up .up_f input[type="text"],
body.dark .up .up_f input[type="number"],
body.dark .up .up_f select,
body.dark .up .up_f textarea{ background: #333333; border-color: #4d4d4d; color: #ededed; }
.up .up_f textarea{ min-height: 120px; resize: vertical; line-height: 1.55; }
.up .up_f_h{ margin: 5px 0 0; font-size: 12px; color: #8a8a8a; }

.up .up_chk{ display: flex; flex-wrap: wrap; gap: 8px; }
.up .up_chk label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c4c4c4;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #3d3d3d;
    margin: 0;
}
body.dark .up .up_chk label{ border-color: #4d4d4d; color: #c8c8c8; }
.up .up_chk label.is_on{ background: #cae76f; border-color: #cae76f; color: #151515; font-weight: 700; }
.up .up_chk input{ position: absolute; opacity: 0; width: 0; height: 0; }

/* repeatable rows -- the career list */
.up .up_rows{ margin: 0 0 14px; }
.up .up_row{
    border: 1px solid #d8d8d8;
    border-radius: 11px;
    padding: 14px;
    margin: 0 0 12px;
    background: #fafafa;
}
body.dark .up .up_row{ background: #2f2f2f; border-color: #444444; }
.up .up_row_h{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.up .up_row_g{ cursor: grab; color: #9a9a9a; }
.up .up_row_n{ flex: 1 1 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a7a; }
.up .up_row_x{ border: 0; background: transparent; color: #9d1c10; cursor: pointer; font-size: 13px; font-family: inherit; }
.up .up_two{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.up .up_ghost_row{ opacity: 0.4; }
.up .up_chosen_row{ background: #eef6d8; }

/* ==================================================== narrow ======== */

@media (max-width: 1080px){
    .up .up_cols{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .up .up_side{ position: static; }
    .up .up_avatar{ width: 168px; height: 168px; margin-top: -84px; }
    .up .up_avatar_i{ font-size: 46px; }
}

@media (max-width: 860px){
    .up .up_wrap{ padding: 0 16px; }
    .up .up_adminbar_in{ padding: 0 16px; }
    .up .up_id_in{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .up .up_deck{ justify-content: flex-start; }
    .up .up_btn{ padding: 12px 20px; font-size: 15px; }
    .up .up_btn_round{ width: 46px; height: 46px; }
    .up .up_avatar{ width: 132px; height: 132px; margin-top: -66px; border-width: 5px; }
    .up .up_avatar_i{ font-size: 36px; }
    .up .up_banner{ height: 40vh; min-height: 240px; }
    .up .up_credit{ grid-template-columns: 56px minmax(0, 1fr); }
    .up .up_credit_art{ width: 56px; height: 76px; }
    .up .up_credit_y{ grid-column: 2; font-size: 15px; }
    .up .up_job{ grid-template-columns: 42px minmax(0, 1fr); }
    .up .up_job_m{ width: 42px; height: 42px; font-size: 14px; }
    .up .up_job_y{ grid-column: 2; }
    .up .up_two{ grid-template-columns: 1fr; }
    .up .up_grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 130px; }
}

/* ===================== ALBUM: FOLDERS AND PICKING ==================== */

.up .up_album.is_busy{ opacity: 0.55; pointer-events: none; }

.up .up_al_bar{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}

.up .up_crumbs{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.up .up_crumb{ font-size: 14px; color: #5c7a1e; text-decoration: none; font-weight: 700; }
body.dark .up .up_crumb{ color: #cae76f; }
.up .up_crumb:hover{ text-decoration: underline; }
.up .up_crumb.is_on{ color: #151515; font-weight: 700; }
body.dark .up .up_crumb.is_on{ color: #ededed; }
.up .up_crumb_s{ color: #a0a0a0; font-size: 14px; }
.up .up_crumb_n{ font-size: 12px; color: #8a8a8a; margin-left: 6px; }

.up .up_al_do{ display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.up .up_al_b{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #c4c4c4;
    border-radius: 999px;
    background: transparent;
    padding: 7px 15px;
    font-size: 13px;
    cursor: pointer;
    color: #151515;
    font-family: inherit;
}
body.dark .up .up_al_b{ border-color: #4d4d4d; color: #ededed; }
.up .up_al_b:hover{ border-color: #151515; }
body.dark .up .up_al_b:hover{ border-color: #ededed; }
.up .up_al_b .material-symbols-outlined{ font-size: 16px; }
.up .up_al_b.is_on, .up .up_al_b_go{ background: #cae76f; border-color: #cae76f; color: #151515; font-weight: 700; }

.up .up_al_move{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #151515;
    color: #ffffff;
    border-radius: 999px;
    padding: 9px 16px;
    margin: 0 0 14px;
}
.up .up_al_move[hidden]{ display: none; }
.up .up_al_count{
    background: #cae76f;
    color: #151515;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 700;
}
.up .up_al_move_l{ font-size: 13px; color: #d0d0d0; }
.up .up_al_sel{
    border: 1px solid #555555;
    background: #2a2a2a;
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    max-width: 240px;
}
.up .up_al_move .up_al_b{ border-color: #6a6a6a; color: #ffffff; padding: 6px 14px; }
.up .up_al_move .up_al_b_go{ border-color: #cae76f; color: #151515; }

/* ---- a folder tile ---- */

.up .up_folder{ background: transparent; }
.up .up_folder_a{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%; height: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cfcfcf;
    background: #e9e9e9 center center / cover no-repeat;
    text-decoration: none;
    color: #151515;
    position: relative;
    overflow: hidden;
}
body.dark .up .up_folder_a{ border-color: #454545; background-color: #303030; color: #ededed; }
.up .up_folder_a:hover{ border-color: #5c7a1e; }
body.dark .up .up_folder_a:hover{ border-color: #cae76f; }

/* a cover photo needs a veil under the name, or the two fight */
.up .up_folder_v{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.72));
    opacity: 0;
}
.up .up_folder_a[style*="background-image"] .up_folder_v{ opacity: 1; }
.up .up_folder_a[style*="background-image"]{ color: #ffffff; }

.up .up_folder_i{ position: relative; font-size: 30px; margin-bottom: auto; opacity: 0.85; }
.up .up_folder_t{ position: relative; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up .up_folder_n{ position: relative; font-size: 11px; opacity: 0.75; }

/* ---- selecting ---- */

/* The tick on a tile.
   Hidden by default on every device, because a control that sits
   permanently over the corner of a picture turns "open this" into
   "select this" by accident -- which is exactly what a thumb does on a
   phone. It appears on hover where there is a pointer, and for everyone
   once Organiser is pressed, which is the same bargain the photo app on
   the member's phone makes. */
.up .up_pick{
    position: absolute;
    top: 8px; left: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: rgba(0,0,0,0.35);
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

@media (hover: hover) and (pointer: fine){
    .up .up_tile:hover .up_pick{ opacity: 1; pointer-events: auto; }
}

/* organising: on every device, and the whole tile becomes the target */
.up .up_album.is_picking .up_pick{ opacity: 1; pointer-events: auto; }

.up .up_tile.is_picked .up_pick{ background: #cae76f; border-color: #cae76f; }
.up .up_tile.is_picked .up_pick::after{
    content: "";
    position: absolute;
    left: 7px; top: 3px;
    width: 5px; height: 10px;
    border: solid #151515;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.up .up_tile.is_picked{ outline: 3px solid #cae76f; outline-offset: 2px; }

/* while organising, a click ticks rather than opens */
.up .up_album.is_picking .up_tile_go,
.up .up_album.is_picking .up_folder_a{ pointer-events: none; }
.up .up_album.is_picking .up_pick{ inset: 0; width: auto; height: auto; border-radius: 8px; border: 0; background: transparent; }
.up .up_album.is_picking .up_tile.is_picked .up_pick{ background: rgba(202,231,111,0.22); }
.up .up_album.is_picking .up_pick::after{ display: none; }

/* rename and remove, on a folder tile. Unlike the tick these do not
   overlap anything a tap wants -- a folder opens from its middle -- so
   on a touch screen they simply stay visible, where hover would have
   hidden them for good. */
.up .up_tile_do{
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    gap: 4px;
    z-index: 3;
    transition: opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine){
    .up .up_tile_do{ opacity: 0; }
    .up .up_tile:hover .up_tile_do{ opacity: 1; }
}
.up .up_tile_b{
    width: 28px; height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.up .up_tile_b:hover{ background: #000000; }
.up .up_tile_b .material-symbols-outlined{ font-size: 15px; }

/* ---- a picture tile is now a button ---- */

.up .up_tile_go{
    display: block;
    width: 100%; height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    position: relative;
    font-family: inherit;
}
.up .up_tile_go:focus-visible{ outline: 3px solid #5c7a1e; outline-offset: 2px; }
.up .up_tile_z{
    position: absolute;
    right: 8px; bottom: 8px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine){
    .up .up_tile:hover .up_tile_z{ opacity: 1; }
}
/* the zoom hint is decoration; on touch the whole tile is the target */
@media (hover: none){
    .up .up_tile_z{ display: none; }
}
.up .up_tile_z .material-symbols-outlined{ font-size: 17px; }

/* ========================== THE LIGHTBOX ============================ */

/* the page behind must not scroll while this is open */
body.up_locked{ overflow: hidden; }

.up_light{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.up_light[hidden]{ display: none; }

.up_light_bg{ position: absolute; inset: 0; background: rgba(8,8,8,0.97); cursor: zoom-out; }

.up_light_box{
    position: relative;
    margin: 0;
    max-width: min(92vw, 1600px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.up_light_box img{
    max-width: 100%;
    max-height: 78vh;
    width: auto; height: auto;
    display: block;
    object-fit: contain;
    border-radius: 3px;
}

.up_light_cap{ max-width: 760px; text-align: center; color: #ededed; }
.up_light_cap[hidden]{ display: none; }
.up_light_t{ display: block; font-size: 16px; font-weight: 700; }
.up_light_n{ display: block; font-size: 13px; color: #b0b0b0; margin-top: 3px; line-height: 1.5; }

.up_light_a,
.up_light_x{
    position: absolute;
    z-index: 2;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.up_light_a:hover,
.up_light_x:hover{ background: rgba(255,255,255,0.22); }
.up_light_a[hidden]{ display: none; }

.up_light_a{ top: 50%; transform: translateY(-50%); width: 60px; height: 60px; }
.up_light_prev{ left: 22px; }
.up_light_next{ right: 22px; }
.up_light_a .material-symbols-outlined{ font-size: 28px; }

.up_light_x{ top: 20px; right: 22px; width: 46px; height: 46px; }
.up_light_x .material-symbols-outlined{ font-size: 24px; }

.up_light_c{
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 12px;
    color: #9a9a9a;
    letter-spacing: 0.06em;
}

@media (max-width: 860px){
    .up_light_a{ width: 44px; height: 44px; }
    .up_light_prev{ left: 8px; }
    .up_light_next{ right: 8px; }
    .up_light_box img{ max-height: 66vh; }
    .up .up_al_do{ margin-left: 0; width: 100%; }
    .up .up_al_sel{ max-width: 150px; }
}

/* ======================= THE LIGHTBOX ON TOUCH ======================= */

/* The browser must not claim the gestures the lightbox needs. Without
   this, a sideways drag is the back gesture and a pinch zooms the whole
   page, so neither ever reaches the JavaScript. */
.up_light{ touch-action: none; }
.up_light_box img{
    touch-action: none;
    transform-origin: center center;
    will-change: transform;
    /* a long press on a picture should not offer to save or drag it
       while the reader is trying to swipe */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.up_light.is_zoomed .up_light_box img{ cursor: grab; }

/* zoomed in, the chrome is in the way of the picture */
.up_light.is_zoomed .up_light_a,
.up_light.is_zoomed .up_light_cap,
.up_light.is_zoomed .up_light_c{ opacity: 0; pointer-events: none; }

/* On a touch screen the gestures are the controls, so the arrows get out
   of the way -- but they stay for a stylus, a trackpad in tablet mode,
   and anyone who cannot make a swipe. They are moved to the bottom
   corners, where a thumb reaches without covering the picture. */
@media (hover: none) and (pointer: coarse){
    .up_light_a{
        top: auto;
        bottom: 18px;
        transform: none;
        width: 52px; height: 52px;
        background: rgba(255,255,255,0.14);
    }
    .up_light_prev{ left: 14px; }
    .up_light_next{ right: 14px; }

    .up_light_x{ top: 14px; right: 14px; width: 52px; height: 52px; }

    /* clear of the arrows, and of the home indicator */
    .up_light_c{ bottom: 84px; }
    .up_light_box{ max-height: 90vh; }
    .up_light_box img{ max-height: 72vh; }
    .up_light_cap{ padding: 0 18px; }
}

/* the album's own controls need thumb-sized targets too */
@media (hover: none) and (pointer: coarse){
    .up .up_al_b{ padding: 10px 16px; font-size: 14px; }
    .up .up_tile_b{ width: 36px; height: 36px; }
    .up .up_tile_b .material-symbols-outlined{ font-size: 18px; }
    .up .up_pick{ width: 30px; height: 30px; }
    .up .up_tile.is_picked .up_pick::after{ left: 9px; top: 5px; width: 6px; height: 12px; }
    .up .up_al_move{ border-radius: 16px; }
}

/* "remove from this album" sits in the black selection bar. It is not a
   delete -- the files survive in Médias -- so it is outlined rather than
   filled: distinct from Déplacer without shouting. */
.up .up_al_move .up_al_b_bad{ border-color: #c96a60; color: #ffb4ab; }
.up .up_al_move .up_al_b_bad:hover{ border-color: #ff9c94; color: #ff9c94; }
.up .up_al_b_bad .material-symbols-outlined{ font-size: 15px; }

/* ======================== DRAGGING TO REORDER ======================== */

/* The grip is the only part of a tile that starts a drag. It sits
   bottom-left: the tick is top-left, the folder buttons are top-right
   and the zoom hint is bottom-right, so the four never overlap. */
.up .up_grip{
    position: absolute;
    left: 8px; bottom: 8px;
    width: 30px; height: 30px;
    border-radius: 7px;
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.12s ease;
    /* the browser must not try to scroll or select from this square */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.up .up_grip:active{ cursor: grabbing; }

@media (hover: hover) and (pointer: fine){
    .up .up_tile:hover .up_grip{ opacity: 1; }
}

/* no hover on a touch screen, so the handle is simply there */
@media (hover: none){
    .up .up_grip{ opacity: 1; width: 34px; height: 34px; }
}

/* while organising, a press anywhere on a tile ticks it, so a grip
   would be a second meaning for the same gesture */
.up .up_album.is_picking .up_grip{ display: none; }

/* the hole the tile came from */
.up .up_tile.up_ghost{ opacity: 0.35; }
.up .up_tile.up_ghost img{ filter: grayscale(1); }

/* the tile under the finger */
.up .up_tile.up_chosen{ outline: 3px solid #cae76f; outline-offset: 2px; }
.up .up_tile.up_dragging{ opacity: 0.9; }

/* the order is saved on drop; this is the only sign of it, and it is
   deliberately quiet -- a spinner for a 60ms request is noise */
.up .up_album.is_saving .up_grid{ opacity: 0.72; transition: opacity 0.1s ease; }

/* =========================== FULL SCREEN ============================ */

.up .up_al_fs{ display: flex; gap: 8px; margin-left: auto; }
/* with the edit tools present the two groups sit together on the right */
.up .up_al_fs + .up_al_do{ margin-left: 0; }
.up .up_al_b[hidden]{ display: none; }
.up .up_al_b.is_on{ background: #cae76f; border-color: #cae76f; color: #151515; font-weight: 700; }

/* ---- the grid, full screen ----
   A full-screen element is painted on the browser's own black backdrop
   and keeps NONE of the page around it, so it has to supply the
   background, the padding and the scrolling it was getting from the
   page a moment ago. Without this it is a light island floating on
   black with its tiles cut off at the bottom. */
.up .up_album:fullscreen{
    background: #f0f0f0;
    padding: 26px 30px 40px;
    overflow-y: auto;
}
.up .up_album:-webkit-full-screen{
    background: #f0f0f0;
    padding: 26px 30px 40px;
    overflow-y: auto;
}
body.dark .up .up_album:fullscreen{ background: #1f1f1f; }
body.dark .up .up_album:-webkit-full-screen{ background: #1f1f1f; }

/* more of the screen means more tiles across, not bigger tiles */
.up .up_album:fullscreen .up_grid{
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 190px;
}
.up .up_album:-webkit-full-screen .up_grid{
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 190px;
}

/* the bar stays reachable while the grid scrolls under it */
.up .up_album:fullscreen .up_al_bar{
    position: sticky;
    top: -26px;
    z-index: 5;
    margin: -26px -30px 14px;
    padding: 18px 30px 14px;
    background: #f0f0f0;
}
.up .up_album:-webkit-full-screen .up_al_bar{
    position: sticky;
    top: -26px;
    z-index: 5;
    margin: -26px -30px 14px;
    padding: 18px 30px 14px;
    background: #f0f0f0;
}
body.dark .up .up_album:fullscreen .up_al_bar{ background: #1f1f1f; }
body.dark .up .up_album:-webkit-full-screen .up_al_bar{ background: #1f1f1f; }

/* ---- the viewer, full screen ----
   It is already a fixed sheet over everything, so it needs almost
   nothing -- only the room the browser chrome was taking. */
.up_light:fullscreen .up_light_box img{ max-height: 92vh; }
.up_light:-webkit-full-screen .up_light_box img{ max-height: 92vh; }
.up_light:fullscreen .up_light_box{ max-height: 96vh; max-width: 96vw; }
.up_light:-webkit-full-screen .up_light_box{ max-height: 96vh; max-width: 96vw; }

/* the two round buttons share the top-right corner */
.up_light_fs{ right: 78px; }
@media (max-width: 860px){ .up_light_fs{ right: 76px; } }
@media (hover: none) and (pointer: coarse){ .up_light_fs{ top: 14px; right: 78px; } }

/* the backdrop behind a full-screen element, for the brief moment it
   shows during the transition */
.up .up_album::backdrop,
.up_light::backdrop{ background: #080808; }

/* ---- the window-filling fallback ----
   What the button does when requestFullscreen() is refused: the whole
   window rather than the whole screen. It cannot hide the browser's own
   chrome, but everything this page controls gets out of the way, and
   the press is never wasted. */
.up .up_album.up_faux{
    position: fixed;
    inset: 0;
    z-index: 900;
    margin: 0;
    background: #f0f0f0;
    padding: 26px 30px 40px;
    overflow-y: auto;
}
body.dark .up .up_album.up_faux{ background: #1f1f1f; }

.up .up_album.up_faux .up_grid{
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 190px;
}

.up .up_album.up_faux .up_al_bar{
    position: sticky;
    top: -26px;
    z-index: 5;
    margin: -26px -30px 14px;
    padding: 18px 30px 14px;
    background: #f0f0f0;
}
body.dark .up .up_album.up_faux .up_al_bar{ background: #1f1f1f; }

/* the viewer is already a fixed sheet; filling the window only means
   taking back the room its own margins were leaving */
.up_light.up_faux .up_light_box{ max-height: 96vh; max-width: 96vw; }
.up_light.up_faux .up_light_box img{ max-height: 92vh; }