@charset "UTF-8";
:root {
  --green:#174e45;
  --green-soft:#e9f1ed;
  --text:#253b35;
  --muted:#708079;
  --border:#e1e7e4;
  --canvas:#f6f8f7;
  --white:#fff;
  --sidebar:232px;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  font-synthesis:none;
  line-height:1.65;
  font-size:16px;
  background:var(--canvas)
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

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

button,input {
  font:inherit
}

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

button {
  cursor:pointer
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #5c8cbd;
  outline-offset:4px
}

h1,h2,h3,p {
  margin:0
}

svg {
  display:block;
  flex-shrink:0
}

.icon {
  width:19px;
  height:19px
}

small {
  font-size:.8125rem
}

main:focus {
  outline:none
}

.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  background:white;
  padding:10px;
  z-index:20
}

.skip-link:focus {
  top:12px
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:#fbfcfb;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:32px 20px 22px
}

.brand {
  display:flex;
  flex-direction:column;
  width:max-content;
  margin:0 16px 43px
}

.brand-word {
  font-size:38px;
  font-weight:750;
  letter-spacing:-2px;
  line-height:1.05;
  color:var(--green)
}

.brand-dot {
  color:#94b4a4
}

.brand-caption {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:650;
  margin-top:9px;
  color:#667c72
}

.workspace-label {
  font-size:.75rem;
  color:var(--muted);
  padding:0 12px;
  margin-bottom:14px
}

.nav-main {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  font-size:.875rem;
  font-weight:650;
  border-radius:7px
}

.nav-main.is-active {
  background:#e8efeb;
  color:var(--green)
}

.nav-count {
  margin-left:auto;
  font-size:.75rem;
  background:#d7e5dc;
  border-radius:4px;
  min-width:22px;
  text-align:center
}

.nav-heading {
  font-size:.75rem;
  color:#829088;
  margin:30px 12px 10px
}

.project-nav {
  display:flex;
  flex-direction:column;
  gap:4px
}

.nav-project {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:.875rem;
  padding:10px 12px;
  border-radius:6px;
  color:#65746e
}

.nav-project:hover,.nav-project.is-active {
  background:#edf1ee;
  color:var(--green)
}

.project-dot {
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--accent);
  flex-shrink:0
}

.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:20px;
  display:flex;
  align-items:center;
  gap:10px
}

.workspace-monogram {
  width:34px;
  height:34px;
  background:#e9eeeb;
  display:grid;
  place-items:center;
  border-radius:7px;
  font-family:Georgia,serif;
  color:var(--green);
  font-size:21px
}

.sidebar-bottom strong {
  display:block;
  font-size:.75rem;
  font-weight:600
}

.sidebar-bottom span {
  display:block;
  font-size:.625rem;
  color:#7c8b82
}

.page-shell {
  margin-left:var(--sidebar)
}

.topbar {
  height:72px;
  padding:0 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border-bottom:1px solid var(--border)
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:.8125rem;
  min-width:0
}

.breadcrumb>span:first-child {
  color:#8b9690
}

.breadcrumb-slash {
  color:#c8d0ca
}

.breadcrumb strong {
  font-weight:500;
  overflow-wrap:anywhere
}

.sample-label {
  display:inline-flex;
  white-space:nowrap;
  border:1px solid #dce4dd;
  color:#64796a;
  border-radius:5px;
  font-size:.75rem;
  padding:4px 9px;
  background:#fafcf9
}

main {
  max-width:1432px;
  margin:0 auto;
  padding:42px 44px 20px
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:29px
}

.page-kicker {
  font-size:.6875rem;
  letter-spacing:1.7px;
  color:#84958a;
  font-weight:600;
  margin-bottom:7px
}

h1 {
  font-size:1.8125rem;
  letter-spacing:.025em;
  font-weight:650;
  line-height:1.5
}

.page-heading p {
  font-size:.875rem;
  color:var(--muted);
  margin-top:9px
}

.reference-date {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  color:#7a8981
}

.reference-date>.icon {
  width:20px;
  height:20px
}

.reference-date span {
  display:block;
  font-size:.6875rem
}

