/* A flexible workbench for every kind of maker. */
/* Shared device support: keep text zoom, notches and short viewports usable. */
html, body { min-width:0; }
body { min-height:100vh; min-height:100dvh; padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
.topbar { padding-top:max(10px,env(safe-area-inset-top,0px)); }
.project-menu-toggle { display:none; }
.project-navigation { min-width:0; }
.origin-hero { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.origin-hero > * { min-width:0; }
.workspace-grid > *, .studio-card > header > div, .profile-extras, .post-copy, .forum-header > div, .chat-header > div { min-width:0; }
.story-hero h1, .story-lede, .story-narrative p, .ways-to-help p, .profile-name, .profile-extras strong, .metric-value, .metric-target, .studio-stats strong, .post-title { overflow-wrap:anywhere; }
.modal-backdrop { padding-top:max(12px,env(safe-area-inset-top,0px)); padding-bottom:max(12px,env(safe-area-inset-bottom,0px)); }
.modal-backdrop > [role="dialog"] { max-width:100%; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.settings-dialog .settings-layout { min-height:0; }
.creation-menu-items { top:calc(100% + 6px); }
@media (max-width:900px) {
  .origin-hero { grid-template-columns:1fr; }
  .origin-orbit { display:none; }
}
@media (max-width:720px) {
  .workspace-grid { width:calc(100% - 20px); margin-top:16px; border-radius:20px; }
  .server-sidebar { padding:16px; }
  .project-menu-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:44px; }
  .server-sidebar:not(.is-menu-open) .project-navigation { display:none; }
  .project-navigation { padding-top:10px; }
  .project-ownership { margin:8px 0 12px; }
  .project-rail-inline { margin-top:18px; }
  .forum-header, .chat-header { flex-wrap:wrap; gap:12px; padding:22px 18px; }
  .header-tools { flex-wrap:wrap; }
  .chat-panel { min-height:0; }
  .chat-message-list { min-height:180px; max-height:55vh; max-height:55dvh; padding:12px 16px; }
  .chat-composer { margin:0 12px 16px; gap:6px; }
  .chat-composer textarea { width:100%; }
  .modal-backdrop { padding-left:10px; padding-right:10px; place-items:center; }
  .modal-backdrop .settings-layout { display:block; max-height:none; }
  .modal-backdrop .settings-content { overflow:visible; }
  .settings-nav { flex-direction:row; flex-wrap:wrap; }
  .settings-nav > button { flex:1 1 85px; }
  .settings-owner-note { display:none; }
  .editor-field-pair, .space-kind-picker { grid-template-columns:1fr; }
  .project-directory-search { flex-wrap:wrap; }
  .project-directory-search input { flex-basis:100%; }
  .project-directory-search select { flex:1; max-width:100%; min-width:0; }
  .chat-editor-actions, .dialog-actions, .auth-actions { flex-wrap:wrap; }
  .comment-composer, .reply-composer { min-width:0; }
  .comment-composer input, .reply-composer input { width:100%; min-width:0; }
  .studio-tabs button { padding:10px 7px; }
  .creation-snapshot { padding:16px; margin-left:12px; margin-right:12px; }
  .metric-value { font-size:clamp(24px,7vw,38px); }
  .top-nav { max-width:100%; }
  .top-nav .nav-link { flex:1 1 0; padding:8px 4px; font-size:11px; }
}
/* A short landscape screen must be able to scroll the entire settings form. */
@media (max-height:600px) {
  .topbar { position:relative; }
  .modal-backdrop .settings-layout { max-height:none; min-height:0; }
  .modal-backdrop .settings-content { overflow:visible; }
}
@media (pointer:coarse), (max-width:720px) {
  button, .resource-link, .creation-menu summary { min-height:44px; }
  /* The adjacent full-height name button supplies the same profile action. */
  .avatar-button { min-height:0; align-self:start; flex-shrink:0; }
  .project-chat-edit, .project-chat-heading button, .close-button, .modal-close, .icon-button, .creation-menu summary { min-width:44px; }
  .project-chat-edit { flex-shrink:0; }
  .creation-menu-items button { min-height:44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select { font-size:16px !important; }
  .carousel-arrow { opacity:1; pointer-events:auto; min-width:44px; }
  .comment-thread .comment-actions { gap:14px; }
}
.studio-panel { scroll-margin-top:125px; }
.creation-menu summary:focus-visible { outline:2px solid #c3b2ff; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
.brand-mark img { width:29px; height:29px; display:block; }
.orbit-core img { width:112px; height:112px; display:block; filter:drop-shadow(0 0 26px #9f85fa70); }
.profile-cover-mark img { width:48px; height:48px; }
.studio-nav-link { margin:8px 0 20px; border:1px solid #494061; background:linear-gradient(110deg,#35295477,#17373044); }
.studio-nav-link small { color:#a8d9c9; font-size:8px; letter-spacing:.1em; }
.studio-panel { min-width:0; background:#101521; }
.studio-header { padding:42px; display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid #30364b; background:radial-gradient(ellipse at 95% 0,#2e655a55,transparent 70%),linear-gradient(120deg,#241e3a,#141c2b); }
.studio-header h1 { font-size:clamp(28px,3.4vw,44px); letter-spacing:-.045em; line-height:1.1; margin:12px 0; }
.studio-header p:not(.eyebrow) { max-width:440px; color:#acbad0; line-height:1.7; font-size:13px; }
.studio-emblem { font-size:72px; color:#a7dfcf; text-shadow:0 0 40px #61d5b755; }
.studio-body { padding:30px 38px 42px; }
.studio-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #30384c; border-radius:16px; overflow:hidden; background:#171d2b; }
.studio-stats>div { padding:19px 16px; border-right:1px solid #30384c; }.studio-stats>div:last-child { border:0; }
.studio-stats strong { display:block; font-size:27px; color:#f0eaff; letter-spacing:-.04em; }.studio-stats span { display:block; margin-top:6px; font-size:10px; color:#9baac4; }
.studio-stats-note { margin:11px 2px 28px; font-size:10px; line-height:1.6; color:#8b99b3; }
.studio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:25px 0; flex-wrap:wrap; }
.studio-tabs { display:flex; gap:4px; padding:4px; background:#0c111c; border:1px solid #2c3449; border-radius:12px; }
.studio-tabs button { border:0; background:transparent; color:#a7b2c9; border-radius:8px; padding:10px 13px; font-size:11px; cursor:pointer; font-weight:700; }
.studio-tabs button.is-selected { color:#eee9ff; background:#36304f; box-shadow:inset 0 0 0 1px #504575; }
.studio-items { display:grid; gap:18px; }.studio-metric,.studio-resource { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-card { position:relative; border:1px solid #333c50; background:linear-gradient(145deg,#1b2132,#141b29); border-radius:17px; padding:23px; min-width:0; }
.studio-card>header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:22px; }.studio-card h3 { margin:6px 0 0; color:#e7ebf7; font-size:18px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.studio-card>footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:16px; margin-top:22px; border-top:1px solid #30394d; font-size:9px; color:#8f9cb7; }
.studio-card .eyebrow { font-size:8px; color:#a2aec9; }
.creation-menu { position:relative; flex:none; z-index:2; }.creation-menu[open] { z-index:10; }
.creation-menu summary { display:grid; place-items:center; list-style:none; width:32px; height:30px; border-radius:9px; background:#242c3e; border:1px solid #3e4760; color:#bdc6dc; cursor:pointer; font-size:13px; letter-spacing:2px; }.creation-menu summary::-webkit-details-marker { display:none; }
.creation-menu-items { position:absolute; top:36px; right:0; width:235px; max-width:75vw; padding:6px; background:#1c2335; border:1px solid #4d5670; border-radius:12px; box-shadow:0 12px 35px #0008; }
.creation-menu-items button { display:block; width:100%; padding:11px; text-align:left; border:0; border-radius:7px; color:#e0e4f5; font-size:11px; background:transparent; cursor:pointer; }.creation-menu-items button:hover { background:#353c56; }.creation-menu-items button:disabled { opacity:.5; cursor:default; }.creation-menu-items .studio-delete { color:#ed9cae; border-top:1px solid #363f55; border-radius:0; }
.metric-value { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:38px; line-height:1.2; letter-spacing:-.05em; color:#e5dfff; font-weight:800; }.metric-value span { font-size:12px; font-weight:500; color:#9faeca; letter-spacing:0; }
.metric-target { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#a7b4cf; margin:19px 0 9px; }.metric-target strong { color:#a9dec9; }.metric-progress { height:6px; border-radius:8px; background:#30384d; overflow:hidden; }.metric-progress>span { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#9781ef,#84d2bc); }
.metric-sparkline { display:block; color:#b19aee; width:100%; height:65px; margin-top:22px; }.metric-history-note { display:block; font-size:9px; color:#8291ac; margin-top:7px; }
.creation-notes { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.75; color:#b0bbd2; margin:17px 0 0; }
.studio-milestone { padding-left:26px; border-left:1px solid #424260; margin-left:8px; gap:22px; }.studio-milestone .studio-card::before { content:''; position:absolute; left:-33px; top:29px; width:11px; height:11px; border-radius:50%; background:#aa94ec; box-shadow:0 0 0 5px #101521; border:2px solid #d5c6ff; }
.milestone-meta { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }.milestone-meta time { color:#9cabc5; font-size:11px; }.milestone-status { display:inline-block; padding:6px 10px; border:1px solid #46465e; background:#2d2942; color:#c2b9e2; font-size:10px; border-radius:20px; }.status-complete { color:#ade7ce; background:#1e3b34; border-color:#366454; }.status-in-progress { color:#a8dbee; background:#223843; border-color:#345667; }.status-paused { color:#edcb9d; background:#3a3027; border-color:#62503e; }
.timeline-summary { margin:0 0 24px; color:#aebbd2; font-size:11px; display:grid; gap:12px; }
.timeline-summary { grid-template-columns:1fr auto; align-items:center; }.timeline-summary>.metric-progress { grid-column:1/-1; }
.snapshot-timeline { list-style:none; padding:0 0 0 16px; margin:18px 0; border-left:1px solid #66617d; display:grid; gap:22px; max-height:420px; overflow-y:auto; }.snapshot-timeline li { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.snapshot-timeline strong { color:#d4dced; font-size:12px; }.snapshot-timeline time { font-size:10px; color:#94a4bf; }
.resource-link { display:inline-flex; padding:10px 14px; border-radius:9px; border:1px solid #3e605e; background:#233d3b66; color:#afe2d3; font-size:12px; text-decoration:none; }.resource-url { font-size:10px; color:#8698b5; overflow-wrap:anywhere; line-height:1.6; margin-top:10px; }
.studio-empty { grid-column:1/-1; border:1px dashed #424b64; border-radius:18px; padding:42px 25px; text-align:center; background:radial-gradient(ellipse at top,#39294c33,transparent); }.studio-empty>span { display:block; font-size:37px; color:#b9a8e8; }.studio-empty h2 { font-size:21px; margin:15px 0 10px; }.studio-empty p { max-width:410px; margin:0 auto 23px; color:#9caac5; line-height:1.8; font-size:12px; }.studio-empty small { color:#8f9cb4; }
.studio-hint { padding:22px; margin-top:30px; border-radius:13px; background:#20263a66; border:1px solid #323c51; }.studio-hint strong { color:#c8bcf1; font-size:12px; }.studio-hint p { font-size:11px; color:#97a7c1; line-height:1.8; margin:7px 0 0; }
.creation-snapshot { margin:0 18px 6px; padding:24px; border:1px solid #494463; border-radius:14px; background:radial-gradient(ellipse at top right,#57437344,transparent),#171d2c; }.creation-snapshot .metric-sparkline { max-width:500px; }.snapshot-note { display:block; margin-top:19px; color:#96a3bf; font-size:9px; }.publish-destination { padding:12px; border:1px solid #446a60; background:#1a3832; color:#b3e7d5; border-radius:9px; font-size:12px; margin:22px 0; }#studioForm .creation-snapshot { margin:18px 0; }
.profile-extras { padding:0 32px 18px; display:grid; gap:14px; color:#c7d0e4; font-size:13px; }.profile-extras a { color:var(--profile-accent,#b3a2f1); justify-self:start; font-size:12px; }.profile-skills { display:flex; flex-wrap:wrap; gap:7px; }.profile-skills span { padding:6px 10px; border:1px solid #44485e; border-radius:20px; font-size:10px; color:#c6d0e5; background:#ffffff06; }.profile-page .profile-cover { background:linear-gradient(115deg,color-mix(in srgb,var(--profile-accent) 50%,#181b32),#172d3a); }.profile-page .profile-avatar { border-color:var(--profile-accent); }
.auth-dialog:has(#profileForm) { max-height:90vh; overflow:auto; }
.studio-hint-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }.studio-hint-heading button { font-size:10px; }
@media(max-width:950px) { .studio-header { padding:28px; }.studio-body { padding:24px; }.studio-metric,.studio-resource { grid-template-columns:1fr; }.studio-emblem { display:none; } }
@media(max-width:520px) { .studio-header { padding:24px 18px; }.studio-body { padding:18px; }.studio-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.studio-stats>div:nth-child(2) { border-right:0; }.studio-stats>div:nth-child(-n+2) { border-bottom:1px solid #30384c; }.studio-toolbar { align-items:stretch; }.studio-tabs { width:100%; justify-content:space-between; }.studio-tabs button { flex:1; }.studio-toolbar>.primary-button { width:100%; }.studio-card { padding:18px; }.studio-milestone { padding-left:17px; margin-left:5px; }.studio-milestone .studio-card::before { left:-24px; }.profile-extras { padding:0 20px 18px; } }