:root {
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#252724;
  background:#fafbf9;
  font-size:100%;
  --muted:#626960;
  --line:#e5e8e1;
  --green:#4c6950;
  --blue:#426b91
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

a:hover {
  color:var(--green)
}

button:hover,.button:hover {
  filter:brightness(.94)
}

:focus-visible {
  outline:.15rem solid #6b8d73;
  outline-offset:.2rem
}

h1,h2,h3,h4,p {
  margin-top:0
}

h1,h2,h3,h4 {
  font-weight:600
}

p {
  line-height:1.7
}

button {
  color:inherit
}

small {
  line-height:1.6
}

.muted {
  color:var(--muted)
}

.site-header {
  padding:1.6% 5%;
  border-bottom:.0625rem solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  gap:2rem
}

.brand {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:1.05rem;
  font-weight:600;
  white-space:nowrap
}

.brand img {
  width:5.2rem;
  height:auto
}

.brand-divider {
  height:1.4rem;
  border-left:.0625rem solid #d9ddd5
}

.beta {
  margin-left:.65rem;
  font-size:.875rem;
  letter-spacing:.08em;
  background:#eef0e9;
  color:#777d70;
  padding:.25rem .35rem;
  border-radius:.2rem;
  vertical-align:middle
}

nav {
  display:flex;
  gap:2rem;
  align-items:center;
  font-size:1rem
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1.8rem;
  padding:.4rem .75rem;
  background:#283d2d;
  border:.0625rem solid #283d2d;
  color:#fff;
  border-radius:.4rem;
  font-size:.875rem;
  font-weight:500;
  line-height:1.4
}

.button:hover {
  color:#fff
}

.button.small {
  padding:.4rem .75rem;
  font-size:.875rem
}

.button.secondary {
  background:#fff;
  color:#343a32;
  border-color:#dce1d7
}

.button.full {
  width:100%;
  justify-content:space-between
}

.text-link {
  font-size:1rem;
  display:inline-flex;
  gap:1rem;
  align-items:center
}

.landing {
  width:84%;
  margin:auto
}

.hero {
  text-align:center;
  padding:7% 0 5%
}

.eyebrow {
  font-size:.875rem;
  letter-spacing:.15em;
  color:#64705f;
  font-weight:600
}

.dot {
  display:inline-block;
  width:.4rem;
  height:.4rem;
  background:#6c8762;
  border-radius:50%;
  margin-right:.5rem
}

.hero h1 {
  font-size:clamp(2.25rem,4.2vw,4.2rem);
  line-height:1.13;
  letter-spacing:-.055em;
  margin:1.6rem 0 1.4rem;
  font-weight:500
}

.hero>p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.8
}

.hero-actions {
  display:flex;
  gap:1.7rem;
  justify-content:center;
  align-items:center;
  margin:1.8rem 0 1.2rem
}

.hero-footnote {
  font-size:.875rem;
  color:#878c82
}

.hero-footnote span {
  padding:0 .6rem
}

.preview {
  background:#fff;
  border:.0625rem solid #dfe4d9;
  border-radius:.7rem;
  box-shadow:0 .8rem 2rem #313d2806;
  overflow:hidden
}

.preview-top {
  padding:1.2% 2.3%;
  background:#f6f7f3;
  border-bottom:.0625rem solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.875rem;
  color:var(--muted)
}

.window-dot {
  display:inline-block;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#d8ddd1;
  margin-right:.35rem
}

.badge {
  display:inline-block;
  font-size:.875rem;
  padding:.32rem .5rem;
  border-radius:.3rem;
  background:#f0f2ed;
  color:#6d7565;
  font-weight:400;
  white-space:nowrap
}

.preview-body {
  padding:3.3% 4% 1.5%
}

.profile {
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:2.5rem 0
}

.profile.compact {
  padding:0 0 2rem;
  gap:1rem
}

.profile h1 {
  font-size:1.9rem;
  letter-spacing:-.04em;
  margin:0
}

.profile h2 {
  font-size:1.2rem;
  margin-bottom:.5rem
}

.handle {
  font-size:.875rem;
  font-weight:400
}

.profile p {
  font-size:1rem;
  margin:.4rem 0
}

.profile-meta {
  display:flex;
  gap:1.5rem;
  color:var(--muted);
  font-size:.875rem;
  margin-top:.65rem
}

.preview-open {
  margin-left:auto;
  font-size:.875rem
}

.preview-tabs {
  display:flex;
  gap:2rem;
  font-size:.875rem;
  border-bottom:.0625rem solid var(--line);
  color:#898d84
}

.preview-tabs>* {
  padding:0 0 1rem
}

.preview-tabs strong {
  color:#424d3b;
  border-bottom:.12rem solid #627453;
  font-weight:500
}

.sample-columns {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:4%;
  padding:2rem 0 0
}

.sample-columns h3 {
  font-size:1rem;
  display:flex;
  align-items:center;
  gap:.5rem
}

.status-dot {
  width:.43rem;
  height:.43rem;
  border:.0625rem solid #949b89;
  border-radius:50%;
  display:inline-block
}

.status-dot.blue {
  background:#6b8eaf;
  border-color:#6b8eaf
}

.status-dot.green {
  background:#7b9471;
  border-color:#7b9471
}

.count {
  color:#9a9f93;
  font-size:.875rem;
  margin-left:.2rem
}

.sample-entry {
  padding:.8rem 0 1.2rem;
  border-bottom:.0625rem solid #edf0e9;
  margin-bottom:.6rem
}

.sample-entry:last-child {
  border:0
}

.tech {
  font-size:.875rem;
  letter-spacing:.08em;
  color:#87907e
}

.sample-entry h4 {
  font-size:1rem;
  margin:.55rem 0
}

.sample-entry h4 span {
  float:right
}

.sample-entry p {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:.75rem
}

.blue {
  color:var(--blue);
  background:#edf3f9
}

.green {
  color:#527651;
  background:#edf4e9
}

.blue-text {
  color:var(--blue)
}

.green-text {
  color:#63855a
}

.queued {
  display:flex;
  gap:.7rem;
  font-size:1rem;
  padding:.7rem 0;
  margin:0
}

.queued small {
  display:block;
  color:var(--muted);
  font-size:.875rem;
  margin-top:.2rem
}

.tiny-note {
  border-left:.12rem solid #e0e6d8;
  margin:1.7rem 0;
  padding-left:1rem;
  font-family:Georgia,serif;
  color:#959c8b;
  font-size:1rem;
  line-height:1.7
}

.how {
  padding:7% 0
}

.section-intro {
  text-align:center
}

.section-intro h2 {
  font-size:1.9rem;
  font-weight:500;
  letter-spacing:-.035em;
  margin:1rem 0 .65rem
}

.section-intro p {
  font-size:1rem;
  color:var(--muted)
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7%;
  margin-top:3rem
}

.step-number {
  font-family:monospace;
  color:#8a987c;
  font-size:1rem
}

.steps h3 {
  font-size:1rem;
  margin:1.2rem 0 .7rem
}

.steps p {
  font-size:1rem;
  color:var(--muted)
}

.closing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:3% 4%;
  background:#eff2e9;
  border:.0625rem solid #e3e8d9;
  border-radius:.5rem;
  margin-bottom:6%
}

.closing h2 {
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-.03em;
  margin-bottom:.6rem
}

.closing p {
  font-size:1rem;
  color:var(--muted);
  margin:0
}

footer {
  margin:0 5%;
  padding:1.8rem 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:.0625rem solid var(--line);
  color:#92988b;
  font-size:.875rem
}

.auth-layout {
  width:80%;
  margin:6% auto 8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  align-items:center;
  min-height:65vh
}

.auth-story h1 {
  font-size:clamp(2.7rem,4.8vw,5rem);
  font-weight:500;
  letter-spacing:-.06em;
  line-height:1.1;
  margin:1.6rem 0
}

