/* ============================================================================
   Guardify design system
   ----------------------------------------------------------------------------
   Subject: brand-protection triage for Nordic financial institutions.
   Audience: security analysts who open this every morning and need to trust it.
   Job: show which domains threaten the brand right now, and let the analyst act.

   Direction: cold paper and deep slate, the palette of instrument panels rather
   than dashboards. Signal colours are borrowed from network tooling, used only
   where they carry meaning.

   Signature: the HOSTNAME DIFF. This product exists because a brand's domain
   and the name imitating it differ by a character or two, so the hostname is
   set large in monospace with the differing characters marked. It is the one
   piece of ornament, and it is not ornament - it is the finding itself.
   ========================================================================= */

:root {
    /* Structure: never pure black, never pure white. Screens are looked at for
       hours here, and pure #000/#FFF make edges vibrate. */
    --ink:        #0F1729;
    --ink-soft:   #33415C;
    --ink-mute:   #6A7A94;
    --paper:      #FBFCFE;
    --surface:    #FFFFFF;
    --rule:       #E3E8F0;
    --rule-soft:  #EFF2F7;

    /* [REVISED] Five signal colours made the interface loud and incoherent -
       red, amber, violet, green and indigo competing on one screen. The
       palette is now near-monochrome with a SINGLE accent, and severity is
       carried by weight and contrast rather than by hue. One colour that
       means "act on this" is read faster than five that each mean something.

       Everything neutral is a step on one slate ramp; only threat is
       chromatic. Verified keeps a muted green because "this is yours" is the
       one other state worth distinguishing at a glance. */
    --threat:     #B3261E;   /* the only loud colour in the interface */
    --threat-bg:  #FCF2F1;
    --threat-line:#EBC9C5;

    --caution:    #6B5A3E;   /* needs a decision - warm slate, not amber */
    --caution-bg: #FAF7F1;
    --caution-line:#E6DECE;

    --watch:      #4A5468;   /* under observation - neutral, deliberately quiet */
    --watch-bg:   #F4F6F9;
    --watch-line: #DDE3EC;

    --verified:   #2F6F52;   /* confirmed yours - muted, never celebratory */
    --verified-bg:#F2F8F4;
    --verified-line:#CFE3D6;

    --neutral-bg: #F4F6F9;

    /* Analysis accent - reserved for the AI's own reasoning, nothing else. */
    --signal:     #2F3A56;
    --signal-bg:  #F4F6F9;

    --radius:     10px;
    --radius-lg:  14px;
    --shadow-sm:  0 1px 2px rgba(15, 23, 41, .05);
    --shadow:     0 2px 8px rgba(15, 23, 41, .06), 0 1px 2px rgba(15, 23, 41, .04);
    --shadow-lift:0 8px 28px rgba(15, 23, 41, .10);

    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

body.gf {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-feature-settings: 'cv05' 1, 'ss03' 1;
    -webkit-font-smoothing: antialiased;
}

.gf h1, .gf h2, .gf h3, .gf .display {
    font-family: var(--font-display);
    letter-spacing: -0.021em;
    font-weight: 600;
}

/* Eyebrow labels. Used only where they name a real grouping, never to
   decorate a heading. */
.gf-eyebrow {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ---------------------------------------------------------------------------
   SIGNATURE: hostname diff
   The differing characters are marked, so the reason this row exists is
   legible before any label is read.
   ------------------------------------------------------------------------ */
.gf-host {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    word-break: break-all;
}
.gf-host mark {
    background: linear-gradient(to bottom, transparent 55%, rgba(196, 43, 28, .22) 55%);
    color: var(--threat);
    font-weight: 700;
    padding: 0 .5px;
    border-radius: 2px;
}
.gf-host .gf-tld { color: var(--ink-mute); }
.gf-host-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Finding cards. Cards rather than table rows, because a wide table pushed
   its own action buttons off the right edge - the layout has to reflow.
   ------------------------------------------------------------------------ */
.gf-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.gf-card:hover {
    box-shadow: var(--shadow);
    border-color: #D3DAE6;
}
.gf-card--threat  { border-left: 3px solid var(--threat); }
.gf-card--caution { border-left: 3px solid var(--caution); }
.gf-card--watch   { border-left: 3px solid var(--watch); }
.gf-card--verified{ border-left: 3px solid var(--verified); }
.gf-card--quiet   { border-left: 3px solid var(--rule); background: var(--neutral-bg); }

/* [COMPACT] An analyst scans a hundred of these. Row height matters more
   than breathing room, so the card is tightened to roughly two lines and the
   facts sit inline rather than stacked. */
.gf-card-body { padding: 9px 12px; }

.gf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) auto;
    gap: 12px;
    align-items: center;
}