.reference-date strong {
  font-size:.875rem;
  color:#53665b;
  letter-spacing:.025em;
  font-weight:500;
  font-variant-numeric:tabular-nums
}

.summary-strip {
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:21px 0 19px;
  margin-bottom:34px
}

.summary-item {
  padding:0 26px;
  border-left:1px solid #e9eeeb
}

.summary-item:first-child {
  border-left:0
}

.summary-item>span {
  font-size:.8125rem;
  color:#76857c
}

.summary-item>div {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:1px
}

.summary-item strong {
  font-size:1.9375rem;
  font-weight:500;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em
}

.summary-item small {
  color:#91a096;
  font-size:.75rem
}

.summary-item.green strong {
  color:#397961
}

.summary-item.amber strong {
  color:#a77627
}

.summary-item.blue strong {
  color:#6a829a
}

.summary-item.due {
  background:#fbfcfa
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px
}

.section-heading h2 {
  font-size:1rem;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:10px
}

.section-heading h2>span {
  display:inline-grid;
  place-items:center;
  font-size:.6875rem;
  width:21px;
  height:21px;
  border-radius:5px;
  border:1px solid #dce4df;
  color:#698174;
  font-weight:500
}

.section-caption {
  font-size:.75rem;
  color:#8b978f
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}

.accent-green {
  --accent:#32735e;
  --accent-bg:#eaf2ed
}

.accent-blue {
  --accent:#607eab;
  --accent-bg:#edf2f9
}

.accent-violet {
  --accent:#8873a0;
  --accent-bg:#f1eef6
}

.accent-orange {
  --accent:#b1885a;
  --accent-bg:#f7f1e9
}

.project-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px 26px 0;
  min-width:0;
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.project-card:hover {
  border-color:#a9bfb2;
  box-shadow:0 6px 20px #223f3210;
  transform:translateY(-2px)
}

.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.project-icon {
  display:inline-grid;
  place-items:center;
  background:var(--accent-bg);
  color:var(--accent);
  width:39px;
  height:39px;
  border-radius:9px
}

.project-icon .icon {
  width:21px;
  height:21px
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8125rem;
  padding:3px 9px;
  border-radius:5px;
  white-space:nowrap;
  font-weight:500
}

.badge>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.tone-green {
  color:#357152;
  background:#edf6ef
}

.tone-amber {
  color:#9b711e;
  background:#fcf5e5
}

.tone-orange {
  color:#a76437;
  background:#fcf0e7
}

.tone-gray {
  color:#6c7670;
  background:#edf0ee
}

.tone-blue {
  color:#456f9b;
  background:#edf4fb
}

.tone-teal {
  color:#26756d;
  background:#e8f6f2
}

.card-heading {
  margin-top:17px
}

.category {
  font-size:.6875rem;
  color:#8a958f;
  letter-spacing:.03em
}

.card-heading h2 {
  font-size:1.25rem;
  font-weight:650;
  line-height:1.6;
  margin-top:3px
}

.card-current {
  margin-top:18px
}

.eyebrow {
  display:block;
  font-size:.6875rem;
  color:#85928a;
  margin-bottom:4px
}

.card-current p,.card-next p {
  font-size:.875rem;
  font-weight:500;
  line-height:1.7
}

.card-next {
  display:flex;
  gap:10px;
  padding:12px 13px;
  background:#f6f8f7;
  border-radius:6px;
  margin-top:15px
}

.next-mark {
  margin-top:3px;
  color:#9ba99f
}

.next-mark .icon {
  width:16px;
  height:16px
}

.card-next .eyebrow {
  margin-bottom:2px;
  font-size:.625rem
}

.card-next p {
  font-size:.8125rem;
  color:#5f7367
}

.card-progress {
  margin-top:18px
}

.progress-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem;
  color:#819087;
  margin-bottom:7px
}

.progress-label strong {
  font-weight:600;
  color:#596f61;
  font-variant-numeric:tabular-nums
}

.progress-label small {
  font-size:.625rem;
  margin-left:2px
}

.progress-track {
  height:4px;
  border-radius:5px;
  background:#edf1ee;
  overflow:hidden
}