.auth-story>p {
  color:var(--muted);
  font-size:1rem
}

.auth-quote {
  font-family:Georgia,serif;
  font-size:1.25rem;
  line-height:1.7;
  border-left:.15rem solid #a8b795;
  padding-left:1.3rem;
  margin:2.5rem 0
}

.auth-story>span.muted {
  font-size:.875rem;
  letter-spacing:.1em
}

.auth-card {
  background:#fff;
  border:.0625rem solid var(--line);
  border-radius:.7rem;
  padding:9%
}

.auth-card h2 {
  font-size:1.8rem;
  font-weight:500;
  letter-spacing:-.04em;
  margin:.8rem 0
}

.auth-card>p {
  font-size:1rem;
  color:var(--muted)
}

label {
  display:block;
  font-size:1rem;
  font-weight:500;
  margin:1.1rem 0
}

input,select,textarea {
  display:block;
  width:100%;
  margin-top:.5rem;
  padding:.8rem;
  border:.0625rem solid #dce1d6;
  border-radius:.35rem;
  background:#fff;
  color:#30372b;
  min-width:0;
  font-size:1rem
}

textarea {
  resize:vertical;
  min-height:6rem
}

input::placeholder,textarea::placeholder {
  color:#9aa090
}

.input-prefix {
  display:flex;
  align-items:center;
  border:.0625rem solid #dce1d6;
  border-radius:.35rem;
  margin-top:.5rem;
  padding-left:.8rem;
  color:#939b89
}

.input-prefix input {
  border:0;
  margin:0
}

.prototype-note {
  font-size:.875rem!important;
  line-height:1.7;
  background:#f4f6f0;
  color:#79806f;
  padding:1rem;
  border-radius:.3rem;
  margin:1.5rem 0
}

.auth-switch {
  text-align:center;
  font-size:.875rem!important;
  margin-top:1.5rem
}

.auth-switch a {
  color:#46643d;
  text-decoration:underline;
  text-underline-offset:.2rem
}

.auth-card>a.muted {
  display:block;
  text-align:center;
  font-size:.875rem;
  margin-top:1.5rem
}

.lifecycle {
  display:flex;
  gap:.7rem;
  align-items:center;
  margin:2.5rem 0;
  font-size:1rem
}

.dashboard {
  width:82%;
  margin:0 auto 4%;
  min-height:75vh
}

.profile-copy {
  flex:1;
  min-width:0
}

.profile-title {
  display:flex;
  gap:.8rem;
  align-items:center;
  flex-wrap:wrap
}

.profile-title>.muted {
  font-size:1rem
}

.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:.0625rem solid var(--line);
  border-bottom:.0625rem solid var(--line);
  padding:1.5rem 0;
  margin-bottom:2rem
}

.stat {
  padding-left:12%;
  border-left:.0625rem solid var(--line)
}

.stat:first-child {
  padding-left:0;
  border:0
}

.stat strong {
  font-size:1.6rem;
  font-weight:500;
  margin-right:.6rem
}

.stat span {
  font-size:1rem;
  color:var(--muted)
}

.dashboard-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2rem;
  gap:1rem
}

.tabs {
  display:flex;
  background:#edf0e9;
  padding:.3rem;
  border-radius:.45rem;
  gap:.25rem
}

.tabs button {
  border:0;
  background:transparent;
  padding:.65rem 1rem;
  border-radius:.3rem;
  font-size:1rem;
  color:#717967
}

.tabs button[aria-selected=true] {
  background:#fff;
  color:#2b3725;
  box-shadow:0 .1rem .25rem #2835220c
}

.dashboard-grid {
  display:grid;
  grid-template-columns:67% 27%;
  gap:6%
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem
}

.section-heading h2 {
  font-size:1.02rem;
  letter-spacing:-.02em;
  margin:0
}

.section-heading p {
  font-size:1rem;
  margin:.5rem 0 0
}

.log-section {
  margin-bottom:2rem
}

.log-section .section-heading {
  margin-bottom:.8rem
}

.plain {
  border:0;
  background:transparent;
  padding:.3rem;
  color:#7b8570;
  font-size:1rem
}

.log-card {
  border:.0625rem solid var(--line);
  background:#fff;
  border-radius:.4rem;
  padding:1.1rem 1.2rem;
  margin-bottom:.65rem
}

.log-card-top {
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  align-items:center
}

.log-card h3 {
  font-size:1rem;
  margin:.6rem 0 .4rem;
  overflow-wrap:anywhere
}

.log-card p {
  font-size:1rem;
  color:var(--muted);
  margin:.4rem 0
}

.log-card-foot {
  display:flex;
  align-items:center;
  gap:.9rem;
  font-size:.875rem;
  color:#92998b;
  margin-top:.75rem
}

.log-card-foot a {
  color:#567448
}

.log-card-foot .plain {
  margin-left:auto;
  font-size:.875rem
}

.advance {
  border:.0625rem solid #dfe5d8;
  background:#f5f7f0;
  padding:.35rem .6rem;
  border-radius:.25rem;
  color:#60734f;
  font-size:.875rem
}

.side-section {
  padding-bottom:1.7rem;
  margin-bottom:1.7rem;
  border-bottom:.0625rem solid var(--line)
}

.side-section>p {
  font-size:.875rem
}

.tool-list {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}

.tool-chip {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  border:.0625rem solid var(--line);
  background:#fff;
  border-radius:.3rem;
  font-size:.875rem
}

.tool-chip button {
  padding:0;
  border:0;
  background:none;
  color:#9ba28f;
  font-size:.875rem
}

.cert {
  margin-top:1rem;
  font-size:1rem;
  overflow-wrap:anywhere
}

.cert p {
  font-size:.875rem;
  margin:.3rem 0;
  color:var(--muted)
}

.cert a {
  font-size:.875rem;
  color:var(--green)
}

.archive-note {
  background:#f0f3ea;
  padding:1.3rem;
  border-radius:.35rem;
  color:#829075
}

.archive-note>span {
  font-size:.875rem;
  letter-spacing:.08em
}

.archive-note p {
  font-size:1rem;
  margin:1rem 0
}

.archive-note small {
  font-size:.875rem;
  color:#97a08c
}

.local-note {
  font-size:.875rem;
  color:#909886;
  text-align:center;
  margin-top:3rem
}

.empty {
  font-size:1rem;
  color:#939a88;
  padding:1.5rem;
  border:.0625rem dashed #dce2d2;
  border-radius:.4rem;
  line-height:1.7
}

.filter-label {
  font-size:.875rem;
  margin:0;
  min-width:25%
}

.filter-label select {
  padding:.5rem
}

.event {
  display:flex;
  gap:1.5rem;
  padding:1.5rem 0;
  border-bottom:.0625rem solid var(--line)
}

.event-date {
  width:15%;
  flex-shrink:0;
  font-size:.875rem;
  color:#8b937f
}

.event h3 {
  font-size:1rem;
  margin:.5rem 0
}

.event p {
  font-size:1rem;
  color:var(--muted);
  margin:.4rem 0
}

.matrix-group {
  margin:2rem 0;
  background:#fff;
  border:.0625rem solid var(--line);
  border-radius:.4rem;
  overflow:hidden
}

.matrix-group h3 {
  font-size:1rem;
  padding:1rem;
  margin:0;
  background:#f0f3eb
}

.matrix-row {
  display:grid;
  grid-template-columns:25% 45% 30%;
  gap:0;
  padding:1rem;
  border-top:.0625rem solid var(--line);
  align-items:center;
  font-size:1rem
}

.matrix-row>span {
  overflow-wrap:anywhere;
  padding-right:.8rem
}

.matrix-row .badge {
  justify-self:start
}

dialog {
  width:43%;
  max-height:90vh;
  border:.0625rem solid #dce3d3;
  border-radius:.65rem;
  padding:2rem;
  color:#2c3326;
  box-shadow:0 2rem 6rem #17201220
}

