/* =========================================================================
* Universal Document Shell — Thailand Together Console
* A-owned · shared stylesheet for pages that opt into the doc shell.
*
* Usage (in the of a page that opts in):
*
* ...
*
*
* Design rules:
* · body text ≥ 16px
* · note text 14px (ONLY on .ds-note descendants)
* · content is full-width-friendly with a readable line-length cap per
* section where prose applies
* · section colors are systematic (teal/blue/purple/amber/rose/green)
* · key cards use brighter fills to stand out
* · tables dense but readable
*
* This file deliberately does NOT override .kb-* or ._shared.css selectors —
* pages that use the shell add class="ds-page" to so rules scope
* cleanly. Existing surfaces remain untouched.
* ========================================================================= */
.ds-page {
--ds-bg: #03070E;
--ds-surface: #0A1020;
--ds-surface2: #0E1630;
--ds-surface3: #121B3A;
--ds-text1: #F0F9FF;
--ds-text2: #C4D1E6;
--ds-text3: #94A3B8;
--ds-text4: #64748B;
--ds-border: rgba(148,163,184,0.18);
--ds-border-strong: rgba(148,163,184,0.36);
--ds-teal: #00E5B4;
--ds-blue: #38BDF8;
--ds-purple: #A78BFA;
--ds-amber: #FCD34D;
--ds-rose: #FB7185;
--ds-green: #34D399;
--ds-pink: #EC4899;
--ds-sans: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
--ds-mono: 'Space Mono', 'SF Mono', Menlo, monospace;
--ds-bebas: 'Bebas Neue', 'Noto Sans Thai', sans-serif;
--ds-radius-sm: 8px;
--ds-radius: 12px;
--ds-radius-lg: 18px;
--ds-shadow: 0 18px 48px rgba(0,0,0,0.48);
/* Full-width but readable prose cap within paragraph blocks */
--ds-prose-max: 1180px;
background: var(--ds-bg);
color: var(--ds-text1);
font-family: var(--ds-sans);
font-size: 16px;
line-height: 1.65;
margin: 0;
min-height: 100vh;
background-image:
radial-gradient(ellipse 60% 50% at 10% -10%, rgba(56,189,248,0.10) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 90% 110%, rgba(167,139,250,0.08) 0%, transparent 60%);
}
.ds-page *,
.ds-page *::before,
.ds-page *::after { box-sizing: border-box; }
/* =========================================================================
* Layout · full-width friendly
* ========================================================================= */
.ds-shell {
width: 100%;
max-width: none;
margin: 0;
padding: 28px clamp(20px, 3vw, 48px) 96px;
}
.ds-topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 14px clamp(20px, 3vw, 48px);
background: linear-gradient(180deg, rgba(3,7,14,0.95), rgba(4,8,22,0.85));
border-bottom: 1px solid var(--ds-border-strong);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
position: sticky;
top: 0;
z-index: 40;
}
.ds-topbar .ds-backhome {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--ds-radius-sm);
background: rgba(0,229,180,0.08);
border: 1px solid rgba(0,229,180,0.28);
color: var(--ds-teal);
text-decoration: none;
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ds-topbar .ds-backhome:hover { background: rgba(0,229,180,0.16); }
.ds-topbar .ds-breadcrumb {
flex: 1;
font: 500 16px var(--ds-sans);
color: var(--ds-text2);
letter-spacing: 0;
}
.ds-topbar .ds-breadcrumb a {
color: var(--ds-text2);
text-decoration: none;
border-bottom: 1px dashed rgba(148,163,184,0.3);
}
.ds-topbar .ds-breadcrumb a:hover { color: var(--ds-teal); }
.ds-topbar .ds-breadcrumb .sep { color: var(--ds-text4); margin: 0 10px; }
.ds-topbar .ds-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-topbar .ds-quick a,
.ds-topbar .ds-quick button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--ds-radius-sm);
background: rgba(255,255,255,0.06);
border: 1px solid var(--ds-border);
color: var(--ds-text2);
text-decoration: none;
font: 600 14px var(--ds-mono);
letter-spacing: 0.06em;
cursor: pointer;
}
.ds-topbar .ds-quick a:hover,
.ds-topbar .ds-quick button:hover {
background: rgba(255,255,255,0.12);
color: var(--ds-text1);
border-color: var(--ds-border-strong);
}
/* =========================================================================
* Document identity header
* ========================================================================= */
.ds-identity {
margin: 22px 0 26px;
padding: 26px 30px;
border-radius: var(--ds-radius-lg);
background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(167,139,250,0.08) 60%, rgba(236,72,153,0.08));
border: 1px solid var(--ds-border-strong);
box-shadow: var(--ds-shadow);
}
.ds-identity h1 {
font-family: var(--ds-bebas);
font-size: clamp(40px, 6vw, 64px);
letter-spacing: 0.04em;
line-height: 1.05;
margin: 0 0 6px;
background: linear-gradient(135deg, var(--ds-teal), var(--ds-blue) 60%, var(--ds-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 400;
}
.ds-identity .ds-sub {
font-size: 20px;
color: var(--ds-text1);
font-weight: 500;
margin-bottom: 14px;
}
.ds-identity .ds-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.ds-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font: 700 14px var(--ds-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid;
}
.ds-badge--type { background: rgba(56,189,248,0.10); color: var(--ds-blue); border-color: rgba(56,189,248,0.35); }
.ds-badge--status { background: rgba(52,211,153,0.10); color: var(--ds-green); border-color: rgba(52,211,153,0.35); }
.ds-badge--phase { background: rgba(167,139,250,0.10); color: var(--ds-purple); border-color: rgba(167,139,250,0.35); }
.ds-badge--group { background: rgba(252,211,77,0.10); color: var(--ds-amber); border-color: rgba(252,211,77,0.35); }
.ds-badge--finalize { background: rgba(236,72,153,0.10); color: var(--ds-pink); border-color: rgba(236,72,153,0.35); }
.ds-badge--owner { background: rgba(255,255,255,0.06); color: var(--ds-text2); border-color: var(--ds-border); }
.ds-badge--scaffold { background: rgba(251,113,133,0.08); color: var(--ds-rose); border-color: rgba(251,113,133,0.30); }
/* =========================================================================
* Sub-tabs (2 modes)
* ========================================================================= */
.ds-modeswitch {
display: flex;
gap: 8px;
margin-bottom: 14px;
padding: 6px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius);
width: fit-content;
}
.ds-modeswitch button {
padding: 8px 16px;
border-radius: 8px;
background: transparent;
border: none;
color: var(--ds-text3);
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.ds-modeswitch button.on {
background: linear-gradient(135deg, rgba(0,229,180,0.20), rgba(167,139,250,0.12));
color: var(--ds-text1);
}
.ds-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ds-border);
}
.ds-tabs button {
padding: 10px 16px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
color: var(--ds-text2);
font: 600 16px var(--ds-sans);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ds-tabs button:hover {
background: var(--ds-surface2);
color: var(--ds-text1);
border-color: var(--ds-border-strong);
}
.ds-tabs button.on {
background: linear-gradient(135deg, rgba(0,229,180,0.16), rgba(56,189,248,0.12));
color: var(--ds-text1);
border-color: var(--ds-border-strong);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
/* =========================================================================
* Section blocks — systematic color coding
* ========================================================================= */
.ds-section {
margin: 26px 0;
padding: 22px 26px;
border-radius: var(--ds-radius-lg);
background: var(--ds-surface);
border: 1px solid var(--ds-border);
}
.ds-section > h2 {
font-family: var(--ds-bebas);
font-size: 32px;
letter-spacing: 0.04em;
color: var(--ds-text1);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ds-border);
font-weight: 400;
}
.ds-section > h2 .ds-h2-hint {
display: block;
font-family: var(--ds-sans);
font-size: 16px;
font-weight: 500;
color: var(--ds-text3);
margin-top: 4px;
letter-spacing: 0;
}
.ds-section p,
.ds-section li {
font-size: 16px;
color: var(--ds-text2);
line-height: 1.7;
}
.ds-section ul, .ds-section ol { padding-left: 22px; margin: 10px 0; }
.ds-section li { margin: 6px 0; }
/* Section color family: apply by adding .ds-section-- */
.ds-section--key { background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(167,139,250,0.08));
border-color: rgba(236,72,153,0.35); }
.ds-section--key > h2 { color: var(--ds-pink); border-color: rgba(236,72,153,0.3); }
.ds-section--summary { background: linear-gradient(135deg, rgba(0,229,180,0.10), rgba(56,189,248,0.06));
border-color: rgba(0,229,180,0.35); }
.ds-section--summary > h2 { color: var(--ds-teal); border-color: rgba(0,229,180,0.3); }
.ds-section--purpose { background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(3,7,14,0)); border-color: rgba(56,189,248,0.28); }
.ds-section--purpose > h2 { color: var(--ds-blue); border-color: rgba(56,189,248,0.28); }
.ds-section--role { background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(3,7,14,0)); border-color: rgba(167,139,250,0.28); }
.ds-section--role > h2 { color: var(--ds-purple); border-color: rgba(167,139,250,0.28); }
.ds-section--audience { background: linear-gradient(135deg, rgba(252,211,77,0.06), rgba(3,7,14,0)); border-color: rgba(252,211,77,0.28); }
.ds-section--audience > h2 { color: var(--ds-amber); border-color: rgba(252,211,77,0.28); }
.ds-section--reading { background: rgba(56,189,248,0.04); border-color: rgba(56,189,248,0.22); }
.ds-section--reading > h2 { color: var(--ds-blue); }
.ds-section--missing { background: linear-gradient(135deg, rgba(251,113,133,0.08), rgba(3,7,14,0));
border-color: rgba(251,113,133,0.35); }
.ds-section--missing > h2 { color: var(--ds-rose); border-color: rgba(251,113,133,0.3); }
.ds-section--glossary { background: var(--ds-surface2); border-color: var(--ds-border); }
.ds-section--references{ background: var(--ds-surface2); border-color: var(--ds-border); }
.ds-section--checklist { background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(3,7,14,0));
border-color: rgba(52,211,153,0.32); }
.ds-section--checklist > h2 { color: var(--ds-green); border-color: rgba(52,211,153,0.3); }
.ds-section--changelog { background: var(--ds-surface2); border-color: var(--ds-border); }
.ds-section--export { background: rgba(252,211,77,0.05); border-color: rgba(252,211,77,0.25); }
.ds-section--export > h2 { color: var(--ds-amber); }
.ds-section--notes { background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(56,189,248,0.06));
border-color: rgba(167,139,250,0.35); }
.ds-section--notes > h2 { color: var(--ds-purple); border-color: rgba(167,139,250,0.3); }
/* Key cards — brighter, more prominent */
.ds-keycard {
padding: 18px 22px;
border-radius: var(--ds-radius);
background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(0,229,180,0.10));
border: 1px solid rgba(236,72,153,0.40);
box-shadow: 0 8px 24px rgba(236,72,153,0.12);
margin: 10px 0;
}
.ds-keycard strong { color: var(--ds-text1); font-weight: 700; }
/* Reading flow blocks — before / next */
.ds-reading-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 14px;
margin: 14px 0;
}
.ds-reading-block {
padding: 16px 20px;
border-radius: var(--ds-radius);
background: var(--ds-surface2);
border: 1px solid var(--ds-border);
}
.ds-reading-block .ds-rb-label {
font: 700 14px var(--ds-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-text3);
margin-bottom: 8px;
display: block;
}
.ds-reading-block.before .ds-rb-label { color: var(--ds-blue); }
.ds-reading-block.next .ds-rb-label { color: var(--ds-teal); }
.ds-reading-block ul { margin: 0; padding-left: 20px; }
.ds-reading-block li a {
color: var(--ds-text1);
text-decoration: none;
border-bottom: 1px dashed rgba(148,163,184,0.3);
}
.ds-reading-block li a:hover { color: var(--ds-teal); }
/* Related docs — chip style */
.ds-related {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ds-related a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--ds-radius-sm);
background: rgba(0,229,180,0.06);
border: 1px solid rgba(0,229,180,0.28);
color: var(--ds-teal);
font: 600 14px var(--ds-mono);
letter-spacing: 0.04em;
text-decoration: none;
}
.ds-related a:hover { background: rgba(0,229,180,0.12); }
/* Glossary definition list */
.ds-glossary { display: grid; gap: 10px; }
.ds-glossary-item {
display: grid;
grid-template-columns: 200px 1fr;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed var(--ds-border);
font-size: 16px;
}
.ds-glossary-item dt {
font: 700 16px var(--ds-mono);
letter-spacing: 0.04em;
color: var(--ds-amber);
}
.ds-glossary-item dd { color: var(--ds-text2); margin: 0; }
@media (max-width: 640px) { .ds-glossary-item { grid-template-columns: 1fr; } }
/* Tables */
.ds-page table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
margin: 12px 0;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius);
overflow: hidden;
}
.ds-page table th,
.ds-page table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--ds-border);
vertical-align: top;
color: var(--ds-text2);
}
.ds-page table th {
background: var(--ds-surface2);
font: 700 14px var(--ds-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-text1);
}
.ds-page table tr:last-child td { border-bottom: none; }
/* Code */
.ds-page code {
font-family: var(--ds-mono);
font-size: 15px;
background: rgba(0,229,180,0.08);
padding: 2px 7px;
border-radius: 4px;
color: var(--ds-teal);
border: 1px solid rgba(0,229,180,0.20);
}
/* Export affordance block */
.ds-export-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.ds-export-row button,
.ds-export-row a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: var(--ds-radius-sm);
background: rgba(252,211,77,0.08);
border: 1px solid rgba(252,211,77,0.35);
color: var(--ds-amber);
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.ds-export-row button:hover,
.ds-export-row a:hover { background: rgba(252,211,77,0.16); }
/* Print-friendly mode — triggered by .ds-print-mode class on body or media print */
@media print {
.ds-topbar, .ds-modeswitch, .ds-tabs, .ds-export-row, .ds-notes-new { display: none !important; }
.ds-page {
background: white !important;
color: black !important;
}
.ds-section { background: white !important; border-color: #ddd !important; color: black !important; page-break-inside: avoid; }
.ds-section > h2 { color: black !important; border-color: #ccc !important; }
.ds-identity h1 { -webkit-text-fill-color: black !important; background: none !important; color: black !important; }
.ds-tabpanel { display: block !important; }
}
/* =========================================================================
* Notes / Requirements system
* ========================================================================= */
.ds-notes-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
padding: 12px 16px;
border-radius: var(--ds-radius);
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.25);
}
.ds-notes-meta .ds-nm-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.ds-notes-meta .ds-nm-k {
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text3);
}
.ds-notes-meta .ds-nm-v {
font: 700 18px var(--ds-mono);
font-variant-numeric: tabular-nums;
color: var(--ds-text1);
}
.ds-notes-meta .ds-nm-v.ok { color: var(--ds-green); }
.ds-notes-meta .ds-nm-v.warn { color: var(--ds-amber); }
.ds-notes-meta .ds-nm-v.crit { color: var(--ds-rose); }
.ds-notes-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
align-items: center;
}
.ds-notes-toolbar .ds-sort {
display: inline-flex;
gap: 6px;
padding: 4px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
}
.ds-notes-toolbar .ds-sort button {
padding: 6px 12px;
background: transparent;
border: none;
color: var(--ds-text3);
font: 700 14px var(--ds-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
border-radius: 6px;
}
.ds-notes-toolbar .ds-sort button.on {
background: rgba(0,229,180,0.12);
color: var(--ds-teal);
}
.ds-notes-new {
margin: 14px 0;
padding: 16px 18px;
border-radius: var(--ds-radius);
background: rgba(255,255,255,0.04);
border: 1px dashed var(--ds-border-strong);
}
.ds-notes-new label {
display: block;
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text3);
margin-bottom: 4px;
}
.ds-notes-new input[type="text"],
.ds-notes-new textarea,
.ds-notes-new select {
width: 100%;
padding: 10px 14px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
color: var(--ds-text1);
font: 500 16px var(--ds-sans);
margin-bottom: 10px;
}
.ds-notes-new textarea { min-height: 84px; resize: vertical; }
.ds-notes-new .ds-nn-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.ds-notes-new button.ds-submit {
padding: 10px 20px;
border-radius: var(--ds-radius-sm);
background: linear-gradient(135deg, var(--ds-teal), var(--ds-blue));
color: #0a1020;
border: none;
font: 700 15px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.ds-notes-list { display: grid; gap: 10px; }
.ds-note {
padding: 14px 16px;
border-radius: var(--ds-radius);
background: var(--ds-surface);
border: 1px solid var(--ds-border);
/* Note text is 14pt per user spec */
font-size: 14px;
}
.ds-note.resolved {
background: rgba(52,211,153,0.05);
border-color: rgba(52,211,153,0.28);
}
.ds-note.resolved .ds-note-title { text-decoration: line-through; color: var(--ds-text3); }
.ds-note-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.ds-note-title {
font: 700 16px var(--ds-sans);
color: var(--ds-text1);
flex: 1;
min-width: 200px;
}
.ds-note-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-note-pill {
display: inline-flex;
padding: 2px 8px;
border-radius: 4px;
font: 700 12px var(--ds-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid;
}
.ds-note-pill--open { background: rgba(56,189,248,0.08); color: var(--ds-blue); border-color: rgba(56,189,248,0.30); }
.ds-note-pill--triaged { background: rgba(167,139,250,0.08); color: var(--ds-purple); border-color: rgba(167,139,250,0.30); }
.ds-note-pill--review { background: rgba(252,211,77,0.08); color: var(--ds-amber); border-color: rgba(252,211,77,0.30); }
.ds-note-pill--planned { background: rgba(252,211,77,0.08); color: var(--ds-amber); border-color: rgba(252,211,77,0.30); }
.ds-note-pill--progress { background: rgba(236,72,153,0.08); color: var(--ds-pink); border-color: rgba(236,72,153,0.30); }
.ds-note-pill--done { background: rgba(52,211,153,0.10); color: var(--ds-green); border-color: rgba(52,211,153,0.35); }
.ds-note-pill--deferred { background: rgba(148,163,184,0.10); color: var(--ds-text3); border-color: rgba(148,163,184,0.30); }
.ds-note-pill--rejected { background: rgba(251,113,133,0.08); color: var(--ds-rose); border-color: rgba(251,113,133,0.30); }
.ds-note-pill--type { background: rgba(255,255,255,0.05); color: var(--ds-text2); border-color: var(--ds-border); }
.ds-note-pill--priority-P0{ background: rgba(251,113,133,0.14); color: var(--ds-rose); border-color: rgba(251,113,133,0.40); }
.ds-note-pill--priority-P1{ background: rgba(252,211,77,0.10); color: var(--ds-amber); border-color: rgba(252,211,77,0.35); }
.ds-note-pill--priority-P2{ background: rgba(56,189,248,0.08); color: var(--ds-blue); border-color: rgba(56,189,248,0.30); }
.ds-note-pill--priority-P3{ background: rgba(148,163,184,0.08); color: var(--ds-text3); border-color: rgba(148,163,184,0.30); }
.ds-note-body {
color: var(--ds-text2);
line-height: 1.65;
margin: 6px 0;
font-size: 14px;
}
.ds-note-foot {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
font: 500 12px var(--ds-mono);
letter-spacing: 0.04em;
color: var(--ds-text3);
}
.ds-note-foot .ds-note-actions button {
padding: 4px 10px;
background: transparent;
border: 1px solid var(--ds-border);
border-radius: 4px;
color: var(--ds-text3);
font: 700 12px var(--ds-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
margin-left: 4px;
}
.ds-note-foot .ds-note-actions button:hover {
border-color: var(--ds-border-strong);
color: var(--ds-text1);
}
.ds-note-foot .ds-note-actions button.mark-done {
background: rgba(52,211,153,0.10);
color: var(--ds-green);
border-color: rgba(52,211,153,0.30);
}
.ds-note-honest {
margin-top: 14px;
padding: 10px 14px;
border-radius: var(--ds-radius-sm);
background: rgba(251,113,133,0.05);
border: 1px dashed rgba(251,113,133,0.30);
font-size: 14px;
color: var(--ds-rose);
line-height: 1.6;
}
/* =========================================================================
* Mode + tab panel visibility
* ========================================================================= */
.ds-tabpanel { display: none; }
.ds-tabpanel.on { display: block; }
/* =========================================================================
* Smaller screens
* ========================================================================= */
@media (max-width: 760px) {
.ds-identity { padding: 20px; }
.ds-identity h1 { font-size: 44px; }
.ds-section { padding: 18px; }
.ds-section > h2 { font-size: 26px; }
.ds-topbar { flex-wrap: wrap; }
}
/* =========================================================================
* Batch 7 extensions — Access / Share / Stakeholder / Language
* Appended; prior rules untouched.
* ========================================================================= */
/* Access / visibility section family */
.ds-section--access {
background: linear-gradient(135deg, rgba(252,211,77,0.08), rgba(56,189,248,0.06));
border-color: rgba(252,211,77,0.30);
}
.ds-section--access > h2 { color: var(--ds-amber); }
.ds-section--share {
background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(167,139,250,0.06));
border-color: rgba(56,189,248,0.32);
}
.ds-section--share > h2 { color: var(--ds-blue); }
.ds-section--stakeholder {
background: rgba(236,72,153,0.04);
border-color: rgba(236,72,153,0.25);
}
.ds-section--stakeholder > h2 { color: var(--ds-pink); }
/* Access badges added to identity */
.ds-badge--access-visible { background: rgba(52,211,153,0.10); color: var(--ds-green); border-color: rgba(52,211,153,0.35); }
.ds-badge--access-restricted { background: rgba(252,211,77,0.10); color: var(--ds-amber); border-color: rgba(252,211,77,0.35); }
.ds-badge--access-hidden { background: rgba(148,163,184,0.10);color: var(--ds-text3); border-color: rgba(148,163,184,0.35); }
.ds-badge--access-denied { background: rgba(251,113,133,0.10);color: var(--ds-rose); border-color: rgba(251,113,133,0.35); }
/* User panel — placed in topbar quick area or as a top block */
.ds-user-panel {
padding: 16px 20px;
border-radius: var(--ds-radius);
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.28);
margin: 14px 0;
}
.ds-user-panel .ds-user-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 8px;
}
.ds-user-panel .ds-user-current {
font: 700 16px var(--ds-mono);
color: var(--ds-text1);
letter-spacing: 0.04em;
}
.ds-user-panel .ds-user-current .ds-user-email {
color: var(--ds-purple);
}
.ds-user-panel .ds-user-meta {
font-size: 14px;
color: var(--ds-text3);
}
.ds-user-form {
display: grid;
grid-template-columns: 1fr 1fr 140px auto;
gap: 10px;
margin-top: 10px;
align-items: end;
}
@media (max-width: 760px) {
.ds-user-form { grid-template-columns: 1fr; }
}
.ds-user-form label {
display: block;
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text3);
margin-bottom: 4px;
}
.ds-user-form input,
.ds-user-form select {
width: 100%;
padding: 10px 12px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
color: var(--ds-text1);
font: 500 16px var(--ds-sans);
}
.ds-user-form button.ds-user-submit {
padding: 10px 18px;
background: linear-gradient(135deg, var(--ds-purple), var(--ds-blue));
color: #0a1020;
border: none;
border-radius: var(--ds-radius-sm);
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.ds-user-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.ds-user-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--ds-border);
color: var(--ds-text2);
font: 600 14px var(--ds-mono);
cursor: pointer;
}
.ds-user-pill.on {
background: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(56,189,248,0.12));
color: var(--ds-text1);
border-color: rgba(167,139,250,0.50);
}
.ds-user-pill .ds-user-email {
color: var(--ds-purple);
}
.ds-user-panel .ds-user-scaffold {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
background: rgba(251,113,133,0.06);
border: 1px dashed rgba(251,113,133,0.28);
font-size: 14px;
color: var(--ds-rose);
}
/* Access panel rendering */
.ds-access-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.ds-access-card {
padding: 14px 18px;
border-radius: var(--ds-radius);
background: var(--ds-surface);
border: 1px solid var(--ds-border);
}
.ds-access-card .ds-ac-k {
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text3);
}
.ds-access-card .ds-ac-v {
font-size: 16px;
color: var(--ds-text1);
margin-top: 4px;
}
.ds-access-banner {
margin: 14px 0;
padding: 14px 18px;
border-radius: var(--ds-radius);
font-size: 16px;
line-height: 1.65;
}
.ds-access-banner.restricted { background: rgba(252,211,77,0.10); border: 1px solid rgba(252,211,77,0.35); color: var(--ds-amber); }
.ds-access-banner.hidden-doc { background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.35); color: var(--ds-text2); }
.ds-access-banner.hidden-group{ background: rgba(100,116,139,0.10); border: 1px solid rgba(100,116,139,0.35); color: var(--ds-text2); }
.ds-access-banner.not-granted { background: rgba(251,113,133,0.10); border: 1px solid rgba(251,113,133,0.35); color: var(--ds-rose); }
/* Share row */
.ds-share-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0;
}
.ds-share-row button,
.ds-share-row a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: var(--ds-radius-sm);
background: rgba(56,189,248,0.08);
border: 1px solid rgba(56,189,248,0.35);
color: var(--ds-blue);
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.ds-share-row button:hover,
.ds-share-row a:hover { background: rgba(56,189,248,0.16); }
.ds-share-support-hint {
margin-top: 8px;
font-size: 14px;
color: var(--ds-text3);
font-family: var(--ds-mono);
}
/* Stakeholder filter */
.ds-stakeholder-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px;
border-radius: var(--ds-radius);
background: var(--ds-surface);
border: 1px solid var(--ds-border);
margin: 10px 0;
}
.ds-stakeholder-bar .ds-sf-label {
font: 700 14px var(--ds-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text3);
margin-right: 6px;
padding-top: 6px;
}
.ds-stakeholder-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--ds-border);
color: var(--ds-text2);
font: 600 14px var(--ds-sans);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.ds-stakeholder-chip:hover {
background: var(--ds-surface2);
color: var(--ds-text1);
border-color: var(--ds-border-strong);
}
.ds-stakeholder-chip.on {
background: linear-gradient(135deg, rgba(236,72,153,0.20), rgba(167,139,250,0.12));
color: var(--ds-text1);
border-color: rgba(236,72,153,0.45);
}
.ds-stakeholder-chip .ds-sf-count {
margin-left: 4px;
padding: 0 6px;
border-radius: 99px;
background: rgba(0,0,0,0.24);
color: var(--ds-text3);
font-size: 13px;
}
.ds-stakeholder-clear {
margin-left: auto;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--ds-border);
border-radius: 6px;
color: var(--ds-text3);
font: 600 14px var(--ds-mono);
cursor: pointer;
}
/* Language toggle in topbar */
.ds-lang-switch {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: var(--ds-radius-sm);
background: rgba(255,255,255,0.05);
border: 1px solid var(--ds-border);
}
.ds-lang-switch button {
padding: 6px 10px;
background: transparent;
border: none;
color: var(--ds-text3);
font: 700 13px var(--ds-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
}
.ds-lang-switch button.on {
background: rgba(0,229,180,0.14);
color: var(--ds-teal);
}
/* =========================================================================
* Batch 8 — Backend mode badge
* ========================================================================= */
.ds-mode-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--ds-border);
font: 700 13px var(--ds-mono);
letter-spacing: 0.06em;
color: var(--ds-text2);
}
.ds-mode-badge .ds-mode-dot {
width: 10px; height: 10px; border-radius: 99px;
box-shadow: 0 0 10px currentColor;
background: #64748B;
}
.ds-mode-badge .ds-mode-en { font-weight: 700; color: var(--ds-text1); letter-spacing: 0.08em; }
.ds-mode-badge .ds-mode-th { font-weight: 500; color: var(--ds-text3); letter-spacing: 0; font-family: var(--ds-sans); font-size: 14px; }