/* The suggestions board, now a section at the bottom of the front page instead of a page
   of its own. Every rule is scoped to #suggestions: the gallery above uses short class
   names (.name, .dot, .rows) and neither side should reach the other.
   Colours come from the page's own palette; only the handful the gallery never needed are
   declared here, once per theme. */
#suggestions{--dim:#968f83;--link-quiet:#b08d63;--btn-fg:#1b1a17;--mine-tint:rgba(196,166,107,.07);--cta-bg:var(--paper);--cta-fg:#282622;--cta-shadow:var(--rose);--danger:#c98b8b;--error:#d9a2a2;--ok:#e5c88e}
html[data-theme=light] #suggestions{--dim:#5c574e;--link-quiet:#6f5330;--btn-fg:#f4efe6;--mine-tint:rgba(118,94,56,.1);--cta-bg:#282622;--cta-fg:#efeae1;--cta-shadow:#9b8d79;--danger:#8d4a4a;--error:#8d3f3f;--ok:#6b5220}

/* The Patreon closer above casts a 12px offset shadow; the kicker was landing on it. */
#suggestions{margin-top:78px}
/* And "currently winning" labels the panel it sits in, not the section above it. */
#suggestions .leader-label{margin:0 0 10px;font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fairy)}

/* The week, in one strip: how long is left, and who you are on it. Both halves reserve their
   height, so the clock arriving and the account arriving move nothing. */
#suggestions .week-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;min-height:78px;margin-top:26px;padding:16px 22px;border:1px solid var(--fairy);border-radius:22px 7px 22px 7px;background:var(--surface)}
#suggestions .week-clock{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0}
#suggestions .week-clock b{font:600 clamp(22px,3.4vw,30px)/1 var(--mono);letter-spacing:-.02em;color:var(--fairy);font-variant-numeric:tabular-nums}
#suggestions .week-clock span{font:10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
#suggestions .week-you{display:flex;align-items:center;gap:12px;min-height:44px;margin-left:auto}
#suggestions .week-you .who-line{display:grid;gap:3px;min-width:0}
#suggestions .week-you .who-line strong{overflow:hidden;font:500 15px/1.2 var(--serif);color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
#suggestions .week-you .who-line span{font:10px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
#suggestions .week-you .avatar{width:34px;height:34px}
/* Reserved until the first render, so the leader panel does not appear out of nothing and
   shove the board down — and released straight after, so a week with nothing on it does not
   leave a 250px hole. The placeholder breathes rather than spins: there is really something
   coming, and it is the only place on the section where that is true. */