dialog::backdrop {
  background:#18201660;
  backdrop-filter:blur(.15rem)
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.dialog-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  border-top:.0625rem solid var(--line);
  margin-top:1.5rem;
  padding-top:1rem
}

.form-hint {
  font-size:.875rem;
  color:var(--muted);
  margin:.5rem 0
}

#toast {
  position:fixed;
  bottom:3%;
  left:50%;
  transform:translateX(-50%);
  background:#2b3e2b;
  color:#fff;
  padding:1rem 1.4rem;
  border-radius:.4rem;
  font-size:1rem;
  z-index:5;
  max-width:90%
}

[hidden] {
  display:none!important
}


@media(min-width:100rem) {
  .landing,.dashboard {
  width:76%
}

.hero {
  padding-top:6%
}


}


@media(max-width:55rem) {
  .site-header {
  padding:1.2rem 5%
}

.site-header nav {
  gap:1rem
}

.landing,.dashboard {
  width:90%
}

.hero {
  padding:12% 0 9%
}

.sample-columns {
  gap:3%
}

.preview-body {
  padding:5%
}

.preview-open {
  display:none
}

.dashboard-grid {
  grid-template-columns:62% 33%;
  gap:5%
}

.stat strong {
  display:block;
  margin-bottom:.4rem
}

.auth-layout {
  width:88%;
  gap:6%
}

.auth-card {
  padding:8%
}

.auth-story h1 {
  font-size:3rem
}

.lifecycle {
  flex-wrap:wrap
}

.tabs button {
  padding:.65rem .7rem
}

dialog {
  width:70%
}

footer>span:last-child {
  display:none
}


}


@media(max-width:38rem) {
  .brand {
  font-size:1rem;
  gap:.6rem
}

.brand img {
  width:3.7rem
}

.beta {
  display:none
}

.site-header nav>a:first-child {
  display:none
}

.site-header nav {
  gap:.8rem;
  font-size:.875rem
}

.site-header>a:last-child:not(.brand) {
  font-size:.875rem
}

.site-header .button {
  padding:.4rem .75rem
}

.hero h1 {
  font-size:2.6rem
}

.hero>p {
  font-size:1rem
}

.desktop-only {
  display:none
}

.hero-actions {
  flex-direction:column;
  gap:1.2rem
}

.hero-footnote {
  font-size:.875rem
}

.hero-footnote span {
  padding:0 .25rem
}

.preview-top {
  padding:.7rem
}

.preview-top .badge {
  font-size:.875rem
}

.preview-tabs {
  gap:1rem;
  font-size:.875rem
}

.compact .profile-meta {
  display:none
}

.profile.compact {
  padding:1rem 0 1.5rem
}

.compact h2 {
  font-size:1rem
}

.compact p {
  font-size:.875rem
}

.sample-columns {
  grid-template-columns:1fr 1fr;
  padding-top:1.3rem;
  gap:6%
}

.next-column {
  display:none
}

.sample-columns h3 {
  font-size:.875rem
}

.tech {
  font-size:.875rem
}

.sample-entry h4 {
  font-size:1rem
}

.sample-entry p {
  font-size:.875rem
}

.steps {
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:2rem
}

.steps article {
  border-top:.0625rem solid var(--line);
  padding-top:1.5rem
}

.how {
  padding:14% 0 8%
}

.section-intro h2 {
  font-size:1.6rem
}

.closing {
  padding:8%;
  flex-direction:column;
  align-items:flex-start;
  gap:1.5rem;
  margin-bottom:12%
}

.closing h2 {
  font-size:1.35rem
}

footer {
  font-size:.875rem;
  flex-wrap:wrap
}

.auth-layout {
  grid-template-columns:1fr;
  margin:10% auto
}

.auth-story {
  padding:0 3% 1.5rem
}

.auth-story h1 {
  font-size:2.7rem
}

.auth-quote,.auth-story>span.muted {
  display:none
}

.auth-card {
  padding:7%
}

.lifecycle {
  margin:1.5rem 0
}

.profile {
  gap:.8rem;
  flex-wrap:wrap;
  padding:1.8rem 0
}

.profile h1 {
  font-size:1.55rem
}

.profile-title {
  gap:.5rem
}

.profile-title .badge {
  display:none
}

.profile p {
  font-size:1rem
}

.profile-meta {
  font-size:.875rem;
  gap:.7rem
}

.profile>button {
  margin-left:0
}

.stats {
  padding:1rem 0
}

.stat {
  padding-left:15%
}

.stat strong {
  font-size:1.3rem
}

.stat span {
  font-size:.875rem
}

.dashboard-toolbar {
  flex-wrap:wrap;
  gap:1rem
}

.tabs {
  width:100%;
  justify-content:space-between
}

.tabs button {
  font-size:1rem
}

.dashboard-toolbar>.button {
  margin-left:auto
}

.dashboard-grid {
  grid-template-columns:1fr
}

.log-card {
  padding:1rem
}

.log-card-top {
  gap:.4rem
}

.log-card-foot {
  gap:.6rem;
  flex-wrap:wrap
}

.side-section {
  margin-top:1rem
}

.event {
  gap:1rem
}

.event-date {
  width:23%;
  font-size:.875rem
}

.matrix-row {
  grid-template-columns:25% 42% 33%;
  padding:.8rem;
  font-size:.875rem
}

.matrix-row .badge {
  font-size:.875rem
}

.filter-label {
  min-width:38%
}

dialog {
  width:92%;
  padding:1.3rem
}

.form-row {
  grid-template-columns:1fr;
  gap:0
}


}



@media(max-width:38rem) {
  .profile-copy {
  flex:1 1 70%
}

.profile>button {
  margin-left:0
}

.profile-meta {
  flex-wrap:wrap
}

.profile-meta>span {
  line-height:1.6
}


}




