/* royalties.css -- the royalties screen (royalties.js): tables with a number per metric, every number a button. Tokens from core.css. */

.roy-card { width: 1000px; max-width: calc(100vw - 16px); max-height: calc(100vh - 32px); overflow: auto; position: relative; }
.roy-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.roy-h { margin: 0; flex: 1; font-size: calc(var(--ui-fs) * 18 / 13); font-weight: 600; color: var(--text-strong); }
.roy-x { background: none; border: 0; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.roy-x:hover { background: var(--hover); color: var(--text); }
.roy-x:focus-visible, .roy-num:focus-visible, .roy-month:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.roy-body { display: flex; flex-direction: column; gap: 14px; }
.roy-bar { display: flex; align-items: center; gap: 12px; }
.roy-lab { color: var(--text-dim); }
.roy-month { min-height: 32px; margin-left: 6px; }
.roy-h3 { margin: 0 0 4px; font-size: calc(var(--ui-fs) * 11 / 13); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.roy-wrap { overflow-x: auto; }
.roy-table { border-collapse: collapse; width: 100%; }
.roy-table th, .roy-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.roy-table thead th { font-weight: 400; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); vertical-align: bottom; }
.roy-table th.roy-key { text-align: left; font-weight: 500; color: var(--text-strong); }
.roy-table td.roy-key { text-align: left; }   /* the values under Title, Edition and Channel line up with their heading */
.roy-table th.roy-sub { font-weight: 400; color: var(--text); }
.roy-table .m-royalty { font-weight: 600; }
.roy-total th, .roy-total td { border-top: 2px solid var(--rule); font-weight: 600; }
.roy-num { min-width: 36px; min-height: 28px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; color: var(--text-strong); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }
.roy-num:hover { border-color: var(--text-dim); }
.roy-zero { color: var(--text-muted); padding-right: 8px; }
.roy-flag { display: block; font-size: calc(var(--ui-fs) * 10 / 13); color: var(--attn); line-height: 1; }
.roy-none, .roy-note { color: var(--text-muted); margin: 0; font-size: calc(var(--ui-fs) * 12 / 13); }

.roy-states { display: flex; flex-direction: column; }
.roy-state { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.roy-sn { font-weight: 500; color: var(--text-strong); min-width: 120px; }
.roy-ss { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.roy-sw { color: var(--text-dim); white-space: nowrap; font-size: calc(var(--ui-fs) * 12 / 13); }
.roy-red { background: color-mix(in srgb, var(--danger) 14%, transparent); box-shadow: inset 0 0 0 1px var(--danger); }
.roy-idle { color: var(--text-muted); }

.roy-list { position: absolute; inset: 0; z-index: 2; overflow: auto; padding: 14px; background: var(--bg-panel, var(--bg, Canvas)); }
.roy-lh { display: flex; align-items: center; gap: 12px; }
.roy-lt { margin: 0; flex: 1; font-size: calc(var(--ui-fs) * 15 / 13); color: var(--text-strong); }
.roy-rows { display: flex; flex-direction: column; margin-top: 10px; }
.roy-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--rule); }
.roy-rt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.roy-val { font-weight: 600; white-space: nowrap; }
.roy-soort, .roy-why { color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); }
.roy-why { flex-basis: 100%; overflow-wrap: anywhere; }
.roy-prov { color: var(--attn); }

.roy-bar { flex-wrap: wrap; }
.roy-fetch { min-height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--hover); color: var(--text-strong); font: inherit; cursor: pointer; }
.roy-fetch:hover:not(:disabled) { border-color: var(--text-dim); }
.roy-fetch:disabled { color: var(--text-muted); cursor: default; }
.roy-fetch:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.roy-run { flex: 1; min-width: 160px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); overflow-wrap: anywhere; }
.roy-redtext { color: var(--danger); }
.roy-sales-table td.roy-stitle { white-space: normal; min-width: 160px; }
.roy-sales-table th.roy-key { font-weight: 400; }
.roy-pay { margin: 6px 0 0; color: var(--text-strong); font-weight: 500; }
.roy-idlelines { color: var(--text-muted); }
.roy-idlelines summary { cursor: pointer; }
.roy-idleline { padding: 2px 8px; font-size: calc(var(--ui-fs) * 12 / 13); }