#suggestions .leader-slot{margin-top:22px}
#suggestions .leader-slot:not(.settled){min-height:250px;border:1px solid var(--line);border-radius:30px 10px 30px 10px;background:var(--surface);animation:board-waiting 1.4s ease-in-out infinite alternate}
@keyframes board-waiting{from{opacity:.5}to{opacity:.85}}
@media(max-width:720px){#suggestions .leader-slot:not(.settled){min-height:340px}}
@media(prefers-reduced-motion:reduce){#suggestions .leader-slot:not(.settled){animation:none}}

/* A new suggestion sorts itself in by votes, so it can appear anywhere on the board.
   This is it settling into that place. */
@keyframes board-landed{
  from{transform:translateY(14px);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes board-landed-glow{
  from{box-shadow:0 0 0 2px var(--fairy)}
  to{box-shadow:0 0 0 2px transparent}
}
#suggestions .landed{animation:board-landed .55s cubic-bezier(.16,1,.3,1) both,board-landed-glow 1.6s ease-out .35s both}

/* leader — the thing being decided, stated once and large */
#suggestions .leader{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center;margin-top:6px;padding:28px;border:1px solid var(--fairy);border-radius:30px 10px 30px 10px;background:var(--surface);box-shadow:9px 9px 0 var(--block-shadow)}
#suggestions .leader h3{margin:0;font:500 clamp(34px,5vw,54px)/.9 var(--serif);letter-spacing:-.035em;color:var(--paper)}
/* The series belongs to the character, so it hangs off the name rather than sitting beside
   the person who suggested it. Same rule in the rows and in the profile lists. */
#suggestions .of{display:block;margin-top:10px;font:11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fairy)}
#suggestions .leader p{max-width:40ch;margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
#suggestions .byline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;font:12px/1.5 var(--mono);color:var(--muted)}
#suggestions .figures{display:flex;align-items:baseline;justify-content:flex-end;gap:30px}
#suggestions .figure{text-align:right}
#suggestions .figure b{display:block;font:600 clamp(38px,5vw,60px)/.85 var(--mono);color:var(--paper)}
#suggestions .figure.pct-big b{color:var(--fairy)}
#suggestions .figure span{display:block;margin-top:8px;font:10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
#suggestions .bar{height:6px;margin-top:20px;border-radius:99px;background:var(--surface-2);overflow:hidden}
#suggestions .bar i{display:block;height:100%;background:var(--fairy)}

/* rows — character and series, then who put it there, then the tally and the one action */
#suggestions .rows{display:flex;flex-direction:column;gap:12px;margin-top:20px}
#suggestions .brow{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 22px;border:1px solid var(--line);border-radius:18px 6px 18px 6px;background:var(--surface)}
/* Signed out there is no button on the row, and an empty track still carries its gap. */
#suggestions .brow.no-action{grid-template-columns:30px minmax(0,1fr) auto}
#suggestions .brow.mine{border-color:var(--fairy);background:var(--mine-tint)}
#suggestions .rank{font:600 15px/1 var(--mono);color:var(--dim)}
#suggestions .brow.mine .rank{color:var(--fairy)}
#suggestions .who-name{min-width:0}
#suggestions .name-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px}
#suggestions .name-top b{font:500 21px/1.2 var(--serif);color:var(--paper)}
#suggestions .name-top .from{font:11px/1 var(--mono);color:var(--fairy)}
#suggestions .name-top .from::before{content:'·';margin-right:9px;color:var(--dim)}
#suggestions .tag{padding:4px 8px;border:1px solid var(--fairy);border-radius:6px 2px 6px 2px;font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fairy)}
/* "Who is this?" is 10px text, and --rose left it at 3.36:1. Its own token: --rose still
   tints the bar and the ✦, which are not text and answer to the 3:1 threshold. */
#suggestions .who{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--link-quiet);white-space:nowrap}
#suggestions .who:hover{color:var(--fairy)}
#suggestions .by{display:flex;align-items:center;gap:9px;margin-top:9px}
#suggestions .mini{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;object-fit:cover;background:var(--surface-2);color:var(--muted);font:600 9px/1 var(--sans)}
#suggestions .byline .mini{width:26px;height:26px;font-size:11px}
#suggestions .brow.mine .mini{background:var(--fairy);color:var(--ink)}
#suggestions .by span{font:11px/1 var(--mono);color:var(--dim)}
#suggestions .tally{text-align:right}
/* Tallies are read against each other down a column, so the digits have to line up. */
#suggestions .count,#suggestions .figure b{font-variant-numeric:tabular-nums}
#suggestions .count{display:block;font:600 20px/1 var(--mono);color:var(--paper)}
#suggestions .pct{display:block;margin-top:6px;font:500 11px/1 var(--mono);color:var(--dim)}
#suggestions .brow .bar{height:5px;margin-top:14px}
#suggestions .brow .bar i{background:var(--rose)}
#suggestions .brow.mine .bar i{background:var(--fairy)}
#suggestions .state{min-width:96px;text-align:center;font:11px/1.4 var(--mono);color:var(--dim)}

/* Arming a button floods it with the accent from the point you pressed — the same
   circular reveal the theme switch uses, kept inside the control. */
/* touch-action keeps a double tap on a control from zooming the page instead of pressing it. */
#suggestions .btn,#suggestions .compose-toggle,#suggestions .profile-close{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#suggestions .btn{position:relative;isolation:isolate;overflow:hidden;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border:1px solid var(--paper);border-radius:14px 5px 14px 5px;background:var(--paper);color:var(--btn-fg);font:600 13px var(--sans);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,color .3s ease,border-color .3s ease}
#suggestions .btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fairy);clip-path:circle(0 at var(--press-x,50%) var(--press-y,50%));transition:clip-path .42s cubic-bezier(.42,0,.18,1)}
#suggestions .btn.armed::before{clip-path:circle(142% at var(--press-x,50%) var(--press-y,50%))}
#suggestions .btn.armed{border-color:var(--fairy);color:var(--ink)}
#suggestions .btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fairy)}
#suggestions .btn:disabled{opacity:.45;cursor:not-allowed}
#suggestions .btn.ghost{background:transparent;color:var(--paper)}
#suggestions .btn.small{min-height:38px;padding:0 14px;font-size:12px;border-radius:13px 4px 13px 4px}
#suggestions .btn.danger{border-color:#8d5c5c;background:transparent;color:var(--danger)}
#suggestions .btn.voted{border-color:var(--fairy);background:transparent;color:var(--fairy);cursor:default}

/* Adding one: shut by default, because it is a once-a-week act and not the first thing
   anyone has to read. The trigger is a full-width row so it never looks like a stray link. */
#suggestions .compose{margin-top:26px;border:1px solid var(--line);border-radius:22px 7px 22px 7px;background:var(--surface)}
#suggestions .compose[hidden]{display:none}
#suggestions .compose-toggle{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 22px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
#suggestions .compose-toggle:hover .compose-plus,#suggestions .compose-toggle:focus-visible .compose-plus{background:var(--fairy);color:var(--ink)}
#suggestions .compose-plus{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--fairy);border-radius:50%;color:var(--fairy);font:400 20px/1 var(--sans);transition:background .2s ease,color .2s ease,transform .25s ease}
#suggestions .compose-toggle[aria-expanded=true] .compose-plus{transform:rotate(45deg)}
#suggestions .compose-label{display:grid;gap:3px;font:500 17px/1.2 var(--serif);color:var(--paper)}
#suggestions .compose-label small{font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#suggestions .compose-panel{padding:4px 22px 22px}
#suggestions .compose-panel[hidden]{display:none}
/* Rows here wrap: the form drops its buttons onto a second line. A 12px gap was fine side by
   side and far too tight once they stacked. */
#suggestions .row-flex{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:18px}

/* The rules — six short lines, plain reading order. */
#suggestions .rules{margin-top:34px;padding:22px 26px;border:1px solid var(--line);border-radius:22px 7px 22px 7px;background:var(--surface)}
#suggestions .rules h3{margin:0;font:500 21px/1.15 var(--serif);color:var(--paper)}
/* Two columns, never four: six short rules spread across a 1200px row stop being a list and
   become a wall of fragments. */
#suggestions .rules-list{display:grid;gap:10px 40px;margin:18px 0 0;padding:0;list-style:none}
@media(min-width:760px){#suggestions .rules-list{grid-template-columns:1fr 1fr}}
#suggestions .rules-list li{padding-left:16px;font-size:13px;line-height:1.55;color:var(--muted);text-indent:-16px}
#suggestions .rules-list li::before{content:'✦';margin-right:8px;color:var(--rose);font-size:9px;vertical-align:middle}
#suggestions .rules-list b{font-weight:600;color:var(--paper)}

#suggestions .field{display:grid;gap:7px}
#suggestions .field label{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* 16px is not a taste decision: an input under it makes iOS Safari zoom the page on focus,
   and it never zooms back out. A form field inherits nothing from the body, so it is stated. */
#suggestions .field input{min-height:50px;padding:0 15px;border:1px solid var(--line);border-radius:15px 5px 15px 5px;background:var(--ink);color:var(--paper);font:400 16px var(--sans);outline:0}
#suggestions .field input[type=file]{padding:13px}
#suggestions .field input:focus{border-color:var(--fairy);box-shadow:0 0 0 2px rgba(196,166,107,.22)}
#suggestions .hint{margin:0;font:10px/1.5 var(--mono);color:var(--dim)}
/* The line under the board answers the board, so it needs room to read as an answer. */
#suggestions #board-note{margin-top:16px;padding-left:22px}
#suggestions .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}

/* The character list: what the model already knows, with how many drawings back it up. */
#suggestions .suggest-wrap{position:relative}
/* The character box sits inside this wrapper (its suggestion list hangs off it), so unlike
   the series box it was not a grid item and kept its intrinsic width: 290 of 440px on a
   phone. Both boxes now fill the field. */
#suggestions .suggest-wrap input{width:100%;box-sizing:border-box}
@media(max-width:620px){#suggestions .field label{font-size:12px}#suggestions .compose-panel .btn{min-height:44px}}
#suggestions .suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;max-height:264px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--fairy);border-radius:15px 5px 15px 5px;background:var(--surface);box-shadow:6px 6px 0 var(--block-shadow)}
#suggestions .suggest.up{top:auto;bottom:calc(100% + 6px);box-shadow:6px -6px 0 var(--block-shadow)}
#suggestions .suggest[hidden]{display:none}
#suggestions .suggest-option{display:flex;align-items:baseline;gap:10px;width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}
#suggestions .suggest-option:last-child{border-bottom:0}
#suggestions .suggest-option.on,#suggestions .suggest-option:hover{background:var(--mine-tint)}
#suggestions .suggest-name{font:500 16px/1.2 var(--serif);color:var(--paper)}
#suggestions .suggest-series{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/1.4 var(--mono);color:var(--muted)}
#suggestions .suggest-count{margin-left:auto;font:600 10px/1 var(--mono);color:var(--fairy)}

#suggestions .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--surface-2);flex:0 0 auto}
#suggestions .avatar.big{width:58px;height:58px}
#suggestions .avatar-fallback{display:grid;place-items:center;color:var(--ink);background:var(--fairy);font:700 16px/1 var(--sans)}

#suggestions .winner{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:12px 18px;border:1px solid var(--line);border-radius:16px 5px 16px 5px;background:var(--surface)}
#suggestions .winner time{font:11px/1 var(--mono);color:var(--muted)}
#suggestions .winner b{flex:1 1 auto;min-width:0;font:500 17px/1.2 var(--serif);color:var(--paper)}
#suggestions .winner .meta{font:11px/1 var(--mono);color:var(--dim)}
/* The series sits under the character it belongs to, in the archive and in your history too. */
#suggestions .winner .from,#suggestions .profile-list .from{display:block;margin-top:5px;font:10px/1.3 var(--mono);letter-spacing:.08em;color:var(--fairy)}
#suggestions .profile-list b{min-width:0}

#suggestions .board-title{margin:52px 0 0;font:500 30px/1 var(--serif);color:var(--paper)}
#suggestions .board-title + .hint{margin-top:12px}
#suggestions #winners-section{margin-top:8px}
#suggestions .empty{margin-top:22px;padding:30px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);text-align:center;font-size:14px}
/* A message lands right under the thing it answers, so it needs room to read as a reply
   rather than as the next line of the paragraph above it. */
#suggestions .msg{margin-top:20px;padding:13px 16px;border-radius:12px 4px 12px 4px;font-size:13px;line-height:1.55}
#suggestions .msg.error{border:1px solid #8d5c5c;color:var(--error);background:rgba(141,92,92,.1)}
#suggestions .msg.ok{border:1px solid var(--fairy);color:var(--ok);background:rgba(196,166,107,.09)}
#suggestions .msg[hidden]{display:none}

#suggestions .small-print{margin-top:26px;font:11px/1.7 var(--mono);color:var(--dim)}
/* Privacy and Terms were 14px-tall text boxes, hard to hit with a thumb (XIL-412). Padding with a
   matching negative margin grows the target to ~42px without moving a line of the text. */
#suggestions .small-print a{display:inline-block;padding:14px 4px;margin:-14px -4px;text-decoration:underline;text-underline-offset:3px}

/* Yours, for the first minute: fix it or take it back. Quiet — it is not an invitation, it
   is a way out, and it disappears the moment it stops being true. */
#suggestions .own{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#suggestions .own .btn.small{min-height:34px;padding:0 11px;font-size:11px}
#suggestions .own .left{font:11px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
/* Discreet is a look, not a hit target: on a phone these go back up to a thumb's worth. */
@media(max-width:720px){#suggestions .own .btn.small{min-height:44px;padding:0 16px}}
/* Saving is a small confirmation next to the button, not a slab under the form. */
#suggestions .flash{display:inline-flex;align-items:center;gap:6px;font:11px/1 var(--mono);letter-spacing:.06em;color:var(--ok);opacity:0;transition:opacity .25s ease}
#suggestions .flash.on{opacity:1}
#suggestions .flash.error{color:var(--error)}

/* Your profile. A dialog, so the browser handles Esc, the backdrop and the focus trap. */
#suggestions .profile{width:min(560px,calc(100% - 32px));max-height:min(86vh,760px);padding:26px 28px;border:1px solid var(--fairy);border-radius:26px 8px 26px 8px;background:var(--surface);color:inherit;overflow-y:auto;overflow-x:hidden}
#suggestions .profile::backdrop{background:rgba(8,7,6,.68);backdrop-filter:blur(4px)}
html[data-theme=light] #suggestions .profile::backdrop{background:rgba(228,223,214,.72)}
#suggestions .profile-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
#suggestions .profile-head h3{margin:0;font:500 26px/1.1 var(--serif);color:var(--paper)}
#suggestions .profile-close{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
@media(max-width:720px){#suggestions .profile-close{width:44px;height:44px}}
#suggestions .profile-close:hover{border-color:var(--fairy);color:var(--paper)}
#suggestions .profile-identity{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
#suggestions .profile-identity strong{display:block;font:500 21px/1.2 var(--serif);color:var(--paper)}
#suggestions .profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
/* A file input carries its own intrinsic width — on a phone that is wider than the dialog. */
#suggestions .profile .field{min-width:0}
#suggestions .profile input{width:100%;max-width:100%}
#suggestions .profile-title{margin:26px 0 10px;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fairy)}
#suggestions .profile-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
#suggestions .profile-list li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 14px;border:1px solid var(--line);border-radius:14px 4px 14px 4px;background:var(--ink)}
#suggestions .profile-list b{font:500 16px/1.2 var(--serif);color:var(--paper)}
#suggestions .profile-list span{flex:0 1 auto;min-width:0;font:10px/1.4 var(--mono);color:var(--dim);text-align:right}
#suggestions .profile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:560px){#suggestions .profile-fields{grid-template-columns:1fr}}

@media(max-width:720px){
  #suggestions .leader{grid-template-columns:1fr;gap:22px}
  #suggestions .figures{justify-content:flex-start}
  #suggestions .figure{text-align:left}
  #suggestions .form-grid{grid-template-columns:1fr}
  #suggestions .brow{grid-template-columns:auto minmax(0,1fr) auto;row-gap:14px;column-gap:12px;padding:16px 18px}
  #suggestions .brow>.btn,#suggestions .brow>.state,#suggestions .brow>.own{grid-column:1/-1;justify-self:end}
  #suggestions .name-top{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  #suggestions *{transition:none!important}
  #suggestions .btn::before{transition:none!important}
}


/* The way into the admin view, from your own profile. An anchor, not a button, so it opens
   like a link — and it only exists for accounts the database already calls admins. */
#suggestions .admin-link{margin-left:auto;text-decoration:none}

/* Which Google account you are signed in as. Read from the token already in your browser;
   stored nowhere and shown to nobody else. It exists because once a nickname takes over,
   which of your accounts this is stops being visible. */
#suggestions .whoami{display:block;margin-top:5px;overflow-wrap:anywhere;color:var(--muted)}

/* ---- the account in the header ------------------------------------------------
   The one part of the board that is not inside #suggestions. Who you are belongs in
   the corner of every screen, not seven thousand pixels down the page, so board.js
   draws it into .topbar and it is scoped to .topsession instead. The gallery owns no
   class by that name.
   The menu is absolutely positioned against the widget and the topbar is sticky in the
   fairy-n layout, so it rides along without a scroll listener. */
.topsession{position:relative;display:flex;align-items:center;flex:0 0 auto}
.topsession-in{min-height:34px;padding:0 12px;border:1px solid rgba(255,213,168,.3);border-radius:999px;background:transparent;color:var(--peach);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .25s ease,color .25s ease}
.topsession-in:hover,.topsession-in:focus-visible{border-color:var(--peach);color:var(--paper)}
/* A 34px circle is under the 44px a thumb needs, so the padding around it does the
   rest of the work rather than the picture growing. */
.topsession-trigger{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--muted);font:500 11px var(--mono);letter-spacing:.08em;cursor:pointer;text-transform:none}
.topsession-trigger:hover,.topsession-trigger[aria-expanded=true]{color:var(--paper)}
.topsession-trigger .topsession-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topsession .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--surface-2);flex:0 0 auto}
.topsession .avatar-fallback{display:grid;place-items:center;color:var(--ink);background:var(--fairy);font:700 14px/1 var(--sans)}
/* Below 490px the nav links are hidden and the bar is tight: the name goes, the face stays. */
@media(max-width:490px){.topsession-trigger .topsession-name{display:none}}

.topsession-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;display:grid;gap:2px;min-width:186px;padding:7px;border:1px solid var(--line);border-radius:16px 5px 16px 5px;background:var(--surface);box-shadow:0 18px 40px rgba(0,0,0,.36)}
.topsession-menu[hidden]{display:none}
.topsession-menu button,.topsession-menu a{display:flex;align-items:center;min-height:40px;padding:0 11px;border:0;border-radius:11px 3px 11px 3px;background:none;color:var(--paper);font:500 12px/1 var(--mono);letter-spacing:.04em;text-align:left;text-decoration:none;cursor:pointer}
.topsession-menu button:hover,.topsession-menu a:hover,.topsession-menu button:focus-visible,.topsession-menu a:focus-visible{background:var(--surface-2);color:var(--fairy)}
.topsession-menu .is-danger{color:var(--danger,#c98b8b)}
.topsession-menu .topsession-who{display:grid;gap:3px;padding:6px 11px 9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.topsession-menu .topsession-who strong{overflow:hidden;font:500 14px/1.2 var(--serif);color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
.topsession-menu .topsession-who span{overflow:hidden;font:10px/1.3 var(--mono);color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
/* A 34px pill matches the 18+ badge beside it, but that badge is not a button. */
@media(max-width:490px){.topsession-in{min-height:44px}}

/* Photo editor. A square frame with the round avatar cut out of a dark veil, so what is
   inside the circle is exactly what the board will show. touch-action:none hands every
   drag and pinch in the frame to the editor instead of scrolling the dialog. */
#suggestions .crop{grid-column:1/-1;display:grid;justify-items:center;gap:14px;margin-top:4px}
#suggestions .crop[hidden]{display:none}
#suggestions .crop-frame{position:relative;width:240px;height:240px;overflow:hidden;border:1px solid var(--line);border-radius:14px 5px 14px 5px;background:#000;cursor:grab;touch-action:none;user-select:none;outline:0}
#suggestions .crop-frame:active{cursor:grabbing}
#suggestions .crop-frame:focus-visible{border-color:var(--fairy);box-shadow:0 0 0 2px rgba(196,166,107,.22)}
#suggestions .crop-frame canvas{display:block;width:100%;height:100%}
#suggestions .crop-frame::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 200px rgba(8,6,10,.62);outline:1px solid rgba(245,238,231,.5);pointer-events:none}
#suggestions .crop-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:100%}
#suggestions .crop-zoom{display:flex;align-items:center;gap:10px;flex:1 1 180px;max-width:260px;font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#suggestions .crop-zoom input{flex:1;min-width:0;accent-color:var(--fairy)}
#suggestions .crop-turn{font-size:18px;line-height:1}

/* Motion (XIL-411). Things that used to appear in one frame now arrive: short, only
   transform and opacity, and nothing here runs under reduced motion. */
@keyframes board-rise{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes board-drop{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes board-fade{from{opacity:0}}
@keyframes board-fill{from{transform:scaleX(0)}}
#suggestions .profile[open]{animation:board-rise .32s cubic-bezier(.16,1,.3,1)}
#suggestions .profile[open]::backdrop{animation:board-fade .32s ease-out}
.topsession-menu:not([hidden]){transform-origin:top right;animation:board-drop .18s cubic-bezier(.16,1,.3,1)}
/* The bars fill from the left when the board is drawn, so a vote reads as a vote landing. */
#suggestions .bar i{transform-origin:left center;animation:board-fill .7s cubic-bezier(.16,1,.3,1) both}
#suggestions .crop:not([hidden]){animation:board-rise .26s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  #suggestions .profile[open],#suggestions .profile[open]::backdrop,.topsession-menu:not([hidden]),#suggestions .bar i,#suggestions .crop:not([hidden]){animation:none}
}

/* The photo field: the page's own button and line over the browser's file control, which
   would otherwise speak the phone's language. The control stays in the page, unseen. */
#suggestions .field input.photo-native{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
#suggestions .photo-row{display:flex;align-items:center;gap:12px;min-width:0}
#suggestions .photo-pick{flex:none;min-height:44px}
#suggestions .photo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px/1.3 var(--sans);color:var(--muted)}

/* The in-app browser notice (XIL-417): the profile dialog's frame, a short explanation, two
   steps and the ways out. */
#suggestions .inapp{max-width:440px}
#suggestions .inapp-lead{margin:0 0 14px;font:15px/1.55 var(--sans);color:var(--paper)}
#suggestions .inapp-steps{margin:0 0 18px;padding-left:20px;display:grid;gap:8px;font:14px/1.5 var(--sans);color:var(--muted)}
#suggestions .inapp-steps b{color:var(--paper);font-weight:600}
#suggestions .inapp-actions{display:flex;flex-wrap:wrap;gap:10px}
#suggestions .inapp-actions .btn{min-height:46px;flex:1 1 150px;justify-content:center}