/* Tag-check page: page styles on top of fk-theme.css (fk-* components are defined there, do not redefine them). */

/* =====================================================================================================
   Verifica del tag (Supporto > tag-check)

   Everything is scoped under .fk-page-tagcheck, the root of app/views/tag-check.html; the root also
   holds the Bootstrap proof modal (#proofModal), so the modal rules are scoped the same way.
   The tree-*, badge-leaf/left/right/root, mono, tiny, selectable and json-pre classes come from the
   inline <style> the view used to carry (several are written by ng-class): same names, theme palette.

   Contents
     1. Search card
     2. Consent card: head (project, policy, status) and label/value rows
     3. Treatments with channels, field and treatment chips
     4. Revocation card
     5. Proof modal: layout, summary cards, OTS card, tree, OTS segments, JSON
     6. Responsive
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Search card
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-tagcheck .tc-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.fk .fk-page-tagcheck .tc-search-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    font-family: var(--fk-mono);
    font-size: .85rem;
}

body.fk .fk-page-tagcheck .tc-search-row .form-control::placeholder {
    font-family: var(--fk-font);
    font-size: .9375rem;
}

body.fk .fk-page-tagcheck .tc-search-row .btn {
    flex: 0 0 auto;
    height: 38px;
    padding-left: 18px;
    padding-right: 18px;
}

body.fk .fk-page-tagcheck .tc-invalid {
    display: block;
    margin-top: 6px;
    color: var(--fk-bad-ink);
    font-size: .78rem;
}

/* The field itself shows the error too: Angular sets ng-dirty + ng-invalid exactly when the
   "Tag required" message is shown (the only validator is required) */
body.fk .fk-page-tagcheck .tc-search-row .form-control.ng-dirty.ng-invalid {
    border-color: var(--fk-bad);
}

body.fk .fk-page-tagcheck .tc-search-row .form-control.ng-dirty.ng-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 48, 37, .15);
}


/* -----------------------------------------------------------------------------------------------------
   2. Consent card
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-tagcheck .tc-head-main {
    flex: 1 1 320px;
    min-width: 0;
}

/* Project: a link to its policies (accent + subtle underline, see "Links among the values" below);
   muted grey made it read as plain meta text */
body.fk .fk-page-tagcheck .tc-project {
    display: inline-block;
    margin-bottom: 4px;
    font-size: .8rem;
    font-weight: 600;
}

/* Policy id badge on the first line of the name when a long name wraps */
body.fk .fk-page-tagcheck .tc-policy {
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow-wrap: anywhere;
}

body.fk .fk-page-tagcheck .tc-policy .fk-badge {
    flex: 0 0 auto;
}

/* Status: small caps label + one badge */
body.fk .fk-page-tagcheck .tc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

body.fk .fk-page-tagcheck label.fk-badge {
    margin: 0;
}

body.fk .fk-page-tagcheck .fk-badge.text-wrap {
    text-align: left;
}

/* Label / value rows separated by a hairline (same typography as fk-kv) */
body.fk .fk-page-tagcheck .tc-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4px 24px;
    align-items: baseline;
    padding: 12px 16px;
    border-top: 1px solid var(--fk-line);
}

body.fk .fk-page-tagcheck .tc-rows > .tc-row:first-child {
    border-top: 0;
}

body.fk .fk-page-tagcheck .tc-k {
    min-width: 0;
}

