/* R10: extend the existing workspace tokens; no separate theme or font stack. */
:root { --access-ease-out:cubic-bezier(.23,1,.32,1) }
.access-eyebrow { font-size:.68rem!important; letter-spacing:.13em; text-transform:uppercase; font-weight:650; color:var(--muted); margin:0 0 10px!important }
.role-layout { display:grid; grid-template-columns:246px minmax(0,1fr); gap:40px; align-items:start }
.role-index { min-width:0; position:sticky; top:30px }
.role-index .section-header h2,.role-editor>.section-header h2 { font-size:1rem; font-weight:600 }
.role-index-item { display:flex; align-items:center; gap:10px; padding:14px 12px; border-radius:9px; text-decoration:none; color:var(--ink); margin:4px 0; border:1px solid transparent }
.role-index-item.is-selected { background:var(--accent-soft); border-color:var(--line) }
.role-index-item>span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere }
.role-index-item strong { font-size:.83rem; font-weight:550; display:block }
.role-index-item small { display:block; font-size:.7rem; color:var(--muted); margin-top:4px }
.role-rank { font-size:.7rem; font-variant-numeric:tabular-nums; color:var(--muted); flex:none }
.role-rank .icon { width:15px; height:15px }
.role-color { width:9px; height:9px; border-radius:50%; flex:none; background:#68758c }
.role-color[data-role-color='#5076be'] { background:#5076be }
.role-color[data-role-color='#3c8b79'] { background:#3c8b79 }
.role-color[data-role-color='#ac7b35'] { background:#ac7b35 }
.role-color[data-role-color='#ab5d70'] { background:#ab5d70 }
.role-color[data-role-color='#8265af'] { background:#8265af }
.role-index-note { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; font-size:.75rem; line-height:1.7; color:var(--muted) }
.role-fields { border:0; padding:0; margin:0; min-width:0 }
.role-basics { display:grid; grid-template-columns:minmax(0,1fr) 130px 130px; gap:14px }
.role-basics label { display:flex; flex-direction:column; gap:9px; font-size:.78rem }
.role-basics input,.role-basics select { width:100%; min-width:0 }
.permission-group { margin:28px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--line); min-width:0 }
.permission-group legend { font-size:.83rem; font-weight:650; padding-right:12px; color:var(--ink) }
.permission-option { display:flex; align-items:flex-start; gap:12px; padding:12px 0; cursor:pointer }
.permission-option input,.role-check input { width:17px; height:17px; flex:none; margin:2px 0 0; accent-color:var(--accent) }
.permission-option>span { display:block; min-width:0 }
.permission-option strong { display:block; font-size:.83rem; font-weight:500; line-height:1.5 }
.permission-option small { display:block; font-size:.73rem; line-height:1.6; color:var(--muted); margin-top:3px }
.permission-option.is-unavailable { opacity:.7; cursor:default }
.role-save-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:24px; margin-top:18px; border-top:1px solid var(--line) }
.role-save-bar p { font-size:.74rem; color:var(--muted); line-height:1.7; max-width:36ch }
.role-save-bar button { flex:none }
.role-delete { margin-top:22px }
.member-role-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.role-badge { display:inline-flex!important; align-items:center; padding:3px 7px; border:1px solid var(--line); border-radius:5px; font-size:.65rem!important; line-height:1.2!important; color:var(--muted) }
.member-role-picker { border:0; padding:0; min-width:0; max-height:310px; overflow-y:auto }
.member-role-picker legend { font-size:.8rem; font-weight:600; margin-bottom:8px }
.role-check { display:flex!important; flex-direction:row!important; gap:10px; align-items:center; padding:8px 0; font-size:.8rem; cursor:pointer }
.role-check span { overflow-wrap:anywhere }
.audience-control { border:1px solid var(--line); border-radius:10px; padding:17px; min-width:0 }
.audience-control>legend { padding:0 7px; font-weight:600; font-size:.84rem }
.audience-role-list { border:0; padding:12px 0 0; margin:0; max-height:220px; overflow-y:auto; min-width:0 }
.audience-role-list legend { font-size:.75rem; color:var(--muted) }
.source-audience { border-block:1px solid var(--line); padding:20px 0; margin:22px 0 30px; max-width:72ch }
.source-audience h2 { font-size:.92rem; font-weight:600 }
.source-audience p { color:var(--muted); font-size:.8rem; line-height:1.7; margin:8px 0 }
.source-audience details { margin-top:14px }
.source-audience .form-stack { padding-top:15px; max-width:480px }
.workspace-guide-entry { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0 26px; margin-bottom:20px; border-bottom:1px solid var(--line) }
.workspace-guide-entry h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:1.6rem; letter-spacing:-.02em; margin:0 0 8px }
.workspace-guide-entry p:not(.access-eyebrow) { color:var(--muted); font-size:.83rem; line-height:1.65; max-width:66ch; margin:0 }
.workspace-guide-entry>button { flex:none }
.workspace-guide-trigger { font-size:.73rem; color:var(--muted); white-space:nowrap }
.access-error { color:#b53636; font-size:.82rem; line-height:1.6 }
/* Native modal dialog: focus and inertness are provided by the browser. Four
   panels dim only the space outside the current target, including mobile. */
dialog.workspace-tour { position:fixed; inset:0; margin:0; padding:0; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; color:var(--ink) }
dialog.workspace-tour::backdrop { background:transparent; backdrop-filter:none }
.tour-shade { position:absolute; background:rgba(12,18,17,.64); pointer-events:auto }
.tour-spotlight { position:absolute; pointer-events:none; border:2px solid rgba(255,255,255,.95); border-radius:10px; box-shadow:0 0 0 4px rgba(178,201,173,.22) }
.tour-card { position:absolute; width:372px; max-width:calc(100vw - 28px); max-height:calc(100dvh - 32px); overflow:auto; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 20px 70px rgba(0,0,0,.28); pointer-events:auto }
.tour-card-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:13px }
.tour-card-top .icon-button { width:28px; height:28px; min-height:28px; flex:none }
.tour-eyebrow { font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:650 }
.tour-copy h2 { font:400 1.55rem/1.25 Georgia,'Times New Roman',serif; letter-spacing:-.025em; margin:0 0 13px; overflow-wrap:anywhere }
.tour-copy p { font-size:.84rem; line-height:1.8; color:var(--muted); margin:0; overflow-wrap:anywhere }
.tour-footer { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:22px; padding-top:17px; border-top:1px solid var(--line) }
.tour-footer>.text-button { font-size:.72rem; color:var(--muted) }
.tour-counter { font-size:.69rem; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums }
.tour-controls { display:flex; gap:7px; margin-left:auto }
.tour-controls button { font-size:.76rem; padding:8px 11px; min-height:38px }
.tour-card:focus { outline:none }
body.tour-navigation-open .app-sidebar { transform:translateX(0)!important; visibility:visible!important; z-index:50!important }
@media (hover:hover) and (pointer:fine) { .role-index-item:not(.is-selected):hover { background:var(--surface-2) } }
@media (max-width:1000px) { .role-layout { grid-template-columns:205px minmax(0,1fr); gap:24px } .role-basics { grid-template-columns:minmax(0,1fr) 110px }.role-basics label:first-child { grid-column:1 / -1 } }
@media (max-width:720px) { .role-layout { grid-template-columns:1fr }.role-index { position:static; border-bottom:1px solid var(--line); padding-bottom:12px }.role-index-item { padding:11px 12px }.role-index-note { margin-top:12px }.role-basics { grid-template-columns:1fr 1fr }.workspace-guide-entry { align-items:flex-start; flex-direction:column; gap:15px }.workspace-guide-trigger { max-width:85px; white-space:normal; line-height:1.2 }.role-save-bar { align-items:flex-start; flex-direction:column }.role-save-bar button { width:100% }.access-page .page-header { flex-wrap:wrap } }
@media (prefers-reduced-motion:reduce) { .tour-card,.tour-spotlight,.tour-shade { animation:none!important; transition:none!important } }
/* Override the shared form-stack label direction for permission rows. */
.role-fields .permission-option { flex-direction:row; align-items:flex-start }
body.tour-navigation-open .app-sidebar { transition:none!important }
@media (max-width:720px) {
  .role-index { display:flex; gap:6px; overflow-x:auto; align-items:stretch; padding-bottom:14px }
  .role-index>.section-header { flex:none; min-width:140px; flex-direction:column; justify-content:center; align-items:flex-start }
  .role-index-item { flex:0 0 180px; margin:0 }
  .role-index>.field-note,.role-index-note { display:none }
}