/* UX bundle 1, second pass (2026-10-03): the phone room follows the mock. The hero sits on the page, not in a card;
   the claim card is a label and a button; the presence row lives in the header's count on a phone. */
.hero-copy h1{margin:0}
.hero-copy{gap:var(--space-2)}
.claim-card{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4)}
.claim-card h2.eyebrow{margin:0;font:700 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.mobile-state-strip{top:0}
@media (max-width:760px),(max-height:559.98px) {
  .listen-card{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
}
/* One status mark per sync card: the card's icon already carries the state, so the title has no second dot. */
.sync-panel .sync:before{content:none}
/* Avatar initials on the paper-tone (initial) circle use the primary ink on the sunken surface, so the "P" reads in
   both themes (CJ, 2026-10-05). The .avatar class sets color: var(--dark); these rules override it with var(--text). */
#signed-in-avatar,.signed-in-stack{display:grid;place-items:center;font:800 var(--text-sm) var(--font-display);color:var(--text)}
/* "Host controls" is a mono label, not a headline. */
.host-controls-head h2.eyebrow{margin:0;font:700 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
/* Desktop: the sticky right column — sync card, presence, chat fills the rest, Tracklist below. */
@media (min-width: 761px) {
  .room-aside{flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;max-height:100vh;overflow:hidden}
  .aside-status{display:block;flex:0 0 auto}
  .aside-status .sync-panel{margin:0;border:0;border-bottom:var(--stroke) solid var(--border-soft);border-radius:0;background:transparent}
  .aside-status .sync-panel[data-state="synced"]{background:transparent}
  .aside-presence{display:flex;flex:0 0 auto}
  .aside-presence .people{padding:0;border:0;flex:1;min-width:0;overflow:hidden}
  .aside-presence .people .avatar{width:28px;height:28px}
  .room-aside .chat{order:1;flex:1 1 auto;min-height:0;margin:var(--space-3) var(--space-3) 0}
  .room-aside .aside-tracklist{order:2;flex:0 0 auto;max-height:min(26vh,220px);overflow:auto;padding:0 24px;border-top:var(--stroke) solid var(--border-soft)}
  .room-aside .tracklist{display:grid;padding-bottom:var(--space-3)}
  /* Chat and the tracklist share the rail (CJ, 2026-10-05, "I prefer 2"): both are shown, so the Chat · Tracklist
     toggle has nothing to switch and is hidden. The toggle lives only on the phone, where one panel fits. */
  .rail-head{display:none}
}
/* CJ, 2026-10-09: the chat card takes most of the rail; the tracklist is a shorter cap. Overrides 04's
   min(44vh,320px) rail rule (same query, #live raises specificity; 05 loads after 04). */
@media (min-width:720px) and (min-height:560px){
  #live .room-aside{height:calc(100dvh - 140px)}
  #live .room-aside .chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  #live .room-aside .chat-list{flex:1 1 auto;min-height:0;overflow-y:auto}
  #live .room-aside .aside-tracklist{max-height:min(26vh,220px)}
}
/* Host tools: HostTransport, the Up next add row, TrackRow queue rows and the Room tab sections. */
.round-transports .host-action{background:var(--surface);border:var(--border-drawn);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard);color:var(--text)}
.round-transports .host-action:nth-child(2){background:var(--accent-2);color:var(--on-accent-2)}
.round-transports .host-action:disabled{background:var(--bg-sunken);border-color:var(--border-soft);box-shadow:none;color:var(--text-muted);cursor:not-allowed}
.round-transports .host-action:nth-child(2) .transport-icon svg{width:26px;height:26px}
.host-endings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.host-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  width:100%;
  min-height:44px;
  padding:0 var(--space-4);
  border:var(--border-drawn);
  border-radius:var(--radius-pill);
  font:700 var(--text-sm) var(--font-sans);
  box-shadow:2px 2px 0 0 var(--shadow-ink);
  cursor:pointer
}
.host-pill-secondary{background:var(--surface);color:var(--text)}
.host-pill-danger{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.host-pill:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.button-icon{display:inline-flex;width:16px;height:16px}
.button-icon svg{width:100%;height:100%;fill:none}
.transport-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.transport-rail{position:relative;display:block;height:26px;min-width:0}
.transport-rail:before{content:"";position:absolute;top:9px;right:0;left:0;height:8px;background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-pill)}
.transport-fill{position:absolute;top:11px;left:2px;width:0;height:4px;background:var(--text);border-radius:var(--radius-pill)}
.transport-thumb{position:absolute;top:0;left:-13px;width:26px;height:26px;background:var(--accent-2);border:var(--border-drawn);border-radius:var(--radius-pill);box-shadow:2px 2px 0 0 var(--shadow-ink);pointer-events:none}
.transport-rail input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.transport-slider #transport-elapsed,.transport-slider #transport-duration{font:700 var(--text-xs) var(--font-mono);color:var(--text-muted)}
.queue-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min,44px);padding:var(--space-3);border-top:var(--stroke) solid var(--border-soft)}
.queue-index{width:27px;flex:0 0 auto;text-align:center;font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
.queue-art{width:44px;height:44px;flex:0 0 auto;overflow:hidden;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}
.queue-art img{display:block;width:100%;height:100%;object-fit:cover}
.queue-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.queue-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--text-sm) var(--font-sans)}
.queue-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-faint);font-size:var(--text-sm)}
.queue-duration{font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
.queue-remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;padding:0;border:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer}
.queue-remove:disabled{opacity:.4;cursor:not-allowed}
.queue-remove .transport-icon svg{width:16px;height:16px;fill:none}
.host-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2);align-items:center;margin:var(--space-3) 0}
.host-add-input{width:100%;min-width:0;min-height:44px;padding:0 var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:var(--text-md) var(--font-sans)}
.host-add-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.host-add-presentation{display:inline-flex;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);overflow:hidden}
.host-add-choice{min-height:44px;padding:0 var(--space-3);border:0;background:var(--surface);color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.host-add-choice[aria-pressed="true"]{background:var(--accent-2);color:var(--on-accent-2)}
.host-add-submit{min-height:44px;padding:0 var(--space-4);border:var(--border-drawn);border-radius:var(--radius-pill);background:var(--accent-2);color:var(--on-accent-2);font:700 var(--text-sm) var(--font-sans);box-shadow:2px 2px 0 0 var(--shadow-ink);cursor:pointer}
.host-add-submit:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.host-section-label{display:block;margin:var(--space-4) 0 0;font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.host-section{margin-top:var(--space-4)}
.search-results{display:grid;gap:var(--space-2);max-height:320px;margin:var(--space-3) 0;overflow-y:auto}
.search-result{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  width:100%;
  min-height:var(--tap-min,44px);
  padding:var(--space-2);
  border:var(--stroke) solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text);
  text-align:left;
  cursor:pointer
}
.search-result:hover,.search-result:focus-visible{border-color:var(--accent)}
.search-result-art{width:44px;height:44px;overflow:hidden;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}
.search-result-art img{display:block;width:100%;height:100%;object-fit:cover}
.search-result-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.search-result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--text-sm) var(--font-sans)}
.search-result-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-faint);font-size:var(--text-sm)}
.search-result-length{font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
@media(max-width:520px){.host-add{grid-template-columns:minmax(0,1fr) auto}.host-add-presentation{grid-column:1/-1;justify-self:start}}


/* UX bundle 2, Claude's pass: the host card wears the design's ink border; the slider's thumb never covers its time;
   on a phone the link field takes the row and the Music/Video toggle and Add share the next one. */
.host-controls{border:var(--stroke) solid var(--border)}
.transport-slider{gap:var(--space-3)}
.transport-slider input{margin:0 6px}
@media (max-width: 560px) {
  .host-add{grid-template-columns:auto 1fr}
  .host-add-input{grid-column:1 / -1}
  .host-add-submit{justify-self:end;min-width:96px}
}
/* Pills never wrap their label; on a phone the add row flows: link field, then toggle and Add side by side. */
.host-endings button,.host-endings .button{white-space:nowrap}
@media (max-width: 560px) {
  .host-endings button,.host-endings .button{padding-inline:var(--space-3);gap:6px;font-size:var(--text-sm)}
  .host-add{display:flex;flex-wrap:wrap}
  .host-add-input{flex:1 1 100%}
  .host-add-submit{margin-left:auto}
}
/* The range thumb is wider than the track's end: inset the track so the thumb never covers the elapsed time. */
/* The custom slider's thumb is centred on the value, so the rail is inset by half a thumb: at 0:00 it sits inside. */
.transport-rail{margin-inline:13px}
/* Bundle 3, Claude's pass: say each fact once. The hero's sync card (which carries Tap to listen) is the only one;
   the header already counts who is here, so the side column shows faces, not a second count. */
[data-aside-sync-status]{display:none!important}
.aside-presence [data-room-presence]{display:none}
@media (max-width:760px),(max-height:559.98px) {
  .room-aside .chat{margin:var(--space-3) var(--space-4);border-radius:var(--radius-lg)}
}
@media (min-width: 761px) {
  /* One frame: the chat panel is the card, so the column itself carries no second border. */
  .room-aside{border:0;box-shadow:none;background:transparent}
}

/* Apple Music album art fills the artwork slot as a square; the placeholder label goes away (CJ's phone test, 2026-10-04). */
.artwork-slot[data-artwork="image"]{width:240px;height:240px;aspect-ratio:1;align-self:center}.artwork-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* Phone: the sticky channel header has no bottom margin, so the room content needs its own top gap, the same 16px as
   the side gutter (CJ, 2026-10-04: art touched the header). */
@media (max-width:719px),(max-height:559.98px){#live .main{padding-top:var(--space-4)}}

/* Mute: an icon button in the listening status; muting never pauses, so the listener stays in sync. */
.sync-panel .mute-toggle{flex:0 0 auto;margin-left:auto;display:inline-grid;place-items:center}.mute-toggle .mute-cross{display:none}.mute-toggle[aria-pressed="true"] .mute-cross{display:inline}.mute-toggle[aria-pressed="true"] .mute-waves{display:none}

/* Room info polish from the screenshot review: both groups share one width, and Sign in stands apart from the rows
   with its offset shadow inside the gutter. */
.setup .listener-provider,.setup .account-links{max-width:480px}.setup .account-links-signin{width:calc(100% - 3px);margin-top:var(--space-4)}

/* Sign-in: the main button goes to Bluesky's own login; another server's handle sits behind "Other server". */
.signin-other{
  margin-top:var(--space-4)
}
.signin-other summary{
  cursor:pointer;
  color:var(--text-muted);
  font:700 var(--text-xs) var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  min-height:44px;
  display:flex;
  align-items:center
}
.signin-other[open] summary{
  margin-bottom:var(--space-2)
}
.signin-other .secondary{
  margin-top:var(--space-3);
  width:100%;
  min-height:44px
}

/* Chat: the handle beside a display name, so two people with the same name can be told apart. */
.chat-handle{color:var(--text-muted);font:var(--text-xs) var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Phones: no zoom. iPhone zooms into any text field under 16px and stays zoomed, and double-tap zooms (CJ, 2026-10-04:
   the page kept resizing). Fields are 16px on touch screens; double-tap zoom is off; pinch is blocked in
   app/room-view.mjs (Safari ignores user-scalable=no). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}

/* Chat: the sender's Bluesky picture fills the bubble, over the initial. */
.chat-avatar{position:relative;overflow:hidden}.chat-avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Phone rules for the chat and tracklist tabs now live in app/styles/09-communal-phone.css (Change A). The desktop
   bundle keeps only rules common to every breakpoint. */

/* Ambient preview (/ambient.html): the same frame as the room, a stack of seed cards. Plays only on a tap. */
.ambient-shell{max-width:760px}
.ambient-head{padding:var(--space-4) 0 var(--space-5);border-bottom:var(--stroke-bold) solid var(--border);margin-bottom:var(--space-6)}
.ambient-head h1{margin:0;font:800 clamp(var(--text-2xl),6vw,var(--text-4xl))/.96 var(--font-display);letter-spacing:-.035em}
.ambient-controls,.ambient-seed-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ambient-controls{margin-bottom:var(--space-5)}
.ambient-volume{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6)}
.ambient-volume input[type="range"]{width:100%;min-height:44px;accent-color:var(--accent-2)}
.ambient-volume-value{font:700 var(--text-sm) var(--font-mono);color:var(--text-muted);min-width:52px;text-align:right}
.ambient-seeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-4)}
.ambient-seed{padding:var(--space-4);border:var(--border-drawn);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-hard)}
.ambient-seed[data-active]{box-shadow:var(--shadow-hard-lg);border-color:var(--accent-2)}
.ambient-seed h2{margin:0;font:800 var(--text-xl)/1 var(--font-display);letter-spacing:-.035em}
.ambient-meta{margin:var(--space-2) 0 0;color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.ambient-state{margin:var(--space-3) 0 var(--space-4);font:700 var(--text-sm) var(--font-mono);color:var(--text-muted)}
.ambient-seed[data-active] .ambient-state{color:var(--text)}
@media (max-width:719px),(max-height:559.98px){
  .ambient-shell{padding:0 var(--space-4) var(--space-6)}
  .ambient-seeds{grid-template-columns:1fr}
  .ambient-controls .tool,.ambient-seed-actions .tool{flex:1 1 auto}
}

/* Owner-only song alignment tool (/align.html). Phone first: a 16px side gutter, the room's header and back control,
   the room's buttons and links, theme tokens so dark mode is the room's dark. The video keeps its controls. */
.align-shell{max-width:760px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}
.align-head{gap:var(--space-3);padding:0 0 var(--space-4);border-bottom:var(--stroke-bold) solid var(--border);margin-bottom:var(--space-5)}
.align-head-copy{min-width:0;flex:1}
.align-title{margin:0;font:800 var(--text-xl)/1.12 var(--font-display);letter-spacing:-.035em}
.align-head .back{flex:0 0 auto;text-decoration:none}
.align-meta{margin:var(--space-2) 0 0;color:var(--text-faint);font:var(--text-xs) var(--font-mono);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-status{margin:0 0 var(--space-4);color:var(--text-muted);font:700 var(--text-sm) var(--font-sans)}
.align-status[hidden]{margin:0}
.align-status[data-state="error"]{color:var(--accent)}
.align-status[data-state="saved"]{color:var(--text)}
.align-list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}
.align-h2{margin:0;font:800 var(--text-lg)/1.1 var(--font-display);letter-spacing:-.03em}
.align-list{list-style:none;margin:0;padding:0;border-top:var(--stroke) solid var(--border)}
.align-list li{border-bottom:var(--stroke) solid var(--border)}
.align-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);width:100%;min-height:var(--tap-min,44px);padding:var(--space-3) 0;border:0;background:transparent;text-align:left;color:var(--text);cursor:pointer}
.align-row:hover,.align-row:focus-visible{background:var(--bg-sunken)}
.align-row-main{display:grid;gap:2px;min-width:0}
.align-row-name{font:700 var(--text-sm) var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-row-artist{color:var(--text-muted);font:var(--text-xs) var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-row-lengths{margin-top:2px;color:var(--text-faint);font:var(--text-xs) var(--font-mono);letter-spacing:.02em}
.align-row-side{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.align-row-offset{color:var(--text-muted);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em}
.align-row-done{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--accent-2);color:var(--on-accent-2)}
.align-row-done svg{width:13px;height:13px}
.align-empty{margin:var(--space-4) 0;color:var(--text-muted);font:var(--text-xs) var(--font-mono);letter-spacing:.04em}
.align-detail{margin-top:0}
.align-detail-head{align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.align-detail-head .back{flex:0 0 auto;text-decoration:none}
.align-detail .align-h2{margin:var(--space-3) 0 var(--space-1)}
.align-detail .align-meta{overflow:visible;white-space:normal}
.align-video{margin-top:var(--space-3)}
.align-youtube{position:relative;width:100%;aspect-ratio:16/9;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-sunken)}
.align-youtube iframe{position:absolute;inset:0;width:100%;height:100%}
.align-controls{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.align-offset{display:flex;align-items:baseline;gap:var(--space-2)}
.align-offset-value{font:800 var(--text-2xl)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.align-offset-label{color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.align-buttons{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:var(--space-2)}
.align-buttons .button{min-height:48px;padding:0 var(--space-2);font-size:var(--text-sm);white-space:nowrap}
.align-save{width:100%;min-height:48px}
.align-preview-note{margin:0;color:var(--text-muted);font:var(--text-xs) var(--font-sans);line-height:1.5}
.align-apple-link{display:inline-block;color:var(--accent);font:700 var(--text-sm) var(--font-sans);text-decoration:underline;text-underline-offset:3px}
.align-apple-link:hover,.align-apple-link:focus{color:var(--accent-hover)}

/* Legal pages (/privacy, /terms). Plain prose on the paper surface; text never below --text-xs. */
.legal{max-width:62ch;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}
.legal .back{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);font:700 var(--text-sm) var(--font-sans);text-decoration:none}
.legal h1{margin:var(--space-3) 0 var(--space-5);font:800 clamp(var(--text-2xl),6vw,var(--text-3xl))/.96 var(--font-display);letter-spacing:-.035em}
.legal h2{margin:var(--space-6) 0 var(--space-3);font:800 var(--text-lg) var(--font-display);letter-spacing:-.02em}
.legal p{margin:0 0 var(--space-4);font:400 var(--text-sm)/1.5 var(--font-sans);color:var(--text)}
.legal .legal-meta,.legal .legal-meta a{color:var(--text-muted)}
.legal a{color:inherit;text-underline-offset:2px}
.legal-links{display:flex;gap:var(--space-3);margin-top:var(--space-5);color:var(--text-muted);font:700 var(--text-xs) var(--font-sans)}
.legal-links a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}

/* YouTube is named as the source beside any YouTube thumbnail (compliance finding 12). A small mono label, never the
   thumbnail itself, links to the video; the row opens playback, not the badge. */
.track-source{align-self:flex-start;width:max-content;color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.track-source:hover,.track-source:focus{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* The Apple Music badge over drawn album art (compliance finding 23): a text link on a solid surface, in the design. */
.artwork-source{
  position:absolute;
  left:var(--space-2);
  bottom:var(--space-2);
  z-index:2;
  padding:3px 8px;
  border:var(--stroke) solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text);
  font:700 var(--text-xs) var(--font-mono);
  letter-spacing:.06em;
  text-decoration:none
}
.artwork-source:hover,.artwork-source:focus{color:var(--accent);text-decoration:underline;text-underline-offset:2px}