/* #353 — Reports For Admin and Owner (the combined report on Reports › By Client).
   Values are copied from the "Reports Module — All Mockups" design so the page
   matches it exactly; class names keep the mockup's tf-/sf- prefixes so the two
   can be compared side by side. Plain CSS rather than Tailwind utilities because
   the mockup's measurements (oklch colours, fixed column widths) are not on the
   Tailwind scale. */

.tf-page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; }

/* Filter panel */
.tf-filter-panel { display: flex; background: #fff; border: 1px solid oklch(0.923 0.003 48.717); border-radius: 14px; box-shadow: 0 1px 3px rgba(28,25,23,0.05); }
/* content-box on purpose: the mockup's column widths (310 / 410 / 240) are the
   space INSIDE the padding. Tailwind's base makes everything border-box, which
   took 52px out of each column and pushed the date boxes and pickers over the
   dividers. */
.tf-col { padding: 22px 26px; box-sizing: content-box; }
.tf-divider { width: 1px; background: oklch(0.923 0.003 48.717); }
.tf-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.553 0.013 58.071); margin-bottom: 12px; }
.tf-radio-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.tf-radio-row input[type=radio] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 50%; position: relative; cursor: pointer; }
.tf-radio-row input[type=radio]:hover { border-color: oklch(0.44 0.011 73.639); }
.tf-radio-row input[type=radio]:checked { border-color: rgb(27,81,69); }
.tf-radio-row input[type=radio]:checked::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: rgb(27,81,69); }
.tf-select { font-size: 13px; padding: 8px 10px; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 8px; background: #fff; color: #1c1917; font-family: inherit; cursor: pointer; box-sizing: border-box; }
.tf-select:disabled { color: oklch(0.709 0.01 56.259); background: oklch(0.97 0.001 106.424); cursor: default; }
.tf-date-input { font-size: 13px; padding: 8px 10px; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 8px; background: #fff; color: #1c1917; font-family: inherit; width: 140px; box-sizing: border-box; }
.tf-date-input:disabled { opacity: 0.5; }
.tf-date-input[aria-invalid=true] { border-color: rgb(220,38,38); }
/* The mockup's 100px boxes cut the year off ("09/29/20"). 128px is the widest
   pair that still fits the 310px Date Range column, and shows 09/29/2026 whole
   with room on the right for the calendar button. */
.tf-radio-row .tf-date-input { width: 128px; flex-shrink: 0; padding: 8px 28px 8px 8px; }
/* The MM/DD/YYYY text box plus its calendar button; the native picker the
   button opens sits invisibly over the field so its popup anchors there. */
.tf-date-field { position: relative; display: inline-flex; flex-shrink: 0; }
.tf-date-pick { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; padding: 2px; border: none; background: none; color: rgb(27,81,69); cursor: pointer; border-radius: 4px; }
.tf-date-pick:disabled { opacity: 0.5; cursor: default; }
.tf-date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.tf-checks { display: flex; gap: 18px; flex-wrap: wrap; }
.tf-check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.tf-check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 3px; position: relative; cursor: pointer; }
.tf-check input:hover { border-color: oklch(0.44 0.011 73.639); }
.tf-check input:checked { background: rgb(27,81,69); border-color: rgb(27,81,69); }
.tf-check input:checked::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tf-segmented-3 { display: inline-flex; background: oklch(0.97 0.001 106.424); border-radius: 9px; padding: 3px; gap: 2px; }
.tf-seg-btn { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 7px; border: none; background: transparent; color: oklch(0.553 0.013 58.071); cursor: pointer; font-family: inherit; }
.tf-seg-btn.active { background: rgb(27,81,69); color: #fff; }
.tf-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgb(27,81,69); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; padding: 11px 14px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; }
.tf-btn-primary:hover { background: rgb(22,64,56); }

/* Multi-select pickers (Filter by) */
.sf-msel { position: relative; }
.sf-msel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
.sf-msel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-msel-btn svg { flex-shrink: 0; color: oklch(0.709 0.01 56.259); }
.sf-msel-panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 240px; max-height: 270px; overflow-y: auto; background: #fff; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 10px; box-shadow: 0 10px 28px rgba(28,25,23,0.14); padding: 6px; z-index: 30; display: none; box-sizing: border-box; }
.sf-msel.open .sf-msel-panel { display: block; }
.sf-msel-option { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.sf-msel-option:hover { background: oklch(0.97 0.001 106.424); }
.sf-msel-option input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 3px; position: relative; cursor: pointer; }
.sf-msel-option input:checked { background: rgb(27,81,69); border-color: rgb(27,81,69); }
.sf-msel-option input:checked::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sf-msel-empty { padding: 12px 8px; font-size: 12px; color: oklch(0.709 0.01 56.259); text-align: center; }
.sf-msel-clear { display: block; width: 100%; text-align: left; font-size: 11px; font-weight: 600; color: rgb(27,81,69); background: none; border: none; padding: 6px 8px 4px; cursor: pointer; font-family: inherit; }
.sf-msel-clear:hover { text-decoration: underline; }

/* Results */
.tf-results-head { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 4px; }
.tf-results-head .tf-rh-title { font-size: 16px; font-weight: 700; }
.tf-results-head .tf-rh-links { font-size: 13px; font-weight: 600; display: flex; gap: 20px; }
.tf-results-head .tf-rh-links a { color: rgb(27,81,69); text-decoration: underline; cursor: pointer; }

.tf-panel { display: none; }
.tf-panel.active { display: block; }
.tf-head-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 2px solid oklch(0.913 0.005 56.42); font-size: 12px; font-weight: 700; color: #1c1917; }
.tf-row { border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 14px; }
.tf-row:nth-child(odd) { background: oklch(0.975 0.001 106.424); }
.tf-row-main { display: flex; align-items: center; width: 100%; padding: 12px 0; cursor: pointer; }
.tf-row-main:hover { background: oklch(0.955 0.007 56.42); }
.tf-row-main > a { font-weight: 600; color: rgb(27,81,69); text-decoration: underline; cursor: pointer; }
.tf-expand-icon { width: 20px; height: 20px; border-radius: 5px; background: rgb(27,81,69); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 10px; font-size: 14px; font-weight: 700; transition: transform .15s; }
.tf-row-main.open > .tf-expand-icon,
.tf-detail-row.open > .tf-expand-icon { transform: rotate(45deg); }
.tf-col-primary { width: 340px; flex-shrink: 0; display: flex; align-items: center; }
.tf-col-time { flex: 1; text-align: right; padding-right: 60px; }
.tf-col-projects { width: 100px; text-align: right; padding-right: 8px; }
/* The mockup animates max-height to 300px, which clips real data with more
   than a handful of rows. Shown/hidden outright instead. */
.tf-detail-wrap { display: none; background: oklch(0.99 0 0); }
.tf-detail-wrap.open { display: block; }
.tf-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0 9px 44px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); cursor: pointer; }
.tf-detail-row:hover { background: oklch(0.97 0.001 106.424); }
.tf-detail-row .tf-dr-hours { padding-right: 60px; }
.tf-detail-row-note { display: flex; align-items: baseline; padding: 9px 0 9px 44px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); gap: 12px; }
.tf-detail-row-note .drn-date { width: 100px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-detail-row-note .drn-proj { width: 150px; flex-shrink: 0; font-weight: 600; color: #1c1917; }
.tf-detail-row-note .drn-note { flex: 1; }
.tf-detail-row-note .drn-hours { width: 70px; flex-shrink: 0; text-align: right; padding-right: 60px; color: #1c1917; }

.tf2-proj-icon { width: 14px; height: 14px; font-size: 10px; margin-right: 8px; flex-shrink: 0; }
.tf2-proj-name { flex: 1; }
.tf2-member-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 8px 78px; font-size: 13px; border-top: 1px solid oklch(0.965 0.001 106.424); cursor: pointer; }
.tf2-member-row:hover { background: oklch(0.955 0.007 56.42); }
.tf2-member-row a { color: rgb(27,81,69); text-decoration: underline; }
.tf2-member-row span:last-child { padding-right: 60px; color: #1c1917; }

.tf2-subview-toggle { margin: 14px 0 4px; }
#tf2-panel-projects.view-by-person .tf2-view-task,
#tf2-panel-projects.view-by-person .tf2-proj-head-task { display: none; }
#tf2-panel-projects:not(.view-by-person) .tf2-view-person,
#tf2-panel-projects:not(.view-by-person) .tf2-proj-head-person { display: none; }
#tf2-panel-people.view-by-task .tf2-view-person { display: none; }
#tf2-panel-people:not(.view-by-task) .tf2-view-task { display: none; }
.tf2-task-subgroup { display: flex; justify-content: space-between; padding: 8px 0 8px 44px; margin-top: 8px; font-size: 12px; font-weight: 700; color: #1c1917; background: oklch(0.97 0.001 106.424); }
.tf-totals-row { display: flex; align-items: center; padding: 14px 0; font-size: 14px; font-weight: 700; }
.tf-totals-row .tf-col-primary { justify-content: flex-end; width: 340px; padding-right: 16px; box-sizing: border-box; }
.tf-no-results { padding: 16px 0 16px 30px; font-size: 13px; color: oklch(0.709 0.01 56.259); }

.tf-proj-head-row { display: flex; align-items: center; padding: 8px 0 8px 16px; border-bottom: 2px solid oklch(0.913 0.005 56.42); font-size: 12px; font-weight: 700; }
.tf-project-group-head { display: flex; align-items: center; padding: 10px 16px; background: oklch(0.97 0.001 106.424); border-radius: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.tf-project-group-head span { font-weight: 400; color: oklch(0.709 0.01 56.259); margin-left: 8px; }
.tf-task-row { display: flex; align-items: center; padding: 11px 16px 11px 32px; border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 14px; }
.tf-col-task { width: 220px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-col-budget, .tf-col-actual { width: 140px; flex-shrink: 0; text-align: right; }
.tf-col-remaining { flex: 1; text-align: right; padding-right: 8px; }
.tf-remaining-neg { color: oklch(0.577 0.245 27.325); font-weight: 700; }
.tf-dash { color: oklch(0.709 0.01 56.259); }

/* Member time-entry modal (Group by Clients › Project › Member) */
.tf-member-modal-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tf-member-modal-overlay[hidden] { display: none; }
.tf-member-modal { width: 560px; max-width: 100%; max-height: 520px; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.tf-member-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid oklch(0.923 0.003 48.717); }
.tf-member-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tf-member-modal-head .sub { font-size: 12px; color: oklch(0.553 0.013 58.071); margin-top: 4px; }
.tf-member-modal-close { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #1c1917; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; border: 1px solid oklch(0.869 0.005 56.366); cursor: pointer; font-family: inherit; }
.tf-member-modal-close:hover { filter: brightness(0.97); }
.tf-member-modal-body { padding: 8px 24px 20px; overflow-y: auto; }
.tf-member-modal-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 13px; }
.tf-member-modal-row .mm-date { width: 90px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-member-modal-row .mm-note { flex: 1; color: oklch(0.444 0.011 73.639); }
.tf-member-modal-row .mm-hours { width: 60px; text-align: right; flex-shrink: 0; font-weight: 600; color: #1c1917; }
.tf-member-modal-total { display: flex; justify-content: space-between; padding: 12px 0 0; font-weight: 700; font-size: 13px; }

/* Print View — Detailed Time Entry Report */
.tf-print-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tf-print-overlay[hidden] { display: none; }
.tf-print-sheet { width: 1100px; max-width: 100%; max-height: min(680px, calc(100vh - 32px)); background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; color: #1c1917; }
.tf-print-body { padding: 0; overflow-y: auto; color: #1c1917; }
.tf-print-empty { padding: 40px; text-align: center; color: oklch(0.709 0.01 56.259); font-size: 13px; }
.tf-print-topbar2 { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid oklch(0.923 0.003 48.717); flex-shrink: 0; }
.tf-print-link { color: rgb(27,81,69); text-decoration: underline; font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.tf-print-pagebreak { display: flex; align-items: center; gap: 14px; font-size: 12px; color: oklch(0.553 0.013 58.071); }
.tf-print-pagebreak label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tf-print-pagebreak-sep { width: 1px; height: 16px; background: oklch(0.869 0.005 56.366); margin: 0 4px; }
.tf-toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.tf-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-toggle-switch .track { width: 32px; height: 18px; background: oklch(0.79 0.008 56.366); border-radius: 999px; position: relative; flex-shrink: 0; transition: background .15s ease; }
.tf-toggle-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.tf-toggle-switch input:checked + .track { background: rgb(27,81,69); }
.tf-toggle-switch input:checked + .track::after { transform: translateX(14px); }
.tf-toggle-switch input:focus-visible + .track { outline: 2px solid rgb(35,102,85); outline-offset: 2px; }
.tf-print-titlebar { background: #1c1917; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.tf-print-includesbar { background: oklch(0.955 0.005 56.42); display: flex; align-items: center; justify-content: space-between; padding: 9px 24px; font-size: 13px; color: oklch(0.444 0.011 73.639); gap: 24px; flex-shrink: 0; }
.tf-print-includesbar b { color: #1c1917; }
.tf-print-client-hero { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 12px; }
.tf-print-client-hero h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.tf-print-client-hero .sub { font-size: 13px; color: oklch(0.553 0.013 58.071); }
.tf-print-hero-box { border: 1.5px solid #1c1917; border-radius: 4px; padding: 10px 20px; font-size: 15px; font-weight: 700; text-align: center; white-space: nowrap; }
.tf-print-group-bar { display: flex; justify-content: space-between; background: oklch(0.85 0.005 56.42); font-weight: 700; padding: 9px 24px; font-size: 13px; }
.tf-print-group-bar.is-header { background: oklch(0.97 0.001 106.424); color: #1c1917; }
.tf-print-subgroup-bar { display: flex; justify-content: space-between; background: oklch(0.93 0.003 48.717); padding: 7px 24px 7px 36px; font-size: 13px; font-weight: 600; }
.tf-print-entry { display: flex; align-items: baseline; padding: 8px 24px 8px 48px; font-size: 13px; border-bottom: 1px solid oklch(0.965 0.001 106.424); gap: 16px; }
.tf-print-entry .name { width: 150px; flex-shrink: 0; }
.tf-print-entry .date { width: 110px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-print-entry .hrs { width: 80px; flex-shrink: 0; text-align: right; }
.tf-print-entry .note { flex: 1; color: oklch(0.444 0.011 73.639); }
.tf-print-entry .col-80 { width: 80px; flex-shrink: 0; text-align: right; }
.tf-print-entry .col-90 { width: 90px; flex-shrink: 0; text-align: right; }
.tf-print-entry.is-member { padding-left: 64px; }
.tf-print-entry.is-time-logged { padding-left: 88px; }
.tf-print-pagebreak-marker { border-top: 2px dashed oklch(0.79 0.008 56.366); margin: 18px 24px 0; padding-top: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.709 0.01 56.259); text-align: center; }
.tf-print-bottom-header { background: #1c1917; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 28px; }
.tf-print-footer { background: oklch(0.955 0.005 56.42); display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; font-size: 11px; color: oklch(0.553 0.013 58.071); flex-shrink: 0; }

/* Which of the five print layouts is showing, and the toolbar's switches.
   All server-rendered; the toolbar only flips classes on .tf-print-body. */
.tf-print-variant { display: none; }
.tf-print-variant.active { display: block; }
.tf-print-body:not(.break-clients) .tf-print-pagebreak-marker.is-client,
.tf-print-body:not(.break-projects) .tf-print-pagebreak-marker.is-project { display: none; }
.tf-print-body.hide-time-logged .tf-print-time-logged { display: none; }
.tf-print-body.hide-time-logged .tf-print-entry.is-member .hrs { visibility: hidden; }
/* Include Notes: the note's cell keeps its width so the hours stay aligned.
   A member's entry falls back to its task name rather than going blank. */
.tf-print-notes-off { display: none; }
.tf-print-body.hide-notes .tf-print-notes { display: none; }
.tf-print-body.hide-notes .tf-print-notes-off { display: inline; }

@media print {
  /* Print only the report sheet: everything that neither is the sheet nor
     contains it is removed, and the sheet's ancestors are flattened so it
     starts at the top of the first page. */
  body.tf-printing *:not(:has(.tf-print-sheet)):not(.tf-print-sheet):not(.tf-print-sheet *) { display: none !important; }
  body.tf-printing :has(.tf-print-sheet) { position: static !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; overflow: visible !important; }
  body.tf-printing .tf-print-sheet { width: 100%; max-width: none; max-height: none; box-shadow: none; border-radius: 0; overflow: visible; }
  body.tf-printing .tf-print-body { overflow: visible; padding-bottom: 70px; }
  body.tf-printing .tf-print-topbar2 { display: none !important; }
  .tf-print-body.break-clients .tf-print-break-client,
  .tf-print-body.break-projects .tf-print-break-project { break-before: page; page-break-before: always; }
  .tf-print-pagebreak-marker { display: none !important; }
  .tf-print-bottom-header, .tf-print-footer { position: fixed; left: 0; right: 0; }
  .tf-print-bottom-header { bottom: 28px; }
  .tf-print-footer { bottom: 0; }
  .tf-print-titlebar, .tf-print-includesbar, .tf-print-bottom-header, .tf-print-footer,
  .tf-print-group-bar, .tf-print-subgroup-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* While a filter change is re-running the report. */
.tf-results-frame { display: block; transition: opacity .15s; }
.tf-results-frame[aria-busy="true"],
.tf-loading .tf-results-frame { opacity: 0.5; pointer-events: none; }
.tf-updating { display: none; font-size: 13px; font-weight: 600; color: rgb(27,81,69); margin: 28px 0 -20px; }
.tf-loading .tf-updating { display: block; }

/* #354 — Reports For Members: Client › Project › my entries. Date, note and
   hours; the date column matches the Admin/Owner report's .drn-date. Values
   from the mockup's tf3- rows. */
.tf3-entry-row { display: flex; align-items: baseline; padding: 8px 0 8px 60px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); gap: 12px; }
.tf3-entry-row .e-date { width: 100px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf3-entry-row .e-note { flex: 1; }
/* 130px = the mockup's 70px figure plus its 60px right padding: Tailwind's
   border-box would otherwise leave 10px, and "1h 30m" wraps onto two lines. */
.tf3-entry-row .e-hours { width: 130px; flex-shrink: 0; text-align: right; padding-right: 60px; color: #1c1917; white-space: nowrap; }

/* "Lock or Unlock these entries", under the results.
   Centred and quiet, the way Tick's own footer reads: the sentence is the
   control, so the two words in it are styled as links rather than as buttons.
   button_to is still what submits them — a lock is a write, and a GET link
   that changes data is a link a crawler can press. */
.tf-lock-row { padding: 18px 0 26px; text-align: center; font-size: 13px; color: oklch(0.444 0.011 73.639); }
.tf-lock-row p { margin: 0; }
.tf-lock-form { display: inline; }
.tf-lock-link {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; color: oklch(0.488 0.13 153.5); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tf-lock-link:hover { color: oklch(0.393 0.113 153.5); }
.tf-lock-note { margin-top: 4px; font-size: 12px; font-style: italic; color: oklch(0.709 0.01 56.259); }