.progress-track>span {
  height:100%;
  display:block;
  border-radius:5px;
  background:var(--accent,var(--green))
}

.card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0
}

.owner {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.75rem;
  color:#65796b
}

.avatar {
  width:25px;
  height:25px;
  display:inline-grid;
  place-items:center;
  border:1px solid #dfe7e0;
  border-radius:50%;
  background:#eaf0eb;
  color:#60806d;
  font-size:.625rem
}

.additional-owners {
  font-size:.625rem;
  color:#93a097
}

.deadline {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.75rem;
  color:#718277
}

.deadline .icon {
  width:14px;
  height:14px
}

.week-tag {
  background:#f4f1e7;
  color:#96824b;
  border-radius:4px;
  font-size:.625rem;
  padding:1px 5px;
  margin-left:2px
}

.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #edf0ed;
  font-size:.625rem;
  color:#96a199;
  padding:12px 0
}

.card-detail-label {
  font-size:.6875rem;
  color:#6c8777
}

.sample-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:22px;
  color:#849289
}

.sample-note>.icon {
  width:15px;
  height:15px;
  margin-top:2px
}

.sample-note p {
  font-size:.6875rem
}

.page-footer {
  max-width:1432px;
  margin:0 auto;
  padding:20px 44px 25px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:.625rem;
  color:#9ba59f
}

.panel {
  padding:26px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px
}

.panel h2 {
  font-size:1rem;
  margin-bottom:16px
}

.panel p {
  font-size:1rem;
  line-height:1.9
}

.back-link {
  font-size:.875rem;
  display:inline-block;
  margin-bottom:24px;
  color:#657e6d;
  text-decoration:underline;
  text-underline-offset:5px
}

.load-error {
  max-width:800px;
  padding:60px 24px;
  margin:auto
}

@media(min-width:1700px) {
  :root {
    --sidebar:254px
  }
  main {
    padding-top:52px
  }
  .project-card {
    padding:28px 30px 0
  }
  .project-grid {
    gap:26px
  }
  .card-current {
    margin-top:22px
  }
  .card-next {
    margin-top:19px
  }
  .card-meta {
    margin:22px 0
  }
}

@media(max-width:1150px) {
  :root {
    --sidebar:200px
  }
  .sidebar {
    padding-left:12px;
    padding-right:12px
  }
  .topbar {
    padding:0 28px
  }
  main {
    padding:32px 28px 18px
  }
  .project-card {
    padding:20px 20px 0
  }
  .summary-item {
    padding:0 20px
  }
  .project-grid {
    gap:16px
  }
  .card-meta {
    flex-wrap:wrap;
    gap:8px
  }
  .page-footer {
    padding-left:28px;
    padding-right:28px
  }
}

@media(max-width:850px) {
  .sidebar {
    position:relative;
    width:auto;
    inset:auto;
    padding:18px 24px;
    border-right:0;
    border-bottom:1px solid var(--border);
    flex-direction:row;
    align-items:center;
    justify-content:space-between
  }
  .brand {
    margin:0
  }
  .brand-word {
    font-size:30px
  }
  .brand-caption {
    font-size:8px;
    letter-spacing:1.35px;
    margin-top:5px
  }
  .workspace-label,.nav-heading,.project-nav,.sidebar-bottom {
    display:none
  }
  .nav-main {
    font-size:.8125rem;
    padding:8px 12px
  }
  .page-shell {
    margin-left:0
  }
  .topbar {
    height:55px
  }
  .page-heading {
    gap:15px
  }
  .reference-date {
    display:none
  }
  h1 {
    font-size:1.625rem
  }
  .summary-item {
    padding:0 15px
  }
  .project-card {
    padding:22px 20px 0
  }
}

