/* Shared pieces of the old look's screens: sortable table headers, the row's "⋮" menu, pills, tabs, the modal and a board. Loaded after looks/old.css. Colors are tokens (see the token blocks of old.css). */
:root[data-look="old"] .old-sort { display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:root[data-look="old"] .old-sort:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
:root[data-look="old"] .old-arrows { display: inline-grid; line-height: .7; color: var(--color-text-muted); }
:root[data-look="old"] .old-arrow { display: block; font-size: .7rem; opacity: .6; }
:root[data-look="old"] .old-arrow.on { color: var(--old-ok-text); opacity: 1; }
:root[data-look="old"] .old-kebab { position: relative; display: inline-block; }
:root[data-look="old"] .old-kebab > summary { list-style: none; cursor: pointer; }
:root[data-look="old"] .old-kebab > summary::-webkit-details-marker { display: none; }
:root[data-look="old"] .old-round.small { width: 2rem; height: 2rem; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: none; }
:root[data-look="old"] .old-kebab-menu { position: absolute; right: 0; top: 2.4rem; z-index: 25; min-width: 11rem; margin: 0; padding: .3rem 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 16px rgb(0 0 0 / .18); text-align: left; }
:root[data-look="old"] .old-kebab-menu a, :root[data-look="old"] .old-kebab-menu button, :root[data-look="old"] .old-kebab-menu span { display: block; width: 100%; padding: .55rem 1rem; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
:root[data-look="old"] .old-kebab-menu a:hover, :root[data-look="old"] .old-kebab-menu button:hover { background: var(--color-surface-2); }
:root[data-look="old"] .old-kebab-menu .off { color: var(--color-text-muted); cursor: not-allowed; }
:root[data-look="old"] .old-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--old-chip-bg); color: var(--old-chip-text); }
:root[data-look="old"] .old-pill.on { background: var(--old-ok-bg); color: var(--old-ok-text); }
:root[data-look="old"] .old-pill.off, :root[data-look="old"] .old-pill.warn { background: var(--old-off-bg); color: var(--old-off-text); }
:root[data-look="old"] .old-tabs { display: flex; gap: 0; margin: 1rem 0; border-bottom: 1px solid var(--color-border); }
:root[data-look="old"] .old-tabs a, :root[data-look="old"] .old-tabs button { padding: .7rem 1.2rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-text-muted); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
:root[data-look="old"] .old-tabs [aria-current="page"], :root[data-look="old"] .old-tabs [aria-selected="true"] { color: var(--old-chip-text); border-bottom-color: var(--color-accent); }
:root[data-look="old"] dialog.old-modal { width: min(46rem, 94vw); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
:root[data-look="old"] dialog.old-modal::backdrop { background: rgb(0 0 0 / .45); }
:root[data-look="old"] .old-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border); font-size: 1.25rem; font-weight: 600; }
:root[data-look="old"] .old-modal-body { padding: 1.2rem 1.4rem; max-height: 70vh; overflow-y: auto; }
:root[data-look="old"] .old-modal-foot { display: flex; justify-content: flex-end; gap: .8rem; padding: 1rem 1.4rem; border-top: 1px solid var(--color-border); }
:root[data-look="old"] .old-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
:root[data-look="old"] .old-column { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; border-radius: var(--radius-lg); background: var(--color-surface-2); }
:root[data-look="old"] .old-column h2 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; }
:root[data-look="old"] .old-card { padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
:root[data-look="old"] .oicon { width: 1em; height: 1em; fill: currentColor; stroke: none; }
:root[data-look="old"] .credit-banner { border-color: var(--old-off-text); background: var(--old-off-bg); color: var(--old-off-text); }
:root[data-look="old"] .credit-banner-title { display: flex; align-items: center; gap: .5rem; }
:root[data-look="old"] .credit-banner-title .oicon { width: 1.2em; height: 1.2em; }