.workspace-navigation {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 10px 12px;
}
.workspace-navigation button {
  text-align: center;
  padding: 10px 2px;
  font-size: 10px;
}
.workspace-navigation button[aria-pressed="true"] {
  background: var(--raised);
  border: 1px solid var(--bright);
  color: var(--fg);
}
.sidebar-section-label {
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
.sidebar-menu {
  color: var(--muted);
  font-size: 10px;
}
.sidebar-menu summary {
  cursor: pointer;
  padding: 10px 5px;
  list-style-position: inside;
}
.sidebar-menu summary span { float: right; }
.sidebar-menu summary:hover { color: var(--fg); }
.sidebar-menu button, #sidebar-account button {
  width: 100%;
  text-align: left;
  font-size: 10px;
  padding: 10px 9px;
  border-color: transparent;
  color: var(--muted);
}
.sidebar-menu button[aria-pressed="true"], #sidebar-account button[aria-pressed="true"] {
  color: var(--fg);
  background: var(--raised);
  box-shadow: inset 1px 0 var(--bright);
}
.sidebar-together {
  margin: 0 16px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  flex: none;
}
.sidebar-return {
  font-size: 10px;
  text-align: left;
  margin-bottom: 14px;
  border-color: transparent;
}
.app-sidebar .library {
  flex: none;
  border-bottom: 1px solid var(--line);
}
.app-sidebar .app-footer { padding-top: 7px; }
#sidebar-account button { padding-left: 0; }
body[data-page="account"] .sidebar-content,
body[data-page$="sessions"] .sidebar-content,
body[data-page="account"] #saved-places,
body[data-page$="sessions"] #saved-places { display: none; }
body.focus-mode:not([data-page="loom"]) .app-sidebar {
  width: var(--library-width);
  border-right: 1px solid var(--line);
}
body.focus-mode:not([data-page="loom"]) .app-sidebar > .app-header,
body.focus-mode:not([data-page="loom"]) .app-sidebar > .app-footer { display: flex; }
body.focus-mode:not([data-page="loom"]) .app-sidebar > .workspace-navigation { display: grid; }
body.focus-mode:not([data-page="loom"]):not(.laboratory-open) #sidebar-together { display: block; }
.social-page { height: 100%; overflow: auto; padding: 42px clamp(24px, 5vw, 76px); }
.social-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 40px; }
.social-header h1 { font: normal clamp(28px, 3.5vw, 44px)/1.15 Georgia, serif; margin: 14px 0 12px; letter-spacing: -.6px; }
.social-header p { color: var(--muted); max-width: 580px; line-height: 1.8; }
.social-error, #multiplayer-error { padding: 12px; color: var(--danger); border: 1px solid var(--line); }
body[data-page="account"] #welcome, body[data-page="account"] #editor, body[data-page$="sessions"] #welcome, body[data-page$="sessions"] #editor { display: none; }
body[data-page="account"] .session-strip, body[data-page$="sessions"] .session-strip, body[data-page="laboratory"] .session-strip { display: none; }
.sessions-toolbar { display: flex; gap: 12px; margin-bottom: 24px; }
.sessions-toolbar input { max-width: 420px; }
.session-list { display: grid; gap: 1px; }
.session-card { display: flex; align-items: center; gap: 24px; padding: 26px 8px; border-top: 1px solid var(--line); }
.session-knot { font-size: 25px; color: var(--faint); width: 32px; text-align: center; }
.session-description { flex: 1; min-width: 0; }
.session-description h2 { font: normal 20px Georgia, serif; margin: 0 0 10px; overflow-wrap: anywhere; }
.session-description p { font-size: 10px; margin: 0; }
.social-empty { border-top: 1px solid var(--line); padding: 44px 0; color: var(--muted); }
#archived-sessions { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
#archived-sessions summary { color: var(--muted); cursor: pointer; margin-bottom: 20px; }
.account-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1000px; }
.account-card { padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; align-items: start; min-width: 0; }
.account-card h2 { font: normal 25px Georgia, serif; margin: 0 0 6px; }
.account-card label, .account-card form, .account-card details { width: 100%; }
.account-card label, .multiplayer-dialog label { display: grid; gap: 9px; color: var(--muted); font-size: 11px; }
.account-card form { display: grid; gap: 18px; }
.account-card p { color: var(--muted); line-height: 1.8; margin: 0; }
.account-card summary { cursor: pointer; color: var(--muted); }
.account-card details[open] label { margin-top: 18px; }
.account-recover { grid-column: 1 / -1; }
.account-recover[open] { display: block; }
.account-recover form { margin-top: 24px; max-width: 500px; }
.social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.recovery-codes { margin-top: 24px; max-width: 1000px; }
.recovery-codes pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 2; margin: 0; }
.draft-recovery-bar { display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 11px; background: var(--raised); }
.draft-recovery-dialog { width: min(720px, calc(100vw - 36px)); }
.draft-recovery-dialog textarea { width: 100%; margin: 18px 0; background: var(--bg); border: 1px solid var(--line); padding: 15px; font: 17px/1.7 Georgia, serif; }
.device-row + .device-row { padding-top: 12px; }
.session-strip { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 20px; height: 53px; font-size: 10px; }
.session-strip #session-fork { margin-left: auto; }
.session-strip button { padding: 6px 9px; font-size: 10px; }
.session-live-dot { display: block; width: 5px; height: 5px; background: #9bba94; box-shadow: 3px 0 #9bba94, 0 3px #9bba94; margin-right: 4px; }
body.in-shared-session[data-page="loom"] #editor { height: calc(100% - 53px); }
.multiplayer-dialog { width: min(660px, calc(100vw - 40px)); max-height: calc(100vh - 60px); padding: 26px; }
#share-loom { width: 100%; margin-top: 12px; font-size: 10px; text-align: left; color: var(--muted); }
.sharing-dialog form { display: grid; gap: 18px; }
.sharing-dialog .dialog-heading h2 { margin-bottom: 0; }
.sharing-dialog p { margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
.sharing-dialog label { display: grid; gap: 9px; }
.sharing-review { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--raised); }
.sharing-review p:first-child { color: var(--muted); font-size: 11px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.dialog-heading h2 { font: normal 29px Georgia, serif; margin: 12px 0 25px; }
.dialog-heading > button { padding: 4px 9px; font-size: 19px; }
.member-row { display: flex; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.member-numeral { width: 30px; font: 14px Georgia, serif; text-align: center; }
.member-name { flex: 1; display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.member-name strong { font-weight: normal; }
.member-name span { font-size: 10px; }
.member-row select { width: 136px; font-size: 10px; padding: 7px; }
.member-role { font-size: 10px; }
#multiplayer-owner { border-top: 1px solid var(--line); padding-top: 22px; margin: 8px 0 24px; display: grid; gap: 20px; }
.invite-form { display: flex; align-items: end; gap: 10px; }
.invite-form label { flex: 1; }
#invite-result { display: flex; gap: 10px; align-items: end; }
#invite-result label { flex: 1; }
.invite-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 7px 0; font-size: 10px; }
.collaboration-cursors { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.peer-cursor { position: absolute; top: 0; left: 0; display: flex; align-items: start; pointer-events: none; transition: transform 70ms linear; will-change: transform; }
.peer-cursor svg { flex: none; image-rendering: pixelated; }
.peer-cursor span { font: 10px/1 Georgia, serif; padding: 2px 3px; margin: 12px 0 0 -3px; background: #080808; border: 1px solid currentColor; }
body.reduce-motion .peer-cursor { transition: none; }
.session-viewer #draft { pointer-events: none; }
.session-viewer #edit-button, .session-viewer #save-edit, .session-viewer #cancel-edit { opacity: .4; pointer-events: none; }
@media (max-width: 960px) {
  .account-columns { grid-template-columns: minmax(0, 1fr); }
  .social-page { min-height: 0; min-width: 0; padding: 28px; overscroll-behavior-y: contain; scroll-padding-block: 20px; }
  .social-page button, .social-page summary, .multiplayer-dialog button, .draft-recovery-dialog button,
  .workspace-navigation button, .sidebar-menu button, .sidebar-menu summary, #sidebar-account button, .sidebar-return, #share-loom {
    min-height: 44px;
    font-size: 12px;
    touch-action: manipulation;
  }
  .social-page button, .multiplayer-dialog button, .draft-recovery-dialog button { min-width: 44px; max-width: 100%; overflow-wrap: anywhere; }
  .social-page summary { padding-block: 12px; }
  .social-page input, .social-page select, .multiplayer-dialog input, .multiplayer-dialog select, .draft-recovery-dialog textarea {
    min-height: 44px;
    font-size: 16px;
    scroll-margin-block: 20px;
  }
  .social-page label, .multiplayer-dialog label { min-width: 0; font-size: 12px; }
  .social-page p, .account-card h2, .account-card h3, .account-card summary, .social-error, #multiplayer-error { overflow-wrap: anywhere; }
  .account-card input[type="checkbox"] { width: 24px; min-height: 24px; }
  .session-card { gap: 12px; }
  .session-knot { display: none; }
  .session-strip { flex: none; }
  .multiplayer-dialog, .draft-recovery-dialog {
    position: fixed;
    top: var(--social-viewport-top, 0px);
    bottom: auto;
    margin: 12px auto;
    max-height: calc(var(--social-viewport-height, 100dvh) - 24px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 16px;
  }
  .multiplayer-dialog .dialog-heading { padding: 0 0 18px; gap: 12px; }
  .multiplayer-dialog .dialog-heading > div, .multiplayer-dialog .dialog-heading h2 { min-width: 0; overflow-wrap: anywhere; }
  .multiplayer-dialog .dialog-heading > button { flex: none; width: 44px; height: 44px; padding: 0; }
  .member-row select { min-width: 0; font-size: 16px; min-height: 44px; }
  .member-role, .member-name span, .invite-row, .device-row { font-size: 12px; }
  .invite-row { gap: 12px; }
  .invite-row > span { min-width: 0; overflow-wrap: anywhere; }
  .invite-row > button { flex: none; }
}
@media (max-width: 600px) {
  .social-page { padding: 22px 16px; }
  .social-header { display: block; margin-bottom: 24px; }
  .social-header > button { margin-top: 12px; }
  .social-header h1 { font-size: 30px; }
  .account-columns { gap: 16px; }
  .account-card { padding: 18px 16px; }
  .account-card form, .account-card label { min-width: 0; }
  #account-devices { width: 100%; min-width: 0; }
  .sessions-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sessions-toolbar input { max-width: none; }
  .session-card { flex-wrap: wrap; padding: 20px 0; }
  .session-description { flex-basis: 100%; }
  .session-description p { font-size: 12px; line-height: 1.7; }
  .session-card > button { width: 100%; }
  .session-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 20px 44px; height: 86px; padding: 8px; gap: 6px 8px; font-size: 12px; }
  #session-connection { grid-column: 2 / -1; }
  #session-access { display: none; }
  .session-strip #session-fork { grid-column: 1 / 3; margin: 0; }
  .session-strip button { min-height: 44px; font-size: 12px; }
  .multiplayer-dialog, .draft-recovery-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); padding: 16px; }
  .multiplayer-dialog .dialog-heading h2 { font-size: 25px; }
  .member-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
  .member-name { min-width: 0; }
  .member-row select, .member-row > button, .member-role { grid-column: 2; width: 100%; }
  .member-numeral { padding-top: 4px; }
  .invite-form, #invite-result { display: grid; grid-template-columns: minmax(0, 1fr); }
  .invite-form button, #invite-result button { width: 100%; }
  .sharing-dialog .social-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .draft-recovery-bar { flex-wrap: wrap; gap: 8px; }
  .draft-recovery-bar button { min-height: 44px; }
  .draft-recovery-dialog textarea { max-height: 40dvh; padding: 10px; }
}