@media(max-width:600px) {
  .sidebar {
    padding:17px 20px
  }
  .topbar {
    padding:0 20px;
    gap:10px
  }
  .breadcrumb {
    font-size:.6875rem;
    gap:9px
  }
  .breadcrumb>span:first-child {
    display:none
  }
  .breadcrumb>span:nth-child(2) {
    display:none
  }
  .sample-label {
    font-size:.625rem;
    padding:3px 7px
  }
  main {
    padding:27px 20px 16px
  }
  .page-heading {
    margin-bottom:23px;
    align-items:flex-start;
    flex-wrap:wrap
  }
  .page-kicker {
    font-size:.625rem;
    margin-bottom:6px
  }
  h1 {
    font-size:1.5rem;
    letter-spacing:0
  }
  .page-heading p {
    font-size:.8125rem;
    margin-top:7px;
    line-height:1.85
  }
  .summary-strip {
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:0;
    margin-bottom:28px;
    overflow:hidden
  }
  .summary-item {
    padding:14px 17px 12px
  }
  .summary-item>span {
    font-size:.75rem;
    white-space:nowrap
  }
  .summary-item strong {
    font-size:1.625rem
  }
  .summary-item:nth-child(4),.summary-item:nth-child(5) {
    border-top:1px solid #e9eeeb
  }
  .summary-item:nth-child(4) {
    border-left:0
  }
  .summary-item:nth-child(5) {
    grid-column:2 / 4
  }
  .summary-item:nth-child(5)>div {
    display:inline-flex;
    margin-left:16px;
    vertical-align:middle
  }
  .summary-item:nth-child(5)>span {
    vertical-align:middle
  }
  .section-heading {
    margin-bottom:14px
  }
  .section-heading h2 {
    font-size:.9375rem
  }
  .section-caption {
    font-size:.625rem
  }
  .project-grid {
    grid-template-columns:minmax(0,1fr);
    gap:17px
  }
  .project-card {
    padding:22px 21px 0
  }
  .card-heading h2 {
    font-size:1.1875rem
  }
  .card-current p {
    font-size:.875rem
  }
  .card-meta {
    flex-wrap:nowrap
  }
  .deadline {
    font-size:.75rem
  }
  .card-bottom {
    font-size:.6875rem
  }
  .sample-note p {
    font-size:.75rem
  }
  .page-footer {
    padding:10px 20px 25px;
    flex-direction:column;
    gap:3px;
    font-size:.6875rem
  }
  .panel {
    padding:22px 20px
  }
}

/* 常用ラベルは14px、補足情報は12px以上に保つ。 */
.workspace-label,.nav-heading,.category,.eyebrow,.card-next .eyebrow,.page-kicker,.reference-date span,.section-caption,.card-bottom,.card-detail-label,.additional-owners,.week-tag,.sample-note p,.page-footer,.sidebar-bottom span {
  font-size:.75rem
}

.summary-item>span,.badge,.owner,.deadline,.progress-label,.nav-main,.nav-project {
  font-size:.875rem
}

.card-current p {
  font-size:1rem
}

.card-next p {
  font-size:.875rem
}

.card-meta {
  flex-wrap:wrap
}

.summary-item small,.progress-label small,.avatar {
  font-size:.75rem
}

.detail-heading {
  margin-bottom:30px;
  max-width:900px
}

.detail-heading-top {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:13px
}

.detail-heading-top .badge {
  margin-left:4px
}

.detail-heading h1 {
  font-size:2rem;
  margin-bottom:10px
}

.detail-heading>p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.9
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 306px;
  gap:24px;
  align-items:start
}

.detail-main {
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0
}

.detail-aside {
  grid-column:2;
  grid-row:1;
  min-width:0
}

.detail-aside .panel {
  padding:24px
}

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px
}

.panel-heading h2 {
  margin:0
}

.panel-caption {
  font-size:.75rem!important;
  color:var(--muted)
}

.current-phase {
  color:var(--accent);
  background:var(--accent-bg);
  border-radius:5px;
  padding:3px 8px;
  font-size:.75rem
}

.current-panel>h3 {
  font-size:1.125rem;
  margin-bottom:10px;
  font-weight:600
}

.current-panel>p {
  color:#64776b;
  font-size:.9375rem
}

.detail-progress {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border)
}

.progress-number strong {
  font-size:1.5rem
}

.detail-progress .progress-track {
  height:6px
}

.steps {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(var(--step-count),minmax(0,1fr));
  margin:24px 0 0;
  padding:0;
  gap:6px
}