/* Denser list rhythm: hairline separation instead of gaps between cards. */
.gf-list > .gf-card { border-radius: 0; border-bottom: none; box-shadow: none; }
.gf-list > .gf-card:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.gf-list > .gf-card:last-child {
    border-bottom: 1px solid var(--rule);
    border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
.gf-list > .gf-card:hover { background: #FCFDFE; }
@media (max-width: 860px) {
    .gf-grid { grid-template-columns: 1fr; gap: 10px; }
    .gf-actions { justify-content: flex-start; }
}

/* Actions stay reachable at every width - the previous layout hid them. */
.gf-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.gf-iconbtn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--ink-mute);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gf-iconbtn:hover { background: var(--neutral-bg); color: var(--ink); border-color: var(--rule); }
.gf-iconbtn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.gf-iconbtn--threat:hover { background: var(--threat-bg); color: var(--threat); border-color: var(--threat-line); }

/* ---------------------------------------------------------------------------
   Chips. One fact each, and the colour is the fact.
   ------------------------------------------------------------------------ */
.gf-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-display);
    font-size: 10px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
.gf-chip--threat   { background: var(--threat-bg);  color: var(--threat);
                     border: 1px solid var(--threat-line); }
.gf-chip--caution  { background: var(--caution-bg); color: var(--caution);
                     border: 1px solid var(--caution-line); }
.gf-chip--watch    { background: var(--watch-bg);   color: var(--watch);
                     border: 1px solid var(--watch-line); }
.gf-chip--verified { background: var(--verified-bg);color: var(--verified);
                     border: 1px solid var(--verified-line); }
.gf-chip--quiet    { background: var(--neutral-bg); color: var(--ink-mute);
                     border: 1px solid var(--rule); }
/* Solid is reserved for a confirmed external report - the one state that
   should stop the eye. */
.gf-chip--solid    { background: var(--threat);     color: #fff; border: 1px solid var(--threat); }

/* Metadata rows: registrar, IP, age. Monospace so columns align down the
   list even without a table. */
.gf-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
}
.gf-meta-label { color: var(--ink-mute); }

/* ---------------------------------------------------------------------------
   Section headers with live counts.
   ------------------------------------------------------------------------ */
.gf-section { margin-bottom: 28px; }
.gf-section-head {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
}
.gf-section-title {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 600;
    letter-spacing: -.015em;
}
.gf-section-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    background: var(--neutral-bg);
    padding: 1px 7px;
    border-radius: 5px;
}
.gf-section-note {
    font-size: 12px; color: var(--ink-mute);
    margin-left: auto; max-width: 46ch; text-align: right;
}
@media (max-width: 720px) {
    .gf-section-note { margin-left: 0; text-align: left; max-width: none; }
}

/* ---------------------------------------------------------------------------
   Risk banner. The level is the type size, not a gauge - a number nobody can
   calibrate against is worse than a word everybody can.
   ------------------------------------------------------------------------ */
.gf-risk {
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule);
    padding: 16px 18px;
    background: var(--surface);
}
.gf-risk-level {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700; letter-spacing: -.03em;
    line-height: 1;
}
.gf-risk--critical { background: var(--threat-bg);  border-color: var(--threat-line); }
.gf-risk--critical .gf-risk-level { color: var(--threat); }
.gf-risk--high     { background: var(--caution-bg); border-color: var(--caution-line); }
.gf-risk--high     .gf-risk-level { color: var(--caution); }
.gf-risk--medium   { background: var(--neutral-bg); border-color: var(--rule); }
.gf-risk--medium   .gf-risk-level { color: var(--ink-soft); }
.gf-risk--low      { background: var(--neutral-bg); border-color: var(--rule); }
.gf-risk--low      .gf-risk-level { color: var(--ink-soft); }
.gf-risk--none     { background: var(--verified-bg);border-color: var(--verified-line); }
.gf-risk--none     .gf-risk-level { color: var(--verified); }

.gf-driver {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: var(--ink-soft);
    padding: 3px 0;
}

/* ---------------------------------------------------------------------------
   Summary tiles. Deliberately not four identical boxes: the one that needs
   action is larger, because it is not equal to the others.
   ------------------------------------------------------------------------ */
.gf-tiles {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 780px) { .gf-tiles { grid-template-columns: 1fr; } }

.gf-tile {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 16px;
    background: var(--surface);
    display: block;
    transition: box-shadow .18s ease, transform .18s ease;
}
.gf-tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.gf-tile-value {
    font-family: var(--font-display);
    font-size: 34px; font-weight: 700; letter-spacing: -.035em;
    line-height: 1; margin-top: 6px;
}
.gf-tile--threat   { background: var(--threat-bg);   border-color: var(--threat-line); }
.gf-tile--threat   .gf-tile-value { color: var(--threat); font-size: 42px; }
.gf-tile--verified { background: var(--verified-bg); border-color: var(--verified-line); }
.gf-tile--verified .gf-tile-value { color: var(--verified); }
.gf-tile-sub { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; }

/* ---------------------------------------------------------------------------
   Search
   ------------------------------------------------------------------------ */
.gf-search {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 9px 34px 9px 34px;
    border: 1px solid var(--rule);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-search::placeholder { color: var(--ink-mute); font-family: var(--font-body); }
.gf-search:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(44, 58, 175, .10);
}

