/* Internal workspace: utility-led, quiet, and deliberately monochrome. */

.hidden { display: none !important; }
.portal-body { background: var(--bg-deep); }

.portal-login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--space-6);
}
.portal-login.card {
  display: grid;
  width: min(100%, 28rem);
  gap: var(--space-5);
  padding: clamp(var(--space-6), 6vw, var(--space-10));
  border: 1px solid var(--border-strong);
  background: var(--bg-base);
  border-radius: var(--radius-md);
}
.portal-login-logo {
  width: 3rem;
  height: 3rem;
  filter: grayscale(1) contrast(1.35);
}
.portal-login-title { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin: 0; }
.portal-login-copy { color: var(--text-secondary); font-size: var(--text-sm); }
.portal-login-form { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.portal-login-form label, .form-group { display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 700; }
.portal-login-form input, .form-control { width: 100%; min-height: 2.85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--text-primary); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.45; }
.portal-login-form input:focus, .form-control:focus { outline: 0; border-color: var(--text-primary); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.1); }
.portal-login-error { padding: var(--space-3) var(--space-4); background: oklch(0.25 0.08 25 / 0.3); border: 1px solid var(--accent-red); border-radius: var(--radius-sm); color: var(--accent-red); font-size: var(--text-sm); }

.portal { min-height: 100svh; }
.portal-header { position: sticky; inset: 0 0 auto; z-index: 15; display: flex; min-height: var(--nav-height); align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: clamp(var(--space-5), 4vw, var(--space-8)); border-bottom: 1px solid var(--border-subtle); background: color-mix(in oklch, var(--bg-base) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.portal-header-brand, .portal-header-user { display: flex; align-items: center; gap: var(--space-3); }
.portal-header-brand { color: var(--text-primary); font-family: var(--font-portal); font-size: var(--text-sm); font-weight: 700; }
.portal-header-user { color: var(--text-tertiary); font-size: var(--text-sm); }
.dialog-close { display: grid; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); font-size: 1.25rem; line-height: 1; }
.dialog-close:hover { background: var(--bg-surface); }
.portal-content { padding-block: clamp(var(--space-8), 7vw, var(--space-20)); }
.dashboard-view { display: none; }
.dashboard-view.active { display: block; }

.portal-intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 0.55fr); gap: var(--space-8); align-items: end; padding-bottom: clamp(var(--space-10), 8vw, var(--space-20)); border-bottom: 1px solid var(--border-subtle); }
.portal-intro h1 { margin-top: var(--space-3); }
.portal-intro > p { color: var(--text-secondary); font-size: var(--text-lg); }

.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); margin-top: var(--space-8); }
.stat-card { display: grid; gap: var(--space-2); min-height: 9.5rem; align-content: end; padding: clamp(var(--space-5), 4vw, var(--space-8)); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--bg-base); }
.stat-card strong { color: var(--text-primary); font-family: var(--font-mono); font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 500; letter-spacing: -0.08em; line-height: 1; }
.stat-card span { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 700; }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-8); }

.status-tabs, .admin-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); }
.status-tab, .admin-tab { flex: 0 0 auto; min-height: 2.75rem; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text-tertiary); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.status-tab:hover, .admin-tab:hover { color: var(--text-primary); }
.status-tab.active, .admin-tab.active { border-bottom-color: var(--text-primary); color: var(--text-primary); }

.workspace-section { padding-top: var(--space-10); }
.workspace-section + .workspace-section { margin-top: var(--space-12); border-top: 1px solid var(--border-subtle); }
.workspace-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.5fr); gap: var(--space-6); align-items: end; margin-bottom: var(--space-6); }
.workspace-section-heading h2 { font-family: var(--font-portal); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.025em; }
.workspace-section-heading p { color: var(--text-tertiary); font-size: var(--text-sm); }
.item-list { display: grid; border-top: 1px solid var(--border-subtle); }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); width: 100%; padding: var(--space-5) 0; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.item-row:hover { background: var(--bg-surface); transform: translateX(0.25rem); }
.item-row-info { display: grid; gap: var(--space-2); min-width: 0; }
.item-row-title { overflow: hidden; color: var(--text-primary); font-family: var(--font-portal); font-size: var(--text-base); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.item-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
.item-row-arrow { color: var(--text-primary); font-size: var(--text-xl); }
.workspace-empty { padding: var(--space-8) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--text-sm); }

