/* T03/T07 — scoped detail layout. Loaded by the application shell. */
.ct-detail { display: flex; flex-direction: column; min-height: 0; }
dialog[open]:has(> .ct-detail) { display: flex; flex-direction: column; overflow: hidden; }
dialog:has(> .ct-detail) > .dlg-h, dialog:has(> .ct-detail) > .dlg-f { flex-shrink: 0; }
dialog[open]:has(> .ct-detail) > .ct-detail, dialog.win:has(> .ct-detail) > .ct-detail { flex: 1 1 auto; min-height: 0; }
.ct-detail-body { flex: 1 1 auto; min-height: 0; padding: 16px 20px; overflow: auto; overscroll-behavior: contain; }
.ct-context { display: flex; justify-content: space-between; gap: 14px; padding: 14px 20px 10px; }
.ct-context h2 { margin: 3px 0 0; font-size: 18px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ct-context-id { color: var(--ink-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ct-detail .ct-tinhtrang { position: relative; flex-shrink: 0; margin: 0; padding: 4px 20px 12px; }
.ct-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0; padding-inline: 8px; flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
.ct-tabs > button { appearance: none; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 14px 8px; white-space: nowrap; }
.ct-tabs > button:hover { color: var(--primary); background: var(--primary-soft); }
.ct-tabs > button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.ct-tabs > button:focus-visible, .tl-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ct-panels { min-width: 0; }
.ct-panel { min-width: 0; }
.ct-section-title { margin: 0 0 10px; color: var(--ink); font-size: 15px; font-weight: 800; }
.ct-panel .kv { margin-top: 0; }
.ct-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .56fr); gap: 16px; align-items: start; }
.ct-info-main { grid-column: 1; grid-row: 1; min-width: 0; }
.ct-info-side { grid-column: 2; grid-row: 1; min-width: 0; }
.ct-info-side > section { border: 1px solid var(--line); border-radius: 9px; background: var(--primary-soft); padding: 12px 14px; }
.ct-info-side h3 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
.ct-info-side .pcg-rich { color: var(--ink-2); overflow-wrap: anywhere; }
.ct-panel .kv .ct-kv-group > th { padding: 11px 10px 6px; color: var(--primary); background: var(--primary-soft); font-size: 12px; letter-spacing: .02em; text-align: left; }
.ct-doc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ct-doc-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 16px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ct-doc-row:last-child { border-bottom: 0; }
.ct-doc-row > a { color: var(--primary); font-weight: 700; overflow-wrap: anywhere; }
.ct-doc-row > span { color: var(--ink-3); font-size: var(--fs-sm); }
.ct-doc-empty { display: flex; min-height: 156px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-3); text-align: center; padding: 20px; }
.ct-doc-empty > div { color: var(--primary); font-size: 24px; }
.ct-doc-empty > b { color: var(--ink-2); }
.ct-doc-empty > span { max-width: 410px; font-size: var(--fs-sm); line-height: 1.5; }
.ct-panel .tl-chips { margin-top: 0; }
@media (max-width: 760px) {
  .ct-detail-body { padding: 14px 16px; }
  .ct-context h2 { font-size: 16px; }
  .ct-tabs > button { padding-inline: 12px; }
  .ct-doc-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ct-info-grid { grid-template-columns: 1fr; }
  .ct-info-main, .ct-info-side { grid-column: 1; }
  .ct-info-main { grid-row: 1; }
  .ct-info-side { grid-row: 2; }
}

.ct-context { flex-shrink: 0; }
.ct-detail .pcg-menu { max-width: min(300px, calc(100vw - 48px)); white-space: normal; }
.ct-detail .pcg-menu button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width:760px) { .ct-context { padding: 10px 16px 8px; } .ct-detail .ct-tinhtrang { padding-inline:16px; } .ct-context-id { display:none; } }

.ct-description { margin-bottom:16px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; }
.ct-description h3 { font-size:14px; margin-bottom:8px; }
.ct-description .pcg-rich { overflow-wrap:anywhere; }
.ct-meta { margin:0; } .ct-meta dt { font-size:12px; color:var(--ink-3); margin-top:12px; } .ct-meta dd { margin:3px 0 0; overflow-wrap:anywhere; }
@media (max-width:760px) { .ct-info-side { grid-row:1; } .ct-info-main { grid-row:2; } }