/* Three simple learning columns, with one-step logging. */
.dashboard-toolbar { border-top: .0625rem solid var(--line); padding-top: 1.5rem; }
.dashboard-grid { display: block; }
.learning-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; align-items: start; }
.log-section { min-width: 0; padding: 1rem; background: #f3f5ef; border-radius: .5rem; }
.log-card { padding: 1rem; }
.log-card-foot { flex-wrap: wrap; gap: .6rem; }
.log-card .tech { overflow-wrap: anywhere; }
.entry-toggle { width: 100%; text-align: left; padding: .8rem; margin-bottom: 1rem; border: .0625rem solid #dce1d6; border-radius: .35rem; background: white; color: var(--green); font-size:1rem; }
.entry-panel { background: white; border: .0625rem solid #dce1d6; border-radius: .35rem; padding: .85rem; margin-bottom: 1rem; }
.quick-log { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: end; }
.quick-log label { margin: 0; min-width: 0; font-size:.875rem; color: var(--muted); }
.quick-log label:first-child { grid-column: 1 / -1; }
.quick-log input { width: 100%; margin-top: .35rem; padding: .7rem; }
.quick-log button { border: .0625rem solid #dce1d6; border-radius: .35rem; background: white; color: var(--green); padding: .4rem .75rem; font-size:.875rem; line-height:1.4; }
.entry-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.entry-actions button[type=submit] { background: #283d2d; color: white; border-color: #283d2d; }
.log-section .empty { border: 0; padding: 1rem .2rem; font-size:.875rem; }
.dashboard-grid > aside { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; border-top: .0625rem solid var(--line); padding-top: 2rem; }
.dashboard-grid .archive-note { grid-column: 1 / -1; background: transparent; padding: 0; }
.dashboard-grid .archive-note p { margin: .5rem 0; }
.sr-only { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 55rem) {
  .learning-main { grid-template-columns: 1fr; }
  .dashboard-grid > aside { grid-template-columns: 1fr; gap: 0; }
}

/* Readable app typography, with clear titles and quieter supporting text. */
body { line-height: 1.5; }
.section-heading h2, .log-card h3 { font-size: 1.125rem; line-height: 1.4; }
.log-card h3 { margin: .5rem 0; font-weight: 600; }
.log-card p { line-height: 1.6; }
.tech { color: #626b5c; letter-spacing: .025em; }
.count, .log-card-foot, .event-date, .local-note, footer { color: #697261; }
.tabs button, .entry-toggle, .button, .advance { font-weight: 500; }
.log-card-foot { row-gap: .7rem; }
.log-card-foot .plain { color: #5e6955; }
.log-card-foot .advance { padding: .45rem .65rem; }
.quick-log label { color: #4d5648; font-weight: 500; }
.quick-log input, input, select, textarea { font-size: 1rem; }
input::placeholder, textarea::placeholder { color: #78816f; }
.profile p { font-size: 1rem; }
.profile-title > .muted { font-size: 1rem; }
.tool-chip { padding: .55rem .75rem; }
.tool-chip button { color: #64705a; }
.archive-note, .archive-note small { color: #68755c; }
.dashboard { width: 88%; }
@media (max-width: 38rem) {
  .dashboard { width: 92%; }
  .site-header { flex-wrap: wrap; gap: .8rem; }
  .tabs button { padding: .65rem .5rem; }
  .preview-tabs { flex-wrap: wrap; }
  .sample-columns { grid-template-columns: 1fr; }
  .profile-copy { flex-basis: 65%; }
  .matrix-row { grid-template-columns: 1fr 1.5fr; gap: .5rem; }
  .matrix-row .badge { grid-column: 2; }
  .hero-footnote { line-height: 1.8; }
}

/* Shared secondary action style. Primary actions and navigation tabs stay distinct. */
.button.secondary,
.plain,
.advance,
.entry-toggle,
.quick-log button[type=button],
.tool-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: .0625rem solid #cdd8e4;
  border-radius: .35rem;
  background: #f5f7fa;
  color: #25374b;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 .0625rem .125rem #25374b05;
}
.button.secondary:hover,
.plain:hover,
.advance:hover,
.entry-toggle:hover,
.quick-log button[type=button]:hover,
.tool-chip button:hover {
  background: #eaf0f6;
  border-color: #adbfd1;
  color: #1e3045;
  filter: none;
}
.entry-toggle { width: auto; justify-content: center; }
.log-card-foot .plain,
.log-card-foot .advance { color: #25374b; padding: .4rem .75rem; }
.tool-chip { gap: .65rem; }
.tool-chip button { padding: .25rem .5rem; }

/* Quiet count badges beside the learning column headings. */
.button-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  object-fit: contain;
}
.button-icon.complete-icon { opacity: .6; }
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
@media (max-width: 38rem) {
  .tabs { flex-wrap: wrap; justify-content: flex-start; }
}
.status-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
}
.log-section .section-heading h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.log-section .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: .15rem .6rem;
  margin-left: .1rem;
  border-radius: 2rem;
  background: #e9edf1;
  color: #25374b;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Scrollable workspace: three learning columns and a supporting sidebar. */
.dashboard-grid {
  display: flex;
  align-items: flex-start;
  gap: 1.5%;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: auto;
  scrollbar-color: #bac5d1 #edf1f5;
}
.learning-main {
  display: contents;
}
.dashboard-grid > .learning-main > .log-section {
  flex: 0 0 23.5%;
  min-width: 18rem;
  background: #f6f8fa;
  border: .0625rem solid #d5dee7;
  margin-bottom: 0;
}
.dashboard-grid > aside {
  display: block;
  flex: 0 0 25%;
  min-width: 18rem;
  padding: 1rem;
  border: .0625rem solid #d5dee7;
  border-radius: .5rem;
  background: #fff;
}
.dashboard-grid > aside .side-section { margin-top: 0; }
.dashboard-grid .archive-note { margin-top: 1rem; }
.dashboard-grid .log-card-foot { justify-content: flex-start; }
.dashboard-grid .log-card-foot .plain { margin-left: 0; }
.dashboard-grid .log-card-foot > span:first-child { flex-basis: 100%; }
.board-scroll-hint { font-size: .875rem; color: #626c79; margin: -.5rem 0 1rem; }
.dashboard-grid:focus-visible { outline: .125rem solid #94a6b9; outline-offset: .2rem; }
@media (max-width: 38rem) {
  .dashboard-grid { gap: 4%; }
  .dashboard-grid > .learning-main > .log-section,
  .dashboard-grid > aside { flex-basis: 88%; min-width: 16rem; }
}

/* Keep the profile close to the page header. */
.dashboard > .profile { padding: 1rem 0 1rem; }
.dashboard > .profile .profile-copy > p:last-child { margin-bottom: 0; }
.board-title { font-size: 1.125rem; margin: 0; }

/* Compact typography and controls in the new-entry form. */
:is(#new-entry-dialog, .compact-dialog) {
  width: min(28rem, calc(100% - 2rem));
  padding: 1.5rem;
}
:is(#new-entry-dialog, .compact-dialog) label {
  font-size: .875rem;
  font-weight: 400;
}
:is(#new-entry-dialog, .compact-dialog) input:not([type=hidden]),
:is(#new-entry-dialog, .compact-dialog) select {
  height: 2.375rem;
  padding: .45rem .75rem;
  margin-top: .35rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4;
}
:is(#new-entry-dialog, .compact-dialog) input::placeholder {
  font-weight: 400;
}
:is(#new-entry-dialog, .compact-dialog) input:not([type=hidden]):focus,
:is(#new-entry-dialog, .compact-dialog) select:focus {
  border-color: #8b9e8d;
  outline: .0625rem solid #8b9e8d;
  outline-offset: -.0625rem;
  box-shadow: none;
}

/* Compact learning-card actions. */
.log-card-foot .card-action {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  padding: 0;
}
.log-card-foot { column-gap: .4rem; }

/* App and technology marks alongside their names. */
.tech-label { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; max-width: 100%; }
.tech-label > span { min-width: 0; overflow-wrap: anywhere; }
.tech-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; object-fit: contain; }

/* Logo and release label in the site header. */
.site-header .brand img { width: 8rem; height: auto; display: block; }
.brand-release { display: inline-flex; align-items: center; gap: .5rem; }
.brand-release .beta { margin-left: 0; }
.app-version { font-size: .75rem; font-weight: 400; color: var(--muted); }

/* Profile identity and account editing. */
.dashboard .profile-title { align-items: baseline; gap: .6rem; }
.dashboard .profile-title h1 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dashboard .profile-title > .muted { font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.profile-editor { width: min(30rem, calc(100% - 2rem)); margin: 2rem auto 3rem; }
.profile-editor h1 { font-size: 1.25rem; margin: 1.25rem 0; }
.profile-editor label { font-size: .875rem; font-weight: 400; }
.profile-editor input:not([type=hidden]), .profile-editor textarea { padding: .45rem .75rem; font-size: .875rem; font-weight: 400; line-height: 1.4; }
.profile-editor input:not([type=hidden]) { height: 2.375rem; }
.profile-editor input:focus, .profile-editor textarea:focus { border-color: #8b9e8d; outline: .0625rem solid #8b9e8d; outline-offset: -.0625rem; box-shadow: none; }
.profile-editor .form-hint { font-size: .75rem; margin-top: -.6rem; }
.profile-error { color: #922323; font-size: .875rem; }

/* Success messages float above the page without shifting its content. */
.app-toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .7rem 1.1rem;
  border: .0625rem solid #c6dacb;
  border-radius: .5rem;
  background: #edf6ef;
  color: #283d2d;
  box-shadow: 0 .25rem 1rem #17201218;
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.app-toast[hidden] { display: none; }

.saved-entry-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.delete-form { display: inline-flex; margin: 0; flex-shrink: 0; }
.delete-form .delete-action { width: 2rem; height: 2rem; padding: 0; }

.saved-entry-footer { flex-wrap: wrap; }
.entry-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.entry-card-actions .edit-entry-action { width: 2rem; height: 2rem; padding: 0; }
#new-entry-dialog textarea { padding: .45rem .75rem; font-size: .875rem; font-weight: 400; min-height: 4.5rem; }
#new-entry-dialog textarea:focus { outline: .0625rem solid #8b9e8d; outline-offset: -.0625rem; border-color: #8b9e8d; }

.icon-heading { display: flex; align-items: center; gap: .5rem; }
.icon-heading .status-icon { width: 1.2rem; height: 1.2rem; }

.certification-card { border: .0625rem solid var(--line); border-radius: .4rem; background: #fff; padding: .85rem; font-size: .875rem; }
.certification-actions { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; margin-top: .65rem; }
.certification-actions .plain { width: 2rem; height: 2rem; padding: 0; }

/* Underlined dashboard navigation. */
.dashboard-toolbar:has(.board-tabs) { border-top: 0; padding-top: 1rem; margin-bottom: 1.5rem; background: linear-gradient(var(--line), var(--line)) left bottom / 100% .0625rem no-repeat; }
.board-tabs { display: flex; align-items: stretch; gap: .5rem; max-width: 100%; overflow-x: auto; }
.board-tabs [role=tab] { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .85rem .65rem; border: 0; border-bottom: .15rem solid transparent; background: transparent; color: #535e68; font-size: .875rem; font-weight: 400; }
.board-tabs [role=tab]:hover { background: #f0f3f5; filter: none; }
.board-tabs [aria-selected=true] { border-bottom-color: #4c6950; color: #252724; font-weight: 600; }
.dashboard-footer { width: 88%; margin: 0 auto; padding: 1rem 0; justify-content: center; font-size: .75rem; color: var(--muted); text-align: center; }
@media (max-width: 38rem) { .dashboard-footer { width: 92%; } }
.board-panel-note { font-size: .875rem; margin: .5rem 0 1.25rem; }
.board-activity-row { display: flex; align-items: center; gap: .75rem; padding: 1rem 0; border-bottom: .0625rem solid var(--line); font-size: .875rem; }
.board-activity-row p { margin: .25rem 0 0; }
.board-activity-row time { margin-left: auto; color: var(--muted); font-size: .75rem; }
.board-skill-group { border: .0625rem solid var(--line); border-radius: .4rem; padding: 1rem; margin-bottom: 1rem; background: #fff; }
.board-skill-group h3 { font-size: 1rem; margin-bottom: .75rem; }
.board-skill-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: .0625rem solid var(--line); font-size: .875rem; }
.board-skill-row > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.board-skill-row .tech-label { flex-shrink: 0; }
@media (max-width: 38rem) { .board-activity-row { flex-wrap: wrap; } .board-activity-row time { margin-left: 1.75rem; } .board-tabs { gap: 0; } }

/* Quiet, pointer-responsive waves behind the landing hero. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero > :not(.hero-waves) { position: relative; z-index: 1; }
.hero-waves { position: absolute; inset: -2rem; z-index: 0; pointer-events: none; color: #71967e; opacity: .2; transform: translate(var(--wave-x, 0rem), var(--wave-y, 0rem)); transition: transform .8s ease-out; mask-image: radial-gradient(ellipse at center, transparent 15%, #000 80%); }
.hero-waves svg { display: block; width: 100%; height: 100%; }
.hero .hero-actions { flex-direction: column; gap: .9rem; }
.hero h1 { font-size: clamp(2rem, 3.8vw, 3.75rem); max-width: 58rem; margin: 1.6rem auto 1rem; line-height: 1.15; }
.hero > p { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.hero .eyebrow { line-height: 1.6; }
#sample-log { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .hero-waves { transform: none; transition: none; } }

/* Spacious product-led homepage. */
.home-page { background: #fafbf9; }
.home-page .landing { width: 100%; overflow: clip; }
.home-page .hero { padding: clamp(4rem, 9vw, 8rem) 5% 3.5rem; }
.home-page .hero h1 { max-width: none; font-size: clamp(3.6rem, 9vw, 9rem); line-height: 1.03; letter-spacing: -.065em; margin: 1.75rem auto 1.5rem; font-weight: 600; }
.home-page .hero h1 span { color: #54785a; }
.home-page .hero > p { font-size: clamp(1.15rem, 2vw, 1.65rem); color: #535d51; }
.home-page .hero .button { padding: .8rem 1.4rem; }
.preview-stage { width: 94%; max-width: 100rem; margin: 1rem auto 0; padding: 2rem 0 4rem; perspective: 90rem; }
.home-page .preview { transform: scale(var(--preview-scale, .84)) rotateX(var(--preview-tilt, 5deg)); transform-origin: center top; box-shadow: 0 2rem 5rem #283d2d15; border-color: #d5ddd1; }
.home-stack { text-align: center; padding: 1rem 5% 6rem; color: var(--muted); }
.home-stack > p { font-size: .875rem; }
.home-stack > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 2rem; }
.home-stack span, .feature-tools span { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; }
.home-stack img, .feature-tools img { width: 1.65rem; height: 1.65rem; object-fit: contain; }
.home-page .how { width: 88%; max-width: 80rem; margin: 0 auto; padding: 4rem 0 6rem; }
.home-page .section-intro h2, .home-page .closing h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.045em; }
.home-page .steps { gap: 2rem; }
.home-page .steps article { border-top: .0625rem solid #cdd8ca; padding-top: 1.5rem; }
.home-features { width: 88%; max-width: 80rem; margin: auto; }
.home-feature { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 8%; padding: 5rem 0; }
.home-feature h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.1; letter-spacing: -.05em; margin: 1rem 0 1.5rem; }
.home-feature p { max-width: 29rem; color: var(--muted); }
.feature-reverse > :first-child { order: 2; }
.feature-board, .feature-matrix, .feature-toolkit { background: #eff3ec; border: .0625rem solid #dce4d7; border-radius: 1rem; padding: 2rem; box-shadow: 0 1rem 3rem #283d2d08; }
.feature-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; font-size: .75rem; }
.feature-board article { background: #fff; border: .0625rem solid #dce4d7; border-radius: .4rem; margin-top: 1rem; padding: 1rem .75rem; font-size: .875rem; }
.feature-board small, .feature-credential small { display: block; color: var(--muted); margin-top: .6rem; font-size: .75rem; }
.feature-matrix > div { display: grid; grid-template-columns: .8fr 1.5fr .7fr; gap: .65rem; padding: 1.2rem 0; border-top: .0625rem solid #d5ded0; font-size: .875rem; align-items: center; }
.feature-matrix small { color: #54785a; }
.feature-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.feature-tools span { padding: .65rem .8rem; border-radius: .4rem; background: #fff; font-size: .875rem; }
.feature-credential { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #fff; border-radius: .4rem; }
.feature-credential > img { width: 2rem; height: 2rem; }
.home-page .closing { width: 88%; margin: 4rem auto 6rem; padding: 4rem; background: #eaf0e5; border: 0; border-radius: 1rem; }
.home-page.motion-ready [data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity .7s ease, transform .7s ease; }
.home-page.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 55rem) { .home-feature { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; } .feature-reverse > :first-child { order: 0; } .home-page .closing { padding: 2rem; } .preview-stage { padding-bottom: 2rem; } }
@media (max-width: 38rem) { .home-page .hero h1 { font-size: clamp(3rem, 13vw, 4.8rem); } .home-page .hero .eyebrow { font-size: .7rem; } .home-stack > div { gap: 1.25rem; } .feature-board { padding: 1rem; gap: .5rem; grid-template-columns: 1fr; } .feature-matrix, .feature-toolkit { padding: 1.25rem; } .home-page .preview { transform: none; } .home-page .how { padding-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .home-page .preview { transform: none; } .home-page.motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }

.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.expanded-board { gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.expanded-board > aside { display: contents; }
.expanded-board > .board-column,
.expanded-board > aside > .side-section,
.expanded-board > .learning-main > .log-section {
  flex: 0 0 25rem; min-width: 25rem; max-width: 25rem;
  padding: 1rem; border: .0625rem solid #d5dee7; border-radius: .5rem;
  background: #f6f8fa; margin: 0; scroll-snap-align: start;
}
.expanded-board > aside > .side-section { background: #fff; }
.expanded-board .collection-card { margin-top: 1rem; }
.expanded-board .collection-empty { margin: 1rem 0 0; }
.expanded-board .tool-chip { flex-wrap: wrap; }
.tool-date { flex-basis: 100%; color: var(--muted); font-size: .75rem; }
@media (max-width: 38rem) {
  .expanded-board > .board-column, .expanded-board > aside > .side-section,
  .expanded-board > .learning-main > .log-section { flex-basis: 85vw; min-width: 85vw; max-width: 85vw; }
}

.column-options { border: .0625rem solid var(--line); border-radius: .5rem; padding: 1rem; }
.column-options label { display: flex; align-items: center; gap: .75rem; }
.profile-editor .column-options input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; padding: 0; accent-color: #283d2d; }

/* A synchronized native scrollbar stays within reach at the viewport bottom. */
.with-board-scrollbar { padding-bottom: 3rem; }
.expanded-board.has-scroll-dock { scrollbar-width: none; }
.expanded-board.has-scroll-dock::-webkit-scrollbar { display: none; }
.board-scroll-dock { position: fixed; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 30; padding: 0; background: transparent; }
.board-scroll-dock[hidden] { display: none; }
.board-scroll-track { overflow-x: scroll; overflow-y: hidden; scrollbar-color: #859b87 #e5ebe2; scrollbar-width: auto; border-radius: .5rem; }
.board-scroll-spacer { height: .0625rem; }
.board-scroll-track::-webkit-scrollbar { height: .75rem; }
.board-scroll-track::-webkit-scrollbar-track { background: #e5ebe2; border-radius: 1rem; }
.board-scroll-track::-webkit-scrollbar-thumb { background: #859b87; border: .1875rem solid #e5ebe2; border-radius: 1rem; }
.board-scroll-track::-webkit-scrollbar-thumb:hover { background: #526f56; }
.board-scroll-track:focus-visible { outline: .125rem solid #6b8d73; outline-offset: .15rem; }

/* Dashboard groups fit the page instead of scrolling horizontally. */
.grouped-dashboard .board-tabs { flex-wrap: wrap; overflow: visible; }
.grouped-dashboard .dashboard-toolbar { flex-wrap: wrap; }
.grouped-dashboard [hidden] { display: none !important; }
.tab-columns { display: grid; gap: 1.25rem; align-items: start; }
.learning-columns { grid-template-columns: repeat(4, minmax(0, calc((100% - 3.75rem) / 4))); }
.collection-columns { grid-template-columns: repeat(2, minmax(0, calc((100% - 3.75rem) / 4))); }
.tab-columns > .log-section, .tab-columns > .board-column, .tab-columns > .side-section { min-width: 0; margin: 0; padding: 1.25rem; border: .0625rem solid #d5dee7; border-radius: .5rem; background: #f6f8fa; }
.collection-columns > .side-section { background: #fff; }
.tab-columns .collection-card { margin-top: 1rem; }
.tab-columns .collection-empty { margin: 1rem 0 0; }
.tab-columns .tool-chip { flex-wrap: wrap; }
.tab-columns .section-heading { flex-wrap: wrap; gap: .75rem; }
.tab-columns .log-card, .tab-columns .tool-chip { overflow-wrap: anywhere; }
@media (max-width: 65rem) { .learning-columns, .collection-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { .learning-columns, .collection-columns { grid-template-columns: 1fr; } }

/* Reveal older cards in small batches without internal scrolling. */
.tab-columns .column-cards { width: 100%; min-width: 0; }
.tab-columns .column-cards > .log-card,
.tab-columns .column-cards > .tool-chip,
.tab-columns .column-cards > .certification-card {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.tab-columns .tool-list > .tool-chip { flex: 0 0 100%; }
.tab-columns .tool-list > .tool-chip { flex-wrap: nowrap; }
.tab-columns .tool-chip > .tool-name { min-width: 0; overflow-wrap: anywhere; }
.tab-columns .tool-chip > img { flex-shrink: 0; }
.tab-columns .tool-chip > .delete-form { margin-left: auto; flex-shrink: 0; }
.column-cards > [hidden] { display: none !important; }
.show-older { display: block; margin: 1rem auto 0; }

.coding-card { margin-top: 1rem; }
.coding-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.coding-tags, .coding-tag-options { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.coding-tags > span { background: #edf2eb; border-radius: .25rem; padding: .2rem .45rem; font-size: .75rem; }
.coding-technologies { border: 1px solid var(--line); border-radius: .4rem; padding: .75rem; margin-top: 1rem; }
.coding-tag-options > label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .35rem .5rem; font-size: .875rem; }
.coding-tag-options input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; }

.entry-toggle + .column-cards { padding-top: 0; }
.entry-toggle + .column-cards > .coding-card:first-child { margin-top: 0; }
.technology-picker { position: relative; margin-top: 1rem; }
.selected-technologies { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.selected-technologies:empty { display: none; }
.selected-technologies > span { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; background: #edf2eb; border: 1px solid var(--line); border-radius: .3rem; font-size: .875rem; }
.selected-technologies button { background: transparent; border: 0; padding: .1rem .25rem; color: inherit; font-size: 1rem; }
.technology-picker [role="listbox"] { position: absolute; z-index: 10; width: 100%; max-height: 14rem; overflow-y: auto; background: #fff; border: 1px solid #cdd8e4; border-radius: .35rem; box-shadow: 0 .25rem .75rem #00000012; }
.technology-picker [role="option"] { padding: .5rem .75rem; font-size: .875rem; cursor: pointer; }
.technology-picker [role="option"]:hover, .technology-picker [aria-selected="true"] { background: #edf2eb; }
.technology-picker [hidden] { display: none !important; }
.technology-picker > p { font-size: .8rem; margin: .4rem 0; }
.technology-feedback:empty { display: none; }

.technology-picker .selected-technologies { margin-top: .5rem; margin-bottom: .5rem; }

.profile-bio { display: flex; align-items: baseline; gap: .4em; }
.profile-bio > span:last-child { white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.profile-bio-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; background-color: currentColor; -webkit-mask: url("../img/status-icon.svg") center / contain no-repeat; mask: url("../img/status-icon.svg") center / contain no-repeat; transform: translateY(.12em); }

.skill-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.skill-score-card { min-width: 0; border: 1px solid #d5dee7; border-radius: .5rem; background: #fff; padding: 1.25rem; }
.skill-score-card h3 { margin: 0 0 1.25rem; font-size: 1rem; overflow-wrap: anywhere; }
.skill-score-card dl { margin: 0; font-size: .875rem; }
.skill-score-card dl > div { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.skill-score-card dd { margin: 0; font-weight: 600; }
.skill-score-action { margin-top: 1.5rem; }
.skill-score-action button:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.skill-score-action p { font-size: .8125rem; margin-top: .5rem; }
@media(max-width:65rem) { .skill-score-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:42rem) { .skill-score-grid { grid-template-columns: 1fr; } }
.verified-coverage { margin-top: 1.25rem; }
.verified-coverage-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; }
.verified-coverage-track { height: .45rem; border-radius: 1rem; background: #e5ebe5; overflow: hidden; margin: .65rem 0; }
.verified-coverage-track > span { display: block; height: 100%; background: #526f56; border-radius: inherit; }
.verified-coverage small { display: block; font-size: .75rem; line-height: 1.5; }
.skill-score-card .skill-score-action { margin-top: 1rem; }
.skill-score-card { display: flex; flex-direction: column; }
.skill-score-card .skill-score-action { margin-top: auto; padding-top: 1.25rem; }
.profile-dropdown { position: relative; margin-left: auto; }
.profile-dropdown summary { list-style: none; cursor: pointer; }
.profile-dropdown summary::-webkit-details-marker { display: none; }
.profile-dropdown summary > span { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 100; min-width: 11rem; padding: .35rem; border: 1px solid #d5dee7; border-radius: .4rem; background: #fff; box-shadow: 0 .3rem 1rem #00000012; }
.profile-dropdown-panel a, .profile-dropdown-panel button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .6rem .75rem; margin: 0; border: 0; border-radius: .25rem; background: transparent; color: #25374b; font: inherit; font-size: .875rem; text-align: left; text-decoration: none; cursor: pointer; }
.profile-dropdown-panel form { margin: 0; }
.profile-dropdown-panel a:hover, .profile-dropdown-panel button:hover { background: #f3f5f7; }
.releases-page li { margin-bottom: .65rem; line-height: 1.6; }
.releases-page { width: min(44rem, calc(100% - 2rem)); }
.release-section { margin-top: 2.5rem; }
.release-section + .release-section { padding-top: 2rem; border-top: 1px solid var(--line); }
.release-section-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.release-section-heading h2 { margin: 0; font-size: 1.125rem; }
.release-section ul { list-style: none; padding: 0; }
.release-section li { margin-bottom: 1.25rem; }
.release-section li strong { font-size: .9375rem; font-weight: 600; }
.release-section li p { margin: .25rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.65; }

.releases-page { width: min(72rem, calc(100% - 2rem)); }
.release-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 2.5rem; }
.release-columns > .release-section { margin-top: 0; padding-top: 0; border-top: 0; min-width: 0; }
@media (max-width: 45rem) { .release-columns { grid-template-columns: 1fr; gap: 2rem; } }

.release-columns { gap: 1.5rem; }
.release-columns > .release-section { padding: 1.5rem; border: 1px solid #dce3dd; border-radius: .5rem; background: #fff; }
.release-columns > .release-section:last-child { background: #f5f7f4; }
.release-columns .release-section ul { margin-bottom: 0; }
.release-columns .release-section li:last-child { margin-bottom: 0; }
@media (max-width: 45rem) { .release-columns > .release-section { padding: 1.25rem; } }
.entry-verification { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .6rem 0; }
.verified-entry-badge { display: inline-flex; align-items: center; gap: .3rem; color: #365d40; background: #edf4ec; border-radius: .25rem; padding: .15rem .4rem; font-size: .75rem; }
.entry-verification small { color: var(--muted); font-size: .75rem; }

.verified-badge-icon { width: 1em; height: 1em; flex-shrink: 0; object-fit: contain; }

.share-dropdown { position: relative; }

.share-popup { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 100; width: min(25rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: .5rem; background: #fff; box-shadow: 0 .5rem 1.5rem #00000020; }
.share-popup-tabs { display: flex; gap: 1rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
.share-popup-tabs button { padding: .85rem .25rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .875rem; cursor: pointer; }
.share-popup-tabs button[aria-selected="true"] { color: #25374b; border-bottom-color: #e87851; }
.share-popup-body { padding: 1rem; }
.share-popup-body label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.share-input-row { display: flex; align-items: stretch; gap: .5rem; }
.share-input-row input { min-width: 0; flex: 1; width: 100%; margin: 0; }
.share-input-row button { flex-shrink: 0; margin: 0; }
.share-popup-body p { margin: .75rem 0 0; font-size: .8125rem; }
.share-popup-body .account-error, .share-popup-body [role="status"]:not(#profile-copy-status) { margin: 0 0 .75rem; }
@media (max-width: 600px) { .share-popup { right: auto; left: 0; } }

.dropdown-chevron { width: 14px; height: 14px; flex-shrink: 0; }

.roadmap-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.roadmap-navigation { display: flex; align-items: center; gap: .5rem; }
.roadmap-navigation strong { min-width: 9rem; text-align: center; font-size: .875rem; }
.roadmap-scroll { overflow-x: auto; padding: .5rem 0 1rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; scroll-snap-type: x proximity; }
.roadmap-track { display: flex; position: relative; width: max-content; min-height: 20rem; }
.roadmap-day { flex: 0 0 16rem; width: 16rem; position: relative; scroll-snap-align: start; }
.roadmap-date { height: 3rem; display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; font-size: .875rem; font-weight: 600; }
.roadmap-today-label { padding: .15rem .4rem; border-radius: .25rem; background: #e8f2eb; color: #247044; font-size: .7rem; }
.roadmap-point { position: relative; height: 1.5rem; }
.roadmap-point::before { content: ''; position: absolute; top: .7rem; left: 0; right: 0; height: 2px; background: #d5dee7; }
.roadmap-point::after { content: ''; position: absolute; top: .4rem; left: calc(50% - .35rem); width: .7rem; height: .7rem; border: 2px solid #d5dee7; border-radius: 50%; background: #fff; box-sizing: border-box; }
.has-activity .roadmap-point::after { border-color: #247044; background: #247044; }
.is-today .roadmap-date { color: #247044; }
.roadmap-cards { padding: .75rem; display: grid; gap: .75rem; }
.roadmap-card { border: 1px solid var(--line); border-radius: .4rem; padding: .85rem; background: #f8faf9; overflow-wrap: anywhere; }
.roadmap-status { display: inline-block; font-size: .7rem; color: #247044; background: #e8f2eb; border-radius: .25rem; padding: .2rem .4rem; }
.roadmap-card h4 { margin: .6rem 0 .3rem; font-size: .9rem; white-space: pre-line; }
.roadmap-card p { margin: .35rem 0 0; font-size: .8125rem; }
.roadmap-note { white-space: pre-line; }

.activity-heading { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.activity-month-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.activity-month-controls strong { min-width: 9rem; font-size: .875rem; text-align: center; }
.activity-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.activity-widget { border: 1px solid var(--line); background: #fff; border-radius: .5rem; padding: 1.1rem; min-width: 0; }
.activity-widget h3 { margin: 0 0 .75rem; font-size: 1rem; }
.activity-insights { display: grid; gap: 1.25rem; min-width: 0; }
.activity-month-logs { height: 20rem; overflow-y: auto; scrollbar-gutter: stable; padding-right: .5rem; }
.activity-log-item { padding: .85rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.activity-log-item:last-child { border-bottom: 0; }
.activity-log-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; }
.activity-log-meta time { color: var(--muted); }
.activity-kind { font-weight: 600; }
.activity-log-item h4 { margin: .4rem 0; font-size: .875rem; white-space: pre-line; }
.activity-log-item p { margin: 0; font-size: .8125rem; }
.activity-chart-note { font-size: .8125rem; margin: 0 0 1rem; }
.activity-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; font-size: .75rem; }
.activity-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.activity-legend-item i { width: .6rem; height: .6rem; border-radius: 50%; }
.activity-chart svg { display: block; width: 100%; height: auto; }
.technology-heatmaps { grid-column: 1 / -1; }
.activity-chart-widget { aspect-ratio: 1; display: flex; flex-direction: column; }
.activity-chart-widget .activity-chart { flex: 1; min-height: 0; display: flex; align-items: center; }
.activity-chart-widget .activity-chart svg { width: 100%; }
.activity-topics-widget { max-height: 25rem; overflow-y: auto; scrollbar-gutter: stable; }
.activity-chart-table { margin-top: .5rem; font-size: .8125rem; }
.activity-chart-table summary { cursor: pointer; color: var(--muted); }
.activity-table-scroll { max-height: 16rem; overflow: auto; margin-top: .75rem; }
.activity-table-scroll table { width: 100%; border-collapse: collapse; }
.activity-table-scroll th, .activity-table-scroll td { padding: .4rem; border-bottom: 1px solid var(--line); text-align: center; }
.activity-topic-group + .activity-topic-group { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.activity-topic-group h4 { display: flex; align-items: center; gap: .5rem; font-size: .875rem; margin: 0 0 .6rem; }
.activity-topic-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.activity-topic-tags span { border: 1px solid #d5dee7; border-radius: 1rem; background: #f3f6fa; padding: .3rem .65rem; font-size: .75rem; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 850px) { .activity-layout { grid-template-columns: 1fr; } .activity-month-logs { max-height: 25rem; } }

.technology-heatmap-heading, .technology-heatmap-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.technology-heatmap-heading h3 { margin: 0; }
.technology-year-controls { display: flex; align-items: center; gap: .5rem; }
.technology-heatmap-heading + p { margin-top: .75rem; }
.technology-heatmap-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.technology-heatmap-card { aspect-ratio: 1; box-sizing: border-box; display: flex; flex-direction: column; padding: .8rem; border: 1px solid var(--line); border-radius: .5rem; background: #f8fafc; min-width: 0; }
.technology-heatmap-card h4 { margin: 0; font-size: .875rem; color: var(--technology-color); }
.technology-heatmap-card-heading span { font-size: .7rem; }
.technology-heatmap-scroll { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: .75rem; }
.technology-heatmap-grid { display: block; width: 100%; height: 100%; }

@media (max-width: 1100px) { .technology-heatmap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .technology-heatmap-cards { grid-template-columns: 1fr; } }

.navigation-chevron { width: 14px; height: 14px; flex-shrink: 0; }
.navigation-chevron-left { transform: rotate(180deg); }

.monthly-heatmap { grid-column: 1 / -1; }
.monthly-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.monthly-weekday { text-align: center; font-size: .75rem; color: var(--muted); padding: .25rem; }
.monthly-day { min-height: 6rem; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; background: #f8fafc; display: flex; flex-direction: column; gap: .5rem; }
.monthly-day.has-activity { background: #edf5ee; border-color: #a9c9b1; }
.monthly-day.is-today { outline: 2px solid #247044; outline-offset: -2px; }
.monthly-day.is-future { opacity: .5; }
.monthly-day time { font-size: .8125rem; font-weight: 600; }
.monthly-day-icons { display: flex; flex-wrap: wrap; gap: .35rem; }
.monthly-day-icons img { width: 26px; height: 26px; object-fit: contain; }
.monthly-day-count { font-size: .7rem; color: var(--muted); margin-top: auto; }
.technology-year-controls select { width: auto; margin: 0; padding: .4rem .6rem; font-size: .8125rem; }
.activity-topics-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.activity-topics-heading h3 { margin: 0; }
.activity-topics-widget select { width: auto; max-width: 100%; min-width: 9rem; margin: 0; padding: .4rem .6rem; font-size: .8125rem; }
@media (max-width: 600px) { .monthly-calendar { min-width: 560px; } .monthly-calendar-scroll { overflow-x: auto; } }

.technology-activity-tooltip { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 16px)); box-sizing: border-box; max-height: calc(100vh - 16px); overflow-y: auto; border: 1px solid #d5dee7; border-radius: .65rem; padding: 1rem; background: #fff; color: #25374b; box-shadow: 0 .5rem 2rem #14263826; font-size: .8125rem; }
.technology-activity-tooltip[hidden] { display: none; }
.technology-tooltip-heading { display: flex; flex-direction: column; gap: .25rem; }
.technology-tooltip-heading strong { font-size: .9375rem; }
.technology-tooltip-heading > span, .technology-tooltip-count, .technology-tooltip-empty { color: #64748b; font-size: .75rem; }
.technology-tooltip-count { margin: .75rem 0 .4rem; }
.technology-tooltip-list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.technology-tooltip-list li { border-top: 1px solid #e5eaf0; padding: .65rem 0; }
.technology-tooltip-list li:last-child { padding-bottom: 0; }
.technology-tooltip-kind { font-size: .6875rem; font-weight: 600; }
.technology-tooltip-list p { margin: .25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.technology-tooltip-empty { margin: .75rem 0 0; }
.technology-heatmap-grid rect:focus { outline: 2px solid #25374b; outline-offset: 1px; }

.recent-activity-widget { grid-column: 1 / -1; }
.recent-activity-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; flex-wrap: wrap; }
.recent-range-label { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.recent-range-label select { width: auto; margin: 0; padding: .4rem .6rem; }
.recent-activity-scroll { overflow-x: auto; }
.recent-activity-days { display: flex; gap: .6rem; padding: .25rem 0; }
.recent-activity-day { flex: 1 0 58px; min-width: 0; text-align: center; }
.recent-activity-square { width: 100%; aspect-ratio: 1; border: 1px solid #d5dee7; border-radius: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; cursor: pointer; font: inherit; padding: .35rem; }
.recent-activity-square strong { font-size: 1.1rem; }
.recent-activity-square span { font-size: .625rem; }
.recent-activity-day time { display: block; font-size: .7rem; color: var(--muted); margin-top: .45rem; }
.recent-today { font-size: .65rem; color: #247044; }
.recent-activity-legend { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; margin-top: .75rem; color: var(--muted); font-size: .7rem; }
.recent-activity-legend i { width: .7rem; height: .7rem; border-radius: .15rem; }
.recent-activity-square[data-level="0"], .recent-activity-legend [data-level="0"] { background: #edf0f3; color: #64748b; }
.recent-activity-square[data-level="1"], .recent-activity-legend [data-level="1"] { background: #dceede; color: #275b36; }
.recent-activity-square[data-level="2"], .recent-activity-legend [data-level="2"] { background: #b9dfbf; color: #204d2d; }
.recent-activity-square[data-level="3"], .recent-activity-legend [data-level="3"] { background: #82bd8e; color: #173b21; }
.recent-activity-square[data-level="4"], .recent-activity-legend [data-level="4"] { background: #448d58; color: #fff; }
.recent-activity-square[data-level="5"], .recent-activity-legend [data-level="5"] { background: #246137; color: #fff; }
.technology-tooltip-list .technology-tooltip-detail { font-size: .7rem; color: #64748b; }

.recent-activity-days { display: grid; grid-template-rows: repeat(7, 18px); grid-auto-columns: 18px; grid-template-columns: 36px; gap: 4px; padding: .5rem 0; }
.recent-activity-day { min-width: 0; }
.recent-weekday { font-size: .625rem; color: var(--muted); align-self: center; }
.recent-activity-square { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; }
.recent-activity-square.is-future { opacity: .4; }
.recent-activity-square.is-today { outline: 2px solid #247044; outline-offset: 1px; }

.recent-activity-days { display: flex; gap: 5px; min-width: 900px; padding: .75rem 0; }
.recent-bar-day { flex: 1; min-width: 10px; text-align: center; }
.recent-bar-plot { height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-bottom: 1px solid #d5dee7; }
.recent-category-bar { flex: 1; max-width: 8px; min-width: 2px; border: 0; padding: 0; border-radius: 1px 1px 0 0; cursor: pointer; }
.recent-category-bar:hover { filter: brightness(.85); }
.recent-bar-day time { display: block; margin-top: .4rem; font-size: .6rem; color: #64748b; }
.recent-bar-month { display: block; margin-top: .2rem; font-size: .6rem; color: #25374b; }
.recent-bar-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; }
.recent-bar-legend i { width: .6rem; height: .6rem; border-radius: 2px; }
.recent-activity-widget .activity-month-controls strong { min-width: 0; font-size: .75rem; }

.recent-bar-plot { position: relative; padding-top: 20px; box-sizing: border-box; }
.recent-certification-star { position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 0; background: transparent; color: #b87908; padding: 0; font-size: 16px; line-height: 18px; cursor: pointer; }
.recent-milestone-symbol { color: #b87908; font-size: 14px; }