/* ============================================================
   Habitlio — Everyday Tools widget styles
   Scoped entirely under .cn-widget so nothing here can leak
   into (or be overridden by) the main Habitlio theme CSS.
   Colors reference Habitlio's own CSS custom properties
   (defined in the page's :root) so migrated tools automatically
   stay on-brand with the rest of the site.
   ============================================================ */

.cn-widget { font-family: var(--font-body); }

.cn-widget .breadcrumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; display: flex; gap: 6px; align-items: center; }
.cn-widget .breadcrumb a { color: var(--primary); }
.cn-widget .breadcrumb span { opacity: 0.5; }

.cn-widget .tool-header { margin-bottom: 28px; }
.cn-widget .tool-header h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.2px; line-height: 1.2; color: var(--text); }
.cn-widget .tool-header p { color: var(--muted); font-size: 1rem; }

.cn-widget .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.cn-widget .tab-btn { padding: 7px 18px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 0.835rem; font-weight: 600; color: var(--muted); transition: all .15s; font-family: inherit; }
.cn-widget .tab-btn:hover, .cn-widget .tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.cn-widget .tool-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 28px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.cn-widget .tool-box label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 7px; color: var(--text); }
.cn-widget .tool-box textarea, .cn-widget .tool-box input[type="text"], .cn-widget .tool-box input[type="number"], .cn-widget .tool-box input[type="date"], .cn-widget .tool-box select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 0.925rem; font-family: inherit; resize: vertical; background: var(--bg); transition: border .15s; outline: none; color: var(--text);
}
.cn-widget .tool-box textarea:focus, .cn-widget .tool-box input:focus, .cn-widget .tool-box select:focus { border-color: var(--primary); background: var(--surface); }
.cn-widget .tool-box textarea { min-height: 160px; }

.cn-widget .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 0.855rem; cursor: pointer; border: none; transition: all .15s; font-family: inherit; }
.cn-widget .btn-primary { background: var(--primary); color: #fff; }
.cn-widget .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cn-widget .btn-secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--line); }
.cn-widget .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.cn-widget .btn-dark { background: var(--text); color: var(--bg); }
.cn-widget .btn-dark:hover { opacity: 0.88; }
.cn-widget .btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

.cn-widget .result-box { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 8px; padding: 16px; font-size: 0.9rem; min-height: 56px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.cn-widget .stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cn-widget .stat-chip { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 9px; padding: 11px 16px; text-align: center; min-width: 90px; flex: 1; }
.cn-widget .stat-chip .num { font-size: 1.5rem; font-weight: 800; color: var(--primary); font-family: var(--font-display); }
.cn-widget .stat-chip .lbl { font-size: 0.68rem; color: var(--muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.cn-widget .info-box { background: var(--primary-soft); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 8px; padding: 18px 22px; margin-top: 22px; }
.cn-widget .info-box h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 9px; color: var(--primary-hover); }
.cn-widget .info-box p, .cn-widget .info-box li { font-size: 0.855rem; color: var(--muted); line-height: 1.8; }
.cn-widget .info-box ol, .cn-widget .info-box ul { padding-left: 17px; }

.cn-widget .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.cn-widget .about-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; }
.cn-widget .about-box h2 { font-size: 1.2rem; margin-bottom: 12px; font-family: var(--font-display); color: var(--text); font-weight: 500; }
.cn-widget .about-box p { color: var(--muted); font-size: 0.9rem; line-height: 1.8; }

.cn-widget .ad-slot { display: none; } /* hidden placeholder until AdSense is approved & real ad units are added */

.cn-widget .bg-gray { background: var(--surface-2); }
.cn-widget .text-center { text-align: center; }
.cn-widget .divider { height: 1px; background: var(--line); margin: 28px 0; }

/* --- Tools directory / hub grid (used on /tools/) --- */
.cn-widget .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cn-widget .tool-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 22px 20px; transition: all .2s; cursor: pointer; display: block; position: relative; overflow: hidden; text-decoration: none; }
.cn-widget .tool-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.cn-widget .tool-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration: none; }
.cn-widget .tool-card:hover::after { transform: scaleX(1); }
.cn-widget .tool-icon { font-size: 1.9rem; margin-bottom: 12px; display: block; }
.cn-widget .tool-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--text); margin-bottom: 6px; font-family: var(--font-body); }
.cn-widget .tool-card p { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }
.cn-widget .category-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin: 40px 0 16px; color: var(--text); }
.cn-widget .category-title:first-child { margin-top: 0; }

@media (max-width: 768px) {
  .cn-widget .tool-box { padding: 20px; }
  .cn-widget .field-row { grid-template-columns: 1fr; }
}