/* PA-261030-001 — bước của người xem, dùng token của giao diện hiện tại. */
.ct-my-work { margin-bottom:20px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.ct-my-work-head { display:flex; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--primary-soft); }
.ct-my-work-head h3 { margin:0; font-size:14px; }
.ct-my-work-head > span, .ct-my-step-name > span, .ct-my-step-note { font-size:13px; color:var(--ink-2); }
.ct-my-step { display:grid; grid-template-columns:minmax(0,1fr) 110px minmax(100px,auto); gap:16px; align-items:center; padding:14px; border-top:1px solid var(--line); }
.ct-my-step-name { min-width:0; }
.ct-my-step-name b { display:block; overflow-wrap:anywhere; }
.ct-my-step-name > span { display:block; margin-top:4px; }
.ct-my-step-pct b { color:var(--ct-step-ink); font-size:17px; }
.ct-my-step-bar { height:5px; margin-top:5px; background:var(--ct-step-bg); border-radius:6px; overflow:hidden; }
.ct-my-step-bar i { display:block; height:100%; background:var(--ct-step-ink); }
.ct-my-step > button, .ct-my-step-primary { min-height:44px; min-width:44px; white-space:normal; }
.ct-my-empty { padding:14px; margin:0; color:var(--ink-2); }
.ct-my-step-focus { outline:2px solid var(--primary); outline-offset:-2px; background:var(--primary-soft); }
@media (max-width:760px) {
  .ct-my-step { grid-template-columns:minmax(0,1fr) 65px; gap:12px; }
  .ct-my-step > button, .ct-my-step-note { grid-column:1 / -1; }
  .ct-my-step-pct { text-align:right; }
  .ct-detail .ct-tt-right:has(.ct-my-step-primary) { width:100%; }
  .ct-my-step-primary { flex:1; }
}

.ct-my-mobile { margin-top:16px; }
.ct-my-mobile > .ct-my-step-primary { width:100%; margin-bottom:12px; }
.ct-my-mobile .ct-my-work { background:#fff; color:var(--ink); }

.ct-my-step { --ct-step-ink:var(--st-track-ink); --ct-step-bg:var(--st-track-bg); }
.ct-my-step[data-ct-step-state="late"] { --ct-step-ink:var(--st-late-ink); --ct-step-bg:var(--st-late-bg); }
.ct-my-step[data-ct-step-state="soon"] { --ct-step-ink:var(--st-soon-ink); --ct-step-bg:var(--st-soon-bg); }
.ct-my-step[data-ct-step-state="done"] { --ct-step-ink:var(--st-done-ink); --ct-step-bg:var(--st-done-bg); }
.ct-my-step[data-ct-step-state="wait"] { --ct-step-ink:var(--st-wait-ink); --ct-step-bg:var(--st-wait-bg); }
.ct-my-step[data-ct-step-state="pause"] { --ct-step-ink:var(--st-pause-ink); --ct-step-bg:var(--st-pause-bg); }
.ct-my-step-name > .ct-my-step-due { color:var(--st-track-ink); }
.ct-my-step-due[data-ct-step-due="late"] { color:var(--st-late-ink); }
.ct-my-step-due[data-ct-step-due="soon"] { color:var(--st-soon-ink); }
.ct-my-step-due[data-ct-step-due="done"] { color:var(--st-done-ink); }

.ct-my-instruction { grid-column:1 / -1; min-width:0; border-top:1px solid var(--line); padding-top:12px; }
.ct-my-instruction h4 { font-size:13px; margin:0 0 7px; color:var(--ink-2); }
.ct-my-hd-text { font-size:16px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; max-height:3.6em; overflow:hidden; }
.ct-my-instruction.is-expanded .ct-my-hd-text { max-height:none; overflow:visible; }
.ct-my-hd-tools { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.ct-my-hd-tools > button { min-width:44px; min-height:44px; border:0; color:var(--primary); font-size:13px; white-space:nowrap; }
.ct-my-instruction.is-expanded .ct-my-hd-tools > .hint { visibility:hidden; }