.steps li {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-size:.8125rem;
  color:#88958d;
  position:relative;
  gap:8px;
  min-width:0
}

.step-number {
  position:relative;
  z-index:1;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #dce4de;
  background:#fff;
  font-size:.75rem
}

.steps li:not(:last-child)::after {
  content:"";
  height:1px;
  position:absolute;
  background:#dce4de;
  top:13px;
  left:calc(50% + 18px);
  width:calc(100% - 30px)
}

.steps .step-done {
  color:#577664
}

.step-done .step-number {
  background:#eaf2ec;
  border-color:#eaf2ec;
  color:#648b74
}

.step-number .icon {
  width:15px;
  height:15px
}

.steps .step-current {
  color:var(--accent);
  font-weight:600
}

.step-current .step-number {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-bg)
}

.steps small {
  font-size:.75rem;
  margin-top:-5px
}

.basic-fields {
  margin:0
}

.basic-fields>div+div {
  margin-top:18px
}

.basic-fields dt,.field-list dt {
  font-size:.8125rem;
  color:#839188;
  margin-bottom:5px
}

.basic-fields dd {
  margin:0;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums
}

.people-list {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}

.person {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.875rem
}

.purpose {
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:24px
}

.purpose h3 {
  font-size:.8125rem;
  color:#819087;
  font-weight:500;
  margin-bottom:8px
}

.purpose p {
  font-size:.875rem;
  line-height:1.9
}

.detail-note {
  display:flex;
  gap:8px;
  margin:17px 6px;
  color:#849289
}

.detail-note .icon {
  width:16px;
  height:16px;
  margin-top:2px
}

.detail-note p {
  font-size:.75rem;
  line-height:1.9
}

.count-label {
  font-size:.75rem;
  color:var(--muted);
  margin-left:8px;
  font-weight:400
}

.task-list {
  margin:0 -6px
}

.task-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 6px;
  border-top:1px solid #edf1ee;
  cursor:pointer;
  min-height:76px;
  border-radius:4px
}

.task-row:hover {
  background:#f8faf8
}

.task-row input {
  accent-color:var(--green);
  width:18px;
  height:18px;
  margin:5px 0 0;
  flex-shrink:0;
  cursor:pointer
}

.task-body {
  display:block;
  min-width:0
}

.task-title {
  display:block;
  font-size:.9375rem;
  font-weight:500
}

.task-meta {
  display:flex;
  gap:16px;
  font-size:.75rem;
  color:#829086;
  margin-top:4px
}

.task-row.is-complete .task-title {
  text-decoration:line-through;
  color:#909e94
}

.task-row.is-complete {
  opacity:.78
}

.task-help {
  font-size:.75rem!important;
  color:#849289;
  line-height:1.8!important;
  padding-top:12px;
  border-top:1px solid #edf1ee
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.data-chip {
  border:1px solid var(--border);
  padding:2px 7px;
  border-radius:4px;
  font-size:.75rem;
  color:var(--muted)
}

.metrics-panel .panel-heading {
  margin-bottom:4px
}

.metric-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:20px 0 0;
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden
}

.metric {
  padding:18px 16px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:-1px;
  min-width:0
}

.metric:nth-child(3n) {
  border-right:0
}

.metric dt {
  font-size:.8125rem;
  color:#77887d
}

.metric dd {
  margin:7px 0 0;
  font-size:1.625rem;
  font-weight:550;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  line-height:1.3;
  overflow-wrap:anywhere
}

.metric dd small {
  font-size:.75rem;
  font-weight:400;
  letter-spacing:0;
  margin-left:4px;
  color:#7b8b80
}

.currency-sign {
  font-size:1.125rem;
  margin-right:2px
}

.metric>span {
  font-size:.75rem;
  color:#8c978f;
  display:block;
  margin-top:6px
}

.goal-progress {
  margin-top:23px
}

.goal-progress .progress-track {
  height:6px
}

.goal-progress .progress-label {
  flex-wrap:wrap;
  gap:8px
}

.field-list {
  margin:0
}