.status-badge { display: inline-flex; width: fit-content; align-items: center; min-height: 1.4rem; padding: 0.12rem var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.status-pending_review { border-style: dashed; }
.status-needs_correction { border-color: var(--text-primary); color: var(--text-primary); }
.status-approved { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.status-rejected { color: var(--text-muted); text-decoration: line-through; }

.category-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); }
.category-directory-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); min-height: 10rem; align-content: start; padding: var(--space-5); border: 0; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-out); }
.category-directory-item:hover { background: var(--bg-surface); }
.category-directory-item strong { color: var(--text-primary); font-family: var(--font-portal); font-size: var(--text-base); }
.category-directory-item span { grid-column: 1; color: var(--text-tertiary); font-size: var(--text-sm); }
.category-directory-item i { grid-column: 2; grid-row: 1; color: var(--text-primary); font-style: normal; }

.editor { width: min(100%, 54rem); }
.editor-header { display: grid; gap: var(--space-3); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-subtle); }
.editor-header h1 { font-size: var(--text-3xl); }
.editor-form { display: grid; gap: var(--space-8); padding-top: var(--space-8); }
.form-control { resize: vertical; }
.form-textarea, .editor-view { min-height: 12rem; }
.form-label-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.form-label-row label { display: grid; gap: var(--space-1); }
.form-label-row label span { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 400; }
.editor-tabs { display: flex; border: 1px solid var(--border-strong); }
.editor-tab { min-height: 2rem; padding-inline: var(--space-3); border: 0; border-right: 1px solid var(--border-strong); background: transparent; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 700; }
.editor-tab:last-child { border-right: 0; }
.editor-tab.active { background: var(--text-primary); color: var(--text-inverse); }
.editor-view { display: none; }
textarea.editor-view.active { display: block; }
.editor-preview { min-height: 12rem; padding: var(--space-5); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); font-weight: 400; }
.editor-preview.active { display: block; }
.editor-preview h1, .editor-preview h2, .editor-preview h3 { margin-top: var(--space-5); }
.editor-preview p + p { margin-top: var(--space-4); }
.attachments-manager { display: grid; gap: var(--space-3); }
.attachment-row { display: grid; grid-template-columns: 7rem minmax(0, 0.7fr) minmax(0, 1.3fr) auto; gap: var(--space-2); align-items: center; }
.attachment-row select, .attachment-row input { min-width: 0; min-height: 2.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--text-primary); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.attachment-remove { width: 2.6rem; height: 2.6rem; }
.editor-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.editor-submit p { color: var(--text-tertiary); font-size: var(--text-sm); }

.detail-panel-overlay { position: fixed; inset: 0; z-index: 30; background: var(--bg-scrim); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out); }
.detail-panel-overlay.open { opacity: 1; pointer-events: auto; }
.detail-panel { position: fixed; inset: 0 0 0 auto; z-index: 31; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(100%, 44rem); height: 100dvh; border-left: 1px solid var(--border-strong); background: var(--bg-base); transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-out); }
.detail-panel.open { transform: translateX(0); }
.detail-panel-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.detail-panel-title { margin-top: var(--space-1); font-family: var(--font-portal); font-size: var(--text-xl); font-weight: 700; }
.detail-panel-body { overflow: auto; padding: var(--space-6); }
.detail-panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
.proposal-document, .proposal-diff, .feedback-box { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.proposal-document h3 { font-family: var(--font-portal); font-size: var(--text-xl); font-weight: 700; }
.proposal-document p, .feedback-box p, .post-body { color: var(--text-secondary); font-size: var(--text-sm); }
.proposal-label { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.proposal-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proposal-diff > .proposal-label { grid-column: 1 / -1; }
.proposal-diff div { display: grid; gap: var(--space-2); }
.proposal-diff span { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
.proposal-diff strong { color: var(--text-primary); font-size: var(--text-sm); }
.post-body { display: grid; gap: var(--space-4); line-height: 1.7; }
.post-body h1, .post-body h2, .post-body h3 { font-family: var(--font-portal); font-size: var(--text-xl); font-weight: 700; }
.post-body ul, .post-body ol { padding-left: var(--space-6); }
.post-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; }

.toast-container { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 40; display: grid; gap: var(--space-3); width: min(24rem, calc(100vw - 2 * var(--space-5))); }
.toast { padding: var(--space-4); border: 1px solid var(--border-strong); background: var(--text-primary); color: var(--text-inverse); font-size: var(--text-sm); font-weight: 700; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.toast-error { background: var(--bg-raised); color: var(--text-primary); }
.toast.is-leaving { opacity: 0; transform: translateY(0.5rem); }

@media (max-width: 48rem) {
  .portal-intro, .workspace-section-heading { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .attachment-row { grid-template-columns: 1fr 1fr auto; }
  .attachment-row .att-url { grid-column: span 2; }
}

@media (max-width: 32rem) {
  .portal-header-user > span { display: none; }
  .portal-header { padding-inline: var(--space-4); }
  .detail-panel { width: 100%; }
  .form-label-row { align-items: start; flex-direction: column; }
  .proposal-diff { grid-template-columns: 1fr; }
  .proposal-diff > .proposal-label { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}