/* Empty states are an invitation, not an apology. */
.gf-empty {
    border: 1px dashed var(--rule);
    border-radius: var(--radius-lg);
    padding: 34px 20px;
    text-align: center;
    color: var(--ink-mute);
    background: var(--surface);
}

/* Destructive hover for icon buttons - the threat colour appears only when
   the pointer commits to the destructive action, never at rest. */
.gf-del-hover:hover { color: var(--threat) !important; background: var(--threat-bg) !important; }

/* Affirmative hover: enabling something, confirming a verdict. */
.gf-ok-hover:hover { color: var(--verified) !important; background: var(--verified-bg) !important; }

/* Schedule toggle states. On = quietly verified; off = dormant grey. The
   hover utilities above provide the "what happens if I click" preview:
   on + del-hover (clicking disables), off + ok-hover (clicking enables). */
.gf-sched-on  { color: var(--verified); background: var(--verified-bg); border-color: var(--verified-line) !important; }
.gf-sched-off { color: var(--ink-mute); background: var(--neutral-bg);  border-color: var(--rule) !important; }

/* Respect the reader's settings without announcing it. */
@media (prefers-reduced-motion: reduce) {
    .gf-card, .gf-tile, .gf-iconbtn { transition: none; }
    .gf-tile:hover { transform: none; }
}

/* ============================================================================
   Shared surfaces
   The other views were still using framework defaults, so the product read as
   two designs bolted together. These map the common patterns onto the same
   tokens without rewriting each template.
   ========================================================================= */

/* Framework surfaces adopt the paper/rule tokens */
.gf .card,
.gf .rounded-xl.border,
.gf .rounded-lg.border {
    border-color: var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Tailwind palette utilities still used across the older tabs, remapped so a
   single change of token moves the whole interface. */
.gf .bg-red-50,    .gf .bg-red-50\/60,    .gf .bg-red-50\/40    { background: var(--threat-bg)   !important; }
.gf .bg-amber-50,  .gf .bg-amber-50\/60,  .gf .bg-amber-50\/50,
.gf .bg-orange-50, .gf .bg-orange-50\/60, .gf .bg-orange-50\/40 { background: var(--caution-bg)  !important; }
.gf .bg-violet-50, .gf .bg-violet-50\/60, .gf .bg-indigo-50     { background: var(--watch-bg)    !important; }
.gf .bg-emerald-50,.gf .bg-emerald-50\/60,.gf .bg-emerald-50\/50,
.gf .bg-emerald-50\/40, .gf .bg-green-50                        { background: var(--verified-bg) !important; }
.gf .bg-slate-50,  .gf .bg-slate-50\/60,  .gf .bg-blue-50\/50   { background: var(--neutral-bg)  !important; }

.gf .text-red-600,   .gf .text-red-700,   .gf .text-red-800     { color: var(--threat)   !important; }
.gf .text-amber-600, .gf .text-amber-700, .gf .text-amber-800,
.gf .text-orange-600,.gf .text-orange-700,.gf .text-orange-800  { color: var(--caution)  !important; }
.gf .text-violet-500,.gf .text-violet-600,.gf .text-violet-700,
.gf .text-indigo-500,.gf .text-indigo-600,.gf .text-indigo-800  { color: var(--watch)    !important; }
.gf .text-emerald-600,.gf .text-emerald-700,.gf .text-green-600 { color: var(--verified) !important; }

.gf .border-red-100,   .gf .border-red-200,   .gf .border-red-300    { border-color: var(--threat-line)  !important; }
.gf .border-amber-100, .gf .border-amber-200, .gf .border-amber-300,
.gf .border-orange-100,.gf .border-orange-200                        { border-color: var(--caution-line) !important; }
.gf .border-violet-100,.gf .border-violet-200,.gf .border-indigo-100 { border-color: var(--watch-line)   !important; }
.gf .border-emerald-100,.gf .border-emerald-200                      { border-color: var(--verified-line)!important; }
.gf .border-slate-100, .gf .border-slate-200                         { border-color: var(--rule)         !important; }

/* Headings and monospace data everywhere, not only on the findings page */
.gf .font-mono, .gf code, .gf pre { font-family: var(--font-mono); }
.gf .uppercase.tracking-wider, .gf .uppercase.tracking-wide {
    font-family: var(--font-display);
    letter-spacing: .09em;
}

/* Navigation: one active state, quiet the rest */
.gf .menu-item {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-mute);
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}
.gf .menu-item:hover { color: var(--ink); background: var(--neutral-bg); box-shadow: none; }
.gf .menu-item.active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--rule);
}

/* Primary actions inherit the ink, not a framework blue */
.gf .btn-primary, .gf .btn-neutral {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
}
.gf .btn-primary:hover, .gf .btn-neutral:hover { background: #1B2740; border-color: #1B2740; }

/* Header actions: one button style, so the toolbar stops looking like three
   different toolbars. */
.gf-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.gf-btn:hover { border-color: #CFD7E3; color: var(--ink); background: #FCFDFE; }
.gf-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.gf-btn i { font-size: 11px; color: var(--ink-mute); }
.gf-btn:hover i { color: var(--ink-soft); }