/* Owners Page Specific Styles */
/* Faculty color variables */
:root {
  --f-viche: #2C6E70;
  --f-patana: #B4522A;
  --f-phaen: #3C4A7A;
  --f-bori: #C58A22;
}
@media (prefers-color-scheme: dark) {
  :root {
    --f-viche: #5FB0AF;
    --f-patana: #E28154;
    --f-phaen: #8C9CD1;
    --f-bori: #D8A85A;
  }
}
:root[data-theme="dark"] {
  --f-viche: #5FB0AF;
  --f-patana: #E28154;
  --f-phaen: #8C9CD1;
  --f-bori: #D8A85A;
}
:root[data-theme="light"] {
  --f-viche: #2C6E70;
  --f-patana: #B4522A;
  --f-phaen: #3C4A7A;
  --f-bori: #C58A22;
}

.shell{max-width:1320px; margin:0 auto; display:grid; grid-template-columns:280px 1fr; gap:28px; padding:24px 24px 80px}
@media(min-width:1400px){.shell{padding:24px 40px 80px}}

/* Sidebar */
aside{position:sticky; top:16px; align-self:start; max-height:calc(100vh - 32px); overflow-y:auto}
.mobile-select{display:none; margin:0 -10px 12px}
.side-title{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--meta); font-weight:700; padding:0 12px; margin-bottom:8px}
.all-btn{width:100%; text-align:left; padding:10px 14px; border-radius:8px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); font:inherit; cursor:pointer; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center}
.all-btn[aria-pressed="true"]{background:var(--rule-2); border-color:var(--ink-2)}
.all-btn .n{color:var(--ink-3); font-size:12px}

.fac{border-top:1px solid var(--rule); padding-top:14px; margin-top:10px}
.fac-head{display:flex; justify-content:space-between; align-items:baseline; padding:0 12px 6px}
.fac-name{font-size:12.5px; letter-spacing:.08em; font-weight:700; color:var(--fc, var(--ink-2)); text-transform:uppercase}
.fac-cnt{font-size:11px; color:var(--ink-3)}

.o-btn{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  width:100%; text-align:left; padding:7px 12px 7px 14px; border:0; background:none; color:var(--ink-2);
  font:inherit; font-size:13.5px; cursor:pointer; border-radius:6px; line-height:1.35; position:relative
}
.o-btn::before{
  content:""; position:absolute; left:4px; top:12px; bottom:12px; width:2px;
  background:transparent; border-radius:2px
}
.o-btn:hover{color:var(--ink); background:var(--rule-2)}
.o-btn[aria-pressed="true"]{color:var(--ink); background:var(--rule-2); font-weight:600}
.o-btn[aria-pressed="true"]::before{background:var(--fc)}
.o-btn .n{color:var(--ink-3); font-size:11.5px; font-weight:600; padding:1px 7px; border-radius:10px; background:var(--panel-2); flex-shrink:0}
.o-btn[aria-pressed="true"] .n{background:var(--fc); color:var(--panel)}

/* Main */
main .head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
main h2{font-size:22px; margin:0 0 4px; letter-spacing:-.005em; font-weight:700; text-wrap:balance}
main .head .fac-tag{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--fc, var(--m2))}
main .head .count{font-size:13px; color:var(--ink-3); font-weight:500}
main .head .count b{color:var(--ink); font-weight:700}

.summary{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  background:var(--panel); border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin-bottom:20px
}
.summary div{padding:12px 16px; border-right:1px solid var(--rule)}
.summary div:last-child{border-right:0}
.summary .k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); font-weight:700}
.summary .v{font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin-top:2px}
.summary .v small{font-size:12px; color:var(--ink-3); font-weight:500; margin-left:4px}

.cards{display:grid; grid-template-columns:1fr; gap:12px}

.card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; overflow:hidden; position:relative; transition:box-shadow .14s ease, border-color .14s ease}
.card:hover{box-shadow:var(--shadow)}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--spine, var(--rule))}
.card[data-m="1"]{--spine:var(--m1)}
.card[data-m="2"]{--spine:var(--m2)}
.card[data-m="3"]{--spine:var(--m3)}

