/* The technology areas (WS-1020 "New areas"; sitebuild/geotech/areas.py): the marks on /geotech/tracker/ and the area
   pages /geotech/areas/ and /geotech/areas/<area>/. Loaded after geotech-tracker.css, whose tokens and classes it
   reuses (palette B's blues for data marks only). No inline styles (CSP). Phone first (W-115): the rows are cards, the
   first row's headline on the first 375x667 screen; nothing scrolls sideways. Copied into www/ only with geotech.areas
   on (and pages). */

/* the marks: Rule at home, Not read in the source, Opens later */
.gt-mk{font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;white-space:nowrap;display:inline-block}
.gt-mk-home{color:var(--d-navy);background:var(--d-faint);border:1px solid var(--d-pale)}
.gt-mk-unread{color:var(--ink);background:#fff;border:1.5px dotted var(--ink)}
.gt-mk-later{color:var(--graphite);border:1px solid var(--hair)}
.gt-page small.gt-unread-note{font-style:italic}

/* the families the areas add: swimlane dots and legend keys */
.gt-fam-robotics{fill:var(--d-navy);background:var(--d-navy);stroke:var(--d-pale);border:1px solid var(--d-pale);opacity:.75}
.gt-fam-batteries{fill:var(--d-pale);background:var(--d-pale);stroke:var(--d-blue);border:1px solid var(--d-blue)}
.gt-fam-space{fill:var(--paper);background:var(--paper);stroke:var(--d-navy);stroke-dasharray:2 1.5;border:1px dashed var(--d-navy)}
.gt-fam-biotech{fill:var(--d-faint);background:var(--d-faint);stroke:var(--d-navy);border:1px solid var(--d-navy)}
.gt-fam-cyber{fill:var(--d-blue);background:var(--d-blue);stroke:var(--d-navy);border:1px solid var(--d-navy);opacity:.6}

/* the tracker: the area links above the every-action table */
.gt-ar-nav{font:14px/1.6 var(--sans);margin:0 0 14px;max-width:var(--measure)}
.gt-ar-nav a{margin-right:10px;white-space:nowrap}
.gt-ar-key{display:block;font-size:12.5px;color:var(--graphite);margin-top:4px}
.gt-ar-foot{margin-top:8px}

/* the area page */
.gt-area .gt-ar-top{padding-bottom:4px}
.gt-ar-list{padding-top:12px}
.gt-ar-list h2{font-size:22px}
.gt-ar-rows{list-style:none;margin:10px 0 0;padding:0}
.gt-ar-row{background:#fff;border:1px solid var(--hair);border-left:3px solid var(--d-navy);padding:10px 12px 12px;margin-bottom:10px;min-width:0;overflow-wrap:anywhere}
.gt-ar-row.gt-cn{border-left-color:var(--d-blue)}
.gt-ar-row p{margin:0}
.gt-ar-meta{font:13px/1.4 var(--sans);color:var(--graphite)}
.gt-ar-meta .num{font:500 12.5px var(--mono);color:var(--ink);margin-right:6px}
.gt-ar-meta small{display:inline;margin-left:4px}
.gt-ar-t{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3;margin:6px 0 4px;max-width:none}
.gt-ar-marks{display:flex;flex-wrap:wrap;gap:4px 6px;margin:4px 0 2px}
.gt-ar-un{font:italic 12.5px/1.4 var(--sans);color:var(--graphite);margin-top:4px}
.gt-ar-fact,.gt-ar-src{font:13px/1.45 var(--sans);color:var(--ink);margin-top:6px}
.gt-ar-src{color:var(--graphite)}
.gt-ar-fact b,.gt-ar-src b{font-weight:600;color:var(--ink)}
.gt-ar-note{margin:16px 0 8px}
.gt-ar-keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;font:13px/1.45 var(--sans);color:var(--graphite);margin:8px 0 0}
.gt-ar-keys dt{margin:0}
.gt-ar-keys dd{margin:0}
.gt-ar-method{font:15px/1.5 var(--sans);max-width:var(--measure);margin:8px 0 0}
.gt-ar-method dt{font-weight:600;color:var(--ink);margin-top:12px}
.gt-ar-method dd{margin:2px 0 0;color:var(--ink)}
.gt-ar-due ul{list-style:none;margin:6px 0 0;padding:0}
.gt-ar-later{margin-top:16px}
.gt-ar-card h3 a{color:inherit;text-decoration:none}
.gt-ar-card h3 a:hover{text-decoration:underline}

@media (min-width:900px){
  .gt-ar-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gt-ar-row{margin:0}
  .gt-ar-t{font-size:19px}
}

/* the tracker's link row per area, at the end of the every-action table */
.gt-t tr.gt-ar-tr{background:var(--d-faint);border-color:var(--d-pale)}
.gt-ar-tr td{font:600 15px/1.4 var(--sans)}
.gt-ar-tr td small{font-weight:400}
@media (min-width:900px){
  .gt-t tr.gt-ar-tr td{background:var(--d-faint)}
}
.gt-ar-thr{font:13px/1.45 var(--sans);color:var(--graphite);margin-top:6px}
.gt-ar-thr b{font-weight:600;color:var(--ink)}
.gt-ar-lkh{font:600 15px/1.4 var(--sans);margin:14px 0 4px}
.gt-ar-lk{margin:0 0 8px;padding-left:18px;font:14px/1.5 var(--sans)}
.gt-ar-lk small{color:var(--graphite)}