/* --------------------------------------------
   Pencil / Sketch theme (monochrome)
   --> /assets/tools-funthos.css
   -------------------------------------------- */
:root{
    --paper: #f8f7f3;      /* off‑white paper */
    --ink:   #0e0e0e;      /* darkest pencil */
    --graph: #c9c7c2;      /* light graphite */
    --muted: #4d4d4d;      /* text secondary */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
    margin:0; color:var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background:
        /* paper texture via cross‑hatching */
            repeating-linear-gradient( 45deg, rgba(0,0,0,.03) 0 1px, transparent 1px 6px),
            repeating-linear-gradient(-45deg, rgba(0,0,0,.025) 0 1px, transparent 1px 7px),
            var(--paper);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    image-rendering: -webkit-optimize-contrast;
}

a{ color:inherit; text-decoration: none; }

.container{ max-width:1080px; margin:0 auto; padding:20px; }

/* Header with animated scribble badge */
header{ position:sticky; top:0; z-index:40; background: rgba(248,247,243,.9); backdrop-filter: blur(4px); border-bottom: 2px solid var(--ink); }
.header-inner{ display:flex; align-items:center; gap:14px; padding:14px 20px; }

.badge{
    position: relative; width:58px; height:58px; display:grid; place-items:center;
    filter: grayscale(1) contrast(1.1);
}
.badge svg{ position:absolute; inset:0; }
.badge .mark{
    width:44px; height:50px; border:2px solid var(--ink); border-radius:12px; background:linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,0));
    display:grid; place-items:center; font-weight:900; font-size:14px;
    box-shadow: 2px 2px 0 0 var(--ink);
}
/* eye‑catcher: animated scribble ring */
@keyframes draw {
    from { stroke-dashoffset: 480; }
    to   { stroke-dashoffset: 0; }
}

.brand{ font-weight:900; font-size:24px; letter-spacing:.3px; text-transform:uppercase; }
.tagline{ color:var(--muted); font-size:14px }
.spacer{ flex:1 }

/* Controls styled like hand‑drawn fields */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.field{ position:relative; }
.label{ position:absolute; left:12px; top:-10px; background: var(--paper); padding:0 6px; font-size:12px; color:var(--muted); }
.input, .select{
    appearance:none; background: var(--paper); color: var(--ink); border:2px solid var(--ink);
    padding:10px 12px; border-radius:10px; min-width:220px; outline:none;
    box-shadow: 3px 3px 0 0 var(--ink);
    background-image:
            repeating-linear-gradient( 45deg, rgba(0,0,0,.03) 0 1px, transparent 1px 6px),
            repeating-linear-gradient(-45deg, rgba(0,0,0,.025) 0 1px, transparent 1px 7px);
}
.input:focus, .select:focus { box-shadow: 3px 3px 0 0 var(--ink), 0 0 0 6px rgba(17,17,17,.08) inset; }

.btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:800;
    background: var(--paper); color: var(--ink); border:2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
    transition: transform .08s ease; cursor:pointer;
}
.btn:hover{ transform: translate(-1px, -1px); }
.btn svg{ width:16px; height:16px; }

main{ padding:28px 20px 60px; }
h1{ margin: 6px 0 0; font-size:28px; text-transform: uppercase; letter-spacing:.5px; }
.subhead{ color:var(--muted); margin:8px 0 24px; }

/* Cards with sketch borders + hatching */
.grid{ display:grid; grid-template-columns: repeat( auto-fill, minmax(250px,1fr) ); gap:18px; }
.card{
    position:relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 16px; display:flex; flex-direction:column; gap:8px;
    box-shadow: 3px 3px 0 0 var(--ink);
    overflow:hidden;
}
.card:before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
    background:
            repeating-linear-gradient( 45deg, #000 0 1px, transparent 1px 8px);
    mix-blend-mode: multiply;
}
.card:hover{ transform: rotate(.2deg); }

.emoji{ font-size:24px }
.card h3{ margin:4px 0 2px; font-size:18px; }
.summary{ color:#222; font-size:14px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-size:12px; padding:3px 8px; border-radius:999px; border:2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); background:var(--paper); }

.meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.pill{ font-size:12px; color:#111; border:2px dashed var(--ink); padding:6px 10px; border-radius:999px; background: var(--paper); box-shadow: 2px 2px 0 0 var(--ink); }
.go{
    display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; font-weight:900; text-transform:uppercase; letter-spacing:.3px;
    background: var(--paper); color: var(--ink); border:2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
}
.go:hover{ transform: translate(-1px, -1px); }

.empty{ text-align:center; color:var(--muted); padding:40px 0 }

footer{ border-top:2px solid var(--ink); padding:20px; color:var(--muted); font-size:14px; background:var(--paper); }

/* Accessible helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Rough border for the main paper panel */
.paper{ border:2px solid var(--ink); border-radius:16px; box-shadow: 5px 5px 0 0 var(--ink); background: var(--paper); }

/* Tiny pencil doodles in corners */
.doodle{ position:absolute; width:120px; height:120px; opacity:.08; }
.doodle.top-left{ top:-20px; left:-10px; transform: rotate(-12deg); }
.doodle.bottom-right{ bottom:-30px; right:-10px; transform: rotate(9deg); }

/* Make sure everything stays monochrome */
img, svg { filter: grayscale(1) contrast(1.05); }