.chead{display:grid; grid-template-columns:auto 1fr auto auto; gap:12px 18px; align-items:baseline; padding:16px 20px 14px 22px; width:100%; background:none; border:0; text-align:left; cursor:pointer; color:inherit; font:inherit}
.chead:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.num{font-size:14px; font-weight:700; color:var(--spine); font-variant-numeric:tabular-nums}
.title{font-size:16px; font-weight:600; line-height:1.35; margin:0; text-wrap:balance}
.pill{font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px; background:var(--rule-2); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.pill.has{background:#D9E7D5; color:#2E6B2E}
.pill.none{background:var(--m1-soft); color:var(--m1)}
@media (prefers-color-scheme:dark){.pill.has{background:#1D2E1B; color:#7CBE72} .pill.none{background:#3A2418; color:#E28154}}
:root[data-theme="dark"] .pill.has{background:#1D2E1B; color:#7CBE72}
:root[data-theme="dark"] .pill.none{background:#3A2418; color:#E28154}

.toggle{color:var(--ink-3); transition:transform .2s ease}
.card[open] .toggle{transform:rotate(90deg)}
.subline{grid-column:2/-1; font-size:13px; color:var(--ink-2); margin-top:2px; display:flex; gap:6px 14px; flex-wrap:wrap}

.cbody{display:none; padding:2px 20px 20px 22px; border-top:1px solid var(--rule-2); background:color-mix(in oklab, var(--panel) 96%, var(--ground))}
.card[open] .cbody{display:block}
.cbody h3{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--spine); font-weight:700; margin:16px 0 4px}
.cbody p{margin:0}
.cbody ol, .cbody ul{margin:4px 0 0; padding-left:22px}
.cbody ol li, .cbody ul li{padding:2px 0}
.cbody code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:12.5px; background:var(--rule-2); padding:1px 6px; border-radius:4px}
.role-line{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.role{font-size:12px; padding:3px 9px; background:var(--rule-2); border-radius:999px; color:var(--ink-2); border:1px solid var(--rule)}
.role.is-me{background:var(--m2-soft); border-color:var(--m2); color:var(--m2); font-weight:600}

.empty{padding:48px; text-align:center; color:var(--meta); border:1px dashed var(--rule); border-radius:10px}

.foot{margin-top:36px; padding-top:16px; border-top:1px solid var(--rule); font-size:12px; color:var(--meta); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:820px){
  .shell{grid-template-columns:1fr; padding:16px 18px 72px}
  aside{position:static; max-height:none}
  .side-title, .fac, .all-btn{display:none}
  .mobile-select{display:block}
  .mobile-select select{width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); font:inherit; font-size:14px}
  .summary{grid-template-columns:1fr; }
  .summary div{border-right:0; border-bottom:1px solid var(--rule)}
  .summary div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Shared compact nav */
.navwrap{max-width:1320px; margin:0 auto; padding:16px 24px 0}
@media(min-width:1400px){.navwrap{padding:16px 40px 0}}
.nav{--n-r2:#EBE5D3; --n-panel:#FBF8F1;
  display:flex; flex-wrap:wrap; gap:4px; padding:4px;
  background:var(--panel); border:1px solid var(--rule); border-radius:9px; box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){.nav{--n-r2:#23262B; --n-panel:#1C1F24}}
:root[data-theme="dark"] .nav{--n-r2:#23262B; --n-panel:#1C1F24}
:root[data-theme="light"] .nav{--n-r2:#EBE5D3; --n-panel:#FBF8F1}
.nav a{flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 10px; border-radius:6px; text-decoration:none; color:var(--ink-2); font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0;
  transition:background .12s ease, color .12s ease}
.nav a:hover{background:var(--n-r2); color:var(--ink)}
.nav a:focus-visible{outline:2px solid var(--nav-c); outline-offset:2px}
.nav a[aria-current="page"]{background:var(--nav-c); color:var(--n-panel)}
.nav a[aria-current="page"] svg{color:var(--n-panel)}
.nav svg{color:var(--nav-c); flex-shrink:0}

/* Icon sizing */
svg.toggle {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
@media (max-width:820px){.navwrap{padding:12px 18px 0}}
@media (max-width:720px){.nav a{flex-basis:calc(50% - 2px)}}