) */
width: 100%;
background: transparent;
border: 0.5px solid transparent;
text-align: left;
cursor: pointer;
font-family: inherit;
--child-color: #0E9F8B;
}
#ll-dashboard-v6 .llv6-family-row:hover {
background: rgba(14, 159, 139, 0.04);
border-color: rgba(14, 27, 61, 0.06);
}
#ll-dashboard-v6 .llv6-family-row.is-active {
background: #f8fafc;
border-color: var(--child-color);
box-shadow: inset 0 0 0 1px var(--child-color);
}
#ll-dashboard-v6 .llv6-family-row.is-active .llv6-family-name {
color: var(--child-color);
}
#ll-dashboard-v6 .llv6-family-active-tick {
margin-left: auto;
color: var(--child-color);
font-weight: 700;
font-size: 14px;
padding-left: 10px;
flex-shrink: 0;
}
/* ===================================================================
Phase B — Merit award workflow
------------------------------------------------------------------
Surfaces:
1. Star button on every entry card (outlined → filled gold)
2. Modal dialog over a soft overlay
3. Chip-row inside modal (with per-child weekly cap display)
4. One-time hint banner on Journal Entries view
=================================================================== */
/* Star button on entry cards -------------------------------------- */
#ll-dashboard-v6 .llv6-merit-star {
margin-left: auto;
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0.5px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
padding: 0;
}
#ll-dashboard-v6 .llv6-merit-star:hover {
background: rgba(176, 122, 32, 0.08);
border-color: rgba(176, 122, 32, 0.3);
transform: scale(1.08);
}
#ll-dashboard-v6 .llv6-merit-star.is-awarded {
background: rgba(176, 122, 32, 0.08);
}
#ll-dashboard-v6 .llv6-merit-star.is-awarded:hover {
background: rgba(176, 122, 32, 0.18);
}
/* Modal overlay + dialog ----------------------------------------- */
#ll-dashboard-v6 .llv6-merit-overlay {
position: fixed;
inset: 0;
background: rgba(14, 27, 61, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
animation: llv6-merit-fade 0.18s ease-out;
}
@keyframes llv6-merit-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Tab fix — when re-rendering while the download modal is already open
(chip taps on For Child / Date Range / Report Style), suppress the
overlay's fade so the modal doesn't flicker on every tap. Set by
dlmodSuppressAnim in render(). */
#ll-dashboard-v6 .llv6-merit-overlay.llv6-noanim {
animation: none;
}
#ll-dashboard-v6 .llv6-merit-dialog {
background: #ffffff;
border-radius: 18px;
width: 100%;
max-width: 480px;
box-shadow: 0 18px 50px rgba(14, 27, 61, 0.22);
overflow: hidden;
animation: llv6-merit-pop 0.22s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@keyframes llv6-merit-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#ll-dashboard-v6 .llv6-merit-head {
padding: 22px 24px 18px;
border-bottom: 1px solid #f1f5f9;
position: relative;
}
#ll-dashboard-v6 .llv6-merit-eyebrow {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(176, 122, 32, 0.08);
color: #B07A20;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-merit-title {
font-family: 'Outfit', sans-serif;
font-size: 22px;
font-weight: 700;
color: #0E1B3D;
line-height: 1.25;
margin: 0 30px 6px 0;
}
#ll-dashboard-v6 .llv6-merit-meta {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-merit-close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: #64748B;
font-size: 22px;
line-height: 1;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-merit-close:hover {
background: #f1f5f9;
color: #0E1B3D;
}
/* Modal body + chips --------------------------------------------- */
#ll-dashboard-v6 .llv6-merit-body {
padding: 20px 24px 8px;
}
#ll-dashboard-v6 .llv6-merit-prompt {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #344054;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-merit-chips {
display: grid;
gap: 8px;
}
#ll-dashboard-v6 .llv6-merit-chip {
--child-color: #0E9F8B;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #ffffff;
border: 0.5px solid #d0d5dd;
border-radius: 12px;
color: #344054;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-merit-chip:hover:not(:disabled) {
background: #f8fafc;
border-color: var(--child-color);
}
#ll-dashboard-v6 .llv6-merit-chip.is-active {
background: #f8fafc;
border-color: var(--child-color);
color: #0E1B3D;
font-weight: 600;
box-shadow: inset 0 0 0 1px var(--child-color);
}
#ll-dashboard-v6 .llv6-merit-chip.is-capped,
#ll-dashboard-v6 .llv6-merit-chip:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #f8fafc;
}
#ll-dashboard-v6 .llv6-merit-chip-dot {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--child-color);
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-merit-chip-name {
color: inherit;
}
#ll-dashboard-v6 .llv6-merit-chip-cap {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #64748B;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-merit-chip.is-capped .llv6-merit-chip-cap {
color: #B07A20;
font-weight: 600;
}
/* Modal footer --------------------------------------------------- */
#ll-dashboard-v6 .llv6-merit-foot {
display: flex;
gap: 10px;
padding: 16px 24px 22px;
align-items: center;
}
#ll-dashboard-v6 .llv6-merit-revoke {
background: transparent;
border: 0;
color: #b91c1c;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 8px 4px;
margin-right: auto;
}
#ll-dashboard-v6 .llv6-merit-revoke:hover {
text-decoration: underline;
}
#ll-dashboard-v6 .llv6-merit-cancel {
background: transparent;
border: 0.5px solid #d0d5dd;
color: #344054;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 9px 18px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
#ll-dashboard-v6 .llv6-merit-cancel:hover {
background: #f8fafc;
border-color: #94a3b8;
}
#ll-dashboard-v6 .llv6-merit-confirm {
background: #0E1B3D;
border: 0;
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 9px 22px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
#ll-dashboard-v6 .llv6-merit-confirm:hover:not(:disabled) {
background: #1c2c5e;
box-shadow: 0 4px 12px rgba(14, 27, 61, 0.2);
}
#ll-dashboard-v6 .llv6-merit-confirm:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* "Move on, click ★" hint banner --------------------------------- */
#ll-dashboard-v6 .llv6-award-hint {
display: flex;
align-items: center;
gap: 12px;
background: rgba(176, 122, 32, 0.06);
border: 0.5px solid rgba(176, 122, 32, 0.25);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 14px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
line-height: 1.55;
}
#ll-dashboard-v6 .llv6-award-hint-icon {
font-size: 20px;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-award-hint-text {
flex: 1;
}
#ll-dashboard-v6 .llv6-award-hint-text strong {
color: #B07A20;
}
#ll-dashboard-v6 .llv6-award-hint-close {
background: transparent;
border: 0;
color: #64748B;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 999px;
transition: background 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-award-hint-close:hover {
background: rgba(14, 27, 61, 0.08);
color: #0E1B3D;
}
/* Ship 1 — Zero-child guard banner on Settings ------------------------
Sibling of .llv6-award-hint but in LifeLearn teal rather than brass-
gold to differentiate the two banners and tie to the dashboard's
primary CTA palette. */
#ll-dashboard-v6 .llv6-add-child-hint {
display: flex;
align-items: center;
gap: 12px;
background: rgba(14, 159, 139, 0.07);
border: 0.5px solid rgba(14, 159, 139, 0.3);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 14px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
line-height: 1.55;
}
#ll-dashboard-v6 .llv6-add-child-hint-icon {
font-size: 20px;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-add-child-hint-text {
flex: 1;
}
#ll-dashboard-v6 .llv6-add-child-hint-text strong {
color: #0B8676;
}
#ll-dashboard-v6 .llv6-add-child-hint-close {
background: transparent;
border: 0;
color: #64748B;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 999px;
transition: background 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-add-child-hint-close:hover {
background: rgba(14, 27, 61, 0.08);
color: #0E1B3D;
}
/* ===================================================================
Phase F4a-α — Backdating + entry linking
------------------------------------------------------------------
New Step 1 affordances:
1. wizDateField() — date picker with backdating window
2. wizLinkerField() — "Continue from previous" picker
Plus a small "Part of project · N entries" pill on entry cards.
=================================================================== */
/* Date field --------------------------------------------------- */
#ll-dashboard-v6 .llv6-wiz-date-row {
margin-top: 14px;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-wiz-date-lbl {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 600;
color: #344054;
margin-bottom: 8px;
letter-spacing: 0.2px;
}
#ll-dashboard-v6 .llv6-wiz-date-inp {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 0.5px solid #d0d5dd;
background: #ffffff
url("data:image/svg+xml;utf8,
")
no-repeat right 14px center;
background-size: 18px;
padding-right: 42px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #0E1B3D;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-date-inp:focus,
#ll-dashboard-v6 .llv6-wiz-date-inp.flatpickr-alt-input:focus {
outline: none;
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-wiz-date-hint {
margin-top: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #94a3b8;
}
/* Linker field -------------------------------------------------- */
#ll-dashboard-v6 .llv6-wiz-link-row {
margin-top: 18px;
}
#ll-dashboard-v6 .llv6-wiz-link-lbl {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 600;
color: #344054;
margin-bottom: 8px;
letter-spacing: 0.2px;
}
/* Collapsed "Continue from previous?" link */
#ll-dashboard-v6 .llv6-wiz-link-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
color: #0E9F8B;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 4px 0;
transition: color 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-link-toggle:hover {
color: #0B8676;
text-decoration: underline;
}
#ll-dashboard-v6 .llv6-wiz-link-icon {
font-size: 14px;
}
/* Search row (opened state) */
#ll-dashboard-v6 .llv6-wiz-link-search {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
#ll-dashboard-v6 .llv6-wiz-link-search-inp {
flex: 1;
padding: 10px 14px;
border-radius: 12px;
border: 0.5px solid #d0d5dd;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: #0E1B3D;
transition: border-color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-link-search-inp:focus {
outline: none;
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-wiz-link-close {
width: 38px;
background: transparent;
border: 0.5px solid #d0d5dd;
border-radius: 12px;
color: #64748B;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-link-close:hover {
background: #f8fafc;
border-color: #94a3b8;
color: #0E1B3D;
}
/* Result list */
#ll-dashboard-v6 .llv6-wiz-link-results {
display: grid;
gap: 6px;
max-height: 260px;
overflow-y: auto;
}
#ll-dashboard-v6 .llv6-wiz-link-result {
display: block;
width: 100%;
text-align: left;
padding: 10px 14px;
background: #ffffff;
border: 0.5px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-link-result:hover {
background: #f8fafc;
border-color: #0E9F8B;
}
#ll-dashboard-v6 .llv6-wiz-link-result-title {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0E1B3D;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-wiz-link-result-meta {
margin-top: 3px;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-wiz-link-empty {
padding: 16px;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #94a3b8;
background: #f8fafc;
border: 1px dashed #e5e7eb;
border-radius: 10px;
}
/* Compact linked-pill (post-selection) */
#ll-dashboard-v6 .llv6-wiz-link-pill {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(14, 159, 139, 0.06);
border: 0.5px solid rgba(14, 159, 139, 0.4);
border-radius: 12px;
}
#ll-dashboard-v6 .llv6-wiz-link-pill .llv6-wiz-link-icon {
color: #0E9F8B;
font-size: 16px;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-wiz-link-pill-meta {
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-wiz-link-pill-title {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0E1B3D;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-wiz-link-pill-date {
margin-top: 2px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-wiz-link-clear {
width: 28px;
height: 28px;
background: transparent;
border: 0;
color: #64748B;
font-size: 18px;
line-height: 1;
border-radius: 999px;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-wiz-link-clear:hover {
background: rgba(14, 27, 61, 0.08);
color: #0E1B3D;
}
/* Project pill on entry cards ------------------------------------ */
#ll-dashboard-v6 .llv6-project-pill-row {
display: flex;
margin: 6px 0 8px;
}
#ll-dashboard-v6 .llv6-project-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
border-radius: 999px;
background: rgba(14, 159, 139, 0.08);
border: 0.5px solid rgba(14, 159, 139, 0.35);
color: #0B8676;
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1px;
}
#ll-dashboard-v6 .llv6-project-pill-icon {
font-size: 12px;
flex-shrink: 0;
}
/* ===================================================================
Phase F4a-β — Photo upload pipeline
------------------------------------------------------------------
Two display modes:
1. Empty drop-zone (no photos, no in-flight uploads)
2. Grid mode (thumbnails + pending slots + Add-more tile)
The hidden file input is positioned off-screen but kept in the
DOM so screen-reader navigation can still focus it.
=================================================================== */
#ll-dashboard-v6 .llv6-photo-hidden-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Empty drop zone --------------------------------------------- */
#ll-dashboard-v6 .llv6-photo-zone {
border: 1.5px dashed #cbd5e1;
border-radius: 14px;
background: #f8fafc;
padding: 28px 20px;
text-align: center;
transition: background 0.18s, border-color 0.18s;
}
#ll-dashboard-v6 .llv6-photo-zone.is-drag-over {
background: rgba(14, 159, 139, 0.06);
border-color: #0E9F8B;
border-style: solid;
}
#ll-dashboard-v6 .llv6-photo-zone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 999px;
background: #ffffff;
border: 0.5px solid #e5e7eb;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-photo-zone-cta {
display: inline-block;
background: #0E1B3D;
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 10px 22px;
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-photo-zone-cta:hover {
background: #1c2c5e;
box-shadow: 0 4px 12px rgba(14, 27, 61, 0.2);
}
#ll-dashboard-v6 .llv6-photo-zone-hint {
margin-top: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #94a3b8;
}
/* Grid + thumbnails ------------------------------------------- */
#ll-dashboard-v6 .llv6-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
transition: background 0.18s;
padding: 6px;
border-radius: 12px;
border: 1.5px dashed transparent;
}
#ll-dashboard-v6 .llv6-photo-grid.is-drag-over {
background: rgba(14, 159, 139, 0.06);
border-color: #0E9F8B;
border-style: solid;
}
#ll-dashboard-v6 .llv6-photo-grid-hint {
margin-top: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #94a3b8;
padding: 0 6px;
}
#ll-dashboard-v6 .llv6-photo-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: #f1f5f9;
border: 0.5px solid #e5e7eb;
}
#ll-dashboard-v6 .llv6-photo-thumb.is-hero {
border-color: #0E9F8B;
box-shadow: inset 0 0 0 1px #0E9F8B;
}
#ll-dashboard-v6 .llv6-photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hero badge on first photo */
#ll-dashboard-v6 .llv6-photo-hero-badge {
position: absolute;
top: 6px;
left: 6px;
background: #0E1B3D;
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
pointer-events: none;
}
/* "Make hero" star on non-hero photos */
#ll-dashboard-v6 .llv6-photo-make-hero {
position: absolute;
top: 4px;
left: 4px;
width: 26px;
height: 26px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
color: #B07A20;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-photo-thumb:hover .llv6-photo-make-hero {
opacity: 1;
}
#ll-dashboard-v6 .llv6-photo-make-hero:hover {
background: #ffffff;
}
/* Remove × on every thumbnail (visible on hover) */
#ll-dashboard-v6 .llv6-photo-remove {
position: absolute;
top: 4px;
right: 4px;
width: 26px;
height: 26px;
border: 0;
border-radius: 999px;
background: rgba(14, 27, 61, 0.7);
color: #ffffff;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-photo-thumb:hover .llv6-photo-remove,
#ll-dashboard-v6 .llv6-photo-thumb.is-pending .llv6-photo-remove {
opacity: 1;
}
#ll-dashboard-v6 .llv6-photo-remove:hover {
background: #b91c1c;
}
/* Pending (compressing/uploading) thumbnail */
#ll-dashboard-v6 .llv6-photo-thumb.is-pending {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px dashed #cbd5e1;
color: #64748B;
gap: 6px;
padding: 8px;
}
#ll-dashboard-v6 .llv6-photo-thumb.is-pending.is-error {
border-color: #fca5a5;
background: #fef2f2;
color: #b91c1c;
}
#ll-dashboard-v6 .llv6-photo-pending-spinner {
width: 18px;
height: 18px;
border: 2px solid #cbd5e1;
border-top-color: #0E9F8B;
border-radius: 999px;
animation: llv6-photo-spin 0.7s linear infinite;
}
@keyframes llv6-photo-spin {
to { transform: rotate(360deg); }
}
#ll-dashboard-v6 .llv6-photo-pending-err {
font-size: 22px;
}
#ll-dashboard-v6 .llv6-photo-pending-label {
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
text-align: center;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-photo-pending-dismiss {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border: 0;
border-radius: 999px;
background: rgba(185, 28, 28, 0.85);
color: #ffffff;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
/* "Add more" tile (when below cap) */
#ll-dashboard-v6 .llv6-photo-add-tile {
aspect-ratio: 1 / 1;
background: #ffffff;
border: 1.5px dashed #cbd5e1;
border-radius: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #64748B;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-photo-add-tile:hover {
background: rgba(14, 159, 139, 0.06);
border-color: #0E9F8B;
color: #0B8676;
}
#ll-dashboard-v6 .llv6-photo-add-tile-plus {
font-size: 24px;
line-height: 1;
}
#ll-dashboard-v6 .llv6-photo-add-tile-label {
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
}
/* ===================================================================
Phase G3 — Entry deletion
------------------------------------------------------------------
Trash button: sits in the entry card title row next to the merit
star. Subtle by default (opacity 0.4), darkens to red on hover.
On touch devices (no hover) it stays at low opacity but is still
tappable.
Delete modal: reuses .llv6-merit-overlay / .llv6-merit-dialog
scaffolding but with a red destructive confirm button and a
simpler body (no chip grid).
=================================================================== */
#ll-dashboard-v6 .llv6-entry-del {
background: transparent;
border: 0;
padding: 4px;
margin-left: 2px;
color: #94a3b8;
cursor: pointer;
opacity: 0.45;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: opacity 0.15s, color 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-entry:hover .llv6-entry-del,
#ll-dashboard-v6 .llv6-entry-del:focus-visible {
opacity: 1;
}
#ll-dashboard-v6 .llv6-entry-del:hover {
color: #b91c1c;
background: rgba(185, 28, 28, 0.08);
opacity: 1;
}
#ll-dashboard-v6 .llv6-entry-del:focus-visible {
outline: 2px solid #b91c1c;
outline-offset: 2px;
}
/* Delete modal — destructive variant of the merit modal. */
#ll-dashboard-v6 .llv6-del-dialog {
max-width: 440px;
}
#ll-dashboard-v6 .llv6-del-eyebrow {
color: #b91c1c;
}
#ll-dashboard-v6 .llv6-del-body {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #334155;
line-height: 1.55;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-del-body strong {
color: #0E1B3D;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-del-photo-note {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #64748B;
background: #f8fafc;
border-left: 2px solid #cbd5e1;
padding: 8px 12px;
border-radius: 4px;
margin-top: 6px;
}
/* Destructive confirm button — red, sits in the merit-foot row. */
#ll-dashboard-v6 .llv6-del-confirm {
background: #b91c1c;
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 10px 22px;
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-del-confirm:hover {
background: #991b1b;
box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
#ll-dashboard-v6 .llv6-del-confirm:disabled {
background: #fca5a5;
cursor: wait;
box-shadow: none;
}
/* ===================================================================
Phase F4b — Gallery rebuild
------------------------------------------------------------------
Visual photo-forward browser. Search bar, filter chips with live
counts, responsive 3/2/1-column grid, hero+overlay-badge cards,
pagination, and a read-only preview modal.
=================================================================== */
/* ── Search bar ─────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-searchbar {
position: relative;
margin: 14px 0 10px;
display: flex;
align-items: center;
}
#ll-dashboard-v6 .llv6-gal-search-icon {
position: absolute;
left: 14px;
display: flex;
align-items: center;
pointer-events: none;
}
#ll-dashboard-v6 .llv6-gal-search-input {
flex: 1;
width: 100%;
padding: 11px 40px 11px 40px;
border: 0.5px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: #0E1B3D;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-gal-search-input::placeholder {
color: #94a3b8;
}
#ll-dashboard-v6 .llv6-gal-search-input:focus {
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-gal-search-clear {
position: absolute;
right: 10px;
width: 24px;
height: 24px;
border: 0;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: background 0.15s;
}
#ll-dashboard-v6 .llv6-gal-search-clear:hover {
background: #e2e8f0;
}
/* ── Filter chip row ────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-chip-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
#ll-dashboard-v6 .llv6-gal-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 1px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-gal-chip:hover {
border-color: #0E9F8B;
color: #0B8676;
}
#ll-dashboard-v6 .llv6-gal-chip.is-on {
background: #0E1B3D;
color: #ffffff;
border-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-gal-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #f1f5f9;
color: #64748B;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
#ll-dashboard-v6 .llv6-gal-chip.is-on .llv6-gal-chip-count {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
/* ── Grid ───────────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-gal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-gal-grid {
grid-template-columns: 1fr;
}
}
/* ── Card ───────────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-card {
background: #ffffff;
border: 0.5px solid #E5E7EB;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
display: flex;
flex-direction: column;
}
#ll-dashboard-v6 .llv6-gal-card:hover {
border-color: #0E9F8B;
box-shadow: 0 8px 24px rgba(14, 27, 61, 0.08);
transform: translateY(-2px);
}
#ll-dashboard-v6 .llv6-gal-card:focus-visible {
outline: 2px solid #0E9F8B;
outline-offset: 2px;
}
#ll-dashboard-v6 .llv6-gal-img {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #d4f1ec 0%, #b0e2da 100%);
overflow: hidden;
}
#ll-dashboard-v6 .llv6-gal-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#ll-dashboard-v6 .llv6-gal-empty {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Overlay badges on the photo (top corners) */
#ll-dashboard-v6 .llv6-gal-badges {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
#ll-dashboard-v6 .llv6-gal-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#ll-dashboard-v6 .llv6-gal-badge-merit {
margin-right: auto; /* sits left */
}
#ll-dashboard-v6 .llv6-gal-badge-record {
margin-left: auto; /* sits right */
}
#ll-dashboard-v6 .llv6-gal-body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
#ll-dashboard-v6 .llv6-gal-date {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.4px;
text-transform: uppercase;
}
#ll-dashboard-v6 .llv6-gal-title {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
color: #0E1B3D;
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-gal-pills {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-gal-more-subjs {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #94a3b8;
padding: 0 4px;
}
/* ── Pagination ─────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 8px 0 6px;
padding: 12px 0;
}
#ll-dashboard-v6 .llv6-gal-page-btn {
width: 36px;
height: 36px;
border: 0.5px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
color: #0E1B3D;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-gal-page-btn:hover:not(:disabled) {
background: #0E1B3D;
color: #ffffff;
border-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-gal-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-gal-page-indicator {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #475569;
min-width: 100px;
text-align: center;
}
/* ── Empty state ────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-gal-empty-state {
text-align: center;
padding: 56px 24px;
background: #ffffff;
border: 0.5px solid #E5E7EB;
border-radius: 14px;
}
#ll-dashboard-v6 .llv6-gal-empty-icon {
font-size: 44px;
margin-bottom: 14px;
opacity: 0.65;
}
#ll-dashboard-v6 .llv6-gal-empty-title {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 600;
color: #0E1B3D;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-gal-empty-body {
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: #64748B;
margin-bottom: 18px;
line-height: 1.55;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
#ll-dashboard-v6 .llv6-gal-empty-cta {
background: #0E1B3D;
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 11px 24px;
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-gal-empty-cta:hover {
background: #1c2c5e;
box-shadow: 0 4px 12px rgba(14, 27, 61, 0.2);
}
/* ── Detail preview modal ───────────────────────────────── */
#ll-dashboard-v6 .llv6-galmod-dialog {
background: #ffffff;
border-radius: 16px;
max-width: 640px;
width: calc(100% - 32px);
/* Cap the dialog and let the body scroll inside (see .llv6-galmod-body).
Keeps backdrop visible above and below, and pins the hero + actions. */
max-height: 88vh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 20px 60px rgba(14, 27, 61, 0.3);
}
#ll-dashboard-v6 .llv6-galmod-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#ll-dashboard-v6 .llv6-galmod-hero {
width: 100%;
aspect-ratio: 16 / 10;
/* Cap so the photo never eats more than half the viewport. */
max-height: 50vh;
flex: 0 0 auto;
background: #f1f5f9;
overflow: hidden;
position: relative;
}
#ll-dashboard-v6 .llv6-galmod-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Phase F4b polish — fade-in on every render of the hero
image. Since each thumbnail click triggers a full re-render
(creating a fresh
![]()
element), this keyframe fires both
on modal open and on photo swap, giving a soft crossfade
feel without any JS coordination. 200ms ease-out is fast
enough to feel responsive but slow enough to be perceived. */
animation: llv6-galmod-hero-fade 200ms ease-out;
}
@keyframes llv6-galmod-hero-fade {
from { opacity: 0; }
to { opacity: 1; }
}
#ll-dashboard-v6 .llv6-galmod-counter {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 11px;
border-radius: 999px;
background: rgba(14, 27, 61, 0.85);
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#ll-dashboard-v6 .llv6-galmod-strip {
display: flex;
gap: 6px;
padding: 10px 14px 4px;
overflow-x: auto;
}
#ll-dashboard-v6 .llv6-galmod-strip-thumb {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
border: 2px solid transparent;
background: #f1f5f9;
padding: 0;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s, opacity 0.15s;
opacity: 0.72;
}
#ll-dashboard-v6 .llv6-galmod-strip-thumb:hover {
opacity: 1;
transform: translateY(-1px);
}
#ll-dashboard-v6 .llv6-galmod-strip-thumb.is-active {
border-color: #0E9F8B;
opacity: 1;
}
#ll-dashboard-v6 .llv6-galmod-strip-thumb:focus-visible {
outline: 2px solid #0E9F8B;
outline-offset: 2px;
}
#ll-dashboard-v6 .llv6-galmod-strip-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#ll-dashboard-v6 .llv6-galmod-body {
padding: 20px 22px 24px;
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
#ll-dashboard-v6 .llv6-galmod-merit {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
margin-bottom: 8px;
border-radius: 999px;
background: rgba(176, 122, 32, 0.1);
color: #B07A20;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
}
#ll-dashboard-v6 .llv6-galmod-title {
font-family: 'Outfit', sans-serif;
font-size: 22px;
font-weight: 700;
color: #0E1B3D;
margin: 0 0 6px;
line-height: 1.25;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-galmod-record-pill {
font-size: 11px !important;
padding: 3px 9px !important;
vertical-align: middle;
}
#ll-dashboard-v6 .llv6-galmod-meta {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
margin-bottom: 14px;
}
#ll-dashboard-v6 .llv6-galmod-desc {
font-family: 'DM Sans', sans-serif;
font-size: 14.5px;
line-height: 1.65;
color: #334155;
margin: 12px 0;
}
#ll-dashboard-v6 .llv6-galmod-section {
margin-top: 14px;
}
#ll-dashboard-v6 .llv6-galmod-label {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-galmod-pillrow {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
#ll-dashboard-v6 .llv6-galmod-progress {
border-left: 2px solid #0E9F8B;
padding: 8px 12px;
background: rgba(14, 159, 139, 0.05);
border-radius: 4px;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: #0E1B3D;
line-height: 1.55;
font-style: italic;
}
/* Photo-count badge — bottom-right of the gallery card photo
area. Only rendered when an entry has 2+ photos. */
#ll-dashboard-v6 .llv6-gal-photocount {
position: absolute;
bottom: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
background: rgba(14, 27, 61, 0.82);
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
line-height: 1;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
#ll-dashboard-v6 .llv6-gal-photocount svg {
flex-shrink: 0;
}
/* ===================================================================
Phase F5a — My Record view + download modal
------------------------------------------------------------------
Layout:
- Child strip + range strip stacked at the top
- Custom date inputs slide in when range = custom
- Four-up stats summary row
- Generate report CTA
- Compact entries list (date stub + body)
- Legal note footer
Pre-download modal reuses the merit-overlay scaffold but adds
its own dialog styling for the filter sections and style picker.
=================================================================== */
/* ── Child + range chip strips ──────────────────────────── */
#ll-dashboard-v6 .llv6-rec-childstrip,
#ll-dashboard-v6 .llv6-rec-rangestrip {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 12px 0;
}
#ll-dashboard-v6 .llv6-rec-strip-label {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-right: 4px;
}
#ll-dashboard-v6 .llv6-rec-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-rec-chip:hover {
border-color: #0E9F8B;
color: #0B8676;
}
#ll-dashboard-v6 .llv6-rec-chip.is-on {
background: #0E1B3D;
color: #ffffff;
border-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-rec-chip-dot {
width: 8px;
height: 8px;
border-radius: 999px;
}
/* Custom date row ── */
#ll-dashboard-v6 .llv6-rec-customrow {
display: flex;
gap: 14px;
margin: 8px 0 14px;
padding: 12px 14px;
background: #f8fafc;
border: 0.5px solid #E5E7EB;
border-radius: 10px;
}
#ll-dashboard-v6 .llv6-rec-customlbl {
display: flex;
flex-direction: column;
gap: 4px;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.4px;
text-transform: uppercase;
}
#ll-dashboard-v6 .llv6-rec-customlbl input[type="date"] {
padding: 6px 10px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
cursor: pointer;
}
/* ── Stats summary row ──────────────────────────────────── */
#ll-dashboard-v6 .llv6-rec-statsrow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 14px 0;
}
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-rec-statsrow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
#ll-dashboard-v6 .llv6-rec-stat {
padding: 14px 16px;
background: #ffffff;
border: 0.5px solid #E5E7EB;
border-radius: 12px;
}
#ll-dashboard-v6 .llv6-rec-stat-num {
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
color: #0E1B3D;
line-height: 1.1;
}
#ll-dashboard-v6 .llv6-rec-stat-lbl {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
margin-top: 2px;
}
/* ── Generate-report CTA row ────────────────────────────── */
#ll-dashboard-v6 .llv6-rec-cta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 14px 18px;
margin: 14px 0;
background: linear-gradient(135deg, rgba(14, 159, 139, 0.06) 0%, rgba(14, 27, 61, 0.04) 100%);
border: 0.5px solid rgba(14, 159, 139, 0.25);
border-radius: 12px;
}
#ll-dashboard-v6 .llv6-rec-cta-period {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #475569;
}
#ll-dashboard-v6 .llv6-rec-cta-period strong {
color: #0E1B3D;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-rec-generate {
display: inline-flex;
align-items: center;
background: #0E9F8B;
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 10px 22px;
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-rec-generate:hover {
background: #0B8676;
box-shadow: 0 4px 14px rgba(14, 159, 139, 0.3);
}
#ll-dashboard-v6 .llv6-rec-generate:disabled {
background: #cbd5e1;
cursor: not-allowed;
box-shadow: none;
}
/* ── Entries list ───────────────────────────────────────── */
#ll-dashboard-v6 .llv6-rec-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-rec-row {
display: flex;
gap: 14px;
padding: 14px 16px;
background: #ffffff;
border: 0.5px solid #E5E7EB;
border-radius: 12px;
transition: border-color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-rec-row:hover {
border-color: #0E9F8B;
box-shadow: 0 2px 8px rgba(14, 159, 139, 0.1);
}
#ll-dashboard-v6 .llv6-rec-date {
flex-shrink: 0;
min-width: 60px;
text-align: center;
padding-right: 12px;
border-right: 1px solid #E5E7EB;
display: flex;
flex-direction: column;
justify-content: center;
}
#ll-dashboard-v6 .llv6-rec-date strong {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
color: #0E1B3D;
line-height: 1.1;
}
#ll-dashboard-v6 .llv6-rec-date span {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #94a3b8;
}
#ll-dashboard-v6 .llv6-rec-row-body {
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-rec-row-title {
font-family: 'Outfit', sans-serif;
font-size: 14.5px;
font-weight: 600;
color: #0E1B3D;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-rec-merit-mark {
color: #B07A20;
font-size: 13px;
margin-left: 4px;
}
#ll-dashboard-v6 .llv6-rec-row-desc {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #475569;
line-height: 1.5;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-rec-row-foot {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-rec-more {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #94a3b8;
}
#ll-dashboard-v6 .llv6-rec-row-dur {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
margin-left: auto;
}
/* ── Empty state for record view ────────────────────────── */
#ll-dashboard-v6 .llv6-rec-empty {
text-align: center;
padding: 36px 22px;
background: #ffffff;
border: 0.5px dashed #cbd5e1;
border-radius: 12px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-rec-empty-title {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 600;
color: #0E1B3D;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-rec-empty-body {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
line-height: 1.55;
max-width: 420px;
margin: 0 auto;
}
/* ── Legal note ─────────────────────────────────────────── */
#ll-dashboard-v6 .llv6-rec-legal {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
line-height: 1.55;
padding: 12px 14px;
background: #f8fafc;
border-left: 2px solid #cbd5e1;
border-radius: 4px;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-rec-legal strong {
color: #475569;
}
#ll-dashboard-v6 .llv6-rec-legal a {
color: #0E9F8B;
text-decoration: none;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-rec-legal a:hover {
text-decoration: underline;
}
/* ===================================================================
Phase F5a — Pre-download modal
=================================================================== */
#ll-dashboard-v6 .llv6-dlmod-dialog {
background: #ffffff;
border-radius: 16px;
max-width: 560px;
width: calc(100% - 32px);
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(14, 27, 61, 0.3);
}
#ll-dashboard-v6 .llv6-dlmod-head {
padding: 18px 22px 16px;
border-bottom: 0.5px solid #E5E7EB;
position: relative;
}
#ll-dashboard-v6 .llv6-dlmod-eyebrow {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #0E9F8B;
letter-spacing: 0.6px;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-dlmod-title {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 700;
color: #0E1B3D;
margin: 0 0 4px;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-dlmod-sub {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #64748B;
line-height: 1.5;
}
#ll-dashboard-v6 .llv6-dlmod-body {
padding: 18px 22px;
overflow-y: auto;
flex: 1;
}
#ll-dashboard-v6 .llv6-dlmod-section {
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-dlmod-section:last-child {
margin-bottom: 0;
}
#ll-dashboard-v6 .llv6-dlmod-label {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#ll-dashboard-v6 .llv6-dlmod-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-dlmod-chip:hover {
border-color: #0E9F8B;
color: #0B8676;
}
#ll-dashboard-v6 .llv6-dlmod-chip.is-on {
background: #0E1B3D;
color: #ffffff;
border-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-dlmod-customrow {
display: flex;
gap: 12px;
margin-top: 10px;
padding: 10px 12px;
background: #f8fafc;
border-radius: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-customrow label {
display: flex;
flex-direction: column;
gap: 3px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-dlmod-customrow input[type="date"] {
padding: 5px 8px;
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
}
#ll-dashboard-v6 .llv6-dlmod-rangelabel {
margin-top: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #0E9F8B;
font-weight: 500;
}
/* Style picker cards */
#ll-dashboard-v6 .llv6-dlmod-styles {
display: flex;
flex-direction: column;
gap: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-style {
position: relative;
text-align: left;
padding: 12px 44px 12px 14px; /* extra right padding reserves space for the active checkmark badge */
border: 1.5px solid #E5E7EB;
border-radius: 10px;
background: #ffffff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* Hover state — deliberately softer than active so the two can never
be confused. Teal hint at 45% opacity, almost no background tint. */
#ll-dashboard-v6 .llv6-dlmod-style:hover:not(:disabled):not(.is-on) {
border-color: rgba(14, 159, 139, 0.45);
background: rgba(14, 159, 139, 0.02);
}
/* Active state — full teal border, stronger background, and an
unmistakable filled checkmark badge in the corner. Bumped to 2px
border so it visibly thickens on selection. */
#ll-dashboard-v6 .llv6-dlmod-style.is-on {
border-color: #0E9F8B;
border-width: 2px;
padding: 11.5px 43.5px 11.5px 13.5px; /* compensate for border-width change so layout doesn't jump */
background: rgba(14, 159, 139, 0.08);
box-shadow: 0 1px 4px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-dlmod-style.is-on::after {
content: '✓';
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 999px;
background: #0E9F8B;
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 22px;
text-align: center;
}
#ll-dashboard-v6 .llv6-dlmod-style.is-soon {
opacity: 0.55;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-dlmod-style-name {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0E1B3D;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-style-desc {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #64748B;
line-height: 1.45;
}
#ll-dashboard-v6 .llv6-dlmod-soonpill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #f1f5f9;
color: #64748B;
font-family: 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Parent details review */
#ll-dashboard-v6 .llv6-dlmod-details {
padding: 12px 14px;
background: #f8fafc;
border: 0.5px solid #E5E7EB;
border-radius: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-detail-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 4px 0;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
}
#ll-dashboard-v6 .llv6-dlmod-detail-lbl {
min-width: 70px;
color: #64748B;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-dlmod-detail-val {
color: #0E1B3D;
flex: 1;
word-break: break-word;
}
#ll-dashboard-v6 .llv6-dlmod-edit-link {
display: inline-block;
margin-top: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #0E9F8B;
cursor: pointer;
background: none;
border: 0;
padding: 0;
text-decoration: none;
}
#ll-dashboard-v6 .llv6-dlmod-edit-link:hover {
text-decoration: underline;
}
/* Warning blocks */
#ll-dashboard-v6 .llv6-dlmod-warnings {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 14px;
}
#ll-dashboard-v6 .llv6-dlmod-warning {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 12px;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
line-height: 1.45;
}
#ll-dashboard-v6 .llv6-dlmod-warning.is-error {
background: rgba(185, 28, 28, 0.06);
color: #991b1b;
border-left: 2px solid #b91c1c;
}
#ll-dashboard-v6 .llv6-dlmod-warning.is-soft {
background: rgba(176, 122, 32, 0.06);
color: #92400e;
border-left: 2px solid #B07A20;
}
#ll-dashboard-v6 .llv6-dlmod-warning-icon {
flex-shrink: 0;
font-size: 13px;
}
/* Footer */
#ll-dashboard-v6 .llv6-dlmod-foot {
padding: 14px 22px;
border-top: 0.5px solid #E5E7EB;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #fcfcfd;
}
#ll-dashboard-v6 .llv6-dlmod-help {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #0E9F8B;
text-decoration: none;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-dlmod-help:hover {
text-decoration: underline;
}
#ll-dashboard-v6 .llv6-dlmod-foot-btns {
display: flex;
gap: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-confirm {
background: #0E9F8B;
color: #ffffff;
border: 0;
border-radius: 999px;
padding: 10px 22px;
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-dlmod-confirm:hover:not(:disabled) {
background: #0B8676;
box-shadow: 0 4px 12px rgba(14, 159, 139, 0.3);
}
#ll-dashboard-v6 .llv6-dlmod-confirm:disabled {
background: #cbd5e1;
cursor: not-allowed;
box-shadow: none;
}
/* ===================================================================
Ship B — Download modal: print controls (toggles + date mode)
------------------------------------------------------------------
Three boolean toggle rows (time / photos / threads) stacked, then
a small "Entry dates" sub-section reusing the .llv6-dlmod-chips
pattern. The toggle pill itself is the existing .llv6-toggle base
class — no new switch styling here, only the row layout.
=================================================================== */
#ll-dashboard-v6 .llv6-dlmod-toggles {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
#ll-dashboard-v6 .llv6-dlmod-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 13px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #ffffff;
}
#ll-dashboard-v6 .llv6-dlmod-toggle-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
#ll-dashboard-v6 .llv6-dlmod-toggle-text strong {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0E1B3D;
letter-spacing: -0.1px;
}
#ll-dashboard-v6 .llv6-dlmod-toggle-hint {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #64748B;
line-height: 1.4;
}
#ll-dashboard-v6 .llv6-dlmod-datemode {
padding-top: 2px;
}
#ll-dashboard-v6 .llv6-dlmod-datemode-lbl {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
/* ===================================================================
Ship B — Download modal: per-entry checklist
------------------------------------------------------------------
Scrollable list of every in-record entry in the chosen date range.
Default ticked; unticked rows show a muted strike-through state.
Bulk row offers Tick all / Untick all.
=================================================================== */
#ll-dashboard-v6 .llv6-dlmod-count {
display: inline-block;
margin-left: 8px;
padding: 2px 9px 3px;
background: #0E1B3D;
color: #ffffff;
border-radius: 999px;
font-family: 'DM Sans', sans-serif;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: none;
vertical-align: 1px;
}
#ll-dashboard-v6 .llv6-dlmod-entries-bulk {
display: flex;
gap: 14px;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-dlmod-entries-bulk .llv6-link-btn {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 600;
padding: 4px 0;
text-decoration: underline;
text-underline-offset: 3px;
}
#ll-dashboard-v6 .llv6-dlmod-entries-bulk .llv6-link-btn:hover {
color: #0B8676;
}
#ll-dashboard-v6 .llv6-dlmod-entries {
display: flex;
flex-direction: column;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #ffffff;
max-height: 260px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 13px;
border-bottom: 1px solid #f1f3f6;
cursor: pointer;
transition: background 0.12s, opacity 0.15s;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row:last-child {
border-bottom: 0;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row:hover {
background: #fafbfc;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #0E9F8B;
margin: 0;
flex-shrink: 0;
cursor: pointer;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row.is-excluded {
opacity: 0.5;
}
#ll-dashboard-v6 .llv6-dlmod-entry-row.is-excluded .llv6-dlmod-entry-title {
text-decoration: line-through;
text-decoration-color: #94a3b8;
}
#ll-dashboard-v6 .llv6-dlmod-entry-meta {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
flex: 1;
}
#ll-dashboard-v6 .llv6-dlmod-entry-date {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
color: #64748B;
letter-spacing: 0.3px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
min-width: 58px;
}
#ll-dashboard-v6 .llv6-dlmod-entry-title {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-dlmod-entries-empty {
padding: 18px 14px;
background: #fafbfc;
border: 1px dashed #E5E7EB;
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
text-align: center;
font-style: italic;
}
/* ===================================================================
Phase F4c-a — Gallery preview modal: Edit action row
------------------------------------------------------------------
Sits at the bottom of the dialog, below the body content, with
a hairline divider so the action zone reads as distinct.
Uses LifeLearn teal for the Edit pill matching the rest of the
navy + teal palette.
=================================================================== */
#ll-dashboard-v6 .llv6-galmod-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px;
border-top: 0.5px solid #E5E7EB;
background: #fafbfc;
}
#ll-dashboard-v6 .llv6-galmod-edit-btn {
display: inline-flex;
align-items: center;
padding: 9px 20px;
background: #0E9F8B;
color: #ffffff;
border: 0;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-galmod-edit-btn:hover {
background: #0B8676;
box-shadow: 0 4px 12px rgba(14, 159, 139, 0.25);
}
#ll-dashboard-v6 .llv6-galmod-edit-btn:active {
transform: translateY(1px);
}
/* ===================================================================
Ship B — My Record: Project threads card
------------------------------------------------------------------
Sits between the CTA row and the entries list. Surfaces chains of
2+ linked entries (via "Continue from a previous activity"),
grouped by project_id, with the subjects woven through each one.
Teal accent only — echoes the linking metaphor and keeps the card
visually distinct from the standard rec rows below.
=================================================================== */
#ll-dashboard-v6 .llv6-rec-threads {
background: linear-gradient(180deg, #f7fdfc 0%, #ffffff 100%);
border: 1px solid rgba(14, 159, 139, 0.22);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 20px;
}
#ll-dashboard-v6 .llv6-rec-threads-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-rec-threads-title {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 600;
color: #0E1B3D;
margin: 0;
letter-spacing: -0.2px;
flex: 1;
}
#ll-dashboard-v6 .llv6-rec-threads-count {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
color: #0E9F8B;
padding: 3px 10px 4px;
background: rgba(14, 159, 139, 0.10);
border-radius: 999px;
letter-spacing: 0.2px;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-rec-threads-intro {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0 0 16px;
}
#ll-dashboard-v6 .llv6-rec-threads-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#ll-dashboard-v6 .llv6-rec-thread {
padding: 12px 14px;
background: #ffffff;
border: 1px solid #E5E7EB;
border-left: 3px solid #0E9F8B;
border-radius: 8px;
transition: box-shadow 0.15s, border-color 0.15s;
}
#ll-dashboard-v6 .llv6-rec-thread:hover {
box-shadow: 0 2px 8px rgba(14, 27, 61, 0.06);
border-color: #d1d5db;
border-left-color: #0E9F8B;
}
#ll-dashboard-v6 .llv6-rec-thread-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-rec-thread-name {
font-family: 'Outfit', sans-serif;
font-size: 14.5px;
font-weight: 600;
color: #0E1B3D;
letter-spacing: -0.1px;
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-rec-thread-meta {
font-family: 'DM Sans', sans-serif;
font-size: 11.5px;
color: #64748B;
letter-spacing: 0.2px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-rec-thread-subjects {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
/* ===================================================================
Ship 2 — Inline "+ Add a child" form
------------------------------------------------------------------
One shared form rendered either in the wizard chip row or the
cross-view filter strip. Visually compact so it doesn't dominate
the surrounding context — name field + colour swatches + actions,
nothing else. DOB and nickname are deferred to Settings (parent
can fill them later without blocking the in-flow capture).
=================================================================== */
/* "+ Add a child" chip variants — neutral outline rather than the
child-coloured pills around it, so it reads as an action not a
selection. Lives in both the wizard chip row (.llv6-wiz-child-chip
variant) and the filter strip (.llv6-filt-chip variant). */
#ll-dashboard-v6 .llv6-wiz-child-chip.llv6-wiz-child-addchip {
--child-color: transparent;
background: #ffffff;
border: 1px dashed #cbd5e1;
color: #475569;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-wiz-child-chip.llv6-wiz-child-addchip:hover {
border-color: #0E9F8B;
color: #0B8676;
background: #f7fdfc;
}
#ll-dashboard-v6 .llv6-wiz-child-chip.llv6-wiz-child-addchip .llv6-wiz-child-dot {
display: none;
}
#ll-dashboard-v6 .llv6-filt-chip.llv6-filt-chip-add {
background: #ffffff;
border: 1px dashed #cbd5e1;
color: #475569;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-filt-chip.llv6-filt-chip-add:hover {
border-color: #0E9F8B;
color: #0B8676;
background: #f7fdfc;
}
#ll-dashboard-v6 .llv6-filt-chip.llv6-filt-chip-add .llv6-filt-dot {
display: none;
}
/* The form panel itself — sits below the chip row in either context. */
#ll-dashboard-v6 .llv6-inline-child-form {
margin-top: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, #f7fdfc 0%, #ffffff 100%);
border: 1px solid rgba(14, 159, 139, 0.25);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
#ll-dashboard-v6 .llv6-inline-child-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-inline-child-lbl {
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.5px;
text-transform: uppercase;
min-width: 60px;
}
#ll-dashboard-v6 .llv6-inline-child-input {
flex: 1;
min-width: 0;
padding: 9px 12px;
border: 1px solid #E5E7EB;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #0E1B3D;
background: #ffffff;
transition: border-color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-inline-child-input:focus {
outline: none;
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.15);
}
#ll-dashboard-v6 .llv6-inline-child-input:disabled {
background: #f8fafc;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-inline-swatches {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
#ll-dashboard-v6 .llv6-inline-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px #E5E7EB;
cursor: pointer;
padding: 0;
transition: transform 0.12s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-inline-swatch:hover {
transform: scale(1.08);
}
#ll-dashboard-v6 .llv6-inline-swatch.is-active {
box-shadow: 0 0 0 2px #0E1B3D;
transform: scale(1.08);
}
#ll-dashboard-v6 .llv6-inline-child-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-inline-child-save {
padding: 8px 18px;
background: #0E9F8B;
color: #ffffff;
border: 0;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-inline-child-save:hover:not(:disabled) {
background: #0B8676;
box-shadow: 0 3px 10px rgba(14, 159, 139, 0.25);
}
#ll-dashboard-v6 .llv6-inline-child-save:disabled {
background: #cbd5e1;
cursor: not-allowed;
box-shadow: none;
}
#ll-dashboard-v6 .llv6-inline-child-cancel {
padding: 8px 16px;
background: transparent;
color: #64748B;
border: 1px solid #E5E7EB;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#ll-dashboard-v6 .llv6-inline-child-cancel:hover:not(:disabled) {
background: #f1f5f9;
color: #0E1B3D;
border-color: #cbd5e1;
}
#ll-dashboard-v6 .llv6-inline-child-cancel:disabled {
opacity: 0.6;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-inline-child-hint {
font-family: 'DM Sans', sans-serif;
font-size: 11.5px;
color: #64748B;
font-style: italic;
flex: 1;
text-align: right;
min-width: 200px;
}
/* ===================================================================
Ship 2 — Visually-hidden announcer (sr-only)
------------------------------------------------------------------
Standard screen-reader-only pattern. Used by the filter handler to
announce "Showing X only" / "Showing all children" without showing
anything on screen.
=================================================================== */
#ll-dashboard-v6 .llv6-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===================================================================
Ship 3 — Settings IA tab bar
------------------------------------------------------------------
Hairline-divider tab row between the live-changes banner and the
active pane. Active tab gets a 2px teal underline aligned with the
divider so the underline reads as "this tab's panel sits below."
Keyboard focus ring inside the tab (not on it) so it never breaks
the underline alignment. Mobile-friendly: tabs flex without
wrapping at typical breakpoints.
=================================================================== */
#ll-dashboard-v6 .llv6-set-tabs {
display: flex;
gap: 4px;
margin-bottom: 22px;
border-bottom: 1px solid #E5E7EB;
position: relative;
}
#ll-dashboard-v6 .llv6-set-tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 12px 18px;
margin-bottom: -1px;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 500;
color: #64748B;
cursor: pointer;
line-height: 1.4;
transition: color 0.15s, border-color 0.15s, background 0.15s;
border-radius: 6px 6px 0 0;
}
#ll-dashboard-v6 .llv6-set-tab:hover {
color: #0E1B3D;
background: rgba(14, 159, 139, 0.04);
}
#ll-dashboard-v6 .llv6-set-tab:focus {
outline: none;
}
#ll-dashboard-v6 .llv6-set-tab:focus-visible {
box-shadow: inset 0 0 0 2px rgba(14, 159, 139, 0.45);
}
#ll-dashboard-v6 .llv6-set-tab.is-active {
color: #0B8676;
font-weight: 600;
border-bottom-color: #0E9F8B;
background: transparent;
}
#ll-dashboard-v6 .llv6-set-tab.is-active:hover {
background: transparent;
}
#ll-dashboard-v6 .llv6-set-panel {
outline: none;
}
#ll-dashboard-v6 .llv6-set-panel:focus-visible {
box-shadow: 0 0 0 2px rgba(14, 159, 139, 0.18);
border-radius: 12px;
}
/* ===================================================================
Phase F4c-b — Print entry button (gallery preview modal)
------------------------------------------------------------------
Outlined ghost variant of .llv6-galmod-edit-btn so the two actions
read as different jobs at a glance: Edit (filled teal, primary)
and Print (outlined teal, secondary).
=================================================================== */
#ll-dashboard-v6 .llv6-galmod-print-btn {
display: inline-flex;
align-items: center;
padding: 9px 20px;
background: #ffffff;
color: #0B8676;
border: 1.5px solid #0E9F8B;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
#ll-dashboard-v6 .llv6-galmod-print-btn:hover {
background: #f1faf8;
color: #086D5F;
box-shadow: 0 3px 10px rgba(14, 159, 139, 0.15);
}
#ll-dashboard-v6 .llv6-galmod-print-btn:active {
transform: translateY(1px);
}
/* ===================================================================
Phase F8 — Calendar view (full rebuild)
------------------------------------------------------------------
Three regions: header (prev/next/today + month label), weekday
row (UK Monday-first), and the day grid itself. Days are square
buttons; entry presence shows as a small teal dot for a single
entry or a count pill for 2+. Today gets a navy fill; the
currently-selected day gets a teal fill that elevates slightly.
The selected-day panel reuses .llv6-card with its own internal
structure (head + count + list) and an empty state for days
with nothing on them.
=================================================================== */
#ll-dashboard-v6 .llv6-cal-card {
padding: 20px;
}
/* Header row */
#ll-dashboard-v6 .llv6-cal-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-cal-nav {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #0E1B3D;
border: 1px solid #E5E7EB;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
padding: 0;
}
#ll-dashboard-v6 .llv6-cal-nav:hover {
background: #F1FAF8;
border-color: #0E9F8B;
color: #0B8676;
}
#ll-dashboard-v6 .llv6-cal-month-label {
flex: 1;
margin: 0;
text-align: center;
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 600;
color: #0E1B3D;
letter-spacing: -0.2px;
}
#ll-dashboard-v6 .llv6-cal-today {
background: #ffffff;
color: #0B8676;
border: 1.5px solid #0E9F8B;
border-radius: 999px;
padding: 6px 14px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ll-dashboard-v6 .llv6-cal-today:hover:not(.is-current) {
background: #F1FAF8;
color: #086D5F;
}
#ll-dashboard-v6 .llv6-cal-today.is-current {
color: #94A3B8;
border-color: #E5E7EB;
cursor: default;
}
/* Weekday header */
#ll-dashboard-v6 .llv6-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-cal-weekday {
text-align: center;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 0;
}
/* Day grid */
#ll-dashboard-v6 .llv6-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
#ll-dashboard-v6 .llv6-cal-blank {
aspect-ratio: 1 / 1;
}
#ll-dashboard-v6 .llv6-cal-day {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: #ffffff;
border: 1px solid #F1F5F9;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
font-family: 'DM Sans', sans-serif;
color: #344054;
position: relative;
padding: 0;
}
#ll-dashboard-v6 .llv6-cal-day:hover {
background: #F8FAFB;
border-color: #CBD5E1;
}
#ll-dashboard-v6 .llv6-cal-day.has-entry {
background: #F1FAF8;
border-color: rgba(14, 159, 139, 0.2);
}
#ll-dashboard-v6 .llv6-cal-day.has-entry:hover {
background: #E6F6F2;
border-color: #0E9F8B;
}
#ll-dashboard-v6 .llv6-cal-day.is-today {
background: #0E1B3D;
color: #ffffff;
border-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-cal-day.is-today.has-entry {
background: #0E1B3D;
border-color: #0E9F8B;
}
#ll-dashboard-v6 .llv6-cal-day.is-today:hover {
background: #1A2548;
}
#ll-dashboard-v6 .llv6-cal-day.is-selected {
background: #0E9F8B;
color: #ffffff;
border-color: #0B8676;
box-shadow: 0 4px 12px rgba(14, 159, 139, 0.25);
transform: translateY(-1px);
}
#ll-dashboard-v6 .llv6-cal-day.is-selected:hover {
background: #0B8676;
}
#ll-dashboard-v6 .llv6-cal-day-num {
font-size: 14px;
font-weight: 500;
line-height: 1;
}
#ll-dashboard-v6 .llv6-cal-dot {
width: 5px;
height: 5px;
background: #0E9F8B;
border-radius: 50%;
display: block;
}
#ll-dashboard-v6 .llv6-cal-day.is-today .llv6-cal-dot,
#ll-dashboard-v6 .llv6-cal-day.is-selected .llv6-cal-dot {
background: #ffffff;
}
#ll-dashboard-v6 .llv6-cal-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
background: #0E9F8B;
color: #ffffff;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
#ll-dashboard-v6 .llv6-cal-day.is-today .llv6-cal-count {
background: #ffffff;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-cal-day.is-selected .llv6-cal-count {
background: #ffffff;
color: #0B8676;
}
/* Selected-day panel — header */
#ll-dashboard-v6 .llv6-cal-day-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-cal-day-title {
flex: 1;
margin: 0;
font-size: 16px;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-cal-day-close {
width: 28px;
height: 28px;
flex-shrink: 0;
background: transparent;
color: #64748B;
border: 0;
border-radius: 999px;
cursor: pointer;
font-size: 22px;
line-height: 1;
transition: background 0.15s, color 0.15s;
padding: 0;
}
#ll-dashboard-v6 .llv6-cal-day-close:hover {
background: #F1F5F9;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-cal-day-count {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
margin-bottom: 14px;
}
/* Selected-day panel — entry list */
#ll-dashboard-v6 .llv6-cal-day-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#ll-dashboard-v6 .llv6-cal-day-item {
margin: 0;
}
#ll-dashboard-v6 .llv6-cal-day-item-btn {
width: 100%;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
font-family: 'DM Sans', sans-serif;
}
#ll-dashboard-v6 .llv6-cal-day-item-btn:hover {
background: #F8FAFB;
border-color: #0E9F8B;
box-shadow: 0 2px 8px rgba(14, 27, 61, 0.06);
}
#ll-dashboard-v6 .llv6-cal-day-item-btn:active {
transform: translateY(1px);
}
#ll-dashboard-v6 .llv6-cal-day-item-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-cal-day-item-title {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0E1B3D;
line-height: 1.3;
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-cal-day-item-meta {
font-size: 12px;
color: #64748B;
margin-bottom: 2px;
}
#ll-dashboard-v6 .llv6-cal-day-item-subj {
font-size: 12px;
color: #94A3B8;
font-style: italic;
}
/* Empty state — day with no entries */
#ll-dashboard-v6 .llv6-cal-day-empty {
text-align: center;
padding: 24px 16px;
background: #F8FAFB;
border: 1px dashed #CBD5E1;
border-radius: 10px;
}
#ll-dashboard-v6 .llv6-cal-day-empty-icon {
font-size: 28px;
margin-bottom: 6px;
opacity: 0.6;
}
#ll-dashboard-v6 .llv6-cal-day-empty-text {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #64748B;
}
/* ===================================================================
Topbar interactive cells — click-to-cycle (WK + Lifelearner)
------------------------------------------------------------------
Both the WK and Lifelearner journey-items are interactive
(data-action="cycle-*" with role="button"). These rules add the
visual affordances — pointer cursor, subtle teal hover background,
focus ring for keyboard users — without disturbing the other
journey items.
=================================================================== */
#ll-dashboard-v6 .llv6-wk-cell,
#ll-dashboard-v6 .llv6-life-cell {
cursor: pointer;
border-radius: 8px;
transition: background 0.15s, box-shadow 0.15s;
padding-left: 6px;
padding-right: 6px;
margin-left: -6px;
margin-right: -6px;
}
#ll-dashboard-v6 .llv6-wk-cell:hover,
#ll-dashboard-v6 .llv6-life-cell:hover {
background: rgba(14, 159, 139, 0.06);
}
#ll-dashboard-v6 .llv6-wk-cell:active,
#ll-dashboard-v6 .llv6-life-cell:active {
background: rgba(14, 159, 139, 0.10);
}
#ll-dashboard-v6 .llv6-wk-cell:focus,
#ll-dashboard-v6 .llv6-life-cell:focus {
outline: none;
}
#ll-dashboard-v6 .llv6-wk-cell:focus-visible,
#ll-dashboard-v6 .llv6-life-cell:focus-visible {
box-shadow: 0 0 0 2px rgba(14, 159, 139, 0.45);
}
/* ===================================================================
Filter panel — Journal Entries view
------------------------------------------------------------------
Drops below the searchbar when the ☷ Filters button is toggled
on. Stacks vertically (3 sections: subject / range / flags) plus
an optional Clear all button. Chips share the visual language of
the record-view range chips so a parent who's used one already
recognises the other.
=================================================================== */
#ll-dashboard-v6 .llv6-ghost-btn.is-on {
background: rgba(14, 159, 139, 0.08);
border-color: rgba(14, 159, 139, 0.45);
color: #0B8676;
}
#ll-dashboard-v6 .llv6-filters-panel {
margin: 12px 0 16px;
padding: 16px 18px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 14px;
}
#ll-dashboard-v6 .llv6-flt-section {
display: flex;
flex-direction: column;
gap: 8px;
}
#ll-dashboard-v6 .llv6-flt-h {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748B;
margin: 0;
}
#ll-dashboard-v6 .llv6-flt-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#ll-dashboard-v6 .llv6-flt-chip {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 999px;
color: #334155;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
line-height: 1.4;
}
#ll-dashboard-v6 .llv6-flt-chip:hover {
border-color: #94A3B8;
background: #F1F5F9;
}
#ll-dashboard-v6 .llv6-flt-chip.is-on {
background: #0E9F8B;
border-color: #0B8676;
color: #FFFFFF;
}
#ll-dashboard-v6 .llv6-flt-chip.is-on:hover {
background: #0B8676;
border-color: #0B8676;
}
#ll-dashboard-v6 .llv6-flt-chip:focus {
outline: none;
}
#ll-dashboard-v6 .llv6-flt-chip:focus-visible {
box-shadow: 0 0 0 2px rgba(14, 159, 139, 0.45);
}
#ll-dashboard-v6 .llv6-flt-empty {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #94A3B8;
font-style: italic;
}
#ll-dashboard-v6 .llv6-flt-clear {
align-self: flex-start;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 6px 14px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 8px;
color: #64748B;
cursor: pointer;
margin-top: 4px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-flt-clear:hover {
background: #FEF2F2;
border-color: #FCA5A5;
color: #B91C1C;
}
#ll-dashboard-v6 .llv6-flt-clear:focus {
outline: none;
}
#ll-dashboard-v6 .llv6-flt-clear:focus-visible {
box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.55);
}
/* ============================================================
Dashboard hero — append to your live lifelearn-ui-v1.css.
Replaces the "Overview" h2 + greeting strip on the dashboard
view. (Topbar hide rules removed — topbar stays visible on
dashboard, matching the Journal Entries pattern.)
============================================================ */
/* Hero card */
#ll-dashboard-v6 .llv6-dh {
background: linear-gradient(135deg, #0E1B3D 0%, #0E9F8B 100%);
color: #fff;
border-radius: 16px;
padding: 28px 28px 22px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-dh-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-dh-greet {
flex: 1 1 220px;
min-width: 0;
}
#ll-dashboard-v6 .llv6-dh-period {
margin: 0;
font-size: 14px;
opacity: 0.78;
color: #fff;
}
#ll-dashboard-v6 .llv6-dh-name {
margin: 4px 0 0;
font-family: 'Outfit', sans-serif;
font-size: 34px;
font-weight: 800;
line-height: 1.05;
color: #fff;
letter-spacing: -0.5px;
}
/* Child filter chips (hero variant — dark-on-gradient) */
#ll-dashboard-v6 .llv6-dh-chips {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-dh-chip {
appearance: none;
border: 0;
cursor: pointer;
font: inherit;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 500;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
transition: background 0.15s ease;
}
#ll-dashboard-v6 .llv6-dh-chip:hover {
background: rgba(255, 255, 255, 0.22);
}
#ll-dashboard-v6 .llv6-dh-chip.is-active {
background: #10bfae;
color: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
/* Three flagship stat tiles */
#ll-dashboard-v6 .llv6-dh-stats {
display: flex;
gap: 28px;
flex-shrink: 0;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-dh-stat {
text-align: center;
}
#ll-dashboard-v6 .llv6-dh-num {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 32px;
font-weight: 800;
line-height: 1;
color: #fff;
letter-spacing: -0.5px;
}
#ll-dashboard-v6 .llv6-dh-num-lbl {
display: block;
font-size: 11px;
line-height: 1.3;
opacity: 0.72;
margin-top: 7px;
}
/* CTA row */
#ll-dashboard-v6 .llv6-dh-cta {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-dh-btn {
appearance: none;
border: 0;
cursor: pointer;
font: inherit;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 700;
padding: 11px 22px;
border-radius: 999px;
background: #10bfae;
color: #fff;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#ll-dashboard-v6 .llv6-dh-btn:hover {
background: #0d9f91;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
#ll-dashboard-v6 .llv6-dh-btn-icon {
font-size: 18px;
line-height: 1;
font-weight: 400;
}
#ll-dashboard-v6 .llv6-dh-cta-aside {
font-size: 12.5px;
opacity: 0.78;
color: #fff;
}
#ll-dashboard-v6 .llv6-dh-link {
appearance: none;
background: transparent;
border: 0;
color: #fff;
text-decoration: underline;
cursor: pointer;
font: inherit;
padding: 0;
font-size: inherit;
}
#ll-dashboard-v6 .llv6-dh-link:hover {
opacity: 0.85;
}
/* Mobile */
@media (max-width: 720px) {
#ll-dashboard-v6 .llv6-dh {
padding: 22px 20px 18px;
}
#ll-dashboard-v6 .llv6-dh-top {
flex-direction: column;
align-items: stretch;
gap: 18px;
}
#ll-dashboard-v6 .llv6-dh-stats {
justify-content: space-between;
gap: 12px;
}
#ll-dashboard-v6 .llv6-dh-num {
font-size: 26px;
}
#ll-dashboard-v6 .llv6-dh-name {
font-size: 28px;
}
}
/* ============================================================
Dashboard Section 4 — Child summary cards.
Append to your live lifelearn-ui-v1.css after the hero
additions. Replaces the visual chrome that the prior
"Your family" + "Record Summary" cards provided.
============================================================ */
/* Section wrapper */
#ll-dashboard-v6 .llv6-csum {
margin-top: 18px;
}
#ll-dashboard-v6 .llv6-csum-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-csum-title {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 700;
color: #0E1B3D;
margin: 0;
}
/* Grid: one card full-width for single child, 2-up for multi-child */
#ll-dashboard-v6 .llv6-csum-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
#ll-dashboard-v6 .llv6-csum-grid.is-multi {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Card */
#ll-dashboard-v6 .llv6-csum-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 18px 20px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#ll-dashboard-v6 .llv6-csum-card.is-active {
border-color: #10bfae;
box-shadow: 0 0 0 1px #10bfae;
}
/* Head row: avatar + meta + view button */
#ll-dashboard-v6 .llv6-csum-head-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-csum-avatar {
width: 48px;
height: 48px;
border-radius: 999px;
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 19px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-csum-meta {
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-csum-name {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
color: #0E1B3D;
line-height: 1.2;
}
#ll-dashboard-v6 .llv6-csum-sub {
color: #64748b;
font-size: 12.5px;
margin-top: 3px;
}
#ll-dashboard-v6 .llv6-csum-view {
appearance: none;
border: 0;
cursor: pointer;
font: inherit;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 500;
color: #0F6E56;
background: transparent;
padding: 6px 0;
white-space: nowrap;
transition: opacity 0.15s ease;
}
#ll-dashboard-v6 .llv6-csum-view:hover {
opacity: 0.7;
text-decoration: underline;
}
/* Stats row */
#ll-dashboard-v6 .llv6-csum-stats {
display: flex;
gap: 22px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
#ll-dashboard-v6 .llv6-csum-stat {
display: inline-flex;
align-items: center;
gap: 6px;
color: #475569;
font-size: 13px;
font-family: 'DM Sans', sans-serif;
}
#ll-dashboard-v6 .llv6-csum-stat strong {
color: #0E1B3D;
font-weight: 700;
}
/* Empty state — no children added yet */
#ll-dashboard-v6 .llv6-csum-empty {
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 14px;
padding: 22px 24px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-csum-empty-body {
flex: 1;
min-width: 240px;
}
#ll-dashboard-v6 .llv6-csum-empty-body strong {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 16px;
color: #0E1B3D;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-csum-empty-body p {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
#ll-dashboard-v6 .llv6-csum-empty-cta {
appearance: none;
border: 0;
cursor: pointer;
font: inherit;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 10px 18px;
border-radius: 999px;
background: #10bfae;
color: #fff;
transition: background 0.15s ease, transform 0.15s ease;
}
#ll-dashboard-v6 .llv6-csum-empty-cta:hover {
background: #0d9f91;
transform: translateY(-1px);
}
/* Mobile */
@media (max-width: 600px) {
#ll-dashboard-v6 .llv6-csum-card {
padding: 16px;
}
#ll-dashboard-v6 .llv6-csum-head-row {
gap: 12px;
}
#ll-dashboard-v6 .llv6-csum-view {
flex: 1 1 100%;
text-align: left;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-csum-stats {
gap: 16px;
}
}
/* ============================================================
Dashboard Section 3 — What's Next.
Append to your live lifelearn-ui-v1.css after the Section 4
child summary additions.
============================================================ */
/* What's Next card sits in the dashboard right column where
Quick Actions used to be. */
#ll-dashboard-v6 .llv6-wn-card {
padding: 18px;
}
#ll-dashboard-v6 .llv6-wn-prompts {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
/* Each prompt — full-width clickable row, icon left, text middle,
chevron right. Default state is subtle; primary prompt gets
the teal accent. */
#ll-dashboard-v6 .llv6-wn-prompt {
appearance: none;
width: 100%;
text-align: left;
background: #f8fafc;
border: 1px solid transparent;
border-radius: 12px;
padding: 12px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-family: 'DM Sans', sans-serif;
color: #334155;
font-size: 13.5px;
line-height: 1.4;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
#ll-dashboard-v6 .llv6-wn-prompt:hover {
background: #f1f5f9;
border-color: #e2e8f0;
}
#ll-dashboard-v6 .llv6-wn-prompt:active {
transform: scale(0.99);
}
/* Primary prompt — teal accent. Tinted background, teal text,
coloured icon disc. Always the first prompt in the cascade. */
#ll-dashboard-v6 .llv6-wn-prompt.is-primary {
background: #ccfbf1;
border-color: #99f6e4;
color: #04342C;
font-weight: 700;
}
#ll-dashboard-v6 .llv6-wn-prompt.is-primary:hover {
background: #99f6e4;
}
#ll-dashboard-v6 .llv6-wn-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: #fff;
color: #0F6E56;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #e2e8f0;
}
#ll-dashboard-v6 .llv6-wn-prompt.is-primary .llv6-wn-icon {
background: #fff;
color: #0F6E56;
border-color: transparent;
}
#ll-dashboard-v6 .llv6-wn-text {
flex: 1;
min-width: 0;
}
#ll-dashboard-v6 .llv6-wn-arrow {
color: #94a3b8;
font-size: 14px;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-wn-prompt.is-primary .llv6-wn-arrow {
color: #0F6E56;
}
/* Disclosure: full action list */
#ll-dashboard-v6 .llv6-wn-more {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
#ll-dashboard-v6 .llv6-wn-more > summary {
cursor: pointer;
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #64748b;
padding: 4px 0;
list-style: none;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
#ll-dashboard-v6 .llv6-wn-more > summary::-webkit-details-marker {
display: none;
}
#ll-dashboard-v6 .llv6-wn-more > summary::after {
content: "▾";
font-size: 10px;
color: #94a3b8;
transition: transform 0.15s ease;
}
#ll-dashboard-v6 .llv6-wn-more[open] > summary::after {
transform: rotate(180deg);
}
#ll-dashboard-v6 .llv6-wn-more > summary:hover {
color: #0F6E56;
}
#ll-dashboard-v6 .llv6-wn-more-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-top: 10px;
}
#ll-dashboard-v6 .llv6-wn-more-item {
appearance: none;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #475569;
text-align: left;
transition: background 0.15s ease, border-color 0.15s ease;
}
#ll-dashboard-v6 .llv6-wn-more-item:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
/* Mobile */
@media (max-width: 600px) {
#ll-dashboard-v6 .llv6-wn-card {
padding: 16px;
}
#ll-dashboard-v6 .llv6-wn-more-list {
grid-template-columns: 1fr;
}
}
/* ============================================================
Dashboard Section 6 — Cleanup pass.
Append to your live lifelearn-ui-v1.css after the previous
three additions files. Contains:
1. Soft subject pill palette (the JS already tags pills
with data-bucket — these rules are the visual half).
2. Bottom-row grid adjustment now that the row holds only
the Top Subjects donut + Time Engaged chart (mini-cal
and Today's Activity removed in the JS).
============================================================ */
/* ---- Soft subject pills ---- */
/* Default state — neutral warm gray for any subject not in the
bucket map. Specificity is bumped via the double-class +
attribute selector + #ll-dashboard-v6 wrapper so these rules
override the legacy navy .llv6-pill default. */
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft {
background: #F1EFE8;
color: #5F5E5A;
border: none;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="teal"] {
background: #E1F5EE;
color: #0F6E56;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="amber"] {
background: #FAEEDA;
color: #854F0B;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="blue"] {
background: #E6F1FB;
color: #185FA5;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="purple"] {
background: #EEEDFE;
color: #3C3489;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="coral"] {
background: #FAECE7;
color: #993C1D;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="green"] {
background: #EAF3DE;
color: #3B6D11;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="pink"] {
background: #FBEAF0;
color: #993556;
}
#ll-dashboard-v6 .llv6-pill.llv6-sub-soft[data-bucket="gray"] {
background: #F1EFE8;
color: #5F5E5A;
}
/* ---- Bottom-row insights grid ---- */
/* Insights row with three widgets: Top Subjects donut + Time
Engaged chart + Merit Summary donut. auto-fit + minmax(300px,
1fr) gives the two larger widgets their natural breathing room
side-by-side, and Merit Summary wraps to a second row at half-
width. Stacks to single column on narrow viewports. */
#ll-dashboard-v6 .llv6-dashboard-bottom {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
margin-top: 18px;
}
/* ============================================================
Dashboard premium polish.
Append to your live lifelearn-ui-v1.css after the previous
four additions files. Addresses:
1. Hero gradient — re-tuned to match the Library page's
subtle navy aesthetic. Teal demoted from end-stop to
radial corner accent + soft dot-grid pattern overlay
for premium texture.
2. Sidebar — gets the same navy gradient progression so
the two dark surfaces read as one design system.
3. Cards — universal soft shadow + consistent 14–16px
radius so the page reads as one rhythm.
4. Child summary card — more padding, larger avatar and
typography, wider stats gap.
5. Insights row — donut + time chart cards share padding
and header rhythm. Empty week-bars on the time chart
fade to a low opacity so the chart doesn't read as
"broken" when most weeks are blank.
============================================================ */
/* ---- Hero — subtle navy with teal corner accent ---- */
#ll-dashboard-v6 .llv6-dh {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at bottom right, rgba(14, 159, 139, 0.22) 0%, transparent 58%),
linear-gradient(148deg, #0A1530 0%, #0E1B3D 45%, #142849 100%);
padding: 36px 36px 28px;
border-radius: 18px;
box-shadow: 0 6px 22px rgba(14, 27, 61, 0.10);
}
/* Soft dot grid for premium texture — same understated
pattern the Library hero uses. */
#ll-dashboard-v6 .llv6-dh::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
z-index: 0;
}
#ll-dashboard-v6 .llv6-dh > * {
position: relative;
z-index: 1;
}
#ll-dashboard-v6 .llv6-dh-period {
font-size: 14px;
opacity: 0.72;
}
#ll-dashboard-v6 .llv6-dh-name {
font-size: 38px;
letter-spacing: -0.8px;
}
#ll-dashboard-v6 .llv6-dh-num {
font-size: 36px;
letter-spacing: -0.6px;
}
#ll-dashboard-v6 .llv6-dh-num-lbl {
font-size: 11.5px;
margin-top: 8px;
line-height: 1.35;
opacity: 0.68;
}
#ll-dashboard-v6 .llv6-dh-btn {
padding: 12px 26px;
font-size: 14.5px;
box-shadow: 0 4px 14px rgba(16, 191, 174, 0.28);
}
@media (max-width: 720px) {
#ll-dashboard-v6 .llv6-dh {
padding: 26px 22px 22px;
}
#ll-dashboard-v6 .llv6-dh-name {
font-size: 30px;
}
#ll-dashboard-v6 .llv6-dh-num {
font-size: 28px;
}
}
/* ---- Sidebar — matching navy depth ---- */
/* The previous flat navy felt disconnected from the hero's
richer surface. Same 3-stop gradient gives them a shared
visual register. */
#ll-dashboard-v6 .llv6-sidebar,
.llv6-sidebar {
background: linear-gradient(170deg, #0A1530 0%, #0E1B3D 55%, #142849 100%);
}
/* ---- Universal card lift ---- */
/* Replaces hairline-border-only treatment with a soft 1–2px
shadow. Imperceptible up close, lifts the cards off the
page when you scan the dashboard. */
#ll-dashboard-v6 .llv6-card {
border-radius: 14px;
box-shadow: 0 1px 3px rgba(14, 27, 61, 0.04), 0 1px 2px rgba(14, 27, 61, 0.02);
}
/* ---- Stat cards — gentle padding tune ---- */
#ll-dashboard-v6 .llv6-stat {
padding: 20px 20px 18px;
}
/* ---- Child summary card — premium spacing + scale ---- */
#ll-dashboard-v6 .llv6-csum {
margin-top: 22px;
}
#ll-dashboard-v6 .llv6-csum-card {
padding: 24px 26px;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(14, 27, 61, 0.04), 0 1px 2px rgba(14, 27, 61, 0.02);
}
#ll-dashboard-v6 .llv6-csum-avatar {
width: 54px;
height: 54px;
font-size: 21px;
}
#ll-dashboard-v6 .llv6-csum-name {
font-size: 19px;
}
#ll-dashboard-v6 .llv6-csum-sub {
font-size: 13px;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-csum-stats {
margin-top: 18px;
padding-top: 18px;
gap: 32px;
}
#ll-dashboard-v6 .llv6-csum-stat {
font-size: 13.5px;
}
#ll-dashboard-v6 .llv6-csum-stat strong {
font-size: 15px;
}
#ll-dashboard-v6 .llv6-csum-view {
font-size: 13px;
}
/* ---- Insights row — unified rhythm ---- */
#ll-dashboard-v6 .llv6-dashboard-bottom {
margin-top: 22px;
gap: 16px;
}
#ll-dashboard-v6 .llv6-dashboard-bottom > .llv6-card,
#ll-dashboard-v6 .llv6-dashboard-bottom > .llv6-row-span-card {
padding: 22px 24px;
border-radius: 16px;
}
/* Fade empty week-bars so a sparse Time Engaged chart doesn't
read as "broken". The JS sets every empty week to
style="height:6%" — the attribute selector targets exactly
that case without affecting active weeks. */
#ll-dashboard-v6 .llv6-time-bar[style*="height:6%"],
#ll-dashboard-v6 .llv6-time-bar[style*="height: 6%"] {
opacity: 0.25;
}
/* Honest empty state — when the parent has logged few weeks,
the summary numbers (Total / Weekly avg / Active weeks)
should feel warmer, not clinical. */
#ll-dashboard-v6 .llv6-time-summary {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
/* ============================================================
Merit Summary card — third column of the Insights row.
Conic-gradient mini-donut: teal #10bfae for "used", amber
#F59E0B for "remaining". Same visual pattern as Top Subjects
donut so the row reads as a coordinated trio of widgets.
Pairs with the meritSummaryCard() JS function. The dashboard-
bottom grid was bumped to 3 columns in this ship to fit it.
============================================================ */
#ll-dashboard-v6 .llv6-ms-card {
padding: 18px 20px;
}
#ll-dashboard-v6 .llv6-ms-meta {
font-size: 11.5px;
color: #94a3b8;
}
#ll-dashboard-v6 .llv6-ms-body {
display: flex;
align-items: center;
gap: 18px;
margin-top: 14px;
}
#ll-dashboard-v6 .llv6-ms-donut {
position: relative;
width: 86px;
height: 86px;
border-radius: 50%;
background: conic-gradient(#10bfae 0%, #10bfae var(--pct, 0%), #F59E0B var(--pct, 0%), #F59E0B 100%);
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-ms-donut::after {
content: '';
position: absolute;
inset: 13px;
background: #ffffff;
border-radius: 50%;
}
#ll-dashboard-v6 .llv6-ms-donut-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
line-height: 1.1;
}
#ll-dashboard-v6 .llv6-ms-donut-label strong {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
color: #0E1B3D;
letter-spacing: -0.3px;
}
#ll-dashboard-v6 .llv6-ms-donut-label span {
font-size: 9.5px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
#ll-dashboard-v6 .llv6-ms-legend {
display: flex;
flex-direction: column;
gap: 8px;
}
#ll-dashboard-v6 .llv6-ms-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #475569;
}
#ll-dashboard-v6 .llv6-ms-row strong {
color: #0E1B3D;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-ms-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-ms-dot-used {
background: #10bfae;
}
#ll-dashboard-v6 .llv6-ms-dot-remain {
background: #F59E0B;
}
#ll-dashboard-v6 .llv6-ms-link {
display: inline-block;
margin-top: 14px;
font-size: 12.5px;
}
/* Reflow to single column on narrow viewports so all three
widgets stack rather than getting crushed. */
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-dashboard-bottom {
grid-template-columns: 1fr;
}
}
/* ============================================================
Insights row layout fix.
.llv6-row-span-card was originally added to Top Subjects + Time
Engaged to span both columns of the old 2-column dashboard-bottom
(producing a vertical stack). Now the grid is 3 columns and we
want all three widgets side-by-side as a trio, so override the
row-span back to natural single-column placement when these
cards sit inside the dashboard-bottom row. The rule is preserved
globally for any other view that still wants the span behaviour.
============================================================ */
#ll-dashboard-v6 .llv6-dashboard-bottom > .llv6-row-span-card {
grid-column: auto;
}
/* =========================================================
Stat cards — per-card pastel disc palette
---------------------------------------------------------
Four subtle pastels at the 50-stop with matching darker
icon colours at the 600-stop. Modifier classes set on the
outer .llv6-stat card and consumed by .llv6-stat-icon and
.llv6-stat-change. SVG icons inside inherit the disc colour
via fill="currentColor" plus their per-card highlight
stroke (inlined in JS to match the disc background).
========================================================= */
#ll-dashboard-v6 .llv6-stat--teal .llv6-stat-icon {
background: #E1F5EE;
color: #0F6E56;
}
#ll-dashboard-v6 .llv6-stat--blue .llv6-stat-icon {
background: #E6F1FB;
color: #185FA5;
}
#ll-dashboard-v6 .llv6-stat--amber .llv6-stat-icon {
background: #FAEEDA;
color: #BA7517;
}
#ll-dashboard-v6 .llv6-stat--pink .llv6-stat-icon {
background: #FBEAF0;
color: #D4537E;
}
#ll-dashboard-v6 .llv6-stat--teal .llv6-stat-change { color: #0F6E56; }
#ll-dashboard-v6 .llv6-stat--blue .llv6-stat-change { color: #185FA5; }
#ll-dashboard-v6 .llv6-stat--amber .llv6-stat-change { color: #BA7517; }
#ll-dashboard-v6 .llv6-stat--pink .llv6-stat-change { color: #D4537E; }
#ll-dashboard-v6 .llv6-stat-label,
#ll-dashboard-v6 .llv6-stat-change {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
Typography — global heading family
---------------------------------------------------------
Dashboard root now uses 'DM Sans' for body (line 97).
This block sets 'Outfit' on every heading and on the
three title-like classes that currently inherit. Together
these two changes lock the dashboard into the brand
typography (Outfit headings + DM Sans body), matching
the public-facing site. Component-level polish (sizes,
weights, letter-spacing, line-height) is intentionally
deferred to the end-of-build pass.
========================================================= */
#ll-dashboard-v6 h1,
#ll-dashboard-v6 h2,
#ll-dashboard-v6 h3,
#ll-dashboard-v6 h4,
#ll-dashboard-v6 h5,
#ll-dashboard-v6 h6,
#ll-dashboard-v6 .llv6-title,
#ll-dashboard-v6 .llv6-card-title,
#ll-dashboard-v6 .llv6-stat-value {
font-family: 'Outfit', sans-serif;
font-weight: 700;
}
/* Lean dashboard entry card — subjects + duration on one row.
Records Hub gallery keeps the original two-line layout. */
#ll-dashboard-v6 .llv6-pill-row--with-duration {
align-items: center;
}
#ll-dashboard-v6 .llv6-pill-row--with-duration .llv6-entry-duration {
margin-left: auto;
color: var(--muted);
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* =========================================================
Ship 1 — Parent Insights centrepiece
---------------------------------------------------------
Window pill toggle, KPI strip wrapper (reuses .llv6-grid-4
+ .llv6-stat from existing styles), insights main card with
streak summary + heatmap grid + inline day drawer.
All scoped to #ll-dashboard-v6.
========================================================= */
/* View-head variant that lets the pill toggle sit right-aligned
alongside the title block. */
#ll-dashboard-v6 .llv6-view-head--insights {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* Window pills */
#ll-dashboard-v6 .llv6-window-pills {
display: inline-flex;
background: #e8edf3;
border-radius: 999px;
padding: 3px;
flex-shrink: 0;
}
#ll-dashboard-v6 .llv6-window-pill {
border: 0;
background: transparent;
padding: 6px 14px;
font: inherit;
font-size: 12px;
color: #64748B;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-window-pill:hover {
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-window-pill--active {
background: #ffffff;
color: #0F6E56;
font-weight: 600;
box-shadow: 0 1px 2px rgba(14, 27, 61, 0.08);
}
/* Insights main card — streak strip + heatmap + drawer */
#ll-dashboard-v6 .llv6-insights-main {
padding: 24px;
margin-top: 18px;
}
/* Streak summary strip — 3 mini-stats above the heatmap */
#ll-dashboard-v6 .llv6-streak-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 22px;
}
#ll-dashboard-v6 .llv6-streak-stat {
padding: 14px 16px;
background: #e8edf3;
border-radius: 12px;
}
#ll-dashboard-v6 .llv6-streak-num {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 24px;
color: #0E1B3D;
line-height: 1;
}
#ll-dashboard-v6 .llv6-streak-num-sub {
font-weight: 500;
font-size: 16px;
color: #94A3B8;
}
#ll-dashboard-v6 .llv6-streak-lbl {
font-size: 11px;
color: #64748B;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Heatmap grid */
#ll-dashboard-v6 .llv6-heatmap {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 8px;
padding: 4px 0 6px;
}
#ll-dashboard-v6 .llv6-heatmap--7d {
grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-heatmap { grid-template-columns: repeat(10, 1fr); gap: 6px; }
}
/* Cells */
#ll-dashboard-v6 .llv6-heatmap-cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
border-radius: 8px;
aspect-ratio: 1;
cursor: pointer;
background: #e8edf3;
transition: transform 0.1s, outline 0.1s;
}
#ll-dashboard-v6 .llv6-heatmap-cell:hover {
transform: scale(1.18);
}
#ll-dashboard-v6 .llv6-heatmap-cell--empty { background: #e8edf3; }
#ll-dashboard-v6 .llv6-heatmap-cell--low { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-heatmap-cell--mid { background: #7BCFB8; }
#ll-dashboard-v6 .llv6-heatmap-cell--high { background: #0F6E56; }
#ll-dashboard-v6 .llv6-heatmap-cell--selected {
background: #0E1B3D;
outline: 2px solid #0E1B3D;
outline-offset: 1px;
position: relative;
z-index: 2;
}
#ll-dashboard-v6 .llv6-heatmap-date {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: #9aa6b6;
pointer-events: none;
}
#ll-dashboard-v6 .llv6-heatmap-cell--low .llv6-heatmap-date { color: #5d7d72; }
#ll-dashboard-v6 .llv6-heatmap-cell--mid .llv6-heatmap-date,
#ll-dashboard-v6 .llv6-heatmap-cell--high .llv6-heatmap-date,
#ll-dashboard-v6 .llv6-heatmap-cell--selected .llv6-heatmap-date { color: rgba(255,255,255,.92); }
#ll-dashboard-v6 .llv6-heatmap-blank {
background: transparent;
}
/* Legend */
#ll-dashboard-v6 .llv6-heatmap-legend {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: #94A3B8;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-heatmap-legend-lbl { color: #94A3B8; }
#ll-dashboard-v6 .llv6-heatmap-legend-cell {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
}
#ll-dashboard-v6 .llv6-heatmap-legend-hint {
margin-left: auto;
color: #64748B;
font-size: 11px;
}
/* Empty-state line below the heatmap */
#ll-dashboard-v6 .llv6-heatmap-empty {
margin-top: 12px;
padding: 10px 14px;
background: #F1EFE8;
border-radius: 8px;
font-size: 12px;
color: #64748B;
text-align: center;
}
/* Inline day-detail drawer */
#ll-dashboard-v6 .llv6-heatmap-day-detail {
margin-top: 18px;
padding: 14px 16px 14px 18px;
background: #F8FAFC;
border-left: 3px solid #0F6E56;
border-radius: 8px;
position: relative;
}
#ll-dashboard-v6 .llv6-heatmap-day-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-heatmap-day-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-heatmap-day-summary {
font-size: 12px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-heatmap-day-close {
border: 0;
background: transparent;
font-size: 20px;
line-height: 1;
color: #94A3B8;
cursor: pointer;
padding: 0 4px;
margin-left: auto;
}
#ll-dashboard-v6 .llv6-heatmap-day-close:hover {
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-heatmap-day-empty {
font-size: 13px;
color: #94A3B8;
font-style: italic;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-heatmap-day-times {
margin-top: 8px;
font-size: 12px;
color: #64748B;
}
/* Mobile: heatmap container scrolls horizontally, KPI strip
collapses to 2×2 (the existing .llv6-grid-4 should already
handle this, but be explicit). */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-view-head--insights .llv6-window-pills {
align-self: stretch;
}
#ll-dashboard-v6 .llv6-window-pill {
flex: 1;
text-align: center;
padding: 6px 10px;
}
#ll-dashboard-v6 .llv6-streak-strip {
grid-template-columns: 1fr;
gap: 8px;
}
#ll-dashboard-v6 .llv6-heatmap {
overflow-x: auto;
}
}
/* ============================================================
Ship 2 — Parent Insights right column
Day-of-week bars + Subjects-over-time stacked chart, sitting
beside the Ship 1 heatmap in a 2-col grid on desktop. Mobile
collapses to single column (heatmap → day-of-week → subjects).
============================================================ */
#ll-dashboard-v6 .llv6-insights-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 18px;
align-items: start;
}
#ll-dashboard-v6 .llv6-insights-left,
#ll-dashboard-v6 .llv6-insights-right {
min-width: 0;
}
#ll-dashboard-v6 .llv6-insights-right {
display: grid;
gap: 18px;
align-content: start;
}
/* ---- Day of week card ---- */
#ll-dashboard-v6 .llv6-dow-card {
padding: 20px;
}
#ll-dashboard-v6 .llv6-dow-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
margin: 0 0 14px;
}
#ll-dashboard-v6 .llv6-dow-rows {
display: grid;
gap: 9px;
}
#ll-dashboard-v6 .llv6-dow-row {
display: grid;
grid-template-columns: 32px 1fr 48px;
gap: 10px;
align-items: center;
font-size: 11px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-dow-lbl {
font-weight: 500;
}
#ll-dashboard-v6 .llv6-dow-row.is-strongest .llv6-dow-lbl,
#ll-dashboard-v6 .llv6-dow-row.is-strongest .llv6-dow-val {
color: #0E1B3D;
font-weight: 700;
}
#ll-dashboard-v6 .llv6-dow-track {
height: 8px;
background: #F1EFE8;
border-radius: 4px;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-dow-fill {
height: 100%;
background: #7BCFB8;
border-radius: 4px;
transition: width .25s ease;
}
#ll-dashboard-v6 .llv6-dow-row.is-strongest .llv6-dow-fill {
background: #0F6E56;
}
#ll-dashboard-v6 .llv6-dow-val {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-dow-derived {
margin-top: 14px;
padding-top: 12px;
border-top: 0.5px solid #E2E8F0;
font-size: 11px;
color: #64748B;
line-height: 1.6;
}
#ll-dashboard-v6 .llv6-dow-derived strong {
color: #0E1B3D;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-dow-empty {
padding: 18px 0;
font-size: 12px;
color: #94A3B8;
text-align: center;
}
/* ---- Subjects-over-time card ----
NOTE (Ship 5): The .llv6-sub-time-* rules below are LEGACY —
the stacked-bar chart was replaced by the .llv6-sub-breakdown-*
horizontal-row layout further down. The .llv6-sub-time-toggle*
rules are still in active use by the new layout (same toggle
pattern, reused class names). The rest is dead code retained
for one ship's safety margin and will be removed in the next
polish pass. */
#ll-dashboard-v6 .llv6-sub-time-card {
padding: 20px;
}
#ll-dashboard-v6 .llv6-sub-time-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-sub-time-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
margin: 0;
}
#ll-dashboard-v6 .llv6-sub-time-toggle {
display: inline-flex;
background: #F1EFE8;
border-radius: 999px;
padding: 2px;
}
#ll-dashboard-v6 .llv6-sub-time-toggle-btn {
border: 0;
background: transparent;
padding: 4px 10px;
font: inherit;
font-size: 11px;
color: #64748B;
border-radius: 999px;
cursor: pointer;
transition: background .15s, color .15s;
}
#ll-dashboard-v6 .llv6-sub-time-toggle-btn:hover {
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-sub-time-toggle-btn.is-active {
background: #ffffff;
color: #0F6E56;
font-weight: 600;
box-shadow: 0 1px 2px rgba(14, 27, 61, 0.08);
}
#ll-dashboard-v6 .llv6-sub-time-svg {
width: 100%;
height: 200px;
display: block;
}
#ll-dashboard-v6 .llv6-sub-time-svg rect {
transition: y .25s ease, height .25s ease, opacity .15s;
}
#ll-dashboard-v6 .llv6-sub-time-svg rect:hover {
opacity: 0.78;
}
#ll-dashboard-v6 .llv6-sub-time-svg text {
font-weight: 600;
}
#ll-dashboard-v6 .llv6-sub-time-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 12px;
padding-top: 12px;
border-top: 0.5px solid #E2E8F0;
font-size: 11px;
color: #475569;
}
#ll-dashboard-v6 .llv6-sub-time-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
#ll-dashboard-v6 .llv6-sub-time-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
#ll-dashboard-v6 .llv6-sub-time-empty {
padding: 24px 0;
font-size: 12px;
color: #94A3B8;
text-align: center;
}
/* ---- Mobile (≤900px) — single-column stack ---- */
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-insights-grid {
grid-template-columns: 1fr;
}
#ll-dashboard-v6 .llv6-sub-time-svg {
height: 180px;
}
}
/* ============================================================
Ship 3 — Custom range chip + Insights drill-down modals
The Custom pill triggers a Flatpickr range picker. When a
range is committed, a chip below the pills shows the dates
with a "Change dates" affordance. The dashboard "See last
milestone" and "See last 3 merits" affordances now open
their own dialog modals via state.insightsModal.
============================================================ */
/* ---- Custom date chip ---- */
#ll-dashboard-v6 .llv6-custom-date-chip {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 12px 0 4px;
padding: 8px 14px;
background: #F1EFE8;
border-radius: 999px;
font-size: 12px;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-custom-date-chip-icon {
font-size: 14px;
line-height: 1;
}
#ll-dashboard-v6 .llv6-custom-date-chip-label {
font-weight: 600;
}
#ll-dashboard-v6 .llv6-custom-date-chip-label--empty {
color: #64748B;
font-weight: 500;
font-style: italic;
}
#ll-dashboard-v6 .llv6-custom-date-chip-action {
border: 0;
background: transparent;
color: #0F6E56;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0 0 0 4px;
border-left: 1px solid rgba(14, 27, 61, 0.15);
margin-left: 4px;
padding-left: 12px;
}
#ll-dashboard-v6 .llv6-custom-date-chip-action:hover {
text-decoration: underline;
}
/* ---- Insights modal — reuses .llv6-modal-backdrop / .llv6-modal
tokens already in the file. These additions tighten the modal
for the smaller drill-down content. ---- */
#ll-dashboard-v6 .llv6-ins-modal {
max-width: 480px;
width: calc(100% - 32px);
}
#ll-dashboard-v6 .llv6-ins-modal .llv6-modal-body {
padding: 22px 24px 24px;
}
/* Empty state */
#ll-dashboard-v6 .llv6-ins-modal-empty {
text-align: center;
padding: 18px 8px;
color: #64748B;
font-size: 13px;
line-height: 1.55;
}
#ll-dashboard-v6 .llv6-ins-modal-empty-icon {
font-size: 32px;
color: #CBD5E1;
margin-bottom: 8px;
line-height: 1;
}
#ll-dashboard-v6 .llv6-ins-modal-empty p {
margin: 0;
max-width: 320px;
margin-inline: auto;
}
/* Milestone body */
#ll-dashboard-v6 .llv6-ins-modal-milestone {
display: flex;
flex-direction: column;
gap: 12px;
}
#ll-dashboard-v6 .llv6-ins-modal-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #F1EFE8;
border-radius: 12px;
}
#ll-dashboard-v6 .llv6-ins-modal-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 11px;
color: #64748B;
}
#ll-dashboard-v6 .llv6-ins-modal-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
#ll-dashboard-v6 .llv6-ins-modal-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.25;
color: #0E1B3D;
margin: 0;
}
#ll-dashboard-v6 .llv6-ins-modal-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#ll-dashboard-v6 .llv6-ins-modal-desc {
margin: 4px 0 0;
font-size: 13px;
line-height: 1.55;
color: #334155;
}
/* Merit list body */
#ll-dashboard-v6 .llv6-ins-modal-merit-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
#ll-dashboard-v6 .llv6-ins-modal-merit-row {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 14px;
background: #FAF8F2;
border-radius: 12px;
border: 1px solid #EFE8D6;
}
#ll-dashboard-v6 .llv6-ins-modal-merit-star {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: #C99A3F;
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
#ll-dashboard-v6 .llv6-ins-modal-merit-main {
flex: 1 1 auto;
min-width: 0;
}
#ll-dashboard-v6 .llv6-ins-modal-merit-title {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
color: #0E1B3D;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-ins-modal-merit-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 11px;
color: #64748B;
}
/* Mobile — near full-screen modal with breathing room */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-ins-modal {
width: calc(100% - 24px);
margin: 0 12px;
}
#ll-dashboard-v6 .llv6-ins-modal-title {
font-size: 18px;
}
#ll-dashboard-v6 .llv6-custom-date-chip {
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
}
}
/* ============================================================
Ship 4 — Project threads timeline card
Full-width card below the 2-col Insights grid. One horizontal
row per project (≥2 entries in the active window). Left side:
label + count. Right side: line + dots positioned by date.
============================================================ */
#ll-dashboard-v6 .llv6-threads-card {
margin-top: 18px;
padding: 20px;
}
#ll-dashboard-v6 .llv6-threads-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
#ll-dashboard-v6 .llv6-threads-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
margin: 0;
}
#ll-dashboard-v6 .llv6-threads-count {
font-size: 11px;
color: #64748B;
background: #F1EFE8;
border-radius: 999px;
padding: 3px 10px;
font-weight: 600;
}
/* Empty state */
#ll-dashboard-v6 .llv6-threads-empty {
text-align: center;
padding: 18px 12px 8px;
max-width: 460px;
margin-inline: auto;
}
#ll-dashboard-v6 .llv6-threads-empty-icon {
font-size: 28px;
margin-bottom: 6px;
opacity: 0.75;
}
#ll-dashboard-v6 .llv6-threads-empty p {
margin: 0 0 6px;
font-size: 13px;
color: #475569;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-threads-empty-sub {
font-size: 12px;
color: #94A3B8;
font-weight: 400;
line-height: 1.5;
}
/* Body — rows */
#ll-dashboard-v6 .llv6-threads-body {
display: flex;
flex-direction: column;
}
#ll-dashboard-v6 .llv6-thread-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 18px;
align-items: center;
padding: 14px 0;
border-top: 0.5px solid #EEF2F7;
}
#ll-dashboard-v6 .llv6-thread-row:first-child {
border-top: 0;
padding-top: 4px;
}
/* Label column */
#ll-dashboard-v6 .llv6-thread-label {
min-width: 0;
}
#ll-dashboard-v6 .llv6-thread-label-title {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
color: #0E1B3D;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
#ll-dashboard-v6 .llv6-thread-label-meta {
margin-top: 3px;
font-size: 11px;
color: #64748B;
}
/* Timeline column */
#ll-dashboard-v6 .llv6-thread-timeline {
position: relative;
height: 28px;
}
#ll-dashboard-v6 .llv6-thread-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #E2E8F0;
transform: translateY(-0.5px);
}
#ll-dashboard-v6 .llv6-thread-dot {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #94A3B8;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px rgba(14, 27, 61, 0.08);
transform: translate(-50%, -50%);
transition: transform 0.18s ease, box-shadow 0.18s ease;
cursor: default;
z-index: 1;
}
#ll-dashboard-v6 .llv6-thread-dot:hover,
#ll-dashboard-v6 .llv6-thread-dot:focus-visible {
transform: translate(-50%, -50%) scale(1.25);
box-shadow: 0 4px 10px rgba(14, 27, 61, 0.18);
z-index: 3;
outline: none;
}
/* Dot tooltip — hidden by default, fades in on dot hover/focus */
#ll-dashboard-v6 .llv6-thread-dot-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0E1B3D;
color: #FFFFFF;
padding: 7px 10px;
border-radius: 8px;
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 4;
}
#ll-dashboard-v6 .llv6-thread-dot-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-thread-dot-tooltip strong {
display: block;
font-weight: 600;
margin-bottom: 1px;
}
#ll-dashboard-v6 .llv6-thread-dot-tooltip span {
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
}
#ll-dashboard-v6 .llv6-thread-dot:hover .llv6-thread-dot-tooltip,
#ll-dashboard-v6 .llv6-thread-dot:focus-visible .llv6-thread-dot-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Axis at bottom of the card */
#ll-dashboard-v6 .llv6-thread-axis {
display: flex;
justify-content: space-between;
margin-top: 14px;
padding-top: 12px;
border-top: 0.5px solid #EEF2F7;
font-size: 11px;
color: #64748B;
font-weight: 600;
}
/* Mobile — thread rows stack label above timeline */
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-thread-row {
grid-template-columns: 1fr;
gap: 8px;
}
#ll-dashboard-v6 .llv6-thread-timeline {
height: 24px;
}
}
/* ============================================================
Ship 5 — Subject breakdown card (replaces Ship 2 stacked bars)
One horizontal row per subject: dot + name + filled bar + total,
with an optional rhythm strip beneath showing which buckets the
subject was seen in. Reads cleanly with sparse data because each
subject's row stands on its own.
============================================================ */
#ll-dashboard-v6 .llv6-sub-breakdown-card {
padding: 20px;
}
#ll-dashboard-v6 .llv6-sub-breakdown-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-sub-breakdown-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
margin: 0;
}
/* Row list */
#ll-dashboard-v6 .llv6-sub-breakdown-list {
display: flex;
flex-direction: column;
gap: 16px;
}
#ll-dashboard-v6 .llv6-sub-breakdown-row {
display: flex;
flex-direction: column;
gap: 5px;
}
#ll-dashboard-v6 .llv6-sub-breakdown-row.is-other {
opacity: 0.82;
}
/* Row top: dot + name + total */
#ll-dashboard-v6 .llv6-sub-breakdown-top {
display: flex;
align-items: center;
gap: 8px;
line-height: 1.2;
}
#ll-dashboard-v6 .llv6-sub-breakdown-dot {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
#ll-dashboard-v6 .llv6-sub-breakdown-name {
flex: 1 1 auto;
min-width: 0;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 13px;
color: #0E1B3D;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-sub-breakdown-total {
flex: 0 0 auto;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 13px;
color: #0E1B3D;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Bar — track in low-opacity tint, fill in solid colour */
#ll-dashboard-v6 .llv6-sub-breakdown-bar {
position: relative;
height: 10px;
background: color-mix(in srgb, var(--bar-col, #94A3B8) 16%, transparent);
border-radius: 999px;
overflow: hidden;
/* Fallback for browsers without color-mix support */
background-color: rgba(148, 163, 184, 0.16);
}
#ll-dashboard-v6 .llv6-sub-breakdown-bar-fill {
display: block;
height: 100%;
background: var(--bar-col, #94A3B8);
border-radius: 999px;
transition: width 0.35s ease;
min-width: 4px;
}
/* Meta line: entry count + rhythm strip */
#ll-dashboard-v6 .llv6-sub-breakdown-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: #64748B;
margin-top: 1px;
}
#ll-dashboard-v6 .llv6-sub-breakdown-meta-count {
flex: 0 0 auto;
}
#ll-dashboard-v6 .llv6-sub-breakdown-rhythm {
display: inline-flex;
gap: 3px;
align-items: center;
margin-left: auto;
}
#ll-dashboard-v6 .llv6-sub-breakdown-rhythm-cell {
width: 9px;
height: 9px;
border-radius: 2px;
background: #EEF2F7;
transition: background 0.2s ease;
}
#ll-dashboard-v6 .llv6-sub-breakdown-rhythm-cell.is-on {
background: var(--cell-col, #94A3B8);
}
/* Empty state */
#ll-dashboard-v6 .llv6-sub-breakdown-empty {
padding: 24px 0;
text-align: center;
font-size: 12px;
color: #94A3B8;
}
/* Mobile — row top reflows: dot+name on first line, total below */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-sub-breakdown-top {
flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-sub-breakdown-total {
margin-left: 20px;
}
#ll-dashboard-v6 .llv6-sub-breakdown-rhythm-cell {
width: 8px;
height: 8px;
}
}
/* ============================================================
Ship 6 — Gallery date filter chip + heatmap drawer deep link
New 5th filter chip on the gallery that opens a Flatpickr
range picker. When a range is set, the chip switches to
active state with the date range inline and a ✕ clear
button. Plus a "Open in Gallery" link in the heatmap day-
detail drawer that routes to the gallery filtered to that
single day.
============================================================ */
/* Date chip — inactive (button) and active (span wrapper) */
#ll-dashboard-v6 .llv6-gal-chip--date {
/* Inherits .llv6-gal-chip base; the date icon SVG sits inline
in front of the label so no extra spacing rule needed. */
display: inline-flex;
align-items: center;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-gal-chip--date.is-on {
padding: 0;
background: #0E1B3D;
color: #FFFFFF;
border-color: #0E1B3D;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-gal-chip--date.is-on .llv6-gal-chip-date-body {
background: transparent;
border: 0;
padding: 6px 10px 6px 12px;
font: inherit;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
}
#ll-dashboard-v6 .llv6-gal-chip--date.is-on .llv6-gal-chip-date-body:hover {
background: rgba(255, 255, 255, 0.06);
}
#ll-dashboard-v6 .llv6-gal-chip-clear {
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
font: inherit;
font-size: 16px;
line-height: 1;
padding: 0 10px;
height: 100%;
align-self: stretch;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
#ll-dashboard-v6 .llv6-gal-chip-clear:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Heatmap drawer "Open in Gallery" deep link */
#ll-dashboard-v6 .llv6-heatmap-day-open-gallery-wrap {
margin-top: 12px;
padding-top: 12px;
border-top: 0.5px solid #EEF2F7;
}
#ll-dashboard-v6 .llv6-heatmap-day-open-gallery {
border: 0;
background: transparent;
color: #0F6E56;
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.15s ease;
}
#ll-dashboard-v6 .llv6-heatmap-day-open-gallery:hover {
text-decoration: underline;
gap: 9px;
}
#ll-dashboard-v6 .llv6-heatmap-day-open-gallery-arrow {
font-weight: 700;
transition: transform 0.15s ease;
}
#ll-dashboard-v6 .llv6-heatmap-day-open-gallery:hover .llv6-heatmap-day-open-gallery-arrow {
transform: translateX(2px);
}
/* ============================================================
Ship 7 — Entries & Averages and Time Engaged drill-down modals
Two new modals triggered from the dashboard's "See averages"
and "See weekly totals" KPI affordances. Each contains an
internal toggle, a 3-stat strip, and a chart that swaps based
on the toggle. Reuses existing modal tokens; adds wider
variant + chart-specific styling.
============================================================ */
/* Wider modal variant for the two new drill-downs */
#ll-dashboard-v6 .llv6-ins-modal--wide {
max-width: 600px;
width: calc(100% - 32px);
}
#ll-dashboard-v6 .llv6-ins-modal--wide .llv6-modal-body {
padding: 18px 22px 22px;
}
/* Internal toggle inside the modal (Week/Month/Year etc) */
#ll-dashboard-v6 .llv6-modal-toggle {
display: inline-flex;
background: #F1EFE8;
border-radius: 999px;
padding: 3px;
margin-bottom: 16px;
}
#ll-dashboard-v6 .llv6-modal-toggle-btn {
border: 0;
background: transparent;
padding: 6px 14px;
font: inherit;
font-size: 12px;
color: #64748B;
font-weight: 500;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
#ll-dashboard-v6 .llv6-modal-toggle-btn:hover {
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-modal-toggle-btn.is-active {
background: #FFFFFF;
color: #0F6E56;
font-weight: 600;
box-shadow: 0 1px 2px rgba(14, 27, 61, 0.10);
}
/* Stat strip — 3 cells in a row */
#ll-dashboard-v6 .llv6-stat-strip {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
background: #FAF8F2;
border-radius: 12px;
padding: 12px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-stat-strip-cell {
text-align: center;
min-width: 0;
}
#ll-dashboard-v6 .llv6-stat-strip-value {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
color: #0E1B3D;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-stat-strip-label {
font-size: 10px;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
line-height: 1.2;
}
/* Chart container */
#ll-dashboard-v6 .llv6-modal-chart-wrap {
margin-top: 6px;
}
#ll-dashboard-v6 .llv6-modal-bar-chart {
width: 100%;
height: 200px;
display: block;
}
#ll-dashboard-v6 .llv6-modal-bar-chart rect {
transition: y .25s ease, height .25s ease, opacity .15s;
}
#ll-dashboard-v6 .llv6-modal-bar-chart rect:hover {
opacity: 0.78;
}
#ll-dashboard-v6 .llv6-modal-empty-chart {
text-align: center;
color: #94A3B8;
font-size: 12px;
padding: 36px 12px;
}
/* Horizontal bar list (Time Engaged → Weekday / Subject) */
#ll-dashboard-v6 .llv6-modal-hbar-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#ll-dashboard-v6 .llv6-modal-hbar-row {
display: grid;
grid-template-columns: 80px 1fr 70px;
gap: 12px;
align-items: center;
font-size: 12px;
}
#ll-dashboard-v6 .llv6-modal-hbar-label {
font-weight: 600;
color: #0E1B3D;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-modal-hbar-track {
height: 10px;
background: color-mix(in srgb, var(--bar-col, #94A3B8) 16%, transparent);
background-color: rgba(148, 163, 184, 0.16);
border-radius: 999px;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-modal-hbar-fill {
display: block;
height: 100%;
background: var(--bar-col, #0F6E56);
border-radius: 999px;
transition: width 0.35s ease;
min-width: 4px;
}
#ll-dashboard-v6 .llv6-modal-hbar-val {
text-align: right;
font-variant-numeric: tabular-nums;
color: #0E1B3D;
font-weight: 600;
white-space: nowrap;
}
/* Footnote below chart */
#ll-dashboard-v6 .llv6-modal-footnote {
margin-top: 14px;
padding-top: 12px;
border-top: 0.5px solid #EEF2F7;
font-size: 12px;
color: #64748B;
text-align: center;
}
#ll-dashboard-v6 .llv6-modal-footnote strong {
color: #0E1B3D;
font-weight: 600;
}
/* Mobile — stat strip collapses to 2+1 rows */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-stat-strip {
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
#ll-dashboard-v6 .llv6-stat-strip-cell:last-child {
grid-column: 1 / -1;
}
#ll-dashboard-v6 .llv6-stat-strip-value {
font-size: 14px;
}
#ll-dashboard-v6 .llv6-modal-bar-chart {
height: 180px;
}
#ll-dashboard-v6 .llv6-modal-hbar-row {
grid-template-columns: 64px 1fr 60px;
gap: 8px;
}
#ll-dashboard-v6 .llv6-modal-toggle-btn {
padding: 6px 10px;
font-size: 11px;
}
}
/* ============================================================
Ship 8 — Entries modal: always-on totals + lifetime averages
Replaces the toggle-bound 3-stat strip with a 4-cell totals
grid that's always visible, regardless of the chart toggle.
Plus a today's-date context line and a single-line lifetime-
averages summary. The chart toggle still drives the bar
chart underneath.
============================================================ */
#ll-dashboard-v6 .llv6-modal-context-line {
font-size: 12px;
color: #64748B;
margin-bottom: 14px;
}
#ll-dashboard-v6 .llv6-modal-context-line strong {
color: #0E1B3D;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-modal-totals-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid #EEF2F7;
border-radius: 12px;
overflow: hidden;
background: #FAFBFC;
margin-bottom: 14px;
}
#ll-dashboard-v6 .llv6-modal-totals-cell {
padding: 14px 10px;
text-align: center;
border-right: 1px solid #EEF2F7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
#ll-dashboard-v6 .llv6-modal-totals-cell:last-child {
border-right: 0;
}
#ll-dashboard-v6 .llv6-modal-totals-value {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.1;
color: #0E1B3D;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-modal-totals-label {
font-size: 11px;
color: #475569;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
#ll-dashboard-v6 .llv6-modal-totals-sublabel {
font-size: 10px;
color: #94A3B8;
font-weight: 500;
margin-top: 1px;
}
#ll-dashboard-v6 .llv6-modal-averages-line {
font-size: 12px;
color: #475569;
margin-bottom: 18px;
padding: 10px 14px;
background: #F1EFE8;
border-radius: 10px;
text-align: center;
}
#ll-dashboard-v6 .llv6-modal-averages-line strong {
color: #0E1B3D;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Mobile — totals grid collapses to 2×2 on narrow screens */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-modal-totals-grid {
grid-template-columns: repeat(2, 1fr);
}
#ll-dashboard-v6 .llv6-modal-totals-cell:nth-child(2) {
border-right: 0;
}
#ll-dashboard-v6 .llv6-modal-totals-cell:nth-child(1),
#ll-dashboard-v6 .llv6-modal-totals-cell:nth-child(2) {
border-bottom: 1px solid #EEF2F7;
}
#ll-dashboard-v6 .llv6-modal-totals-value {
font-size: 22px;
}
#ll-dashboard-v6 .llv6-modal-averages-line {
font-size: 11px;
}
}
/* ============================================================
Ship 10 — Journal entries modal (simplified)
Replaces Ship 9. Title + 4-option scope toggle, 3 averages
cards, calendar grid that swaps with the toggle, bottom
legend. Calendar uses day numbers on top of each cell with
1–3 dots below indicating entry count. Light-themed to match
the rest of the dashboard.
============================================================ */
/* Extra-wide modal width, matches Ship 9 width */
#ll-dashboard-v6 .llv6-ins-modal--xwide {
max-width: 880px;
width: calc(100% - 32px);
}
#ll-dashboard-v6 .llv6-ins-modal--xwide .llv6-modal-body {
max-height: 82vh;
overflow-y: auto;
}
#ll-dashboard-v6 .llv6-ins-modal--xwide .llv6-modal-head {
flex-wrap: wrap;
gap: 14px;
}
#ll-dashboard-v6 .llv6-ins-modal--xwide .llv6-modal-subtitle {
font-size: 12px;
color: #64748B;
margin-top: 2px;
}
#ll-dashboard-v6 .llv6-ins-modal--xwide .llv6-modal-head-toggle {
margin-left: auto;
margin-right: 12px;
}
/* ---- 3 averages cards ---- */
#ll-dashboard-v6 .llv6-entries-avgs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 14px;
overflow: hidden;
margin-bottom: 20px;
}
#ll-dashboard-v6 .llv6-entries-avg {
padding: 18px 14px;
text-align: center;
border-right: 1px solid #EEF2F7;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
#ll-dashboard-v6 .llv6-entries-avg:last-child {
border-right: 0;
}
#ll-dashboard-v6 .llv6-entries-avg-head {
display: inline-flex;
align-items: center;
gap: 6px;
}
#ll-dashboard-v6 .llv6-entries-avg-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7BCFB8;
}
#ll-dashboard-v6 .llv6-entries-avg-label {
font-size: 11px;
color: #475569;
font-weight: 600;
letter-spacing: 0.5px;
}
#ll-dashboard-v6 .llv6-entries-avg-value {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 28px;
color: #0E1B3D;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-entries-avg-unit {
font-size: 11px;
color: #94A3B8;
font-weight: 500;
}
/* ---- Month / Year nav bar ---- */
#ll-dashboard-v6 .llv6-entries-cal-nav-wrap {
margin-bottom: 14px;
}
#ll-dashboard-v6 .llv6-entries-cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#ll-dashboard-v6 .llv6-entries-cal-nav-btn {
border: 1px solid #E2E8F0;
background: #FFFFFF;
color: #0E1B3D;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
#ll-dashboard-v6 .llv6-entries-cal-nav-btn:hover:not(:disabled) {
background: #F1EFE8;
}
#ll-dashboard-v6 .llv6-entries-cal-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-entries-cal-period {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
color: #0E1B3D;
}
/* ---- Calendar grids (week / month) ---- */
#ll-dashboard-v6 .llv6-entries-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
#ll-dashboard-v6 .llv6-entries-dow {
font-size: 11px;
font-weight: 600;
color: #94A3B8;
text-align: center;
padding: 4px 0 8px;
letter-spacing: 0.5px;
}
/* ---- Calendar cell ---- */
#ll-dashboard-v6 .llv6-entries-cell {
background: #F8FAFC;
border-radius: 10px;
padding: 10px 8px 8px;
min-height: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: transform 0.12s ease;
}
#ll-dashboard-v6 .llv6-entries-cell:hover {
transform: translateY(-1px);
}
#ll-dashboard-v6 .llv6-entries-cell-date {
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 14px;
color: #0E1B3D;
line-height: 1;
}
#ll-dashboard-v6 .llv6-entries-cell-dots {
display: flex;
gap: 3px;
align-items: center;
justify-content: center;
min-height: 8px;
margin-top: 6px;
}
#ll-dashboard-v6 .llv6-entries-cell-dots.is-empty {
visibility: hidden;
}
#ll-dashboard-v6 .llv6-entries-cell.is-out-of-focus .llv6-entries-cell-date {
color: #CBD5E1;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-entries-cell.is-out-of-focus {
background: transparent;
}
/* Tier backgrounds */
#ll-dashboard-v6 .llv6-entries-cell--empty { background: #F8FAFC; }
#ll-dashboard-v6 .llv6-entries-cell--low { background: #E6F5EE; }
#ll-dashboard-v6 .llv6-entries-cell--mid { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-entries-cell--high { background: #9CD9C2; }
#ll-dashboard-v6 .llv6-entries-cell--low .llv6-entries-cell-date,
#ll-dashboard-v6 .llv6-entries-cell--mid .llv6-entries-cell-date,
#ll-dashboard-v6 .llv6-entries-cell--high .llv6-entries-cell-date {
color: #0E1B3D;
}
/* Dots: same size, intensity varies by cell tier (and standalone in legend) */
#ll-dashboard-v6 .llv6-entries-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #7BCFB8;
}
#ll-dashboard-v6 .llv6-entries-cell--low .llv6-entries-dot { background: #7BCFB8; }
#ll-dashboard-v6 .llv6-entries-cell--mid .llv6-entries-dot { background: #2BA585; }
#ll-dashboard-v6 .llv6-entries-cell--high .llv6-entries-dot { background: #0F6E56; }
/* Standalone dot tints for the legend */
#ll-dashboard-v6 .llv6-entries-dot--low { background: #7BCFB8; }
#ll-dashboard-v6 .llv6-entries-dot--mid { background: #2BA585; }
#ll-dashboard-v6 .llv6-entries-dot--high { background: #0F6E56; }
#ll-dashboard-v6 .llv6-entries-dot--lg {
width: 14px;
height: 14px;
}
/* Legend swatch — square cell mini sample */
#ll-dashboard-v6 .llv6-entries-cell.is-swatch {
width: 18px;
height: 18px;
min-height: 18px;
padding: 0;
border-radius: 4px;
}
/* ---- Day view (single big card) ---- */
#ll-dashboard-v6 .llv6-entries-day-card {
padding: 32px 24px;
border-radius: 16px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#ll-dashboard-v6 .llv6-entries-day-label {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 18px;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-entries-day-count {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: #475569;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-entries-day-dots {
display: inline-flex;
gap: 6px;
margin-top: 8px;
}
/* ---- Year view (3×4 mini-month grids) ---- */
#ll-dashboard-v6 .llv6-entries-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
#ll-dashboard-v6 .llv6-entries-mini-month {
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 10px;
padding: 10px;
}
#ll-dashboard-v6 .llv6-entries-mini-label {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 12px;
color: #0E1B3D;
text-align: center;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-entries-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
#ll-dashboard-v6 .llv6-entries-cell.is-compact {
min-height: 18px;
padding: 0;
border-radius: 3px;
align-items: center;
justify-content: center;
}
#ll-dashboard-v6 .llv6-entries-cell.is-compact .llv6-entries-cell-date {
display: none;
}
#ll-dashboard-v6 .llv6-entries-cell.is-compact .llv6-entries-cell-dots {
display: none;
}
/* ---- Legend at bottom ---- */
#ll-dashboard-v6 .llv6-entries-legend {
margin-top: 22px;
padding-top: 18px;
border-top: 0.5px solid #EEF2F7;
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
align-items: center;
justify-content: center;
font-size: 12px;
color: #475569;
}
#ll-dashboard-v6 .llv6-entries-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Mobile breakpoints */
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-entries-year-grid {
grid-template-columns: repeat(3, 1fr);
}
#ll-dashboard-v6 .llv6-entries-cell {
min-height: 56px;
padding: 8px 4px 6px;
}
#ll-dashboard-v6 .llv6-entries-cell-date {
font-size: 12px;
}
}
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-ins-modal--xwide .llv6-modal-head-toggle {
order: 3;
flex-basis: 100%;
margin: 0;
}
#ll-dashboard-v6 .llv6-entries-avgs {
grid-template-columns: 1fr;
}
#ll-dashboard-v6 .llv6-entries-avg {
border-right: 0;
border-bottom: 1px solid #EEF2F7;
padding: 12px;
}
#ll-dashboard-v6 .llv6-entries-avg:last-child {
border-bottom: 0;
}
#ll-dashboard-v6 .llv6-entries-avg-value {
font-size: 22px;
}
#ll-dashboard-v6 .llv6-entries-year-grid {
grid-template-columns: repeat(2, 1fr);
}
#ll-dashboard-v6 .llv6-entries-cell {
min-height: 48px;
}
#ll-dashboard-v6 .llv6-entries-grid {
gap: 4px;
}
}
/* ============================================================
Ship 11 — Time Engaged modal (calendar-based redesign)
Replaces the Ship 7 by-dimension chart with a calendar-centric
layout: 5-card stats row up top (4 stats + legend), 7-col
Mon→Sun grid with per-cell subject breakdowns, right-hand
Time-by-subject panel. Cells with entries are clickable and
route to Gallery filtered to that day via Ship 6's existing
open-day-in-gallery handler. Year view uses 12 mini-month
grids; Day view is a single large card; Week view is one row.
Also: Ship 11 gallery search/date row layout change.
============================================================ */
/* ---- 5-card stats row ---- */
#ll-dashboard-v6 .llv6-time-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 18px;
}
#ll-dashboard-v6 .llv6-time-stat {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px;
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 14px;
min-width: 0;
}
#ll-dashboard-v6 .llv6-time-stat-icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#ll-dashboard-v6 .llv6-time-stat-body {
min-width: 0;
flex: 1 1 auto;
}
#ll-dashboard-v6 .llv6-time-stat-label {
font-size: 11px;
color: #475569;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-time-stat-value {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 19px;
color: #0E1B3D;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-time-stat-value-num {
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-time-stat-sub {
font-size: 12px;
color: #475569;
font-weight: 600;
margin-top: 2px;
}
#ll-dashboard-v6 .llv6-time-stat-subject {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.15;
}
/* Legend card (5th stat slot) */
#ll-dashboard-v6 .llv6-time-stat--legend {
flex-direction: column;
gap: 8px;
padding: 12px 14px;
}
#ll-dashboard-v6 .llv6-time-legend-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 10px;
}
#ll-dashboard-v6 .llv6-time-legend-row {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: #475569;
}
#ll-dashboard-v6 .llv6-time-legend-swatch {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex: 0 0 10px;
}
#ll-dashboard-v6 .llv6-time-tier--empty { background: #E2E8F0; }
#ll-dashboard-v6 .llv6-time-tier--low { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-time-tier--mid { background: #2BA585; }
#ll-dashboard-v6 .llv6-time-tier--high { background: #38BDF8; }
#ll-dashboard-v6 .llv6-time-tier--peak { background: #1E40AF; }
/* ---- Month / Year nav ---- */
#ll-dashboard-v6 .llv6-time-cal-nav-wrap {
margin-bottom: 14px;
}
#ll-dashboard-v6 .llv6-time-cal-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
#ll-dashboard-v6 .llv6-time-cal-nav-btn {
border: 1px solid #E2E8F0;
background: #FFFFFF;
color: #0E1B3D;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
#ll-dashboard-v6 .llv6-time-cal-nav-btn:hover:not(:disabled) {
background: #F1EFE8;
}
#ll-dashboard-v6 .llv6-time-cal-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
#ll-dashboard-v6 .llv6-time-cal-period {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
color: #0E1B3D;
min-width: 130px;
text-align: center;
}
/* ---- 2-col main area ---- */
#ll-dashboard-v6 .llv6-time-main {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 16px;
align-items: start;
}
#ll-dashboard-v6 .llv6-time-cal-col {
min-width: 0;
}
#ll-dashboard-v6 .llv6-time-sub-col {
min-width: 0;
}
/* ---- Calendar grid (week + month) ---- */
#ll-dashboard-v6 .llv6-time-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
#ll-dashboard-v6 .llv6-time-dow {
font-size: 11px;
font-weight: 600;
color: #94A3B8;
text-align: center;
padding: 4px 0 6px;
letter-spacing: 0.4px;
}
/* ---- Time cell ---- */
#ll-dashboard-v6 .llv6-tcal-cell {
position: relative;
background: #FFFFFF;
border: 1px solid #EEF2F7;
border-radius: 10px;
min-height: 102px;
padding: 14px 8px 8px;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-clickable {
cursor: pointer;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-clickable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}
#ll-dashboard-v6 .llv6-tcal-cell.is-clickable:focus-visible {
outline: 2px solid #10bfae;
outline-offset: 2px;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-out-of-focus {
background: transparent;
border-color: transparent;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-out-of-focus .llv6-tcal-cell-date {
color: #CBD5E1;
font-weight: 500;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-out-of-focus .llv6-tcal-cell-strip {
display: none;
}
/* Top colour strip — encodes intensity tier */
#ll-dashboard-v6 .llv6-tcal-cell-strip {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: transparent;
}
#ll-dashboard-v6 .llv6-tcal-cell--empty .llv6-tcal-cell-strip { background: transparent; }
#ll-dashboard-v6 .llv6-tcal-cell--low .llv6-tcal-cell-strip { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-tcal-cell--mid .llv6-tcal-cell-strip { background: #2BA585; }
#ll-dashboard-v6 .llv6-tcal-cell--high .llv6-tcal-cell-strip { background: #38BDF8; }
#ll-dashboard-v6 .llv6-tcal-cell--peak .llv6-tcal-cell-strip { background: #1E40AF; }
#ll-dashboard-v6 .llv6-tcal-cell-date {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
text-align: center;
line-height: 1;
margin-bottom: 4px;
}
#ll-dashboard-v6 .llv6-tcal-cell-total {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0E1B3D;
text-align: center;
line-height: 1;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-tcal-cell-subs {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#ll-dashboard-v6 .llv6-tcal-cell-sub {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #475569;
line-height: 1.3;
min-width: 0;
}
#ll-dashboard-v6 .llv6-tcal-cell-sub-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex: 0 0 6px;
}
#ll-dashboard-v6 .llv6-tcal-cell-sub-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #334155;
}
#ll-dashboard-v6 .llv6-tcal-cell-sub-mins {
flex: 0 0 auto;
color: #64748B;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-tcal-cell-more {
font-size: 9.5px;
color: #94A3B8;
text-align: center;
margin-top: 2px;
font-style: italic;
}
/* ---- Day view (single big card) ---- */
#ll-dashboard-v6 .llv6-time-day-card {
padding: 32px 24px;
border-radius: 16px;
text-align: center;
background: #FFFFFF;
border: 1px solid #EEF2F7;
position: relative;
overflow: hidden;
}
#ll-dashboard-v6 .llv6-time-day-card .llv6-tcal-cell-strip {
/* Reuse the same strip overlay logic via the tier class */
}
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--low::before,
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--mid::before,
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--high::before,
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--peak::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--low::before { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--mid::before { background: #2BA585; }
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--high::before { background: #38BDF8; }
#ll-dashboard-v6 .llv6-time-day-card.llv6-tcal-cell--peak::before { background: #1E40AF; }
#ll-dashboard-v6 .llv6-time-day-label {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 18px;
color: #0E1B3D;
margin-bottom: 8px;
}
#ll-dashboard-v6 .llv6-time-day-total {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 28px;
color: #0E1B3D;
font-variant-numeric: tabular-nums;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-time-day-subs {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 360px;
margin: 0 auto;
}
#ll-dashboard-v6 .llv6-time-day-sub {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #FAFBFC;
border-radius: 8px;
}
#ll-dashboard-v6 .llv6-time-day-sub-name {
flex: 1 1 auto;
text-align: left;
color: #334155;
font-size: 13px;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-time-day-sub-mins {
color: #0E1B3D;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---- Year view ---- */
#ll-dashboard-v6 .llv6-time-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
#ll-dashboard-v6 .llv6-time-mini-month {
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 10px;
padding: 10px;
}
#ll-dashboard-v6 .llv6-time-mini-label {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 12px;
color: #0E1B3D;
text-align: center;
margin-bottom: 6px;
}
#ll-dashboard-v6 .llv6-time-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-compact {
min-height: 18px;
padding: 0;
border: 0;
border-radius: 3px;
align-items: center;
justify-content: center;
background: #F8FAFC;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-compact .llv6-tcal-cell-strip {
display: none;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-compact .llv6-tcal-cell-date,
#ll-dashboard-v6 .llv6-tcal-cell.is-compact .llv6-tcal-cell-total,
#ll-dashboard-v6 .llv6-tcal-cell.is-compact .llv6-tcal-cell-subs {
display: none;
}
#ll-dashboard-v6 .llv6-tcal-cell.is-compact.llv6-tcal-cell--low { background: #C8E9DE; }
#ll-dashboard-v6 .llv6-tcal-cell.is-compact.llv6-tcal-cell--mid { background: #2BA585; }
#ll-dashboard-v6 .llv6-tcal-cell.is-compact.llv6-tcal-cell--high { background: #38BDF8; }
#ll-dashboard-v6 .llv6-tcal-cell.is-compact.llv6-tcal-cell--peak { background: #1E40AF; }
/* ---- Right panel: Time by subject ---- */
#ll-dashboard-v6 .llv6-time-subjects {
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 14px;
padding: 16px;
position: sticky;
top: 0;
}
#ll-dashboard-v6 .llv6-time-subjects-head {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 13px;
color: #0E1B3D;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-time-subjects-period {
font-weight: 500;
color: #64748B;
font-size: 12px;
}
#ll-dashboard-v6 .llv6-time-subjects-list {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#ll-dashboard-v6 .llv6-time-subject-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
min-width: 0;
}
#ll-dashboard-v6 .llv6-time-subject-row.is-other .llv6-time-subject-name {
color: #64748B;
font-style: italic;
}
#ll-dashboard-v6 .llv6-time-subject-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: 0 0 10px;
}
#ll-dashboard-v6 .llv6-time-subject-name {
flex: 1 1 auto;
color: #334155;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ll-dashboard-v6 .llv6-time-subject-mins {
flex: 0 0 auto;
color: #0E1B3D;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-time-subjects-total {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid #EEF2F7;
font-size: 13px;
color: #0E1B3D;
}
#ll-dashboard-v6 .llv6-time-subjects-total strong {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#ll-dashboard-v6 .llv6-time-subjects-empty {
color: #64748B;
font-size: 13px;
text-align: center;
padding: 12px 0;
}
/* ---- Mobile breakpoints ---- */
@media (max-width: 900px) {
#ll-dashboard-v6 .llv6-time-stats {
grid-template-columns: repeat(2, 1fr);
}
#ll-dashboard-v6 .llv6-time-stat--legend {
grid-column: span 2;
}
#ll-dashboard-v6 .llv6-time-main {
grid-template-columns: 1fr;
}
#ll-dashboard-v6 .llv6-time-subjects {
position: static;
}
#ll-dashboard-v6 .llv6-time-year-grid {
grid-template-columns: repeat(3, 1fr);
}
#ll-dashboard-v6 .llv6-tcal-cell {
min-height: 88px;
padding: 12px 5px 6px;
}
#ll-dashboard-v6 .llv6-tcal-cell-date,
#ll-dashboard-v6 .llv6-tcal-cell-total {
font-size: 13px;
}
#ll-dashboard-v6 .llv6-tcal-cell-sub {
font-size: 9.5px;
}
}
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-time-stats {
grid-template-columns: 1fr;
}
#ll-dashboard-v6 .llv6-time-stat--legend {
grid-column: auto;
}
#ll-dashboard-v6 .llv6-time-year-grid {
grid-template-columns: repeat(2, 1fr);
}
#ll-dashboard-v6 .llv6-tcal-cell {
min-height: 70px;
}
}
/* ============================================================
Ship 11 — Gallery: search bar + date chip on same row
Search input takes the remaining width via flex:1; date chip
sits to its right at natural width. Date chip removed from
the filter chip row (now All / With photo / Merit / In record
only). Stacks vertically on narrow viewports.
============================================================ */
#ll-dashboard-v6 .llv6-gal-toprow {
display: flex;
align-items: stretch;
gap: 10px;
margin-bottom: 12px;
}
#ll-dashboard-v6 .llv6-gal-toprow .llv6-gal-searchbar {
flex: 1 1 auto;
min-width: 0;
margin-bottom: 0;
}
#ll-dashboard-v6 .llv6-gal-toprow .llv6-gal-chip--date {
flex: 0 0 auto;
align-self: stretch;
}
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-gal-toprow {
flex-direction: column;
align-items: stretch;
}
#ll-dashboard-v6 .llv6-gal-toprow .llv6-gal-chip--date {
align-self: flex-start;
}
}
/* ============================================================
Ship 11.1 — Gallery date field as a visible Flatpickr input
Replaces the chip + hidden-input pattern with a single visible
read-only input styled as a sibling pill to the search bar.
Same height, border-radius, font, icon-prefix pattern — reads
as a clear pair on the row.
============================================================ */
#ll-dashboard-v6 .llv6-gal-date-input {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 200px;
}
#ll-dashboard-v6 .llv6-gal-date-icon {
position: absolute;
left: 14px;
display: flex;
align-items: center;
pointer-events: none;
z-index: 2;
}
#ll-dashboard-v6 .llv6-gal-date-field {
flex: 1 1 auto;
width: 100%;
padding: 11px 36px 11px 40px;
border: 0.5px solid #E5E7EB;
border-radius: 999px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: #0E1B3D;
outline: none;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-gal-date-field:hover {
border-color: #CBD5E1;
}
#ll-dashboard-v6 .llv6-gal-date-field:focus,
#ll-dashboard-v6 .llv6-gal-date-input.is-on .llv6-gal-date-field {
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-gal-date-input.is-on .llv6-gal-date-field {
background: #ECFDF5;
color: #0E1B3D;
font-weight: 600;
padding-right: 38px;
}
#ll-dashboard-v6 .llv6-gal-date-field::placeholder {
color: #94a3b8;
font-weight: 400;
}
#ll-dashboard-v6 .llv6-gal-date-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 0;
border-radius: 999px;
background: #0E9F8B;
color: #ffffff;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.15s;
}
#ll-dashboard-v6 .llv6-gal-date-clear:hover {
background: #0B8676;
}
/* Mobile — full width below the search bar */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-gal-date-input {
width: 100%;
min-width: 0;
}
}
/* ============================================================
Ship 11.2 — My Record + Download modal custom range inputs
Replaces native
From/To pairs with a
single Flatpickr range-mode input, matching the Gallery and
Insights custom range pattern.
============================================================ */
/* My Record */
#ll-dashboard-v6 .llv6-rec-rangewrap {
position: relative;
display: flex;
align-items: center;
min-width: 260px;
}
#ll-dashboard-v6 .llv6-rec-rangeicon {
position: absolute;
left: 12px;
display: flex;
align-items: center;
pointer-events: none;
z-index: 2;
}
#ll-dashboard-v6 .llv6-rec-rangefield {
flex: 1 1 auto;
width: 100%;
padding: 9px 14px 9px 36px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
outline: none;
cursor: pointer;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-rec-rangefield:hover {
border-color: #CBD5E1;
}
#ll-dashboard-v6 .llv6-rec-rangefield:focus,
#ll-dashboard-v6 .llv6-rec-rangewrap.is-on .llv6-rec-rangefield {
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-rec-rangewrap.is-on .llv6-rec-rangefield {
background: #ECFDF5;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-rec-rangefield::placeholder {
color: #94a3b8;
}
/* Download modal */
#ll-dashboard-v6 .llv6-dlmod-rangelbl {
display: flex;
flex-direction: column;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.4px;
text-transform: uppercase;
}
#ll-dashboard-v6 .llv6-dlmod-rangewrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 320px;
}
#ll-dashboard-v6 .llv6-dlmod-rangeicon {
position: absolute;
left: 12px;
display: flex;
align-items: center;
pointer-events: none;
z-index: 2;
}
#ll-dashboard-v6 .llv6-dlmod-rangefield {
flex: 1 1 auto;
width: 100%;
padding: 9px 14px 9px 36px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #0E1B3D;
outline: none;
cursor: pointer;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#ll-dashboard-v6 .llv6-dlmod-rangefield:hover {
border-color: #CBD5E1;
}
#ll-dashboard-v6 .llv6-dlmod-rangefield:focus,
#ll-dashboard-v6 .llv6-dlmod-rangewrap.is-on .llv6-dlmod-rangefield {
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14, 159, 139, 0.12);
}
#ll-dashboard-v6 .llv6-dlmod-rangewrap.is-on .llv6-dlmod-rangefield {
background: #ECFDF5;
font-weight: 600;
}
#ll-dashboard-v6 .llv6-dlmod-rangefield::placeholder {
color: #94a3b8;
}
/* ============================================================
Ship 12 — Parent Insights workspace container
Wraps the window pills + every windowed panel (KPIs, heatmap,
day-of-week, subject breakdown, project threads) in a single
visually-unified workspace. The tinted background + soft
border define the boundary: anything inside is window-scoped.
Pills sit at the top as the workspace's tab strip; existing
cards inside keep their white backgrounds and layer on the
tint, reading as "cards on a workspace surface."
============================================================ */
#ll-dashboard-v6 .llv6-insights-workspace {
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 16px;
padding: 18px;
margin-top: 18px;
}
/* Workspace header — pills on the left, active-window label on the right */
#ll-dashboard-v6 .llv6-insights-workspace-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid #EEF2F7;
}
#ll-dashboard-v6 .llv6-insights-workspace-label {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
color: #475569;
letter-spacing: 0.2px;
}
/* The existing cards/grids inside the workspace need their top
margins relaxed since the workspace already provides the
spacing above them. */
#ll-dashboard-v6 .llv6-insights-workspace > .llv6-grid-4 {
margin-top: 0;
}
#ll-dashboard-v6 .llv6-insights-workspace > .llv6-insights-grid {
margin-top: 14px;
}
#ll-dashboard-v6 .llv6-insights-workspace > .llv6-custom-date-chip {
margin-bottom: 14px;
}
/* Insights-main (heatmap card) already has its own top margin
for the previous layout. Inside the workspace it sits directly
below the KPI grid via .llv6-insights-grid spacing, so this
override prevents a double-gap. */
#ll-dashboard-v6 .llv6-insights-workspace .llv6-insights-main {
margin-top: 0;
}
/* Project threads sits at the bottom of the workspace — give it
a small top gap so it doesn't crash into the grid above. */
#ll-dashboard-v6 .llv6-insights-workspace > .llv6-card:last-child {
margin-top: 14px;
}
/* Mobile breakpoint — workspace becomes a tighter box,
header wraps cleanly. */
@media (max-width: 700px) {
#ll-dashboard-v6 .llv6-insights-workspace {
padding: 14px;
}
#ll-dashboard-v6 .llv6-insights-workspace-head {
gap: 10px;
}
#ll-dashboard-v6 .llv6-insights-workspace-label {
font-size: 12px;
}
}
/* ============================================================
Build 1 — Generate Report staged wizard
Step rail at the top of the modal body + Back button in the
foot. All other dlmod controls reuse their existing styles.
============================================================ */
#ll-dashboard-v6 .llv6-dlmod-rail {
display: flex;
align-items: center;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid #EEF2F7;
}
#ll-dashboard-v6 .llv6-dlmod-step {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
flex: 0 0 auto;
}
#ll-dashboard-v6 .llv6-dlmod-step-n {
width: 24px;
height: 24px;
border-radius: 50%;
background: #F1F5F9;
color: #64748B;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
#ll-dashboard-v6 .llv6-dlmod-step-l {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
color: #64748B;
transition: color 0.2s;
}
#ll-dashboard-v6 .llv6-dlmod-step.is-active .llv6-dlmod-step-n { background: #0E9F8B; color: #fff; }
#ll-dashboard-v6 .llv6-dlmod-step.is-active .llv6-dlmod-step-l { color: #0E1B3D; }
#ll-dashboard-v6 .llv6-dlmod-step.is-done .llv6-dlmod-step-n { background: rgba(14, 159, 139, 0.15); color: #0E9F8B; }
#ll-dashboard-v6 .llv6-dlmod-rail-bar {
flex: 1 1 auto;
height: 1.5px;
background: #EEF2F7;
margin: 0 12px;
min-width: 16px;
}
#ll-dashboard-v6 .llv6-dlmod-back {
background: none;
border: 0;
color: #64748B;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
padding: 9px 8px;
}
#ll-dashboard-v6 .llv6-dlmod-back:hover { color: #0E1B3D; }
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-dlmod-step-l { display: none; }
#ll-dashboard-v6 .llv6-dlmod-rail-bar { margin: 0 8px; }
}
/* ============================================================
Build 2 — "Which projects to show" control (wizard Step 2).
Chips reuse .llv6-dlmod-chip; this is just the wrapper + label.
============================================================ */
#ll-dashboard-v6 .llv6-dlmod-threadpick {
margin-top: 12px;
padding: 12px 14px;
background: #FAFBFC;
border: 1px solid #EEF2F7;
border-radius: 10px;
}
#ll-dashboard-v6 .llv6-dlmod-threadpick-lbl {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 11px;
color: #64748B;
margin-bottom: 8px;
}
/* ============================================================
Ship 1 — Global mobile guard (causal, not a root overflow clip).
Prevents single elements from forcing page-width horizontal
scroll on narrow viewports, without clipping fixed modals or
absolute tooltips. Future components inherit this for free.
============================================================ */
/* Flex/grid items default to min-width:auto and refuse to shrink
below their content — the classic mobile blowout. :where() is
0-specificity so any intentional min-width still wins. */
:where(#ll-dashboard-v6 *) { min-width: 0; }
/* Images never exceed their container (SVG charts excluded so
their explicit viewBox sizing is preserved). */
#ll-dashboard-v6 img { max-width: 100%; height: auto; }
/* Long unbreakable strings (URLs, long titles) wrap instead of
widening the layout. Does not affect white-space:nowrap. */
#ll-dashboard-v6 { overflow-wrap: break-word; }
/* ============================================================
Build A — Learning journeys (Parent Insights).
Numbered nodes evenly spaced + key list below (shares the
report's system). Brand-led: --c (subject accent, set inline)
drives the bar/track/nodes/pills. Card chrome reuses the
existing .llv6-threads-card / -head / -title / -count / -empty.
============================================================ */
#ll-dashboard-v6 .llv6-lj-list { margin-top: 4px; }
#ll-dashboard-v6 .llv6-lj-card { position: relative; background: #fff; border: 1px solid #EEF2F7; border-radius: 14px; padding: 18px 22px 22px 24px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(14, 27, 61, 0.03); }
#ll-dashboard-v6 .llv6-lj-card:last-child { margin-bottom: 0; }
#ll-dashboard-v6 .llv6-lj-card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; background: var(--c); border-radius: 0 3px 3px 0; }
#ll-dashboard-v6 .llv6-lj-head { display: flex; align-items: center; gap: 11px; }
#ll-dashboard-v6 .llv6-lj-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-lj-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: #0E1B3D; flex: 1; letter-spacing: -0.01em; }
#ll-dashboard-v6 .llv6-lj-count { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); padding: 5px 11px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-lj-subject { font-size: 12px; color: #64748B; margin: 5px 0 0 22px; }
#ll-dashboard-v6 .llv6-lj-tl { position: relative; height: 30px; margin: 30px 14px 4px; }
#ll-dashboard-v6 .llv6-lj-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: #EEF2F7; border-radius: 3px; }
#ll-dashboard-v6 .llv6-lj-fill { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); background: var(--c); border-radius: 3px; left: 6%; right: 6%; }
#ll-dashboard-v6 .llv6-lj-node { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px #fff; }
#ll-dashboard-v6 .llv6-lj-node.is-end { width: 13px; height: 13px; background: #fff; border: 2.5px solid var(--c); }
#ll-dashboard-v6 .llv6-lj-num { position: absolute; top: -20px; transform: translateX(-50%); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; color: var(--c); font-variant-numeric: tabular-nums; }
#ll-dashboard-v6 .llv6-lj-enddate { position: absolute; top: 18px; transform: translateX(-50%); font-size: 9.5px; color: #64748B; white-space: nowrap; }
#ll-dashboard-v6 .llv6-lj-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 16px 4px 0; }
#ll-dashboard-v6 .llv6-lj-key-item { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: #3a4658; line-height: 1.3; }
#ll-dashboard-v6 .llv6-lj-key-n { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-family: 'Outfit', sans-serif; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
#ll-dashboard-v6 .llv6-lj-key-t { font-family: 'Outfit', sans-serif; font-weight: 600; color: #0E1B3D; }
#ll-dashboard-v6 .llv6-lj-key-d { color: #64748B; }
#ll-dashboard-v6 .llv6-lj-showall { width: 100%; text-align: center; background: none; border: 0; border-top: 1px solid #EEF2F7; margin-top: 6px; padding: 16px 0 2px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: #0E9F8B; cursor: pointer; }
@media (max-width: 560px) { #ll-dashboard-v6 .llv6-lj-key { grid-template-columns: 1fr; } }
/* ============================================================
Build B — Learning journeys teaser (dashboard landing).
Slim one-line-per-journey preview linking to the full module
in Parent Insights. --c = subject accent (set inline).
============================================================ */
#ll-dashboard-v6 .llv6-ljt-card { margin-top: 18px; padding: 20px 22px; }
#ll-dashboard-v6 .llv6-ljt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
#ll-dashboard-v6 .llv6-ljt-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: #0E1B3D; }
#ll-dashboard-v6 .llv6-ljt-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #EEF2F7; }
#ll-dashboard-v6 .llv6-ljt-row:last-child { border-bottom: 0; padding-bottom: 0; }
#ll-dashboard-v6 .llv6-ljt-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: #0E1B3D; flex: 0 0 36%; display: flex; align-items: center; gap: 9px; }
#ll-dashboard-v6 .llv6-ljt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-ljt-mini { position: relative; flex: 1; height: 14px; }
#ll-dashboard-v6 .llv6-ljt-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: #EEF2F7; border-radius: 3px; }
#ll-dashboard-v6 .llv6-ljt-fill { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); background: var(--c); border-radius: 3px; left: 8%; right: 8%; }
#ll-dashboard-v6 .llv6-ljt-node { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
#ll-dashboard-v6 .llv6-ljt-node.is-end { width: 11px; height: 11px; background: #fff; border: 2px solid var(--c); }
#ll-dashboard-v6 .llv6-ljt-meta { font-size: 11.5px; color: #64748B; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-ljt-row { flex-wrap: wrap; gap: 8px 12px; }
#ll-dashboard-v6 .llv6-ljt-name { flex: 1 1 100%; }
#ll-dashboard-v6 .llv6-ljt-mini { flex: 1; }
}
/* =========================================================
Ship 13 — Parent Insights restructure
Uniform collapsible panels + Subjects covered + Time per
week + paginated green journeys. Light controls bar.
========================================================= */
#ll-dashboard-v6 .llv6-insights-controls {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
background: var(--card); border: 1px solid var(--line);
border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
}
#ll-dashboard-v6 .llv6-insights-controls-period {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#ll-dashboard-v6 .llv6-insights-controls-label {
font-size: 11px; color: var(--muted); font-weight: 500;
}
#ll-dashboard-v6 .llv6-insights-stack {
display: flex; flex-direction: column; gap: 16px; margin-top: 16px;
}
/* Uniform panel shell */
#ll-dashboard-v6 .llv6-ipanel {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-md);
overflow: hidden;
}
#ll-dashboard-v6 .llv6-ipanel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; width: 100%; text-align: left;
background: none; border: 0; cursor: pointer;
padding: 16px 20px; font-family: inherit; color: inherit;
}
#ll-dashboard-v6 .llv6-ipanel-head-l {
display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
#ll-dashboard-v6 .llv6-ipanel-title {
font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
letter-spacing: -.01em; color: var(--navy);
}
#ll-dashboard-v6 .llv6-ipanel-meta {
font-size: 11px; color: var(--muted); font-weight: 500;
}
#ll-dashboard-v6 .llv6-ipanel-chev {
color: var(--muted); flex: 0 0 auto; transition: transform .2s; font-size: 16px;
}
#ll-dashboard-v6 .llv6-ipanel.is-collapsed .llv6-ipanel-chev { transform: rotate(-90deg); }
#ll-dashboard-v6 .llv6-ipanel-body { padding: 0 20px 20px; }
#ll-dashboard-v6 .llv6-ipanel.is-collapsed .llv6-ipanel-body { display: none; }
/* Heatmap rehoused — panel body provides the surface + padding */
#ll-dashboard-v6 .llv6-ipanel-body .llv6-insights-main { padding: 0; margin-top: 0; }
/* Shared stat row (label | bar | value) — Time per week + Subjects covered */
#ll-dashboard-v6 .llv6-statrow {
display: flex; align-items: center; gap: 16px;
padding: 11px 0; border-bottom: 1px solid var(--line);
}
#ll-dashboard-v6 .llv6-statrow:last-child { border-bottom: 0; }
#ll-dashboard-v6 .llv6-statrow-lbl {
width: 130px; flex: 0 0 auto; font-size: 13.5px; font-weight: 500; color: var(--navy);
}
#ll-dashboard-v6 .llv6-statrow-track {
flex: 1; height: 9px; background: #eef1f5; border-radius: 9px; overflow: hidden;
}
#ll-dashboard-v6 .llv6-statrow-fill {
display: block; height: 100%; background: #0E9F8B; border-radius: 9px;
}
#ll-dashboard-v6 .llv6-statrow-val {
width: 120px; flex: 0 0 auto; text-align: right;
font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy);
}
#ll-dashboard-v6 .llv6-statrow-t { display: block; }
#ll-dashboard-v6 .llv6-statrow-d {
display: block; margin-top: 1px; font-family: 'DM Sans', sans-serif;
font-weight: 400; font-size: 10.5px; color: var(--muted);
}
/* Subjects covered — two-tone (Primary dark / Cross-curricular light) */
#ll-dashboard-v6 .llv6-subjcov-cap {
font-size: 12px; color: var(--muted); line-height: 1.5;
margin: 2px 0 16px; max-width: 640px;
}
#ll-dashboard-v6 .llv6-subjcov-track {
flex: 1; height: 9px; background: #eef1f5; border-radius: 9px; overflow: hidden;
}
#ll-dashboard-v6 .llv6-subjcov-fill {
display: flex; height: 100%; background: #5fd0c2; border-radius: 9px;
}
#ll-dashboard-v6 .llv6-subjcov-direct {
display: block; height: 100%; background: #0b7a6b; border-radius: 9px 0 0 9px;
}
#ll-dashboard-v6 .llv6-subjcov-legend {
display: flex; gap: 18px; margin-top: 14px; font-size: 11.5px; color: var(--muted);
}
#ll-dashboard-v6 .llv6-subjcov-legend span { display: flex; align-items: center; gap: 7px; }
#ll-dashboard-v6 .llv6-subjcov-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#ll-dashboard-v6 .llv6-subjcov-sw.is-direct { background: #0b7a6b; }
#ll-dashboard-v6 .llv6-subjcov-sw.is-applied { background: #5fd0c2; }
#ll-dashboard-v6 .llv6-subjcov-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }
/* Learning journeys — pager */
#ll-dashboard-v6 .llv6-lj-pager {
display: flex; align-items: center; justify-content: center; gap: 16px;
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
#ll-dashboard-v6 .llv6-lj-pgbtn {
background: none; border: 1px solid var(--line); border-radius: 999px;
padding: 6px 14px; font-family: 'Outfit', sans-serif; font-weight: 600;
font-size: 12.5px; color: var(--teal); cursor: pointer;
}
#ll-dashboard-v6 .llv6-lj-pgbtn[disabled] { opacity: .4; cursor: default; color: var(--muted); }
#ll-dashboard-v6 .llv6-lj-pgnum { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-statrow-lbl { width: 96px; }
#ll-dashboard-v6 .llv6-statrow-val { width: 88px; }
}
/* Ship 13.1 — Period bar merged with Activity rhythm as one container */
#ll-dashboard-v6 .llv6-rhythm-combo {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden;
}
#ll-dashboard-v6 .llv6-rhythm-period {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 20px; border-bottom: 1px solid var(--line);
}
#ll-dashboard-v6 .llv6-rhythm-period-label {
font-size: 11px; color: var(--muted); font-weight: 500;
}
/* Inner rhythm panel sheds its own card chrome — the combo is the card */
#ll-dashboard-v6 .llv6-rhythm-combo > .llv6-ipanel {
border: 0; box-shadow: none; border-radius: 0; background: transparent;
}
#ll-dashboard-v6 .llv6-rhythm-combo > .llv6-custom-date-chip {
margin: 12px 20px 0;
}
/* Ship 13.2 — Two-column row (Subjects covered | Learning time) + Learning time card */
#ll-dashboard-v6 .llv6-insights-2col {
display: grid; grid-template-columns: 0.85fr 1.55fr; gap: 16px; align-items: start;
}
@media (max-width: 980px) {
#ll-dashboard-v6 .llv6-insights-2col { grid-template-columns: 1fr; }
}
#ll-dashboard-v6 .llv6-lt-section-h { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 14px; }
#ll-dashboard-v6 .llv6-lt-section-h .t { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); }
#ll-dashboard-v6 .llv6-lt-section-h .m { font-size: 11px; color: var(--muted); }
#ll-dashboard-v6 .llv6-lt-tpw { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: center; }
#ll-dashboard-v6 .llv6-lt-sum { font-size: 12.5px; }
#ll-dashboard-v6 .llv6-lt-sumrow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
#ll-dashboard-v6 .llv6-lt-sumrow:last-child { border-bottom: 0; }
#ll-dashboard-v6 .llv6-lt-sumrow b { font-family: 'Outfit', sans-serif; font-weight: 700; }
#ll-dashboard-v6 .llv6-lt-sumavg { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); border-bottom: 0; }
#ll-dashboard-v6 .llv6-lt-sumavg span { color: var(--muted); }
#ll-dashboard-v6 .llv6-lt-divider { height: 1px; background: var(--line); margin: 20px 0; }
#ll-dashboard-v6 .llv6-lt-tbs { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
#ll-dashboard-v6 .llv6-lt-donut { position: relative; width: 150px; height: 150px; border-radius: 50%; }
#ll-dashboard-v6 .llv6-lt-hole { position: absolute; inset: 30px; background: var(--card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#ll-dashboard-v6 .llv6-lt-hole .v { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px; color: var(--navy); }
#ll-dashboard-v6 .llv6-lt-hole .l { font-size: 9.5px; color: var(--muted); }
#ll-dashboard-v6 .llv6-lt-row { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; }
#ll-dashboard-v6 .llv6-lt-dot { width: 11px; height: 11px; border-radius: 50%; }
#ll-dashboard-v6 .llv6-lt-nm { font-size: 13px; font-weight: 500; color: var(--navy); }
#ll-dashboard-v6 .llv6-lt-tm { font-size: 12.5px; color: #3a4658; font-variant-numeric: tabular-nums; }
#ll-dashboard-v6 .llv6-lt-pc { width: 42px; text-align: right; font-size: 12.5px; color: var(--muted); }
#ll-dashboard-v6 .llv6-lt-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
#ll-dashboard-v6 .llv6-lt-cell { display: flex; align-items: center; gap: 11px; }
#ll-dashboard-v6 .llv6-lt-ico { width: 34px; height: 34px; border-radius: 9px; background: #eafaf6; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-lt-l { display: block; font-size: 10.5px; color: var(--muted); }
#ll-dashboard-v6 .llv6-lt-v { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); }
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-lt-tpw { grid-template-columns: 1fr; }
#ll-dashboard-v6 .llv6-lt-tbs { grid-template-columns: 1fr; justify-items: center; }
#ll-dashboard-v6 .llv6-lt-list { width: 100%; }
#ll-dashboard-v6 .llv6-lt-foot { grid-template-columns: 1fr; }
}
/* =========================================================
Certificate generator (Ship cert-1)
========================================================= */
#ll-dashboard-v6 .llv6-cert-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: Outfit, sans-serif;
font-weight: 600;
font-size: 14px;
color: #0B8676;
background: #fff;
border: 1.5px solid #0E9F8B;
border-radius: 999px;
padding: 9px 16px;
cursor: pointer;
transition: background .15s, color .15s;
}
#ll-dashboard-v6 .llv6-cert-cta:hover {
background: #0E9F8B;
color: #fff;
}
#ll-dashboard-v6 .llv6-dlmod-certlink {
background: none;
border: 0;
cursor: pointer;
padding: 0;
}
#ll-dashboard-v6 .llv6-cert-hint {
font-weight: 400;
font-size: 12px;
color: #94a3b8;
}
#ll-dashboard-v6 .llv6-cert-textarea {
width: 100%;
resize: vertical;
min-height: 56px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 1.45;
color: #1c2a4a;
border: 1px solid #d4dae4;
border-radius: 10px;
padding: 10px 12px;
margin-top: 8px;
}
#ll-dashboard-v6 .llv6-cert-textarea:focus {
outline: none;
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14,159,139,.12);
}
#ll-dashboard-v6 .llv6-cert-counter {
text-align: right;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #94a3b8;
margin-top: 4px;
}
#ll-dashboard-v6 .llv6-cert-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
#ll-dashboard-v6 .llv6-cert-field {
display: flex;
flex-direction: column;
gap: 2px;
}
#ll-dashboard-v6 .llv6-cert-input {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #1c2a4a;
border: 1px solid #d4dae4;
border-radius: 10px;
padding: 9px 12px;
margin-top: 8px;
}
#ll-dashboard-v6 .llv6-cert-input:focus {
outline: none;
border-color: #0E9F8B;
box-shadow: 0 0 0 3px rgba(14,159,139,.12);
}
#ll-dashboard-v6 .llv6-cert-empty {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #94a3b8;
padding: 6px 2px;
}
#ll-dashboard-v6 .llv6-cert-foot-note {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #94a3b8;
}
@media (max-width: 560px) {
#ll-dashboard-v6 .llv6-cert-meta { grid-template-columns: 1fr; }
}
/* =========================================================
Shell redesign (Ship shell-1) — no outer frame, surfaces only
========================================================= */
#ll-dashboard-v6 .llv6-sidebar { position: relative; overflow: hidden; }
#ll-dashboard-v6 .llv6-sidebar::after { content:""; position:absolute; left:0; top:16%; width:2px; height:66%; background:linear-gradient(180deg,transparent,#10BFAE,transparent); opacity:.45; filter:blur(1px); pointer-events:none; }
#ll-dashboard-v6 .llv6-logo { background:#fff url("data:image/webp;base64,UklGRrYTAABXRUJQVlA4IKoTAAAwUgCdASoAAQABPmEskkWkIqGXauyMQAYEsTdur15M/+L2U1z/Af2j9yf7V73tn/wX9p/VX9f5llJPpx8Rf2/8f+ZXwS9VH6o/7fuDfqZ+v3WK8w37hfuF7xnpE/ynqB/1r/rdaF6BXlz/ul8L37m/u17VvqAf//gEfRX62d1v+Y/uHo315UjH3y/fcKfAC/JP59/tPyz4JkAX1179/UayAOAioC/zj+9ehPnt/P/8/7CHSQ/eH2aT6coir42e1AHuGfnNJR3s90f3rqoDtKt+SA4Ukn/kve2q+OssFaRsvbscwTq1kejxjFvqv1LKeAStUqPTt3Wr0kTVcBhrbrj0PTz+/8o4RyBLpm2Q4Ntd3RKbaW5kCAomXRam8QT1j+VC1KBQjI7GqFv6/qwM/TxMnxK1aYMQk+PcCBj3JHTP6BS1AMH0fkiECQMAsK5uDqYbrTY92Fvh1z9FOCuVPSWvBnlJQzsvKnPozPtDkPijb665pGKw69e9tTOPVBDOtwLTFy+dI1LYKdZzpxRixbTdCH+dwMdYU4EYKd13TNoZLDHF6mfn6PyDNnsChQebmORLAZckFlIUTiElGfuCdOKubBa9tuTCT1A13R2z2Iqa0NUUBSES6RQV/z/BWfM/VFmMXoiVfzd25/pi5Ff9Xs6SYOUnsHNdFb10nZvIqzE35HqoqCIU/xy9a8Ov51Yp1cH90FLH8XCxejYaL+FTe8lcQNkj8ouzVwuefAL6JZFMncLYKiZEoC2W30cOnS8hYoHsyexYHJuOEj+HfhfhrEDRHncfVfkpY4aho6wTRHn+bLTQH6QgufSmmj8CSV1vRAJ+SjBweeDXKNWEYjf7XTcdyrWiblqe+EOoumZXGrrcdLOKagD3Z42eiAAA/vz0AAAAPBN4bufvMSEU0d2MbqKS15RJD6Jn/fCh4InXXwnpvChtAoc0Hck52AFBtI5w4bAM1zt2A2Wr7BTRVUitzN7J1bnfp1rJKbyehulwT6SRak7io3NvQHeln8F0nkf7k+a3pjZWqiPpwTeNMjnrb3NYcXNpxw+c+Ui8uqVR43BeLBsvErfF51b9zZohhHJrMSgxsLFc6Ja9kuJ3ffbF/AMSyHJnM66dRXsDkLPzWHz6Mr+/QfrC7JdaNBTiHFYt/LKuNDAI9H3Y6WsDPXPUo/lYf3/N0AcQoGCGyjKuU2oQBC3BJivSglMndkfed3mBY01UvGenn3LesMindfnAMTlVCtzXNqC8l8YnwdFzB/TF4/G5iMHEbUw1ZOlqwmjXB0p4i+Y8MYzfJgpvlZSusmaLmlg1g+jd8WRUEmbmgmwe/OftfDiEMegkXmLFmiwP6LRqtGSpE9PA1weMTgcOmETzLjR/OJy2/iNgyS1qLV4TRKR2WQNJ0Wx+ZfE0f3kQ3xtRZgd2HtBxCsAcOGATtI/E8Dc8Cd3s1wGHEF4MkbrsvzFe8vvFGrgvJEQmaRh1T3AWiwknZ0bPmBSNPI2ci/GkeXaAiH9PNWqpM55i8ktxgg6+yI04zv+ZAsT5NB8pdhbIYZdO8yk4gEKGdAD0r3FMYchqpeikk0fwPhQO5zrb3hgVEjAYaNbFE8/UJwVbgFkwSdQ+WDbYtEGlXQKpnIUGVtUVvP+ww/P+GuFNGmx0/xa96hdXt/8XJu2MfgODz3lXbHOW3ywfR2fShUEJ9rnw4cLT+o3cjW1Z8t8UJsVzHpO1lPDkIcZa/42NTpeaZixeNAUURLXrTS0z5tkZd2X4qy5yun4YH5Jj1MInf0eaORKaU1pmEpKcVBkg9xRB+TUnCFXyxhpYRoW6XZhlKPR905ODP6u/qncScxpuI+cEGghLKt0Vf1WdkhlYpjXF/bufmuNwTU2y1fI/JlsgxAAAysel9GyO5kHr96agi44cB8u4czGxjRqblVGvaHWN7aqdLfHXWaSSij5jzofIQFWEDKpBg8BiQ9cLcpi5UgErsWhM9KtD2G7SxPYsBOEF0ERbEfdTKN1GM41pZNl4ChkB42UdE5688ABN4ZDyAA7i9XSQbHFWqqxIzw9a456RAk8Qfw0vmimzwf2vviTgOEq0lJaofibPTlmhDSBFIvK7WpMXIvuyPHmM+vh6ULrlfXaDGrMvxDOKuFmcL05QeBPvy4RjLdUvmfH2woyBBwqGta79IQOOYMkeQME9Dk+CUTxIVbmKTycY368/ojLpCXEzzf9zePbglao1GWAAKN2zElLG4mRA5yE7d9X7+h4GhUHtwfqJrYmJCLO41ky6b6U646dlSxSr2FxB+Jr/1By7QHMKiWoAPVG9WhssSdtnCJ4EbU7Rz1FNnbjpkmZ20Bp0ZGpjHnPWEQl24lkRyCQEN8hY0O6SJpcG5/i07hapi2RkBD5DNO2NwXYeCOmPt4S/LiCtgpe/apc07DIBRHt3vL0tPAXz/vwN3O09Tlo+kvsODoKb4+Ds1QujI146Mu8iYJV7/ATnYx7W4NK57RYw7lV9RxRwtgm8gjuG21qqEae/9jfA/EUN9jpPLi9+Mu9BbK+zmiQh4KEGNEMxCti1QzF+IgvCaZyUS+bzR+cHW2lkm/pnzrbC7F+tLDe1L4SdeZVbu/KJRqAwJcuDJX0/iuT6AYvUIV/zlRvYl3ML33SIT2ES1zrj2olbEq8f8hq2nj9F+TSyffg8Z6x5oTwVpk0kfPj6fp92PCyxm7k6KJRVmabhma/eu7Sv5lEYktUyDrR06PK1wrUuQWMumSVmbw/nixGvoNGzwsOSeXQ4NMPGYzd2sK6M7Fe3nNbxtDO5ZZP1DDtKGn1JaVZ9/0TxLSVnKDescdw/GWuJJP1VOmOhkgNh/yKFGrygfu4dzVNCu5doBvfHYWS7bF4u67qKDnpdvvP+ovZhoj1fNM8PXYTCAgI46qSszDeanyKpwu6VpvkBOHvO5bRfL6yiRNKg5PAZAf0tnfZq7feKFW+oyqF6Cvbe/8gYtJ3Q8wSEhrMjBTRuyrEkFs9SjsHVYPZeyV9zXzqtziJc/TvnvFTHGTXWndMbgH8DRM0NQ6cYqg8mYUx0C61G5334CjRq8jziTPxl4fVqVXVnczZjjoVtTVQ19gnvPYD9tQl/QPC6LGI5DjgeNuha1D1mIUrSn4vn8QkZeM6qp5fWxQsIaukhrQv4E7eDUeFJmW3YMwh7I/2t/9yfsTqgq1Ikt+DefW35/IH9UzCE4Lx0+rZ9NfIj7H3C8anrVJJ9I6ky6a2rqn98N9SpfB/kVRsIVbbAMzkzkKiTiXXFRWYYubwXLxs38orx0Aqqt+i7mwvuNgQm/pfkp+rlVpiTx+yVL86H5Bf5W1xxojDwPKfpJfM2/KqtzxoD88TvEiXd5LCs08wCEEgdRTojuS7zeujvXdoHzzIu7ZtWcdAVL/6Y6TJVqOLOtJ4UELrn/cuBL9JRdzaMJV+2E+w1u8tf/UVZDxhKlUd4+iv73100ordwvaY0FeQAD4VLUP9aH4MAr8t8eNbs5ZwbtVFqomXlbqtmAd8juBTXkzYD3y9d+TyoK5Uw5u8xN/CEWmC752wxqOSQOpYacLcRG+OJuxFOsXROoK0ejDsOEMl8xztaYqe+glBZjlgRrkptYrsQv1TxMRU2jLrj6caCRwTFR+5V415LugSP6e42dibjQ9pWIeH3ajSsvOMGAJvDjb/Zp+3gzXTsq9IN9S+DAzwNq2WA3ynH8qGkGVJBpUab2GSFm4Aned0648fqAid6qexrvONz8yYWYfn5on/zBrgFNtKHo4TH//Qvv8jcXxBsf/HlEgXjT1ljFqwRAbA3QmjTmkMjeGgLiW0mZ1uxk74J8amqeGMBEvI26VD0LzJpw2Kg1B9b4zx1fAi2/91A72N9PIjj/3bJUhO4MyG3bH+NnD+kFOx/5/X88M8kIFGB/70hvTT/xgWlpSLI7jIlJwr6ii6CfXzuX8HvN5yaRGAXi+yXY61ge43nhjzMjTsxaB2exoZ0ATqxLmLncuroQ1yr5NFOrA7MHhy2Zr0EXEfcWZtDMTPXw8lnHEC27vAS2P4w9MyAt+k8x0H0X+w4wJXZr9Y0KTucqhGv/2izIlwK1IFxbboPyEePyj/o2dkE0xWGDZeGTkvdLasKvemO/UdMEMsVLVaC3chdq39z4tkr5JMuCiQ23s+BXgpLKhFjUMn2hS1Z2QZEQ2t26UK/Oh9ZHcoEGOYZQx/rzdI0T3Gs0avoDKVNw/U86X7nbw7QdnNPxo72zyGl5R639XP5B0y6bcm2nzJMDs+/1t2R2jJOD8Wt/vZAiSLilcJIWBNW6sZ53Dnv4AFPISS7OOVshjzC5T8hFZxOH/p/q8S/BosylyjhnN39mlkhGDKlfQXv6qcscc5xWc+C7clEog1txjVz+/QfHiebDyvO567NPUfSC/a76vyywsNc6w3eO24zC0NLZuHoptkwPt/fh8HGutPSIOeUARdoarIu65LERzYR1FnUyCzWSzDjBnsglfJpCDhpSH2k7ulXpnhunO4sssfNUzG3eHDUC3PcdopJKmn/i8O9E7vUItPBYNi/IEDeOBQiq9MsuTNI/Y/Q4CxLOY8oTwxglm2OKAApVHir8Tga5XmdOJXggauA+eyrEoh/gyDm3xAod69XIhjf3HjRXhqqU51raoRZA5ao8bQY8JrsiIwbamc/svdOM63dD2vhD3XoqYg6Hnr+f/v2SBhXkt+lKVyv4cgBpQOH6TtLP5AVMDb47KntKVP6pjfNZsdYZFs9LBrImrjYaEk3Mw8R9ykqXy3p5CqWfPF3MsADvMTgC9nJAtG5BuUVgmlW8llzYV39Esgt7rPtuJNjQhYSr8f9bxFiaVBzNCGWCBfv/v3rh5UVvmpOLy3kyQ+emhR7LRBJ8B3PWPWUQVJUrl6yRGh3BgZa8DitKQXYUnc2ErQdo7FUyaS2L6qjCH/cnRs9Ow2X/2OKFSn59CRt7v6B97OJRTBpM8bSQvbSAMjmdtg3Tn3eNfC7MLPx02uUaAYPvu4DtYl0+HVz2BYYTLUKZeUhc7fFKLRnGf2xGPVKyT6e+TfK1bizDHYwPrK9iNKkL1f3QIb7IVoWn5sx2WEP7qZCucadveTAX1eoIt2lDRjWTRcwoZ6IGERI9CDeIYAWau7C1Xg7V0PK4czTHqTfYxfrL9rfel0XoRmENgTdctUrxS8hep0chsu+rrtGEUvCk5uwCByCWhh1rDCmM38PPMDC91tr6cf0GqSgYzfDeqCNmIVhuUP5/6a+gapGooCp6Br/giG11EtheHEDaSADwHz5woEbYRUnmky+TRNV55iI7ikBuzuMC6HVi5pCX4EoM7mKwnj8PTBWrV4NrkRLpJKL7CgY0Pg8hGoBHH1+I3NGhvoyI5qIU1BGHpAyIlBYEefTmU0quM0TMv3WYI89VdjscKh/50xbBh9VeBeNhzK11rLw/HuverPn49uhTvEj7CqEWzezk5I9xrgP+8bxm0nzIc/q2YicFjF3HRK9lNqLnyAOf8QAIblT8RpMKhw/Ci/OoH1nVnTOTTtjCjCYq4wW2uiIQgklqEp0Y+oO0OMHrDpRbgt2omIdEfG1TRcLHQTfJwdcE8MiaHDS+nSPg5A42ZDLt7GYxzpdqCcFKF3v5xrOFgVC9EbJ5q41o6Fnn93zEA41cBUeTBly8QmZedK3XbELu+1KTztSrQtVl4CCyRY23O3i7gUwU+4OsPFhjJLVL95lxhYLzyPmlgSz9OfiAQmow0jbiKDl/R0YzQpRFKGa1USJmD8YpTDQdHXebjsG88ruH22bETsyTySd6HtjAMdnZaoaPCWZjSV6zAVrePgD+bns/8P/0XY9l99uo5AmmYR2X7mNmV30P5stpkSTelGPKFXO9QxeFgBx2miYd9GtzhZ/O/2Vc5fmeZ412eAYKRpjf5Gqi4DpSte6VOf9tW2CEFQTq5JgrxGiah0O8PFCdkNF/BlQSLh4iE8ZSIAbau1Uit2pJnJ9IXrKr4VqaYoFQb+t478c/6WWEmI6ROpwIv/fnkJ8s1bqIxGP/JIhYp/axCEP/LjoG+Q2r660TkV9WSZtEJJy3wmcBLoTgg1jObSWxThd8AAHEWZEfocx69RMw9jLudn3JFM8b/uah21RQCyMEZu63pIEauyBSGYu2E+S5TCH91DuMjld6eHTc3gMZxqxEhdYD43BixdAdZURrIeuGZOEDLVlx8H+/TRR8jPYK5eMttPIOFp1wECD2PCtplPZl4mcdP8AR1TCo60fsM9J1jPEhcMmfhPFTkLc1mYJ8dS7sIqPDWNcWIs6BL5Nn0YwJOK+8JfXuS2BUR9xx2T93nSZIi6FC6Tc0hng2grXI8QupJoWBQzjJZ71BRCCx7vfGDeUDhEV7AqpnnOQqwcTvI2nrHO81bs23DOVICOuT7uLfpdn4UxqVSEIPLiVNdH6Bb4XelSne9nJ2qd6RJu8I1O0AAjKCPhZHJ+cGHI4R9VQ0/5kPqM7xzW26GPMYl3S6OIrFcH4oZFnne+frhYStCRWrJrY+F6Ciq0uVb/5TComGy8IvwClnt89jCeQ8zyM/N0J3K4FysLwhEQvgjnZRn3tKd2Sq5iehspUnM2J1rriasJzoDGU23F6UqrgfiwlxCYk1qaRprl343BIM9IRqiEdXNaVNtydX3ZmMfStYY0mJA3ynsZkPmlaGgc8zH+/6fTkJ+NUBckB0Hm40ECJcFKY6Ze9POmw8b8kxw8EuSF/AVDIANVRAAAAAAAAAAA=") center/cover no-repeat; color:transparent; font-size:0; text-indent:-9999px; box-shadow:0 6px 20px rgba(16,191,174,.4), inset 0 1px 0 rgba(255,255,255,.4); overflow:hidden; }
#ll-dashboard-v6 .llv6-brand-sub { color:#6fd8c9; }
#ll-dashboard-v6 .llv6-nav-btn { color:#aeb9cc; font-weight:600; }
#ll-dashboard-v6 .llv6-nav-btn svg { width:19px; height:19px; stroke:#6fd8c9; flex:0 0 auto; }
#ll-dashboard-v6 .llv6-nav-btn:hover { color:#e7ecf5; }
#ll-dashboard-v6 .llv6-nav-btn.is-active { color:#fff; background:linear-gradient(90deg, rgba(16,191,174,.22), rgba(16,191,174,.06)); box-shadow:inset 0 0 0 1px rgba(25,200,179,.35), 0 8px 24px rgba(16,191,174,.18); }
#ll-dashboard-v6 .llv6-nav-btn.is-active svg { stroke:#19c8b3; }
#ll-dashboard-v6 .llv6-premium-icon { display:block; margin-bottom:10px; }
#ll-dashboard-v6 .llv6-premium-title { display:block; font-family:'Outfit',sans-serif; font-weight:700; color:#fff; font-size:17px; }
#ll-dashboard-v6 .llv6-premium-sub { display:block; color:#9fb2bd; font-size:12.5px; line-height:1.4; margin-top:5px; max-width:175px; }
#ll-dashboard-v6 .llv6-premium-go { position:absolute; right:15px; bottom:15px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
#ll-dashboard-v6 .llv6-premium-go svg { width:14px; height:14px; stroke:#fff; }
#ll-dashboard-v6 .llv6-avatar { background:linear-gradient(145deg,#1c3b5e,#12283f); border:1px solid rgba(120,160,200,.22); color:#cfe9e2; }
#ll-dashboard-v6 .llv6-topbar { position: relative; }
#ll-dashboard-v6 .llv6-topbar::after { content:""; position:absolute; left:6%; right:6%; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#10BFAE,transparent); opacity:.7; pointer-events:none; }
#ll-dashboard-v6 .llv6-journey-item svg { stroke:#19c8b3; }
#ll-dashboard-v6 .llv6-journey-item span { color:#8c9bb3; }
/* Collapsible chevron as a sized SVG (≥ +25%) + cert custom-entry field */
#ll-dashboard-v6 .llv6-ipanel-chev svg { width: 18px; height: 18px; display: block; }
#ll-dashboard-v6 .llv6-cert-custom { display: block; width: 100%; margin-top: 10px; }
/* =========================================================
Goals & Merits (Phase 1)
========================================================= */
#ll-dashboard-v6 .llv6-gm-card { padding: 22px 24px; margin-bottom: 16px; }
#ll-dashboard-v6 .llv6-gm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#ll-dashboard-v6 .llv6-gm-add {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
font-family: Outfit, sans-serif; font-weight: 600; font-size: 13px;
color: #0B8676; background: #fff; border: 1.5px solid #0E9F8B; border-radius: 999px;
padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s;
}
#ll-dashboard-v6 .llv6-gm-add:hover { background: #0E9F8B; color: #fff; }
#ll-dashboard-v6 .llv6-gm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
#ll-dashboard-v6 .llv6-gm-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; text-align: center; }
#ll-dashboard-v6 .llv6-gm-stat-n { display: block; font-family: Outfit, sans-serif; font-weight: 800; font-size: 22px; color: #0E1B3D; line-height: 1; }
#ll-dashboard-v6 .llv6-gm-stat-l { display: block; font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
#ll-dashboard-v6 .llv6-goal-list, #ll-dashboard-v6 .llv6-gm-merit-list { display: flex; flex-direction: column; gap: 8px; }
#ll-dashboard-v6 .llv6-goal-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
#ll-dashboard-v6 .llv6-goal-row.is-achieved { background: #f3faf8; border-color: #cdeae3; }
#ll-dashboard-v6 .llv6-goal-check { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; color: #94a3b8; cursor: pointer; display: grid; place-items: center; padding: 0; }
#ll-dashboard-v6 .llv6-goal-check svg { width: 18px; height: 18px; }
#ll-dashboard-v6 .llv6-goal-row.is-achieved .llv6-goal-check { background: #0E9F8B; border-color: #0E9F8B; color: #fff; }
#ll-dashboard-v6 .llv6-goal-main { flex: 1; min-width: 0; }
#ll-dashboard-v6 .llv6-goal-title { font-family: Outfit, sans-serif; font-weight: 700; color: #0E1B3D; font-size: 15px; }
#ll-dashboard-v6 .llv6-goal-row.is-achieved .llv6-goal-title { color: #0B8676; }
#ll-dashboard-v6 .llv6-goal-proj { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: #0B8676; background: #e6f5f1; border-radius: 999px; padding: 3px 10px; }
#ll-dashboard-v6 .llv6-goal-proj svg { width: 13px; height: 13px; }
#ll-dashboard-v6 .llv6-goal-note { color: #64748b; font-size: 13px; margin-top: 6px; line-height: 1.45; }
#ll-dashboard-v6 .llv6-goal-actions { flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-goal-del { width: 28px; height: 28px; border: 0; background: none; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
#ll-dashboard-v6 .llv6-goal-del:hover { background: #fef2f2; color: #dc2626; }
#ll-dashboard-v6 .llv6-goal-confirm { font-size: 13px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#ll-dashboard-v6 .llv6-goal-cfm-yes, #ll-dashboard-v6 .llv6-goal-cfm-no { border: 0; border-radius: 8px; padding: 4px 11px; font-weight: 600; font-size: 12px; cursor: pointer; }
#ll-dashboard-v6 .llv6-goal-cfm-yes { background: #dc2626; color: #fff; }
#ll-dashboard-v6 .llv6-goal-cfm-no { background: #e2e8f0; color: #334155; }
#ll-dashboard-v6 .llv6-gm-merit-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e2e8f0; border-radius: 12px; }
#ll-dashboard-v6 .llv6-gm-merit-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: #d84d7e; }
#ll-dashboard-v6 .llv6-gm-merit-ico svg { width: 20px; height: 20px; }
#ll-dashboard-v6 .llv6-gm-merit-main { flex: 1; min-width: 0; }
#ll-dashboard-v6 .llv6-gm-merit-title { font-weight: 700; color: #0E1B3D; font-size: 14px; }
#ll-dashboard-v6 .llv6-gm-merit-meta { color: #64748b; font-size: 12px; margin-top: 2px; }
#ll-dashboard-v6 .llv6-gm-empty { color: #94a3b8; font-size: 13px; padding: 10px 2px; }
#ll-dashboard-v6 .llv6-goal-input.is-invalid { border-color: #dc2626; }
#ll-dashboard-v6 .llv6-goal-err { color: #dc2626; font-size: 12px; margin-top: 6px; }
@media (max-width: 640px) { #ll-dashboard-v6 .llv6-gm-stats { grid-template-columns: 1fr 1fr; } }
/* =========================================================
Goals & Merits — Phase 2: entry-card output menu
========================================================= */
#ll-dashboard-v6 .llv6-entry-menu-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
#ll-dashboard-v6 .llv6-entry-menu-btn { width: 32px; height: 32px; border: 0; background: none; color: #94a3b8; border-radius: 8px; cursor: pointer; display: grid; place-items: center; padding: 0; }
#ll-dashboard-v6 .llv6-entry-menu-btn svg { width: 18px; height: 18px; }
#ll-dashboard-v6 .llv6-entry-menu-btn:hover { background: #eef2f7; color: #0E1B3D; }
#ll-dashboard-v6 .llv6-entry-menu-pop {
position: absolute; top: 38px; right: 0; z-index: 60;
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
box-shadow: 0 12px 28px rgba(14, 27, 61, .16); padding: 6px; min-width: 200px;
display: flex; flex-direction: column; gap: 2px;
}
#ll-dashboard-v6 .llv6-entry-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%;
text-align: left; border: 0; background: none; cursor: pointer;
font-family: 'DM Sans', sans-serif; font-size: 14px; color: #0E1B3D;
padding: 9px 10px; border-radius: 8px;
}
#ll-dashboard-v6 .llv6-entry-menu-item:hover { background: #f3faf8; color: #0B8676; }
#ll-dashboard-v6 .llv6-entry-menu-ico { width: 18px; height: 18px; flex: 0 0 auto; color: #0E9F8B; display: grid; place-items: center; }
#ll-dashboard-v6 .llv6-entry-menu-ico svg { width: 18px; height: 18px; }
/* =========================================================
Phase 3 — Progress Pathway stats strip + goal checkpoints
========================================================= */
#ll-dashboard-v6 .llv6-lj-span { color: #64748b; }
#ll-dashboard-v6 .llv6-lj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
#ll-dashboard-v6 .llv6-lj-stat { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; padding: 9px 6px; text-align: center; }
#ll-dashboard-v6 .llv6-lj-stat-n { display: block; font-family: Outfit, sans-serif; font-weight: 800; font-size: 16px; color: #0E1B3D; line-height: 1; }
#ll-dashboard-v6 .llv6-lj-stat-l { display: block; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; }
#ll-dashboard-v6 .llv6-lj-goals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; cursor: pointer; }
#ll-dashboard-v6 .llv6-lj-goalchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 10px; max-width: 100%; }
#ll-dashboard-v6 .llv6-lj-goalchip svg { width: 13px; height: 13px; flex: 0 0 auto; color: #94a3b8; }
#ll-dashboard-v6 .llv6-lj-goalchip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
#ll-dashboard-v6 .llv6-lj-goalchip.is-achieved { background: #ecf8f4; border-color: #c8e9de; color: #0B8676; }
#ll-dashboard-v6 .llv6-lj-goalchip.is-achieved svg { color: #0E9F8B; }
#ll-dashboard-v6 .llv6-dlmod-toggle-sub { padding-left: 14px; border-left: 2px solid #e6f5f1; margin-left: 2px; }
/* App-shell: on mobile let the page flow naturally (no fixed-height frame) */
@media (max-width: 720px) {
#ll-dashboard-v6 { height: auto; }
#ll-dashboard-v6 .llv6-content { overflow: visible; min-height: 0; }
#ll-dashboard-v6 .llv6-sidebar { overflow-y: visible; }
}
/* Goal badge on journal entry cards (goal set from that entry) */
#ll-dashboard-v6 .llv6-goal-badge { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
#ll-dashboard-v6 .llv6-goal-badge svg { width: 12px; height: 12px; flex: 0 0 auto; color: #94a3b8; }
#ll-dashboard-v6 .llv6-goal-badge.is-achieved { background: #ecf8f4; color: #0B8676; border-color: #c8e9de; }
#ll-dashboard-v6 .llv6-goal-badge.is-achieved svg { color: #0E9F8B; }
/* Goal badge spacing inside the gallery card body */
#ll-dashboard-v6 .llv6-gal-body .llv6-goal-badge { margin-top: 6px; }
/* =========================================================
Premium card redesign — entry cards + uniform stat cards
========================================================= */
/* Full journal view: standalone cards instead of rows-in-a-card */
#ll-dashboard-v6 .llv6-entry-list { display: flex; flex-direction: column; gap: 14px; }
#ll-dashboard-v6 .llv6-entry {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 24px;
grid-template-columns: 60px minmax(0, 1fr) 250px;
gap: 20px;
box-shadow: 0 2px 10px rgba(14, 27, 61, .06);
transition: transform .18s ease, box-shadow .18s ease;
}
#ll-dashboard-v6 .llv6-entry:hover {
transform: translateY(-2px);
box-shadow: 0 14px 38px rgba(14, 27, 61, .10);
}
/* Date rail + subject-tinted spine */
#ll-dashboard-v6 .llv6-date.llv6-date-g2 { position: relative; padding-left: 14px; }
#ll-dashboard-v6 .llv6-date.llv6-date-g2::before {
content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
border-radius: 3px; background: var(--ll-spine, #0E9F8B);
}
#ll-dashboard-v6 .llv6-entry .llv6-date.llv6-date-g2 strong { font-size: 20px; font-weight: 800; color: #0E1B3D; margin-bottom: 2px; }
#ll-dashboard-v6 .llv6-entry .llv6-date.llv6-date-g2 span { font-size: 11px; color: #94a3b8; }
/* Body zones */
#ll-dashboard-v6 .llv6-entry-body { min-width: 0; }
#ll-dashboard-v6 .llv6-entry-titlerow { display: flex; align-items: flex-start; gap: 10px; }
#ll-dashboard-v6 .llv6-entry-title { flex: 1; min-width: 0; white-space: normal; }
#ll-dashboard-v6 .llv6-entry .llv6-entry-title { font-size: 18.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
#ll-dashboard-v6 .llv6-entry-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-entry-status { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#ll-dashboard-v6 .llv6-entry-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#ll-dashboard-v6 .llv6-entry-durchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #6A7588; background: #F2F5FA; border-radius: 999px; padding: 4px 11px; line-height: 1; }
#ll-dashboard-v6 .llv6-entry-durchip svg { width: 12px; height: 12px; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-entry .llv6-entry-desc { margin-top: 12px; margin-bottom: 0; font-size: 14.5px; line-height: 1.6; color: #46506A; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ll-dashboard-v6 .llv6-entry-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; }
/* Skills callout */
#ll-dashboard-v6 .llv6-entry .llv6-prog-g2 {
margin-top: 14px; border: 1px solid var(--line); border-left: 3px solid var(--ll-spine, #0E9F8B);
border-radius: 11px; padding: 11px 14px; background: linear-gradient(180deg, #FCFDFE, #F8FAFC);
max-width: none; color: #3A4459; font-size: 13.5px; line-height: 1.5;
}
#ll-dashboard-v6 .llv6-entry .llv6-prog-g2 .lab {
display: block; margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #0B8676;
}
/* Photo — cropped fill, vertically centred, fixed size per card type */
#ll-dashboard-v6 .llv6-entry.is-compact { grid-template-columns: 60px minmax(0, 1fr) 200px; }
#ll-dashboard-v6 .llv6-entry .llv6-thumb {
width: 100%; align-self: center;
border-radius: 14px; position: relative; overflow: hidden;
}
#ll-dashboard-v6 .llv6-entry:not(.is-compact) .llv6-thumb { height: 175px; }
#ll-dashboard-v6 .llv6-entry.is-compact .llv6-thumb { height: 140px; }
#ll-dashboard-v6 .llv6-entry .llv6-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Compact rows (dashboard recent) — tighter spacing for the list look */
#ll-dashboard-v6 .llv6-entry.is-compact .llv6-entry-status,
#ll-dashboard-v6 .llv6-entry.is-compact .llv6-entry-meta { margin-top: 8px; }
/* ---- Uniform stat cards ---- */
#ll-dashboard-v6 .llv6-stat {
display: flex; flex-direction: column; align-items: stretch;
padding: 20px 20px 16px; min-height: 178px; gap: 0; position: relative;
}
#ll-dashboard-v6 .llv6-stat-icon {
width: 42px; height: 42px; border-radius: 13px; align-self: flex-start;
display: grid; place-items: center; margin: 0; flex: 0 0 auto;
}
#ll-dashboard-v6 .llv6-stat-icon svg { width: 21px; height: 21px; }
#ll-dashboard-v6 .llv6-stat-icon + div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#ll-dashboard-v6 .llv6-stat-value { margin-top: 18px; font-size: 32px; line-height: 1; letter-spacing: -1.2px; }
#ll-dashboard-v6 .llv6-stat-label { margin-top: 7px; font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; }
#ll-dashboard-v6 .llv6-stat-change { margin-top: auto; padding-top: 14px; border-top: 1px solid #F1F4F9; font-size: 12.5px; font-weight: 600; }
/* Mobile: single-column entries, photo hidden */
@media (max-width: 720px) {
#ll-dashboard-v6 .llv6-entry,
#ll-dashboard-v6 .llv6-entry.is-compact { grid-template-columns: 50px minmax(0, 1fr); padding: 18px; }
#ll-dashboard-v6 .llv6-entry .llv6-thumb { display: none; }
}
/* =========================================================
Gallery card redesign — photo-led, journal-consistent below
========================================================= */
#ll-dashboard-v6 .llv6-gal-card { border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(14, 27, 61, .06); }
#ll-dashboard-v6 .llv6-gal-card:hover { box-shadow: 0 16px 40px rgba(14, 27, 61, .12); }
#ll-dashboard-v6 .llv6-gal-img { aspect-ratio: 16 / 9; }
#ll-dashboard-v6 .llv6-gal-body { gap: 0; padding: 13px 15px 15px; }
#ll-dashboard-v6 .llv6-gal-meta { display: flex; align-items: center; gap: 7px; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #8A94A6; }
#ll-dashboard-v6 .llv6-gal-sep { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-gal-title { margin-top: 7px; -webkit-line-clamp: 1; font-size: 16px; font-weight: 700; }
#ll-dashboard-v6 .llv6-gal-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 11px; }
#ll-dashboard-v6 .llv6-gal-chips .llv6-goal-badge { margin-top: 0; }
#ll-dashboard-v6 .llv6-gal-more-subjs { align-self: center; }
/* camera/photo-count badge — the only thing on the photo */
#ll-dashboard-v6 .llv6-gal-photocount { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(14, 27, 61, .55); border-radius: 999px; padding: 3px 9px; }
#ll-dashboard-v6 .llv6-gal-photocount svg { width: 12px; height: 12px; }
/* =========================================================
Gallery detail modal — cohesive redesign
Status as one soft-pill row; clean title; wrapping actions.
========================================================= */
#ll-dashboard-v6 .llv6-galmod-title { display: block; margin: 0 0 10px; font-weight: 800; letter-spacing: -.3px; }
#ll-dashboard-v6 .llv6-galmod-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
#ll-dashboard-v6 .llv6-galmod-status .llv6-goal-badge { margin-top: 0; }
#ll-dashboard-v6 .llv6-galmod-actions { flex-wrap: wrap; }
/* =========================================================
Concept C — gallery detail modal: cover photo carries title
+ status; slim icon action bar; slide-up details drawer.
========================================================= */
#ll-dashboard-v6 .llv6-galmod-cover { position: relative; aspect-ratio: 5 / 4; max-height: 48vh; overflow: hidden; background: #0E1B3D; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-galmod-cover img { width: 100%; height: 100%; object-fit: cover; display: block; animation: llv6-galmod-hero-fade 220ms ease-out; }
#ll-dashboard-v6 .llv6-galmod-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,35,.92) 0%, rgba(8,15,35,.42) 30%, transparent 58%); }
#ll-dashboard-v6 .llv6-galmod-counter { z-index: 2; }
#ll-dashboard-v6 .llv6-galmod-cover-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 22px 16px; }
#ll-dashboard-v6 .llv6-galmod-cover-info .llv6-galmod-title { color: #fff; margin: 0 0 10px; font-weight: 800; letter-spacing: -.3px; text-shadow: 0 2px 12px rgba(0,0,0,.32); }
#ll-dashboard-v6 .llv6-galmod-cover-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#ll-dashboard-v6 .llv6-galmod-cpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 11px; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#ll-dashboard-v6 .llv6-cpill-rec { background: rgba(14,159,139,.92); color: #fff; }
#ll-dashboard-v6 .llv6-cpill-merit { background: rgba(176,122,32,.95); color: #fff; }
#ll-dashboard-v6 .llv6-galmod-cover-info .llv6-goal-badge { background: rgba(255,255,255,.92); color: #0B8676; box-shadow: none; margin: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* no-photo fallback header */
#ll-dashboard-v6 .llv6-galmod-cover-nophoto { aspect-ratio: auto; max-height: none; }
#ll-dashboard-v6 .llv6-galmod-cover-nophoto::after { display: none; }
#ll-dashboard-v6 .llv6-galmod-cover-nophoto .llv6-galmod-cover-info { position: static; padding: 22px 22px 18px; }
/* icon close button */
#ll-dashboard-v6 .llv6-galmod-close { width: 34px; height: 34px; display: grid; place-items: center; color: #334155; border: 0; padding: 0; z-index: 4; font-size: 0; }
/* slim info + action bar */
#ll-dashboard-v6 .llv6-galmod-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-galmod-barmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #64748B; }
#ll-dashboard-v6 .llv6-galmod-iconbar { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#ll-dashboard-v6 .llv6-galmod-ibtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: #0B8676; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; position: relative; }
#ll-dashboard-v6 .llv6-galmod-ibtn:hover { background: #F1FAF8; border-color: #0E9F8B; }
#ll-dashboard-v6 .llv6-galmod-ibtn.is-primary { width: auto; padding: 0 16px; gap: 6px; background: #0E9F8B; color: #fff; border-color: #0E9F8B; display: inline-flex; align-items: center; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; }
#ll-dashboard-v6 .llv6-galmod-ibtn.is-primary:hover { background: #0B8676; }
#ll-dashboard-v6 .llv6-galmod-ibtn[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0E1B3D; color: #fff; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 6; }
/* slide-up details drawer */
#ll-dashboard-v6 .llv6-galmod-drawer-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: #FAFBFC; border: 0; border-bottom: 1px solid var(--line); padding: 13px 20px; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: #0E1B3D; text-align: left; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-galmod-drawer-chev { color: #94a3b8; transition: transform .25s ease; flex: 0 0 auto; }
#ll-dashboard-v6 .llv6-galmod-dialog.is-drawer-open .llv6-galmod-drawer-chev { transform: rotate(180deg); }
#ll-dashboard-v6 .llv6-galmod-drawer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
#ll-dashboard-v6 .llv6-galmod-dialog.is-drawer-open .llv6-galmod-drawer { max-height: 56vh; overflow-y: auto; }
#ll-dashboard-v6 .llv6-galmod-drawer-inner { padding: 18px 22px 22px; }
#ll-dashboard-v6 .llv6-galmod-sec { margin-bottom: 18px; }
#ll-dashboard-v6 .llv6-galmod-sec:last-child { margin-bottom: 0; }
#ll-dashboard-v6 .llv6-galmod-seclbl { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #64748B; margin: 0 0 8px; }
#ll-dashboard-v6 .llv6-galmod-sec p { margin: 0; font-size: 14px; line-height: 1.65; color: #334155; }
#ll-dashboard-v6 .llv6-galmod-drawer-inner .llv6-prog-g2 { margin: 0; }
/* =========================================================
Goals & Merits — restructured page (overview / goals /
merits-with-weekly-allowance / footer)
========================================================= */
#ll-dashboard-v6 .llv6-gm-overview .llv6-gm-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
#ll-dashboard-v6 .llv6-gm-ov-id { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #64748b; margin-bottom: 16px; }
#ll-dashboard-v6 .llv6-gm-ov-weeks { font-family: 'Outfit', sans-serif; font-size: 30px; font-weight: 800; color: #0E1B3D; margin-right: 5px; }
/* goal-only progress */
#ll-dashboard-v6 .llv6-gm-goalprog { margin: 2px 0 16px; }
#ll-dashboard-v6 .llv6-gm-goalprog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #64748b; font-weight: 600; margin-bottom: 8px; }
#ll-dashboard-v6 .llv6-gm-goalprog-pct { font-family: 'Outfit', sans-serif; font-weight: 700; color: #0B8676; }
#ll-dashboard-v6 .llv6-gm-progbar { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
#ll-dashboard-v6 .llv6-gm-progbar-fill { height: 100%; background: linear-gradient(90deg, #0E9F8B, #10BFAE); border-radius: 999px; transition: width .4s ease; }
/* weekly allowance + usage (inside Merits) */
#ll-dashboard-v6 .llv6-gm-week { margin: 2px 0 18px; }
#ll-dashboard-v6 .llv6-gm-week .llv6-sen-bar { margin: 0 0 14px; }
#ll-dashboard-v6 .llv6-gm-week-label { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #64748b; margin: 0 0 8px; }
#ll-dashboard-v6 .llv6-gm-week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ll-dashboard-v6 .llv6-gm-week-tile { padding: 16px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
#ll-dashboard-v6 .llv6-gm-week-tile-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0E1B3D; font-family: 'Outfit', sans-serif; }
#ll-dashboard-v6 .llv6-gm-week-tile-n { margin-top: 6px; color: #64748b; font-size: 13px; }
#ll-dashboard-v6 .llv6-gm-week-dots { margin-top: 10px; color: var(--teal, #10bfae); letter-spacing: 4px; font-size: 16px; }
@media (max-width: 560px) { #ll-dashboard-v6 .llv6-gm-week-grid { grid-template-columns: 1fr; } }
/* footer */
#ll-dashboard-v6 .llv6-gm-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
#ll-dashboard-v6 .llv6-gm-foot-note { margin: 0; color: #475569; font-size: 13.5px; line-height: 1.55; flex: 1; min-width: 240px; }
/* =================================================================
LIFELEARN v6 FOUNDATION (additive — appended; nothing above changed)
Activated only inside .llv6-skin. Existing views are untouched.
================================================================= */
/* --- additive tokens (global, no live equivalent) --- */
#ll-dashboard-v6{
--navy-800:#0E1B3D; --navy-950:#070F26;
--teal-deep:#0B8676; --teal-bright:#1FB7A1;
--gold:#F2B441; --gold-ink:#B57D0C;
--violet:#7C5CE6; --violet-deep:#5B43C9;
--orange:#F97316; --orange-deep:#C2590B;
--blue:#3B82F6; --blue-ink:#1E5FC4; --gblue:#4285F4; --slate:#64748B; --green:#16A34A;
--ink-2:#4A5878; --ink-3:#94A0BD;
--r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
}
/* --- clashing tokens: v6 values ONLY inside the skin wrapper --- */
#ll-dashboard-v6 .llv6-skin{ --teal:#0E9F8B; --ink:#0E1B3D; --line:#E7EBF3; --paper:#F4F6FB; }
#ll-dashboard-v6 .llv6-skin .fr{font-family:'Fraunces',serif;font-style:italic;color:var(--gold-ink)}
/* --- shared primitives --- */
#ll-dashboard-v6 .ll-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth)}
#ll-dashboard-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .ll-cta svg{width:17px;height:17px}
#ll-dashboard-v6 .ll-select{position:relative}
#ll-dashboard-v6 .ll-select select{appearance:none;border:1px solid var(--line-2,#DBE1ED);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
#ll-dashboard-v6 .llv6-skin .sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth);margin-bottom:18px;overflow:hidden}
#ll-dashboard-v6 .llv6-skin .sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;user-select:none}
#ll-dashboard-v6 .llv6-skin .sec-h h2{font-size:16px;font-weight:700}
#ll-dashboard-v6 .llv6-skin .sec-b{display:none;padding:0 22px 22px}
#ll-dashboard-v6 .llv6-skin .sec.open .sec-b{display:block}
#ll-dashboard-v6 .llv6-skin .ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
#ll-dashboard-v6 .llv6-skin .rb{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);padding:16px 18px}
#ll-dashboard-v6 .llv6-skin .rb .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
#ll-dashboard-v6 .llv6-skin .rb .k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
/* --- range controls --- */
#ll-dashboard-v6 .ll-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
#ll-dashboard-v6 .ll-seg{display:inline-flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .ll-seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .ll-seg button[data-on="1"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,27,61,.6)}
#ll-dashboard-v6 .ll-nav{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .ll-nav button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
#ll-dashboard-v6 .ll-nav button:hover{background:var(--paper)}
#ll-dashboard-v6 .ll-nav .lbl{min-width:150px;text-align:center;font-weight:600;font-size:13.5px}
#ll-dashboard-v6 .ll-today{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:9px 17px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .ll-dates{display:none;align-items:center;gap:8px}
#ll-dashboard-v6 .ll-dates.show{display:inline-flex}
#ll-dashboard-v6 .ll-dates input{font-family:inherit;border:1px solid var(--line-2,#DBE1ED);border-radius:999px;padding:9px 13px;color:var(--ink);background:var(--card);font-size:12.5px;color-scheme:light}
#ll-dashboard-v6 .ll-dates span{color:var(--ink-3);font-size:12px}
/* --- generic chips (filters / layers) --- */
#ll-dashboard-v6 .ll-chips{display:flex;flex-wrap:wrap;gap:8px}
#ll-dashboard-v6 .ll-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2,#DBE1ED);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card);cursor:pointer;box-shadow:var(--depth-sm);user-select:none}
#ll-dashboard-v6 .ll-chip .sw{width:9px;height:9px;border-radius:3px}
#ll-dashboard-v6 .ll-chip[data-on="0"]{opacity:.4}
/* --- year heatmap --- */
#ll-dashboard-v6 .ll-yr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
#ll-dashboard-v6 .ll-yr-top h2{font-size:15px;font-weight:600}
#ll-dashboard-v6 .ll-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .ll-legend i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
#ll-dashboard-v6 .yrnav{display:none}
#ll-dashboard-v6 .ll-grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 16px}
#ll-dashboard-v6 .ll-mn .ml{font-size:12px;font-weight:600;margin-bottom:7px;display:flex;justify-content:space-between}
#ll-dashboard-v6 .ll-mn .ml span{color:var(--ink-3);font-weight:500;font-size:11px}
#ll-dashboard-v6 .ll-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
#ll-dashboard-v6 .ll-dow span{font-size:8.5px;text-align:center;color:var(--ink-3)}
#ll-dashboard-v6 .ll-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#ll-dashboard-v6 .ll-d{aspect-ratio:1;border-radius:4px;background:#EDF0F6;position:relative;transition:.14s;display:flex;align-items:flex-end;justify-content:center}
#ll-dashboard-v6 .ll-d.empty{background:transparent}
#ll-dashboard-v6 .ll-d.has{cursor:pointer}
#ll-dashboard-v6 .ll-d.has:hover{transform:scale(1.4);z-index:3;box-shadow:0 6px 16px -6px rgba(16,27,61,.4)}
#ll-dashboard-v6 .ll-d.sel{box-shadow:0 0 0 2px var(--ink);transform:scale(1.4);z-index:2}
#ll-dashboard-v6 .ll-d .pips{position:absolute;bottom:2px;display:flex;gap:1.5px}
#ll-dashboard-v6 .ll-d .pips i{width:3px;height:3px;border-radius:50%}
/* --- day / detail side panel --- */
#ll-dashboard-v6 .ll-panel{padding:22px;position:sticky;top:16px}
#ll-dashboard-v6 .ll-panel .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .ll-panel .pdate{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--gold-ink);line-height:1.2}
#ll-dashboard-v6 .ll-panel .x{border:0;background:0;font-size:16px;color:var(--ink-3);cursor:pointer}
#ll-dashboard-v6 .ll-panel .pmeta{font-size:12px;color:var(--ink-3);margin:2px 0 16px}
#ll-dashboard-v6 .pe{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:10px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .pe .pet{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .pe .ttl{font-size:14.5px;font-weight:600;line-height:1.25}
#ll-dashboard-v6 .pe .kind{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
#ll-dashboard-v6 .pe.entry .kind{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .pe.planned .kind{background:#fff;border:1px dashed var(--slate);color:var(--slate)}
#ll-dashboard-v6 .pe.award .kind,#ll-dashboard-v6 .pe.merit .kind{background:rgba(242,180,65,.14);color:var(--gold-ink)}
#ll-dashboard-v6 .pe.goal .kind{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .pe.cert .kind{background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .pe.google .kind{background:rgba(66,133,244,.1);color:var(--gblue)}
#ll-dashboard-v6 .pe .meta{font-size:12px;color:var(--ink-3);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#ll-dashboard-v6 .pe .tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;display:inline-flex;gap:5px;align-items:center;background:var(--paper);color:var(--ink-2)}
#ll-dashboard-v6 .pe .tag i{width:6px;height:6px;border-radius:50%}
#ll-dashboard-v6 .pe .acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
#ll-dashboard-v6 .pe .lnk{font-size:12.5px;font-weight:600;color:var(--teal-deep);cursor:pointer;border:0;background:0;font-family:inherit;padding:0}
#ll-dashboard-v6 .pe .lnk.done{color:var(--orange-deep)}
#ll-dashboard-v6 .ll-panel .pcta{display:block;width:100%;margin-top:6px;text-align:center;border:1px dashed var(--line-2,#DBE1ED);background:transparent;color:var(--teal-deep);padding:12px;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .ll-panel .pcta:hover{border-color:var(--teal);background:rgba(14,159,139,.07)}
#ll-dashboard-v6 .ll-panel .empty{text-align:center;color:var(--ink-3);padding:30px 10px}
/* --- progression line + chip --- */
#ll-dashboard-v6 .pl{border:1px solid var(--line);border-radius:var(--r);margin-top:13px;overflow:hidden;border-left:4px solid var(--teal)}
#ll-dashboard-v6 .pl.done{border-left-color:var(--gold)}
#ll-dashboard-v6 .pl.open{box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .pl-head{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
#ll-dashboard-v6 .pl-chev{width:26px;height:26px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:transform .25s}
#ll-dashboard-v6 .pl.open .pl-chev{transform:rotate(90deg);background:rgba(14,159,139,.12)}
#ll-dashboard-v6 .pl-chev svg{width:14px;height:14px;color:var(--ink-2)}
#ll-dashboard-v6 .pl-id .tt{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#ll-dashboard-v6 .pl-type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .pl-type.project{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .pl-type.task{background:rgba(59,130,246,.1);color:var(--blue-ink)}
#ll-dashboard-v6 .pl-subs{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
#ll-dashboard-v6 .pl-subs i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
#ll-dashboard-v6 .pl-status{text-align:right;font-size:14px;font-weight:700;color:var(--orange-deep);white-space:nowrap}
#ll-dashboard-v6 .pl.done .pl-status{color:var(--gold-ink)}
#ll-dashboard-v6 .pl-track{grid-column:2 / 4;position:relative;height:8px;background:var(--paper);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);margin-top:11px}
#ll-dashboard-v6 .pl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-bright));transition:width .5s cubic-bezier(.4,0,.2,1)}
#ll-dashboard-v6 .pl.done .pl-fill{background:linear-gradient(90deg,var(--gold),#FFD27A)}
#ll-dashboard-v6 .pl-mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2,#DBE1ED)}
#ll-dashboard-v6 .pl-mk.on{border-color:var(--teal);background:var(--teal)}
#ll-dashboard-v6 .pl.done .pl-mk.on{border-color:var(--gold);background:var(--gold)}
#ll-dashboard-v6 .pl-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(249,115,22,.5),0 0 0 3px rgba(249,115,22,.18);z-index:2;transition:left .5s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .pl.done .pl-node{background:var(--teal);box-shadow:0 2px 8px rgba(14,159,139,.5),0 0 0 3px rgba(14,159,139,.18)}
#ll-dashboard-v6 .pl-node svg{width:9px;height:9px;color:#fff}
#ll-dashboard-v6 .pl-body{display:none;padding:0 16px 18px 56px}
#ll-dashboard-v6 .pl.open .pl-body{display:block}
#ll-dashboard-v6 .upd{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:4px 0 16px}
#ll-dashboard-v6 .upd .lab{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
#ll-dashboard-v6 .upd .ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#ll-dashboard-v6 .upd input[type=range]{flex:1;min-width:140px;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--line-2,#DBE1ED);outline:none}
#ll-dashboard-v6 .upd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(249,115,22,.5);cursor:pointer}
#ll-dashboard-v6 .upd input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--orange);border:3px solid #fff;cursor:pointer}
#ll-dashboard-v6 .upd .pv{font-size:20px;font-weight:700;color:var(--orange-deep);min-width:54px;text-align:center}
#ll-dashboard-v6 .upd .note{width:100%;margin-top:10px;border:1px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:9px 11px;font-family:inherit;font-size:13px;background:#fff}
#ll-dashboard-v6 .upd .row2{display:flex;align-items:center;gap:8px;margin-top:10px}
#ll-dashboard-v6 .upd .save{margin-left:auto;border:0;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;border-radius:999px;padding:9px 16px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#ll-dashboard-v6 .th{font-size:12.5px;font-weight:700;margin-bottom:11px}
#ll-dashboard-v6 .thread{position:relative;padding-left:17px}
#ll-dashboard-v6 .thread::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line-2,#DBE1ED)}
#ll-dashboard-v6 .ut{position:relative;margin-bottom:12px}
#ll-dashboard-v6 .ut .nd{position:absolute;left:-17px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2,#DBE1ED)}
#ll-dashboard-v6 .ut.last .nd{background:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
#ll-dashboard-v6 .ut .top{display:flex;align-items:baseline;gap:7px}
#ll-dashboard-v6 .ut .pc{font-size:13px;font-weight:700}
#ll-dashboard-v6 .ut .dl{font-size:10.5px;font-weight:700;color:var(--teal-deep)}
#ll-dashboard-v6 .ut .dl.dn{color:var(--orange-deep)}
#ll-dashboard-v6 .ut .dt{font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .ut .nt{font-size:12px;color:var(--ink-2);font-style:italic;margin-top:1px}
#ll-dashboard-v6 .sess .se{font-size:12.5px;margin-bottom:9px}
#ll-dashboard-v6 .sess .se b{font-weight:600;display:block}
#ll-dashboard-v6 .sess .muted{color:var(--ink-3);font-size:12px}
#ll-dashboard-v6 .ll-plchip{display:flex;flex-direction:column;gap:5px;min-width:160px;max-width:220px}
#ll-dashboard-v6 .ll-plchip .lbl{font-size:11.5px;color:var(--ink-2)}
#ll-dashboard-v6 .ll-plchip .lbl b{color:var(--orange-deep);font-weight:700}
#ll-dashboard-v6 .ll-plchip.done .lbl b{color:var(--gold-ink)}
#ll-dashboard-v6 .ll-plchip .mtrack{position:relative;height:6px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
#ll-dashboard-v6 .ll-plchip .mfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
#ll-dashboard-v6 .ll-plchip.done .mfill{background:linear-gradient(90deg,var(--gold),#FFD27A)}
#ll-dashboard-v6 .ll-plchip .mnode{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 1px 4px rgba(249,115,22,.5)}
#ll-dashboard-v6 .ll-plchip.done .mnode{background:var(--teal)}
/* --- award modal --- */
#ll-dashboard-v6 .awmod{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .awmod.open{display:flex}
#ll-dashboard-v6 .awbg{position:fixed;inset:0;background:rgba(7,15,38,.55);backdrop-filter:blur(3px)}
#ll-dashboard-v6 .awcard{position:relative;z-index:1;width:min(440px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:24px}
#ll-dashboard-v6 .awcard h3{font-size:18px;font-weight:700;margin-bottom:4px}
#ll-dashboard-v6 .awfor{font-size:13px;color:var(--ink-3);margin-bottom:16px}
#ll-dashboard-v6 .awtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
#ll-dashboard-v6 .awt{border:1.5px solid var(--line-2,#DBE1ED);background:#fff;border-radius:var(--r);padding:13px 8px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
#ll-dashboard-v6 .awt .ic{font-size:20px}
#ll-dashboard-v6 .awt .nm{font-size:12.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .awt[data-on="1"].merit{border-color:var(--gold);background:rgba(242,180,65,.1)}#ll-dashboard-v6 .awt[data-on="1"].merit .nm{color:var(--gold-ink)}
#ll-dashboard-v6 .awt[data-on="1"].goal{border-color:var(--teal);background:rgba(14,159,139,.08)}#ll-dashboard-v6 .awt[data-on="1"].goal .nm{color:var(--teal-deep)}
#ll-dashboard-v6 .awt[data-on="1"].cert{border-color:var(--violet);background:rgba(124,92,230,.08)}#ll-dashboard-v6 .awt[data-on="1"].cert .nm{color:var(--violet-deep)}
#ll-dashboard-v6 .awcard label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
#ll-dashboard-v6 .awcard .req{color:var(--gold-ink);font-weight:500}
#ll-dashboard-v6 .awcard textarea{width:100%;min-height:74px;border:1.5px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
#ll-dashboard-v6 .awcard textarea:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .awerr{display:none;color:#C2410C;font-size:12.5px;margin-top:7px}
#ll-dashboard-v6 .awerr.show{display:block}
#ll-dashboard-v6 .awfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#ll-dashboard-v6 .awfoot .cancel{border:1px solid var(--line-2,#DBE1ED);background:#fff;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .awfoot .confirm{border:0;background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));color:#fff;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:600;cursor:pointer}
/* ===== end v6 foundation ===== */
/* ===== My Record (v6) — view-specific sections (inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .llmr-sec{padding:20px 22px;margin-bottom:18px}
#ll-dashboard-v6 .llv6-skin .llmr-sec-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
#ll-dashboard-v6 .llv6-skin .llmr-sec-h h2{font-size:16px;font-weight:700}
#ll-dashboard-v6 .llv6-skin .llmr-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
#ll-dashboard-v6 .llv6-skin .llmr-legend span{display:inline-flex;align-items:center;gap:5px}
#ll-dashboard-v6 .llv6-skin .llmr-legend i{width:9px;height:9px;border-radius:3px}
#ll-dashboard-v6 .llv6-skin .llmr-chartwrap{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:4px}
#ll-dashboard-v6 .llv6-skin .llmr-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:180px;text-align:right;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
#ll-dashboard-v6 .llv6-skin .llmr-yaxis span{line-height:1}
#ll-dashboard-v6 .llv6-skin .llmr-plot{position:relative;min-width:0}
#ll-dashboard-v6 .llv6-skin .llmr-grid{position:absolute;left:0;right:0;top:0;height:180px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
#ll-dashboard-v6 .llv6-skin .llmr-grid i{display:block;height:1px;background:var(--line)}
#ll-dashboard-v6 .llv6-skin .llmr-cols{position:relative;display:flex;align-items:flex-start;gap:22px;overflow:visible;padding-bottom:2px;flex-wrap:wrap}
#ll-dashboard-v6 .llv6-skin .llmr-col{position:relative;flex:0 0 64px;width:64px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
#ll-dashboard-v6 .llv6-skin .llmr-col:focus{outline:none}
#ll-dashboard-v6 .llv6-skin .llmr-col:focus .llmr-bar,#ll-dashboard-v6 .llv6-skin .llmr-col:hover .llmr-bar{box-shadow:0 0 0 2px rgba(14,159,139,.3);border-radius:8px}
#ll-dashboard-v6 .llv6-skin .llmr-pop{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;z-index:30;min-width:158px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--depth);padding:10px 12px;text-align:left}
#ll-dashboard-v6 .llv6-skin .llmr-col:hover .llmr-pop,#ll-dashboard-v6 .llv6-skin .llmr-col:focus .llmr-pop,#ll-dashboard-v6 .llv6-skin .llmr-col:focus-within .llmr-pop{display:block}
#ll-dashboard-v6 .llv6-skin .llmr-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff}
#ll-dashboard-v6 .llv6-skin .llmr-pop-h{font-size:11.5px;font-weight:700;margin-bottom:7px;white-space:nowrap;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .llmr-poprow{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:11.5px;margin-bottom:4px;white-space:nowrap}
#ll-dashboard-v6 .llv6-skin .llmr-poprow:last-child{margin-bottom:0}
#ll-dashboard-v6 .llv6-skin .llmr-poprow .sw{width:10px;height:10px;border-radius:3px}
#ll-dashboard-v6 .llv6-skin .llmr-poprow .nm{color:var(--ink-2)}
#ll-dashboard-v6 .llv6-skin .llmr-poprow .dur{color:var(--ink-3);font-weight:600}
#ll-dashboard-v6 .llv6-skin .llmr-bar{position:relative;width:100%;height:180px;display:flex;flex-direction:column;justify-content:flex-end}
#ll-dashboard-v6 .llv6-skin .llmr-stack{width:100%;display:flex;flex-direction:column-reverse;border-radius:7px 7px 0 0;overflow:hidden;min-height:3px;box-shadow:0 1px 3px rgba(16,27,61,.12)}
#ll-dashboard-v6 .llv6-skin .llmr-seg{width:100%;min-height:2px;transition:flex-grow .5s cubic-bezier(.4,0,.2,1)}
#ll-dashboard-v6 .llv6-skin .llmr-lab{font-size:11.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llv6-skin .llmr-tot{font-size:10.5px;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-skin .llmr-shelves{display:flex;flex-direction:column;gap:2px}
#ll-dashboard-v6 .llv6-skin .llmr-shelf{display:grid;grid-template-columns:12px 150px 150px 1fr;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llv6-skin .llmr-shelf:last-child{border-bottom:0}
#ll-dashboard-v6 .llv6-skin .llmr-sw{width:12px;height:12px;border-radius:4px}
#ll-dashboard-v6 .llv6-skin .llmr-nm{font-size:14px;font-weight:600}
#ll-dashboard-v6 .llv6-skin .llmr-meta{font-size:12.5px;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-skin .llmr-rec{display:flex;gap:6px;flex-wrap:wrap;overflow:hidden}
#ll-dashboard-v6 .llv6-skin .llmr-ec{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
@media(max-width:780px){
#ll-dashboard-v6 .llv6-skin .llmr-shelf{grid-template-columns:12px 1fr;gap:8px}
#ll-dashboard-v6 .llv6-skin .llmr-meta,#ll-dashboard-v6 .llv6-skin .llmr-rec{grid-column:2}
}
/* ===== end My Record (v6) ===== */
/* ===== Gallery (v6 re-skin — inside .llv6-skin; wiring untouched) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-gal-grid{gap:18px}
#ll-dashboard-v6 .llv6-skin .llv6-gal-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);overflow:hidden;background:var(--card);transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s}
#ll-dashboard-v6 .llv6-skin .llv6-gal-card:hover,#ll-dashboard-v6 .llv6-skin .llv6-gal-card:focus-visible{transform:translateY(-3px);box-shadow:var(--depth);outline:none}
#ll-dashboard-v6 .llv6-skin .llv6-gal-card:focus-visible{box-shadow:var(--depth),0 0 0 2px rgba(14,159,139,.35)}
#ll-dashboard-v6 .llv6-skin .llv6-gal-body{padding:14px 15px 16px}
#ll-dashboard-v6 .llv6-skin .llv6-gal-meta{font-size:12px;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-skin .llv6-gal-title{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:3px;line-height:1.3}
#ll-dashboard-v6 .llv6-skin .llv6-gal-chips{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
/* ===== end Gallery (v6) ===== */
/* ===== Parent Insights (v6 re-skin — inside .llv6-skin; wiring untouched) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-ipanel{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);background:var(--card);overflow:hidden;margin-bottom:14px}
#ll-dashboard-v6 .llv6-skin .llv6-ipanel-title{font-size:15.5px;font-weight:700;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .llv6-ipanel-meta{font-size:12px;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-skin .llv6-window-pills{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llv6-skin .llv6-window-pill{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .llv6-skin .llv6-window-pill--active{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,27,61,.6)}
#ll-dashboard-v6 .llv6-skin .llv6-custom-date-chip{border:1px solid var(--line-2,#DBE1ED);border-radius:999px;background:var(--card);box-shadow:var(--depth-sm)}
/* ===== end Parent Insights (v6) ===== */
/* ===== Dashboard (v6 re-skin — inside .llv6-skin; wiring untouched) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);background:var(--card)}
#ll-dashboard-v6 .llv6-skin .llv6-card-title{font-size:15.5px;font-weight:700;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .llv6-link-btn{color:var(--teal-deep);font-weight:600}
#ll-dashboard-v6 .llv6-skin .llv6-primary-btn{background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));border:0;color:#fff;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
/* ===== end Dashboard (v6) ===== */
/* ===== Goals & Merits (v6 re-skin — inside .llv6-skin; wiring untouched) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-gm-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);background:var(--card)}
#ll-dashboard-v6 .llv6-skin .llv6-gm-ov-weeks{color:var(--gold-ink);font-weight:700}
#ll-dashboard-v6 .llv6-skin .llv6-gm-stat-n{font-size:24px;font-weight:700;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .llv6-gm-stat-l{font-size:11.5px;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-skin .llv6-cert-cta{border:1px solid var(--gold);background:rgba(242,180,65,.1);color:var(--gold-ink);border-radius:999px;padding:10px 16px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llv6-skin .llv6-gm-progbar-fill{background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
/* ===== end Goals & Merits (v6) ===== */
/* ===== Journal Entries (v6 re-skin — inside .llv6-skin; wiring untouched) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-entry{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);background:var(--card);transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s}
#ll-dashboard-v6 .llv6-skin .llv6-entry:hover{transform:translateY(-2px);box-shadow:var(--depth)}
#ll-dashboard-v6 .llv6-skin .llv6-searchbar input{border:1px solid var(--line-2,#DBE1ED);border-radius:999px;background:var(--card)}
#ll-dashboard-v6 .llv6-skin .llv6-ghost-btn{border:1px solid var(--line-2,#DBE1ED);border-radius:999px;background:var(--card);color:var(--ink-2);font-weight:600}
#ll-dashboard-v6 .llv6-skin .llv6-ghost-btn.is-on{border-color:var(--teal);color:var(--teal-deep);background:rgba(14,159,139,.08)}
/* ===== end Journal Entries (v6) ===== */
/* ===== Progression Lines section (v6, in Goals & Merits — inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .ll-lines-sec{padding:20px 22px}
#ll-dashboard-v6 .llv6-skin .ll-lines-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
#ll-dashboard-v6 .llv6-skin .ll-lines-title{font-size:16px;font-weight:700;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .ll-lines-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px;max-width:62ch}
#ll-dashboard-v6 .llv6-skin .ll-lines-addbtn{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:9px 16px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
#ll-dashboard-v6 .llv6-skin .ll-lines-create{display:none;gap:10px;margin-top:14px;flex-wrap:wrap}
#ll-dashboard-v6 .llv6-skin .ll-lines-create.is-open{display:flex}
#ll-dashboard-v6 .llv6-skin .ll-lines-create input{flex:1;min-width:200px;border:1.5px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px}
#ll-dashboard-v6 .llv6-skin .ll-lines-create input:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llv6-skin .ll-lines-create select{border:1.5px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;background:#fff}
#ll-dashboard-v6 .llv6-skin .ll-lines-create button{border:0;background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));color:#fff;border-radius:999px;padding:10px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llv6-skin #ll-lines-mount{margin-top:12px}
/* ===== end Progression Lines section ===== */
/* ===== Dashboard Progression headline (v6 — inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .ll-dashpl-card{margin-bottom:18px}
#ll-dashboard-v6 .llv6-skin .ll-dashpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
#ll-dashboard-v6 .llv6-skin .ll-dashpl-tt{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.3}
/* ===== end Dashboard Progression headline ===== */
/* ===== Certificate ledger (v6 — in Goals & Merits, inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .ll-cert-ledger{padding:20px 22px}
#ll-dashboard-v6 .llv6-skin .ll-cert-list{margin-top:12px;display:flex;flex-direction:column;gap:2px}
#ll-dashboard-v6 .llv6-skin .ll-cert-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llv6-skin .ll-cert-row:last-child{border-bottom:0}
#ll-dashboard-v6 .llv6-skin .ll-cert-ico{font-size:18px;flex:0 0 auto}
#ll-dashboard-v6 .llv6-skin .ll-cert-t{font-size:14px;font-weight:600;color:var(--ink)}
#ll-dashboard-v6 .llv6-skin .ll-cert-meta{font-size:12px;color:var(--ink-3);margin-top:1px}
/* ===== end Certificate ledger ===== */
/* ===== Merit reason field (v6 — merit modal, not skin-scoped) ===== */
#ll-dashboard-v6 .llv6-merit-reason-lbl{display:block;margin-top:15px;font-size:13px;font-weight:600;color:var(--ink)}
#ll-dashboard-v6 .llv6-merit-reason-lbl span{font-weight:400;color:var(--ink-3)}
#ll-dashboard-v6 .llv6-merit-reason{width:100%;margin-top:7px;border:1.5px solid var(--line-2,#DBE1ED);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:14px;resize:vertical;box-sizing:border-box}
#ll-dashboard-v6 .llv6-merit-reason:focus{outline:none;border-color:var(--teal-deep)}
/* ===== end Merit reason field ===== */
/* ===== Awards history (v6 — Goals & Merits, inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .ll-aw-card{padding:20px 22px}
#ll-dashboard-v6 .llv6-skin .ll-aw-list{margin-top:12px;display:flex;flex-direction:column;gap:2px}
#ll-dashboard-v6 .llv6-skin .ll-aw-row{display:flex;align-items:flex-start;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llv6-skin .ll-aw-row:last-child{border-bottom:0}
#ll-dashboard-v6 .llv6-skin .ll-aw-ico{font-size:16px;flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .llv6-skin .ll-aw-ico.merit{background:rgba(242,180,65,.14)}
#ll-dashboard-v6 .llv6-skin .ll-aw-ico.goal{background:rgba(14,159,139,.1)}
#ll-dashboard-v6 .llv6-skin .ll-aw-ico.cert{background:rgba(124,92,230,.1)}
#ll-dashboard-v6 .llv6-skin .ll-aw-what{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
#ll-dashboard-v6 .llv6-skin .ll-aw-meta{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;flex-wrap:wrap;align-items:center}
#ll-dashboard-v6 .llv6-skin .ll-aw-tag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-right:2px}
#ll-dashboard-v6 .llv6-skin .ll-aw-tag.merit{background:rgba(242,180,65,.14);color:var(--gold-ink)}
#ll-dashboard-v6 .llv6-skin .ll-aw-tag.goal{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llv6-skin .ll-aw-tag.cert{background:rgba(124,92,230,.1);color:var(--violet-deep)}
/* ===== end Awards history ===== */
/* ===== Entry progression chips (v6 — linked Journal entries, inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-entry-plchips{margin-top:11px;display:flex;flex-wrap:wrap;gap:14px}
#ll-dashboard-v6 .llv6-skin .llv6-entry-plchip{display:flex;flex-direction:column;gap:5px}
#ll-dashboard-v6 .llv6-skin .llv6-entry-plchip .t{font-size:11.5px;font-weight:600;color:var(--ink-2)}
/* allow the create-form selects to share a row */
#ll-dashboard-v6 .llv6-skin #ll-lines-project{border:1.5px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;background:#fff}
/* ===== end Entry progression chips ===== */
/* ===== Planned events (v6 — Calendar, inside .llv6-skin) ===== */
#ll-dashboard-v6 .llv6-skin .llv6-cal-planned-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--slate);bottom:6px;right:6px}
#ll-dashboard-v6 .llv6-skin .llv6-cal-day.has-planned{position:relative}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-head{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-head span{background:var(--slate);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:4px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px dashed var(--slate);border-radius:var(--r);padding:10px 12px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-t{font-size:14px;font-weight:600;color:var(--ink);display:block}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-subj{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:block}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-done{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:6px 11px;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-rm{border:0;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-add{display:flex;gap:8px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-add input{flex:1;border:1.5px solid var(--line-2,#DBE1ED);border-radius:var(--r-sm);padding:9px 11px;font-family:inherit;font-size:13.5px}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-add input:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llv6-skin .ll-cal-plan-add button{border:0;background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));color:#fff;border-radius:999px;padding:9px 14px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
/* ===== end Planned events ===== */
/* ===== Dashboard v6 — full mockup rebuild (scoped to .lldash-v6) ===== */
#ll-dashboard-v6 .lldash-v6{
--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;--blue-ink:#1E5FC4;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;--green:#16A34A;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .lldash-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .lldash-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .lldash-v6 .ll-wrap{max-width:1240px;margin:0 auto}
#ll-dashboard-v6 .lldash-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
#ll-dashboard-v6 .lldash-v6 .ll-head h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-bottom:6px}
#ll-dashboard-v6 .lldash-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--gold-ink)}
#ll-dashboard-v6 .lldash-v6 .ll-head p{color:var(--ink-2);font-size:15.5px}
#ll-dashboard-v6 .lldash-v6 .ll-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ll-dashboard-v6 .lldash-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .lldash-v6 .ll-cta svg{width:17px;height:17px}
/* child filter */
#ll-dashboard-v6 .lldash-v6 .kids-seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .lldash-v6 .kids-seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#ll-dashboard-v6 .lldash-v6 .kids-seg button[data-on="1"]{background:var(--ink);color:#fff}
#ll-dashboard-v6 .lldash-v6 .kids-seg .av{width:18px;height:18px;border-radius:50%;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff}
/* cards + grids */
#ll-dashboard-v6 .lldash-v6 .ll-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth)}
#ll-dashboard-v6 .lldash-v6 .sec{padding:20px 22px;margin-bottom:18px}
#ll-dashboard-v6 .lldash-v6 .sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#ll-dashboard-v6 .lldash-v6 .sec-h h2{font-size:16px;font-weight:700}
#ll-dashboard-v6 .lldash-v6 .sec-h .sub{font-size:12px;color:var(--ink-3);font-weight:500}
/* quartet */
#ll-dashboard-v6 .lldash-v6 .quartet{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
#ll-dashboard-v6 .lldash-v6 .q{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);padding:18px}
#ll-dashboard-v6 .lldash-v6 .q .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}
#ll-dashboard-v6 .lldash-v6 .q.q0 .ic{background:rgba(14,159,139,.12)}#ll-dashboard-v6 .lldash-v6 .q.q1 .ic{background:rgba(59,130,246,.12)}#ll-dashboard-v6 .lldash-v6 .q.q2 .ic{background:rgba(124,92,230,.12)}#ll-dashboard-v6 .lldash-v6 .q.q3 .ic{background:rgba(242,180,65,.16)}
#ll-dashboard-v6 .lldash-v6 .q .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1}
#ll-dashboard-v6 .lldash-v6 .q .k{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:4px}
#ll-dashboard-v6 .lldash-v6 .plnew{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:#fff;color:var(--teal-deep);border-radius:999px;padding:8px 14px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
/* ---- progression line (canonical) ---- */
#ll-dashboard-v6 .lldash-v6 .pl{border:1px solid var(--line);border-radius:var(--r);margin-top:13px;overflow:hidden;border-left:4px solid var(--teal)}
#ll-dashboard-v6 .lldash-v6 .pl.done{border-left-color:var(--gold)}
#ll-dashboard-v6 .lldash-v6 .pl.open{box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .lldash-v6 .pl-head{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
#ll-dashboard-v6 .lldash-v6 .pl-chev{width:26px;height:26px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:transform .25s}
#ll-dashboard-v6 .lldash-v6 .pl.open .pl-chev{transform:rotate(90deg);background:rgba(14,159,139,.12)}
#ll-dashboard-v6 .lldash-v6 .pl-chev svg{width:14px;height:14px;color:var(--ink-2)}
#ll-dashboard-v6 .lldash-v6 .pl-id .tt{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#ll-dashboard-v6 .lldash-v6 .pl-type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .lldash-v6 .pl-type.project{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .lldash-v6 .pl-type.task{background:rgba(59,130,246,.1);color:#1E5FC4}
#ll-dashboard-v6 .lldash-v6 .pl-subs{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
#ll-dashboard-v6 .lldash-v6 .pl-subs i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
#ll-dashboard-v6 .lldash-v6 .pl-status{text-align:right;font-size:14px;font-weight:700;color:var(--orange-deep);white-space:nowrap}
#ll-dashboard-v6 .lldash-v6 .pl.done .pl-status{color:var(--gold-ink)}
#ll-dashboard-v6 .lldash-v6 .pl-track{grid-column:2 / 4;position:relative;height:8px;background:var(--paper);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);margin-top:11px}
#ll-dashboard-v6 .lldash-v6 .pl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-soft));transition:width .5s cubic-bezier(.4,0,.2,1)}
#ll-dashboard-v6 .lldash-v6 .pl.done .pl-fill{background:linear-gradient(90deg,var(--gold),#FFD27A)}
#ll-dashboard-v6 .lldash-v6 .pl-mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2)}
#ll-dashboard-v6 .lldash-v6 .pl-mk.on{border-color:var(--teal);background:var(--teal)}
#ll-dashboard-v6 .lldash-v6 .pl.done .pl-mk.on{border-color:var(--gold);background:var(--gold)}
#ll-dashboard-v6 .lldash-v6 .pl-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(249,115,22,.5),0 0 0 3px rgba(249,115,22,.18);z-index:2;transition:left .5s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lldash-v6 .pl.done .pl-node{background:var(--teal);box-shadow:0 2px 8px rgba(14,159,139,.5),0 0 0 3px rgba(14,159,139,.18)}
#ll-dashboard-v6 .lldash-v6 .pl-node svg{width:9px;height:9px;color:#fff}
#ll-dashboard-v6 .lldash-v6 .pl-body{display:none;padding:0 16px 18px 56px}
#ll-dashboard-v6 .lldash-v6 .pl.open .pl-body{display:block}
#ll-dashboard-v6 .lldash-v6 .upd{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:4px 0 16px}
#ll-dashboard-v6 .lldash-v6 .upd .lab{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
#ll-dashboard-v6 .lldash-v6 .upd .ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#ll-dashboard-v6 .lldash-v6 .upd input[type=range]{flex:1;min-width:140px;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--line-2);outline:none}
#ll-dashboard-v6 .lldash-v6 .upd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(249,115,22,.5);cursor:pointer}
#ll-dashboard-v6 .lldash-v6 .upd .pv{font-size:20px;font-weight:700;color:var(--orange-deep);min-width:54px;text-align:center}
#ll-dashboard-v6 .lldash-v6 .upd .note{width:100%;margin-top:10px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;font-family:inherit;font-size:13px;background:#fff}
#ll-dashboard-v6 .lldash-v6 .upd .row2{display:flex;align-items:center;gap:8px;margin-top:10px}
#ll-dashboard-v6 .lldash-v6 .upd .save{margin-left:auto;border:0;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;border-radius:999px;padding:9px 16px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .lldash-v6 .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#ll-dashboard-v6 .lldash-v6 .th{font-size:12.5px;font-weight:700;margin-bottom:11px}
#ll-dashboard-v6 .lldash-v6 .thread{position:relative;padding-left:17px}
#ll-dashboard-v6 .lldash-v6 .thread::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line-2)}
#ll-dashboard-v6 .lldash-v6 .ut{position:relative;margin-bottom:12px}
#ll-dashboard-v6 .lldash-v6 .ut .nd{position:absolute;left:-17px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
#ll-dashboard-v6 .lldash-v6 .ut.last .nd{background:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
#ll-dashboard-v6 .lldash-v6 .ut .top{display:flex;align-items:baseline;gap:7px}
#ll-dashboard-v6 .lldash-v6 .ut .pc{font-size:13px;font-weight:700}
#ll-dashboard-v6 .lldash-v6 .ut .dl{font-size:10.5px;font-weight:700;color:var(--teal-deep)}#ll-dashboard-v6 .lldash-v6 .ut .dl.dn{color:var(--orange-deep)}
#ll-dashboard-v6 .lldash-v6 .ut .dt{font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .lldash-v6 .ut .nt{font-size:12px;color:var(--ink-2);font-style:italic;margin-top:1px}
#ll-dashboard-v6 .lldash-v6 .sess .se{font-size:12.5px;margin-bottom:9px}#ll-dashboard-v6 .lldash-v6 .sess .se b{font-weight:600;display:block}#ll-dashboard-v6 .lldash-v6 .sess .muted{color:var(--ink-3);font-size:12px}
/* lower grid */
#ll-dashboard-v6 .lldash-v6 .g2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:18px}
#ll-dashboard-v6 .lldash-v6 .g2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
/* recent + whats next lists */
#ll-dashboard-v6 .lldash-v6 .row{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .lldash-v6 .row:last-child{border-bottom:0}
#ll-dashboard-v6 .lldash-v6 .row .dt{flex:0 0 52px;text-align:center}
#ll-dashboard-v6 .lldash-v6 .row .dt .day{font-size:17px;font-weight:700;line-height:1}#ll-dashboard-v6 .lldash-v6 .row .dt .mo{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;font-weight:600}
#ll-dashboard-v6 .lldash-v6 .row .b{flex:1}#ll-dashboard-v6 .lldash-v6 .row .b .t{font-size:14px;font-weight:600}
#ll-dashboard-v6 .lldash-v6 .row .b .m{font-size:11.5px;color:var(--ink-3);display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:2px}
#ll-dashboard-v6 .lldash-v6 .row .b .m i{width:7px;height:7px;border-radius:50%;display:inline-block}
#ll-dashboard-v6 .lldash-v6 .row.plan .dt .day{color:var(--slate)}
#ll-dashboard-v6 .lldash-v6 .pchip{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);border:1px dashed var(--slate);border-radius:999px;padding:2px 8px}
/* donut */
#ll-dashboard-v6 .lldash-v6 .donutwrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
#ll-dashboard-v6 .lldash-v6 .donut{width:150px;height:150px;border-radius:50%;position:relative;flex:0 0 150px}
#ll-dashboard-v6 .lldash-v6 .donut .hole{position:absolute;inset:30px;background:var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#ll-dashboard-v6 .lldash-v6 .donut .hole .v{font-size:20px;font-weight:700}#ll-dashboard-v6 .lldash-v6 .donut .hole .k{font-size:10px;color:var(--ink-3);font-weight:600}
#ll-dashboard-v6 .lldash-v6 .dleg{flex:1;min-width:160px}
#ll-dashboard-v6 .lldash-v6 .dleg .li{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:8px}
#ll-dashboard-v6 .lldash-v6 .dleg .li i{width:11px;height:11px;border-radius:3px}#ll-dashboard-v6 .lldash-v6 .dleg .li .nm{font-weight:500}#ll-dashboard-v6 .lldash-v6 .dleg .li .pc{margin-left:auto;color:var(--ink-3);font-size:12px;font-weight:600}
/* time bars */
#ll-dashboard-v6 .lldash-v6 .bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;align-items:end;height:160px;padding-top:6px}
#ll-dashboard-v6 .lldash-v6 .bcol{display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
#ll-dashboard-v6 .lldash-v6 .bcol .bk{width:100%;max-width:34px;flex:1;display:flex;align-items:end}
#ll-dashboard-v6 .lldash-v6 .bcol .bf{width:100%;border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,var(--teal-soft),var(--teal-deep));min-height:3px;transition:.3s}
#ll-dashboard-v6 .lldash-v6 .bcol.today .bf{background:linear-gradient(180deg,var(--gold),var(--gold-ink))}
#ll-dashboard-v6 .lldash-v6 .bcol .bl{font-size:11px;color:var(--ink-3);font-weight:600}#ll-dashboard-v6 .lldash-v6 .bcol .bv{font-size:10px;color:var(--ink-3)}
/* kid grid */
#ll-dashboard-v6 .lldash-v6 .kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
#ll-dashboard-v6 .lldash-v6 .kid{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .lldash-v6 .kid:hover{box-shadow:var(--depth-sm);transform:translateY(-2px)}
#ll-dashboard-v6 .lldash-v6 .kid .kh{display:flex;align-items:center;gap:11px;margin-bottom:14px}
#ll-dashboard-v6 .lldash-v6 .kid .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--violet));color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lldash-v6 .kid .kn{font-size:15px;font-weight:700}#ll-dashboard-v6 .lldash-v6 .kid .kl{font-size:11.5px;color:var(--ink-3)}
#ll-dashboard-v6 .lldash-v6 .kid .ks{display:flex;gap:16px}
#ll-dashboard-v6 .lldash-v6 .kid .ks .v{font-size:18px;font-weight:700}#ll-dashboard-v6 .lldash-v6 .kid .ks .k{font-size:10.5px;color:var(--ink-3);font-weight:600}
@media(max-width:900px){#ll-dashboard-v6 .lldash-v6 .quartet{grid-template-columns:repeat(2,1fr)}#ll-dashboard-v6 .lldash-v6 .g2,#ll-dashboard-v6 .lldash-v6 .g2b{grid-template-columns:1fr}#ll-dashboard-v6 .lldash-v6 .cols{grid-template-columns:1fr}#ll-dashboard-v6 .lldash-v6 .pl-body{padding-left:16px}}
/* === Dashboard enhancement (2 Jun 2026): interactive quartet · awards overview · recent who === */
#ll-dashboard-v6 .lldash-v6 .q{font:inherit;text-align:left;width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
#ll-dashboard-v6 .lldash-v6 .q:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,27,61,.10);border-color:rgba(14,159,139,.35)}
#ll-dashboard-v6 .lldash-v6 .q:active{transform:translateY(0)}
#ll-dashboard-v6 .lldash-v6 .q:focus-visible{outline:2px solid #0E9F8B;outline-offset:2px}
#ll-dashboard-v6 .lldash-v6 .q .v{font-size:40px}
#ll-dashboard-v6 .lldash-v6 .q .qsub{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
#ll-dashboard-v6 .lldash-v6 .awmore{font:inherit;cursor:pointer;background:none;border:0;padding:0;color:#0B8676;font-size:12.5px;font-weight:700}
#ll-dashboard-v6 .lldash-v6 .awg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0 6px}
#ll-dashboard-v6 .lldash-v6 .awc{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
#ll-dashboard-v6 .lldash-v6 .awc .aco{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 38px}
#ll-dashboard-v6 .lldash-v6 .awc-merit .aco{background:rgba(242,180,65,.16)}
#ll-dashboard-v6 .lldash-v6 .awc-goal .aco{background:rgba(124,92,230,.12)}
#ll-dashboard-v6 .lldash-v6 .awc-cert .aco{background:rgba(14,159,139,.12)}
#ll-dashboard-v6 .lldash-v6 .awc .v{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
#ll-dashboard-v6 .lldash-v6 .awc .k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:3px}
#ll-dashboard-v6 .lldash-v6 .awfeed{margin-top:8px}
#ll-dashboard-v6 .lldash-v6 .awrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .lldash-v6 .awrow:last-child{border-bottom:0}
#ll-dashboard-v6 .lldash-v6 .awrow .aic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 30px}
#ll-dashboard-v6 .lldash-v6 .awrow .aic-merit{background:rgba(242,180,65,.16)}
#ll-dashboard-v6 .lldash-v6 .awrow .aic-goal{background:rgba(124,92,230,.12)}
#ll-dashboard-v6 .lldash-v6 .awrow .aic-cert{background:rgba(14,159,139,.12)}
#ll-dashboard-v6 .lldash-v6 .awrow .ab{flex:1;min-width:0}
#ll-dashboard-v6 .lldash-v6 .awrow .at{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ll-dashboard-v6 .lldash-v6 .awrow .am{font-size:11.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
#ll-dashboard-v6 .lldash-v6 .awempty{font-size:13px;color:var(--ink-3);padding:10px 0}
#ll-dashboard-v6 .lldash-v6 .row .rwho{flex:0 0 auto;display:flex;align-items:center;padding-left:6px}
#ll-dashboard-v6 .lldash-v6 .row .rav{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;border:2px solid var(--card);margin-left:-6px}
#ll-dashboard-v6 .lldash-v6 .row .rwho .rav:first-child{margin-left:0}
/* ===== end Dashboard v6 rebuild ===== */
/* dashboard v6 — segmented child control uses .ll-kid-seg-btn */
#ll-dashboard-v6 .lldash-v6 .kids-seg .ll-kid-seg-btn{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#ll-dashboard-v6 .lldash-v6 .kids-seg .ll-kid-seg-btn[data-on="1"]{background:var(--ink);color:#fff}
/* ===== Journal v6 — full mockup rebuild (scoped to .lljour-v6) ===== */
#ll-dashboard-v6 .lljour-v6{
--navy-950:#070F26;--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .lljour-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .lljour-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .lljour-v6 .ll-wrap{max-width:980px;margin:0 auto}
#ll-dashboard-v6 .lljour-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px}
#ll-dashboard-v6 .lljour-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
#ll-dashboard-v6 .lljour-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--gold-ink)}
#ll-dashboard-v6 .lljour-v6 .ll-head p{color:var(--ink-2);font-size:15.5px;margin-top:5px}
#ll-dashboard-v6 .lljour-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .lljour-v6 .ll-cta svg{width:17px;height:17px}
/* tools */
#ll-dashboard-v6 .lljour-v6 .gtools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
#ll-dashboard-v6 .lljour-v6 .gsearch{position:relative;flex:1;min-width:220px}
#ll-dashboard-v6 .lljour-v6 .gsearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
#ll-dashboard-v6 .lljour-v6 .gsearch input{width:100%;border:1px solid var(--line-2);background:var(--card);border-radius:999px;padding:12px 16px 12px 42px;font-family:inherit;font-size:14px;color:var(--ink);box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .lljour-v6 .gsearch input:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .lljour-v6 .ll-select{position:relative}
#ll-dashboard-v6 .lljour-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .lljour-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
/* entry card */
#ll-dashboard-v6 .lljour-v6 .feed{display:flex;flex-direction:column;gap:18px}
#ll-dashboard-v6 .lljour-v6 .entry{display:grid;grid-template-columns:210px 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--depth-sm);transition:.2s}
#ll-dashboard-v6 .lljour-v6 .entry:hover{box-shadow:var(--depth)}
#ll-dashboard-v6 .lljour-v6 .eimg{position:relative;min-height:190px;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lljour-v6 .eimg .glyph{font-size:48px;opacity:.92;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
#ll-dashboard-v6 .lljour-v6 .eimg .ecnt{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(7,15,38,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px}
#ll-dashboard-v6 .lljour-v6 .ec{padding:17px 20px 15px;display:flex;flex-direction:column}
#ll-dashboard-v6 .lljour-v6 .etop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#ll-dashboard-v6 .lljour-v6 .who{display:flex;align-items:center;gap:9px}
#ll-dashboard-v6 .lljour-v6 .who .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--violet));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lljour-v6 .who .nm{font-size:13px;font-weight:600;line-height:1.1}
#ll-dashboard-v6 .lljour-v6 .who .mt{font-size:11.5px;color:var(--ink-3)}
#ll-dashboard-v6 .lljour-v6 .erow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#ll-dashboard-v6 .lljour-v6 .eaw{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;display:inline-flex;gap:4px;align-items:center}
#ll-dashboard-v6 .lljour-v6 .eaw.merit{background:rgba(242,180,65,.16);color:var(--gold-ink)}#ll-dashboard-v6 .lljour-v6 .eaw.goal{background:rgba(14,159,139,.1);color:var(--teal-deep)}#ll-dashboard-v6 .lljour-v6 .eaw.cert{background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .lljour-v6 .awbtn{border:1px solid var(--line-2);background:#fff;color:var(--gold-ink);border-radius:999px;padding:6px 12px;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}
#ll-dashboard-v6 .lljour-v6 .awbtn:hover{border-color:var(--gold);background:rgba(242,180,65,.08)}
#ll-dashboard-v6 .lljour-v6 .etitle{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:11px 0 9px;line-height:1.2}
#ll-dashboard-v6 .lljour-v6 .etags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
#ll-dashboard-v6 .lljour-v6 .tg{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;background:var(--paper);color:var(--ink-2)}
#ll-dashboard-v6 .lljour-v6 .tg i{width:7px;height:7px;border-radius:50%}
#ll-dashboard-v6 .lljour-v6 .tg.rec{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .lljour-v6 .tg.book{background:rgba(124,92,230,.08);color:var(--violet-deep)}
#ll-dashboard-v6 .lljour-v6 .esnip{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:11px}
#ll-dashboard-v6 .lljour-v6 .eskills{background:rgba(242,180,65,.08);border:1px solid rgba(242,180,65,.3);border-radius:var(--r);padding:10px 13px;margin-bottom:13px}
#ll-dashboard-v6 .lljour-v6 .eskills .l{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
#ll-dashboard-v6 .lljour-v6 .eskills .t{font-size:12.5px;color:var(--ink-2);line-height:1.5}
#ll-dashboard-v6 .lljour-v6 .efoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
#ll-dashboard-v6 .lljour-v6 .efoot .acts{display:flex;gap:14px}
#ll-dashboard-v6 .lljour-v6 .efoot .lnk{font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border:0;background:0;font-family:inherit;padding:0}
#ll-dashboard-v6 .lljour-v6 .efoot .lnk:hover{color:var(--teal-deep)}
/* progression chip (canonical) */
#ll-dashboard-v6 .lljour-v6 .ll-plchip{display:flex;flex-direction:column;gap:5px;min-width:160px;max-width:220px}
#ll-dashboard-v6 .lljour-v6 .ll-plchip .lbl{font-size:11.5px;color:var(--ink-2)}
#ll-dashboard-v6 .lljour-v6 .ll-plchip .lbl b{color:var(--orange-deep);font-weight:700}
#ll-dashboard-v6 .lljour-v6 .ll-plchip.done .lbl b{color:var(--gold-ink)}
#ll-dashboard-v6 .lljour-v6 .ll-plchip .mtrack{position:relative;height:6px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
#ll-dashboard-v6 .lljour-v6 .ll-plchip .mfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-soft))}
#ll-dashboard-v6 .lljour-v6 .ll-plchip.done .mfill{background:linear-gradient(90deg,var(--gold),#FFD27A)}
#ll-dashboard-v6 .lljour-v6 .ll-plchip .mnode{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 1px 4px rgba(249,115,22,.5)}
#ll-dashboard-v6 .lljour-v6 .ll-plchip.done .mnode{background:var(--teal)}
#ll-dashboard-v6 .lljour-v6 .nofoot{font-size:11.5px;color:var(--ink-3)}
/* award modal */
#ll-dashboard-v6 .lljour-v6 .awmod{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .lljour-v6 .awmod.open{display:flex}
#ll-dashboard-v6 .lljour-v6 .awbg{position:fixed;inset:0;background:rgba(7,15,38,.55);backdrop-filter:blur(3px)}
#ll-dashboard-v6 .lljour-v6 .awcard{position:relative;z-index:1;width:min(440px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:24px}
#ll-dashboard-v6 .lljour-v6 .awcard h3{font-size:18px;font-weight:700;margin-bottom:4px}
#ll-dashboard-v6 .lljour-v6 .awfor{font-size:13px;color:var(--ink-3);margin-bottom:16px}
#ll-dashboard-v6 .lljour-v6 .awtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
#ll-dashboard-v6 .lljour-v6 .awt{border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r);padding:13px 8px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
#ll-dashboard-v6 .lljour-v6 .awt .ic{font-size:20px}#ll-dashboard-v6 .lljour-v6 .awt .nm{font-size:12.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].merit{border-color:var(--gold);background:rgba(242,180,65,.1)}#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].merit .nm{color:var(--gold-ink)}
#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].goal{border-color:var(--teal);background:rgba(14,159,139,.08)}#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].goal .nm{color:var(--teal-deep)}
#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].cert{border-color:var(--violet);background:rgba(124,92,230,.08)}#ll-dashboard-v6 .lljour-v6 .awt[data-on="1"].cert .nm{color:var(--violet-deep)}
#ll-dashboard-v6 .lljour-v6 .awcard label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
#ll-dashboard-v6 .lljour-v6 .awcard .req{color:var(--gold-ink);font-weight:500}
#ll-dashboard-v6 .lljour-v6 .awcard textarea{width:100%;min-height:74px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
#ll-dashboard-v6 .lljour-v6 .awcard textarea:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .lljour-v6 .awerr{display:none;color:#C2410C;font-size:12.5px;margin-top:7px}#ll-dashboard-v6 .lljour-v6 .awerr.show{display:block}
#ll-dashboard-v6 .lljour-v6 .awfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#ll-dashboard-v6 .lljour-v6 .awfoot .cancel{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .lljour-v6 .awfoot .confirm{border:0;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:600;cursor:pointer}
@media(max-width:680px){#ll-dashboard-v6 .lljour-v6 .entry{grid-template-columns:1fr}#ll-dashboard-v6 .lljour-v6 .eimg{min-height:150px}#ll-dashboard-v6 .lljour-v6 .efoot{flex-direction:column;align-items:flex-start;gap:10px}}
/* ===== end Journal v6 rebuild ===== */
/* journal v6 — embed live action controls (merit star / menu / delete / edit) in the card */
#ll-dashboard-v6 .lljour-v6 .efoot .acts{display:flex;align-items:center;gap:10px}
#ll-dashboard-v6 .lljour-v6 .efoot .acts .llv6-merit-star,
#ll-dashboard-v6 .lljour-v6 .efoot .acts .llv6-entry-del,
#ll-dashboard-v6 .lljour-v6 .efoot .acts .llv6-entry-menu-btn{border:0;background:transparent;cursor:pointer;padding:2px;display:inline-flex;align-items:center}
#ll-dashboard-v6 .lljour-v6 .efoot .acts .llv6-entry-menu-wrap{position:relative}
#ll-dashboard-v6 .lljour-v6 .efoot .lnk{font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border:0;background:0;font-family:inherit;padding:0}
#ll-dashboard-v6 .lljour-v6 .efoot .lnk:hover{color:var(--teal-deep)}
#ll-dashboard-v6 .lljour-v6 .erow{min-height:22px}
/* ===== My Record v6 — full mockup rebuild (scoped to .llrec-v6) ===== */
#ll-dashboard-v6 .llrec-v6{
--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;--green:#16A34A;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .llrec-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .llrec-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .llrec-v6 .ll-wrap{max-width:1180px;margin:0 auto}
#ll-dashboard-v6 .llrec-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
#ll-dashboard-v6 .llrec-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
#ll-dashboard-v6 .llrec-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:#B07A20}
#ll-dashboard-v6 .llrec-v6 .ll-head p{color:var(--ink-2);font-size:16px;max-width:56ch}
#ll-dashboard-v6 .llrec-v6 .ll-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ll-dashboard-v6 .llrec-v6 .ll-select{position:relative}
#ll-dashboard-v6 .llrec-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llrec-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
#ll-dashboard-v6 .llrec-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .llrec-v6 .ll-cta svg{width:17px;height:17px}
#ll-dashboard-v6 .llrec-v6 .ll-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth)}
#ll-dashboard-v6 .llrec-v6 .sec{padding:22px 24px;margin-bottom:20px}
#ll-dashboard-v6 .llrec-v6 .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
#ll-dashboard-v6 .llrec-v6 .sec-h h2{font-size:17px;font-weight:700}
#ll-dashboard-v6 .llrec-v6 .sec-h .sub{font-size:12.5px;color:var(--ink-3);font-weight:500}
/* ribbon */
#ll-dashboard-v6 .llrec-v6 .ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
#ll-dashboard-v6 .llrec-v6 .rb{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);padding:16px 18px}
#ll-dashboard-v6 .llrec-v6 .rb .v{font-size:26px;font-weight:700;letter-spacing:-.02em}
#ll-dashboard-v6 .llrec-v6 .rb .k{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:2px}
#ll-dashboard-v6 .llrec-v6 .rb.r0 .v{color:var(--teal-deep)}#ll-dashboard-v6 .llrec-v6 .rb.r1 .v{color:var(--gold-ink)}#ll-dashboard-v6 .llrec-v6 .rb.r2 .v{color:var(--violet-deep)}#ll-dashboard-v6 .llrec-v6 .rb.r3 .v{color:var(--blue)}#ll-dashboard-v6 .llrec-v6 .rb.r4 .v{color:var(--orange-deep)}
/* archive chart */
#ll-dashboard-v6 .llrec-v6 .legend{display:flex;flex-wrap:wrap;gap:10px}
#ll-dashboard-v6 .llrec-v6 .legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);font-weight:500}
#ll-dashboard-v6 .llrec-v6 .legend i{width:10px;height:10px;border-radius:3px}
#ll-dashboard-v6 .llrec-v6 .chart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;align-items:end;height:230px;padding-top:6px}
#ll-dashboard-v6 .llrec-v6 .col{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
#ll-dashboard-v6 .llrec-v6 .bar{width:100%;max-width:54px;flex:1;display:flex;flex-direction:column-reverse;border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
#ll-dashboard-v6 .llrec-v6 .seg{width:100%;transition:.3s}
#ll-dashboard-v6 .llrec-v6 .col .lab{font-size:11.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llrec-v6 .col .tot{font-size:10.5px;color:var(--ink-3)}
/* subject shelves */
#ll-dashboard-v6 .llrec-v6 .shelf{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llrec-v6 .shelf:last-child{border-bottom:0}
#ll-dashboard-v6 .llrec-v6 .shelf .sw{width:12px;height:34px;border-radius:5px;flex:0 0 12px}
#ll-dashboard-v6 .llrec-v6 .shelf .nm{font-size:14.5px;font-weight:600;min-width:130px}
#ll-dashboard-v6 .llrec-v6 .shelf .meta{font-size:12px;color:var(--ink-3);min-width:120px}
#ll-dashboard-v6 .llrec-v6 .shelf .rec{display:flex;gap:7px;flex-wrap:wrap;flex:1}
#ll-dashboard-v6 .llrec-v6 .shelf .ec{font-size:11.5px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink-2);white-space:nowrap}
/* threads */
#ll-dashboard-v6 .llrec-v6 .thread{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
#ll-dashboard-v6 .llrec-v6 .thread .tt{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#ll-dashboard-v6 .llrec-v6 .thread .ssubs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
#ll-dashboard-v6 .llrec-v6 .thread .ssubs span{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;color:#fff}
#ll-dashboard-v6 .llrec-v6 .thread .line{display:flex;gap:12px;align-items:flex-start;padding:7px 0;border-top:1px dashed var(--line)}
#ll-dashboard-v6 .llrec-v6 .thread .line .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:0 0 9px}
#ll-dashboard-v6 .llrec-v6 .thread .line .lt{font-size:13.5px;font-weight:500}
#ll-dashboard-v6 .llrec-v6 .thread .line .ld{font-size:11.5px;color:var(--ink-3)}
/* latest list */
#ll-dashboard-v6 .llrec-v6 .add{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llrec-v6 .add:last-child{border-bottom:0}
#ll-dashboard-v6 .llrec-v6 .add .d{flex:0 0 60px;text-align:center}
#ll-dashboard-v6 .llrec-v6 .add .d .day{font-size:18px;font-weight:700;line-height:1}
#ll-dashboard-v6 .llrec-v6 .add .d .mo{font-size:11px;color:var(--ink-3);text-transform:uppercase;font-weight:600}
#ll-dashboard-v6 .llrec-v6 .add .body{flex:1}
#ll-dashboard-v6 .llrec-v6 .add .at{font-size:14.5px;font-weight:600}
#ll-dashboard-v6 .llrec-v6 .add .am{font-size:12px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:3px}
#ll-dashboard-v6 .llrec-v6 .add .am .tag{display:inline-flex;align-items:center;gap:5px}
#ll-dashboard-v6 .llrec-v6 .add .am .tag i{width:7px;height:7px;border-radius:50%}
#ll-dashboard-v6 .llrec-v6 .add .ph{font-size:11px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink-2)}
@media(max-width:840px){#ll-dashboard-v6 .llrec-v6 .ribbon{grid-template-columns:repeat(2,1fr)}#ll-dashboard-v6 .llrec-v6 .shelf{flex-wrap:wrap}#ll-dashboard-v6 .llrec-v6 .shelf .rec{flex-basis:100%}}
/* ===== end My Record v6 rebuild ===== */
/* ===== Gallery v6 — full mockup rebuild (scoped to .llgal-v6) ===== */
#ll-dashboard-v6 .llgal-v6{
--navy-950:#070F26;--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .llgal-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .llgal-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .llgal-v6 .ll-wrap{max-width:1240px;margin:0 auto}
#ll-dashboard-v6 .llgal-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px}
#ll-dashboard-v6 .llgal-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
#ll-dashboard-v6 .llgal-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--gold-ink)}
#ll-dashboard-v6 .llgal-v6 .ll-head .cnt{color:var(--ink-3);font-size:14px;margin-top:5px}
#ll-dashboard-v6 .llgal-v6 .ll-select{position:relative}
#ll-dashboard-v6 .llgal-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgal-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
/* search + chips */
#ll-dashboard-v6 .llgal-v6 .gtools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
#ll-dashboard-v6 .llgal-v6 .gsearch{position:relative;flex:1;min-width:220px}
#ll-dashboard-v6 .llgal-v6 .gsearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
#ll-dashboard-v6 .llgal-v6 .gsearch input{width:100%;border:1px solid var(--line-2);background:var(--card);border-radius:999px;padding:12px 16px 12px 42px;font-family:inherit;font-size:14px;color:var(--ink);box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgal-v6 .gsearch input:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llgal-v6 .ll-chips{display:flex;flex-wrap:wrap;gap:8px}
#ll-dashboard-v6 .llgal-v6 .ll-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card);cursor:pointer;box-shadow:var(--depth-sm);user-select:none}
#ll-dashboard-v6 .llgal-v6 .ll-chip .ct{background:var(--paper);border-radius:999px;padding:1px 7px;font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .llgal-v6 .ll-chip[data-on="1"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#ll-dashboard-v6 .llgal-v6 .ll-chip[data-on="1"] .ct{background:rgba(255,255,255,.2);color:#fff}
/* masonry grid */
#ll-dashboard-v6 .llgal-v6 .ll-gal{column-count:3;column-gap:18px}
#ll-dashboard-v6 .llgal-v6 .gcard{break-inside:avoid;margin-bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--depth-sm);cursor:pointer;transition:.2s}
#ll-dashboard-v6 .llgal-v6 .gcard:hover{transform:translateY(-3px);box-shadow:var(--depth)}
#ll-dashboard-v6 .llgal-v6 .gcover{position:relative;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .llgal-v6 .gcover .glyph{font-size:46px;opacity:.9;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
#ll-dashboard-v6 .llgal-v6 .gcnt{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(7,15,38,.55);backdrop-filter:blur(6px);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px}
#ll-dashboard-v6 .llgal-v6 .gribbon{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:6px 10px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(124,92,230,.8)}
#ll-dashboard-v6 .llgal-v6 .gverif{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:4px;background:rgba(14,159,139,.92);color:#fff;font-size:10.5px;font-weight:700;padding:5px 9px;border-radius:999px}
#ll-dashboard-v6 .llgal-v6 .gbody{padding:13px 15px 15px}
#ll-dashboard-v6 .llgal-v6 .gmeta{font-size:11.5px;color:var(--ink-3);font-weight:500;display:flex;gap:7px;flex-wrap:wrap;margin-bottom:5px}
#ll-dashboard-v6 .llgal-v6 .gtitle{font-size:15px;font-weight:600;line-height:1.25;margin-bottom:9px}
#ll-dashboard-v6 .llgal-v6 .gchips{display:flex;gap:6px;flex-wrap:wrap}
#ll-dashboard-v6 .llgal-v6 .gpill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;background:var(--paper);color:var(--ink-2)}
#ll-dashboard-v6 .llgal-v6 .gpill i{width:7px;height:7px;border-radius:50%}
#ll-dashboard-v6 .llgal-v6 .gpill.rec{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llgal-v6 .gpill.aw{background:rgba(242,180,65,.16);color:var(--gold-ink)}
#ll-dashboard-v6 .llgal-v6 .empty{text-align:center;color:var(--ink-3);padding:60px 20px}
/* lightbox */
#ll-dashboard-v6 .llgal-v6 .galmod{position:fixed;inset:0;z-index:998;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .llgal-v6 .galmod.open{display:flex}
#ll-dashboard-v6 .llgal-v6 .galmod-bg{position:fixed;inset:0;background:rgba(7,15,38,.62);backdrop-filter:blur(4px)}
#ll-dashboard-v6 .llgal-v6 .galmod-card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:var(--r-xl);box-shadow:0 50px 100px -30px rgba(0,0,0,.6)}
#ll-dashboard-v6 .llgal-v6 .galmod-x{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(7,15,38,.5);backdrop-filter:blur(6px);color:#fff;font-size:15px;cursor:pointer}
#ll-dashboard-v6 .llgal-v6 .gm-cover{position:relative;min-height:200px;display:flex;align-items:flex-end;padding:20px}
#ll-dashboard-v6 .llgal-v6 .gm-cover .glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:70px;opacity:.9}
#ll-dashboard-v6 .llgal-v6 .gm-cover .ov{position:relative;z-index:1}
#ll-dashboard-v6 .llgal-v6 .gm-cover h3{color:#fff;font-size:21px;font-weight:700;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.4)}
#ll-dashboard-v6 .llgal-v6 .gm-cover .status{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:rgba(255,255,255,.92);color:var(--teal-deep);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}
#ll-dashboard-v6 .llgal-v6 .gm-in{padding:18px 20px 22px}
#ll-dashboard-v6 .llgal-v6 .gm-meta{font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#ll-dashboard-v6 .llgal-v6 .gm-meta i{width:7px;height:7px;border-radius:50%;display:inline-block}
#ll-dashboard-v6 .llgal-v6 .gm-acts{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
#ll-dashboard-v6 .llgal-v6 .gm-edit{display:inline-flex;align-items:center;gap:7px;border:0;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;border-radius:999px;padding:10px 17px;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
#ll-dashboard-v6 .llgal-v6 .gm-ico{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-size:15px;cursor:pointer;transition:.18s;position:relative}
#ll-dashboard-v6 .llgal-v6 .gm-ico:hover{border-color:var(--teal);color:var(--teal-deep);background:rgba(14,159,139,.06)}
#ll-dashboard-v6 .llgal-v6 .gm-ico.on{border-color:var(--teal);background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llgal-v6 .gm-awards{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
#ll-dashboard-v6 .llgal-v6 .gm-aw{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;display:inline-flex;gap:5px;align-items:center}
#ll-dashboard-v6 .llgal-v6 .gm-aw.merit{background:rgba(242,180,65,.16);color:var(--gold-ink)}#ll-dashboard-v6 .llgal-v6 .gm-aw.goal{background:rgba(14,159,139,.1);color:var(--teal-deep)}#ll-dashboard-v6 .llgal-v6 .gm-aw.cert{background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .llgal-v6 .gm-det .blk{margin-bottom:14px}
#ll-dashboard-v6 .llgal-v6 .gm-det .bl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
#ll-dashboard-v6 .llgal-v6 .gm-det .bt{font-size:14px;color:var(--ink-2);line-height:1.55}
#ll-dashboard-v6 .llgal-v6 .gm-det .skills{background:rgba(242,180,65,.08);border:1px solid rgba(242,180,65,.3);border-radius:var(--r);padding:12px 14px}
/* award modal */
#ll-dashboard-v6 .llgal-v6 .awmod{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .llgal-v6 .awmod.open{display:flex}
#ll-dashboard-v6 .llgal-v6 .awbg{position:fixed;inset:0;background:rgba(7,15,38,.55);backdrop-filter:blur(3px)}
#ll-dashboard-v6 .llgal-v6 .awcard{position:relative;z-index:1;width:min(440px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:24px}
#ll-dashboard-v6 .llgal-v6 .awcard h3{font-size:18px;font-weight:700;margin-bottom:4px}
#ll-dashboard-v6 .llgal-v6 .awfor{font-size:13px;color:var(--ink-3);margin-bottom:16px}
#ll-dashboard-v6 .llgal-v6 .awtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
#ll-dashboard-v6 .llgal-v6 .awt{border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r);padding:13px 8px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
#ll-dashboard-v6 .llgal-v6 .awt .ic{font-size:20px}#ll-dashboard-v6 .llgal-v6 .awt .nm{font-size:12.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].merit{border-color:var(--gold);background:rgba(242,180,65,.1)}#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].merit .nm{color:var(--gold-ink)}
#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].goal{border-color:var(--teal);background:rgba(14,159,139,.08)}#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].goal .nm{color:var(--teal-deep)}
#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].cert{border-color:var(--violet);background:rgba(124,92,230,.08)}#ll-dashboard-v6 .llgal-v6 .awt[data-on="1"].cert .nm{color:var(--violet-deep)}
#ll-dashboard-v6 .llgal-v6 .awcard label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
#ll-dashboard-v6 .llgal-v6 .awcard .req{color:var(--gold-ink);font-weight:500}
#ll-dashboard-v6 .llgal-v6 .awcard textarea{width:100%;min-height:74px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
#ll-dashboard-v6 .llgal-v6 .awcard textarea:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llgal-v6 .awerr{display:none;color:#C2410C;font-size:12.5px;margin-top:7px}#ll-dashboard-v6 .llgal-v6 .awerr.show{display:block}
#ll-dashboard-v6 .llgal-v6 .awfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#ll-dashboard-v6 .llgal-v6 .awfoot .cancel{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llgal-v6 .awfoot .confirm{border:0;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:600;cursor:pointer}
@media(max-width:980px){#ll-dashboard-v6 .llgal-v6 .ll-gal{column-count:2}}
@media(max-width:600px){#ll-dashboard-v6 .llgal-v6 .ll-gal{column-count:1}}
/* ===== end Gallery v6 rebuild ===== */
/* gallery v6 — real-photo covers + reused live date-chip/pagination spacing */
#ll-dashboard-v6 .llgal-v6 .gcover .gcimg{display:block;width:100%;height:auto}
#ll-dashboard-v6 .llgal-v6 .llv6-gal-datechip,#ll-dashboard-v6 .llgal-v6 .llv6-gal-pagination{margin-bottom:18px}
#ll-dashboard-v6 .llgal-v6 .llv6-gal-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
/* ===== Goals & Merits v6 — awards heatmap rebuild (scoped to .llgm-v6) ===== */
#ll-dashboard-v6 .llgm-v6{
--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;--gblue:#4285F4;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .llgm-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .llgm-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .llgm-v6 .ll-wrap{max-width:1240px;margin:0 auto}
#ll-dashboard-v6 .llgm-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
#ll-dashboard-v6 .llgm-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
#ll-dashboard-v6 .llgm-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600}
#ll-dashboard-v6 .llgm-v6 .ll-head p{color:var(--ink-2);font-size:16px;max-width:60ch}
#ll-dashboard-v6 .llgm-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .llgm-v6 .ll-cta svg{width:17px;height:17px}
#ll-dashboard-v6 .llgm-v6 .ll-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth)}
/* ribbon */
#ll-dashboard-v6 .llgm-v6 .ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
#ll-dashboard-v6 .llgm-v6 .rb{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);padding:15px 18px;display:flex;align-items:center;gap:12px}
#ll-dashboard-v6 .llgm-v6 .rb .ic{font-size:20px}
#ll-dashboard-v6 .llgm-v6 .rb .v{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1}
#ll-dashboard-v6 .llgm-v6 .rb .k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
/* range controls */
#ll-dashboard-v6 .llgm-v6 .ll-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
#ll-dashboard-v6 .llgm-v6 .ll-seg{display:inline-flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgm-v6 .ll-seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .llgm-v6 .ll-seg button[data-on="1"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,27,61,.6)}
#ll-dashboard-v6 .llgm-v6 .ll-nav{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgm-v6 .ll-nav button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-nav button:hover{background:var(--paper)}
#ll-dashboard-v6 .llgm-v6 .ll-nav .lbl{min-width:150px;text-align:center;font-weight:600;font-size:13.5px}
#ll-dashboard-v6 .llgm-v6 .ll-today{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:9px 17px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-dates{display:none;align-items:center;gap:8px}
#ll-dashboard-v6 .llgm-v6 .ll-dates.show{display:inline-flex}
#ll-dashboard-v6 .llgm-v6 .ll-dates input{font-family:inherit;border:1px solid var(--line-2);border-radius:999px;padding:9px 13px;color:var(--ink);background:var(--card);font-size:12.5px;color-scheme:light}
#ll-dashboard-v6 .llgm-v6 .ll-dates span{color:var(--ink-3);font-size:12px}
/* type filter chips + learner */
#ll-dashboard-v6 .llgm-v6 .filtbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
#ll-dashboard-v6 .llgm-v6 .ll-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card);cursor:pointer;box-shadow:var(--depth-sm);user-select:none}
#ll-dashboard-v6 .llgm-v6 .ll-chip .sw{width:9px;height:9px;border-radius:3px}
#ll-dashboard-v6 .llgm-v6 .ll-chip.goal .sw{background:var(--teal)}#ll-dashboard-v6 .llgm-v6 .ll-chip.merit .sw{background:var(--gold)}#ll-dashboard-v6 .llgm-v6 .ll-chip.cert .sw{background:var(--violet)}
#ll-dashboard-v6 .llgm-v6 .ll-chip[data-on="0"]{opacity:.4}
#ll-dashboard-v6 .llgm-v6 .ll-select{position:relative;margin-left:auto}
#ll-dashboard-v6 .llgm-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgm-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
/* layout */
#ll-dashboard-v6 .llgm-v6 .ll-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;margin-bottom:20px}
#ll-dashboard-v6 .llgm-v6 .ll-content{padding:22px}
/* board */
#ll-dashboard-v6 .llgm-v6 .ll-board{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
#ll-dashboard-v6 .llgm-v6 .ll-wday{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:9px;min-height:120px}
#ll-dashboard-v6 .llgm-v6 .ll-wday.today{background:#fff;border-color:var(--violet);box-shadow:0 0 0 2px rgba(124,92,230,.18)}
#ll-dashboard-v6 .llgm-v6 .ll-wday.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,180,65,.3)}
#ll-dashboard-v6 .llgm-v6 .ll-wday-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
#ll-dashboard-v6 .llgm-v6 .ll-wday-h .dow{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
#ll-dashboard-v6 .llgm-v6 .ll-wday-h .num{font-size:15px;font-weight:700}
#ll-dashboard-v6 .llgm-v6 .ll-mini{font-size:11px;font-weight:600;padding:5px 7px;border-radius:7px;margin-bottom:4px;line-height:1.25}
#ll-dashboard-v6 .llgm-v6 .ll-mini.goal{background:rgba(14,159,139,.1);color:var(--teal-deep)}#ll-dashboard-v6 .llgm-v6 .ll-mini.merit{background:rgba(242,180,65,.16);color:var(--gold-ink)}#ll-dashboard-v6 .llgm-v6 .ll-mini.cert{background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .llgm-v6 .ll-add{width:100%;border:1px dashed var(--line-2);background:transparent;color:var(--ink-3);border-radius:7px;padding:5px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;margin-top:2px}
#ll-dashboard-v6 .llgm-v6 .ll-add:hover{border-color:var(--teal);color:var(--teal-deep)}
#ll-dashboard-v6 .llgm-v6 .ll-none{font-size:11px;color:var(--ink-3);text-align:center;padding:6px 0}
/* month grid */
#ll-dashboard-v6 .llgm-v6 .ll-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
#ll-dashboard-v6 .llgm-v6 .ll-cal-head span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:center}
#ll-dashboard-v6 .llgm-v6 .ll-month{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
#ll-dashboard-v6 .llgm-v6 .ll-mc{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);padding:8px;position:relative;display:flex;flex-direction:column;background:#fff}
#ll-dashboard-v6 .llgm-v6 .ll-mc.blank{border:0;background:transparent}
#ll-dashboard-v6 .llgm-v6 .ll-mc.has{cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-mc.has:hover{box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgm-v6 .ll-mc.today{border-color:var(--violet)}
#ll-dashboard-v6 .llgm-v6 .ll-mc.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,180,65,.28)}
#ll-dashboard-v6 .llgm-v6 .ll-mc .dn{font-size:14px;font-weight:600}
#ll-dashboard-v6 .llgm-v6 .ll-mc .pips{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
#ll-dashboard-v6 .llgm-v6 .ll-mc .pip{width:7px;height:7px;border-radius:50%}
#ll-dashboard-v6 .llgm-v6 .ll-mc .pip.goal{background:var(--teal)}#ll-dashboard-v6 .llgm-v6 .ll-mc .pip.merit{background:var(--gold)}#ll-dashboard-v6 .llgm-v6 .ll-mc .pip.cert{background:var(--violet)}
#ll-dashboard-v6 .llgm-v6 .ll-mc .cnt{position:absolute;top:7px;right:7px;min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* year heatmap */
#ll-dashboard-v6 .llgm-v6 .ll-yr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
#ll-dashboard-v6 .llgm-v6 .ll-yr-top h2{font-size:15px;font-weight:600}
#ll-dashboard-v6 .llgm-v6 .ll-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .llgm-v6 .ll-legend i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
#ll-dashboard-v6 .llgm-v6 .yrnav{display:none}
#ll-dashboard-v6 .llgm-v6 .ll-grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 16px}
#ll-dashboard-v6 .llgm-v6 .ll-mn .ml{font-size:12px;font-weight:600;margin-bottom:7px;display:flex;justify-content:space-between}
#ll-dashboard-v6 .llgm-v6 .ll-mn .ml span{color:var(--ink-3);font-weight:500;font-size:11px}
#ll-dashboard-v6 .llgm-v6 .ll-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
#ll-dashboard-v6 .llgm-v6 .ll-dow span{font-size:8.5px;text-align:center;color:var(--ink-3)}
#ll-dashboard-v6 .llgm-v6 .ll-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#ll-dashboard-v6 .llgm-v6 .ll-d{aspect-ratio:1;border-radius:4px;background:#EDF0F6;position:relative;transition:transform .14s,box-shadow .14s;display:flex;align-items:flex-end;justify-content:center}
#ll-dashboard-v6 .llgm-v6 .ll-d.empty{background:transparent}
#ll-dashboard-v6 .llgm-v6 .ll-d.has{cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-d.has:hover{transform:scale(1.4);z-index:3;box-shadow:0 6px 16px -6px rgba(16,27,61,.4),0 0 0 1px var(--line-2)}
#ll-dashboard-v6 .llgm-v6 .ll-d.sel{box-shadow:0 0 0 2px var(--ink);transform:scale(1.4);z-index:2}
#ll-dashboard-v6 .llgm-v6 .ll-d .pips{position:absolute;bottom:2px;display:flex;gap:1.5px}
#ll-dashboard-v6 .llgm-v6 .ll-d .pips i{width:3px;height:3px;border-radius:50%}
/* agenda */
#ll-dashboard-v6 .llgm-v6 .ll-agenda .ag{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llgm-v6 .ll-agenda .ag:last-child{border-bottom:0}
#ll-dashboard-v6 .llgm-v6 .ll-agenda .ad{flex:0 0 92px;font-size:13px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llgm-v6 .ll-agenda .ad small{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
#ll-dashboard-v6 .llgm-v6 .ll-agenda .al{flex:1;display:flex;flex-direction:column;gap:6px}
/* side panel */
#ll-dashboard-v6 .llgm-v6 .ll-panel{padding:22px;position:sticky;top:16px}
#ll-dashboard-v6 .llgm-v6 .ll-panel .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .llgm-v6 .ll-panel .pdate{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--gold-ink);line-height:1.2}
#ll-dashboard-v6 .llgm-v6 .ll-panel .x{border:0;background:0;font-size:16px;color:var(--ink-3);cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-panel .pmeta{font-size:12px;color:var(--ink-3);margin:2px 0 16px}
#ll-dashboard-v6 .llgm-v6 .pe{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:10px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llgm-v6 .pe .pet{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .llgm-v6 .pe .ttl{font-size:14.5px;font-weight:600;line-height:1.25}
#ll-dashboard-v6 .llgm-v6 .pe .kind{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
#ll-dashboard-v6 .llgm-v6 .pe.goal .kind{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llgm-v6 .pe.merit .kind{background:rgba(242,180,65,.16);color:var(--gold-ink)}
#ll-dashboard-v6 .llgm-v6 .pe.cert .kind{background:rgba(124,92,230,.1);color:var(--violet-deep)}
#ll-dashboard-v6 .llgm-v6 .pe .meta{font-size:12px;color:var(--ink-3);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#ll-dashboard-v6 .llgm-v6 .pe .av{width:18px;height:18px;border-radius:50%;background:var(--navy-800);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .llgm-v6 .ll-panel .pcta{display:block;width:100%;margin-top:6px;text-align:center;border:1px dashed var(--line-2);background:transparent;color:var(--gold-ink);padding:12px;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .ll-panel .pcta:hover{border-color:var(--gold);background:rgba(242,180,65,.07)}
#ll-dashboard-v6 .llgm-v6 .ll-panel .empty{text-align:center;color:var(--ink-3);padding:30px 10px}
/* recent feed */
#ll-dashboard-v6 .llgm-v6 .ll-recent{padding:22px}
#ll-dashboard-v6 .llgm-v6 .ll-recent h2{font-size:16px;font-weight:700;margin-bottom:14px}
#ll-dashboard-v6 .llgm-v6 .ll-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
#ll-dashboard-v6 .llgm-v6 .aw{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
#ll-dashboard-v6 .llgm-v6 .aw .badge{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 34px}
#ll-dashboard-v6 .llgm-v6 .aw.goal .badge{background:rgba(14,159,139,.12)}#ll-dashboard-v6 .llgm-v6 .aw.merit .badge{background:rgba(242,180,65,.16)}#ll-dashboard-v6 .llgm-v6 .aw.cert .badge{background:rgba(124,92,230,.12)}
#ll-dashboard-v6 .llgm-v6 .aw .type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
#ll-dashboard-v6 .llgm-v6 .aw .what{font-size:13.5px;font-weight:600;margin:1px 0 3px}
#ll-dashboard-v6 .llgm-v6 .aw .who{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
#ll-dashboard-v6 .llgm-v6 .aw .av{width:17px;height:17px;border-radius:50%;background:var(--navy-800);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* award modal */
#ll-dashboard-v6 .llgm-v6 .awmod{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .llgm-v6 .awmod.open{display:flex}
#ll-dashboard-v6 .llgm-v6 .awbg{position:fixed;inset:0;background:rgba(7,15,38,.55);backdrop-filter:blur(3px)}
#ll-dashboard-v6 .llgm-v6 .awcard{position:relative;z-index:1;width:min(440px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:24px}
#ll-dashboard-v6 .llgm-v6 .awcard h3{font-size:18px;font-weight:700;margin-bottom:4px}
#ll-dashboard-v6 .llgm-v6 .awfor{font-size:13px;color:var(--ink-3);margin-bottom:16px}
#ll-dashboard-v6 .llgm-v6 .awtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
#ll-dashboard-v6 .llgm-v6 .awt{border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r);padding:13px 8px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
#ll-dashboard-v6 .llgm-v6 .awt .ic{font-size:20px}#ll-dashboard-v6 .llgm-v6 .awt .nm{font-size:12.5px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].merit{border-color:var(--gold);background:rgba(242,180,65,.1)}#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].merit .nm{color:var(--gold-ink)}
#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].goal{border-color:var(--teal);background:rgba(14,159,139,.08)}#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].goal .nm{color:var(--teal-deep)}
#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].cert{border-color:var(--violet);background:rgba(124,92,230,.08)}#ll-dashboard-v6 .llgm-v6 .awt[data-on="1"].cert .nm{color:var(--violet-deep)}
#ll-dashboard-v6 .llgm-v6 .awcard label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
#ll-dashboard-v6 .llgm-v6 .awcard .req{color:var(--gold-ink);font-weight:500}
#ll-dashboard-v6 .llgm-v6 .awcard textarea{width:100%;min-height:74px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
#ll-dashboard-v6 .llgm-v6 .awcard textarea:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llgm-v6 .awerr{display:none;color:#C2410C;font-size:12.5px;margin-top:7px}
#ll-dashboard-v6 .llgm-v6 .awerr.show{display:block}
#ll-dashboard-v6 .llgm-v6 .awfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#ll-dashboard-v6 .llgm-v6 .awfoot .cancel{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llgm-v6 .awfoot .confirm{border:0;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:600;cursor:pointer}
@media(max-width:980px){#ll-dashboard-v6 .llgm-v6 .ll-layout{grid-template-columns:1fr}#ll-dashboard-v6 .llgm-v6 .ll-panel{position:relative;top:0}#ll-dashboard-v6 .llgm-v6 .ll-grid12{grid-template-columns:repeat(3,1fr)}#ll-dashboard-v6 .llgm-v6 .ll-board{grid-template-columns:1fr}#ll-dashboard-v6 .llgm-v6 .ll-wday{min-height:0}#ll-dashboard-v6 .llgm-v6 .ribbon{grid-template-columns:repeat(2,1fr)}}
/* ===== end Goals & Merits v6 rebuild ===== */
/* ===== Parent Insights v6 — full mockup rebuild (scoped to .llins-v6) ===== */
#ll-dashboard-v6 .llins-v6{
--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;--blue-ink:#1E5FC4;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;--green:#16A34A;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .llins-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .llins-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .llins-v6 .ll-wrap{max-width:1180px;margin:0 auto}
#ll-dashboard-v6 .llins-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
#ll-dashboard-v6 .llins-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
#ll-dashboard-v6 .llins-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--gold-ink)}
#ll-dashboard-v6 .llins-v6 .ll-head p{color:var(--ink-2);font-size:15.5px;margin-top:5px;max-width:58ch}
#ll-dashboard-v6 .llins-v6 .ll-select{position:relative}
#ll-dashboard-v6 .llins-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llins-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
/* range controls */
#ll-dashboard-v6 .llins-v6 .ll-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
#ll-dashboard-v6 .llins-v6 .ll-seg{display:inline-flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llins-v6 .ll-seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .llins-v6 .ll-seg button[data-on="1"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,27,61,.6)}
#ll-dashboard-v6 .llins-v6 .ll-nav{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llins-v6 .ll-nav button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
#ll-dashboard-v6 .llins-v6 .ll-nav button:hover{background:var(--paper)}
#ll-dashboard-v6 .llins-v6 .ll-nav .lbl{min-width:150px;text-align:center;font-weight:600;font-size:13.5px}
#ll-dashboard-v6 .llins-v6 .ll-today{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:9px 17px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .llins-v6 .ll-dates{display:none;align-items:center;gap:8px}
#ll-dashboard-v6 .llins-v6 .ll-dates.show{display:inline-flex}
#ll-dashboard-v6 .llins-v6 .ll-dates input{font-family:inherit;border:1px solid var(--line-2);border-radius:999px;padding:9px 13px;color:var(--ink);background:var(--card);font-size:12.5px;color-scheme:light}
#ll-dashboard-v6 .llins-v6 .ll-dates span{color:var(--ink-3);font-size:12px}
/* ribbon */
#ll-dashboard-v6 .llins-v6 .ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
#ll-dashboard-v6 .llins-v6 .rb{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth-sm);padding:16px 18px}
#ll-dashboard-v6 .llins-v6 .rb .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
#ll-dashboard-v6 .llins-v6 .rb .k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
#ll-dashboard-v6 .llins-v6 .rb.r0 .v{color:var(--teal-deep)}#ll-dashboard-v6 .llins-v6 .rb.r1 .v{color:var(--blue)}#ll-dashboard-v6 .llins-v6 .rb.r2 .v{color:var(--violet-deep)}#ll-dashboard-v6 .llins-v6 .rb.r3 .v{color:var(--gold-ink)}#ll-dashboard-v6 .llins-v6 .rb.r4 .v{color:var(--orange-deep)}
/* collapsible section */
#ll-dashboard-v6 .llins-v6 .sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth);margin-bottom:18px;overflow:hidden}
#ll-dashboard-v6 .llins-v6 .sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;user-select:none}
#ll-dashboard-v6 .llins-v6 .sec-h .t{display:flex;align-items:center;gap:10px}
#ll-dashboard-v6 .llins-v6 .sec-h h2{font-size:16px;font-weight:700}
#ll-dashboard-v6 .llins-v6 .sec-h .ico{font-size:18px}
#ll-dashboard-v6 .llins-v6 .sec-h .chev{width:26px;height:26px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:transform .25s}
#ll-dashboard-v6 .llins-v6 .sec.open .sec-h .chev{transform:rotate(90deg);background:rgba(14,159,139,.12)}
#ll-dashboard-v6 .llins-v6 .sec-h .chev svg{width:14px;height:14px;color:var(--ink-2)}
#ll-dashboard-v6 .llins-v6 .sec-b{display:none;padding:0 22px 22px}
#ll-dashboard-v6 .llins-v6 .sec.open .sec-b{display:block}
#ll-dashboard-v6 .llins-v6 .grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:26px}
@media(max-width:860px){#ll-dashboard-v6 .llins-v6 .grid2{grid-template-columns:1fr}#ll-dashboard-v6 .llins-v6 .ribbon{grid-template-columns:repeat(2,1fr)}}
#ll-dashboard-v6 .llins-v6 .subh{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
/* year heatmap */
#ll-dashboard-v6 .llins-v6 .ll-yr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
#ll-dashboard-v6 .llins-v6 .ll-yr-top h2{font-size:14px;font-weight:600}
#ll-dashboard-v6 .llins-v6 .ll-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .llins-v6 .ll-legend i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
#ll-dashboard-v6 .llins-v6 .ll-grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px}
#ll-dashboard-v6 .llins-v6 .ll-mn .ml{font-size:11.5px;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between}
#ll-dashboard-v6 .llins-v6 .ll-mn .ml span{color:var(--ink-3);font-weight:500}
#ll-dashboard-v6 .llins-v6 .ll-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
#ll-dashboard-v6 .llins-v6 .ll-dow span{font-size:8px;text-align:center;color:var(--ink-3)}
#ll-dashboard-v6 .llins-v6 .ll-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#ll-dashboard-v6 .llins-v6 .ll-d{aspect-ratio:1;border-radius:4px;background:#EDF0F6;position:relative;transition:.14s}
#ll-dashboard-v6 .llins-v6 .ll-d.empty{background:transparent}
#ll-dashboard-v6 .llins-v6 .ll-d.has:hover{transform:scale(1.4);z-index:3;box-shadow:0 6px 16px -6px rgba(16,27,61,.4)}
/* day/week activity bars */
#ll-dashboard-v6 .llins-v6 .bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end;height:180px;padding-top:6px}
#ll-dashboard-v6 .llins-v6 .bcol{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
#ll-dashboard-v6 .llins-v6 .bcol .bk{width:100%;max-width:30px;flex:1;display:flex;align-items:end}
#ll-dashboard-v6 .llins-v6 .bcol .bf{width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--teal-soft),var(--teal-deep));min-height:3px;transition:.3s}
#ll-dashboard-v6 .llins-v6 .bcol.today .bf{background:linear-gradient(180deg,var(--gold),var(--gold-ink))}
#ll-dashboard-v6 .llins-v6 .bcol .bl{font-size:9.5px;color:var(--ink-3);font-weight:600;text-align:center;white-space:nowrap}
#ll-dashboard-v6 .llins-v6 .bcol .bv{font-size:9px;color:var(--ink-3)}
/* weekday rhythm */
#ll-dashboard-v6 .llins-v6 .rhythm{display:flex;flex-direction:column;gap:9px}
#ll-dashboard-v6 .llins-v6 .rh{display:grid;grid-template-columns:34px 1fr 56px;gap:10px;align-items:center}
#ll-dashboard-v6 .llins-v6 .rh .d{font-size:12px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llins-v6 .rh .bar{height:14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
#ll-dashboard-v6 .llins-v6 .rh .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-soft))}
#ll-dashboard-v6 .llins-v6 .rh .v{font-size:11.5px;color:var(--ink-3);text-align:right}
/* subjects */
#ll-dashboard-v6 .llins-v6 .subj{display:flex;flex-direction:column;gap:13px}
#ll-dashboard-v6 .llins-v6 .sj .top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:5px}
#ll-dashboard-v6 .llins-v6 .sj .top i{width:10px;height:10px;border-radius:3px}
#ll-dashboard-v6 .llins-v6 .sj .top .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500}
#ll-dashboard-v6 .llins-v6 .sj .bar{display:flex;height:13px;border-radius:999px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
#ll-dashboard-v6 .llins-v6 .sj .pri{background:var(--teal)}#ll-dashboard-v6 .llins-v6 .sj .cro{background:rgba(14,159,139,.32)}
#ll-dashboard-v6 .llins-v6 .keys{display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
#ll-dashboard-v6 .llins-v6 .keys span{display:inline-flex;align-items:center;gap:6px}#ll-dashboard-v6 .llins-v6 .keys i{width:11px;height:11px;border-radius:3px}
/* word cloud */
#ll-dashboard-v6 .llins-v6 .cloud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;padding:6px 0}
#ll-dashboard-v6 .llins-v6 .cloud span{font-weight:600;line-height:1}
#ll-dashboard-v6 .llins-v6 .cloud .note{font-size:12px;color:var(--ink-3);font-weight:500;font-style:italic;width:100%;margin-top:8px}
/* progression */
#ll-dashboard-v6 .llins-v6 .plrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llins-v6 .plrow:last-child{border-bottom:0}
#ll-dashboard-v6 .llins-v6 .plrow .nm{font-size:13.5px;font-weight:600;flex:1;min-width:120px}
#ll-dashboard-v6 .llins-v6 .plrow .ty{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
#ll-dashboard-v6 .llins-v6 .ll-plchip{display:flex;flex-direction:column;gap:4px;width:190px;flex:0 0 190px}
#ll-dashboard-v6 .llins-v6 .ll-plchip .lbl{font-size:11px;color:var(--ink-2)}
#ll-dashboard-v6 .llins-v6 .ll-plchip .lbl b{color:var(--orange-deep);font-weight:700}
#ll-dashboard-v6 .llins-v6 .ll-plchip.done .lbl b{color:var(--gold-ink)}
#ll-dashboard-v6 .llins-v6 .ll-plchip .mtrack{position:relative;height:6px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
#ll-dashboard-v6 .llins-v6 .ll-plchip .mfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-soft))}
#ll-dashboard-v6 .llins-v6 .ll-plchip.done .mfill{background:linear-gradient(90deg,var(--gold),#FFD27A)}
#ll-dashboard-v6 .llins-v6 .ll-plchip .mnode{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 1px 4px rgba(249,115,22,.5)}
#ll-dashboard-v6 .llins-v6 .ll-plchip.done .mnode{background:var(--teal)}
#ll-dashboard-v6 .llins-v6 .nodata{color:var(--ink-3);padding:18px 0;font-size:13.5px}
@media(max-width:560px){#ll-dashboard-v6 .llins-v6 .ll-grid12{grid-template-columns:repeat(3,1fr)}#ll-dashboard-v6 .llins-v6 .plrow{flex-wrap:wrap}#ll-dashboard-v6 .llins-v6 .ll-plchip{flex-basis:100%;width:100%}}
/* ===== end Parent Insights v6 rebuild ===== */
/* ===== Calendar v6 — full mockup rebuild (scoped to .llcal-v6) ===== */
#ll-dashboard-v6 .llcal-v6{
--navy-800:#0E1B3D;--teal:#0E9F8B;--teal-deep:#0B8676;--teal-soft:#1FB7A1;
--gold:#F2B441;--gold-ink:#B57D0C;--violet:#7C5CE6;--violet-deep:#5B43C9;--blue:#3B82F6;--blue-ink:#1E5FC4;
--orange:#F97316;--orange-deep:#C2590B;--slate:#64748B;--gblue:#4285F4;
--ink:#0E1B3D;--ink-2:#4A5878;--ink-3:#94A0BD;
--paper:#F4F6FB;--card:#FFFFFF;--line:#E7EBF3;--line-2:#DBE1ED;
--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
--depth:0 1px 2px rgba(16,27,61,.05),0 20px 44px -30px rgba(16,27,61,.30);
--depth-sm:0 1px 2px rgba(16,27,61,.05),0 10px 24px -18px rgba(16,27,61,.22);
font-family:'Outfit',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
#ll-dashboard-v6 .llcal-v6 *{box-sizing:border-box;margin:0;padding:0}
#ll-dashboard-v6 .llcal-v6 .ll-stage{background:var(--paper);padding:30px clamp(16px,4vw,46px) 60px;min-height:100%}
#ll-dashboard-v6 .llcal-v6 .ll-wrap{max-width:1240px;margin:0 auto}
#ll-dashboard-v6 .llcal-v6 .ll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
#ll-dashboard-v6 .llcal-v6 .ll-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
#ll-dashboard-v6 .llcal-v6 .ll-head h1 .fr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--gold-ink)}
#ll-dashboard-v6 .llcal-v6 .ll-head p{color:var(--ink-2);font-size:15.5px;margin-top:5px;max-width:60ch}
#ll-dashboard-v6 .llcal-v6 .ll-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ll-dashboard-v6 .llcal-v6 .ll-select{position:relative}
#ll-dashboard-v6 .llcal-v6 .ll-select select{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 36px 11px 17px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .ll-select::after{content:"▾";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;font-size:11px}
#ll-dashboard-v6 .llcal-v6 .gbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);padding:11px 17px;border-radius:999px;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .gbtn .gdot{width:15px;height:15px;border-radius:4px;background:var(--gblue);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;font-family:Arial,sans-serif}
#ll-dashboard-v6 .llcal-v6 .gbtn.on{border-color:var(--gblue);color:var(--gblue)}
#ll-dashboard-v6 .llcal-v6 .ll-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;padding:13px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -18px rgba(14,159,139,.7)}
#ll-dashboard-v6 .llcal-v6 .ll-cta svg{width:17px;height:17px}
/* range controls */
#ll-dashboard-v6 .llcal-v6 .ll-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
#ll-dashboard-v6 .llcal-v6 .ll-seg{display:inline-flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .ll-seg button{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s}
#ll-dashboard-v6 .llcal-v6 .ll-seg button[data-on="1"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(14,27,61,.6)}
#ll-dashboard-v6 .llcal-v6 .ll-nav{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .ll-nav button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-nav button:hover{background:var(--paper)}
#ll-dashboard-v6 .llcal-v6 .ll-nav .lbl{min-width:150px;text-align:center;font-weight:600;font-size:13.5px}
#ll-dashboard-v6 .llcal-v6 .ll-today{border:1px solid var(--teal);background:rgba(14,159,139,.08);color:var(--teal-deep);border-radius:999px;padding:9px 17px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-dates{display:none;align-items:center;gap:8px}
#ll-dashboard-v6 .llcal-v6 .ll-dates.show{display:inline-flex}
#ll-dashboard-v6 .llcal-v6 .ll-dates input{font-family:inherit;border:1px solid var(--line-2);border-radius:999px;padding:9px 13px;color:var(--ink);background:var(--card);font-size:12.5px;color-scheme:light}
#ll-dashboard-v6 .llcal-v6 .ll-dates span{color:var(--ink-3);font-size:12px}
/* layers */
#ll-dashboard-v6 .llcal-v6 .layers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
#ll-dashboard-v6 .llcal-v6 .ll-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card);cursor:pointer;box-shadow:var(--depth-sm);user-select:none}
#ll-dashboard-v6 .llcal-v6 .ll-chip .sw{width:9px;height:9px;border-radius:3px}
#ll-dashboard-v6 .llcal-v6 .ll-chip.entry .sw{background:var(--teal)}
#ll-dashboard-v6 .llcal-v6 .ll-chip.planned .sw{background:#fff;box-shadow:inset 0 0 0 2px var(--slate)}
#ll-dashboard-v6 .llcal-v6 .ll-chip.award .sw{background:var(--gold)}
#ll-dashboard-v6 .llcal-v6 .ll-chip.google .sw{background:var(--gblue)}
#ll-dashboard-v6 .llcal-v6 .ll-chip[data-on="0"]{opacity:.4}
/* layout */
#ll-dashboard-v6 .llcal-v6 .ll-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
#ll-dashboard-v6 .llcal-v6 .ll-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--depth)}
#ll-dashboard-v6 .llcal-v6 .ll-cal{padding:22px}
/* month grid */
#ll-dashboard-v6 .llcal-v6 .ll-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:0 0 8px}
#ll-dashboard-v6 .llcal-v6 .ll-cal-head span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:center}
#ll-dashboard-v6 .llcal-v6 .ll-month{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
#ll-dashboard-v6 .llcal-v6 .ll-mc{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);padding:8px;position:relative;display:flex;flex-direction:column;transition:.15s;background:#fff}
#ll-dashboard-v6 .llcal-v6 .ll-mc.blank{border:0;background:transparent}
#ll-dashboard-v6 .llcal-v6 .ll-mc.has{cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-mc.has:hover{transform:translateY(-2px);box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .ll-mc.today{border-color:var(--violet);box-shadow:0 0 0 2px rgba(124,92,230,.18)}
#ll-dashboard-v6 .llcal-v6 .ll-mc.sel{border-color:var(--teal);box-shadow:0 0 0 2px rgba(14,159,139,.28)}
#ll-dashboard-v6 .llcal-v6 .ll-mc .dn{font-size:14px;font-weight:600}
#ll-dashboard-v6 .llcal-v6 .ll-mc .pips{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
#ll-dashboard-v6 .llcal-v6 .ll-mc .pip{width:7px;height:7px;border-radius:50%}
#ll-dashboard-v6 .llcal-v6 .ll-mc .pip.ring{background:#fff;box-shadow:inset 0 0 0 2px var(--slate)}
#ll-dashboard-v6 .llcal-v6 .ll-mc .cnt{position:absolute;top:7px;right:7px;min-width:18px;height:18px;border-radius:999px;background:var(--teal);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* board */
#ll-dashboard-v6 .llcal-v6 .ll-board{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
#ll-dashboard-v6 .llcal-v6 .ll-bd{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:150px;cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-bd.today{background:#fff;border-color:var(--violet);box-shadow:0 0 0 2px rgba(124,92,230,.18)}
#ll-dashboard-v6 .llcal-v6 .ll-bd.sel{border-color:var(--teal);box-shadow:0 0 0 2px rgba(14,159,139,.28)}
#ll-dashboard-v6 .llcal-v6 .ll-bd .bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#ll-dashboard-v6 .llcal-v6 .ll-bd .bh .dow{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
#ll-dashboard-v6 .llcal-v6 .ll-bd .bh .num{font-size:16px;font-weight:700}
#ll-dashboard-v6 .llcal-v6 .ll-ev{font-size:11.5px;font-weight:600;padding:5px 8px;border-radius:8px;margin-bottom:5px;display:flex;align-items:center;gap:5px;line-height:1.2}
#ll-dashboard-v6 .llcal-v6 .ll-ev .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ll-dashboard-v6 .llcal-v6 .ll-ev.entry{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llcal-v6 .ll-ev.planned{background:#fff;border:1px dashed var(--slate);color:var(--slate)}
#ll-dashboard-v6 .llcal-v6 .ll-ev.award{background:rgba(242,180,65,.14);color:var(--gold-ink)}
#ll-dashboard-v6 .llcal-v6 .ll-ev.google{background:rgba(66,133,244,.1);color:var(--gblue)}
#ll-dashboard-v6 .llcal-v6 .ll-bd .none{font-size:11px;color:var(--ink-3);text-align:center;margin-top:20px}
/* year heat */
#ll-dashboard-v6 .llcal-v6 .ll-yr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
#ll-dashboard-v6 .llcal-v6 .ll-yr-top h2{font-size:15px;font-weight:600}
#ll-dashboard-v6 .llcal-v6 .ll-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
#ll-dashboard-v6 .llcal-v6 .ll-legend i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
#ll-dashboard-v6 .llcal-v6 .ll-grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 16px}
#ll-dashboard-v6 .llcal-v6 .ll-mn .ml{font-size:12px;font-weight:600;margin-bottom:7px;display:flex;justify-content:space-between}
#ll-dashboard-v6 .llcal-v6 .ll-mn .ml span{color:var(--ink-3);font-weight:500;font-size:11px}
#ll-dashboard-v6 .llcal-v6 .ll-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
#ll-dashboard-v6 .llcal-v6 .ll-dow span{font-size:8.5px;text-align:center;color:var(--ink-3)}
#ll-dashboard-v6 .llcal-v6 .ll-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#ll-dashboard-v6 .llcal-v6 .ll-d{aspect-ratio:1;border-radius:4px;background:#EDF0F6;position:relative;transition:.14s;display:flex;align-items:flex-end;justify-content:center}
#ll-dashboard-v6 .llcal-v6 .ll-d.empty{background:transparent}
#ll-dashboard-v6 .llcal-v6 .ll-d.has{cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-d.has:hover{transform:scale(1.4);z-index:3;box-shadow:0 6px 16px -6px rgba(16,27,61,.4)}
#ll-dashboard-v6 .llcal-v6 .ll-d.sel{box-shadow:0 0 0 2px var(--ink);transform:scale(1.4);z-index:2}
#ll-dashboard-v6 .llcal-v6 .ll-d .pips{position:absolute;bottom:2px;display:flex;gap:1.5px}
#ll-dashboard-v6 .llcal-v6 .ll-d .pips i{width:3px;height:3px;border-radius:50%}
/* agenda */
#ll-dashboard-v6 .llcal-v6 .ll-agenda .ag{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
#ll-dashboard-v6 .llcal-v6 .ll-agenda .ag:last-child{border-bottom:0}
#ll-dashboard-v6 .llcal-v6 .ll-agenda .ad{flex:0 0 92px;font-size:13px;font-weight:600;color:var(--ink-2)}
#ll-dashboard-v6 .llcal-v6 .ll-agenda .ad small{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
#ll-dashboard-v6 .llcal-v6 .ll-agenda .al{flex:1;display:flex;flex-direction:column;gap:6px}
/* side panel */
#ll-dashboard-v6 .llcal-v6 .ll-panel{padding:22px;position:sticky;top:16px}
#ll-dashboard-v6 .llcal-v6 .ll-panel .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .llcal-v6 .ll-panel .pdate{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--gold-ink);line-height:1.2}
#ll-dashboard-v6 .llcal-v6 .ll-panel .x{border:0;background:0;font-size:16px;color:var(--ink-3);cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-panel .pmeta{font-size:12px;color:var(--ink-3);margin:2px 0 16px}
#ll-dashboard-v6 .llcal-v6 .pe{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:10px;box-shadow:var(--depth-sm)}
#ll-dashboard-v6 .llcal-v6 .pe .pet{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#ll-dashboard-v6 .llcal-v6 .pe .ttl{font-size:14.5px;font-weight:600;line-height:1.25}
#ll-dashboard-v6 .llcal-v6 .pe .kind{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
#ll-dashboard-v6 .llcal-v6 .pe.entry .kind{background:rgba(14,159,139,.1);color:var(--teal-deep)}
#ll-dashboard-v6 .llcal-v6 .pe.planned .kind{background:#fff;border:1px dashed var(--slate);color:var(--slate)}
#ll-dashboard-v6 .llcal-v6 .pe.award .kind{background:rgba(242,180,65,.14);color:var(--gold-ink)}
#ll-dashboard-v6 .llcal-v6 .pe.google .kind{background:rgba(66,133,244,.1);color:var(--gblue)}
#ll-dashboard-v6 .llcal-v6 .pe .meta{font-size:12px;color:var(--ink-3);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#ll-dashboard-v6 .llcal-v6 .pe .tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;display:inline-flex;gap:5px;align-items:center;background:var(--paper);color:var(--ink-2)}
#ll-dashboard-v6 .llcal-v6 .pe .tag i{width:6px;height:6px;border-radius:50%}
#ll-dashboard-v6 .llcal-v6 .pe .acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
#ll-dashboard-v6 .llcal-v6 .pe .lnk{font-size:12.5px;font-weight:600;color:var(--teal-deep);cursor:pointer;border:0;background:0;font-family:inherit;padding:0}
#ll-dashboard-v6 .llcal-v6 .pe .lnk.done{color:var(--orange-deep)}
#ll-dashboard-v6 .llcal-v6 .ll-panel .pcta{display:block;width:100%;margin-top:6px;text-align:center;border:1px dashed var(--line-2);background:transparent;color:var(--teal-deep);padding:12px;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .ll-panel .pcta:hover{border-color:var(--teal);background:rgba(14,159,139,.07)}
#ll-dashboard-v6 .llcal-v6 .ll-panel .empty{text-align:center;color:var(--ink-3);padding:30px 10px}
/* add modal */
#ll-dashboard-v6 .llcal-v6 .mod{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
#ll-dashboard-v6 .llcal-v6 .mod.open{display:flex}
#ll-dashboard-v6 .llcal-v6 .mbg{position:fixed;inset:0;background:rgba(7,15,38,.55);backdrop-filter:blur(3px)}
#ll-dashboard-v6 .llcal-v6 .mcard{position:relative;z-index:1;width:min(460px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:24px}
#ll-dashboard-v6 .llcal-v6 .mcard h3{font-size:18px;font-weight:700;margin-bottom:16px}
#ll-dashboard-v6 .llcal-v6 .fld{margin-bottom:13px}
#ll-dashboard-v6 .llcal-v6 .fld label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
#ll-dashboard-v6 .llcal-v6 .fld input,#ll-dashboard-v6 .llcal-v6 .fld select{width:100%;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff}
#ll-dashboard-v6 .llcal-v6 .fld input:focus,#ll-dashboard-v6 .llcal-v6 .fld select:focus{outline:none;border-color:var(--teal)}
#ll-dashboard-v6 .llcal-v6 .fld2{display:flex;gap:10px}#ll-dashboard-v6 .llcal-v6 .fld2 .fld{flex:1}
#ll-dashboard-v6 .llcal-v6 .mfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#ll-dashboard-v6 .llcal-v6 .mfoot .cancel{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-family:inherit;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llcal-v6 .mfoot .save{border:0;background:linear-gradient(135deg,var(--teal-soft),var(--teal-deep));color:#fff;border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:600;cursor:pointer}
@media(max-width:980px){#ll-dashboard-v6 .llcal-v6 .ll-layout{grid-template-columns:1fr}#ll-dashboard-v6 .llcal-v6 .ll-panel{position:relative;top:0}#ll-dashboard-v6 .llcal-v6 .ll-grid12{grid-template-columns:repeat(3,1fr)}#ll-dashboard-v6 .llcal-v6 .ll-board{grid-template-columns:1fr}#ll-dashboard-v6 .llcal-v6 .ll-bd{min-height:0}}
@media(max-width:560px){#ll-dashboard-v6 .llcal-v6 .ll-grid12{grid-template-columns:repeat(2,1fr)}}
/* ===== end Calendar v6 rebuild ===== */
/* ===== v6 rebuilt views — full-width fix =====
The 7 rebuilt views (.ll*-v6) render inside .llv6-content (padding:24px)
and additionally cap themselves with a centred .ll-wrap max-width, which
made the content read as a narrow box inside the dashboard card. Cancel
the content side-padding and the width cap so each view fills the shell
content area edge-to-edge (its own .ll-stage clamp padding still provides
comfortable gutters, matching the standalone mockups). */
#ll-dashboard-v6 .ll-stage { margin-left: -24px; margin-right: -24px; }
#ll-dashboard-v6 .ll-wrap { max-width: none !important; margin-left: 0; margin-right: 0; }
/* ===== My Record V6 — coverage matrix + month-by-month archive (additive, scoped) ===== */
.llrec-v6 .rec-cov-seg{display:inline-flex;background:#fff;border:1px solid var(--line,#E7EBF3);border-radius:999px;padding:3px}
.llrec-v6 .rec-cov-seg button{border:0;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-3,#94A0BD);padding:6px 13px;border-radius:999px;cursor:pointer}
.llrec-v6 .rec-cov-seg button.is-on{background:var(--ink,#0E1B3D);color:#fff}
.llrec-v6 .rec-mx-wrap{width:100%;overflow-x:auto}
.llrec-v6 .rec-mx{display:grid;gap:5px;min-width:520px;margin-top:6px}
.llrec-v6 .rec-mx .hd{font-size:10px;font-weight:700;color:var(--ink-3,#94A0BD);text-align:center;text-transform:uppercase;letter-spacing:.03em;align-self:end;padding-bottom:3px}
.llrec-v6 .rec-mx .lab{font-size:11.5px;font-weight:600;color:var(--ink-2,#4A5878);display:flex;align-items:center;gap:7px;padding-right:8px}
.llrec-v6 .rec-mx .lab i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.llrec-v6 .rec-mx .cell{aspect-ratio:1.6;border-radius:7px;background:var(--paper,#F4F6FB);box-shadow:inset 0 0 0 1px var(--line,#E7EBF3);position:relative}
.llrec-v6 .rec-mx .cell.has{box-shadow:none;cursor:pointer;transition:box-shadow .12s,transform .12s}
.llrec-v6 .rec-mx .cell.has:hover{box-shadow:inset 0 0 0 1px rgba(14,27,61,.28);transform:translateY(-1px)}
.llrec-v6 .rec-mx .cell.is-sel{box-shadow:0 0 0 2px var(--ink,#0E1B3D)!important}
.llrec-v6 .rec-mx .cell b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--ink-2,#4A5878)}
.llrec-v6 .rec-mxleg{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--ink-3,#94A0BD)}
.llrec-v6 .rec-mxleg .sc{display:flex;gap:3px}
.llrec-v6 .rec-mxleg .sc i{width:13px;height:13px;border-radius:3px}
.llrec-v6 .rec-mxdetail{display:none;margin-top:16px;border-top:1px solid var(--line,#E7EBF3);padding-top:14px}
.llrec-v6 .rec-mxdetail.is-open{display:block}
.llrec-v6 .rec-mxd-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;margin-bottom:8px}
.llrec-v6 .rec-mxd-h i{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.llrec-v6 .rec-mxd-h span{font-weight:600;color:var(--ink-3,#94A0BD)}
.llrec-v6 .rec-erow{display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line,#E7EBF3)}
.llrec-v6 .rec-erow:last-child{border-bottom:0}
.llrec-v6 .rec-erow .dot{width:10px;height:10px;border-radius:50%;margin-top:5px}
.llrec-v6 .rec-erow .et{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink,#0E1B3D)}
.llrec-v6 .rec-erow .em{font-size:11.5px;color:var(--ink-3,#94A0BD);margin-top:2px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.llrec-v6 .rec-erow .em .t{display:inline-flex;align-items:center;gap:5px}
.llrec-v6 .rec-erow .em .t i{width:7px;height:7px;border-radius:50%}
.llrec-v6 .rec-erow .em .lk{color:var(--teal-deep,#0B8676);font-weight:600}
.llrec-v6 .rec-erow .rt{font-size:12px;font-weight:700;color:var(--ink-2,#4A5878);white-space:nowrap;text-align:right}
.llrec-v6 .rec-arc-m{border:1px solid var(--line,#E7EBF3);border-radius:14px;margin-bottom:11px;overflow:hidden;background:#fff}
.llrec-v6 .rec-arc-h{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}
.llrec-v6 .rec-arc-h .chev{width:26px;height:26px;border-radius:8px;background:var(--paper,#F4F6FB);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink-2,#4A5878);transition:transform .25s;line-height:1}
.llrec-v6 .rec-arc-m.is-open .rec-arc-h .chev{transform:rotate(90deg);background:rgba(14,159,139,.12)}
.llrec-v6 .rec-arc-h .t{font-size:15px;font-weight:700;color:var(--ink,#0E1B3D)}
.llrec-v6 .rec-arc-h .t .c{font-size:12px;font-weight:600;color:var(--ink-3,#94A0BD);margin-left:8px}
.llrec-v6 .rec-arc-h .m{font-size:12px;font-weight:700;color:var(--teal-deep,#0B8676);white-space:nowrap}
.llrec-v6 .rec-arc-b{display:none;padding:0 16px 12px;border-top:1px solid var(--line,#E7EBF3)}
.llrec-v6 .rec-arc-m.is-open .rec-arc-b{display:block}
.llrec-v6 .rec-wk{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3,#94A0BD);margin:13px 0 6px}
/* ===== Dashboard tabbed lens (Option B) — additive, scoped #ll-dashboard-v6 .lldash-v6 ===== */
#ll-dashboard-v6 .lldash-v6 .lld-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#ll-dashboard-v6 .lldash-v6 .lld-tab{border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--ink-3);padding:11px 15px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
#ll-dashboard-v6 .lldash-v6 .lld-tab.is-active{color:var(--ink);border-bottom-color:var(--teal)}
#ll-dashboard-v6 .lldash-v6 .lld-tab:hover{color:var(--ink)}
#ll-dashboard-v6 .lldash-v6 .lld-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
#ll-dashboard-v6 .lldash-v6 .lld-pane{display:none}
#ll-dashboard-v6 .lldash-v6 .lld-pane.is-active{display:block;animation:lldFade .2s ease}
#ll-dashboard-v6 .lldash-v6 .q .v{color:var(--ink)}
@keyframes lldFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#ll-dashboard-v6 .lldash-v6 .lld-pane.is-active{animation:none}}
/* ===== Journal card — .jc v2 (Phase C1: snippet bar + merit toggle + points + tools) ===== */
#ll-dashboard-v6 .lljour-v6 .jc{display:flex;width:100%;background:#fff;border:1px solid rgba(14,27,61,.05);border-radius:18px;box-shadow:0 6px 28px rgba(14,27,61,.07);overflow:hidden}
#ll-dashboard-v6 .lljour-v6 .jc-photo{position:relative;flex:0 0 210px;min-height:260px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lljour-v6 .jc-photo .glyph{font-size:50px;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
#ll-dashboard-v6 .lljour-v6 .jc-badge{position:absolute;left:13px;bottom:13px;display:inline-flex;align-items:center;gap:5px;background:rgba(14,27,61,.78);color:#fff;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px}
#ll-dashboard-v6 .lljour-v6 .jc-body{flex:1;min-width:0;padding:20px 24px}
#ll-dashboard-v6 .lljour-v6 .jc-top{display:flex;align-items:flex-start;gap:12px}
#ll-dashboard-v6 .lljour-v6 .jc-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#0E9F8B;color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lljour-v6 .jc-name{font-weight:600;font-size:16px;line-height:1.3;color:#0E1B3D}
#ll-dashboard-v6 .lljour-v6 .jc-meta{font-size:13px;color:#7A8499;margin-top:2px}
#ll-dashboard-v6 .lljour-v6 .jc-meta b{color:#3A4763;font-weight:600}
#ll-dashboard-v6 .lljour-v6 .jc-awards{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#ll-dashboard-v6 .lljour-v6 .pill-aw{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;border:0;cursor:default}
#ll-dashboard-v6 .lljour-v6 .pill-aw.goal{background:rgba(22,163,74,.12);color:#16A34A}
#ll-dashboard-v6 .lljour-v6 .pill-aw.cert{background:rgba(124,92,230,.12);color:#5B43C9}
#ll-dashboard-v6 .lljour-v6 .pill-aw.points{background:rgba(14,159,139,.13);color:#0B8676;cursor:pointer;transition:box-shadow .13s,filter .13s}
#ll-dashboard-v6 .lljour-v6 .pill-aw.points .ppn{font-size:14.5px;font-weight:800;line-height:1}
#ll-dashboard-v6 .lljour-v6 .pill-aw.points:hover{filter:brightness(.97);box-shadow:0 0 0 2px rgba(14,159,139,.2)}
#ll-dashboard-v6 .lljour-v6 .pill-aw.points:active{transform:scale(.96)}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .13s,color .13s,opacity .13s,transform .08s}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle svg{display:block}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle.is-on{background:#FBF1D9;color:#B07A20}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle.is-on:hover{filter:brightness(.97)}#ll-dashboard-v6 [data-jc-open]{cursor:pointer;transition:background .2s ease}#ll-dashboard-v6 [data-jc-open]:hover{background:#E2E8F0}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle.is-off{background:transparent;color:#B7975A;border:1px dashed rgba(201,154,63,.55);opacity:.85}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle.is-off:hover{opacity:1;background:rgba(201,154,63,.09)}
#ll-dashboard-v6 .lljour-v6 .jc-merit-toggle:active{transform:scale(.95)}
#ll-dashboard-v6 .lljour-v6 .jc-title{font-weight:700;font-size:22px;letter-spacing:-.3px;line-height:1.25;margin:13px 0 11px;color:#0E1B3D;overflow-wrap:anywhere}
#ll-dashboard-v6 .lljour-v6 .jc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
#ll-dashboard-v6 .lljour-v6 .jc .chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;line-height:1}
#ll-dashboard-v6 .lljour-v6 .jc .chip.in-record{background:rgba(14,159,139,.12);color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc .chip.subject{background:#F4F5F8;color:#2C3850;font-weight:500}
#ll-dashboard-v6 .lljour-v6 .jc .chip.project{background:#EEF0FB;color:#4A5878;font-weight:600}
#ll-dashboard-v6 .lljour-v6 .jc .chip.pp{background:rgba(249,115,22,.12);color:#C2410C;font-weight:700}
#ll-dashboard-v6 .lljour-v6 .jc .chip .dot{width:8px;height:8px;border-radius:50%}
#ll-dashboard-v6 .lljour-v6 .jc-text{font-size:15px;color:#3A4763;line-height:1.6}
#ll-dashboard-v6 .lljour-v6 .jc-skills{margin-top:14px;background:rgba(14,159,139,.12);border:1px solid rgba(14,159,139,.25);border-radius:12px;padding:13px 16px}
#ll-dashboard-v6 .lljour-v6 .jc-skills .label{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc-skills .value{font-size:14px;color:#3A4763;margin-top:4px;line-height:1.5}
#ll-dashboard-v6 .lljour-v6 .jc-reflect{margin-top:11px;background:rgba(14,159,139,.055);border:1px solid rgba(14,159,139,.22);border-radius:12px;padding:13px 16px}
#ll-dashboard-v6 .lljour-v6 .jc-reflect .label{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc-reflect .outs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#ll-dashboard-v6 .lljour-v6 .jc-reflect .out{font-size:12px;font-weight:600;color:#0B8676;background:rgba(14,159,139,.12);border-radius:999px;padding:3px 10px}
#ll-dashboard-v6 .lljour-v6 .jc-reflect .value{font-size:14px;color:#3A4763;margin-top:8px;line-height:1.5}
#ll-dashboard-v6 .lljour-v6 .jc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;font-size:13px;color:#7A8499}
#ll-dashboard-v6 .lljour-v6 .jc-tools b{color:#3A4763;font-weight:600}
#ll-dashboard-v6 .lljour-v6 .jc-tools .t{background:#F4F5F8;color:#2C3850;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:500}
#ll-dashboard-v6 .lljour-v6 .jc-foot{display:flex;align-items:center;gap:16px;margin-top:15px;padding-top:13px;border-top:1px solid #EDEEF2;flex-wrap:nowrap}
#ll-dashboard-v6 .lljour-v6 .jc-snippet{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
#ll-dashboard-v6 .lljour-v6 .jc-snip-name{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:54px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:12.5px;color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc-snip-name svg{flex:0 0 auto;color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc-snip-track{position:relative;flex:1 1 auto;min-width:64px;height:9px;background:#EEF1F7;border-radius:999px;box-shadow:inset 0 0 0 1px #DBE1ED}
#ll-dashboard-v6 .lljour-v6 .jc-snip-track .tick{position:absolute;top:2px;bottom:2px;width:1px;background:#DBE1ED}
#ll-dashboard-v6 .lljour-v6 .jc-snip-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#0E9F8B,#1FB7A1)}
#ll-dashboard-v6 .lljour-v6 .jc-snip-node{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #F97316;box-shadow:0 2px 7px -2px rgba(249,115,22,.6);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
#ll-dashboard-v6 .lljour-v6 .jc-snip-pct{flex:0 0 auto;font-weight:600;font-size:12px;color:#0B8676}
#ll-dashboard-v6 .lljour-v6 .jc-snippet.reached .jc-snip-pct{color:#F97316}
#ll-dashboard-v6 .lljour-v6 .jc-snippet.reached .jc-snip-fill{background:linear-gradient(90deg,#0E9F8B,#F97316)}
#ll-dashboard-v6 .lljour-v6 .jc-snippet.reached .jc-snip-node{width:17px;height:17px}
#ll-dashboard-v6 .lljour-v6 .jc-snip-none{font-size:12.5px;color:#9AA3B2;font-style:italic}
#ll-dashboard-v6 .lljour-v6 .jc-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-left:6px}
#ll-dashboard-v6 .lljour-v6 .jc-actions .edit{background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px;color:#0E1B3D;font-weight:600;font-family:inherit;font-size:14px}
#ll-dashboard-v6 .lljour-v6 .jc-actions .edit svg{display:block}
@keyframes jcflash{0%{outline:0 solid rgba(14,159,139,0);outline-offset:3px}30%{outline:3px solid rgba(14,159,139,.45);outline-offset:3px}100%{outline:0 solid rgba(14,159,139,0);outline-offset:3px}}
#ll-dashboard-v6 .lljour-v6 .jc-snippet.flash{animation:jcflash .9s ease;border-radius:10px}
@media(max-width:560px){#ll-dashboard-v6 .lljour-v6 .jc{flex-direction:column}#ll-dashboard-v6 .lljour-v6 .jc-photo{flex:0 0 auto;min-height:180px}#ll-dashboard-v6 .lljour-v6 .jc-foot{flex-wrap:wrap}#ll-dashboard-v6 .lljour-v6 .ll-wall-banner{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}#ll-dashboard-v6 .lljour-v6 .ll-wall-banner>span{min-width:0!important;max-width:100%!important}}
/* ===== Add-entry wizard — reflection outcomes + session windows (Phase B item 4) ===== */
#ll-dashboard-v6 .llv6-wiz-out-lbl{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#0B8676;margin:14px 0 8px}
#ll-dashboard-v6 .llv6-wiz-out-lbl span{font-weight:400;text-transform:none;letter-spacing:0;color:#94A0BD}
#ll-dashboard-v6 .llv6-wiz-out-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
#ll-dashboard-v6 .llv6-wiz-out-chip{font-size:13px;font-weight:600;color:#2C3850;background:#F4F5F8;border:1px solid #E2E6EF;border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit;transition:.15s}
#ll-dashboard-v6 .llv6-wiz-out-chip:hover{border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-wiz-out-chip.is-on{background:rgba(14,159,139,.12);border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-wiz-sessions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#ll-dashboard-v6 .llv6-wiz-ses-row{display:flex;align-items:center;gap:8px}
#ll-dashboard-v6 .llv6-wiz-ses-row .llv6-wiz-time-inp{flex:0 1 auto;margin:0}
#ll-dashboard-v6 .llv6-wiz-ses-dash{color:#94A0BD;font-weight:600}
#ll-dashboard-v6 .llv6-wiz-ses-del{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid #E2E6EF;background:#fff;color:#94A0BD;font-size:18px;line-height:1;cursor:pointer;font-family:inherit;transition:.15s}
#ll-dashboard-v6 .llv6-wiz-ses-del:hover{border-color:#E11D48;color:#E11D48;background:#FFF1F2}
#ll-dashboard-v6 .llv6-wiz-ses-add{margin-top:10px;font-size:13px;font-weight:600;color:#0B8676;background:rgba(14,159,139,.08);border:1px dashed #0E9F8B;border-radius:10px;padding:8px 14px;cursor:pointer;font-family:inherit;transition:.15s}
#ll-dashboard-v6 .llv6-wiz-ses-add:hover{background:rgba(14,159,139,.16)}
/* ===== New 4-step Add Entry form (qz / beta) — Phase C2 ===== */
#ll-dashboard-v6 .llv6-qz-trybar{margin:0 0 14px;display:flex;justify-content:flex-end}
#ll-dashboard-v6 .llv6-qz-trybar button{background:rgba(14,159,139,.1);border:1px dashed #0E9F8B;color:#0B8676;font-weight:600;font-size:13px;padding:7px 14px;border-radius:10px;cursor:pointer;font-family:inherit}
#ll-dashboard-v6 .llv6-qz-trybar button:hover{background:rgba(14,159,139,.18)}
#ll-dashboard-v6 .llv6-qz{max-width:920px;margin:0 auto;background:#fff;border:1px solid #EDEEF2;border-radius:18px;box-shadow:0 6px 28px rgba(14,27,61,.07);padding:24px 26px 20px}
#ll-dashboard-v6 .llv6-qz .qz-head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
#ll-dashboard-v6 .llv6-qz .qz-exit{align-self:flex-start;background:none;border:0;color:#0B8676;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;padding:0}
#ll-dashboard-v6 .llv6-qz .qz-h1{font-weight:800;font-size:26px;color:#0E1B3D;letter-spacing:-.3px;display:flex;align-items:center;gap:10px}
#ll-dashboard-v6 .llv6-qz .qz-beta{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#0B8676;background:rgba(14,159,139,.12);padding:3px 8px;border-radius:999px}
#ll-dashboard-v6 .llv6-qz .qz-stepbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;row-gap:10px;margin-bottom:22px}
#ll-dashboard-v6 .llv6-qz .qz-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#ll-dashboard-v6 .llv6-qz .qz-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:#EEF1F7;color:#94A0BD;border:1px solid #DBE1ED}
#ll-dashboard-v6 .llv6-qz .qz-lab{font-size:13px;font-weight:600;color:#94A0BD;white-space:nowrap}
#ll-dashboard-v6 .llv6-qz .qz-stepline{flex:1 1 auto;height:1px;background:#DBE1ED;min-width:8px}
#ll-dashboard-v6 .llv6-qz .qz-step.on .qz-num{background:#0E1B3D;color:#fff;border-color:#0E1B3D}
#ll-dashboard-v6 .llv6-qz .qz-step.on .qz-lab{color:#0E1B3D}
#ll-dashboard-v6 .llv6-qz .qz-step.done .qz-num{background:#0E9F8B;color:#fff;border-color:#0E9F8B}
#ll-dashboard-v6 .llv6-qz .qz-step.done .qz-lab{color:#3A4763}
#ll-dashboard-v6 .llv6-qz .qz-body{display:flex;flex-direction:column;gap:14px}
#ll-dashboard-v6 .llv6-qz .qz-card{background:#F7F8FB;border:1px solid #EDEEF2;border-radius:14px;padding:16px 18px}
#ll-dashboard-v6 .llv6-qz .qz-lbl{display:block;font-weight:700;font-size:13.5px;color:#0E1B3D;margin-bottom:9px}
#ll-dashboard-v6 .llv6-qz .qz-input{width:100%;border:1px solid #DBE1ED;border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;color:#0E1B3D;background:#fff}
#ll-dashboard-v6 .llv6-qz .qz-input:focus{outline:0;border-color:#0E9F8B;box-shadow:0 0 0 3px rgba(14,159,139,.15)}
#ll-dashboard-v6 .llv6-qz .qz-ta{width:100%;min-height:90px;resize:vertical;border:1px solid #DBE1ED;border-radius:10px;padding:11px 13px;font-size:14.5px;font-family:inherit;color:#0E1B3D;background:#fff;margin-top:10px;line-height:1.5}
#ll-dashboard-v6 .llv6-qz .qz-ta:focus{outline:0;border-color:#0E9F8B;box-shadow:0 0 0 3px rgba(14,159,139,.15)}
#ll-dashboard-v6 .llv6-qz .qz-date{max-width:260px}
#ll-dashboard-v6 .llv6-qz .qz-hint{font-size:12.5px;color:#94A0BD;margin-top:8px}
#ll-dashboard-v6 .llv6-qz .qz-kids{display:flex;flex-wrap:wrap;gap:9px}
#ll-dashboard-v6 .llv6-qz .qz-kid{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #DBE1ED;border-radius:999px;padding:6px 14px 6px 6px;font-size:14px;font-weight:600;color:#3A4763;cursor:pointer;font-family:inherit;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-kid-av{width:26px;height:26px;border-radius:50%;background:var(--qc,#0E9F8B);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
#ll-dashboard-v6 .llv6-qz .qz-kid.on{border-color:var(--qc,#0E9F8B);background:rgba(14,159,139,.07);color:#0E1B3D}
#ll-dashboard-v6 .llv6-qz .qz-subjs{display:flex;flex-wrap:wrap;gap:8px}
#ll-dashboard-v6 .llv6-qz .qz-subj{background:#fff;border:1.5px solid #DBE1ED;border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:#3A4763;cursor:pointer;font-family:inherit;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-subj:hover{border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-subj.on{background:rgba(14,159,139,.12);border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-csubs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
#ll-dashboard-v6 .llv6-qz .qz-csub-chip{display:inline-flex;align-items:center;gap:6px;background:#EEF0FB;color:#4A5878;border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
#ll-dashboard-v6 .llv6-qz .qz-csub-chip button{background:none;border:0;color:#7A8499;cursor:pointer;font-size:15px;line-height:1;padding:0 2px;font-family:inherit}
#ll-dashboard-v6 .llv6-qz .qz-csub-row{display:flex;gap:8px;margin-top:11px}
#ll-dashboard-v6 .llv6-qz .qz-csub-row .qz-input{flex:1 1 auto}
#ll-dashboard-v6 .llv6-qz .qz-placeholder{padding:40px 20px;text-align:center;color:#94A0BD;font-size:14px;background:#F7F8FB;border:1px dashed #DBE1ED;border-radius:14px}
#ll-dashboard-v6 .llv6-qz .qz-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid #EDEEF2}
#ll-dashboard-v6 .llv6-qz .qz-foot-r{display:flex;align-items:center;gap:16px}
#ll-dashboard-v6 .llv6-qz .qz-count{font-size:13px;color:#94A0BD;font-weight:600}
#ll-dashboard-v6 .llv6-qz .qz-btn{font-family:inherit;font-weight:600;font-size:14px;border-radius:10px;padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-btn.next,#ll-dashboard-v6 .llv6-qz .qz-btn.save{background:#0E1B3D;color:#fff}
#ll-dashboard-v6 .llv6-qz .qz-btn.next:hover{background:#162a52}
#ll-dashboard-v6 .llv6-qz .qz-btn.back{background:#fff;border-color:#DBE1ED;color:#3A4763}
#ll-dashboard-v6 .llv6-qz .qz-btn.add{background:#0E9F8B;color:#fff}
#ll-dashboard-v6 .llv6-qz .qz-btn.save[disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:560px){#ll-dashboard-v6 .llv6-qz .qz-lab{display:none}#ll-dashboard-v6 .llv6-qz{padding:18px 16px}}
/* ===== qz Step 2 — tools + multi-session timeline (Phase C3) ===== */
#ll-dashboard-v6 .llv6-qz .qz-opt{font-weight:400;font-size:12px;color:#94A0BD;text-transform:none;letter-spacing:0}
#ll-dashboard-v6 .llv6-qz .qz-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
#ll-dashboard-v6 .llv6-qz .qz-tag{display:inline-flex;align-items:center;gap:6px;background:#F4F5F8;color:#2C3850;border-radius:8px;padding:5px 6px 5px 11px;font-size:13px;font-weight:500}
#ll-dashboard-v6 .llv6-qz .qz-tag button{background:none;border:0;color:#7A8499;cursor:pointer;font-size:15px;line-height:1;padding:0 2px;font-family:inherit}
#ll-dashboard-v6 .llv6-qz .qz-tblock{margin-top:2px}
#ll-dashboard-v6 .llv6-qz .qz-tb-read{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
#ll-dashboard-v6 .llv6-qz .qz-tb-range{font-size:13px;color:#3A4763;font-weight:500;line-height:1.4}
#ll-dashboard-v6 .llv6-qz .qz-tb-dur{font-weight:700;font-size:14px;color:#0B8676;flex:0 0 auto;font-family:inherit}
#ll-dashboard-v6 .llv6-qz .qz-tb-track{position:relative;height:54px;background:#EEF1F7;border:1px solid #DBE1ED;border-radius:12px;touch-action:none;user-select:none;cursor:crosshair}
#ll-dashboard-v6 .llv6-qz .qz-tb-tick{position:absolute;top:9px;bottom:9px;width:1px;background:#DBE1ED;pointer-events:none}
#ll-dashboard-v6 .llv6-qz .qz-tb-blk{position:absolute;top:4px;bottom:4px;background:linear-gradient(90deg,rgba(14,159,139,.92),rgba(31,183,161,.92));border-radius:9px;cursor:grab;touch-action:none}
#ll-dashboard-v6 .llv6-qz .qz-tb-blk:active{cursor:grabbing}
#ll-dashboard-v6 .llv6-qz .qz-tb-h{position:absolute;top:0;bottom:0;width:16px;cursor:ew-resize;touch-action:none;z-index:2}
#ll-dashboard-v6 .llv6-qz .qz-tb-h.s{left:-8px}
#ll-dashboard-v6 .llv6-qz .qz-tb-h.e{right:-8px}
#ll-dashboard-v6 .llv6-qz .qz-tb-h::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:16px;background:#fff;border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(14,159,139,.45)}
#ll-dashboard-v6 .llv6-qz .qz-tb-x{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;border:0;background:#0E1B3D;color:#fff;font-size:12px;line-height:18px;text-align:center;padding:0;cursor:pointer;opacity:.85;z-index:4}
#ll-dashboard-v6 .llv6-qz .qz-tb-x:hover{opacity:1;transform:scale(1.1)}
#ll-dashboard-v6 .llv6-qz .qz-tb-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#94A0BD}
#ll-dashboard-v6 .llv6-qz .qz-tb-hint{margin-top:8px;min-height:14px;font-weight:600;font-size:11.5px;color:#F97316}
#ll-dashboard-v6 .llv6-qz .qz-tb-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
#ll-dashboard-v6 .llv6-qz .qz-qd{border:1.5px solid #DBE1ED;background:#fff;border-radius:999px;padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:#3A4763;cursor:pointer;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-qd:hover{border-color:#0E9F8B;color:#0B8676}
/* ===== qz Step 4 — Finishing touches (photo / record / merit) ===== */
#ll-dashboard-v6 .llv6-qz .qz-photo{border:1.5px dashed #DBE1ED;border-radius:10px;padding:16px;text-align:center;color:#94A0BD;font-size:13px;cursor:pointer;background:#fff;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-photo:hover{border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-tog{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid #E6E9F0;border-radius:12px;padding:12px 13px;cursor:pointer;font-family:inherit;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-tog:hover{border-color:rgba(14,159,139,.45)}
#ll-dashboard-v6 .llv6-qz .qz-sw{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:#D3D9E6;transition:background .18s}
#ll-dashboard-v6 .llv6-qz .qz-sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
#ll-dashboard-v6 .llv6-qz .qz-tog.is-on .qz-sw{background:#0E9F8B}
#ll-dashboard-v6 .llv6-qz .qz-tog.gold.is-on .qz-sw{background:#C99A3F}
#ll-dashboard-v6 .llv6-qz .qz-tog.is-on .qz-sw::after{transform:translateX(18px)}
#ll-dashboard-v6 .llv6-qz .qz-tog.is-on{border-color:rgba(14,159,139,.4)}
#ll-dashboard-v6 .llv6-qz .qz-tog.gold.is-on{border-color:rgba(201,154,63,.45);background:#FCF8EF}
#ll-dashboard-v6 .llv6-qz .qz-tog-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
#ll-dashboard-v6 .llv6-qz .qz-tog-tx b{font-size:13.5px;font-weight:600;color:#1E2A47}
#ll-dashboard-v6 .llv6-qz .qz-tog-tx span{font-size:12px;color:#7A8499;line-height:1.35}
#ll-dashboard-v6 .llv6-qz .qz-awwrap{margin-top:12px}
#ll-dashboard-v6 .llv6-qz .qz-awtypes{display:flex;gap:8px}
#ll-dashboard-v6 .llv6-qz .qz-awt{flex:1;border:1.5px solid #DBE1ED;background:#fff;border-radius:11px;padding:10px 6px;text-align:center;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.13s}
#ll-dashboard-v6 .llv6-qz .qz-awt:hover{border-color:rgba(14,159,139,.5)}
#ll-dashboard-v6 .llv6-qz .qz-awt .i{font-size:19px;line-height:1}
#ll-dashboard-v6 .llv6-qz .qz-awt .nn{font-size:12px;font-weight:600;color:#3A4763}
#ll-dashboard-v6 .llv6-qz .qz-awt.on{border-color:#0E9F8B;background:rgba(14,159,139,.08)}
#ll-dashboard-v6 .llv6-qz .qz-awt.on .nn{color:#0B8676}
/* ===== qz Step 3 — The learning (chips / line picker / slider) ===== */
#ll-dashboard-v6 .llv6-qz .qz-chips{display:flex;flex-wrap:wrap;gap:8px}
#ll-dashboard-v6 .llv6-qz .qz-chip{border:1.5px solid #DBE1ED;background:#fff;border-radius:999px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;color:#3A4763;cursor:pointer;transition:.13s;line-height:1}
#ll-dashboard-v6 .llv6-qz .qz-chip:hover{border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-chip.on{border-color:#0E9F8B;background:rgba(14,159,139,.1);color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-sub{font-size:12.5px;font-weight:600;color:#3A4763}
#ll-dashboard-v6 .llv6-qz .qz-ppplace{margin-top:11px}
#ll-dashboard-v6 .llv6-qz .qz-select{width:100%;background:#fff;cursor:pointer;font-family:inherit}
#ll-dashboard-v6 .llv6-qz .qz-lineprog{margin-top:13px}
#ll-dashboard-v6 .llv6-qz .qz-lt{position:relative;height:8px;border-radius:999px;background:#E6E9F0;margin:6px 0}
#ll-dashboard-v6 .llv6-qz .qz-lt-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#1FB7A1,#0E9F8B)}
#ll-dashboard-v6 .llv6-qz .qz-lt-node{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#0E9F8B;border:3px solid #fff;box-shadow:0 2px 8px rgba(14,159,139,.45);transform:translate(-50%,-50%);pointer-events:none}
#ll-dashboard-v6 .llv6-qz .qz-range{width:100%;-webkit-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;margin:0}
#ll-dashboard-v6 .llv6-qz .qz-range::-webkit-slider-runnable-track{height:18px;background:transparent}
#ll-dashboard-v6 .llv6-qz .qz-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#0E9F8B;border:3px solid #fff;box-shadow:0 2px 8px rgba(14,159,139,.5);cursor:pointer;margin-top:-2px}
#ll-dashboard-v6 .llv6-qz .qz-range::-moz-range-thumb{width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#0E9F8B;cursor:pointer}
#ll-dashboard-v6 .llv6-qz .qz-lt-meta{font-size:12.5px;color:#7A8499;margin-top:4px}
#ll-dashboard-v6 .llv6-qz .qz-lt-meta b{color:#0B8676;font-weight:700}
/* qz Step 1 — 2a/2b sub-labels (canonical question structure) */
#ll-dashboard-v6 .llv6-qz .qz-sublab{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1E2A47;margin:13px 0 6px}
#ll-dashboard-v6 .llv6-qz .qz-tag{display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 7px;border-radius:999px;background:rgba(14,159,139,.12);color:#0B8676;font-size:11px;font-weight:700;flex:0 0 auto}
/* B1 — Subject picker: collapsible subjbar dropdown (mock #ll-quicklog .subjbar) */
#ll-dashboard-v6 .llv6-qz .qz-subjpick{position:relative}
#ll-dashboard-v6 .llv6-qz .qz-subjbar{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 12px;border:1.5px solid #E5E8F0;border-radius:10px;background:#fff;cursor:pointer;text-align:left;font-family:inherit}
#ll-dashboard-v6 .llv6-qz .qz-subjbar:hover{border-color:rgba(14,159,139,.5)}
#ll-dashboard-v6 .llv6-qz .qz-subjbar.open{border-color:#0E9F8B;box-shadow:0 0 0 3px rgba(14,159,139,.1)}
#ll-dashboard-v6 .llv6-qz .qz-subjbar-sel{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
#ll-dashboard-v6 .llv6-qz .qz-subjph{color:#8A93A8;font-size:14px}
#ll-dashboard-v6 .llv6-qz .qz-subjpill{display:inline-flex;align-items:center;gap:6px;background:#F3F4F8;border-radius:7px;padding:4px 9px;font-size:12.5px;font-weight:500;color:#2C3850}
#ll-dashboard-v6 .llv6-qz .qz-subjpill .dot{width:8px;height:8px;border-radius:50%}
#ll-dashboard-v6 .llv6-qz .qz-subjbar-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;color:#8A93A8}
#ll-dashboard-v6 .llv6-qz .qz-subjcnt{min-width:20px;height:20px;line-height:20px;text-align:center;background:#0E9F8B;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 6px}
#ll-dashboard-v6 .llv6-qz .qz-subjcnt:empty{display:none}
#ll-dashboard-v6 .llv6-qz .qz-chev{transition:transform .18s}
#ll-dashboard-v6 .llv6-qz .qz-subjbar.open .qz-chev{transform:rotate(180deg)}
#ll-dashboard-v6 .llv6-qz .qz-subjpanel{margin-top:8px;padding:12px;border:1px solid #E5E8F0;border-radius:12px;background:#F7F8FB}
#ll-dashboard-v6 .llv6-qz .qz-subjpanel[hidden]{display:none}
#ll-dashboard-v6 .llv6-qz .qz-subj-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
/* Help popovers (mock hbtn/hpop) */
#ll-dashboard-v6 .llv6-qz .qz-hwrap{position:relative;display:inline-flex}
#ll-dashboard-v6 .llv6-qz .qz-hbtn{width:20px;height:20px;border-radius:50%;border:1.5px solid #0E9F8B;background:#fff;color:#0B8676;font-weight:700;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;flex-shrink:0;vertical-align:middle}
#ll-dashboard-v6 .llv6-qz .qz-hpop{position:absolute;z-index:30;top:calc(100% + 9px);left:0;width:310px;max-width:78vw;background:#fff;border:1px solid #E5E8F0;border-radius:12px;box-shadow:0 20px 50px -16px rgba(16,27,61,.35);padding:14px 30px 14px 15px;display:none;text-align:left}
#ll-dashboard-v6 .llv6-qz .qz-hpop.show{display:block}
#ll-dashboard-v6 .llv6-qz .qz-hpop h4{font-size:13px;font-weight:700;margin-bottom:7px;color:#0E1B3D}
#ll-dashboard-v6 .llv6-qz .qz-hpop p{font-size:12px;color:#3A4763;line-height:1.5;margin-bottom:7px}
#ll-dashboard-v6 .llv6-qz .qz-hpop p:last-child{margin-bottom:0}
#ll-dashboard-v6 .llv6-qz .qz-hclose{position:absolute;top:7px;right:9px;cursor:pointer;color:#8A93A8;font-size:15px;background:none;border:0;font-family:inherit}
/* Suggested-prompt clouds (mock promptpick/pchip) */
#ll-dashboard-v6 .llv6-qz .qz-promptpick{margin-top:9px}
#ll-dashboard-v6 .llv6-qz .qz-prompt-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(14,159,139,.08);border:1px solid rgba(14,159,139,.28);color:#0B8676;border-radius:999px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
#ll-dashboard-v6 .llv6-qz .qz-prompt-toggle:hover{background:rgba(14,159,139,.14)}
#ll-dashboard-v6 .llv6-qz .qz-prompt-toggle.open{background:#0E9F8B;color:#fff;border-color:#0E9F8B}
#ll-dashboard-v6 .llv6-qz .qz-prompt-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
#ll-dashboard-v6 .llv6-qz .qz-prompt-cloud[hidden]{display:none}
#ll-dashboard-v6 .llv6-qz .qz-pchip{background:#fff;border:1.5px solid #E5E8F0;color:#3A4763;border-radius:8px;padding:5px 10px;font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
#ll-dashboard-v6 .llv6-qz .qz-pchip:hover{border-color:#0E9F8B;background:rgba(14,159,139,.06);color:#0B8676}
/* Quick-date Today/Yesterday (mock quickdays/qd) */
#ll-dashboard-v6 .llv6-qz .qz-daterow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#ll-dashboard-v6 .llv6-qz .qz-daterow .qz-date{width:auto;flex:0 0 auto}
#ll-dashboard-v6 .llv6-qz .qz-quickdays{display:flex;gap:6px}
#ll-dashboard-v6 .llv6-qz .qz-qd.on{border-color:#0E9F8B;background:rgba(14,159,139,.08);color:#0B8676}
/* qz photo upload (Step 4) */
#ll-dashboard-v6 .llv6-qz .qz-photo-grid{display:flex;flex-wrap:wrap;gap:9px}
#ll-dashboard-v6 .llv6-qz .qz-photo-thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:#F1F3F8;flex:0 0 auto}
#ll-dashboard-v6 .llv6-qz .qz-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#ll-dashboard-v6 .llv6-qz .qz-photo-thumb.is-hero{outline:2px solid #0E9F8B;outline-offset:-2px}
#ll-dashboard-v6 .llv6-qz .qz-photo-herobadge{position:absolute;left:0;bottom:0;background:rgba(14,159,139,.92);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-top-right-radius:6px}
#ll-dashboard-v6 .llv6-qz .qz-photo-hero{position:absolute;left:4px;bottom:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(14,27,61,.66);color:#fff;font-size:12px;line-height:22px;text-align:center;padding:0;cursor:pointer}
#ll-dashboard-v6 .llv6-qz .qz-photo-rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:#0E1B3D;color:#fff;font-size:12px;line-height:20px;text-align:center;padding:0;cursor:pointer;opacity:.9}
#ll-dashboard-v6 .llv6-qz .qz-photo-rm:hover{opacity:1}
#ll-dashboard-v6 .llv6-qz .qz-photo-add{width:84px;height:84px;border-radius:10px;border:1.5px dashed #DBE1ED;background:#fff;color:#94A0BD;font-size:26px;cursor:pointer;flex:0 0 auto}
#ll-dashboard-v6 .llv6-qz .qz-photo-add:hover{border-color:#0E9F8B;color:#0B8676}
#ll-dashboard-v6 .llv6-qz .qz-photo-thumb.is-pending{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:6px;text-align:center}
#ll-dashboard-v6 .llv6-qz .qz-photo-thumb.is-error{background:#FEF2F2}
#ll-dashboard-v6 .llv6-qz .qz-photo-err{font-size:18px;color:#DC2626}
#ll-dashboard-v6 .llv6-qz .qz-photo-errlab{font-size:9px;color:#B91C1C;line-height:1.2}
#ll-dashboard-v6 .llv6-qz .qz-photo-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid #D3D9E6;border-top-color:#0E9F8B;animation:qzspin .7s linear infinite}
#ll-dashboard-v6 .llv6-qz .qz-photo-hidden{display:none}
@keyframes qzspin{to{transform:rotate(360deg)}}
/* ============================================================
MOBILE-FIRST DASHBOARD SHELL (appended 2026-06-11)
Phone behaviour gated at max-width:560px. Desktop >=561px
gains only ONE base rule: hide the nav pill.
============================================================ */
#ll-dashboard-v6 .llv6-navpill{display:none}
@media(max-width:720px){
/* 4a — relax the fixed-height app shell (the real "fixed" constraint) */
#ll-dashboard-v6{display:block!important;height:auto!important;min-height:100dvh;
border:0!important;border-radius:0!important;overflow:visible!important;background:#f5f7fb}
#ll-dashboard-v6 .llv6-main{display:block!important;min-height:0;overflow:visible}
#ll-dashboard-v6 .llv6-content{display:block!important;overflow:visible!important;height:auto!important;
padding:8px 16px calc(96px + env(safe-area-inset-bottom))!important}
#ll-dashboard-v6 .llv6-topbar{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 8px;overflow:visible}
#ll-dashboard-v6 .llv6-journey-item{min-width:0!important;padding-right:0!important;border-right:0!important}
#ll-dashboard-v6 .llv6-topbar .llv6-time-cell{grid-column:1 / -1}
/* 4b — sidebar -> bottom sheet (overrides the left-slide is-mobile-open rule) */
#ll-dashboard-v6 .llv6-sidebar{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;
width:auto!important;max-width:none!important;max-height:82vh;border-radius:22px 22px 0 0;
transform:translateY(102%)!important;transition:transform .38s cubic-bezier(.4,0,.2,1);
z-index:9992;overflow-y:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
#ll-dashboard-v6.is-mobile-open .llv6-sidebar{transform:translateY(0)!important}
#ll-dashboard-v6 .llv6-premium{display:none}
/* 4c — floating nav pill + overlay + hide the in-topbar toggle */
#ll-dashboard-v6 .llv6-navpill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;max-width:calc(100vw - 32px);white-space:nowrap;
display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 18px;border-radius:999px;
background:linear-gradient(160deg,#0b1a3a 0%,#0b1530 50%,#0a2a23 100%);color:#fff;
border:1px solid rgba(255,255,255,.12);font-family:'Outfit',sans-serif;font-weight:700;font-size:14.5px;
z-index:9993;box-shadow:0 14px 36px rgba(8,15,35,.5);cursor:pointer}
#ll-dashboard-v6 .llv6-navpill-ico{display:grid;place-items:center;width:22px;height:22px}
#ll-dashboard-v6 .llv6-navpill-ico svg{width:21px;height:21px;stroke:#10bfae}
#ll-dashboard-v6 .llv6-navpill-caret{margin-left:2px;font-size:13px;color:#10bfae}
#ll-dashboard-v6.is-mobile-open .llv6-navpill{display:none}
#ll-dashboard-v6 .llv6-topbar .llv6-mobile-toggle{display:none}
#ll-dashboard-v6 .llv6-mobile-overlay{z-index:9991}
/* 4d — pill hides while any modal/backdrop is open (presence- and class-based families) */
#ll-dashboard-v6:has(.awmod.open,.galmod.open,.llcal-v6 .mod.open,.dmodal.open,.llv6-merit-overlay,.llv6-modal-backdrop,#ll-mosaic .modal.open,#ll-insights .modal.open,#m-line.open,#m-merit.open,#m-pp.open,#m-time.open,#ll-cal2 .scrim.on) .llv6-navpill{display:none}
/* PWA install card lifts above the pill on dashboard pages.
pointer-events gating: parked (hidden) it is translate+opacity:0 but
still hit-testable — at bottom:80px its invisible top strip overlays
the pill's lower half and eats taps. Tap-transparent until shown. */
body.ll-dash-page #ll-install{bottom:calc(80px + env(safe-area-inset-bottom))!important;pointer-events:none}
body.ll-dash-page #ll-install.show{pointer-events:auto}
/* 4e — sheet restyled to the site drawer pattern (white, grab handle,
heading, 54px icon rows, teal-active left border). Same DOM as the
navy sheet — pure overrides, dashboard tokens not site brand. */
#ll-dashboard-v6 .llv6-sidebar{background:#fff;color:#0f172a;gap:0;padding:12px 0 calc(28px + env(safe-area-inset-bottom));box-shadow:0 -8px 40px rgba(14,27,61,.18)}
#ll-dashboard-v6 .llv6-sidebar::before{content:"";display:block;flex:0 0 auto;width:40px;height:4px;border-radius:2px;background:#E2E8F0;margin:0 auto 14px}
#ll-dashboard-v6 .llv6-sidebar .llv6-brand{display:none}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav{gap:0}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav::before{content:"Jump to view";display:block;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#94a3b8;padding:0 24px 12px;border-bottom:1px solid #e2e8f0;margin-bottom:6px}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav-btn{color:#0f172a;font-size:15px;min-height:54px;padding:0 24px;border-radius:0;border-left:3px solid transparent;gap:14px}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav-btn.is-active{background:#ccfbf1;color:#0d9488;border-left-color:#10bfae;box-shadow:none}
#ll-dashboard-v6 .llv6-sidebar .llv6-user{margin:12px 24px 0;padding-top:14px;border-top:1px solid #e2e8f0}
#ll-dashboard-v6 .llv6-sidebar .llv6-avatar{background:#ccfbf1;color:#0d9488}
#ll-dashboard-v6 .llv6-sidebar .llv6-user-text strong{color:#0f172a}
#ll-dashboard-v6 .llv6-sidebar .llv6-user-text p{color:#64748b!important}
/* 4e-fix — the 720px block turns the sidebar into a horizontal scroller
(flex-direction:row, nav min-width:max-content) and the 1100px block
hides .llv6-user-text and centres buttons. Inside the drawer all four
must be defeated explicitly or rows render side-by-side and overflow. */
#ll-dashboard-v6 .llv6-sidebar{flex-direction:column!important;overflow-x:hidden!important}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav{display:flex!important;flex-direction:column!important;min-width:0!important;width:100%}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav::before{flex:0 0 auto;width:100%}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav-btn{flex:0 0 auto;width:100%;justify-content:flex-start!important;text-align:left}
#ll-dashboard-v6 .llv6-sidebar .llv6-nav-btn .llv6-nav-label{display:inline!important}
#ll-dashboard-v6 .llv6-sidebar .llv6-user-text{display:block!important}
/* Sheet height cap — measured space below a fixed header (set by
llSizeShell as --ll-sheet-max), falling back to 82vh otherwise.
height/min-height must be neutralised here: the old left-drawer
rule sets height:100vh;min-height:100vh, and min-height BEATS
max-height per spec — the cap was being ignored and the sheet's
top (handle, heading, Dashboard row) hid under the fixed header. */
#ll-dashboard-v6 .llv6-sidebar{height:auto;min-height:0;max-height:var(--ll-sheet-max,82vh)}
/* ── 4g — Progress & Merits view (#ll-pm) phone pass ──
Double-id selectors outrank the view's embedded