body.fk .fk-page-tagcheck .tc-label {
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Row labels are blocks with their own line height: inline, a label that wraps ("TRANSAZIONE
   BLOCKCHAIN DEL PDF REVOCATO") took the 22px line box of the row font, a loose gap between lines */
body.fk .fk-page-tagcheck .tc-k > .tc-label {
    display: block;
    line-height: 1.4;
}

body.fk .fk-page-tagcheck .tc-formula,
body.fk .fk-page-tagcheck .tc-hint {
    margin-top: 3px;
    color: var(--fk-muted);
    font-size: .76rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body.fk .fk-page-tagcheck .tc-formula {
    font-family: var(--fk-mono);
    font-size: .72rem;
}

body.fk .fk-page-tagcheck .tc-v {
    min-width: 0;
    color: var(--fk-ink);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

/* Hashes, ids, transaction ids */
body.fk .fk-page-tagcheck .tc-hash {
    font-family: var(--fk-mono);
    font-size: .82rem;
    line-height: 1.5;
    word-break: break-all;
    user-select: text;
}

body.fk .fk-page-tagcheck .tc-v > a.tc-hash:empty {
    display: none;
}

/* Transaction links stay inline: as inline-blocks their baseline was the LAST line of a wrapped id,
   and the row label (grid baseline alignment) dropped to the second line of the value */
body.fk .fk-page-tagcheck .tc-v > a.tc-hash {
    display: inline;
}

/* Links among the values (transaction ids, anchoring links, the project): the navy accent alone is
   too close to the ink of the hashes next to them, a subtle underline marks them as the theme does
   for links in running text */
body.fk .fk-page-tagcheck .tc-project,
body.fk .fk-page-tagcheck .tc-v a:not(.btn),
body.fk .fk-page-tagcheck .tc-field a:not(.btn) {
    color: var(--fk-accent);
    text-decoration: underline;
    text-decoration-color: rgba(31, 56, 100, .35);
    text-underline-offset: 2px;
}

/* Links that start with an icon (Bitcoin transaction / block): the icon marks them; the underline
   would also run under the space after the icon, so it shows on hover only */
body.fk .fk-page-tagcheck .tc-v a:not(.btn):has(> .fa),
body.fk .fk-page-tagcheck .tc-field a:not(.btn):has(> .fa) {
    text-decoration-color: transparent;
}

body.fk .fk-page-tagcheck .tc-project:hover,
body.fk .fk-page-tagcheck .tc-v a:not(.btn):hover,
body.fk .fk-page-tagcheck .tc-field a:not(.btn):hover {
    color: var(--fk-accent-2);
    text-decoration-color: currentColor;
}

body.fk .fk-page-tagcheck .tc-date {
    display: block;
    margin-top: 2px;
    color: var(--fk-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* Value with an action (Merkle tree buttons). Under 1200px the hash wraps anyway and the button
   goes under it, aligned with the value (before, it wrapped to the far right, detached from it);
   from 1200px hash and button share the line, button on the right (see Responsive). An empty hash
   (consent not hashed yet) is dropped, so the button sits on the label's line. */
body.fk .fk-page-tagcheck .tc-with-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

body.fk .fk-page-tagcheck .tc-with-action > .tc-hash {
    flex: 1 1 100%;
    min-width: 0;
}

body.fk .fk-page-tagcheck .tc-with-action > .tc-hash:empty {
    display: none;
}

body.fk .fk-page-tagcheck .tc-with-action > .btn {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

body.fk .fk-page-tagcheck .tc-with-action > .btn .fa,
body.fk .fk-page-tagcheck .tc-btns .btn .fa {
    margin-right: 2px;
    color: var(--fk-muted);
}

/* anchoring-status-badge (directive markup: badge + provider + links) */
body.fk .fk-page-tagcheck anchoring-status-badge .badge {
    border-radius: 12px;
    white-space: normal;
    text-align: left;
}

/* Its detail lines (.small = 80% of the row font) on the same scale as the other rows: block and
   tx lines as the tx dates, the tx id as the other hashes */
body.fk .fk-page-tagcheck .tc-v anchoring-status-badge .d-block {
    font-size: .78rem;
}

/* first detail line under the badge (or the provider name): a little air; !important beats mt-1 */
body.fk .fk-page-tagcheck .tc-v anchoring-status-badge :not(.d-block) + .d-block {
    margin-top: 6px !important;
}

body.fk .fk-page-tagcheck .tc-v anchoring-status-badge a.mono {
    font-size: .8rem;
}


/* -----------------------------------------------------------------------------------------------------
   3. Treatments with channels, field and treatment chips
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-tagcheck .tc-cond-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.fk .fk-page-tagcheck .tc-cond-line + .tc-cond-line {
    margin-top: 6px;
}

/* ng-class adds border-success text-success (accepted) or border-secondary text-muted */
body.fk .fk-page-tagcheck .tc-cond {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-pill);
    background: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

body.fk .fk-page-tagcheck .tc-cond .fa {
    font-size: .72rem;
}

body.fk .fk-page-tagcheck .tc-cond.border-success {
    background: var(--fk-ok-bg);
    border-color: rgba(46, 158, 79, .28) !important;
    color: var(--fk-ok-ink) !important;
}

body.fk .fk-page-tagcheck .tc-cond.border-secondary {
    background: var(--fk-neutral-bg);
    border-color: var(--fk-line) !important;
    color: var(--fk-neutral-ink) !important;
}

body.fk .fk-page-tagcheck .tc-channel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-pill);
    background: var(--fk-surface);
    color: var(--fk-ink-2);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
}

body.fk .fk-page-tagcheck .tc-channel i {
    color: var(--fk-muted);
}

/* Fields / treatments of the consent */
body.fk .fk-page-tagcheck .tc-block + .tc-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fk-line);
}

body.fk .fk-page-tagcheck .tc-block-label {
    margin-bottom: 10px;
}

body.fk .fk-page-tagcheck .tc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.fk .fk-page-tagcheck .tc-chip-item {
    min-width: 0;
    max-width: 100%;
}

/* ng-class adds "border border-dark rounded px-3" + bg-success (data sent / treatment accepted),
   bg-secondary (not given) or bg-danger (revoked), all with text-white: Bootstrap utilities are
   !important, so are these overrides */
body.fk .fk-page-tagcheck .tc-chip {
    display: inline-block;
    max-width: 100%;
    padding: 3px 12px 3px 4px !important;
    border: 1px solid var(--fk-line) !important;
    border-radius: 16px !important; /* pill on one line, rounded box when a long name wraps */
    background-color: var(--fk-soft) !important;
    color: var(--fk-muted) !important;
    font-size: .84rem;
    font-weight: 500;
    line-height: 24px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

body.fk .fk-page-tagcheck .tc-chip.bg-success {
    border-color: rgba(46, 158, 79, .28) !important;
    background-color: var(--fk-ok-bg) !important;
    color: var(--fk-ok-ink) !important;
}

body.fk .fk-page-tagcheck .tc-chip.bg-danger {
    border-color: rgba(217, 48, 37, .25) !important;
    background-color: var(--fk-bad-bg) !important;
    color: var(--fk-bad-ink) !important;
}

body.fk .fk-page-tagcheck .tc-chip.bg-secondary {
    border-style: dashed !important;
    border-color: var(--fk-line-2) !important;
}

body.fk .fk-page-tagcheck .tc-chip-id {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    margin-right: 3px;
    padding: 0 7px;
    border: 1px solid rgba(20, 30, 60, .08);
    border-radius: var(--fk-r-pill);
    background: var(--fk-surface);
    color: inherit;
    font-size: .74rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

/* revoked: the fa-ban span comes first, before the id bubble */
body.fk .fk-page-tagcheck .tc-chip > span:first-child:not(.ng-hide):not(.tc-chip-id) {
    padding-left: 6px;
}


/* -----------------------------------------------------------------------------------------------------
   4. Revocation card
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-tagcheck .tc-title-bad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fk-bad-ink);
}

body.fk .fk-page-tagcheck .tc-head-date {
    color: var(--fk-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------------------------------------------------------
   5. Proof modal (#proofModal)
   ----------------------------------------------------------------------------------------------------- */

/* Shared text helpers of the modal (formerly inline in the view) */
body.fk .fk-page-tagcheck .mono {
    font-family: var(--fk-mono);
    word-break: break-all;
}

body.fk .fk-page-tagcheck .tiny {
    font-size: .75rem;
}

body.fk .fk-page-tagcheck .selectable {
    user-select: text;
}

/* Title in the text flow (icon, title, root badge): wraps as a sentence on phones */
body.fk .fk-page-tagcheck .tc-modal-title {
    min-width: 0;
    line-height: 1.45;
}

body.fk .fk-page-tagcheck .tc-modal-title > .fa {
    margin-right: 4px;
    color: var(--fk-muted);
    font-size: 1rem;
}

body.fk .fk-page-tagcheck .tc-modal-title > .badge {
    margin-left: 6px;
    font-size: .75rem;
    vertical-align: 2px;
}

body.fk .fk-page-tagcheck #proofModal .modal-header .close {
    margin-left: 12px;
    color: var(--fk-muted);
    text-shadow: none;
    opacity: 1;
}

body.fk .fk-page-tagcheck #proofModal .modal-header .close:hover {
    color: var(--fk-ink);
}

/* Soft page background inside the modal: white cards on top, as on the page */
body.fk .fk-page-tagcheck .tc-modal-body {
    padding: 16px;
    background: var(--fk-bg);
}

body.fk .fk-page-tagcheck .tc-modal-body .fk-card-head {
    padding: 12px 16px;
}

body.fk .fk-page-tagcheck .tc-modal-body .fk-card-head > .badge {
    border-radius: 12px;
    white-space: normal;
    text-align: left;
}

/* "Path NOT consistent" is also shown while the internal proof is not available yet: ng-class then
   sets no colour, the badge falls back to neutral instead of bare bold text */
body.fk .fk-page-tagcheck .tc-modal-body .fk-card-head > .badge:not(.badge-success):not(.badge-danger):not(.badge-secondary):not(.badge-warning) {
    background-color: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
}

body.fk .fk-page-tagcheck .tc-modal-body .fk-card-title .fa {
    margin-right: 4px;
    color: var(--fk-muted);
}

body.fk .fk-page-tagcheck .tc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

body.fk .fk-page-tagcheck .tc-grid-2 > .fk-card {
    margin-bottom: 0;
}

body.fk .fk-page-tagcheck .tc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 20px;
}

/* Label above value */
body.fk .fk-page-tagcheck .tc-field {
    min-width: 0;
    font-size: .85rem;
}

body.fk .fk-page-tagcheck .fk-card-body > .tc-field + .tc-field {
    margin-top: 12px;
}

body.fk .fk-page-tagcheck .tc-field-k {
    margin-bottom: 3px;
    color: var(--fk-muted);
    font-size: .78rem;
    font-weight: 600;
}

body.fk .fk-page-tagcheck .tc-field .mono {
    font-size: .8rem;
}

body.fk .fk-page-tagcheck .tc-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
}

body.fk .fk-page-tagcheck .tc-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* OpenTimestamps card */
body.fk .fk-page-tagcheck .tc-ots .tc-field a.mono {
    word-break: normal;
}

body.fk .fk-page-tagcheck .tc-note {
    margin: 14px 0 0;
    font-size: .82rem;
    line-height: 1.55;
}

body.fk .fk-page-tagcheck .tc-note-top {
    margin: 0 0 14px;
}

body.fk .fk-page-tagcheck .tc-note .fa-info-circle {
    margin-right: 2px;
    color: var(--fk-info);
}

body.fk .fk-page-tagcheck .tc-note .mono {
    padding: 1px 5px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: 4px;
    font-size: .76rem;
    word-break: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.fk .fk-page-tagcheck .tc-ots-pending {
    margin-top: 10px;
}

/* Merkle tree (internal + external path) */
body.fk .fk-page-tagcheck .tree-wrap {
    position: relative;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-1);
}

body.fk .fk-page-tagcheck .tree-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

body.fk .fk-page-tagcheck .tc-path-title {
    margin: 0 0 10px;
    color: var(--fk-ink-2);
    font-size: .9rem;
    font-weight: 600;
}

body.fk .fk-page-tagcheck .tc-leafsrc {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
    font-size: .82rem;
}

body.fk .fk-page-tagcheck .tc-leafsrc-title {
    margin-bottom: 4px;
    color: var(--fk-ink-2);
    font-size: .8rem;
    font-weight: 600;
}

body.fk .fk-page-tagcheck .tc-leafsrc-title .fa {
    margin-right: 2px;
    color: var(--fk-info);
}

body.fk .fk-page-tagcheck .tc-leafsrc-formula {
    margin-bottom: 8px;
    color: var(--fk-ink-2);
}

body.fk .fk-page-tagcheck .tc-leafsrc-salt {
    margin-top: 8px;
}

body.fk .fk-page-tagcheck .tree-track {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.fk .fk-page-tagcheck .tree-step + .tree-step {
    margin-top: 2px;
}

body.fk .fk-page-tagcheck .tree-step > .tree-level + .tree-level {
    margin-top: 8px;
}

body.fk .fk-page-tagcheck .tree-level {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

body.fk .fk-page-tagcheck .tree-node {
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

body.fk .fk-page-tagcheck .tree-node.leaf {
    background: #f7f9fd;
    border-color: rgba(31, 56, 100, .22);
}

body.fk .fk-page-tagcheck .tree-node.sibling.left {
    background: #f6fafd;
    border-color: rgba(47, 111, 159, .3);
}

body.fk .fk-page-tagcheck .tree-node.sibling.right {
    background: #fffaf4;
    border-color: rgba(240, 124, 0, .3);
}

body.fk .fk-page-tagcheck .tree-node.root {
    background: #f5fbf7;
    border-color: rgba(46, 158, 79, .3);
}

/* "hole" for a missing leaf */
body.fk .fk-page-tagcheck .tree-hole,
body.fk .fk-page-tagcheck .tree-node.tree-hole {
    background: var(--fk-warn-bg);
    border: 1px dashed var(--fk-warn);
    color: var(--fk-warn-ink);
}

body.fk .fk-page-tagcheck .tree-connector {
    justify-self: center;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--fk-line-2);
}

body.fk .fk-page-tagcheck .tree-arrow {
    color: var(--fk-muted);
    font-family: var(--fk-mono);
    font-size: .76rem;
    text-align: center;
}

body.fk .fk-page-tagcheck .tree-note {
    display: block;
    margin-top: 4px;
    color: var(--fk-muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

/* Node role badges (legend + nodes); ng-class writes badge-leaf/left/right and badge-warning */
body.fk .fk-page-tagcheck .tree-wrap .badge {
    padding: 2px 8px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.45;
}

body.fk .fk-page-tagcheck .tree-node > .badge {
    margin-bottom: 4px;
}

body.fk .fk-page-tagcheck .badge-leaf  { background: var(--fk-accent-soft); color: var(--fk-accent); }
body.fk .fk-page-tagcheck .badge-left  { background: var(--fk-info-bg);     color: var(--fk-info-ink); }
body.fk .fk-page-tagcheck .badge-right { background: var(--fk-orange-bg);   color: var(--fk-orange-ink); }
body.fk .fk-page-tagcheck .badge-root  { background: var(--fk-ok-bg);       color: var(--fk-ok-ink); }

body.fk .fk-page-tagcheck .tree-node .badge-warning {
    background: var(--fk-surface);
    color: var(--fk-warn-ink);
}

body.fk .fk-page-tagcheck .tc-nonce {
    margin-left: 4px;
    border: 1px solid var(--fk-line);
    font-family: var(--fk-font);
    letter-spacing: 0;
    cursor: help;
}

/* INTERNAL / EXTERNAL divider */
body.fk .fk-page-tagcheck .tree-divider {
    position: relative;
    margin: 20px 0;
    text-align: center;
}

body.fk .fk-page-tagcheck .tree-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--fk-line-2);
}

body.fk .fk-page-tagcheck .tree-divider .label {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    padding: 5px 14px;
    border-radius: var(--fk-r-pill);
    background: var(--fk-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
}

/* OpenTimestamps path segments */
body.fk .fk-page-tagcheck .tc-ots-leaf {
    margin-bottom: 14px;
}

body.fk .fk-page-tagcheck .tc-seg {
    margin-bottom: 14px;
    box-shadow: none;
}

body.fk .fk-page-tagcheck .tc-seg > .fk-card-head {
    background: var(--fk-soft);
    border-radius: calc(var(--fk-r) - 1px) calc(var(--fk-r) - 1px) 0 0; /* inside the 1px border */
}

body.fk .fk-page-tagcheck .tc-seg-title {
    color: var(--fk-ink);
    font-size: .875rem;
    font-weight: 600;
}

body.fk .fk-page-tagcheck .tc-seg-body {
    padding: 12px;
}

body.fk .fk-page-tagcheck .tc-seg-row + .tc-seg-row {
    margin-top: 12px;
}

body.fk .fk-page-tagcheck .tc-seg-row .tree-level + .tree-level {
    margin-top: 8px;
}

body.fk .fk-page-tagcheck .tc-tx-bytes {
    margin-top: 2px;
}

/* Raw JSON */
body.fk .fk-page-tagcheck .tc-json {
    margin-bottom: 0;
}

body.fk .fk-page-tagcheck .json-pre {
    min-height: 44px;
    max-height: 360px;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
    font-size: .75rem;
    line-height: 1.5;
    word-break: normal;
}


/* -----------------------------------------------------------------------------------------------------
   6. Responsive
   ----------------------------------------------------------------------------------------------------- */

/* Bootstrap gives modal-xl only 500px between 576 and 991px: the tree needs the room */
@media (min-width: 576px) and (max-width: 1199.98px) {
    body.fk .fk-page-tagcheck #proofModal .modal-dialog {
        max-width: calc(100% - 48px);
    }
}

/* Wide value column: hash and Merkle-tree button on one line, button on the right */
@media (min-width: 1200px) {
    body.fk .fk-page-tagcheck .tc-with-action > .tc-hash {
        flex-basis: 280px;
    }

    body.fk .fk-page-tagcheck .tc-with-action > .btn {
        margin-left: auto;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    body.fk .fk-page-tagcheck .tc-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.fk .fk-page-tagcheck .tc-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    body.fk .fk-page-tagcheck .tc-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-page-tagcheck .tc-grid-4,
    body.fk .fk-page-tagcheck .tc-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    body.fk .fk-page-tagcheck .tc-modal-body,
    body.fk .fk-page-tagcheck .tree-wrap {
        padding: 12px;
    }

    /* Tree: one column, left node above right node; the empty grid placeholders and the
       horizontal connector are dropped */
    body.fk .fk-page-tagcheck .tree-level {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    body.fk .fk-page-tagcheck .tree-level > div:empty {
        display: none;
    }
}