/* Grouped metrics, primary column and a quiet navigation rail. */
:root {
  --content-width:1080px;
  --content-admin-width:1200px;
  --content-reading-width:860px;
  --density-aside:280px;
  --density-action-column:300px;
  --density-gap:16px;
  --density-pad:18px;
  --density-page-pad:24px;
  --density-title:26px;
  --density-header-pad:20px;
  --density-text:15px;
  --density-main-value:34px;
  --density-secondary-value:24px;
  --density-thumb:112px;
  --density-thumb-height:88px;
  --density-small-gap:8px;
  --density-item-pad:14px;
  --density-lines:3;
  --density-background:#f1f8f6;
  --density-empty-height:96px;
  --density-empty-icon:28px;
  --brand-logo-size:44px;
  --assistant-avatar-size:32px;
  --gap:var(--density-gap);
}
#app:not([data-view="chat"]) .workspace { padding-inline:var(--density-page-pad); }
#app:not([data-view="chat"]) .workspace>.preview-bar,
#app:not([data-view="chat"]) .workspace>.page-header,
#app:not([data-view="chat"]) .workspace>main,
#app:not([data-view="chat"]) .workspace>footer,
#app:not([data-view="chat"]) #point-notifications { width:100%; max-width:var(--content-width); margin-inline:auto; }
#app[data-view="admin"] { --content-width:var(--content-admin-width); }
#app:not([data-view="chat"]) .page-header { padding-block:var(--density-header-pad); }
#app:not([data-view="chat"]) .page-header h1 { font-size:var(--density-title); }
.page-header .eyebrow { display:none; }
.panel { padding:var(--density-pad); }
.panel-heading { margin-bottom:var(--density-gap); }
.panel-heading .button { min-height:var(--touch); }
.sidebar .nav-item { padding-block:var(--density-small-gap); min-height:var(--touch); }
.brand-mark { display:block; width:var(--brand-logo-size); height:var(--brand-logo-size); object-fit:contain; flex:none; }
.chat-assistant-avatar { display:block; width:var(--assistant-avatar-size); height:var(--assistant-avatar-size); object-fit:contain; flex:none; }
#app[data-view="dashboard"] .metrics {
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden;
}
#app[data-view="dashboard"] .metric { min-width:0; padding:var(--density-pad); border:0; border-radius:0; background:transparent; align-items:center; }
#app[data-view="dashboard"] .metric:first-child { background:var(--density-background); }
#app[data-view="dashboard"] .metric+.metric { border-left:1px solid var(--line); }
#app[data-view="dashboard"] .metric:not(:first-child) .metric-icon { display:none; }
#app[data-view="dashboard"] .metric>div:last-child { min-width:0; }
#app[data-view="dashboard"] .metric:first-child .metric-value { font-size:var(--density-main-value); color:var(--teal); }
#app[data-view="dashboard"] .metric:not(:first-child) .metric-value { font-size:var(--density-secondary-value); }
#app[data-view="dashboard"] .metric .metric-value { overflow-wrap:anywhere; }
#app[data-view="dashboard"] .dashboard-grid { grid-template-columns:minmax(0,1fr) var(--density-aside); align-items:start; }
#app[data-view="dashboard"] .dashboard-grid>.column:last-child { gap:var(--density-gap); }
#app[data-view="dashboard"] .dashboard-grid>.column:last-child>.panel { padding:var(--density-gap); }
#app[data-view="dashboard"] .helly-mark { display:none; }
#app[data-view="dashboard"] .helly .muted { margin:var(--density-small-gap) 0; }
#app[data-view="dashboard"] .review-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#app[data-view="dashboard"] .purchase-row { padding-block:var(--density-item-pad); }
#app[data-view="dashboard"] .crown-guide .crown-gallery { gap:var(--density-small-gap); }
#app[data-view="dashboard"] .crown-tile { padding:var(--density-item-pad) var(--density-small-gap); }
#app[data-view="attendance"] .attendance-layout { display:grid; grid-template-columns:var(--density-action-column) minmax(0,1fr); gap:var(--density-gap); align-items:start; }
#app[data-view="attendance"] .attendance-layout>.panel { margin:0; }
#app[data-view="attendance"] .attendance-panel .inline-form { flex-direction:column; }
#app[data-view="attendance"] .attendance-panel .inline-form .button { width:100%; }
.attendance-note { padding-block:var(--density-item-pad); }
.attendance-note-content>p { margin-top:var(--density-small-gap); font-size:var(--density-text); }
#app[data-view="reviews"] .review-list { gap:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
#app[data-view="reviews"] .review-card.bordered { margin:0; padding:var(--density-pad); border:0; border-radius:0; background:transparent; }
#app[data-view="reviews"] .review-card.bordered+.review-card { border-top:1px solid var(--line); }
#app[data-view="reviews"] .review-list .review-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--density-lines); overflow:hidden; font-size:var(--density-text); }
#app[data-view="reviews"] .review-list.public-list .review-card:has(.review-gallery) { display:grid; grid-template-columns:minmax(0,1fr) var(--density-thumb); gap:0 var(--density-gap); }
#app[data-view="reviews"] .review-list.public-list .review-card>* { grid-column:1; }
#app[data-view="reviews"] .review-list.public-list .review-card>.review-meta { grid-column:1/-1; }
#app[data-view="reviews"] .review-list.public-list .review-card>.review-actions { grid-column:1/-1; }
#app[data-view="reviews"] .review-list.public-list .review-card>.review-gallery { grid-column:2; grid-row:2/span 3; display:block; margin:0; }
#app[data-view="reviews"] .review-list.public-list .review-gallery>figure:not(:first-child) { display:none; }
#app[data-view="reviews"] .review-list.public-list .review-gallery img,
#app[data-view="reviews"] .review-list.public-list .review-gallery video { height:var(--density-thumb-height); }
#app[data-view="reviews"] .review-list.public-list .review-gallery figcaption { display:none; }
#app[data-view="ranking"] main,
#app[data-view="profile"] main,
#app[data-view="memory"] main { max-width:var(--content-reading-width)!important; }
#app[data-view="challenge"] .challenge-layout { grid-template-columns:minmax(0,1fr) var(--density-aside); }
.challenge-heading .panel-heading { margin-bottom:var(--density-small-gap); }
.challenge-progress { margin-top:var(--density-gap); gap:var(--density-gap); }
.challenge-mission { padding-block:var(--density-item-pad); }
.activity-note { padding-block:var(--density-item-pad); }
.community-body { max-width:var(--content-reading-width); }
.knowledge-grid { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:var(--density-gap); }
.knowledge-row { padding-block:var(--density-item-pad); }
.callout { padding:var(--density-item-pad); }
#app:not([data-view="chat"]) main .empty { min-height:var(--density-empty-height); padding:var(--density-gap); gap:var(--density-small-gap); }
#app:not([data-view="chat"]) main .empty>.icon { width:var(--density-empty-icon); height:var(--density-empty-icon); }
@media(max-width:1199px) {
  #app[data-view="dashboard"] .dashboard-grid { grid-template-columns:minmax(0,1fr); }
  #app[data-view="dashboard"] .dashboard-grid>.column:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app[data-view="dashboard"] .dashboard-grid>.column:last-child>.panel { margin:0; }
  #app[data-view="attendance"] .attendance-layout { grid-template-columns:minmax(0,1fr); }
  #app[data-view="attendance"] .attendance-panel .inline-form { flex-direction:row; }
  #app[data-view="attendance"] .attendance-panel .inline-form .button { width:auto; }
  #app[data-view="challenge"] .challenge-layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:900px) { .knowledge-grid { grid-template-columns:minmax(0,1fr); } }
:root[data-layout="mobile"] #app:not([data-view="chat"]) .workspace { padding-inline:var(--mobile-page-gap); }
:root[data-layout="mobile"] #app[data-view="dashboard"] .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-layout="mobile"] #app[data-view="dashboard"] .metric:first-child { grid-column:1/-1; }
:root[data-layout="mobile"] #app[data-view="dashboard"] .metric:nth-child(2) { border-left:0; }
:root[data-layout="mobile"] #app[data-view="dashboard"] .metric:not(:first-child) { border-top:1px solid var(--line); }
:root[data-layout="mobile"] #app[data-view="dashboard"] .dashboard-grid>.column:last-child { display:flex; }
:root[data-layout="mobile"] #app[data-view="attendance"] .attendance-panel .inline-form { flex-direction:column; }
:root[data-layout="mobile"] #app[data-view="attendance"] .attendance-panel .inline-form .button { width:100%; }