/* =========================================================
   MyWorkshopr v3 — Personal + Team + Playbook
   Ported from content/plan/mockups/12,13,14
   ========================================================= */

.mw-page { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px); background: var(--surface-2); }
.mw-sidebar { padding: 20px 16px; border-right: 1px solid var(--border); background: #fff; }
.mw-content { padding: 32px 40px; max-width: 1100px; }

/* Sidebar user card */
.sidebar-user { display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sidebar-user__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--mainsite-primary); color: #fff; font-size: 16px; font-weight: 700; border: 2px solid #fff; flex-shrink: 0; overflow: hidden; }
.sidebar-user__avatar--img { object-fit: cover; }
.sidebar-user__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sidebar-user__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.sidebar-user__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); background: var(--mainsite-light, #FEE2E2); color: var(--mainsite-dark); font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Sidebar DNA callout */
.sidebar-dna { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #F0FDF4; border: 1px dashed #22C55E; border-radius: var(--radius-lg); margin-bottom: 18px; text-decoration: none; color: inherit; }
.sidebar-dna:hover { text-decoration: none; }
.sidebar-dna__icon { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #16A34A; flex-shrink: 0; }
.sidebar-dna__icon .mi { font-variation-settings: 'FILL' 1; font-size: 22px; }
.sidebar-dna__icon .icon {width: 22px; height: 22px;}
.sidebar-dna__text { flex: 1; font-size: 13px; min-width: 0; }
.sidebar-dna__label { font-size: 11px; font-weight: 700; color: #16A34A; text-transform: uppercase; letter-spacing: .05em; }
.sidebar-dna__name { font-weight: 600; color: var(--ink); }

/* Sidebar sections + links */
.sidebar-section { margin-bottom: 14px; }
.sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); padding: 6px 12px 8px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; color: var(--ink); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: background-color .15s, color .15s; }
.sidebar-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.sidebar-link.active { background: var(--mainsite-light); color: var(--mainsite-dark); font-weight: 600; }
.sidebar-link .mi { font-size: 18px; flex-shrink: 0; }
.sidebar-link .icon {width: 18px; height: 18px; flex-shrink: 0;}
.sidebar-link .count { margin-left: auto; font-size: 12px; color: var(--ink-fainter); font-weight: 500; }
.sidebar-link.active .count { color: var(--mainsite-dark); }
.sidebar-link--upgrade { background: var(--mainsite-very-light); color: var(--mainsite-dark); font-weight: 600; }
.sidebar-link--upgrade:hover { background: var(--mainsite-light); }
.sidebar-link--upgrade .count { color: var(--mainsite-primary); font-size: 14px; }

/* Upgrade / info banner shown above the overview when ?upgrade=team or ?no-team=1 */
.mw-upgrade-banner { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; margin-bottom: 24px; background: linear-gradient(135deg, var(--mainsite-very-light), #fff); border: 1px solid var(--mainsite-light); border-radius: var(--radius-xl); }
.mw-upgrade-banner--info { background: var(--surface-2); border-color: var(--border); }
.mw-upgrade-banner__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--mainsite-primary); }
.mw-upgrade-banner__icon .icon { width: 24px; height: 24px; }
.mw-upgrade-banner__body strong { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
.mw-upgrade-banner__body p { margin: 0; font-size: 13px; color: var(--ink-muted); }

/* Panel header */
.mw-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.mw-panel-header h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1.15; margin: 0 0 4px; }
.mw-panel-header p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.content-panel[hidden] { display: none; }

/* Grid helpers */
.mw-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Welcome hero */
.mw-welcome { background: linear-gradient(135deg, var(--mainsite-very-light), #fff); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 24px 28px; margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mw-welcome h2 { margin: 0 0 4px; font-size: 1.5rem; font-family: var(--font-heading); font-weight: 600; }
.mw-welcome p { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* Overview My Account cards */
.mw-card { cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 18px; transition: border-color .15s, transform .15s; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); text-decoration: none; color: inherit; }
.mw-card:hover { border-color: var(--mainsite-primary); box-shadow: 0 4px 14px rgba(229, 77, 77, 0.15); transform: translateY(-1px); text-decoration: none; }
.mw-card__left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 56px; }
.mw-card__icon { width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--mainsite-light); color: var(--mainsite-primary); display: grid; place-items: center; }
.mw-card__icon .mi { font-size: 20px; }
.mw-card__icon .icon {width: 20px; height: 20px;}
.mw-card__count { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.mw-card__body { min-width: 0; }
.mw-card__body h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--ink); font-family: inherit; }
.mw-card__body p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.45; }

