/* Readable-table reference: isolated source grammar, original six records/icons. */
.connection-reference { container:connections / inline-size; min-width:0; color:var(--ink); }
.connection-reference *, .connection-reference *::before, .connection-reference *::after { box-sizing:border-box; }
.connection-reference [hidden] { display:none!important; }
.connection-reference button, .connection-reference input, .connection-reference select { font:inherit; }
.connection-reference button, .connection-reference input[type=checkbox], .connection-reference select { cursor:pointer; }
.connection-reference .connection-frame { padding:26px 28px 21px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 1px 2px #13273703,0 12px 35px #13273704; }
.connection-reference .connection-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 0 24px; }
.connection-reference .connection-eyeline { font-size:11.5px; color:var(--muted); letter-spacing:.07em; margin:0 0 8px; line-height:1.7; }
.connection-reference .connection-heading h3 { font-size:23px; font-weight:500; letter-spacing:.015em; line-height:1.5; margin:0; }
.connection-reference .connection-period { color:var(--muted); font-size:12px; white-space:nowrap; padding-bottom:4px; }
.connection-reference .connection-toolbar { display:flex; align-items:center; gap:20px; border-block:1px solid var(--line); padding:8px 0; }
.connection-reference .connection-search { display:flex; flex:1; align-items:center; gap:12px; min-width:120px; color:var(--muted); border-radius:6px; }
.connection-reference .connection-search svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; }
.connection-reference .connection-search input { width:100%; min-width:0; border:0; border-radius:4px; padding:10px 0; background:transparent; color:var(--ink); font-size:13px; line-height:1.6; }
.connection-reference .connection-search input::placeholder { color:var(--muted); opacity:1; }
.connection-reference .connection-sort { display:flex; flex:none; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.connection-reference .connection-sort select { max-width:190px; border:0; border-radius:8px; background:var(--soft); color:var(--ink); font-size:12px; padding:10px 26px 10px 12px; min-height:38px; }
.connection-reference .connection-result { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:6px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.connection-reference .connection-selection { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 14px; }
.connection-reference [data-selection] { color:var(--blue); }
.connection-reference .connection-plain { padding:6px 0; background:transparent; color:var(--muted); font-size:12px; line-height:1.7; border:0; border-radius:3px; }
.connection-reference .connection-plain:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.connection-reference .connection-results { padding:0 9px; }
.connection-reference .connection-table { width:100%; border-collapse:separate; border-spacing:0; text-align:left; font-size:13px; line-height:1.65; }
.connection-reference .connection-table :is(th,td) { padding:15px 14px; border:0; border-bottom:1px solid var(--line); font-weight:400; vertical-align:middle; }
.connection-reference .connection-table thead th { padding-block:11px; color:var(--muted); background:var(--soft); font-size:12px; white-space:nowrap; }
.connection-reference .connection-table thead th:first-child { border-radius:8px 0 0 8px; }
.connection-reference .connection-table thead th:last-child { border-radius:0 8px 8px 0; }
.connection-reference .connection-table tbody tr { position:relative; transition:background-color .15s ease; }
.connection-reference .connection-table tbody tr:last-child>* { border-bottom:0; }
.connection-reference .connection-table tbody tr:hover { background:var(--soft); }
.connection-reference .connection-table tr.is-selected::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:7px; padding:1px; background:var(--co-selection-edge,linear-gradient(100deg,#418ed4,#83d5e7)); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; }
.connection-reference .connection-table .connection-check { width:38px; padding-left:12px; padding-right:8px; }
.connection-reference .connection-check label { display:flex; align-items:center; gap:10px; }
.connection-reference .connection-table .connection-subject { width:48%; }
.connection-reference .connection-subject-wrap { display:flex; align-items:center; gap:12px; }
.connection-reference .connection-tile { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--line); border-radius:9px; background:var(--paper); box-shadow:0 1px 3px #101c2209; }
.connection-reference .connection-tile img { display:block; width:20px; height:20px; object-fit:contain; }
.connection-reference .connection-name { padding:0; border:0; border-radius:3px; background:transparent; text-align:left; color:var(--ink); font-size:14px; font-weight:550; line-height:1.6; }
.connection-reference .connection-name:hover { text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--blue); }
.connection-reference .connection-subject p { font-size:12.5px; font-weight:400; line-height:1.65; color:var(--muted); margin:3px 0 0; overflow-wrap:anywhere; }
.connection-reference .connection-stamp { display:inline-block; padding:4px 8px; border-radius:6px; background:var(--soft); color:var(--muted); font-size:11px; white-space:nowrap; line-height:1.6; }
.connection-reference .connection-number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.connection-reference td.connection-number { font-weight:500; }
.connection-reference .connection-date { font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.connection-reference :is(.connection-number,.connection-date) svg { display:inline-block; width:14px; height:14px; margin-right:7px; vertical-align:-2px; fill:none; stroke:var(--muted); stroke-width:1.5; opacity:.8; }
.connection-reference .connection-mobile-label, .connection-reference .connection-mobile-all { display:none; }
.connection-reference input[type=checkbox] { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; width:16px; height:16px; flex:0 0 16px; margin:0; vertical-align:middle; border:1px solid color-mix(in srgb,var(--muted) 80%,var(--paper)); border-radius:3px; background:var(--paper); box-shadow:none; transition:transform .15s ease; }
.connection-reference input[type=checkbox]:is(:checked,:indeterminate) { border-color:transparent; background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--co-selection-edge,linear-gradient(100deg,#418ed4,#83d5e7)) border-box; }
.connection-reference input[type=checkbox]:checked::after { content:""; width:8px; height:4px; border:solid var(--blue); border-width:0 0 1.5px 1.5px; transform:translateY(-1px) rotate(-45deg); }
.connection-reference input[type=checkbox]:indeterminate::after { content:""; width:8px; height:1.5px; background:var(--blue); border:0; transform:none; }
.connection-reference input[type=checkbox]:active { transform:scale(.94); }
.connection-reference .connection-foot { margin:19px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.connection-reference .connection-empty { padding:42px 18px; text-align:center; background:var(--soft); border-radius:8px; }
.connection-reference .connection-empty p { color:var(--ink); font-size:14px; line-height:1.8; margin:0 0 10px; }
.connection-reference .connection-live { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.connection-reference :is(button,input,select):focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.connection-reference .connection-dialog { position:fixed; inset:0; width:min(490px,calc(100% - 32px)); max-width:calc(100% - 32px); max-height:calc(100dvh - 48px); margin:auto; padding:26px 30px 30px; border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #16283726; overflow:auto; }
.connection-reference .connection-dialog::backdrop { background:#17293845; backdrop-filter:blur(3px); }
.connection-reference .connection-dialog[open] { animation:connection-detail-in .18s ease-out; }
.connection-reference .connection-dialog-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:25px; color:var(--muted); font-size:11px; }
.connection-reference .connection-dialog-top button { padding:6px; }
.connection-reference .connection-dialog-top button span { margin-left:9px; font-size:18px; }
.connection-reference .connection-detail-heading { display:flex; align-items:center; gap:14px; }
.connection-reference .connection-detail-heading h3 { margin:0; font-size:25px; font-weight:500; line-height:1.5; }
.connection-reference .connection-detail-copy { margin:23px 0; font-size:14px; line-height:1.95; color:var(--muted); }
.connection-reference .connection-detail dl { margin:0; padding:19px 0; border-block:1px solid var(--line); display:grid; gap:14px; font-size:13px; line-height:1.8; }
.connection-reference .connection-detail dl>div { display:grid; grid-template-columns:74px minmax(0,1fr); gap:16px; }
.connection-reference .connection-detail dt { color:var(--muted); font-size:12px; }
.connection-reference .connection-detail dd { margin:0; overflow-wrap:anywhere; }
.connection-reference .connection-detail-foot { margin:19px 0 0; color:var(--muted); font-size:11px; }
html[data-theme=dark] .connection-reference .connection-mono { filter:brightness(0) invert(1); opacity:.92; }
@keyframes connection-detail-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@container connections (max-width:760px) {
  .connection-reference .connection-frame { padding:24px 20px 20px; }
  .connection-reference .connection-results { padding:0; }
  .connection-reference .connection-table :is(th,td) { padding-inline:10px; }
  .connection-reference .connection-table .connection-subject { width:44%; }
}
@container connections (max-width:660px) {
  .connection-reference .connection-heading { display:block; padding-bottom:20px; }
  .connection-reference .connection-heading h3 { font-size:21px; }
  .connection-reference .connection-period { display:block; margin-top:10px; }
  .connection-reference .connection-toolbar { flex-wrap:wrap; gap:5px; }
  .connection-reference .connection-search { flex-basis:100%; }
  .connection-reference .connection-sort { margin-left:auto; }
  .connection-reference .connection-table, .connection-reference .connection-table :is(thead,tbody) { display:block; }
  .connection-reference .connection-table thead tr { display:block; position:relative; }
  .connection-reference .connection-table thead th:not(:first-child) { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .connection-reference .connection-table thead th.connection-check { display:block; width:100%; padding:12px 14px; border-radius:8px; }
  .connection-reference .connection-mobile-all { display:inline; font-size:12px; }
  .connection-reference .connection-table tbody tr { display:grid; grid-template-columns:20px minmax(0,1fr) minmax(0,1fr); gap:0 12px; padding:19px 14px; border-bottom:1px solid var(--line); }
  .connection-reference .connection-table tbody tr:last-child { border-bottom:0; }
  .connection-reference .connection-table tbody :is(th,td) { display:block; border:0; padding:0; width:auto; }
  .connection-reference .connection-table tbody .connection-check { grid-column:1; grid-row:1; padding:9px 0 0; }
  .connection-reference .connection-table .connection-subject { grid-column:2/-1; width:auto; }
  .connection-reference .connection-subject-wrap { align-items:flex-start; gap:10px; }
  .connection-reference .connection-tile { width:34px; height:34px; }
  .connection-reference .connection-category { grid-column:2/-1; margin:12px 0 10px; display:flex!important; align-items:center; gap:10px; }
  .connection-reference .connection-table td.connection-number { grid-column:2; text-align:left; }
  .connection-reference .connection-table td.connection-date { grid-column:3; }
  .connection-reference .connection-mobile-label { display:block; font-size:10.5px; color:var(--muted); margin-bottom:4px; font-weight:400; }
  .connection-reference .connection-category .connection-mobile-label { margin:0; }
  .connection-reference :is(.connection-number,.connection-date) svg { display:none; }
  .connection-reference .connection-result { align-items:flex-start; padding-block:12px; }
  .connection-reference .connection-result>[data-count] { flex:none; }
  .connection-reference .connection-selection { font-size:11px; }
  .connection-reference .connection-plain { padding-block:0; }
}
@container connections (max-width:380px) {
  .connection-reference .connection-frame { padding:22px 15px 18px; border-radius:13px; }
  .connection-reference .connection-table tbody tr { padding-inline:9px; gap:0 10px; }
  .connection-reference .connection-heading h3 { font-size:20px; }
}
@media (max-width:440px) { .connection-reference .connection-dialog { padding:20px; } }
@media (prefers-reduced-motion:reduce) { .connection-reference *, .connection-reference *::after { animation:none!important; transition:none!important; } }
html[data-motion=off] .connection-reference *, html.run-motion-reduced .connection-reference *, html.run-effects-pref-off .connection-reference * { animation:none!important; transition:none!important; }
@media (forced-colors:active) {
  .connection-reference input[type=checkbox] { appearance:auto; }
  .connection-reference input[type=checkbox]::after { display:none; }
  .connection-reference .connection-table tr.is-selected { outline:1px solid Highlight; outline-offset:-1px; }
  .connection-reference .connection-table tr.is-selected::after { display:none; }
}