/* Linux。style.css と flow.css の上に重ねる（Docker の見た目は docker.css へ分けた） */
.subh { margin: 20px 0 10px; font-size: 15px; }
.whygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wy { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; }
.wy b { font-family: var(--latin); font-size: 24px; font-weight: 600; color: var(--ink); }
.wy span { font-size: 12.5px; color: var(--ink2); }

/* 作り物のターミナル */
.tlayout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.term { background: #0f172a; border-radius: 14px; padding: 12px 14px; color: #e2e8f0; font-family: var(--latin); font-size: 13px; min-width: 0; }
.tout { height: 300px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.tl { margin: 0 0 2px; }
.tl.sys { color: #94a3b8; }
.tl.err { color: #fca5a5; }
.tl.cmd { color: #f8fafc; }
.tps { color: #86efac; }
.tin { display: flex; align-items: center; gap: 8px; border-top: 1px solid #1e293b; margin-top: 8px; padding-top: 8px; }
.tin input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f8fafc; font: inherit; font-size: 16px; outline: none; caret-color: #86efac; }
.tin input:focus-visible { box-shadow: 0 2px 0 #86efac; }
.tin button { appearance: none; font: inherit; font-family: var(--sans); font-size: 12.5px; font-weight: 700; border: 0; border-radius: 8px; background: #86efac; color: #0f172a; padding: 5px 12px; cursor: pointer; }
.tside { display: grid; gap: 10px; min-width: 0; }
.tnote { padding: 12px 14px; }
.tnote code { font-family: var(--latin); font-size: 12.5px; font-weight: 600; background: var(--line2); border-radius: 6px; padding: 2px 7px; }
.tnote p { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }
.tnote.warn { background: #fef2f2; border-color: #fecaca; }
.tnote.warn p { color: #7f1d1d; }
.ttry b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#tTry { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { appearance: none; font-family: var(--latin); font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
.tchip:hover { border-color: #94a3b8; }
.tchip.danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.treset { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; margin-top: 10px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; cursor: pointer; }

/* コマンド・権限・パイプ */
.cmdgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cmdcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.cmdcard h3 { margin: 0 0 8px; font-size: 14px; }
.cmdcard dl { margin: 0; display: grid; gap: 6px; }
.cmdfoot { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.cmdcard.wide { grid-column: span 2; }
.cmdcard.wide dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.cmdpair { display: grid; gap: 4px; align-content: start; }
.cmdpair dd { margin: 0; }
/* 作り物の vi */
.vi { display: flex; flex-direction: column; gap: 6px; }
.vi[hidden], .vicmd[hidden], .tout[hidden], .tin[hidden] { display: none; }
.vi textarea { height: 236px; resize: none; background: #0b1222; color: #e2e8f0; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.55; caret-color: #86efac; outline: none; }
.vi[data-mode="insert"] textarea { border-color: #86efac; }
.vistat { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-height: 1.6em; font-size: 12.5px; }
#viMode { color: #fde68a; font-weight: 700; margin-right: 8px; }
#viMsg.err { color: #fca5a5; }
.vihint { color: #94a3b8; font-family: var(--sans); font-size: 12px; }
.vicmd { display: flex; align-items: center; gap: 2px; }
.vicmd input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f8fafc; font: inherit; font-size: 16px; outline: none; caret-color: #86efac; }
.vikeys { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid #1e293b; padding-top: 8px; }
.vikeys button { appearance: none; display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid #334155; background: #1e293b; color: #f8fafc; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vikeys button small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: #94a3b8; }
.vikeys button:hover { border-color: #86efac; }
.vikeys button { -webkit-tap-highlight-color: transparent; }
.vikeys button:active { background: #334155; }
.vikeys button:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
@media (pointer: coarse) { .vi textarea { font-size: 16px; } }
.cmdcard dt code { font-family: var(--latin); font-size: 12px; font-weight: 600; background: var(--line2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.cmdcard dd { margin: 2px 0 0; font-size: 12px; color: var(--ink2); }
.playout2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pcalc { padding: 14px 16px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable th, .ptable td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line2); }
.ptable tbody th { text-align: left; }
.ptable thead th { font-size: 12px; color: var(--muted); }
.ptable input { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }
.pres { margin-top: 12px; display: grid; gap: 6px; background: var(--line2); border-radius: 12px; padding: 12px 14px; }
.pres.warn { background: #fef2f2; }
.pnum { font-family: var(--latin); font-size: 32px; font-weight: 600; line-height: 1; }
.pres code { font-family: var(--latin); font-size: 13px; font-weight: 600; }
.pres p { margin: 0; font-size: 13px; color: var(--ink2); }
.pres.warn p { color: #7f1d1d; }
.presets { display: grid; gap: 6px; }
.pp { appearance: none; font: inherit; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 9px 12px; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.pp b { font-family: var(--latin); font-size: 18px; }
.pp span { font-size: 12.5px; color: var(--ink2); }
.pp[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pp.warn b { color: #b91c1c; }
.pipegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.psym2 { font-family: var(--latin); font-size: 22px; font-weight: 600; color: #2563eb; }
.pcard h3 { margin: 0; font-size: 14px; }
.pcard p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.pcard code { font-family: var(--latin); font-size: 12px; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 6px 9px; overflow-wrap: anywhere; }
.pcard small { font-size: 11.5px; color: var(--muted); }
.moregrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.mcard h3 { margin: 0; font-size: 15px; }
.mcard p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.mcard code { font-family: var(--latin); font-size: 12px; background: var(--line2); border-radius: 6px; padding: 1px 6px; }
.mcard a { font-size: 12px; color: #1d4ed8; margin-top: auto; }


/* Linux の種類 */
.ds-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; align-items: start; }
.ds-map { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.ds-col { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; min-width: 0; }
.ds-fh { margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ds-fh b { font-size: 13.5px; }
.ds-fh code { font: 600 11.5px var(--latin); color: var(--ink2); background: var(--line2); border-radius: 6px; padding: 1px 7px; }
.f-rh .ds-fh b { color: #b91c1c; }
.f-deb .ds-fh b { color: #9a3412; }
.f-other .ds-fh b { color: #1d4ed8; }
.ds-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 6px; }
.ds-chip { appearance: none; width: 100%; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; color: var(--ink); cursor: pointer; }
.ds-chip b { font-size: 13.5px; }
.ds-chip small { font-size: 11px; color: var(--muted); }
.ds-chip:hover { border-color: #94a3b8; }
.ds-chip.end b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ds-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ds-chip[aria-pressed="true"] small, .ds-chip.end[aria-pressed="true"] b { color: #cbd5e1; }
.ds-detail { padding: 14px 16px; position: sticky; top: 12px; }
.ds-dfam { margin: 0; font-size: 11.5px; font-weight: 700; }
.ds-dfam.f-rh { color: #b91c1c; }
.ds-dfam.f-deb { color: #9a3412; }
.ds-dfam.f-other { color: #1d4ed8; }
.ds-detail h3 { margin: 2px 0 6px; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-end { font-size: 11px; font-weight: 700; color: #475569; background: #e2e8f0; border-radius: 999px; padding: 1px 8px; }
.ds-detail > p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.ds-sup { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.ds-sup th { text-align: left; font-size: 11.5px; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ds-sup td { padding: 5px 6px; border-bottom: 1px solid var(--line2); font-family: var(--latin); }
.ds-detail .ds-note { margin-top: 8px; font-size: 12.5px; background: #f8fafc; border-radius: 8px; padding: 6px 9px; }
.ds-go { margin: 8px 0 0 !important; font-size: 13px !important; font-weight: 700; }
.ds-go a, .ds-detail .srcl a, #distro .srcl a { color: #1d4ed8; text-underline-offset: 2px; }
#distro .srcl { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ds-lead { margin: -4px 0 8px; font-size: 13px; color: var(--ink2); }
.ds-fam { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--line2); margin-bottom: 8px; flex-wrap: wrap; }
.ds-fam button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.ds-fam button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.ds-table { padding: 6px 14px; }
.ds-row { display: grid; grid-template-columns: minmax(10em, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.ds-row:last-child { border-bottom: 0; }
.ds-task { margin: 0; font-size: 13px; font-weight: 700; }
.ds-me, .ds-other { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ds-me code { font: 600 13px var(--latin); color: #e2e8f0; background: #0f172a; border-radius: 7px; padding: 3px 9px; overflow-wrap: anywhere; }
.ds-other span { font-size: 11px; font-weight: 700; color: var(--muted); }
.ds-other code { font: 500 12px var(--latin); color: var(--ink2); background: var(--line2); border-radius: 6px; padding: 1px 7px; overflow-wrap: anywhere; }
.ds-rnote { grid-column: 2 / -1; margin: 0; font-size: 12px; color: var(--muted); }
.ds-cnote { font-size: 12px; color: var(--muted); }
.ds-leg { margin: -4px 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--ink2); }
.ds-leg i { width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; background: #94a3b8; }
.ds-leg i:first-child { margin-left: 0; }
.ds-leg i.rh { background: #dc2626; }
.ds-leg i.deb { background: #ea580c; }
.ds-leg i.end { background: #475569; }
.ds-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-time { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 7px; }
.ds-time li { position: relative; display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 8px; font-size: 13px; }
.ds-time li::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; border: 2px solid var(--bg); }
.ds-time li.rh::before { background: #dc2626; }
.ds-time li.deb::before { background: #ea580c; }
.ds-time li.end::before { background: #475569; }
.ds-time li.end .ds-what { color: var(--muted); }
.ds-date { font: 600 12.5px var(--latin); color: var(--ink2); }
.ds-what { color: var(--ink); }
.ds-share { padding: 12px 14px; }
.ds-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ds-bars li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3.4em; align-items: center; gap: 8px; }
.ds-bn { font-size: 12.5px; font-weight: 700; }
.ds-bar { height: 10px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.ds-bar i { display: block; height: 100%; border-radius: 999px; background: #64748b; }
.ds-bv { font: 600 12px var(--latin); text-align: right; color: var(--ink2); }
.ds-unk { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); }
.ds-ai { margin-top: 14px; background: #faf8ff; border: 1px solid #dccdfb; border-radius: 14px; padding: 12px 14px; }
.ds-ait { margin: 0 0 4px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.ds-ai p:last-child { margin: 0; font-size: 13px; color: var(--ink2); }
.ds-aitag { font-size: 12px; font-weight: 700; color: #6d28d9; background: #ede9fe; border-radius: 6px; padding: 2px 8px; }
.ds-hint { font-size: 10.5px; font-weight: 700; color: #475569; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 999px; padding: 0 8px; }
.ds-chip:focus-visible, .ds-fam button:focus-visible, .ds-go a:focus-visible, #distro .srcl a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (max-width: 1100px) {
  .ds-layout { grid-template-columns: minmax(0, 1fr); }
  .ds-detail { position: static; }
}
@media (max-width: 760px) {
  .ds-map, .ds-two { grid-template-columns: minmax(0, 1fr); }
  .ds-row { grid-template-columns: minmax(0, 1fr); }
  .ds-rnote { grid-column: auto; }
  .ds-fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 12px; }
  .ds-fam button { border-radius: 9px; line-height: 1.35; }
}

/* AI・チェックリスト */
.aigrid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aicard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; }
.aicard h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.aitag { font-style: normal; font-family: var(--latin); font-size: 10.5px; font-weight: 600; background: #ede9fe; color: #5b21b6; border-radius: 5px; padding: 1px 5px; }
.aicard p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.aicard a { font-size: 12px; color: #1d4ed8; }
.aicard .as { margin-top: auto; font-size: 11.5px; color: var(--muted); }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mlist label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.mlist label:hover { background: var(--line2); }
.mlist input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--k-test); flex: none; }
.mlist input:checked + span { color: var(--muted); text-decoration: line-through; }
.ckfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mcount { font-size: 12.5px; font-weight: 700; color: var(--k-test); }
.ckreset { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
#mistakes .src { margin-top: 14px; }
.tchip:focus-visible, .treset:focus-visible, .tin button:focus-visible, .ptable input:focus-visible, .pp:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cmdgrid, .pipegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlayout, .playout2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .moregrid, .aigrid3, .whygrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vi textarea { height: 200px; }
  .cmdgrid, .pipegrid { grid-template-columns: 1fr; }
  .cmdcard.wide { grid-column: auto; }
  .cmdcard.wide dl { grid-template-columns: minmax(0, 1fr); }
  .tout { height: 240px; }
}