/* Quick action tiles */
.qa-tile { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.qa-tile:hover { transform: translateY(-1px); text-decoration: none; }
.qa-tile .qa-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0; background: var(--mainsite-very-light); color: var(--mainsite-primary); }
.qa-tile h4 { margin: 0; font-size: 14px; font-weight: 600; }
.qa-tile p { margin: 2px 0 0; font-size: 12px; color: var(--ink-muted); }
.qa-tile--blue { border-color: var(--phase-plan); }
.qa-tile--blue .qa-icon { background: #E0F2FE; color: var(--phase-plan); }
.qa-tile--blue:hover { background: #F0F9FF; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18); }
.qa-tile--purple { border-color: var(--phase-facilitate); }
.qa-tile--purple .qa-icon { background: #EDE9FE; color: var(--phase-facilitate); }
.qa-tile--purple:hover { background: #F3EEFF; box-shadow: 0 4px 14px rgba(124, 77, 255, 0.18); }
.qa-tile--red { border-color: var(--mainsite-primary); }
.qa-tile--red .qa-icon { background: var(--mainsite-light); color: var(--mainsite-primary); }
.qa-tile--red:hover { background: var(--mainsite-very-light); box-shadow: 0 4px 14px rgba(229, 77, 77, 0.18); }
.qa-tile--green { border-color: var(--phase-reflect); }
.qa-tile--green .qa-icon { background: #D1FAE5; color: var(--phase-reflect); }
.qa-tile--green:hover { background: #ECFDF5; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18); }

/* Recent Activity */
.mw-activity { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 12px 20px; }
.mw-activity__item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.mw-activity__item:last-child { border-bottom: none; }
.mw-activity__item[hidden] { display: none; }
.mw-activity__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--mainsite-light); color: var(--mainsite-primary); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.mw-activity__text { color: var(--ink); }
.mw-activity__text strong { color: var(--ink); font-weight: 600; }
.mw-activity__time { font-size: 12px; color: var(--ink-fainter); white-space: nowrap; }

/* Filter chips (general) */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-chips .badge { cursor: pointer; font-family: inherit; transition: background-color .15s, color .15s, border-color .15s; }
.filter-chips .badge:not(.badge-red):hover { background: var(--surface-2); color: var(--ink); }

/* ===== Saved Agendas list-row ===== */
.content-panel[data-panel="agendas"] .list-row,
.content-panel[data-panel="published"] .list-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: 1fr auto;
    column-gap: 14px; row-gap: 12px;
    padding: 20px;
    min-height: 132px;
    align-items: stretch;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.content-panel[data-panel="agendas"] .list-icon,
.content-panel[data-panel="published"] .list-icon { width: 40px; height: 40px; background: var(--mainsite-light); color: var(--mainsite-dark); align-self: start; border-radius: var(--radius-md); display: grid; place-items: center; }
.content-panel[data-panel="agendas"] .list-icon .mi,
.content-panel[data-panel="published"] .list-icon .mi { font-size: 20px; }
.list-icon .icon {width: 20px; height: 20px;}
.content-panel[data-panel="agendas"] .list-main,
.content-panel[data-panel="published"] .list-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.content-panel[data-panel="agendas"] .list-title,
.content-panel[data-panel="published"] .list-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin: 0 0 4px; }
.content-panel[data-panel="agendas"] .list-sub,
.content-panel[data-panel="published"] .list-sub { grid-column: 1 / 3; align-self: center; font-style: italic; font-size: 12px; color: var(--ink-faint); text-align: left; margin: 0; }
.content-panel[data-panel="agendas"] .row-actions,
.content-panel[data-panel="published"] .row-actions { grid-column: 3; align-self: center; justify-self: end; display: flex; gap: 4px; }
.content-panel[data-panel="agendas"] .row-open,
.content-panel[data-panel="published"] .row-open { justify-self: end; color: var(--mainsite-primary); }
.content-panel[data-panel="agendas"] .icon-btn,
.content-panel[data-panel="published"] .icon-btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--ink-fainter); cursor: pointer; display: grid; place-items: center; transition: background-color .15s, color .15s; }
.content-panel[data-panel="agendas"] .icon-btn .mi,
.content-panel[data-panel="published"] .icon-btn .mi { font-size: 16px; }
.icon-btn .icon {width: 16px; height: 16px;}
.content-panel[data-panel="agendas"] .icon-btn:hover,
.content-panel[data-panel="published"] .icon-btn:hover { background: var(--mainsite-very-light); color: var(--mainsite-primary); }
.content-panel[data-panel="agendas"] .icon-btn.row-open:hover,
.content-panel[data-panel="published"] .icon-btn.row-open:hover { background: var(--mainsite-very-light); color: var(--mainsite-dark); }

/* ===== Favorites ===== */
.content-panel[data-panel$="favorites"] .list-row { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 16px; padding: 20px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.content-panel[data-panel$="favorites"] .fav-btn { width: 40px; height: 40px; border: none; border-radius: var(--radius-lg); background: var(--mainsite-very-light); color: #F87171; cursor: pointer; display: grid; place-items: center; transition: background-color .15s, color .15s, transform .15s; }
.content-panel[data-panel$="favorites"] .fav-btn .mi { font-size: 22px; font-variation-settings: 'FILL' 1; transition: font-variation-settings .15s; }
.fav-btn .icon {width: 22px; height: 22px; transition:}
.content-panel[data-panel$="favorites"] .fav-btn:hover { transform: scale(1.05); }
.content-panel[data-panel$="favorites"] .fav-btn:hover .mi { font-variation-settings: 'FILL' 0; }
.content-panel[data-panel$="favorites"] .list-main { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.content-panel[data-panel$="favorites"] .list-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin: 0; }
.content-panel[data-panel$="favorites"] .fav-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.content-panel[data-panel$="favorites"] .fav-timestamp { font-style: italic; font-size: 12px; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.content-panel[data-panel$="favorites"] .fav-timestamp--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }

/* ===== Notes ===== */
.content-panel[data-panel="notes"] .list-row { display: grid; grid-template-columns: 40px 1fr auto; padding: 20px; align-items: start; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.content-panel[data-panel="notes"] .list-icon { width: 40px; height: 40px; background: var(--mainsite-light); color: var(--mainsite-dark); border-radius: var(--radius-md); display: grid; place-items: center; }
.content-panel[data-panel="notes"] .list-icon .mi { font-size: 20px; }
.list-icon .icon {width: 20px; height: 20px;}
.content-panel[data-panel="notes"] .list-main { display: flex; flex-direction: column; gap: 6px; }
.content-panel[data-panel="notes"] .list-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin: 0; }
.content-panel[data-panel="notes"] .list-sub { margin: 0 0 8px; font-size: 14px; color: var(--ink-muted); }
.content-panel[data-panel="notes"] .note-timestamp { font-style: italic; font-size: 12px; color: var(--ink-fainter); }
.content-panel[data-panel="notes"] .note-delete { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--ink-fainter); cursor: pointer; display: grid; place-items: center; align-self: start; transition: background-color .15s, color .15s; }
.content-panel[data-panel="notes"] .note-delete .mi { font-size: 18px; }
.note-delete .icon {width: 18px; height: 18px;}
.content-panel[data-panel="notes"] .note-delete:hover { background: var(--mainsite-very-light); color: var(--mainsite-primary); }

/* ===== Comments ===== */
.content-panel[data-panel="comments"] .list-row { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; padding: 20px; align-items: start; row-gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.content-panel[data-panel="comments"] .list-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; }
.content-panel[data-panel="comments"] .comment-activity--exercise { background: #EFF6FF; color: #1E40AF; }
.content-panel[data-panel="comments"] .comment-activity--icebreaker { background: #F0FDF4; color: #166534; }
.content-panel[data-panel="comments"] .comment-activity--workshop { background: #FAF5FF; color: #6B21A8; }
.content-panel[data-panel="comments"] .list-main { display: flex; flex-direction: column; gap: 6px; }
.content-panel[data-panel="comments"] .list-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin: 0; }
.content-panel[data-panel="comments"] .list-sub { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.content-panel[data-panel="comments"] .comment-footer { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; }
.content-panel[data-panel="comments"] .comment-timestamp { font-style: italic; font-size: 12px; color: var(--ink-fainter); }
.content-panel[data-panel="comments"] .comment-replies { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-fainter); text-decoration: none; padding: 2px 6px; border-radius: var(--radius-full); transition: background-color .15s, color .15s; }
.content-panel[data-panel="comments"] .comment-replies:hover { background: var(--mainsite-very-light); color: var(--mainsite-primary); }
.content-panel[data-panel="comments"] .comment-replies .mi { font-size: 14px; }
.comment-replies .icon {width: 14px; height: 14px;}
.content-panel[data-panel="comments"] .comment-action { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--ink-fainter); cursor: pointer; display: grid; place-items: center; transition: background-color .15s, color .15s; align-self: start; }
.content-panel[data-panel="comments"] .comment-action .mi { font-size: 18px; }
.comment-action .icon {width: 18px; height: 18px;}
.content-panel[data-panel="comments"] .comment-action:hover { background: var(--mainsite-very-light); color: var(--mainsite-primary); }
.content-panel[data-panel="comments"] .comment-action--open { color: var(--mainsite-primary); }
.content-panel[data-panel="comments"] .comment-action--open:hover { color: var(--mainsite-dark); }
.content-panel[data-panel="comments"] .comment-footer .comment-action { margin-left: auto; }

/* ===== Submissions / Published shared pill layout ===== */
.content-panel[data-panel="submissions"] .list-row { display: grid; grid-template-columns: 40px 1fr auto; padding: 20px; align-items: center; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.content-panel[data-panel="submissions"] .submission-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--mainsite-very-light); color: var(--mainsite-primary); display: grid; place-items: center; }
.content-panel[data-panel="submissions"] .list-main { display: flex; flex-direction: column; gap: 4px; }
.content-panel[data-panel="submissions"] .list-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin: 0; }
.content-panel[data-panel="submissions"] .submission-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.content-panel[data-panel="submissions"] .submission-timestamp { font-style: italic; font-size: 12px; color: var(--ink-fainter); }

/* ===== Team members (3-column cards) ===== */
.content-panel[data-panel="team"] .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.content-panel[data-panel="team"] .team-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.content-panel[data-panel="team"] .team-card:hover { border-color: var(--mainsite-light); box-shadow: 0 6px 18px rgba(229, 77, 77, 0.08); transform: translateY(-1px); }
.content-panel[data-panel="team"] .team-card__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border); display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #fff; }
.content-panel[data-panel="team"] .team-card__name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.content-panel[data-panel="team"] .team-card__email { font-size: 12px; font-style: italic; color: var(--ink-fainter); margin-bottom: 14px; }
.content-panel[data-panel="team"] .team-card__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ===== Team Playbooks ===== */
.content-panel[data-panel="team-playbooks"] .playbook-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 0; overflow: hidden; display: grid; grid-template-columns: 64px 1fr; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.content-panel[data-panel="team-playbooks"] .playbook-card:hover { border-color: var(--mainsite-light); box-shadow: 0 6px 18px rgba(229, 77, 77, 0.08); transform: translateY(-1px); text-decoration: none; }
.content-panel[data-panel="team-playbooks"] .playbook-card__cover { display: grid; place-items: center; align-self: stretch; background: var(--mainsite-very-light); color: var(--mainsite-primary); }
.content-panel[data-panel="team-playbooks"] .playbook-card__cover .mi { font-size: 28px; font-variation-settings: 'FILL' 1; }
.playbook-card__cover .icon {width: 28px; height: 28px;}
.content-panel[data-panel="team-playbooks"] .playbook-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.content-panel[data-panel="team-playbooks"] .playbook-card__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.content-panel[data-panel="team-playbooks"] .playbook-card__description { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.content-panel[data-panel="team-playbooks"] .playbook-card__owner { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.content-panel[data-panel="team-playbooks"] .playbook-card__owner strong { color: var(--ink); font-weight: 600; }

/* ===== Tiny avatars ===== */
.ws-avatar-sm { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid #fff; }

/* ===== Playbook Details ===== */
.pb-breadcrumb { font-size: 13px; color: var(--ink-muted); margin-bottom: 16px; }
.pb-breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.pb-breadcrumb a:hover { color: var(--mainsite-primary); }
.pb-breadcrumb .mi { font-size: 14px; vertical-align: middle; opacity: .5; margin: 0 4px; }
.pb-breadcrumb .icon {width: 14px; height: 14px; vertical-align: middle; opacity: .5; margin: 0 4px;}
.pb-breadcrumb .current { color: var(--ink); font-weight: 600; }

.pb-hero { background: linear-gradient(135deg, #C73E3E 0%, var(--mainsite-primary) 60%, #D96666 100%); color: #fff; border-radius: var(--radius-2xl); padding: 36px 40px; margin-bottom: 28px; box-shadow: 0 12px 30px rgba(199, 62, 62, 0.18); }
.pb-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.pb-hero h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; line-height: 1.1; color: #fff; margin: 0 0 14px; }
.pb-hero__lede { font-size: 1.0625rem; color: rgba(255,255,255,.92); line-height: 1.55; margin: 0 0 26px; max-width: 720px; }
.pb-hero__byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-hero__pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); color: #fff; padding: 8px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; }
.pb-hero__pill .mi { font-size: 16px; opacity: .9; }
.pb-hero__pill .icon {width: 16px; height: 16px; opacity: .9;}
.pb-hero__pill .pb-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 2px rgba(74,222,128,.25); }
.pb-hero__actions { margin-left: auto; display: flex; gap: 8px; }
.pb-hero__actions .btn { background: rgba(255,255,255,.16); color: #fff; border: none; }
.pb-hero__actions .btn:hover { background: rgba(255,255,255,.26); }
.pb-hero__actions .btn.btn-primary { background: #fff; color: var(--mainsite-primary); }
.pb-hero__actions .btn.btn-primary:hover { background: rgba(255,255,255,.92); color: var(--mainsite-dark); }

.pb-section { margin-bottom: 36px; }
.pb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.pb-tab { background: none; border: none; padding: 12px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; transition: color .15s, border-color .15s; }
.pb-tab .mi { font-size: 18px; }
.pb-tab .icon {width: 18px; height: 18px;}
.pb-tab:hover { color: var(--ink); }
.pb-tab.is-active { color: var(--mainsite-primary); border-bottom-color: var(--mainsite-primary); }
.pb-tab__meta { font-size: 11px; font-weight: 500; color: var(--ink-fainter); margin-left: 4px; }
.pb-tab.is-active .pb-tab__meta { color: var(--mainsite-dark); opacity: .7; }
.pb-tabpanel[hidden] { display: none; }

.pb-agenda { display: flex; flex-direction: column; gap: 8px; }
.pb-agenda-step { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.pb-agenda-step__time { font-family: var(--font-heading); font-weight: 600; color: var(--mainsite-primary); font-size: 14px; text-align: center; background: var(--mainsite-very-light); border-radius: var(--radius-md); padding: 8px 0; }
.pb-agenda-step__title { font-weight: 600; font-size: 14px; color: var(--ink); margin: 0 0 2px; }
.pb-agenda-step__desc { font-size: 13px; color: var(--ink-muted); margin: 0; }

.pb-script { display: flex; flex-direction: column; gap: 24px; }
.pb-script-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; }
.pb-script-block h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.pb-script-block p { font-size: 14px; color: var(--ink); line-height: 1.6; margin: 0 0 10px; white-space: pre-line; }
.pb-script-block p:last-child { margin-bottom: 0; }

.pb-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pb-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.pb-info-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.pb-info-card__label .mi { font-size: 14px; color: var(--mainsite-primary); }
.pb-info-card__label .icon {width: 14px; height: 14px; color: var(--mainsite-primary);}
.pb-info-card__value { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.3; }

.pb-comments { display: flex; flex-direction: column; gap: 14px; }
.pb-comment { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.pb-comment__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.pb-comment__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-comment__head { display: flex; align-items: baseline; gap: 8px; }
.pb-comment__name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.pb-comment__time { font-style: italic; font-size: 12px; color: var(--ink-fainter); }
.pb-comment__text { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 0; white-space: pre-wrap; }
.pb-comment__actions { display: flex; gap: 12px; margin-top: 4px; }
.pb-comment__action { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-fainter); display: inline-flex; align-items: center; gap: 4px; padding: 0; transition: color .15s; }
.pb-comment__action:hover { color: var(--mainsite-primary); }
.pb-comment__action .mi { font-size: 14px; }
.pb-comment__action .icon {width: 14px; height: 14px;}

.pb-comment-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pb-comment-form textarea { border: none; resize: vertical; font-family: inherit; font-size: 14px; color: var(--ink); min-height: 64px; padding: 4px 0; outline: none; background: transparent; }
.pb-comment-form textarea::placeholder { color: var(--ink-fainter); }
.pb-comment-form__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }

/* Empty state */
.mw-empty {
    --ws-empty-accent: var(--mainsite-primary);
    --ws-empty-accent-light: #F87171;
    --ws-empty-accent-bg: var(--mainsite-light, #FEE2E2);
    padding: 56px 28px; text-align: center; color: var(--ink-muted);
    background: #F0EBE3;
    border: 2px dashed var(--ws-empty-accent);
    border-radius: var(--radius-lg);
}
.mw-empty__icon {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ws-empty-accent-bg);
    color: var(--ws-empty-accent-light);
    margin: 0 auto 16px;
}

/* Panel-specific empty-state accents */
.content-panel[data-panel="agendas"] .mw-empty {
    --ws-empty-accent: var(--phase-plan, #0284C7);
    --ws-empty-accent-light: #60A5FA;
    --ws-empty-accent-bg: #BAE6FD;
}
.content-panel[data-panel="favorites"] .mw-empty,
.content-panel[data-panel="notes"] .mw-empty,
.content-panel[data-panel="comments"] .mw-empty,
.content-panel[data-panel="submissions"] .mw-empty,
.content-panel[data-panel="published"] .mw-empty,
.content-panel[data-panel="team-favorites"] .mw-empty,
.content-panel[data-panel="team-playbooks"] .mw-empty {
    --ws-empty-accent: var(--mainsite-primary, #E54D4D);
    --ws-empty-accent-light: #F87171;
    --ws-empty-accent-bg: #FEE2E2;
}
.mw-empty__icon .icon, .mw-empty__icon .mi { width: 28px; height: 28px; font-size: 28px; }
.mw-empty h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--ink); margin: 0 0 6px; }
.mw-empty p { margin: 0 0 20px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.mw-empty__actions { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* MyWorkshopr button primitive (keeps buttons consistent inside empty states etc) */
.mw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.mw-btn .icon, .mw-btn .mi { width: 16px; height: 16px; font-size: 16px; }
.mw-btn:hover { text-decoration: none; }

.mw-btn--red { background: var(--mainsite-primary); color: #fff; }
.mw-btn--red:hover { background: var(--mainsite-dark); color: #fff; }

.mw-btn--blue { background: var(--phase-plan, #0284C7); color: #fff; }
.mw-btn--blue:hover { background: var(--phase-plan-dark, #075985); color: #fff; }

.mw-btn--ghost { background: #fff; color: var(--ink); border-color: var(--border); }
.mw-btn--ghost:hover { background: var(--surface-3); }

.mw-btn--ghost-blue { background: #fff; color: var(--phase-plan, #0284C7); border-color: var(--phase-plan, #0284C7); }
.mw-btn--ghost-blue:hover { background: #F0F9FF; }

/* Share modal */
.mw-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 3000; }
.mw-modal.is-open { display: flex; }
.mw-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(3px); }
.mw-modal__dialog { position: relative; background: #fff; border-radius: var(--radius-xl); box-shadow: 0 30px 60px rgba(0,0,0,.25); padding: 28px 28px 24px; width: 92%; max-width: 520px; }
.mw-modal__close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--ink-fainter); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-md); }
.mw-modal__close:hover { background: var(--surface-3); color: var(--ink); }
.mw-modal__title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; margin: 0 0 4px; }
.mw-modal__sub { margin: 0 0 20px; color: var(--ink-muted); font-size: 14px; }
.mw-modal__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 6px; }
.mw-modal__linkrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.mw-modal__input { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); }
.mw-modal__input:focus { outline: 2px solid var(--mainsite-primary); outline-offset: 1px; }
.mw-modal__hint { margin: 12px 0 0; font-size: 12px; color: var(--ink-fainter); }