/* Workspaces: the switcher, People and settings, folders, version history, Your plan */
.ws-switch { margin: -6px -4px 0; }
.ws-switch[hidden] { display: none; }
.ws-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; }
.ws-btn:hover { border-color: var(--ink); }
.ws-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ws-who b, .ws-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-who small { color: var(--mute); font-size: 12px; }
.ws-caret { width: 16px; height: 16px; flex: none; color: var(--mute); }
.ws-sq { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--c, #151515); color: #fff; font: 700 13px var(--sans); }
.ws-sq.big { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.ws-sq svg { width: 70%; height: 70%; stroke: #fff; }
.ws-pop { padding: 8px; }
.ws-pop-h { margin: 2px 8px 6px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.ws-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.pop .ws-item { display: flex !important; align-items: center; gap: 10px; }
.ws-item span:not(.ws-sq) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ws-item small { color: var(--mute); font-size: 12px; }
.ws-item i { font-style: normal; color: var(--red); font-weight: 700; }
.ws-item.on { background: var(--paper2); }
.pop button.on { font-weight: 600; }

.ws-viewonly { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: #fff3c4; border: 1px solid #e8d38a; font-weight: 500; }
body.view-only .create { opacity: .45; pointer-events: none; }

.ws-form { display: flex; flex-direction: column; gap: 14px; }
.ws-lead { margin: 0; color: var(--ink2); }
.ws-types { display: grid; gap: 8px; }
.ws-types label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--card); }
.ws-types label:has(input:checked) { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.ws-types input { margin-top: 4px; accent-color: var(--red); }
.ws-types span { display: flex; flex-direction: column; }
.ws-types small { color: var(--mute); }

.ws-grid .panel { min-width: 0; }
.ws-members { display: flex; flex-direction: column; gap: 4px; }
.ws-m { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ws-m:last-child { border-bottom: 0; }
.ws-m .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper2); font: 600 12px var(--sans); flex: none; }
.ws-m-who { flex: 1; min-width: 120px; display: flex; flex-direction: column; line-height: 1.3; }
.ws-m-who small { color: var(--mute); font-size: 12px; overflow-wrap: anywhere; }
.ws-m-role { font-size: 13px; color: var(--ink2); }
.ws-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ws-row .text { flex: 1; min-width: 140px; }
.ws-row select.text { flex: 0 0 auto; min-width: 110px; }
.text.sm { height: 34px; padding: 0 8px; font-size: 13px; }
.ws-copy { display: flex; gap: 8px; }
.ws-copy .text { flex: 1; min-width: 0; font: 500 13px var(--mono); }
.linkish { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; font-size: inherit; }
.ws-mini { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.ws-mini:hover { border-color: var(--ink); }
.ws-mini.danger, .btn.danger { color: #c4320f; }
.ws-f { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.ws-f svg { width: 18px; height: 18px; color: var(--ink2); }
.ws-f a { flex: 1; font-weight: 500; text-decoration: none; }
.ws-f a:hover { text-decoration: underline; }
.ws-colors { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.ws-col { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; }
.ws-col.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card) inset; }
.ws-danger { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ws-rename { display: flex; flex-direction: column; gap: 8px; }
.ws-rename .btn { align-self: flex-start; }

.ws-chips { margin: -6px 0 22px; }
.ws-chips button { display: inline-flex; align-items: center; gap: 6px; }
.ws-chips button svg { width: 15px; height: 15px; }
.ws-chips button.add { border-style: dashed; }

.ws-vers { display: flex; flex-direction: column; gap: 6px; min-width: min(460px, 80vw); }
.ws-ver { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ws-ver span { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.ws-ver small { color: var(--mute); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* Your plan */
.pl-now { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.3fr) auto; gap: 26px; align-items: start; margin-bottom: 34px; padding: 24px 26px; border-radius: 20px; border: 1.5px solid var(--ink); background: linear-gradient(120deg, #fff1e6, var(--card) 60%); box-shadow: 5px 5px 0 var(--ink); }
.pl-now .kicker { margin: 0; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink2); }
.pl-now h2 { margin: 2px 0 6px; font: 600 40px/1 var(--serif); letter-spacing: -0.03em; }
.pl-now p { margin: 0; color: var(--ink2); }
.pl-use { display: grid; gap: 10px; }
.pl-use div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
.pl-use span { color: var(--ink2); }
.pl-use i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--paper2); overflow: hidden; }
.pl-use u { display: block; height: 100%; background: var(--red); text-decoration: none; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pl-card { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pl-card.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.pl-card h3 { margin: 0; font: 600 22px var(--serif); }
.pl-card p { margin: 6px 0 0; color: var(--ink2); font-size: 14px; }
.pl-price { font: 700 22px var(--serif) !important; color: var(--ink) !important; }
.pl-price small { font: 500 13px var(--sans); color: var(--mute); }
.pl-tag { position: absolute; right: 12px; top: 12px; font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .05em; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 2px 8px; }
.pl-admin { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card); border: 1.5px dashed var(--ink); border-radius: 12px; }
.pl-admin h3 { margin: 0; }
.pl-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pl-lists h4 { margin: 0 0 6px; }
.pl-lists ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.side-foot #meterText a { color: var(--red); font-weight: 600; }
@media (max-width: 960px) { .pl-now { grid-template-columns: 1fr; } }
.ws-chips button.make-here { background: var(--red); color: #fff; border-color: transparent; font-weight: 600; }
.ws-mini.strong { font-weight: 600; border-color: var(--ink); }
.m-where { margin: -4px 0 14px; padding: 9px 12px; border-radius: 10px; background: var(--card, #fffdf8); border: 1px solid var(--line); font-size: 14px; }
.empty .btn { margin-top: 14px; }