/* Ownership: reading preferences, evidence disclosures, chart tables, density and motion policy. */

/* Shared native date fields, including dynamically rendered guild details. */
input[type="date"] { appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; min-inline-size:0; max-width:100%; max-inline-size:100%; box-sizing:border-box; }
input[type="date"]::-webkit-date-and-time-value { min-width:0; text-align:left; }
input[type="date"]::-webkit-datetime-edit { min-width:0; padding:0; }
.member-change-controls > label { display:grid; gap:6px; min-width:0; position:relative; }
.member-change-controls input[type="date"] { min-height:44px; font-size:16px; text-align:left; padding:0 36px 0 10px; }
.member-change-controls .date-field::after { bottom:14px; }
@media(max-width:480px) {
  .filters .date-field, .member-change-controls > label { grid-column:1 / -1; }
  .member-change-controls .member-change-presets { width:100%; box-sizing:border-box; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .member-change-controls .member-change-presets button { min-height:44px; min-width:0; padding-inline:4px; font-size:13px; }
}

.reading-dialog { width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; overflow:auto; padding:var(--space-6); background:var(--panel-solid); color:var(--text); border:1px solid var(--line); border-radius:16px; }
.reading-dialog::backdrop { background:rgb(10 30 25 / .36); }
.reading-dialog header { display:flex; justify-content:space-between; gap:var(--space-3); align-items:center; }
.reading-dialog header { position:sticky; top:-16px; z-index:1; background:var(--panel-solid); padding-block:8px; }
.reading-dialog h2 { font-size:var(--type-heading); margin:0; }
.reading-dialog h3 { font-size:16px; margin:24px 0 12px; }
.reading-dialog label { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:12px; margin-top:16px; }
.reading-dialog button,.reading-dialog select,#readingPreferencesBtn { min-height:44px; }
.reading-dialog header button { flex:none; white-space:nowrap; min-width:60px; }
.detail-sequence { display:inline-flex; align-items:center; gap:4px; margin-top:6px; color:var(--muted); font-size:12px; }
.detail-sequence button { min-width:64px; min-height:44px; padding:0 8px; border:1px solid var(--line); background:var(--panel-solid); box-shadow:none; font-size:12px; border-radius:7px; }
.detail-sequence button:disabled { opacity:.4; }
#detailSequence { width:max-content; }
.change-dialog .dialog-head .detail-sequence span { display:inline; font-size:11px; color:var(--muted); white-space:nowrap; }
.reading-dialog p,.reading-dialog pre { font-family:inherit; white-space:pre-wrap; font-size:var(--type-body); line-height:1.8; }
.reading-demo { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:16px; }
.reading-demo strong { display:block; color:var(--power-num); font-size:22px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.evidence-help { font-size:12px; color:var(--muted); line-height:1.7; }
.evidence-help > summary { cursor:pointer; padding:8px 0; color:var(--accent); }
.evidence-help > p { max-width:52ch; }
.member-change-row .evidence-help { min-width:0; }
.member-change-row .evidence-help[open] { grid-column:1 / -1; }
.trend-evidence { margin-top:12px; font-size:12px; }
.trend-evidence summary { cursor:pointer; color:var(--accent); padding:12px 0; }
.trend-table-scroll { max-height:280px; overflow:auto; }
.trend-evidence table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.trend-evidence th,.trend-evidence td { text-align:left; padding:10px; border-bottom:1px solid var(--line); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; scroll-margin-block:130px; }
@media(min-width:781px) {
  :root[data-density="compact"] .ranking-card { padding-block:6px; min-height:60px; }
  :root[data-density="compact"] .player-name { font-size:14px; }
  :root[data-density="compact"] .card-note { margin-block:2px; }
}
:root[data-motion="quiet"] *, :root[data-motion="quiet"] *::before, :root[data-motion="quiet"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:390px) { .reading-dialog { padding:16px; } .reading-dialog h2 { font-size:18px; } }

.record-tools { position:relative; }
.record-tools [aria-pressed="true"] svg { fill:var(--accent); color:var(--accent); }
.record-feedback:empty { display:none; }
.record-feedback:not(:empty) { position:absolute; right:0; top:40px; width:220px; background:var(--panel-solid); border:1px solid var(--line); padding:10px; z-index:5; font-size:12px; }
.record-actions { display:flex; gap:8px; justify-content:flex-end; }
.record-actions button { min-height:44px; }
[data-saved-records] { display:grid; gap:8px; font-size:14px; max-height:240px; overflow:auto; margin-bottom:16px; }
[data-saved-records] a { display:block; padding:10px; color:var(--accent); overflow-wrap:anywhere; }
.record-revision-note { border-left:3px solid var(--accent-warm); padding:12px; color:var(--text-secondary); font-size:13px; }

.trend-policy-note { font-size:11px; color:var(--muted); line-height:1.7; }
.trend-raw-view > summary { cursor:pointer; color:var(--accent); padding:12px 0; font-size:12px; }

#detailRecordActions:empty,#detailSequence:empty { display:none; }
.favorites-entry { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; }
.favorites-entry svg { width:18px; height:18px; }
.saved-caption { color:var(--muted); }
#readingPreferencesBtn { position:relative; }
@media(min-width:1280px) {
  body.detail-docked { padding-right:560px; }
  body.detail-docked .app-shell { width:calc(100% - 32px); }
  body.detail-docked .topbar { display:flex; flex-wrap:wrap; }
  body.detail-docked .mode-tabs { order:3; width:100%; }
  body.detail-docked .toolbar-actions { margin-left:auto; }
  body.detail-docked .app-shell > .pager { left:calc((100% - 560px) / 2); max-width:calc(100% - 592px); }
  body.detail-docked .pager .rank-jump { display:none; }
  .change-dialog.is-pinned { z-index:var(--layer-dialog); box-shadow:none; border-left:1px solid var(--line); }
  .change-dialog.is-pinned::backdrop { display:none; }
}
@media(max-width:1279px) { #detailPin { display:none; } }
@media(max-width:780px) {
  .toolbar-actions .icon-btn { width:44px; min-height:44px; }
  .detail-sequence button { min-width:60px; }
}

:root:not([data-evidence="on"]) .trend-evidence,
:root:not([data-evidence="on"]) .trend-raw-view,
:root:not([data-evidence="on"]) .trend-policy-note { display:none; }
.saved-record-row { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-solid); }
[data-saved-records] .saved-record-row a { flex:1; min-width:0; display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:14px; text-decoration:none; }
.saved-record-row a strong { color:var(--text); font-size:16px; }
.saved-record-row a > span:not(.saved-record-open) { grid-row:2; color:var(--muted); font-size:12px; }
.saved-record-open { grid-column:2; grid-row:1 / 3; align-self:center; font-size:12px; }
.saved-record-remove { flex:none; min-height:44px; margin-right:8px; padding:0 10px; border:0; background:transparent; color:var(--muted); box-shadow:none; }
.saved-record-row:has(a:hover) { border-color:var(--accent); background:var(--soft); }
.guild-compare-side { position:relative; }
.guild-compare-side .compare-detail-open { position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; border-radius:inherit; background:transparent; box-shadow:none; cursor:pointer; }
.guild-compare-side:has(.compare-detail-open:hover) { outline:1px solid var(--accent); }
.guild-compare-side .detail-link-status { position:relative; z-index:2; font-size:12px; }

/* Compact navigation: two persistent tools, secondary actions in a popover. */
.topbar { display:flex; flex-wrap:nowrap; align-items:center; gap:20px; }
.topbar .title-cluster { flex:1 1 auto; min-width:0; }
.topbar .mode-tabs { flex:0 0 auto; margin:0; }
.topbar .toolbar-actions { flex:none; width:auto; margin:0; gap:8px; }
.topbar .favorites-entry { margin:0; }
.snapshot-line { display:flex; align-items:center; gap:6px; }
.snapshot-line .quality-warning-btn { width:28px; min-height:28px; height:28px; padding:4px; border:0; background:transparent; box-shadow:none; }
.snapshot-line .quality-warning-btn svg { width:16px; height:16px; }
#moreToolsBtn { position:relative; }
.topbar .toolbar-actions > .icon-btn { display:inline-grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:0; line-height:1; box-sizing:border-box; }
.topbar .toolbar-actions > .icon-btn svg { width:20px; height:20px; margin:0; }
#changeServerPreference { font-size:11px; color:var(--muted); }
.more-tools { position:fixed; inset:auto; margin:0; width:286px; max-width:calc(100vw - 24px); padding:8px; color:var(--text); background:var(--panel-solid); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-float); }
.more-tools.is-menu-fallback { z-index:100; }
.more-tools[hidden] { display:none; }
.network-notice { padding:10px 16px; color:var(--text); background:var(--surface-cool); text-align:center; font-size:13px; }
.freshness-notice { font-size:12px; color:var(--muted); }
.share-fallback > button, .share-fallback > a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; margin:0 4px 4px 0; border:1px solid var(--line); border-radius:9px; color:var(--accent); background:var(--panel-solid); font-size:14px; text-decoration:none; }
.share-fallback > button { background:var(--accent); color:var(--panel-solid); }
[data-import-status]:empty { display:none; }
[data-import-status] { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
@media (max-width:800px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .topbar .snapshot-line { display:block; }
  .topbar .freshness-notice { display:block; font-size:10px; line-height:1.5; }
  input, select, textarea, .pager .page-jump input { font-size:16px; }
  .filter-shell .filters label, .filter-shell .filter-field,
  .member-change-controls > label { font-size:12px; font-weight:500; }
  .filter-shell .filters input, .filter-shell .filters select,
  .member-change-controls input[type="date"] { font-size:16px; font-weight:400; line-height:1.4; min-height:44px; }
  .filter-shell .filters input::placeholder { font-size:14px; font-weight:400; }
  .filter-shell .filters input::-webkit-datetime-edit,
  .member-change-controls input::-webkit-datetime-edit { font-weight:400; }
  /* Phone filters share stacked captions and paired region/server fields. */
  .filter-shell .mobile-filter-copy { display:flex; align-items:center; gap:8px; min-width:0; }
  .filter-shell .mobile-filter-copy > span { display:none; }
  .filter-shell .mobile-filter-copy strong { font-size:12px; font-weight:500; }
  .filter-shell .mobile-filter-toggle { position:relative; min-height:44px; padding-block:6px; padding-right:76px; }
  .filter-shell .mobile-filter-chevron { position:absolute; right:12px; }
  .filter-shell #rankingFilters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px 4px 4px; }
  .filter-shell #rankingFilters > * { min-width:0; order:0; grid-column:auto; grid-row:auto; }
  .filter-shell #rankingFilters > label,
  .filter-shell #rankingFilters > .filter-field { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:6px; font-size:12px; padding:0; }
  .filter-shell #rankingFilters .filter-caption,
  .filter-shell #rankingFilters .guild-filter-field > label { display:block; }
  .filter-shell #rankingFilters .search-field { order:0; grid-column:2; }
  .filter-shell #rankingFilters > label:has(#regionSelect) { grid-column:1; }
  .filter-shell #rankingFilters > label:has(#serverSelect) { grid-column:2; }
  .filter-shell #rankingFilters .primary-date-field { grid-column:1 / -1; }
  .filter-shell #rankingFilters .guild-filter-field { grid-column:1; }
  .filter-shell #rankingFilters.is-change-mode .date-field { grid-column:auto; }
  .filter-shell #rankingFilters .search-field input { padding-right:10px; }
  .filter-shell #rankingFilters input,
  .filter-shell #rankingFilters select,
  .filter-shell #rankingFilters .guild-filter-combobox { grid-column:1; grid-row:auto; }
  .filter-shell #rankingFilters .date-status { grid-column:1; }
  .filter-shell #rankingFilters .date-status:empty { display:none; }
  .filter-shell #rankingFilters #filterResetField { position:absolute; top:-43px; right:40px; width:32px; z-index:1; }
  .filter-shell #filterResetBtn { width:32px; height:32px; min-height:32px; border:0; box-shadow:none; }
  .filter-shell #changeRangeQuick { grid-row:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding-left:0; grid-column:1 / -1; }
  .filter-shell #changeRangeQuick > .filter-caption { display:none; }
  .filter-shell #rankingFilters #changeRangeMobileSelect { display:block; grid-column:1; grid-row:1; width:100%; min-width:0; font-size:14px; }
  .filter-shell #changeRangeQuick .change-range-buttons { display:none; }
  .filter-shell #saveChangeServer { grid-column:2; grid-row:1; min-width:0; padding-inline:6px; font-size:11px; border:0; background:transparent; box-shadow:none; }
  .filter-shell #changeServerPreference { grid-column:1 / -1; font-weight:400; }
  .filter-shell #changeServerPreference:empty { display:none; }
  .filter-shell #filterSummary { display:none; }
  .filter-shell #rankingFilters input, .filter-shell #rankingFilters select,
  .filter-shell #rankingFilters button { height:40px; min-height:40px; box-sizing:border-box; }
  .filter-shell #rankingFilters #filterResetBtn { height:32px; min-height:32px; }
  .filter-shell #rankingFilters input[type="date"],
  #changeDialog .member-change-controls input[type="date"] { height:40px; min-height:40px; padding-block:0; line-height:38px; }
  .filter-shell #rankingFilters input[type="date"]::-webkit-date-and-time-value,
  #changeDialog .member-change-controls input[type="date"]::-webkit-date-and-time-value { line-height:38px; text-align:left; }
  .filter-shell #rankingFilters .date-field::after,
  #changeDialog .member-change-controls .date-field::after { bottom:12px; }
  #changeDialog .member-change-controls { gap:6px; }
  #changeDialog .member-change-controls > label { grid-column:1 / -1; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:6px; }
  #changeDialog .member-change-controls .member-change-presets { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2px; padding:2px; }
  #changeDialog .member-change-controls .member-change-presets button { flex:0 0 auto; min-height:40px; padding-inline:10px; font-size:12px; }
  .keyboard-open .app-shell > .pager, .keyboard-open .back-to-top { visibility:hidden; pointer-events:none; }
  .reading-dialog { max-height:calc(100dvh - 32px); overflow:auto; padding-bottom:max(20px, env(safe-area-inset-bottom)); }
  .reading-dialog footer { flex-wrap:wrap; }
}
.more-tools header { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px 10px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.more-tools header strong { font-size:13px; color:var(--muted); }
.more-tools .tool-menu-item { display:flex; align-items:center; width:100%; min-height:64px; gap:12px; padding:10px 12px; border:0; border-radius:8px; box-shadow:none; text-align:left; background:transparent; }
.more-tools .tool-menu-item:hover { background:var(--soft); transform:none; }
.more-tools a.tool-menu-item { color:var(--text); text-decoration:none; }
.tool-menu-item svg { flex:none; width:20px; height:20px; color:var(--accent); }
.tool-menu-copy { flex:1; display:grid; gap:3px; }
.tool-menu-copy strong { font-size:14px; font-weight:600; }
.tool-menu-copy small { font-weight:400; font-size:11px; color:var(--muted); }
.menu-chevron { font-size:20px; color:var(--muted); }
.more-tools .menu-close,.reading-dialog header .menu-close { display:grid; place-items:center; flex:none; width:40px; min-width:40px; height:40px; min-height:40px; padding:0; border:0; border-radius:8px; box-shadow:none; background:transparent; color:var(--muted); }
.menu-close svg { width:18px; height:18px; }
.menu-close { display:inline-grid; place-items:center; width:40px; min-width:40px; min-height:40px; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; }
.menu-close:hover { background:var(--soft)!important; color:var(--text)!important; }
@media(max-width:900px) {
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .topbar .title-cluster { grid-column:1; grid-row:1; }
  .topbar .toolbar-actions { grid-column:2; grid-row:1; }
  .topbar .mode-tabs { grid-column:1 / -1; grid-row:2; width:100%; }
  .topbar .mode-tab { flex:1; min-width:0; }
  .topbar .title-cluster h1 { max-width:none; overflow:visible; }
  .topbar #snapshotMeta { font-size:10px; white-space:normal; }
  .title-cluster .snapshot-line { min-width:0; }
}

/* Phone detail pages and secondary bottom sheets own their mobile layout here. */
@media (max-width:780px) {
  #changeDialog.is-drawer:not(.share-card) { inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  #changeDialog.is-drawer > form { display:flex; flex-direction:column; }
  #changeDialog.is-drawer .dialog-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:0 4px; padding:max(8px,env(safe-area-inset-top)) 12px 8px; }
  #changeDialog.is-drawer .dialog-head > div:first-child { display:contents; }
  #changeDialog.is-drawer #detailBack { grid-column:1; grid-row:1 / 3; width:44px; height:44px; min-height:44px; align-self:start; border:0; border-radius:50%; background:transparent; box-shadow:none; -webkit-tap-highlight-color:transparent; }
  #changeDialog.is-drawer #detailBack svg { width:22px; height:22px; stroke-width:2; }
  #changeDialog.is-drawer #detailBack:active { background:var(--accent-soft); }
  #changeDialog.is-drawer #detailBack:focus-visible { outline:2px solid var(--accent); outline-offset:-5px; }
  #changeDialog.is-drawer #changeDialogTitle[tabindex="-1"]:focus { outline:none; box-shadow:none; }
  #changeDialog.is-drawer #changeDialogTitle { grid-column:2; grid-row:1; align-self:end; font-size:18px; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #changeDialog.is-drawer #changeDialogMeta { grid-column:2; grid-row:2; margin:0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #changeDialog.is-drawer .dialog-head-actions { grid-column:3; grid-row:1 / 3; align-self:start; gap:0; }
  #changeDialog.is-drawer .dialog-head-actions .dialog-icon-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
  #changeDialog.is-drawer #changeDialogClose, #changeDialog.is-drawer #changeDialogExpand { display:none; }
  #changeDialog.is-drawer #detailSequence { grid-column:1 / -1; grid-row:3; justify-self:end; }
  #changeDialog.is-drawer .detail-sequence { margin-top:2px; gap:8px; }
  #changeDialog.is-drawer .detail-sequence button { border:0; background:transparent; min-width:64px; min-height:44px; }
  #changeDialog.is-drawer .change-dialog-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 16px max(20px,env(safe-area-inset-bottom)); }
  /* One phone scroll surface: date controls must not squeeze the list to zero. */
  #changeDialog.is-drawer.is-guild-change .change-dialog-body { display:block; }
  #changeDialog.is-drawer.is-guild-change .change-dialog-body > * + * { margin-top:8px; }
  #changeDialog.is-drawer.is-guild-change .member-change-section { display:block; }
  #changeDialog.is-drawer.is-guild-change .member-change-list,
  #changeDialog.is-drawer.is-guild-change .guild-roster { max-height:none; overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; }
  #readingPreferences, #savedRecordsDialog { position:fixed; inset:auto 0 0; margin:0; width:100%; max-width:100%; max-height:82dvh; border-radius:20px 20px 0 0; padding:12px 20px max(20px,env(safe-area-inset-bottom)); border-bottom:0; overscroll-behavior:contain; animation:phone-sheet-enter var(--motion-standard) ease-out; }
  #readingPreferences header, #savedRecordsDialog header { top:-12px; padding:8px 0; }
  #readingPreferences header .menu-close, #savedRecordsDialog header .menu-close { min-width:44px; width:44px; height:44px; }
  #savedRecordsDialog [data-saved-records] { max-height:44dvh; overscroll-behavior:contain; }
  #savedRecordsDialog .record-actions { padding-top:8px; }
  body:has(#readingPreferences[open]), body:has(#savedRecordsDialog[open]) { overflow:hidden; }
}
@keyframes phone-sheet-enter { from { transform:translateY(32px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Archive browsing uses the latest index; keep this explicit even with mobile grid rules. */
.primary-date-field[hidden] { display: none !important; }
/* The header already displays the archive date; filters use the freed column for search. */
@media (min-width: 801px) {
  .filter-shell #rankingFilters.is-archive-mode {
    grid-template-columns: minmax(110px, .8fr) minmax(110px, .8fr) minmax(140px, 1fr) minmax(180px, 1.6fr) 36px;
    grid-template-areas: "region server guild search reset";
    align-items: center;
    gap: 8px;
  }
  #rankingFilters.is-archive-mode > .search-field { grid-area: search; }
  #rankingFilters.is-archive-mode > label:has(#regionSelect) { grid-area: region; }
  #rankingFilters.is-archive-mode > label:has(#serverSelect) { grid-area: server; }
  #rankingFilters.is-archive-mode > .guild-filter-field { grid-area: guild; }
  #rankingFilters.is-archive-mode > #filterResetField { grid-area: reset; min-width: 36px; }
  #rankingFilters.is-archive-mode input,
  #rankingFilters.is-archive-mode select,
  #rankingFilters.is-archive-mode .guild-filter-combobox,
  #rankingFilters.is-archive-mode #filterResetBtn { height: 36px; min-height: 36px; box-sizing: border-box; }
}

@media (max-width: 800px) {
  .filter-shell #rankingFilters.is-archive-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-shell #rankingFilters.is-archive-mode > label:has(#regionSelect) { grid-column: 1; }
  .filter-shell #rankingFilters.is-archive-mode > label:has(#serverSelect) { grid-column: 2; }
  .filter-shell #rankingFilters.is-archive-mode > .guild-filter-field { grid-column: 1 / -1; }
}

/* Two-row ranking filters keep the clear action beside the search input. */
@media (min-width: 801px) and (max-width: 1100px) {
  #rankingFilters:not(.is-archive-mode):not(.is-change-mode):not(.is-guild-compare-mode) > .search-field {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 44px;
  }
  #rankingFilters:not(.is-archive-mode):not(.is-change-mode):not(.is-guild-compare-mode) > .search-field input {
    height: 36px;
    min-height: 36px;
  }
  #rankingFilters:not(.is-archive-mode):not(.is-change-mode):not(.is-guild-compare-mode) > #filterResetField {
    position: static;
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    min-width: 36px;
  }
}