.field-list>div {
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:20px;
  padding:14px 0;
  border-top:1px solid #eaf0ec
}

.field-list>div:first-child {
  padding-top:0;
  border-top:0
}

.field-list>div:last-child {
  padding-bottom:0
}

.field-list dt {
  margin:0
}

.field-list dd {
  font-size:.9375rem;
  margin:0;
  overflow-wrap:anywhere
}

.field-tag {
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:.875rem
}

@media(min-width:1700px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr) 340px;
    gap:30px
  }
  .metric {
    padding:23px
  }
}

@media(max-width:1150px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr) 270px;
    gap:18px
  }
  .detail-main {
    gap:18px
  }
  .detail-grid .panel {
    padding:22px
  }
  .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metric:nth-child(3n) {
    border-right:1px solid var(--border)
  }
  .metric:nth-child(2n) {
    border-right:0
  }
  .metric {
    padding:16px 12px
  }
  .steps {
    gap:3px
  }
  .steps li {
    font-size:.75rem
  }
  .field-list>div {
    grid-template-columns:1fr;
    gap:5px
  }
}

@media(max-width:1000px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .detail-aside {
    grid-column:1;
    grid-row:auto
  }
  .detail-main {
    grid-row:auto
  }
  .basic-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
  .basic-fields>div+div {
    margin:0
  }
  .basic-fields>div:first-child {
    grid-column:1/-1
  }
  .metric-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .metric:nth-child(2n) {
    border-right:1px solid var(--border)
  }
  .metric:nth-child(3n) {
    border-right:0
  }
  .detail-note {
    margin-bottom:4px
  }
  .field-list>div {
    grid-template-columns:130px minmax(0,1fr);
    gap:15px
  }
}

@media(max-width:600px) {
  .section-caption {
    display:none
  }
  .category,.eyebrow {
    font-size:.75rem
  }
  .badge {
    font-size:.8125rem
  }
  .card-meta {
    gap:10px
  }
  .owner,.deadline {
    font-size:.8125rem
  }
  .week-tag {
    font-size:.6875rem
  }
  .summary-item {
    padding-left:14px;
    padding-right:14px
  }
  .summary-item>span {
    font-size:.8125rem
  }
  .page-footer {
    font-size:.75rem
  }
  .detail-heading h1 {
    font-size:1.625rem
  }
  .detail-heading>p {
    font-size:.9375rem
  }
  .detail-heading-top {
    gap:9px;
    flex-wrap:wrap
  }
  .detail-heading-top .category {
    font-size:.75rem
  }
  .detail-heading-top .badge {
    margin-left:auto
  }
  .detail-heading .project-icon {
    width:34px;
    height:34px
  }
  .detail-grid .panel {
    padding:22px 19px
  }
  .detail-grid {
    gap:20px
  }
  .back-link {
    font-size:.8125rem;
    margin-bottom:22px
  }
  .basic-fields {
    gap:16px 10px
  }
  .basic-fields dd {
    font-size:.875rem
  }
  .basic-fields dt {
    font-size:.75rem
  }
  .detail-main {
    gap:18px
  }
  .steps {
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:20px
  }
  .steps li:nth-child(3n)::after {
    display:none
  }
  .steps li {
    font-size:.8125rem
  }
  .current-panel>h3 {
    font-size:1rem
  }
  .current-panel>p {
    font-size:.9375rem
  }
  .current-phase {
    font-size:.6875rem
  }
  .panel-heading {
    flex-wrap:wrap;
    gap:7px
  }
  .task-title {
    font-size:.9375rem
  }
  .task-meta {
    gap:12px;
    flex-wrap:wrap
  }
  .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metric:nth-child(3n) {
    border-right:1px solid var(--border)
  }
  .metric:nth-child(2n) {
    border-right:0
  }
  .metric dd {
    font-size:1.5rem
  }
  .metric {
    padding:17px 12px
  }
  .field-list>div {
    grid-template-columns:1fr;
    gap:7px
  }
  .field-list dt {
    font-size:.75rem
  }
  .field-list dd {
    font-size:.9375rem
  }
  .goal-progress .progress-label {
    font-size:.8125rem
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important
  }
}