/* premiumgroup.crowdy.dev — 稼働記録・資料索引
   PlanitAI design tokens only. No hard-coded colours, sizes or timings. */

.wrap { max-width: var(--content-max-width-compact); margin: 0 auto; padding: 0 var(--content-padding); }

/* ── masthead ───────────────────────────────────────────── */
.masthead { background: var(--gradient-navy); color: var(--text-on-dark); padding: var(--space-16) 0 var(--space-14); position: relative; }
.masthead::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--rule-height); background: var(--gradient-brand); }
.masthead .overline { font-size: var(--text-overline); line-height: var(--leading-overline); letter-spacing: var(--tracking-brand-label); text-transform: uppercase; color: var(--brand-cyan); font-weight: var(--weight-semibold); }
.masthead h1 { font-size: var(--text-display-m); line-height: var(--leading-display-m); letter-spacing: var(--tracking-display); color: var(--text-inverse); margin-top: var(--space-4); }
.masthead .sub { color: var(--text-on-dark-muted); font-size: var(--text-body-m); margin-top: var(--space-3); }

.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap-responsive); margin-top: var(--space-10); }
.meta dt { font-size: var(--text-overline); line-height: var(--leading-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-on-dark-muted); }
.meta dd { margin: var(--space-1) 0 0; font-size: var(--text-body-m); color: var(--text-inverse); font-weight: var(--weight-medium); }

/* ── sections ───────────────────────────────────────────── */
main { padding: var(--section-gap-tight) 0 var(--section-gap); }
section + section { margin-top: var(--section-gap-tight); }
section > h2 { font-size: var(--text-heading-l); line-height: var(--leading-heading-l); padding-bottom: var(--space-3); border-bottom: var(--border-width-thick) solid var(--border-subtle); }
section > h2 .count { font-size: var(--text-body-s); font-weight: var(--weight-regular); color: var(--text-muted); margin-left: var(--space-3); }

/* ── hours gauge ────────────────────────────────────────── */
.gauge { margin-top: var(--block-gap); padding: var(--space-6); background: var(--surface-alt); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); }
.gauge-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.gauge-num { font-family: var(--font-mono); font-size: var(--text-heading-xl); line-height: var(--leading-heading-xl); color: var(--text-primary); font-weight: var(--weight-medium); }
.gauge-num small { font-size: var(--text-body-m); color: var(--text-muted); font-weight: var(--weight-regular); }
.gauge-note { font-size: var(--text-body-s); line-height: var(--leading-body-s); color: var(--text-muted); }
.bar { height: var(--space-2); margin-top: var(--space-5); background: var(--neutral-200); border-radius: var(--radius-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gradient-brand); border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-emphasized); }

/* ── reference cards ───────────────────────────────────── */
.refs { list-style: none; padding: 0; margin: var(--block-gap) 0 0; display: grid; gap: var(--gap-responsive); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.refs li { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); transition: var(--transition-color), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-emphasized); }
.refs li:hover { border-color: var(--border-default); box-shadow: var(--shadow-brand-1); transform: var(--hover-lift); }
.refs a { font-size: var(--text-body-m); font-weight: var(--weight-semibold); }
.refs .desc { font-size: var(--text-body-s); line-height: var(--leading-body-s); color: var(--text-body); margin-top: var(--space-2); }
.refs .foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-muted); }

/* ── badges ─────────────────────────────────────────────── */
.badge { display: inline-block; font-size: var(--text-overline); line-height: var(--leading-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; font-weight: var(--weight-semibold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--neutral-100); color: var(--text-ink); white-space: nowrap; }
.badge.kind-meeting  { background: var(--tint-sky); color: var(--brand-navy); }
.badge.kind-research { background: var(--tint-mint); color: var(--brand-navy); }
.badge.kind-output   { background: var(--tint-lavender); color: var(--brand-blue-active); }
.badge.pre { background: var(--surface-inverse); color: var(--text-inverse); }
.badge.lv-high   { background: var(--status-danger); color: var(--text-inverse); }
.badge.lv-medium { background: var(--brand-blue-soft); color: var(--text-inverse); }
.badge.lv-low    { background: var(--neutral-200); color: var(--text-ink); }

/* ── day log ────────────────────────────────────────────── */
.day { margin-top: var(--block-gap); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.day-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); background: var(--surface-alt); border-bottom: var(--border-width) solid var(--border-subtle); }
.day-date { font-family: var(--font-mono); font-size: var(--text-heading-m); line-height: var(--leading-heading-m); color: var(--text-primary); font-weight: var(--weight-medium); }
.day-dow { font-size: var(--text-body-s); color: var(--text-muted); }
.day-hours { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-body-m); color: var(--text-primary); font-weight: var(--weight-medium); }

.items { list-style: none; margin: 0; padding: 0; }
.items > li { padding: var(--space-5) var(--space-6); border-bottom: var(--border-width) solid var(--border-subtle); }
.items > li:last-child { border-bottom: 0; }
.item-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.item-title { font-size: var(--text-heading-s); line-height: var(--leading-heading-s); font-weight: var(--weight-semibold); color: var(--text-primary); }
.item-hours { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-body-s); color: var(--text-body); white-space: nowrap; }
.item-hours.unset { color: var(--text-muted); font-style: italic; }
.item-detail { font-size: var(--text-body-s); line-height: var(--leading-body-s); color: var(--text-body); margin-top: var(--space-2); }
.item-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; margin: var(--space-3) 0 0; font-size: var(--text-body-s); }
.item-links a::before { content: "▸ "; color: var(--text-muted); }

/* ── findings ───────────────────────────────────────────── */
.finds { list-style: none; padding: 0; margin: var(--block-gap) 0 0; display: grid; gap: var(--space-4); }
.finds li { border: var(--border-width) solid var(--border-subtle); border-left: var(--rule-height) solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface-card); }
.finds li[data-lv="high"]   { border-left-color: var(--status-danger); }
.finds li[data-lv="medium"] { border-left-color: var(--brand-blue-soft); }
.finds .f-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.finds h3 { font-size: var(--text-heading-s); line-height: var(--leading-heading-s); font-weight: var(--weight-semibold); }
.finds p { font-size: var(--text-body-s); line-height: var(--leading-body-s); color: var(--text-body); margin-top: var(--space-2); }

/* ── open questions ────────────────────────────────────── */
.oq { list-style: none; padding: 0; margin: var(--block-gap) 0 0; counter-reset: oq; }
.oq li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-12); border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-body-m); line-height: var(--leading-body-m); color: var(--text-ink); }
.oq li::before { counter-increment: oq; content: counter(oq, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-body-s); color: var(--brand-blue); font-weight: var(--weight-medium); }

/* ── notes / footer ────────────────────────────────────── */
.note { margin-top: var(--block-gap); padding: var(--space-5); background: var(--tint-lavender); border-radius: var(--radius-md); font-size: var(--text-body-s); line-height: var(--leading-body-s); color: var(--brand-navy); }
footer { border-top: var(--border-width) solid var(--border-subtle); padding: var(--space-8) 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-muted); }
footer .row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; }

@media (max-width: 767px) {
  .day-hours, .item-hours { margin-left: 0; }
}